diff --git a/docs-site/src/components/Examples/index.js b/docs-site/src/components/Examples/index.js index c26738aa8..97a6383e3 100644 --- a/docs-site/src/components/Examples/index.js +++ b/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: (
- Full docs for the popper can be found at{" "} + Full docs for the underlying library that manages the overlay used can + be found at{" "} +
{targetComponent}
{popper} - +
); } } diff --git a/src/stylesheets/datepicker.scss b/src/stylesheets/datepicker.scss index 8fb4228ba..38eb047fc 100644 --- a/src/stylesheets/datepicker.scss +++ b/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; diff --git a/src/with_floating.jsx b/src/with_floating.jsx index 84f6e5949..66ac1d87e 100644 --- a/src/with_floating.jsx +++ b/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;