fix: update to current react-overlays (#2217)

Update react-overlays to resolve issues with StrictMode, and constrain popup to within Month container.

#2186

package.json

@@ -117,7 +117,7 @@
     "moment": "^2.29.4",
     "moment-timezone": "^0.5.34",
     "prop-types": "^15.8.1",
-    "react-overlays": "^4.1.1",
+    "react-overlays": "^5.2.0",
     "uncontrollable": "^7.2.1"
   },
   "bugs": {

src/Month.js

@@ -9,8 +9,9 @@ import { notify } from './utils/helpers'
 import getPosition from 'dom-helpers/position'
 import * as animationFrame from 'dom-helpers/animationFrame'
 
-import Popup from './Popup'
-import Overlay from 'react-overlays/Overlay'
+/* import Popup from './Popup'
+import Overlay from 'react-overlays/Overlay' */
+import PopOverlay from './PopOverlay'
 import DateContentRow from './DateContentRow'
 import Header from './Header'
 import DateHeader from './DateHeader'
@@ -204,11 +205,40 @@ class MonthView extends React.Component {
   }
 
   renderOverlay() {
-    let overlay = (this.state && this.state.overlay) || {}
-    let { accessors, localizer, components, getters, selected, popupOffset } =
-      this.props
+    let overlay = this.state?.overlay ?? {}
+    let {
+      accessors,
+      localizer,
+      components,
+      getters,
+      selected,
+      popupOffset,
+      handleDragStart,
+    } = this.props
+
+    const onHide = () => this.setState({ overlay: null })
 
     return (
+      <PopOverlay
+        overlay={overlay}
+        accessors={accessors}
+        localizer={localizer}
+        components={components}
+        getters={getters}
+        selected={selected}
+        popupOffset={popupOffset}
+        ref={this.containerRef}
+        handleKeyPressEvent={this.handleKeyPressEvent}
+        handleSelectEvent={this.handleSelectEvent}
+        handleDoubleClickEvent={this.handleDoubleClickEvent}
+        handleDragStart={handleDragStart}
+        show={!!overlay.position}
+        overlayDisplay={this.overlayDisplay}
+        onHide={onHide}
+      />
+    )
+
+    /* return (
       <Overlay
         rootClose
         placement="bottom"
@@ -237,7 +267,7 @@ class MonthView extends React.Component {
           />
         )}
       </Overlay>
-    )
+    ) */
   }
 
   measureRowLimit() {

src/PopOverlay.js

@@ -0,0 +1,95 @@
+import React, { useRef } from 'react'
+import PropTypes from 'prop-types'
+import { Overlay } from 'react-overlays'
+import Popup from './Popup'
+
+function CalOverlay({
+  containerRef,
+  popupOffset = 5,
+  overlay,
+  accessors,
+  localizer,
+  components,
+  getters,
+  selected,
+  handleSelectEvent,
+  handleDoubleClickEvent,
+  handleKeyPressEvent,
+  handleDragStart,
+  onHide,
+  overlayDisplay,
+}) {
+  const popperRef = useRef(null)
+  if (!overlay.position) return null
+
+  let offset
+  if (!isNaN(popupOffset)) {
+    offset = { x: popupOffset, y: popupOffset }
+  }
+
+  const { position, events, date, end } = overlay
+  return (
+    <Overlay
+      rootClose
+      flip
+      show
+      placement="bottom"
+      onHide={onHide}
+      target={overlay.target}
+    >
+      {({ props }) => (
+        <Popup
+          {...props}
+          containerRef={containerRef}
+          ref={popperRef}
+          target={overlay.target}
+          offset={offset}
+          accessors={accessors}
+          getters={getters}
+          selected={selected}
+          components={components}
+          localizer={localizer}
+          position={position}
+          show={overlayDisplay}
+          events={events}
+          slotStart={date}
+          slotEnd={end}
+          onSelect={handleSelectEvent}
+          onDoubleClick={handleDoubleClickEvent}
+          onKeyPress={handleKeyPressEvent}
+          handleDragStart={handleDragStart}
+        />
+      )}
+    </Overlay>
+  )
+}
+
+const PopOverlay = React.forwardRef((props, ref) => (
+  <CalOverlay {...props} containerRef={ref} />
+))
+
+PopOverlay.propTypes = {
+  popupOffset: PropTypes.oneOfType([
+    PropTypes.number,
+    PropTypes.shape({ x: PropTypes.number, y: PropTypes.number }),
+  ]),
+  overlay: PropTypes.shape({
+    position: PropTypes.object,
+    events: PropTypes.array,
+    date: PropTypes.instanceOf(Date),
+    end: PropTypes.instanceOf(Date),
+  }),
+  accessors: PropTypes.object.isRequired,
+  localizer: PropTypes.object.isRequired,
+  components: PropTypes.object.isRequired,
+  getters: PropTypes.object.isRequired,
+  selected: PropTypes.object,
+  handleSelectEvent: PropTypes.func,
+  handleDoubleClickEvent: PropTypes.func,
+  handleKeyPressEvent: PropTypes.func,
+  handleDragStart: PropTypes.func,
+  onHide: PropTypes.func,
+  overlayDisplay: PropTypes.func,
+}
+
+export default PopOverlay