HeaderLinks.jsx: Define and upgrade react-popper dependency.

[W1M0R]

HeaderLinks.jsx has a dependency on react-popper, that is not listed in package.json. It could be included as a part of Material-UI, but I'm not sure which version that would be.

Please add react-popper and popper.js to package.json. Also notice, that if you use the latest version of react-popper, then the API has changed, so you will have to replace the <Target> component with the <Reference> component.

If you don't explicitly depend on react-popper, but rather on the one (potentially) bundled with the latest Material-UI, then an npm install loads the new version of react-popper used by Material-UI, and breaks HeaderLinks.jsx because of the new react-popper API.

[einazare]

Hello again @W1M0R ,

We are going to address this is on our next update.

Best,
Manu

[W1M0R]

For your interest, Material-UI may have the same issues:

mui/material-ui#11862
mui/material-ui#11913

And this is what I had to do to make it work with the latest react-popper:

HeaderLinks.jsx

import { Manager, Reference, Popper } from "react-popper";
...
        <Manager>
          <Reference>
            {({ref}) => (
              <Button
                ref={ref}
                color={window.innerWidth > 959 ? "transparent" : "white"}
                justIcon={window.innerWidth > 959}
                simple={!(window.innerWidth > 959)}
                aria-label="Notifications"
                aria-owns={open ? "menu-list" : null}
                aria-haspopup="true"
                onClick={this.handleClick}
                className={classes.buttonLink}
              >
                <Notifications className={classes.icons} />
                <span className={classes.notifications}>5</span>
                <Hidden mdUp>
                  <p onClick={this.handleClick} className={classes.linkText}>
                    Notification
                  </p>
                </Hidden>
              </Button>
            )}
          </Reference>
          <Popper
            placement="bottom-end"
            eventsEnabled={open}
          >
          {({ref, style, placement, outOfBoundaries, scheduleUpdate, arrowProps }) =>(
            <div
              ref={ref}
              className={
                classNames({ [classes.popperClose]: !open }, { [classes.popperResponsive]: true })
              }
              style={{
                position: "absolute",
                willChange: "transform",
              }}
              data-placement={placement}
              >
              <ClickAwayListener onClickAway={this.handleClose}>
                <Grow
                  in={open}
                  id="menu-list"
                  style={{ transformOrigin: "0 0 0" }}
                >
                  <Paper className={classes.dropdown}>
                    <MenuList role="menu">
                      <MenuItem
                        onClick={this.handleClose}
                        className={classes.dropdownItem}
                      >
                        Mike John responded to your email
                      </MenuItem>
                      <MenuItem
                        onClick={this.handleClose}
                        className={classes.dropdownItem}
                      >
                        You have 5 new tasks
                      </MenuItem>
                      <MenuItem
                        onClick={this.handleClose}
                        className={classes.dropdownItem}
                      >
                        You're now friend with Andrew
                      </MenuItem>
                      <MenuItem
                        onClick={this.handleClose}
                        className={classes.dropdownItem}
                      >
                        Another Notification
                      </MenuItem>
                      <MenuItem
                        onClick={this.handleClose}
                        className={classes.dropdownItem}
                      >
                        Another One
                      </MenuItem>
                    </MenuList>
                  </Paper>
                </Grow>
              </ClickAwayListener>
            </div>
          )}
          </Popper>
        </Manager>
...