text: /**
   * WordPress dependencies
   */
  import { Component, findDOMNode } from '@wordpress/element';
  import { createHigherOrderComponent } from '@wordpress/compose';
  
  /*
   * A simple HOC that provides facility for listening to container resizes.
   */
  const withWidth = createHigherOrderComponent( ( WrappedComponent ) => {
  	return class WithWidth extends Component {
  		static defaultProps = {
  			measureBeforeMount: false,
  		};
  
  		state = {
  			width: 1280,
  		};
  
  		mounted = false;
  		ref = null;
  
  		componentDidMount() {
  			this.mounted = true;
  
  			window.addEventListener( 'resize', this.onWindowResize );
  			document.getElementById( 'collapse-button' ).addEventListener( 'click', this.onWindowResize );
  			this.onWindowResize();
  		}
  
  		componentWillUnmount() {
  			this.mounted = false;
  			window.removeEventListener( 'resize', this.onWindowResize );
  			document.getElementById( 'collapse-button' ).removeEventListener( 'click', this.onWindowResize );
  		}
  
  		onWindowResize = () => {
  			if ( ! this.mounted ) {
  				return;
  			}
  
  			// eslint-disable-next-line react/no-find-dom-node
  			const node = findDOMNode( this );
  
  			if ( node instanceof window.HTMLElement ) {
  				const width = node.offsetWidth;
  				this.setState( { width } );
  			}
  		};
  
  		render() {
  			const { measureBeforeMount, ...rest } = this.props;
  			if ( measureBeforeMount && ! this.mounted ) {
  				return (
  					<div className={ this.props.className } style={ this.props.style } />
  				);
  			}
  
  			return <WrappedComponent { ...rest } width={ this.state.width + 20 } />;
  		}
  	};
  }, 'withWidth' );
  
  export default withWidth;
  