@hig/banner - npm Package Compare versions

Comparing version 2.3.3 to 3.0.0

build/index.es.js

@@ -1,6 +0,5 @@
-import React, { Component } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
 import { css, cx } from 'emotion';
 import ThemeContext from '@hig/theme-context';
-import { polyfill } from 'react-lifecycles-compat';
 import IconButton from '@hig/icon-button';
@@ -351,98 +350,101 @@ import Typography from '@hig/typography';
 /** @type {BannerAnimatorUpdater} */
-function startExpand() {
-  return {
-    status: statuses.EXPANDING
-  };
+function startExpand(setState) {
+  var setStatus = setState.setStatus;
+
+
+  setStatus(statuses.EXPANDING);
 }
 
 /** @type {BannerAnimatorUpdater} */
-function startCollapse() {
-  return {
-    status: statuses.COLLAPSING
-  };
+function startCollapse(setState) {
+  var setStatus = setState.setStatus;
+
+
+  setStatus(statuses.COLLAPSING);
 }
 
 /** @type {BannerAnimatorUpdater} */
-function endExpand() {
-  return {
-    status: statuses.EXPANDED,
-    wrapperStyle: getWrapperReset(),
-    innerWrapperStyle: getInnerWrapperReset()
-  };
+function endExpand(setState) {
+  var setStatus = setState.setStatus,
+      setWrapperStyle = setState.setWrapperStyle,
+      setInnerWrapperStyle = setState.setInnerWrapperStyle;
+
+  setStatus(statuses.EXPANDED);
+  setWrapperStyle(getWrapperReset());
+  setInnerWrapperStyle(getInnerWrapperReset());
 }
 
 /** @type {BannerAnimatorUpdater} */
-function endCollapse(prevState, props) {
+function endCollapse(prevState, setState, props) {
   var params = getParams(prevState, props);
+  var setStatus = setState.setStatus,
+      setWrapperStyle = setState.setWrapperStyle,
+      setInnerWrapperStyle = setState.setInnerWrapperStyle;
 
-  return {
-    status: statuses.COLLAPSED,
-    wrapperStyle: {
-      transition: "",
-      overflow: "hidden",
-      height: "0"
-    },
-    innerWrapperStyle: {
-      transition: "",
-      transform: getInnerWrapperCollapsedTransform(params)
-    }
-  };
+
+  setStatus(statuses.COLLAPSED);
+  setWrapperStyle({
+    transition: "",
+    overflow: "hidden",
+    height: "0"
+  });
+  setInnerWrapperStyle({
+    transition: "",
+    transform: getInnerWrapperCollapsedTransform(params)
+  });
 }
 
 /** @type {BannerAnimatorUpdater} */
-function prepareCollapse(prevState, props) {
+function prepareCollapse(prevState, setState, props) {
   var params = getParams(prevState, props);
+  var setWrapperStyle = setState.setWrapperStyle,
+      setInnerWrapperStyle = setState.setInnerWrapperStyle;
 
-  return {
-    wrapperStyle: {
-      transition: "",
-      overflow: "hidden",
-      height: getWrapperExpandedHeight(params)
-    },
-    innerWrapperStyle: getInnerWrapperReset()
-  };
+
+  setWrapperStyle({
+    transition: "",
+    overflow: "hidden",
+    height: getWrapperExpandedHeight(params)
+  });
+  setInnerWrapperStyle(getInnerWrapperReset());
 }
 
 /** @type {BannerAnimatorUpdater} */
-function animateCollapse(prevState, props) {
+function animateCollapse(prevState, setState, props) {
   var params = getParams(prevState, props);
+  var setWrapperStyle = setState.setWrapperStyle,
+      setInnerWrapperStyle = setState.setInnerWrapperStyle;
 
-  return {
-    wrapperStyle: {
-      transition: getWrapperTransition(params),
-      overflow: "hidden",
-      height: getWrapperCollapsedHeight(params)
-    },
-    innerWrapperStyle: {
-      transition: getInnerWrapperCollapsingTransition(params),
-      transform: getInnerWrapperCollapsedTransform(params)
-    }
-  };
+
+  setWrapperStyle({
+    transition: getWrapperTransition(params),
+    overflow: "hidden",
+    height: getWrapperCollapsedHeight(params)
+  });
+  setInnerWrapperStyle({
+    transition: getInnerWrapperCollapsingTransition(params),
+    transform: getInnerWrapperCollapsedTransform(params)
+  });
 }
 
 /** @type {BannerAnimatorUpdater} */
-function animateExpand(prevState, props) {
+function animateExpand(prevState, setState, props) {
   var params = getParams(prevState, props);
+  var setWrapperStyle = setState.setWrapperStyle,
+      setInnerWrapperStyle = setState.setInnerWrapperStyle;
 
-  return {
-    wrapperStyle: {
-      transition: getWrapperTransition(params),
-      overflow: "hidden",
-      height: getWrapperExpandedHeight(params)
-    },
-    innerWrapperStyle: {
-      transition: getInnerWrapperExpandingTransition(params),
-      transform: getInnerWrapperExpandingTransform(params)
-    }
-  };
+
+  setWrapperStyle({
+    transition: getWrapperTransition(params),
+    overflow: "hidden",
+    height: getWrapperExpandedHeight(params)
+  });
+  setInnerWrapperStyle({
+    transition: getInnerWrapperExpandingTransition(params),
+    transform: getInnerWrapperExpandingTransform(params)
+  });
 }
 
-var _createClass = function () { 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); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();
 
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
 /**
@@ -467,182 +469,162 @@ * @typedef {Object} BannerAnimatorProps
 /** @type {Component<BannerAnimatorProps, BannerAnimatorState>} */
+var BannerAnimator = function BannerAnimator(props) {
+  /** @type {BannerAnimatorState} */
+  var _useState = useState(null),
+      _useState2 = _slicedToArray(_useState, 2),
+      status = _useState2[0],
+      setStatus = _useState2[1];
 
-var BannerAnimator = function (_Component) {
-  _inherits(BannerAnimator, _Component);
+  var _useState3 = useState(null),
+      _useState4 = _slicedToArray(_useState3, 2),
+      innerWrapper = _useState4[0],
+      setInnerWrapper = _useState4[1];
 
-  function BannerAnimator() {
-    var _ref;
+  var _useState5 = useState(null),
+      _useState6 = _slicedToArray(_useState5, 2),
+      innerWrapperStyle = _useState6[0],
+      setInnerWrapperStyle = _useState6[1];
 
-    var _temp, _this, _ret;
+  var _useState7 = useState(null),
+      _useState8 = _slicedToArray(_useState7, 2),
+      wrapper = _useState8[0],
+      setWrapper = _useState8[1];
 
-    _classCallCheck(this, BannerAnimator);
+  var _useState9 = useState(null),
+      _useState10 = _slicedToArray(_useState9, 2),
+      wrapperStyle = _useState10[0],
+      setWrapperStyle = _useState10[1];
 
-    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
+  var prevState = {
+    status: status,
+    innerWrapper: innerWrapper,
+    innerWrapperStyle: innerWrapperStyle,
+    wrapper: wrapper,
+    wrapperStyle: wrapperStyle
+  };
+  var setState = {
+    setStatus: setStatus,
+    setInnerWrapper: setInnerWrapper,
+    setInnerWrapperStyle: setInnerWrapperStyle,
+    setWrapper: setWrapper,
+    setWrapperStyle: setWrapperStyle
+  };
+  var expand = function expand() {
+    window.requestAnimationFrame(function () {
+      animateExpand(prevState, setState, props);
+    });
+  };
 
-    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = BannerAnimator.__proto__ || Object.getPrototypeOf(BannerAnimator)).call.apply(_ref, [this].concat(args))), _this), _this.state = {}, _this.handleReady = function () {
-      var status = _this.state.status;
+  var collapse = function collapse() {
+    window.requestAnimationFrame(function () {
+      animateCollapse(prevState, setState, props);
+    });
+  };
 
+  var collapseFromExpanded = function collapseFromExpanded() {
+    window.requestAnimationFrame(function () {
+      prepareCollapse(prevState, setState, props);
+      collapse();
+    });
+  };
 
-      if (status === statuses.EXPANDING) {
-        _this.expand();
-      }
-    }, _this.handleTransitionEnd = function (event) {
-      var innerWrapper = _this.state.innerWrapper;
-
-
-      if (event.target !== innerWrapper) return;
-
-      var status = _this.state.status;
-
-
-      if (status === statuses.COLLAPSING) {
-        window.requestAnimationFrame(function () {
-          _this.setState(endCollapse);
-        });
-        return;
-      }
-
-      if (status === statuses.EXPANDING) {
-        window.requestAnimationFrame(function () {
-          _this.setState(endExpand);
-        });
-      }
-    }, _this.refInnerWrapper = function (innerWrapper) {
-      _this.setState({ innerWrapper: innerWrapper });
-    }, _temp), _possibleConstructorReturn(_this, _ret);
-  }
-
-  /** @type {BannerAnimatorState} */
-
-
-  _createClass(BannerAnimator, [{
-    key: "componentDidUpdate",
-
-
-    /**
-     * @param {BannerAnimatorProps} prevProps
-     * @param {BannerAnimatorState} prevState
-     */
-    value: function componentDidUpdate(prevProps, prevState) {
-      var prevStatus = prevState.status;
-      var status = this.state.status;
-
-
-      if (prevStatus === statuses.EXPANDED && status === statuses.COLLAPSING) {
-        this.collapseFromExpanded();
-        return;
-      }
-      if (prevStatus === statuses.COLLAPSING && status === statuses.EXPANDING) {
-        this.expand();
-        return;
-      }
-      if (prevStatus === statuses.EXPANDING && status === statuses.COLLAPSING) {
-        this.collapse();
-      }
+  var handleReady = function handleReady() {
+    if (status === statuses.EXPANDING) {
+      expand();
     }
-  }, {
-    key: "expand",
-    value: function expand() {
-      var _this2 = this;
+  };
 
-      window.requestAnimationFrame(function () {
-        _this2.setState(animateExpand);
-      });
-    }
-  }, {
-    key: "collapse",
-    value: function collapse() {
-      var _this3 = this;
+  /** @param {TransitionEvent} event */
+  var handleTransitionEnd = function handleTransitionEnd(event) {
+    if (event.target !== innerWrapper) return;
 
+    if (status === statuses.COLLAPSING) {
       window.requestAnimationFrame(function () {
-        _this3.setState(animateCollapse);
+        endCollapse(prevState, setState, props);
       });
+      return;
     }
-  }, {
-    key: "collapseFromExpanded",
-    value: function collapseFromExpanded() {
-      var _this4 = this;
 
+    if (status === statuses.EXPANDING) {
       window.requestAnimationFrame(function () {
-        _this4.setState(prepareCollapse, function () {
-          _this4.collapse();
-        });
+        endExpand(setState);
       });
     }
+  };
 
-    /** @type {BannerAnimatorProps} */
+  /** @param {HTMLDivElement} innerWrapperParams */
+  var refInnerWrapper = function refInnerWrapper(innerWrapperParams) {
+    setInnerWrapper(innerWrapperParams);
+  };
 
+  useEffect(function () {
+    var isVisible = props.isVisible;
 
-    /** @param {TransitionEvent} event */
 
+    if (!status) {
+      return isVisible ? endExpand(setState) : endCollapse(prevState, setState, props);
+    }
 
-    /** @param {HTMLDivElement} innerWrapper */
+    switch (status) {
+      case statuses.COLLAPSED:
+      case statuses.COLLAPSING:
+        return isVisible ? startExpand(setState) : null;
+      case statuses.EXPANDED:
+      case statuses.EXPANDING:
+        return isVisible ? null : startCollapse(setState);
+      default:
+        // eslint-disable-next-line no-console
+        console.warn("Invalid status", { status: status });
+        return null;
+    }
+  }, [props]);
 
-  }, {
-    key: "render",
-    value: function render() {
-      var renderChildren = this.props.children;
-      var _state = this.state,
-          status = _state.status,
-          wrapperStyle = _state.wrapperStyle,
-          innerWrapperStyle = _state.innerWrapperStyle;
-      var handleReady = this.handleReady,
-          handleTransitionEnd = this.handleTransitionEnd,
-          refInnerWrapper = this.refInnerWrapper;
+  function usePreviousStatus(value) {
+    var ref = useRef(null);
+    useEffect(function () {
+      ref.current = value;
+    });
+    return ref.current;
+  }
 
-      var children = status === statuses.COLLAPSED ? null : renderChildren({ handleReady: handleReady });
-      var isBusy = status === statuses.EXPANDING || status === statuses.COLLAPSING;
+  var prevStatus = usePreviousStatus(status);
 
-      return React.createElement(
-        "div",
-        {
-          "aria-busy": isBusy,
-          "aria-expanded": status === statuses.EXPANDED,
-          style: wrapperStyle,
-          onTransitionEnd: handleTransitionEnd
-        },
-        React.createElement(
-          "div",
-          { style: innerWrapperStyle, ref: refInnerWrapper },
-          children
-        )
-      );
+  useEffect(function () {
+    var expandStatuses = prevStatus === statuses.COLLAPSED && status === statuses.EXPANDING || prevStatus === statuses.COLLAPSING && status === statuses.EXPANDING;
+
+    if (prevStatus === statuses.EXPANDED && status === statuses.COLLAPSING) {
+      collapseFromExpanded();
+      return;
     }
-  }], [{
-    key: "getDerivedStateFromProps",
+    if (expandStatuses) {
+      expand();
+      return;
+    }
+    if (prevStatus === statuses.EXPANDING && status === statuses.COLLAPSING) {
+      collapse();
+    }
+  }, [props, prevStatus, status]);
 
+  var renderChildren = props.children;
 
-    /**
-     * @param {BannerAnimatorProps} nextProps
-     * @param {BannerAnimatorState} prevState
-     * @returns {BannerAnimatorState | null}
-     */
-    value: function getDerivedStateFromProps(nextProps, prevState) {
-      var isVisible = nextProps.isVisible;
-      var status = prevState.status;
+  var children = status === statuses.COLLAPSED ? null : renderChildren({ handleReady: handleReady });
+  var isBusy = status === statuses.EXPANDING || status === statuses.COLLAPSING;
 
+  return React.createElement(
+    "div",
+    {
+      "aria-busy": isBusy,
+      "aria-expanded": status === statuses.EXPANDED,
+      style: wrapperStyle,
+      onTransitionEnd: handleTransitionEnd
+    },
+    React.createElement(
+      "div",
+      { style: innerWrapperStyle, ref: refInnerWrapper },
+      children
+    )
+  );
+};
 
-      if (!status) {
-        return isVisible ? endExpand() : endCollapse();
-      }
+BannerAnimator.displayName = "BannerAnimator";
 
-      switch (status) {
-        case statuses.COLLAPSED:
-        case statuses.COLLAPSING:
-          return isVisible ? startExpand() : null;
-        case statuses.EXPANDED:
-        case statuses.EXPANDING:
-          return isVisible ? null : startCollapse();
-        default:
-          // eslint-disable-next-line no-console
-          console.warn("Invalid status", { status: status });
-          return null;
-      }
-    }
-  }]);
-
-  return BannerAnimator;
-}(Component);
-
 BannerAnimator.propTypes = {
@@ -662,2 +644,3 @@ /* eslint-disable react/no-unused-prop-types */
 };
+
 BannerAnimator.defaultProps = {
@@ -669,5 +652,2 @@ isVisible: true,
 };
-
-
-var BannerAnimator$1 = polyfill(BannerAnimator);
 BannerAnimator.__docgenInfo = {
@@ -733,10 +713,4 @@ "description": "@type {Component<BannerAnimatorProps, BannerAnimatorState>}",
 
-var _createClass$1 = function () { 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); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+var _slicedToArray$1 = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();
 
-function _classCallCheck$1(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn$1(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits$1(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
 /**
@@ -772,242 +746,193 @@ * @typedef {Object} PresenterBag
 /** @type {Component<BannerContainerProps, BannerContainerState>} */
+var BannerContainer = function BannerContainer(props) {
+  var _useState = useState(false),
+      _useState2 = _slicedToArray$1(_useState, 2),
+      isWrappingActions = _useState2[0],
+      setIsWrappingActions = _useState2[1];
 
-var BannerContainer = function (_Component) {
-  _inherits$1(BannerContainer, _Component);
+  var _useState3 = useState(false),
+      _useState4 = _slicedToArray$1(_useState3, 2),
+      isWrappingContent = _useState4[0],
+      setIsWrappingContent = _useState4[1];
 
-  function BannerContainer() {
-    var _ref;
+  var _useState5 = useState(null),
+      _useState6 = _slicedToArray$1(_useState5, 2),
+      callBack = _useState6[0],
+      setCallBack = _useState6[1];
 
-    var _temp, _this, _ret;
+  /** @type {HTMLDivElement | undefined} */
 
-    _classCallCheck$1(this, BannerContainer);
 
-    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
+  var content = useRef(null);
+  /** @type {HTMLDivElement | undefined} */
+  var interactionsWrapper = useRef(null);
+  /** @type {HTMLParagraphElement | undefined} */
+  var notification = useRef(null);
+  /** @type {number | undefined} */
+  var wrappingFrame = useRef(null);
 
-    return _ret = (_temp = (_this = _possibleConstructorReturn$1(this, (_ref = BannerContainer.__proto__ || Object.getPrototypeOf(BannerContainer)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
-      isWrappingActions: false,
-      isWrappingContent: false
-    }, _this.refContent = function (element) {
-      _this.content = element;
-    }, _this.refNotification = function (element) {
-      _this.notification = element;
-    }, _this.refInteractionsWrapper = function (element) {
-      _this.interactionsWrapper = element;
-    }, _this.handleResize = function () {
-      _this.updateWrapping();
-    }, _this.updateContentWrapping = function (callback) {
-      var update = { isWrappingContent: _this.shouldWrapContent() };
+  /**
+   * @param {HTMLDivElement} element
+   */
+  var refContent = function refContent(element) {
+    content.current = element;
+  };
 
-      _this.setState(update, function () {
-        delete _this.wrappingFrame;
+  /**
+   * @param {HTMLParagraphElement} element
+   */
+  var refNotification = function refNotification(element) {
+    notification.current = element;
+  };
 
-        if (callback) callback();
-      });
-    }, _this.updateActionWrapping = function (callback) {
-      var update = { isWrappingActions: _this.shouldWrapActions() };
+  /**
+   * @param {HTMLDivElement} element
+   */
+  var refInteractionsWrapper = function refInteractionsWrapper(element) {
+    interactionsWrapper.current = element;
+  };
 
-      _this.setState(update, function () {
-        _this.wrappingFrame = window.requestAnimationFrame(function () {
-          _this.updateContentWrapping(callback);
-        });
-      });
-    }, _temp), _possibleConstructorReturn$1(_this, _ret);
-  }
+  /**
+   * Determines whether the content will overflow its container
+   * with the given width of the notification element.
+   *
+   * @param {number} notificationWidth
+   * @returns {boolean}
+   */
+  var willContentOverflow = function willContentOverflow(notificationWidth) {
+    if (!content.current || !interactionsWrapper.current) return false;
 
-  /** @type {BannerContainerState} */
+    var contentWidth = content.offsetWidth;
+    var actionsWidth = interactionsWrapper.offsetWidth;
+    var contentChildrenWidth = notificationWidth + MIN_CONTENT_SPACING + actionsWidth;
 
+    return contentChildrenWidth > contentWidth;
+  };
 
-  _createClass$1(BannerContainer, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      this.bindResize();
-      this.updateWrapping(this.props.onReady);
-    }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      this.unbindResize();
-      this.cancelWrappingUpdate();
-    }
+  /**
+   * Determines whether actions should wrap on the next repaint
+   * @returns {boolean}
+   */
+  var shouldWrapActions = function shouldWrapActions() {
+    if (!interactionsWrapper) return false;
+    var notificationWidth = isWrappingActions ? ACTIONS_WRAPPING_THRESHOLD + interactionsWrapper.offsetWidth * 2 : ACTIONS_WRAPPING_THRESHOLD;
 
-    /** @type {BannerContainerProps | any} */
+    return willContentOverflow(notificationWidth);
+  };
 
-    /** @type {HTMLDivElement | undefined} */
+  var updateActionWrapping = function updateActionWrapping(callBackParam) {
+    var update = { isWrappingActions: shouldWrapActions() };
+    setIsWrappingActions(update);
+    setCallBack(callBackParam);
+  };
 
-    /** @type {HTMLDivElement | undefined} */
+  /**
+   * Asynchronously updates the wrapping behavior of the presenter
+   * @param {Function} callback
+   */
+  var updateWrapping = function updateWrapping(callback) {
+    if (wrappingFrame.current !== undefined) return;
 
-    /** @type {HTMLParagraphElement | undefined} */
+    wrappingFrame.current = window.requestAnimationFrame(function () {
+      updateActionWrapping(callback);
+    });
+  };
 
-    /** @type {number | undefined} */
+  var handleResize = function handleResize() {
+    updateWrapping();
+  };
 
+  /**
+   * Determines whether content should wrap on the next repaint
+   * @returns {boolean}
+   */
+  var shouldWrapContent = function shouldWrapContent() {
+    return willContentOverflow(MIN_NOTIFICATION_WIDTH);
+  };
 
-    /**
-     * @param {HTMLDivElement} element
-     */
+  /**
+   * @param {Function} callback
+   */
+  var updateContentWrapping = function updateContentWrapping(callback) {
+    var update = { isWrappingContent: shouldWrapContent() };
+    setIsWrappingContent(update);
+    setCallBack(callback);
+  };
 
+  /**
+   * @param {Function} callback
+   */
 
-    /**
-     * @param {HTMLParagraphElement} element
-     */
+  var cancelWrappingUpdate = function cancelWrappingUpdate() {
+    if (wrappingFrame !== undefined) {
+      window.cancelAnimationFrame(wrappingFrame);
+    }
+  };
 
+  var bindResize = function bindResize() {
+    window.addEventListener("resize", handleResize);
+  };
 
-    /**
-     * @param {HTMLDivElement} element
-     */
+  var unbindResize = function unbindResize() {
+    window.removeEventListener("resize", handleResize);
+  };
 
-  }, {
-    key: "shouldWrapActions",
+  /** @returns {any} */
+  var renderActions = function renderActions() {
+    var actions = props.actions;
 
 
-    /**
-     * Determines whether actions should wrap on the next repaint
-     * @returns {boolean}
-     */
-    value: function shouldWrapActions() {
-      var interactionsWrapper = this.interactionsWrapper;
+    if (typeof actions !== "function") return actions;
 
+    var actionsBag = { isWrappingContent: isWrappingContent, isWrappingActions: isWrappingActions };
 
-      if (!interactionsWrapper) return false;
+    return actions(actionsBag);
+  };
 
-      var isWrappingActions = this.state.isWrappingActions;
+  /**
+   * @returns {PresenterBag}
+   */
+  var createPresenterBag = function createPresenterBag() {
+    return {
+      isWrappingContent: isWrappingContent,
+      refContent: refContent,
+      refNotification: refNotification,
+      refInteractionsWrapper: refInteractionsWrapper,
+      actions: renderActions()
+    };
+  };
 
-      var notificationWidth = isWrappingActions ? ACTIONS_WRAPPING_THRESHOLD + interactionsWrapper.offsetWidth * 2 : ACTIONS_WRAPPING_THRESHOLD;
-
-      return this.willContentOverflow(notificationWidth);
+  useEffect(function () {
+    if (isWrappingContent) {
+      // delete wrappingFrame;
+      if (callBack) callBack();
     }
+  }, [isWrappingContent]);
 
-    /**
-     * Determines whether content should wrap on the next repaint
-     * @returns {boolean}
-     */
-
-  }, {
-    key: "shouldWrapContent",
-    value: function shouldWrapContent() {
-      return this.willContentOverflow(MIN_NOTIFICATION_WIDTH);
-    }
-
-    /**
-     * Determines whether the content will overflow its container
-     * with the given width of the notification element.
-     *
-     * @param {number} notificationWidth
-     * @returns {boolean}
-     */
-
-  }, {
-    key: "willContentOverflow",
-    value: function willContentOverflow(notificationWidth) {
-      var content = this.content,
-          interactionsWrapper = this.interactionsWrapper;
-
-
-      if (!content || !interactionsWrapper) return false;
-
-      var contentWidth = content.offsetWidth;
-      var actionsWidth = interactionsWrapper.offsetWidth;
-      var contentChildrenWidth = notificationWidth + MIN_CONTENT_SPACING + actionsWidth;
-
-      return contentChildrenWidth > contentWidth;
-    }
-
-    /**
-     * @param {Function} callback
-     */
-
-
-    /**
-     * @param {Function} callback
-     */
-
-  }, {
-    key: "updateWrapping",
-
-
-    /**
-     * Asynchronously updates the wrapping behavior of the presenter
-     * @param {Function} callback
-     */
-    value: function updateWrapping(callback) {
-      var _this2 = this;
-
-      if (this.wrappingFrame !== undefined) return;
-
-      this.wrappingFrame = window.requestAnimationFrame(function () {
-        _this2.updateActionWrapping(callback);
+  useEffect(function () {
+    if (isWrappingActions) {
+      wrappingFrame.current = window.requestAnimationFrame(function () {
+        updateContentWrapping(callBack);
       });
     }
-  }, {
-    key: "cancelWrappingUpdate",
-    value: function cancelWrappingUpdate() {
-      if (this.wrappingFrame !== undefined) {
-        window.cancelAnimationFrame(this.wrappingFrame);
-      }
-    }
-  }, {
-    key: "bindResize",
-    value: function bindResize() {
-      window.addEventListener("resize", this.handleResize);
-    }
-  }, {
-    key: "unbindResize",
-    value: function unbindResize() {
-      window.removeEventListener("resize", this.handleResize);
-    }
+  }, [isWrappingActions]);
 
-    /**
-     * @returns {PresenterBag}
-     */
+  useEffect(function () {
+    bindResize();
+    updateWrapping(props.onReady);
+    return function () {
+      unbindResize();
+      cancelWrappingUpdate();
+    };
+  }, []);
 
-  }, {
-    key: "createPresenterBag",
-    value: function createPresenterBag() {
-      var isWrappingContent = this.state.isWrappingContent;
-      var refContent = this.refContent,
-          refNotification = this.refNotification,
-          refInteractionsWrapper = this.refInteractionsWrapper;
+  var renderPresenter = props.children;
 
+  var presenterBag = createPresenterBag();
 
-      return {
-        isWrappingContent: isWrappingContent,
-        refContent: refContent,
-        refNotification: refNotification,
-        refInteractionsWrapper: refInteractionsWrapper,
-        actions: this.renderActions()
-      };
-    }
+  return renderPresenter(presenterBag);
+};
 
-    /** @returns {any} */
+BannerContainer.displayName = "BannerContainer";
 
-  }, {
-    key: "renderActions",
-    value: function renderActions() {
-      var actions = this.props.actions;
-
-
-      if (typeof actions !== "function") return actions;
-
-      var _state = this.state,
-          isWrappingContent = _state.isWrappingContent,
-          isWrappingActions = _state.isWrappingActions;
-
-      var actionsBag = { isWrappingContent: isWrappingContent, isWrappingActions: isWrappingActions };
-
-      return actions(actionsBag);
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var renderPresenter = this.props.children;
-
-      var presenterBag = this.createPresenterBag();
-
-      return renderPresenter(presenterBag);
-    }
-  }]);
-
-  return BannerContainer;
-}(Component);
-
 BannerContainer.propTypes = {
@@ -1021,34 +946,2 @@ /** Banner actions; Any JSX, or a render prop function */
 };
-BannerContainer.__docgenInfo = {
-  "description": "@type {Component<BannerContainerProps, BannerContainerState>}",
-  "displayName": "BannerContainer",
-  "props": {
-    "actions": {
-      "type": {
-        "name": "union",
-        "value": [{
-          "name": "node"
-        }, {
-          "name": "func"
-        }]
-      },
-      "required": false,
-      "description": "Banner actions; Any JSX, or a render prop function"
-    },
-    "onReady": {
-      "type": {
-        "name": "func"
-      },
-      "required": false,
-      "description": "Called after the component has been mounted, and dynamically resized"
-    },
-    "children": {
-      "type": {
-        "name": "func"
-      },
-      "required": true,
-      "description": "A render prop function to render a `BannerPresenter`"
-    }
-  }
-};
 
@@ -1717,12 +1610,4 @@ function stylesheet$1(props, themeData) {
 
-var _createClass$2 = function () { 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); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
-
 function _objectWithoutProperties$2(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
 
-function _classCallCheck$2(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn$2(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits$2(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
 /**
@@ -1743,79 +1628,51 @@ * @typedef {Object} BannerProps
 /** @type {Component<BannerProps>} */
-
-var Banner = function (_Component) {
-  _inherits$2(Banner, _Component);
-
-  function Banner() {
-    var _ref;
-
-    var _temp, _this, _ret;
-
-    _classCallCheck$2(this, Banner);
-
-    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    return _ret = (_temp = (_this = _possibleConstructorReturn$2(this, (_ref = Banner.__proto__ || Object.getPrototypeOf(Banner)).call.apply(_ref, [this].concat(args))), _this), _this.renderPresenter = function (presenterBag) {
-      var presenterProps = _extends$3({}, _this.props, presenterBag);
-
-      var children = presenterProps.children,
-          customStylesheet = presenterProps.stylesheet,
-          otherProps = _objectWithoutProperties$2(presenterProps, ["children", "stylesheet"]);
-
-      return React.createElement(
-        BannerPresenter,
-        _extends$3({}, otherProps, { stylesheet: customStylesheet }),
-        children
-      );
-    }, _this.renderContainer = function (_ref2) {
-      var handleReady = _ref2.handleReady;
-      var actions = _this.props.actions;
-      var _this2 = _this,
-          renderPresenter = _this2.renderPresenter;
-
-
-      return React.createElement(
-        BannerContainer,
-        { actions: actions, onReady: handleReady },
-        renderPresenter
-      );
-    }, _temp), _possibleConstructorReturn$2(_this, _ret);
-  }
-
+var Banner = function Banner(props) {
   /**
    * @param {import("./BannerContainer").PresenterBag} presenterBag
    */
+  var renderPresenter = function renderPresenter(presenterBag) {
+    var presenterProps = _extends$3({}, props, presenterBag);
 
+    var children = presenterProps.children,
+        customStylesheet = presenterProps.stylesheet,
+        otherProps = _objectWithoutProperties$2(presenterProps, ["children", "stylesheet"]);
 
-  /** @type {BannerProps | any} */
+    return React.createElement(
+      BannerPresenter,
+      _extends$3({}, otherProps, { stylesheet: customStylesheet }),
+      children
+    );
+  };
 
-
   /**
    * @param {import("./BannerAnimator").ContainerBag} containerBag
    */
+  // eslint-disable-next-line react/prop-types
+  var renderContainer = function renderContainer(_ref) {
+    var handleReady = _ref.handleReady;
+    var actions = props.actions;
 
 
-  _createClass$2(Banner, [{
-    key: "render",
-    value: function render() {
-      var _props = this.props,
-          isVisible = _props.isVisible,
-          placement = _props.placement;
-      var renderContainer = this.renderContainer;
+    return React.createElement(
+      BannerContainer,
+      { actions: actions, onReady: handleReady },
+      renderPresenter
+    );
+  };
 
+  var isVisible = props.isVisible,
+      placement = props.placement;
 
-      return React.createElement(
-        BannerAnimator$1,
-        _extends$3({
-          isVisible: isVisible
-        }, animatorPropsByPlacement[placement]),
-        renderContainer
-      );
-    }
-  }]);
 
-  return Banner;
-}(Component);
+  return React.createElement(
+    BannerAnimator,
+    _extends$3({
+      isVisible: isVisible
+    }, animatorPropsByPlacement[placement]),
+    renderContainer
+  );
+};
 
+Banner.displayName = "Banner";
+
 Banner.AVAILABLE_PLACEMENTS = AVAILABLE_PLACEMENTS;
@@ -1825,5 +1682,7 @@ Banner.AVAILABLE_TYPES = AVAILABLE_TYPES;
 Banner.types = types;
+
 Banner.Action = BannerAction;
 Banner.Interactions = BannerInteractions;
 Banner.Presenter = BannerPresenter;
+
 Banner.propTypes = {
@@ -1940,2 +1799,2 @@ /** Indicates the style of banner */
 export default Banner;
-export { BannerAction, BannerAnimator$1 as BannerAnimator, BannerInteractions, BannerPresenter, placements, AVAILABLE_PLACEMENTS, types, AVAILABLE_TYPES };
+export { BannerAction, BannerAnimator, BannerInteractions, BannerPresenter, placements, AVAILABLE_PLACEMENTS, types, AVAILABLE_TYPES };

build/index.js

@@ -12,3 +12,2 @@ 'use strict';
 var ThemeContext = _interopDefault(require('@hig/theme-context'));
-var reactLifecyclesCompat = require('react-lifecycles-compat');
 var IconButton = _interopDefault(require('@hig/icon-button'));
@@ -359,98 +358,101 @@ var Typography = _interopDefault(require('@hig/typography'));
 /** @type {BannerAnimatorUpdater} */
-function startExpand() {
-  return {
-    status: statuses.EXPANDING
-  };
+function startExpand(setState) {
+  var setStatus = setState.setStatus;
+
+
+  setStatus(statuses.EXPANDING);
 }
 
 /** @type {BannerAnimatorUpdater} */
-function startCollapse() {
-  return {
-    status: statuses.COLLAPSING
-  };
+function startCollapse(setState) {
+  var setStatus = setState.setStatus;
+
+
+  setStatus(statuses.COLLAPSING);
 }
 
 /** @type {BannerAnimatorUpdater} */
-function endExpand() {
-  return {
-    status: statuses.EXPANDED,
-    wrapperStyle: getWrapperReset(),
-    innerWrapperStyle: getInnerWrapperReset()
-  };
+function endExpand(setState) {
+  var setStatus = setState.setStatus,
+      setWrapperStyle = setState.setWrapperStyle,
+      setInnerWrapperStyle = setState.setInnerWrapperStyle;
+
+  setStatus(statuses.EXPANDED);
+  setWrapperStyle(getWrapperReset());
+  setInnerWrapperStyle(getInnerWrapperReset());
 }
 
 /** @type {BannerAnimatorUpdater} */
-function endCollapse(prevState, props) {
+function endCollapse(prevState, setState, props) {
   var params = getParams(prevState, props);
+  var setStatus = setState.setStatus,
+      setWrapperStyle = setState.setWrapperStyle,
+      setInnerWrapperStyle = setState.setInnerWrapperStyle;
 
-  return {
-    status: statuses.COLLAPSED,
-    wrapperStyle: {
-      transition: "",
-      overflow: "hidden",
-      height: "0"
-    },
-    innerWrapperStyle: {
-      transition: "",
-      transform: getInnerWrapperCollapsedTransform(params)
-    }
-  };
+
+  setStatus(statuses.COLLAPSED);
+  setWrapperStyle({
+    transition: "",
+    overflow: "hidden",
+    height: "0"
+  });
+  setInnerWrapperStyle({
+    transition: "",
+    transform: getInnerWrapperCollapsedTransform(params)
+  });
 }
 
 /** @type {BannerAnimatorUpdater} */
-function prepareCollapse(prevState, props) {
+function prepareCollapse(prevState, setState, props) {
   var params = getParams(prevState, props);
+  var setWrapperStyle = setState.setWrapperStyle,
+      setInnerWrapperStyle = setState.setInnerWrapperStyle;
 
-  return {
-    wrapperStyle: {
-      transition: "",
-      overflow: "hidden",
-      height: getWrapperExpandedHeight(params)
-    },
-    innerWrapperStyle: getInnerWrapperReset()
-  };
+
+  setWrapperStyle({
+    transition: "",
+    overflow: "hidden",
+    height: getWrapperExpandedHeight(params)
+  });
+  setInnerWrapperStyle(getInnerWrapperReset());
 }
 
 /** @type {BannerAnimatorUpdater} */
-function animateCollapse(prevState, props) {
+function animateCollapse(prevState, setState, props) {
   var params = getParams(prevState, props);
+  var setWrapperStyle = setState.setWrapperStyle,
+      setInnerWrapperStyle = setState.setInnerWrapperStyle;
 
-  return {
-    wrapperStyle: {
-      transition: getWrapperTransition(params),
-      overflow: "hidden",
-      height: getWrapperCollapsedHeight(params)
-    },
-    innerWrapperStyle: {
-      transition: getInnerWrapperCollapsingTransition(params),
-      transform: getInnerWrapperCollapsedTransform(params)
-    }
-  };
+
+  setWrapperStyle({
+    transition: getWrapperTransition(params),
+    overflow: "hidden",
+    height: getWrapperCollapsedHeight(params)
+  });
+  setInnerWrapperStyle({
+    transition: getInnerWrapperCollapsingTransition(params),
+    transform: getInnerWrapperCollapsedTransform(params)
+  });
 }
 
 /** @type {BannerAnimatorUpdater} */
-function animateExpand(prevState, props) {
+function animateExpand(prevState, setState, props) {
   var params = getParams(prevState, props);
+  var setWrapperStyle = setState.setWrapperStyle,
+      setInnerWrapperStyle = setState.setInnerWrapperStyle;
 
-  return {
-    wrapperStyle: {
-      transition: getWrapperTransition(params),
-      overflow: "hidden",
-      height: getWrapperExpandedHeight(params)
-    },
-    innerWrapperStyle: {
-      transition: getInnerWrapperExpandingTransition(params),
-      transform: getInnerWrapperExpandingTransform(params)
-    }
-  };
+
+  setWrapperStyle({
+    transition: getWrapperTransition(params),
+    overflow: "hidden",
+    height: getWrapperExpandedHeight(params)
+  });
+  setInnerWrapperStyle({
+    transition: getInnerWrapperExpandingTransition(params),
+    transform: getInnerWrapperExpandingTransform(params)
+  });
 }
 
-var _createClass = function () { 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); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();
 
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
 /**
@@ -475,182 +477,162 @@ * @typedef {Object} BannerAnimatorProps
 /** @type {Component<BannerAnimatorProps, BannerAnimatorState>} */
+var BannerAnimator = function BannerAnimator(props) {
+  /** @type {BannerAnimatorState} */
+  var _useState = React.useState(null),
+      _useState2 = _slicedToArray(_useState, 2),
+      status = _useState2[0],
+      setStatus = _useState2[1];
 
-var BannerAnimator = function (_Component) {
-  _inherits(BannerAnimator, _Component);
+  var _useState3 = React.useState(null),
+      _useState4 = _slicedToArray(_useState3, 2),
+      innerWrapper = _useState4[0],
+      setInnerWrapper = _useState4[1];
 
-  function BannerAnimator() {
-    var _ref;
+  var _useState5 = React.useState(null),
+      _useState6 = _slicedToArray(_useState5, 2),
+      innerWrapperStyle = _useState6[0],
+      setInnerWrapperStyle = _useState6[1];
 
-    var _temp, _this, _ret;
+  var _useState7 = React.useState(null),
+      _useState8 = _slicedToArray(_useState7, 2),
+      wrapper = _useState8[0],
+      setWrapper = _useState8[1];
 
-    _classCallCheck(this, BannerAnimator);
+  var _useState9 = React.useState(null),
+      _useState10 = _slicedToArray(_useState9, 2),
+      wrapperStyle = _useState10[0],
+      setWrapperStyle = _useState10[1];
 
-    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
+  var prevState = {
+    status: status,
+    innerWrapper: innerWrapper,
+    innerWrapperStyle: innerWrapperStyle,
+    wrapper: wrapper,
+    wrapperStyle: wrapperStyle
+  };
+  var setState = {
+    setStatus: setStatus,
+    setInnerWrapper: setInnerWrapper,
+    setInnerWrapperStyle: setInnerWrapperStyle,
+    setWrapper: setWrapper,
+    setWrapperStyle: setWrapperStyle
+  };
+  var expand = function expand() {
+    window.requestAnimationFrame(function () {
+      animateExpand(prevState, setState, props);
+    });
+  };
 
-    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = BannerAnimator.__proto__ || Object.getPrototypeOf(BannerAnimator)).call.apply(_ref, [this].concat(args))), _this), _this.state = {}, _this.handleReady = function () {
-      var status = _this.state.status;
+  var collapse = function collapse() {
+    window.requestAnimationFrame(function () {
+      animateCollapse(prevState, setState, props);
+    });
+  };
 
+  var collapseFromExpanded = function collapseFromExpanded() {
+    window.requestAnimationFrame(function () {
+      prepareCollapse(prevState, setState, props);
+      collapse();
+    });
+  };
 
-      if (status === statuses.EXPANDING) {
-        _this.expand();
-      }
-    }, _this.handleTransitionEnd = function (event) {
-      var innerWrapper = _this.state.innerWrapper;
-
-
-      if (event.target !== innerWrapper) return;
-
-      var status = _this.state.status;
-
-
-      if (status === statuses.COLLAPSING) {
-        window.requestAnimationFrame(function () {
-          _this.setState(endCollapse);
-        });
-        return;
-      }
-
-      if (status === statuses.EXPANDING) {
-        window.requestAnimationFrame(function () {
-          _this.setState(endExpand);
-        });
-      }
-    }, _this.refInnerWrapper = function (innerWrapper) {
-      _this.setState({ innerWrapper: innerWrapper });
-    }, _temp), _possibleConstructorReturn(_this, _ret);
-  }
-
-  /** @type {BannerAnimatorState} */
-
-
-  _createClass(BannerAnimator, [{
-    key: "componentDidUpdate",
-
-
-    /**
-     * @param {BannerAnimatorProps} prevProps
-     * @param {BannerAnimatorState} prevState
-     */
-    value: function componentDidUpdate(prevProps, prevState) {
-      var prevStatus = prevState.status;
-      var status = this.state.status;
-
-
-      if (prevStatus === statuses.EXPANDED && status === statuses.COLLAPSING) {
-        this.collapseFromExpanded();
-        return;
-      }
-      if (prevStatus === statuses.COLLAPSING && status === statuses.EXPANDING) {
-        this.expand();
-        return;
-      }
-      if (prevStatus === statuses.EXPANDING && status === statuses.COLLAPSING) {
-        this.collapse();
-      }
+  var handleReady = function handleReady() {
+    if (status === statuses.EXPANDING) {
+      expand();
     }
-  }, {
-    key: "expand",
-    value: function expand() {
-      var _this2 = this;
+  };
 
-      window.requestAnimationFrame(function () {
-        _this2.setState(animateExpand);
-      });
-    }
-  }, {
-    key: "collapse",
-    value: function collapse() {
-      var _this3 = this;
+  /** @param {TransitionEvent} event */
+  var handleTransitionEnd = function handleTransitionEnd(event) {
+    if (event.target !== innerWrapper) return;
 
+    if (status === statuses.COLLAPSING) {
       window.requestAnimationFrame(function () {
-        _this3.setState(animateCollapse);
+        endCollapse(prevState, setState, props);
       });
+      return;
     }
-  }, {
-    key: "collapseFromExpanded",
-    value: function collapseFromExpanded() {
-      var _this4 = this;
 
+    if (status === statuses.EXPANDING) {
       window.requestAnimationFrame(function () {
-        _this4.setState(prepareCollapse, function () {
-          _this4.collapse();
-        });
+        endExpand(setState);
       });
     }
+  };
 
-    /** @type {BannerAnimatorProps} */
+  /** @param {HTMLDivElement} innerWrapperParams */
+  var refInnerWrapper = function refInnerWrapper(innerWrapperParams) {
+    setInnerWrapper(innerWrapperParams);
+  };
 
+  React.useEffect(function () {
+    var isVisible = props.isVisible;
 
-    /** @param {TransitionEvent} event */
 
+    if (!status) {
+      return isVisible ? endExpand(setState) : endCollapse(prevState, setState, props);
+    }
 
-    /** @param {HTMLDivElement} innerWrapper */
+    switch (status) {
+      case statuses.COLLAPSED:
+      case statuses.COLLAPSING:
+        return isVisible ? startExpand(setState) : null;
+      case statuses.EXPANDED:
+      case statuses.EXPANDING:
+        return isVisible ? null : startCollapse(setState);
+      default:
+        // eslint-disable-next-line no-console
+        console.warn("Invalid status", { status: status });
+        return null;
+    }
+  }, [props]);
 
-  }, {
-    key: "render",
-    value: function render() {
-      var renderChildren = this.props.children;
-      var _state = this.state,
-          status = _state.status,
-          wrapperStyle = _state.wrapperStyle,
-          innerWrapperStyle = _state.innerWrapperStyle;
-      var handleReady = this.handleReady,
-          handleTransitionEnd = this.handleTransitionEnd,
-          refInnerWrapper = this.refInnerWrapper;
+  function usePreviousStatus(value) {
+    var ref = React.useRef(null);
+    React.useEffect(function () {
+      ref.current = value;
+    });
+    return ref.current;
+  }
 
-      var children = status === statuses.COLLAPSED ? null : renderChildren({ handleReady: handleReady });
-      var isBusy = status === statuses.EXPANDING || status === statuses.COLLAPSING;
+  var prevStatus = usePreviousStatus(status);
 
-      return React__default.createElement(
-        "div",
-        {
-          "aria-busy": isBusy,
-          "aria-expanded": status === statuses.EXPANDED,
-          style: wrapperStyle,
-          onTransitionEnd: handleTransitionEnd
-        },
-        React__default.createElement(
-          "div",
-          { style: innerWrapperStyle, ref: refInnerWrapper },
-          children
-        )
-      );
+  React.useEffect(function () {
+    var expandStatuses = prevStatus === statuses.COLLAPSED && status === statuses.EXPANDING || prevStatus === statuses.COLLAPSING && status === statuses.EXPANDING;
+
+    if (prevStatus === statuses.EXPANDED && status === statuses.COLLAPSING) {
+      collapseFromExpanded();
+      return;
     }
-  }], [{
-    key: "getDerivedStateFromProps",
+    if (expandStatuses) {
+      expand();
+      return;
+    }
+    if (prevStatus === statuses.EXPANDING && status === statuses.COLLAPSING) {
+      collapse();
+    }
+  }, [props, prevStatus, status]);
 
+  var renderChildren = props.children;
 
-    /**
-     * @param {BannerAnimatorProps} nextProps
-     * @param {BannerAnimatorState} prevState
-     * @returns {BannerAnimatorState | null}
-     */
-    value: function getDerivedStateFromProps(nextProps, prevState) {
-      var isVisible = nextProps.isVisible;
-      var status = prevState.status;
+  var children = status === statuses.COLLAPSED ? null : renderChildren({ handleReady: handleReady });
+  var isBusy = status === statuses.EXPANDING || status === statuses.COLLAPSING;
 
+  return React__default.createElement(
+    "div",
+    {
+      "aria-busy": isBusy,
+      "aria-expanded": status === statuses.EXPANDED,
+      style: wrapperStyle,
+      onTransitionEnd: handleTransitionEnd
+    },
+    React__default.createElement(
+      "div",
+      { style: innerWrapperStyle, ref: refInnerWrapper },
+      children
+    )
+  );
+};
 
-      if (!status) {
-        return isVisible ? endExpand() : endCollapse();
-      }
+BannerAnimator.displayName = "BannerAnimator";
 
-      switch (status) {
-        case statuses.COLLAPSED:
-        case statuses.COLLAPSING:
-          return isVisible ? startExpand() : null;
-        case statuses.EXPANDED:
-        case statuses.EXPANDING:
-          return isVisible ? null : startCollapse();
-        default:
-          // eslint-disable-next-line no-console
-          console.warn("Invalid status", { status: status });
-          return null;
-      }
-    }
-  }]);
-
-  return BannerAnimator;
-}(React.Component);
-
 BannerAnimator.propTypes = {
@@ -670,2 +652,3 @@ /* eslint-disable react/no-unused-prop-types */
 };
+
 BannerAnimator.defaultProps = {
@@ -677,5 +660,2 @@ isVisible: true,
 };
-
-
-var BannerAnimator$1 = reactLifecyclesCompat.polyfill(BannerAnimator);
 BannerAnimator.__docgenInfo = {
@@ -741,10 +721,4 @@ "description": "@type {Component<BannerAnimatorProps, BannerAnimatorState>}",
 
-var _createClass$1 = function () { 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); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+var _slicedToArray$1 = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();
 
-function _classCallCheck$1(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn$1(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits$1(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
 /**
@@ -780,242 +754,193 @@ * @typedef {Object} PresenterBag
 /** @type {Component<BannerContainerProps, BannerContainerState>} */
+var BannerContainer = function BannerContainer(props) {
+  var _useState = React.useState(false),
+      _useState2 = _slicedToArray$1(_useState, 2),
+      isWrappingActions = _useState2[0],
+      setIsWrappingActions = _useState2[1];
 
-var BannerContainer = function (_Component) {
-  _inherits$1(BannerContainer, _Component);
+  var _useState3 = React.useState(false),
+      _useState4 = _slicedToArray$1(_useState3, 2),
+      isWrappingContent = _useState4[0],
+      setIsWrappingContent = _useState4[1];
 
-  function BannerContainer() {
-    var _ref;
+  var _useState5 = React.useState(null),
+      _useState6 = _slicedToArray$1(_useState5, 2),
+      callBack = _useState6[0],
+      setCallBack = _useState6[1];
 
-    var _temp, _this, _ret;
+  /** @type {HTMLDivElement | undefined} */
 
-    _classCallCheck$1(this, BannerContainer);
 
-    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
+  var content = React.useRef(null);
+  /** @type {HTMLDivElement | undefined} */
+  var interactionsWrapper = React.useRef(null);
+  /** @type {HTMLParagraphElement | undefined} */
+  var notification = React.useRef(null);
+  /** @type {number | undefined} */
+  var wrappingFrame = React.useRef(null);
 
-    return _ret = (_temp = (_this = _possibleConstructorReturn$1(this, (_ref = BannerContainer.__proto__ || Object.getPrototypeOf(BannerContainer)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
-      isWrappingActions: false,
-      isWrappingContent: false
-    }, _this.refContent = function (element) {
-      _this.content = element;
-    }, _this.refNotification = function (element) {
-      _this.notification = element;
-    }, _this.refInteractionsWrapper = function (element) {
-      _this.interactionsWrapper = element;
-    }, _this.handleResize = function () {
-      _this.updateWrapping();
-    }, _this.updateContentWrapping = function (callback) {
-      var update = { isWrappingContent: _this.shouldWrapContent() };
+  /**
+   * @param {HTMLDivElement} element
+   */
+  var refContent = function refContent(element) {
+    content.current = element;
+  };
 
-      _this.setState(update, function () {
-        delete _this.wrappingFrame;
+  /**
+   * @param {HTMLParagraphElement} element
+   */
+  var refNotification = function refNotification(element) {
+    notification.current = element;
+  };
 
-        if (callback) callback();
-      });
-    }, _this.updateActionWrapping = function (callback) {
-      var update = { isWrappingActions: _this.shouldWrapActions() };
+  /**
+   * @param {HTMLDivElement} element
+   */
+  var refInteractionsWrapper = function refInteractionsWrapper(element) {
+    interactionsWrapper.current = element;
+  };
 
-      _this.setState(update, function () {
-        _this.wrappingFrame = window.requestAnimationFrame(function () {
-          _this.updateContentWrapping(callback);
-        });
-      });
-    }, _temp), _possibleConstructorReturn$1(_this, _ret);
-  }
+  /**
+   * Determines whether the content will overflow its container
+   * with the given width of the notification element.
+   *
+   * @param {number} notificationWidth
+   * @returns {boolean}
+   */
+  var willContentOverflow = function willContentOverflow(notificationWidth) {
+    if (!content.current || !interactionsWrapper.current) return false;
 
-  /** @type {BannerContainerState} */
+    var contentWidth = content.offsetWidth;
+    var actionsWidth = interactionsWrapper.offsetWidth;
+    var contentChildrenWidth = notificationWidth + MIN_CONTENT_SPACING + actionsWidth;
 
+    return contentChildrenWidth > contentWidth;
+  };
 
-  _createClass$1(BannerContainer, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      this.bindResize();
-      this.updateWrapping(this.props.onReady);
-    }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      this.unbindResize();
-      this.cancelWrappingUpdate();
-    }
+  /**
+   * Determines whether actions should wrap on the next repaint
+   * @returns {boolean}
+   */
+  var shouldWrapActions = function shouldWrapActions() {
+    if (!interactionsWrapper) return false;
+    var notificationWidth = isWrappingActions ? ACTIONS_WRAPPING_THRESHOLD + interactionsWrapper.offsetWidth * 2 : ACTIONS_WRAPPING_THRESHOLD;
 
-    /** @type {BannerContainerProps | any} */
+    return willContentOverflow(notificationWidth);
+  };
 
-    /** @type {HTMLDivElement | undefined} */
+  var updateActionWrapping = function updateActionWrapping(callBackParam) {
+    var update = { isWrappingActions: shouldWrapActions() };
+    setIsWrappingActions(update);
+    setCallBack(callBackParam);
+  };
 
-    /** @type {HTMLDivElement | undefined} */
+  /**
+   * Asynchronously updates the wrapping behavior of the presenter
+   * @param {Function} callback
+   */
+  var updateWrapping = function updateWrapping(callback) {
+    if (wrappingFrame.current !== undefined) return;
 
-    /** @type {HTMLParagraphElement | undefined} */
+    wrappingFrame.current = window.requestAnimationFrame(function () {
+      updateActionWrapping(callback);
+    });
+  };
 
-    /** @type {number | undefined} */
+  var handleResize = function handleResize() {
+    updateWrapping();
+  };
 
+  /**
+   * Determines whether content should wrap on the next repaint
+   * @returns {boolean}
+   */
+  var shouldWrapContent = function shouldWrapContent() {
+    return willContentOverflow(MIN_NOTIFICATION_WIDTH);
+  };
 
-    /**
-     * @param {HTMLDivElement} element
-     */
+  /**
+   * @param {Function} callback
+   */
+  var updateContentWrapping = function updateContentWrapping(callback) {
+    var update = { isWrappingContent: shouldWrapContent() };
+    setIsWrappingContent(update);
+    setCallBack(callback);
+  };
 
+  /**
+   * @param {Function} callback
+   */
 
-    /**
-     * @param {HTMLParagraphElement} element
-     */
+  var cancelWrappingUpdate = function cancelWrappingUpdate() {
+    if (wrappingFrame !== undefined) {
+      window.cancelAnimationFrame(wrappingFrame);
+    }
+  };
 
+  var bindResize = function bindResize() {
+    window.addEventListener("resize", handleResize);
+  };
 
-    /**
-     * @param {HTMLDivElement} element
-     */
+  var unbindResize = function unbindResize() {
+    window.removeEventListener("resize", handleResize);
+  };
 
-  }, {
-    key: "shouldWrapActions",
+  /** @returns {any} */
+  var renderActions = function renderActions() {
+    var actions = props.actions;
 
 
-    /**
-     * Determines whether actions should wrap on the next repaint
-     * @returns {boolean}
-     */
-    value: function shouldWrapActions() {
-      var interactionsWrapper = this.interactionsWrapper;
+    if (typeof actions !== "function") return actions;
 
+    var actionsBag = { isWrappingContent: isWrappingContent, isWrappingActions: isWrappingActions };
 
-      if (!interactionsWrapper) return false;
+    return actions(actionsBag);
+  };
 
-      var isWrappingActions = this.state.isWrappingActions;
+  /**
+   * @returns {PresenterBag}
+   */
+  var createPresenterBag = function createPresenterBag() {
+    return {
+      isWrappingContent: isWrappingContent,
+      refContent: refContent,
+      refNotification: refNotification,
+      refInteractionsWrapper: refInteractionsWrapper,
+      actions: renderActions()
+    };
+  };
 
-      var notificationWidth = isWrappingActions ? ACTIONS_WRAPPING_THRESHOLD + interactionsWrapper.offsetWidth * 2 : ACTIONS_WRAPPING_THRESHOLD;
-
-      return this.willContentOverflow(notificationWidth);
+  React.useEffect(function () {
+    if (isWrappingContent) {
+      // delete wrappingFrame;
+      if (callBack) callBack();
     }
+  }, [isWrappingContent]);
 
-    /**
-     * Determines whether content should wrap on the next repaint
-     * @returns {boolean}
-     */
-
-  }, {
-    key: "shouldWrapContent",
-    value: function shouldWrapContent() {
-      return this.willContentOverflow(MIN_NOTIFICATION_WIDTH);
-    }
-
-    /**
-     * Determines whether the content will overflow its container
-     * with the given width of the notification element.
-     *
-     * @param {number} notificationWidth
-     * @returns {boolean}
-     */
-
-  }, {
-    key: "willContentOverflow",
-    value: function willContentOverflow(notificationWidth) {
-      var content = this.content,
-          interactionsWrapper = this.interactionsWrapper;
-
-
-      if (!content || !interactionsWrapper) return false;
-
-      var contentWidth = content.offsetWidth;
-      var actionsWidth = interactionsWrapper.offsetWidth;
-      var contentChildrenWidth = notificationWidth + MIN_CONTENT_SPACING + actionsWidth;
-
-      return contentChildrenWidth > contentWidth;
-    }
-
-    /**
-     * @param {Function} callback
-     */
-
-
-    /**
-     * @param {Function} callback
-     */
-
-  }, {
-    key: "updateWrapping",
-
-
-    /**
-     * Asynchronously updates the wrapping behavior of the presenter
-     * @param {Function} callback
-     */
-    value: function updateWrapping(callback) {
-      var _this2 = this;
-
-      if (this.wrappingFrame !== undefined) return;
-
-      this.wrappingFrame = window.requestAnimationFrame(function () {
-        _this2.updateActionWrapping(callback);
+  React.useEffect(function () {
+    if (isWrappingActions) {
+      wrappingFrame.current = window.requestAnimationFrame(function () {
+        updateContentWrapping(callBack);
       });
     }
-  }, {
-    key: "cancelWrappingUpdate",
-    value: function cancelWrappingUpdate() {
-      if (this.wrappingFrame !== undefined) {
-        window.cancelAnimationFrame(this.wrappingFrame);
-      }
-    }
-  }, {
-    key: "bindResize",
-    value: function bindResize() {
-      window.addEventListener("resize", this.handleResize);
-    }
-  }, {
-    key: "unbindResize",
-    value: function unbindResize() {
-      window.removeEventListener("resize", this.handleResize);
-    }
+  }, [isWrappingActions]);
 
-    /**
-     * @returns {PresenterBag}
-     */
+  React.useEffect(function () {
+    bindResize();
+    updateWrapping(props.onReady);
+    return function () {
+      unbindResize();
+      cancelWrappingUpdate();
+    };
+  }, []);
 
-  }, {
-    key: "createPresenterBag",
-    value: function createPresenterBag() {
-      var isWrappingContent = this.state.isWrappingContent;
-      var refContent = this.refContent,
-          refNotification = this.refNotification,
-          refInteractionsWrapper = this.refInteractionsWrapper;
+  var renderPresenter = props.children;
 
+  var presenterBag = createPresenterBag();
 
-      return {
-        isWrappingContent: isWrappingContent,
-        refContent: refContent,
-        refNotification: refNotification,
-        refInteractionsWrapper: refInteractionsWrapper,
-        actions: this.renderActions()
-      };
-    }
+  return renderPresenter(presenterBag);
+};
 
-    /** @returns {any} */
+BannerContainer.displayName = "BannerContainer";
 
-  }, {
-    key: "renderActions",
-    value: function renderActions() {
-      var actions = this.props.actions;
-
-
-      if (typeof actions !== "function") return actions;
-
-      var _state = this.state,
-          isWrappingContent = _state.isWrappingContent,
-          isWrappingActions = _state.isWrappingActions;
-
-      var actionsBag = { isWrappingContent: isWrappingContent, isWrappingActions: isWrappingActions };
-
-      return actions(actionsBag);
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var renderPresenter = this.props.children;
-
-      var presenterBag = this.createPresenterBag();
-
-      return renderPresenter(presenterBag);
-    }
-  }]);
-
-  return BannerContainer;
-}(React.Component);
-
 BannerContainer.propTypes = {
@@ -1029,34 +954,2 @@ /** Banner actions; Any JSX, or a render prop function */
 };
-BannerContainer.__docgenInfo = {
-  "description": "@type {Component<BannerContainerProps, BannerContainerState>}",
-  "displayName": "BannerContainer",
-  "props": {
-    "actions": {
-      "type": {
-        "name": "union",
-        "value": [{
-          "name": "node"
-        }, {
-          "name": "func"
-        }]
-      },
-      "required": false,
-      "description": "Banner actions; Any JSX, or a render prop function"
-    },
-    "onReady": {
-      "type": {
-        "name": "func"
-      },
-      "required": false,
-      "description": "Called after the component has been mounted, and dynamically resized"
-    },
-    "children": {
-      "type": {
-        "name": "func"
-      },
-      "required": true,
-      "description": "A render prop function to render a `BannerPresenter`"
-    }
-  }
-};
 
@@ -1725,12 +1618,4 @@ function stylesheet$1(props, themeData) {
 
-var _createClass$2 = function () { 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); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
-
 function _objectWithoutProperties$2(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
 
-function _classCallCheck$2(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn$2(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits$2(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
 /**
@@ -1751,79 +1636,51 @@ * @typedef {Object} BannerProps
 /** @type {Component<BannerProps>} */
-
-var Banner = function (_Component) {
-  _inherits$2(Banner, _Component);
-
-  function Banner() {
-    var _ref;
-
-    var _temp, _this, _ret;
-
-    _classCallCheck$2(this, Banner);
-
-    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    return _ret = (_temp = (_this = _possibleConstructorReturn$2(this, (_ref = Banner.__proto__ || Object.getPrototypeOf(Banner)).call.apply(_ref, [this].concat(args))), _this), _this.renderPresenter = function (presenterBag) {
-      var presenterProps = _extends$3({}, _this.props, presenterBag);
-
-      var children = presenterProps.children,
-          customStylesheet = presenterProps.stylesheet,
-          otherProps = _objectWithoutProperties$2(presenterProps, ["children", "stylesheet"]);
-
-      return React__default.createElement(
-        BannerPresenter,
-        _extends$3({}, otherProps, { stylesheet: customStylesheet }),
-        children
-      );
-    }, _this.renderContainer = function (_ref2) {
-      var handleReady = _ref2.handleReady;
-      var actions = _this.props.actions;
-      var _this2 = _this,
-          renderPresenter = _this2.renderPresenter;
-
-
-      return React__default.createElement(
-        BannerContainer,
-        { actions: actions, onReady: handleReady },
-        renderPresenter
-      );
-    }, _temp), _possibleConstructorReturn$2(_this, _ret);
-  }
-
+var Banner = function Banner(props) {
   /**
    * @param {import("./BannerContainer").PresenterBag} presenterBag
    */
+  var renderPresenter = function renderPresenter(presenterBag) {
+    var presenterProps = _extends$3({}, props, presenterBag);
 
+    var children = presenterProps.children,
+        customStylesheet = presenterProps.stylesheet,
+        otherProps = _objectWithoutProperties$2(presenterProps, ["children", "stylesheet"]);
 
-  /** @type {BannerProps | any} */
+    return React__default.createElement(
+      BannerPresenter,
+      _extends$3({}, otherProps, { stylesheet: customStylesheet }),
+      children
+    );
+  };
 
-
   /**
    * @param {import("./BannerAnimator").ContainerBag} containerBag
    */
+  // eslint-disable-next-line react/prop-types
+  var renderContainer = function renderContainer(_ref) {
+    var handleReady = _ref.handleReady;
+    var actions = props.actions;
 
 
-  _createClass$2(Banner, [{
-    key: "render",
-    value: function render() {
-      var _props = this.props,
-          isVisible = _props.isVisible,
-          placement = _props.placement;
-      var renderContainer = this.renderContainer;
+    return React__default.createElement(
+      BannerContainer,
+      { actions: actions, onReady: handleReady },
+      renderPresenter
+    );
+  };
 
+  var isVisible = props.isVisible,
+      placement = props.placement;
 
-      return React__default.createElement(
-        BannerAnimator$1,
-        _extends$3({
-          isVisible: isVisible
-        }, animatorPropsByPlacement[placement]),
-        renderContainer
-      );
-    }
-  }]);
 
-  return Banner;
-}(React.Component);
+  return React__default.createElement(
+    BannerAnimator,
+    _extends$3({
+      isVisible: isVisible
+    }, animatorPropsByPlacement[placement]),
+    renderContainer
+  );
+};
 
+Banner.displayName = "Banner";
+
 Banner.AVAILABLE_PLACEMENTS = AVAILABLE_PLACEMENTS;
@@ -1833,5 +1690,7 @@ Banner.AVAILABLE_TYPES = AVAILABLE_TYPES;
 Banner.types = types;
+
 Banner.Action = BannerAction;
 Banner.Interactions = BannerInteractions;
 Banner.Presenter = BannerPresenter;
+
 Banner.propTypes = {
@@ -1949,3 +1808,3 @@ /** Indicates the style of banner */
 exports.BannerAction = BannerAction;
-exports.BannerAnimator = BannerAnimator$1;
+exports.BannerAnimator = BannerAnimator;
 exports.BannerInteractions = BannerInteractions;
@@ -1952,0 +1811,0 @@ exports.BannerPresenter = BannerPresenter;

CHANGELOG.md

@@ -0,1 +1,13 @@
+# [@hig/banner-v3.0.0](https://github.com/Autodesk/hig/compare/@hig/banner@2.3.3...@hig/banner@3.0.0) (2022-01-13)
+
+
+### Code Refactoring
+
+* Major Release - React 17 Upgrade ([2523711](https://github.com/Autodesk/hig/commit/2523711))
+
+
+### BREAKING CHANGES
+
+* This release includes upgrading to React 17 and all associated libraries. The components have also had structural changes, utilizing stateless components and hooks. There should be no change in look or behavior of components. The code usage is the same so if you’re already on react 17 you can bump the version directly. If you’re on an old version of react you’ll need to upgrade your project’s react first to 17 and then the HIG components. This upgrade also means no more fixes for the react 15 version but it will still be available for download from NPM. You can fork the repo and make fixes with the older version if there is something critical past this release date.
+
 # [@hig/banner-v2.3.3](https://github.com/Autodesk/hig/compare/@hig/banner@2.3.2...@hig/banner@2.3.3) (2022-01-12)
@@ -2,0 +14,0 @@

package.json

 {
   "name": "@hig/banner",
-  "version": "2.3.3",
+  "version": "3.0.0",
   "description": "HIG Banner",
@@ -38,3 +38,3 @@ "author": "Autodesk Inc.",
     "@hig/theme-data": "^2.22.1",
-    "react": "^15.4.1 || ^16.3.2"
+    "react": "^17.0.0"
   },
@@ -41,0 +41,0 @@ "scripts": {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

115519

decreased by-8.12%

Lines of code

3141

decreased by-5.59%

No dependency changes