address review feedback

docs-site/src/components/Examples/index.js

@@ -45,7 +45,7 @@ import DisabledKeyboardNavigation from "../../examples/disabledKeyboardNavigatio
 import ReadOnly from "../../examples/readOnly";
 import ClearInput from "../../examples/clearInput";
 import OnBlurCallbacks from "../../examples/onBlurCallbacks";
-import ConfigurePopper from "../../examples/configurePopper";
+import ConfigureFloatingUI from "../../examples/configureFloatingUI";
 import Portal from "../../examples/portal";
 import PortalById from "../../examples/portalById";
 import WithPortalById from "../../examples/withPortalById";
@@ -154,11 +154,12 @@ export default class exampleComponents extends React.Component {
       component: CloseOnScrollCallback,
     },
     {
-      title: "Configure Popper Properties",
-      component: ConfigurePopper,
+      title: "Configure Floating UI Properties",
+      component: ConfigureFloatingUI,
       description: (
         <div>
-          Full docs for the popper can be found at{" "}
+          Full docs for the underlying library that manages the overlay used can
+          be found at{" "}
           <a
             href="https://floating-ui.com/"
             target="_blank"

src/index.jsx

@@ -3,7 +3,8 @@ import PropTypes from "prop-types";
 import Calendar from "./calendar";
 import CalendarIcon from "./calendar_icon";
 import Portal from "./portal";
-import PopperComponent, { popperPlacementPositions } from "./popper_component";
+import PopperComponent from "./popper_component";
+import { popperPlacementPositions } from "./with_floating";
 import classnames from "classnames";
 import set from "date-fns/set";
 import startOfDay from "date-fns/startOfDay";

src/popper_component.jsx

@@ -1,7 +1,6 @@
 import classnames from "classnames";
 import React from "react";
 import PropTypes from "prop-types";
-import { Manager } from "react-popper";
 import { FloatingArrow } from "@floating-ui/react";
 import TabLoop from "./tab_loop";
 import Portal from "./portal";
@@ -94,12 +93,12 @@ export class PopperComponent extends React.Component {
     );
 
     return (
-      <Manager className="react-datepicker-manager">
+      <React.Fragment>
         <div ref={popperProps.refs.setReference} className={wrapperClasses}>
           {targetComponent}
         </div>
         {popper}
-      </Manager>
+      </React.Fragment>
     );
   }
 }

src/stylesheets/datepicker.scss

@@ -16,6 +16,7 @@
   border-radius: $datepicker__border-radius;
   display: inline-block;
   position: relative;
+
   // Reverting value set in .react-datepicker-popper
   line-height: initial;
 }
@@ -34,6 +35,7 @@
 
 .react-datepicker-popper {
   z-index: 1;
+
   // Eliminating extra space at the bottom of the container
   line-height: 0;
 

src/with_floating.jsx

@@ -27,6 +27,7 @@ export default function withFloating(Component) {
   const WithFloating = (props) => {
     const arrowRef = React.useRef();
     const floatingProps = useFloating({
+      open: !props.hidePopper,
       whileElementsMounted: autoUpdate,
       placement: props.popperPlacement,
       middleware: [
@@ -47,11 +48,13 @@ export default function withFloating(Component) {
     popperPlacement: PropTypes.oneOf(popperPlacementPositions),
     popperModifiers: PropTypes.arrayOf(PropTypes.object),
     popperProps: PropTypes.object,
+    hidePopper: PropTypes.bool,
   };
 
   WithFloating.defaultProps = {
     popperModifiers: [],
     popperProps: {},
+    hidePopper: true,
   };
 
   return WithFloating;