react-overlays - npm Package Compare versions

Comparing version 3.2.0 to 4.0.0

cjs/DropdownContext.js

@@ -10,3 +10,3 @@ "use strict";
 
-var DropdownContext = _react["default"].createContext(null);
+var DropdownContext = /*#__PURE__*/_react["default"].createContext(null);
 
@@ -13,0 +13,0 @@ var _default = DropdownContext;

cjs/DropdownMenu.d.ts

 import PropTypes from 'prop-types';
 import React from 'react';
-import { UsePopperOptions } from './usePopper';
+import { UsePopperOptions, Offset } from './usePopper';
 import { RootCloseOptions } from './useRootClose';
@@ -10,2 +10,3 @@ export interface UseDropdownMenuOptions {
     usePopper?: boolean;
+    offset?: Offset;
     rootCloseEvent?: RootCloseOptions['clickTrigger'];
@@ -19,3 +20,5 @@ popperConfig?: Omit<UsePopperOptions, 'enabled' | 'placement'>;
     close: (e: Event) => void;
-    props: {
+    update: () => void;
+    forceUpdate: () => void;
+    props: Record<string, any> & {
         ref: React.RefCallback<HTMLElement>;
@@ -25,5 +28,5 @@ style?: React.CSSProperties;
     };
-    arrowProps: {
+    arrowProps: Record<string, any> & {
         ref: React.RefCallback<HTMLElement>;
-        style?: React.CSSProperties;
+        style: React.CSSProperties;
     };
@@ -35,2 +38,3 @@ }
  * @param {boolean} options.flip Automatically adjust the menu `drop` position based on viewport edge detection
+ * @param {[number, number]} options.offset Define an offset distance between the Menu and the Toggle
  * @param {boolean} options.show Display the menu manually, ignored in the context of a `Dropdown`
@@ -64,4 +68,4 @@ * @param {boolean} options.usePopper opt in/out of using PopperJS to position menus. When disabled you must position it yourself.
          *   placement: Placement,
-         *   outOfBoundaries: ?boolean,
-         *   scheduleUpdate: () => void,
+         *   update: () => void,
+         *   forceUpdate: () => void,
          *   props: {
@@ -68,0 +72,0 @@ *     ref: (?HTMLElement) => void,

cjs/DropdownMenu.js

@@ -11,6 +11,6 @@ "use strict";
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -24,6 +24,8 @@
 
-var _usePopper = _interopRequireWildcard(require("./usePopper"));
+var _usePopper2 = _interopRequireDefault(require("./usePopper"));
 
 var _useRootClose = _interopRequireDefault(require("./useRootClose"));
 
+var _mergeOptionsWithPopperConfig = _interopRequireDefault(require("./mergeOptionsWithPopperConfig"));
+
 var noop = function noop() {};
@@ -34,2 +36,3 @@ /**
  * @param {boolean} options.flip Automatically adjust the menu `drop` position based on viewport edge detection
+ * @param {[number, number]} options.offset Define an offset distance between the Menu and the Toggle
  * @param {boolean} options.show Display the menu manually, ignored in the context of a `Dropdown`
@@ -43,4 +46,2 @@ * @param {boolean} options.usePopper opt in/out of using PopperJS to position menus. When disabled you must position it yourself.
 function useDropdownMenu(options) {
-  var _modifiers$arrow;
-
   if (options === void 0) {
@@ -59,2 +60,3 @@ options = {};
       flip = _options.flip,
+      offset = _options.offset,
       rootCloseEvent = _options.rootCloseEvent,
@@ -84,21 +86,16 @@ _options$popperConfig = _options.popperConfig,
   if (drop === 'up') placement = alignEnd ? 'top-end' : 'top-start';else if (drop === 'right') placement = alignEnd ? 'right-end' : 'right-start';else if (drop === 'left') placement = alignEnd ? 'left-end' : 'left-start';
-  var modifiers = (0, _usePopper.toModifierMap)(popperConfig.modifiers);
-  var popper = (0, _usePopper["default"])(toggleElement, menuElement, (0, _extends2["default"])((0, _extends2["default"])({}, popperConfig), {}, {
+
+  var _usePopper = (0, _usePopper2["default"])(toggleElement, menuElement, (0, _mergeOptionsWithPopperConfig["default"])({
     placement: placement,
     enabled: !!(shouldUsePopper && show),
-    modifiers: (0, _extends2["default"])((0, _extends2["default"])({}, modifiers), {}, {
-      eventListeners: {
-        enabled: !!show
-      },
-      arrow: (0, _extends2["default"])((0, _extends2["default"])({}, modifiers.arrow), {}, {
-        enabled: !!arrowElement,
-        options: (0, _extends2["default"])((0, _extends2["default"])({}, (_modifiers$arrow = modifiers.arrow) == null ? void 0 : _modifiers$arrow.options), {}, {
-          element: arrowElement
-        })
-      }),
-      flip: (0, _extends2["default"])({
-        enabled: !!flip
-      }, modifiers.flip)
-    })
-  }));
+    enableEvents: show,
+    offset: offset,
+    flip: flip,
+    arrowElement: arrowElement,
+    popperConfig: popperConfig
+  })),
+      styles = _usePopper.styles,
+      attributes = _usePopper.attributes,
+      popper = (0, _objectWithoutPropertiesLoose2["default"])(_usePopper, ["styles", "attributes"]);
+
   var menu;
@@ -117,14 +114,15 @@ var menuProps = {
   if (!shouldUsePopper) {
-    menu = (0, _extends2["default"])((0, _extends2["default"])({}, childArgs), {}, {
+    menu = (0, _extends2["default"])({}, childArgs, {
       props: menuProps
     });
   } else {
-    menu = (0, _extends2["default"])((0, _extends2["default"])((0, _extends2["default"])({}, popper), childArgs), {}, {
-      props: (0, _extends2["default"])((0, _extends2["default"])({}, menuProps), {}, {
-        style: popper.styles
+    menu = (0, _extends2["default"])({}, popper, childArgs, {
+      props: (0, _extends2["default"])({}, menuProps, attributes.popper, {
+        style: styles.popper
       }),
-      arrowProps: {
-        ref: attachArrowRef,
-        style: popper.arrowStyles
-      }
+      arrowProps: (0, _extends2["default"])({
+        ref: attachArrowRef
+      }, attributes.arrow, {
+        style: styles.arrow
+      })
     });
@@ -150,4 +148,4 @@ }
    *   placement: Placement,
-   *   outOfBoundaries: ?boolean,
-   *   scheduleUpdate: () => void,
+   *   update: () => void,
+   *   forceUpdate: () => void,
    *   props: {
@@ -154,0 +152,0 @@ *     ref: (?HTMLElement) => void,

cjs/Modal.js

@@ -40,5 +40,3 @@ "use strict";
 
-/* eslint-disable @typescript-eslint/no-use-before-define */
-
-/* eslint-disable react/prop-types */
+/* eslint-disable @typescript-eslint/no-use-before-define, react/prop-types */
 var manager;
@@ -76,3 +74,3 @@
 
-var Modal = (0, _react.forwardRef)(function (_ref, ref) {
+var Modal = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var _ref$show = _ref.show,
@@ -249,3 +247,3 @@ show = _ref$show === void 0 ? false : _ref$show,
 
-  var dialogProps = (0, _extends2["default"])((0, _extends2["default"])({
+  var dialogProps = (0, _extends2["default"])({
     role: role,
@@ -255,3 +253,3 @@ ref: modal.setDialogRef,
     'aria-modal': role === 'dialog' ? true : undefined
-  }, rest), {}, {
+  }, rest, {
     style: style,
@@ -261,3 +259,3 @@ className: className,
   });
-  var dialog = renderDialog ? renderDialog(dialogProps) : /*#__PURE__*/_react["default"].createElement("div", dialogProps, _react["default"].cloneElement(children, {
+  var dialog = renderDialog ? renderDialog(dialogProps) : /*#__PURE__*/_react["default"].createElement("div", dialogProps, /*#__PURE__*/_react["default"].cloneElement(children, {
     role: 'document'
@@ -297,3 +295,3 @@ }));
 
-  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, _reactDom["default"].createPortal( /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, backdropElement, dialog), container));
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_reactDom["default"].createPortal( /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, backdropElement, dialog), container));
 });
@@ -300,0 +298,0 @@ var propTypes = {

cjs/ModalManager.js

@@ -94,6 +94,3 @@ "use strict";
   _proto.removeContainerStyle = function removeContainerStyle(containerState, container) {
-    var style = containerState.style;
-    Object.keys(style).forEach(function (key) {
-      container.style[key] = style[key];
-    });
+    Object.assign(container.style, containerState.style);
   };
@@ -100,0 +97,0 @@

cjs/Overlay.d.ts

 import React from 'react';
-import { Placement, UsePopperOptions } from './usePopper';
+import { Placement, UsePopperOptions, Offset, State } from './usePopper';
 import { RootCloseOptions } from './useRootClose';
@@ -9,2 +9,3 @@ import { DOMContainer } from './useWaitForDOMRef';
     placement?: Placement;
+    offset?: Offset;
     containerPadding?: number;
@@ -26,5 +27,6 @@ popperConfig?: Omit<UsePopperOptions, 'placement'>;
         placement: Placement;
-        outOfBoundaries: boolean;
-        scheduleUpdate: () => void;
-        props: {
+        update: () => void;
+        forceUpdate: () => void;
+        state?: State;
+        props: Record<string, any> & {
             ref: React.RefCallback<HTMLElement>;
@@ -34,3 +36,3 @@ style: React.CSSProperties;
         };
-        arrowProps: {
+        arrowProps: Record<string, any> & {
             ref: React.RefCallback<HTMLElement>;
@@ -45,3 +47,3 @@ style: React.CSSProperties;
  */
-declare const Overlay: React.ForwardRefExoticComponent<OverlayProps & React.RefAttributes<unknown>>;
+declare const Overlay: React.ForwardRefExoticComponent<OverlayProps & React.RefAttributes<HTMLElement>>;
 export default Overlay;

cjs/Overlay.js

@@ -26,3 +26,3 @@ "use strict";
 
-var _usePopper2 = _interopRequireWildcard(require("./usePopper"));
+var _usePopper2 = _interopRequireDefault(require("./usePopper"));
 
@@ -33,2 +33,4 @@ var _useRootClose = _interopRequireDefault(require("./useRootClose"));
 
+var _mergeOptionsWithPopperConfig = _interopRequireDefault(require("./mergeOptionsWithPopperConfig"));
+
 /**
@@ -38,6 +40,5 @@ * Built on top of `Popper.js`, the overlay component is
  */
-var Overlay = _react["default"].forwardRef(function (props, outerRef) {
-  var _modifiers$preventOve, _modifiers$arrow;
-
+var Overlay = /*#__PURE__*/_react["default"].forwardRef(function (props, outerRef) {
   var flip = props.flip,
+      offset = props.offset,
       placement = props.placement,
@@ -66,29 +67,14 @@ _props$containerPaddi = props.containerPadding,
 
-  var modifiers = (0, _usePopper2.toModifierMap)(popperConfig.modifiers);
-
-  var _usePopper = (0, _usePopper2["default"])(target, rootElement, (0, _extends2["default"])((0, _extends2["default"])({}, popperConfig), {}, {
-    placement: placement || 'bottom',
-    modifiers: (0, _extends2["default"])((0, _extends2["default"])({}, modifiers), {}, {
-      eventListeners: {
-        enabled: !!props.show
-      },
-      preventOverflow: (0, _extends2["default"])((0, _extends2["default"])({}, modifiers.preventOverflow), {}, {
-        options: (0, _extends2["default"])({
-          padding: containerPadding || 5
-        }, (_modifiers$preventOve = modifiers.preventOverflow) == null ? void 0 : _modifiers$preventOve.options)
-      }),
-      arrow: (0, _extends2["default"])((0, _extends2["default"])({}, modifiers.arrow), {}, {
-        enabled: !!arrowElement,
-        options: (0, _extends2["default"])((0, _extends2["default"])({}, (_modifiers$arrow = modifiers.arrow) == null ? void 0 : _modifiers$arrow.options), {}, {
-          element: arrowElement
-        })
-      }),
-      flip: (0, _extends2["default"])({
-        enabled: !!flip
-      }, modifiers.flip)
-    })
+  var _usePopper = (0, _usePopper2["default"])(target, rootElement, (0, _mergeOptionsWithPopperConfig["default"])({
+    placement: placement,
+    enableEvents: !!props.show,
+    containerPadding: containerPadding || 5,
+    flip: flip,
+    offset: offset,
+    arrowElement: arrowElement,
+    popperConfig: popperConfig
   })),
       styles = _usePopper.styles,
-      arrowStyles = _usePopper.arrowStyles,
-      popper = (0, _objectWithoutPropertiesLoose2["default"])(_usePopper, ["styles", "arrowStyles"]);
+      attributes = _usePopper.attributes,
+      popper = (0, _objectWithoutPropertiesLoose2["default"])(_usePopper, ["styles", "attributes"]);
 
@@ -121,12 +107,12 @@ if (props.show) {
 
-  var child = props.children((0, _extends2["default"])((0, _extends2["default"])({}, popper), {}, {
+  var child = props.children((0, _extends2["default"])({}, popper, {
     show: !!props.show,
-    props: {
-      style: styles,
+    props: (0, _extends2["default"])({}, attributes.popper, {
+      style: styles.popper,
       ref: mergedRef
-    },
-    arrowProps: {
-      style: arrowStyles,
+    }),
+    arrowProps: (0, _extends2["default"])({}, attributes.arrow, {
+      style: styles.arrow,
       ref: attachArrowRef
-    }
+    })
   }));
@@ -152,3 +138,3 @@
 
-  return container ? _reactDom["default"].createPortal(child, container) : null;
+  return container ? /*#__PURE__*/_reactDom["default"].createPortal(child, container) : null;
 });
@@ -192,4 +178,4 @@
    *   placement: Placement,
-   *   outOfBoundaries: ?boolean,
-   *   scheduleUpdate: () => void,
+   *   update: () => void,
+   *   forceUpdate: () => void,
    *   props: {
@@ -199,2 +185,3 @@ *     ref: (?HTMLElement) => void,
    *     aria-labelledby: ?string
+   *     [string]: string | number,
    *   },
@@ -204,2 +191,3 @@ *   arrowProps: {
    *     style: { [string]: string | number },
+   *     [string]: string | number,
    *   },
@@ -206,0 +194,0 @@ * }) => React.Element}

cjs/ownerDocument.d.ts

@@ -1,3 +0,2 @@
-/// <reference types="react" />
-declare const _default: (componentOrElement: Element | import("react").ComponentClass<{}, any> | null | undefined) => Document;
+declare const _default: (componentOrElement: React.ComponentClass | Element | null | undefined) => Document;
 export default _default;

cjs/Portal.js

@@ -33,3 +33,3 @@ "use strict";
   var resolvedContainer = (0, _useWaitForDOMRef["default"])(container, onRendered);
-  return resolvedContainer ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, _reactDom["default"].createPortal(children, resolvedContainer)) : null;
+  return resolvedContainer ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_reactDom["default"].createPortal(children, resolvedContainer)) : null;
 };
@@ -36,0 +36,0 @@

cjs/usePopper.d.ts

@@ -8,19 +8,23 @@ import * as Popper from '@popperjs/core';
 export declare type State = Popper.State;
+export declare type OffsetValue = [number | null | undefined, number | null | undefined];
+export declare type OffsetFunction = (details: {
+    popper: Popper.Rect;
+    reference: Popper.Rect;
+    placement: Placement;
+}) => OffsetValue;
+export declare type Offset = OffsetFunction | OffsetValue;
 export declare type ModifierMap = Record<string, Partial<Modifier<any, any>>>;
 export declare type Modifiers = Popper.Options['modifiers'] | Record<string, Partial<Modifier<any, any>>>;
-export declare function toModifierMap(modifiers: Modifiers | undefined): Record<string, Partial<Popper.Modifier<any, any>>>;
-export declare function toModifierArray(map?: Modifiers | undefined): Partial<Popper.Modifier<any, any>>[];
 export declare type UsePopperOptions = Omit<Options, 'modifiers' | 'placement' | 'strategy'> & {
+    enabled?: boolean;
     placement?: Options['placement'];
     strategy?: Options['strategy'];
-    modifiers?: Modifiers;
-    eventsEnabled?: boolean;
-    enabled?: boolean;
+    modifiers?: Options['modifiers'];
 };
 export interface UsePopperState {
     placement: Placement;
-    outOfBoundaries: boolean;
-    scheduleUpdate: () => void;
-    styles: Partial<CSSStyleDeclaration>;
-    arrowStyles: Partial<CSSStyleDeclaration>;
+    update: () => void;
+    forceUpdate: () => void;
+    attributes: Record<string, Record<string, any>>;
+    styles: Record<string, Partial<CSSStyleDeclaration>>;
     state?: State;
@@ -44,3 +48,3 @@ }
  */
-declare function usePopper(referenceElement: VirtualElement | null | undefined, popperElement: HTMLElement | null | undefined, { enabled, placement, strategy, eventsEnabled, modifiers: userModifiers, ...popperOptions }?: UsePopperOptions): UsePopperState;
+declare function usePopper(referenceElement: VirtualElement | null | undefined, popperElement: HTMLElement | null | undefined, { enabled, placement, strategy, modifiers, ...config }?: UsePopperOptions): UsePopperState;
 export default usePopper;

cjs/usePopper.js

@@ -6,4 +6,2 @@ "use strict";
 exports.__esModule = true;
-exports.toModifierMap = toModifierMap;
-exports.toModifierArray = toModifierArray;
 exports["default"] = void 0;
@@ -21,37 +19,18 @@
 
-var initialPopperStyles = {
-  position: 'absolute',
-  top: '0',
-  left: '0',
-  opacity: '0',
-  pointerEvents: 'none'
+var initialPopperStyles = function initialPopperStyles(position) {
+  return {
+    position: position,
+    top: '0',
+    left: '0',
+    opacity: '0',
+    pointerEvents: 'none'
+  };
 };
-var initialArrowStyles = {}; // until docjs supports type exports...
 
-function toModifierMap(modifiers) {
-  var result = {};
+var disabledApplyStylesModifier = {
+  name: 'applyStyles',
+  enabled: false
+}; // until docjs supports type exports...
 
-  if (!Array.isArray(modifiers)) {
-    return modifiers || result;
-  } // eslint-disable-next-line no-unused-expressions
-
-
-  modifiers == null ? void 0 : modifiers.forEach(function (m) {
-    result[m.name] = m;
-  });
-  return result;
-}
-
-function toModifierArray(map) {
-  if (map === void 0) {
-    map = {};
-  }
-
-  if (Array.isArray(map)) return map;
-  return Object.keys(map).map(function (k) {
-    map[k].name = k;
-    return map[k];
-  });
-}
-
+var EMPTY_MODIFIERS = [];
 /**
@@ -73,2 +52,3 @@ * Position an element relative some reference element using Popper.js
  */
+
 function usePopper(referenceElement, popperElement, _temp) {
@@ -82,22 +62,29 @@ var _ref = _temp === void 0 ? {} : _temp,
       strategy = _ref$strategy === void 0 ? 'absolute' : _ref$strategy,
-      _ref$eventsEnabled = _ref.eventsEnabled,
-      eventsEnabled = _ref$eventsEnabled === void 0 ? true : _ref$eventsEnabled,
-      userModifiers = _ref.modifiers,
-      popperOptions = (0, _objectWithoutPropertiesLoose2["default"])(_ref, ["enabled", "placement", "strategy", "eventsEnabled", "modifiers"]);
+      _ref$modifiers = _ref.modifiers,
+      modifiers = _ref$modifiers === void 0 ? EMPTY_MODIFIERS : _ref$modifiers,
+      config = (0, _objectWithoutPropertiesLoose2["default"])(_ref, ["enabled", "placement", "strategy", "modifiers"]);
 
   var popperInstanceRef = (0, _react.useRef)();
-  var scheduleUpdate = (0, _react.useCallback)(function () {
-    if (popperInstanceRef.current) {
-      popperInstanceRef.current.update();
-    }
+  var update = (0, _react.useCallback)(function () {
+    var _popperInstanceRef$cu;
+
+    (_popperInstanceRef$cu = popperInstanceRef.current) == null ? void 0 : _popperInstanceRef$cu.update();
   }, []);
+  var forceUpdate = (0, _react.useCallback)(function () {
+    var _popperInstanceRef$cu2;
 
+    (_popperInstanceRef$cu2 = popperInstanceRef.current) == null ? void 0 : _popperInstanceRef$cu2.forceUpdate();
+  }, []);
+
   var _useSafeState = (0, _useSafeState2["default"])((0, _react.useState)({
     placement: placement,
-    scheduleUpdate: scheduleUpdate,
-    outOfBoundaries: false,
-    styles: initialPopperStyles,
-    arrowStyles: initialArrowStyles
+    update: update,
+    forceUpdate: forceUpdate,
+    attributes: {},
+    styles: {
+      popper: initialPopperStyles(strategy),
+      arrow: {}
+    }
   })),
-      state = _useSafeState[0],
+      popperState = _useSafeState[0],
       setState = _useSafeState[1];
@@ -109,39 +96,24 @@
       enabled: true,
-      phase: 'afterWrite',
+      phase: 'write',
       requires: ['computeStyles'],
-      fn: function fn(data) {
-        var _data$state$modifiers, _data$state$styles, _data$state$styles2;
-
+      fn: function fn(_ref2) {
+        var state = _ref2.state;
+        var styles = {};
+        var attributes = {};
+        Object.keys(state.elements).forEach(function (element) {
+          styles[element] = state.styles[element];
+          attributes[element] = state.attributes[element];
+        });
         setState({
-          scheduleUpdate: scheduleUpdate,
-          outOfBoundaries: !!((_data$state$modifiers = data.state.modifiersData.hide) == null ? void 0 : _data$state$modifiers.isReferenceHidden),
-          placement: data.state.placement,
-          styles: (0, _extends2["default"])({}, (_data$state$styles = data.state.styles) == null ? void 0 : _data$state$styles.popper),
-          arrowStyles: (0, _extends2["default"])({}, (_data$state$styles2 = data.state.styles) == null ? void 0 : _data$state$styles2.arrow),
-          state: data.state
+          state: state,
+          styles: styles,
+          attributes: attributes,
+          update: update,
+          forceUpdate: forceUpdate,
+          placement: state.placement
         });
       }
     };
-  }, [scheduleUpdate, setState]);
-  var modifiers = toModifierArray(userModifiers);
-  var eventsModifier = modifiers.find(function (m) {
-    return m.name === 'eventListeners';
-  });
-
-  if (!eventsModifier && eventsEnabled) {
-    eventsModifier = {
-      name: 'eventListeners',
-      enabled: true
-    };
-    modifiers = [].concat(modifiers, [eventsModifier]);
-  } // A placement difference in state means popper determined a new placement
-  // apart from the props value. By the time the popper element is rendered with
-  // the new position Popper has already measured it, if the place change triggers
-  // a size change it will result in a misaligned popper. So we schedule an update to be sure.
-
-
+  }, [update, forceUpdate, setState]);
   (0, _react.useEffect)(function () {
-    scheduleUpdate();
-  }, [state.placement, scheduleUpdate]);
-  (0, _react.useEffect)(function () {
     if (!popperInstanceRef.current || !enabled) return;
@@ -151,6 +123,6 @@ popperInstanceRef.current.setOptions({
       strategy: strategy,
-      modifiers: [].concat(modifiers, [updateModifier])
+      modifiers: [].concat(modifiers, [updateModifier, disabledApplyStylesModifier])
     }); // intentionally NOT re-running on new modifiers
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [strategy, placement, eventsModifier.enabled, updateModifier, enabled]);
+  }, [strategy, placement, updateModifier, enabled]);
   (0, _react.useEffect)(function () {
@@ -161,3 +133,3 @@ if (!enabled || referenceElement == null || popperElement == null) {
 
-    popperInstanceRef.current = (0, _popper.createPopper)(referenceElement, popperElement, (0, _extends2["default"])((0, _extends2["default"])({}, popperOptions), {}, {
+    popperInstanceRef.current = (0, _popper.createPopper)(referenceElement, popperElement, (0, _extends2["default"])({}, config, {
       placement: placement,
@@ -172,5 +144,7 @@ strategy: strategy,
         setState(function (s) {
-          return (0, _extends2["default"])((0, _extends2["default"])({}, s), {}, {
-            styles: initialPopperStyles,
-            arrowStyles: initialArrowStyles
+          return (0, _extends2["default"])({}, s, {
+            attributes: {},
+            styles: {
+              popper: initialPopperStyles(strategy)
+            }
           });
@@ -182,6 +156,7 @@ });
   }, [enabled, referenceElement, popperElement]);
-  return state;
+  return popperState;
 }
 
 var _default = usePopper;
-exports["default"] = _default;
+exports["default"] = _default;
+module.exports = exports.default;

esm/DropdownContext.js

 import React from 'react';
-var DropdownContext = React.createContext(null);
+var DropdownContext = /*#__PURE__*/React.createContext(null);
 export default DropdownContext;

esm/DropdownMenu.d.ts

 import PropTypes from 'prop-types';
 import React from 'react';
-import { UsePopperOptions } from './usePopper';
+import { UsePopperOptions, Offset } from './usePopper';
 import { RootCloseOptions } from './useRootClose';
@@ -10,2 +10,3 @@ export interface UseDropdownMenuOptions {
     usePopper?: boolean;
+    offset?: Offset;
     rootCloseEvent?: RootCloseOptions['clickTrigger'];
@@ -19,3 +20,5 @@ popperConfig?: Omit<UsePopperOptions, 'enabled' | 'placement'>;
     close: (e: Event) => void;
-    props: {
+    update: () => void;
+    forceUpdate: () => void;
+    props: Record<string, any> & {
         ref: React.RefCallback<HTMLElement>;
@@ -25,5 +28,5 @@ style?: React.CSSProperties;
     };
-    arrowProps: {
+    arrowProps: Record<string, any> & {
         ref: React.RefCallback<HTMLElement>;
-        style?: React.CSSProperties;
+        style: React.CSSProperties;
     };
@@ -35,2 +38,3 @@ }
  * @param {boolean} options.flip Automatically adjust the menu `drop` position based on viewport edge detection
+ * @param {[number, number]} options.offset Define an offset distance between the Menu and the Toggle
  * @param {boolean} options.show Display the menu manually, ignored in the context of a `Dropdown`
@@ -64,4 +68,4 @@ * @param {boolean} options.usePopper opt in/out of using PopperJS to position menus. When disabled you must position it yourself.
          *   placement: Placement,
-         *   outOfBoundaries: ?boolean,
-         *   scheduleUpdate: () => void,
+         *   update: () => void,
+         *   forceUpdate: () => void,
          *   props: {
@@ -68,0 +72,0 @@ *     ref: (?HTMLElement) => void,

esm/DropdownMenu.js

@@ -0,3 +1,3 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import _extends from "@babel/runtime/helpers/esm/extends";
 import PropTypes from 'prop-types';
@@ -7,4 +7,5 @@ import React, { useContext, useRef } from 'react';
 import DropdownContext from './DropdownContext';
-import usePopper, { toModifierMap } from './usePopper';
+import usePopper from './usePopper';
 import useRootClose from './useRootClose';
+import mergeOptionsWithPopperConfig from './mergeOptionsWithPopperConfig';
 
@@ -16,2 +17,3 @@ var noop = function noop() {};
  * @param {boolean} options.flip Automatically adjust the menu `drop` position based on viewport edge detection
+ * @param {[number, number]} options.offset Define an offset distance between the Menu and the Toggle
  * @param {boolean} options.show Display the menu manually, ignored in the context of a `Dropdown`
@@ -25,4 +27,2 @@ * @param {boolean} options.usePopper opt in/out of using PopperJS to position menus. When disabled you must position it yourself.
 export function useDropdownMenu(options) {
-  var _modifiers$arrow;
-
   if (options === void 0) {
@@ -41,2 +41,3 @@ options = {};
       flip = _options.flip,
+      offset = _options.offset,
       rootCloseEvent = _options.rootCloseEvent,
@@ -66,21 +67,16 @@ _options$popperConfig = _options.popperConfig,
   if (drop === 'up') placement = alignEnd ? 'top-end' : 'top-start';else if (drop === 'right') placement = alignEnd ? 'right-end' : 'right-start';else if (drop === 'left') placement = alignEnd ? 'left-end' : 'left-start';
-  var modifiers = toModifierMap(popperConfig.modifiers);
-  var popper = usePopper(toggleElement, menuElement, _extends(_extends({}, popperConfig), {}, {
+
+  var _usePopper = usePopper(toggleElement, menuElement, mergeOptionsWithPopperConfig({
     placement: placement,
     enabled: !!(shouldUsePopper && show),
-    modifiers: _extends(_extends({}, modifiers), {}, {
-      eventListeners: {
-        enabled: !!show
-      },
-      arrow: _extends(_extends({}, modifiers.arrow), {}, {
-        enabled: !!arrowElement,
-        options: _extends(_extends({}, (_modifiers$arrow = modifiers.arrow) == null ? void 0 : _modifiers$arrow.options), {}, {
-          element: arrowElement
-        })
-      }),
-      flip: _extends({
-        enabled: !!flip
-      }, modifiers.flip)
-    })
-  }));
+    enableEvents: show,
+    offset: offset,
+    flip: flip,
+    arrowElement: arrowElement,
+    popperConfig: popperConfig
+  })),
+      styles = _usePopper.styles,
+      attributes = _usePopper.attributes,
+      popper = _objectWithoutPropertiesLoose(_usePopper, ["styles", "attributes"]);
+
   var menu;
@@ -99,14 +95,15 @@ var menuProps = {
   if (!shouldUsePopper) {
-    menu = _extends(_extends({}, childArgs), {}, {
+    menu = _extends({}, childArgs, {
       props: menuProps
     });
   } else {
-    menu = _extends(_extends(_extends({}, popper), childArgs), {}, {
-      props: _extends(_extends({}, menuProps), {}, {
-        style: popper.styles
+    menu = _extends({}, popper, childArgs, {
+      props: _extends({}, menuProps, attributes.popper, {
+        style: styles.popper
       }),
-      arrowProps: {
-        ref: attachArrowRef,
-        style: popper.arrowStyles
-      }
+      arrowProps: _extends({
+        ref: attachArrowRef
+      }, attributes.arrow, {
+        style: styles.arrow
+      })
     });
@@ -131,4 +128,4 @@ }
    *   placement: Placement,
-   *   outOfBoundaries: ?boolean,
-   *   scheduleUpdate: () => void,
+   *   update: () => void,
+   *   forceUpdate: () => void,
    *   props: {
@@ -135,0 +132,0 @@ *     ref: (?HTMLElement) => void,

esm/Modal.js

 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 
-/* eslint-disable @typescript-eslint/no-use-before-define */
-
-/* eslint-disable react/prop-types */
+/* eslint-disable @typescript-eslint/no-use-before-define, react/prop-types */
 import activeElement from 'dom-helpers/activeElement';
@@ -52,3 +50,3 @@ import contains from 'dom-helpers/contains';
 
-var Modal = forwardRef(function (_ref, ref) {
+var Modal = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var _ref$show = _ref.show,
@@ -226,3 +224,3 @@ show = _ref$show === void 0 ? false : _ref$show,
 
-  var dialogProps = _extends(_extends({
+  var dialogProps = _extends({
     role: role,
@@ -232,3 +230,3 @@ ref: modal.setDialogRef,
     'aria-modal': role === 'dialog' ? true : undefined
-  }, rest), {}, {
+  }, rest, {
     style: style,
@@ -239,3 +237,3 @@ className: className,
 
-  var dialog = renderDialog ? renderDialog(dialogProps) : /*#__PURE__*/React.createElement("div", dialogProps, React.cloneElement(children, {
+  var dialog = renderDialog ? renderDialog(dialogProps) : /*#__PURE__*/React.createElement("div", dialogProps, /*#__PURE__*/React.cloneElement(children, {
     role: 'document'
@@ -275,3 +273,3 @@ }));
 
-  return /*#__PURE__*/React.createElement(React.Fragment, null, ReactDOM.createPortal( /*#__PURE__*/React.createElement(React.Fragment, null, backdropElement, dialog), container));
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React.createElement(React.Fragment, null, backdropElement, dialog), container));
 });
@@ -278,0 +276,0 @@ var propTypes = {

esm/ModalManager.js

@@ -82,6 +82,3 @@ import addClass from 'dom-helpers/addClass';
   _proto.removeContainerStyle = function removeContainerStyle(containerState, container) {
-    var style = containerState.style;
-    Object.keys(style).forEach(function (key) {
-      container.style[key] = style[key];
-    });
+    Object.assign(container.style, containerState.style);
   };
@@ -88,0 +85,0 @@

esm/Overlay.d.ts

 import React from 'react';
-import { Placement, UsePopperOptions } from './usePopper';
+import { Placement, UsePopperOptions, Offset, State } from './usePopper';
 import { RootCloseOptions } from './useRootClose';
@@ -9,2 +9,3 @@ import { DOMContainer } from './useWaitForDOMRef';
     placement?: Placement;
+    offset?: Offset;
     containerPadding?: number;
@@ -26,5 +27,6 @@ popperConfig?: Omit<UsePopperOptions, 'placement'>;
         placement: Placement;
-        outOfBoundaries: boolean;
-        scheduleUpdate: () => void;
-        props: {
+        update: () => void;
+        forceUpdate: () => void;
+        state?: State;
+        props: Record<string, any> & {
             ref: React.RefCallback<HTMLElement>;
@@ -34,3 +36,3 @@ style: React.CSSProperties;
         };
-        arrowProps: {
+        arrowProps: Record<string, any> & {
             ref: React.RefCallback<HTMLElement>;
@@ -45,3 +47,3 @@ style: React.CSSProperties;
  */
-declare const Overlay: React.ForwardRefExoticComponent<OverlayProps & React.RefAttributes<unknown>>;
+declare const Overlay: React.ForwardRefExoticComponent<OverlayProps & React.RefAttributes<HTMLElement>>;
 export default Overlay;

esm/Overlay.js

@@ -9,5 +9,6 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import { placements } from './popper';
-import usePopper, { toModifierMap } from './usePopper';
+import usePopper from './usePopper';
 import useRootClose from './useRootClose';
 import useWaitForDOMRef from './useWaitForDOMRef';
+import mergeOptionsWithPopperConfig from './mergeOptionsWithPopperConfig';
 
@@ -18,6 +19,5 @@ /**
  */
-var Overlay = React.forwardRef(function (props, outerRef) {
-  var _modifiers$preventOve, _modifiers$arrow;
-
+var Overlay = /*#__PURE__*/React.forwardRef(function (props, outerRef) {
   var flip = props.flip,
+      offset = props.offset,
       placement = props.placement,
@@ -46,29 +46,14 @@ _props$containerPaddi = props.containerPadding,
 
-  var modifiers = toModifierMap(popperConfig.modifiers);
-
-  var _usePopper = usePopper(target, rootElement, _extends(_extends({}, popperConfig), {}, {
-    placement: placement || 'bottom',
-    modifiers: _extends(_extends({}, modifiers), {}, {
-      eventListeners: {
-        enabled: !!props.show
-      },
-      preventOverflow: _extends(_extends({}, modifiers.preventOverflow), {}, {
-        options: _extends({
-          padding: containerPadding || 5
-        }, (_modifiers$preventOve = modifiers.preventOverflow) == null ? void 0 : _modifiers$preventOve.options)
-      }),
-      arrow: _extends(_extends({}, modifiers.arrow), {}, {
-        enabled: !!arrowElement,
-        options: _extends(_extends({}, (_modifiers$arrow = modifiers.arrow) == null ? void 0 : _modifiers$arrow.options), {}, {
-          element: arrowElement
-        })
-      }),
-      flip: _extends({
-        enabled: !!flip
-      }, modifiers.flip)
-    })
+  var _usePopper = usePopper(target, rootElement, mergeOptionsWithPopperConfig({
+    placement: placement,
+    enableEvents: !!props.show,
+    containerPadding: containerPadding || 5,
+    flip: flip,
+    offset: offset,
+    arrowElement: arrowElement,
+    popperConfig: popperConfig
   })),
       styles = _usePopper.styles,
-      arrowStyles = _usePopper.arrowStyles,
-      popper = _objectWithoutPropertiesLoose(_usePopper, ["styles", "arrowStyles"]);
+      attributes = _usePopper.attributes,
+      popper = _objectWithoutPropertiesLoose(_usePopper, ["styles", "attributes"]);
 
@@ -101,12 +86,12 @@ if (props.show) {
 
-  var child = props.children(_extends(_extends({}, popper), {}, {
+  var child = props.children(_extends({}, popper, {
     show: !!props.show,
-    props: {
-      style: styles,
+    props: _extends({}, attributes.popper, {
+      style: styles.popper,
       ref: mergedRef
-    },
-    arrowProps: {
-      style: arrowStyles,
+    }),
+    arrowProps: _extends({}, attributes.arrow, {
+      style: styles.arrow,
       ref: attachArrowRef
-    }
+    })
   }));
@@ -132,3 +117,3 @@
 
-  return container ? ReactDOM.createPortal(child, container) : null;
+  return container ? /*#__PURE__*/ReactDOM.createPortal(child, container) : null;
 });
@@ -171,4 +156,4 @@ Overlay.displayName = 'Overlay';
    *   placement: Placement,
-   *   outOfBoundaries: ?boolean,
-   *   scheduleUpdate: () => void,
+   *   update: () => void,
+   *   forceUpdate: () => void,
    *   props: {
@@ -178,2 +163,3 @@ *     ref: (?HTMLElement) => void,
    *     aria-labelledby: ?string
+   *     [string]: string | number,
    *   },
@@ -183,2 +169,3 @@ *   arrowProps: {
    *     style: { [string]: string | number },
+   *     [string]: string | number,
    *   },
@@ -185,0 +172,0 @@ * }) => React.Element}

esm/ownerDocument.d.ts

@@ -1,3 +0,2 @@
-/// <reference types="react" />
-declare const _default: (componentOrElement: Element | import("react").ComponentClass<{}, any> | null | undefined) => Document;
+declare const _default: (componentOrElement: React.ComponentClass | Element | null | undefined) => Document;
 export default _default;

esm/Portal.js

@@ -22,3 +22,3 @@ import PropTypes from 'prop-types';
   var resolvedContainer = useWaitForDOMRef(container, onRendered);
-  return resolvedContainer ? /*#__PURE__*/React.createElement(React.Fragment, null, ReactDOM.createPortal(children, resolvedContainer)) : null;
+  return resolvedContainer ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/ReactDOM.createPortal(children, resolvedContainer)) : null;
 };
@@ -25,0 +25,0 @@

esm/usePopper.d.ts

@@ -8,19 +8,23 @@ import * as Popper from '@popperjs/core';
 export declare type State = Popper.State;
+export declare type OffsetValue = [number | null | undefined, number | null | undefined];
+export declare type OffsetFunction = (details: {
+    popper: Popper.Rect;
+    reference: Popper.Rect;
+    placement: Placement;
+}) => OffsetValue;
+export declare type Offset = OffsetFunction | OffsetValue;
 export declare type ModifierMap = Record<string, Partial<Modifier<any, any>>>;
 export declare type Modifiers = Popper.Options['modifiers'] | Record<string, Partial<Modifier<any, any>>>;
-export declare function toModifierMap(modifiers: Modifiers | undefined): Record<string, Partial<Popper.Modifier<any, any>>>;
-export declare function toModifierArray(map?: Modifiers | undefined): Partial<Popper.Modifier<any, any>>[];
 export declare type UsePopperOptions = Omit<Options, 'modifiers' | 'placement' | 'strategy'> & {
+    enabled?: boolean;
     placement?: Options['placement'];
     strategy?: Options['strategy'];
-    modifiers?: Modifiers;
-    eventsEnabled?: boolean;
-    enabled?: boolean;
+    modifiers?: Options['modifiers'];
 };
 export interface UsePopperState {
     placement: Placement;
-    outOfBoundaries: boolean;
-    scheduleUpdate: () => void;
-    styles: Partial<CSSStyleDeclaration>;
-    arrowStyles: Partial<CSSStyleDeclaration>;
+    update: () => void;
+    forceUpdate: () => void;
+    attributes: Record<string, Record<string, any>>;
+    styles: Record<string, Partial<CSSStyleDeclaration>>;
     state?: State;
@@ -44,3 +48,3 @@ }
  */
-declare function usePopper(referenceElement: VirtualElement | null | undefined, popperElement: HTMLElement | null | undefined, { enabled, placement, strategy, eventsEnabled, modifiers: userModifiers, ...popperOptions }?: UsePopperOptions): UsePopperState;
+declare function usePopper(referenceElement: VirtualElement | null | undefined, popperElement: HTMLElement | null | undefined, { enabled, placement, strategy, modifiers, ...config }?: UsePopperOptions): UsePopperState;
 export default usePopper;

esm/usePopper.js

@@ -6,36 +6,19 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import { createPopper } from './popper';
-var initialPopperStyles = {
-  position: 'absolute',
-  top: '0',
-  left: '0',
-  opacity: '0',
-  pointerEvents: 'none'
+
+var initialPopperStyles = function initialPopperStyles(position) {
+  return {
+    position: position,
+    top: '0',
+    left: '0',
+    opacity: '0',
+    pointerEvents: 'none'
+  };
 };
-var initialArrowStyles = {}; // until docjs supports type exports...
 
-export function toModifierMap(modifiers) {
-  var result = {};
+var disabledApplyStylesModifier = {
+  name: 'applyStyles',
+  enabled: false
+}; // until docjs supports type exports...
 
-  if (!Array.isArray(modifiers)) {
-    return modifiers || result;
-  } // eslint-disable-next-line no-unused-expressions
-
-
-  modifiers == null ? void 0 : modifiers.forEach(function (m) {
-    result[m.name] = m;
-  });
-  return result;
-}
-export function toModifierArray(map) {
-  if (map === void 0) {
-    map = {};
-  }
-
-  if (Array.isArray(map)) return map;
-  return Object.keys(map).map(function (k) {
-    map[k].name = k;
-    return map[k];
-  });
-}
-
+var EMPTY_MODIFIERS = [];
 /**
@@ -57,2 +40,3 @@ * Position an element relative some reference element using Popper.js
  */
+
 function usePopper(referenceElement, popperElement, _temp) {
@@ -66,22 +50,29 @@ var _ref = _temp === void 0 ? {} : _temp,
       strategy = _ref$strategy === void 0 ? 'absolute' : _ref$strategy,
-      _ref$eventsEnabled = _ref.eventsEnabled,
-      eventsEnabled = _ref$eventsEnabled === void 0 ? true : _ref$eventsEnabled,
-      userModifiers = _ref.modifiers,
-      popperOptions = _objectWithoutPropertiesLoose(_ref, ["enabled", "placement", "strategy", "eventsEnabled", "modifiers"]);
+      _ref$modifiers = _ref.modifiers,
+      modifiers = _ref$modifiers === void 0 ? EMPTY_MODIFIERS : _ref$modifiers,
+      config = _objectWithoutPropertiesLoose(_ref, ["enabled", "placement", "strategy", "modifiers"]);
 
   var popperInstanceRef = useRef();
-  var scheduleUpdate = useCallback(function () {
-    if (popperInstanceRef.current) {
-      popperInstanceRef.current.update();
-    }
+  var update = useCallback(function () {
+    var _popperInstanceRef$cu;
+
+    (_popperInstanceRef$cu = popperInstanceRef.current) == null ? void 0 : _popperInstanceRef$cu.update();
   }, []);
+  var forceUpdate = useCallback(function () {
+    var _popperInstanceRef$cu2;
 
+    (_popperInstanceRef$cu2 = popperInstanceRef.current) == null ? void 0 : _popperInstanceRef$cu2.forceUpdate();
+  }, []);
+
   var _useSafeState = useSafeState(useState({
     placement: placement,
-    scheduleUpdate: scheduleUpdate,
-    outOfBoundaries: false,
-    styles: initialPopperStyles,
-    arrowStyles: initialArrowStyles
+    update: update,
+    forceUpdate: forceUpdate,
+    attributes: {},
+    styles: {
+      popper: initialPopperStyles(strategy),
+      arrow: {}
+    }
   })),
-      state = _useSafeState[0],
+      popperState = _useSafeState[0],
       setState = _useSafeState[1];
@@ -93,39 +84,24 @@
       enabled: true,
-      phase: 'afterWrite',
+      phase: 'write',
       requires: ['computeStyles'],
-      fn: function fn(data) {
-        var _data$state$modifiers, _data$state$styles, _data$state$styles2;
-
+      fn: function fn(_ref2) {
+        var state = _ref2.state;
+        var styles = {};
+        var attributes = {};
+        Object.keys(state.elements).forEach(function (element) {
+          styles[element] = state.styles[element];
+          attributes[element] = state.attributes[element];
+        });
         setState({
-          scheduleUpdate: scheduleUpdate,
-          outOfBoundaries: !!((_data$state$modifiers = data.state.modifiersData.hide) == null ? void 0 : _data$state$modifiers.isReferenceHidden),
-          placement: data.state.placement,
-          styles: _extends({}, (_data$state$styles = data.state.styles) == null ? void 0 : _data$state$styles.popper),
-          arrowStyles: _extends({}, (_data$state$styles2 = data.state.styles) == null ? void 0 : _data$state$styles2.arrow),
-          state: data.state
+          state: state,
+          styles: styles,
+          attributes: attributes,
+          update: update,
+          forceUpdate: forceUpdate,
+          placement: state.placement
         });
       }
     };
-  }, [scheduleUpdate, setState]);
-  var modifiers = toModifierArray(userModifiers);
-  var eventsModifier = modifiers.find(function (m) {
-    return m.name === 'eventListeners';
-  });
-
-  if (!eventsModifier && eventsEnabled) {
-    eventsModifier = {
-      name: 'eventListeners',
-      enabled: true
-    };
-    modifiers = [].concat(modifiers, [eventsModifier]);
-  } // A placement difference in state means popper determined a new placement
-  // apart from the props value. By the time the popper element is rendered with
-  // the new position Popper has already measured it, if the place change triggers
-  // a size change it will result in a misaligned popper. So we schedule an update to be sure.
-
-
+  }, [update, forceUpdate, setState]);
   useEffect(function () {
-    scheduleUpdate();
-  }, [state.placement, scheduleUpdate]);
-  useEffect(function () {
     if (!popperInstanceRef.current || !enabled) return;
@@ -135,6 +111,6 @@ popperInstanceRef.current.setOptions({
       strategy: strategy,
-      modifiers: [].concat(modifiers, [updateModifier])
+      modifiers: [].concat(modifiers, [updateModifier, disabledApplyStylesModifier])
     }); // intentionally NOT re-running on new modifiers
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [strategy, placement, eventsModifier.enabled, updateModifier, enabled]);
+  }, [strategy, placement, updateModifier, enabled]);
   useEffect(function () {
@@ -145,3 +121,3 @@ if (!enabled || referenceElement == null || popperElement == null) {
 
-    popperInstanceRef.current = createPopper(referenceElement, popperElement, _extends(_extends({}, popperOptions), {}, {
+    popperInstanceRef.current = createPopper(referenceElement, popperElement, _extends({}, config, {
       placement: placement,
@@ -156,5 +132,7 @@ strategy: strategy,
         setState(function (s) {
-          return _extends(_extends({}, s), {}, {
-            styles: initialPopperStyles,
-            arrowStyles: initialArrowStyles
+          return _extends({}, s, {
+            attributes: {},
+            styles: {
+              popper: initialPopperStyles(strategy)
+            }
           });
@@ -166,5 +144,5 @@ });
   }, [enabled, referenceElement, popperElement]);
-  return state;
+  return popperState;
 }
 
 export default usePopper;

package.json

 {
   "name": "react-overlays",
-  "version": "3.2.0",
+  "version": "4.0.0",
   "description": "Utilities for creating robust overlay components",
@@ -5,0 +5,0 @@ "author": {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

234331

increased by1.58%

Number of package files

94

increased by5.62%

Lines of code

5754

increased by1.82%

No dependency changes