Socket
Socket
Sign inDemoInstall

react-overlays

Package Overview
Dependencies
21
Maintainers
2
Versions
85
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

Comparing version 3.0.1 to 3.1.0

cjs/Dropdown.d.ts

42

cjs/Dropdown.js

@@ -68,3 +68,3 @@ "use strict";

*/
itemSelector: _propTypes["default"].string.isRequired,
itemSelector: _propTypes["default"].string,

@@ -92,3 +92,3 @@ /**

*
* ```js
* ```ts static
* function(

@@ -104,16 +104,6 @@ * isOpen: boolean,

};
var defaultProps = {
itemSelector: '* > *'
};
/**
* `Dropdown` is set of structural components for building, accessible dropdown menus with close-on-click,
* keyboard navigation, and correct focus handling. As with all the react-overlay's
* components its BYOS (bring your own styles). Dropdown is primarily
* built from three base components, you should compose to build your Dropdowns.
*
* - `Dropdown`, which wraps the menu and toggle, and handles keyboard navigation
* - `Dropdown.Toggle` generally a button that triggers the menu opening
* - `Dropdown.Menu` The overlaid, menu, positioned to the toggle with PopperJs
* @displayName Dropdown
*/
function Dropdown(_ref) {

@@ -125,3 +115,4 @@ var drop = _ref.drop,

rawOnToggle = _ref.onToggle,
itemSelector = _ref.itemSelector,
_ref$itemSelector = _ref.itemSelector,
itemSelector = _ref$itemSelector === void 0 ? '* > *' : _ref$itemSelector,
focusFirstItemOnShow = _ref.focusFirstItemOnShow,

@@ -131,11 +122,5 @@ children = _ref.children;

var _useUncontrolled = (0, _uncontrollable.useUncontrolled)({
defaultShow: defaultShow,
show: rawShow,
onToggle: rawOnToggle
}, {
show: 'onToggle'
}),
show = _useUncontrolled.show,
onToggle = _useUncontrolled.onToggle;
var _useUncontrolledProp = (0, _uncontrollable.useUncontrolledProp)(rawShow, defaultShow, rawOnToggle),
show = _useUncontrolledProp[0],
onToggle = _useUncontrolledProp[1];

@@ -149,3 +134,3 @@ var _useCallbackRef = (0, _useCallbackRef2["default"])(),

var menuRef = (0, _react.useRef)();
var menuRef = (0, _react.useRef)(null);
var menuElement = menuRef.current;

@@ -219,4 +204,4 @@ var setMenu = (0, _react.useCallback)(function (ref) {

var handleKeyDown = function handleKeyDown(event) {
var key = event.key,
target = event.target; // Second only to https://github.com/twbs/bootstrap/blob/8cfbf6933b8a0146ac3fbc369f19e520bd1ebdac/js/src/dropdown.js#L400
var key = event.key;
var target = event.target; // Second only to https://github.com/twbs/bootstrap/blob/8cfbf6933b8a0146ac3fbc369f19e520bd1ebdac/js/src/dropdown.js#L400
// in inscrutability

@@ -263,3 +248,3 @@

return _react["default"].createElement(_DropdownContext["default"].Provider, {
return /*#__PURE__*/_react["default"].createElement(_DropdownContext["default"].Provider, {
value: context

@@ -275,3 +260,2 @@ }, children({

Dropdown.propTypes = propTypes;
Dropdown.defaultProps = defaultProps;
Dropdown.Menu = _DropdownMenu["default"];

@@ -278,0 +262,0 @@ Dropdown.Toggle = _DropdownToggle["default"];

@@ -10,11 +10,3 @@ "use strict";

var DropdownContext = _react["default"].createContext({
menuRef: function menuRef() {},
toggleRef: function toggleRef() {},
onToggle: function onToggle() {},
toggleNode: undefined,
alignEnd: null,
show: null,
drop: null
});
var DropdownContext = _react["default"].createContext(null);

@@ -21,0 +13,0 @@ var _default = DropdownContext;

@@ -17,3 +17,3 @@ "use strict";

var _react = require("react");
var _react = _interopRequireWildcard(require("react"));

@@ -28,2 +28,14 @@ var _useCallbackRef2 = _interopRequireDefault(require("@restart/hooks/useCallbackRef"));

var noop = function noop() {};
/**
* @memberOf Dropdown
* @param {object} options
* @param {boolean} options.flip Automatically adjust the menu `drop` position based on viewport edge detection
* @param {boolean} options.show Display the menu manually, ignored in the context of a `Dropdown`
* @param {boolean} options.usePopper opt in/out of using PopperJS to position menus. When disabled you must position it yourself.
* @param {string} options.rootCloseEvent The pointer event to listen for when determining "clicks outside" the menu for triggering a close.
* @param {object} options.popperConfig Options passed to the [`usePopper`](/api/usePopper) hook.
*/
function useDropdownMenu(options) {

@@ -49,5 +61,5 @@ var _modifiers$arrow;

_options$usePopper = _options.usePopper,
shouldUsePopper = _options$usePopper === void 0 ? true : _options$usePopper;
var show = context.show == null ? options.show : context.show;
var alignEnd = context.alignEnd == null ? options.alignEnd : context.alignEnd;
shouldUsePopper = _options$usePopper === void 0 ? !!context : _options$usePopper;
var show = (context == null ? void 0 : context.show) == null ? options.show : context.show;
var alignEnd = (context == null ? void 0 : context.alignEnd) == null ? options.alignEnd : context.alignEnd;

@@ -59,10 +71,11 @@ if (show && !hasShownRef.current) {

var handleClose = function handleClose(e) {
if (!context.toggle) return;
context.toggle(false, e);
context == null ? void 0 : context.toggle(false, e);
};
var drop = context.drop,
setMenu = context.setMenu,
menuElement = context.menuElement,
toggleElement = context.toggleElement;
var _ref = context || {},
drop = _ref.drop,
setMenu = _ref.setMenu,
menuElement = _ref.menuElement,
toggleElement = _ref.toggleElement;
var placement = alignEnd ? 'bottom-end' : 'bottom-start';

@@ -89,6 +102,6 @@ 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 menu = null;
var menu;
var menuProps = {
ref: setMenu,
'aria-labelledby': toggleElement && toggleElement.id
ref: setMenu || noop,
'aria-labelledby': toggleElement == null ? void 0 : toggleElement.id
};

@@ -186,7 +199,13 @@ var childArgs = {

function DropdownMenu(_ref) {
var children = _ref.children,
options = (0, _objectWithoutPropertiesLoose2["default"])(_ref, ["children"]);
/**
* Also exported as `<Dropdown.Menu>` from `Dropdown`.
*
* @displayName DropdownMenu
* @memberOf Dropdown
*/
function DropdownMenu(_ref2) {
var children = _ref2.children,
options = (0, _objectWithoutPropertiesLoose2["default"])(_ref2, ["children"]);
var args = useDropdownMenu(options);
return args.hasShown ? children(args) : null;
return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, args.hasShown ? children(args) : null);
}

@@ -193,0 +212,0 @@

"use strict";
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

@@ -11,18 +13,25 @@

var _react = require("react");
var _react = _interopRequireWildcard(require("react"));
var _DropdownContext = _interopRequireDefault(require("./DropdownContext"));
var noop = function noop() {};
/**
* Wires up Dropdown toggle functinality, returning a set a props to attach
* Wires up Dropdown toggle functionality, returning a set a props to attach
* to the element that functions as the dropdown toggle (generally a button).
*
* @memberOf Dropdown
*/
function useDropdownToggle() {
var _useContext = (0, _react.useContext)(_DropdownContext["default"]),
show = _useContext.show,
toggle = _useContext.toggle,
setToggle = _useContext.setToggle;
var _ref = (0, _react.useContext)(_DropdownContext["default"]) || {},
_ref$show = _ref.show,
show = _ref$show === void 0 ? false : _ref$show,
_ref$toggle = _ref.toggle,
toggle = _ref$toggle === void 0 ? noop : _ref$toggle,
setToggle = _ref.setToggle;
return [{
ref: setToggle,
ref: setToggle || noop,
'aria-haspopup': true,

@@ -55,4 +64,10 @@ 'aria-expanded': !!show

function DropdownToggle(_ref) {
var children = _ref.children;
/**
* Also exported as `<Dropdown.Toggle>` from `Dropdown`.
*
* @displayName DropdownToggle
* @memberOf Dropdown
*/
function DropdownToggle(_ref2) {
var children = _ref2.children;

@@ -65,7 +80,7 @@ var _useDropdownToggle = useDropdownToggle(),

return children({
return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, children({
show: show,
toggle: toggle,
props: props
});
}));
}

@@ -72,0 +87,0 @@

"use strict";
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

@@ -12,6 +14,2 @@

var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
var _activeElement = _interopRequireDefault(require("dom-helpers/activeElement"));

@@ -27,327 +25,272 @@

var _react = _interopRequireDefault(require("react"));
var _react = _interopRequireWildcard(require("react"));
var _reactDom = _interopRequireDefault(require("react-dom"));
var _ModalManager = _interopRequireDefault(require("./ModalManager"));
var _useMounted = _interopRequireDefault(require("@restart/hooks/useMounted"));
var _ownerDocument = _interopRequireDefault(require("./utils/ownerDocument"));
var _useWillUnmount = _interopRequireDefault(require("@restart/hooks/useWillUnmount"));
var _useWaitForDOMRef = _interopRequireDefault(require("./utils/useWaitForDOMRef"));
var _usePrevious = _interopRequireDefault(require("@restart/hooks/esm/usePrevious"));
/* eslint-disable react/prop-types */
function omitProps(props, propTypes) {
var keys = Object.keys(props);
var newProps = {};
keys.forEach(function (prop) {
if (!Object.prototype.hasOwnProperty.call(propTypes, prop)) {
newProps[prop] = props[prop];
}
});
return newProps;
}
var _useEventCallback = _interopRequireDefault(require("@restart/hooks/esm/useEventCallback"));
var manager;
/**
* Love them or hate them, `<Modal />` provides a solid foundation for creating dialogs, lightboxes, or whatever else.
* The Modal component renders its `children` node in front of a backdrop component.
*
* The Modal offers a few helpful features over using just a `<Portal/>` component and some styles:
*
* - Manages dialog stacking when one-at-a-time just isn't enough.
* - Creates a backdrop, for disabling interaction below the modal.
* - It properly manages focus; moving to the modal content, and keeping it there until the modal is closed.
* - It disables scrolling of the page content while open.
* - Adds the appropriate ARIA roles are automatically.
* - Easily pluggable animations via a `<Transition/>` component.
*
* Note that, in the same way the backdrop element prevents users from clicking or interacting
* with the page content underneath the Modal, Screen readers also need to be signaled to not to
* interact with page content while the Modal is open. To do this, we use a common technique of applying
* the `aria-hidden='true'` attribute to the non-Modal elements in the Modal `container`. This means that for
* a Modal to be truly modal, it should have a `container` that is _outside_ your app's
* React hierarchy (such as the default: document.body).
*/
var _ModalManager = _interopRequireDefault(require("./ModalManager"));
var Modal = /*#__PURE__*/function (_React$Component) {
(0, _inheritsLoose2["default"])(Modal, _React$Component);
var _useWaitForDOMRef = _interopRequireDefault(require("./useWaitForDOMRef"));
function Modal() {
var _this;
/* eslint-disable @typescript-eslint/no-use-before-define */
for (var _len = arguments.length, _args = new Array(_len), _key = 0; _key < _len; _key++) {
_args[_key] = arguments[_key];
}
/* eslint-disable react/prop-types */
var manager;
_this = _React$Component.call.apply(_React$Component, [this].concat(_args)) || this;
_this.state = {
exited: !_this.props.show
};
function getManager() {
if (!manager) manager = new _ModalManager["default"]();
return manager;
}
_this.onShow = function () {
var _this$props = _this.props,
container = _this$props.container,
containerClassName = _this$props.containerClassName,
onShow = _this$props.onShow;
function useModalManager(provided) {
var modalManager = provided || getManager();
var modal = (0, _react.useRef)({
dialog: null,
backdrop: null
});
return Object.assign(modal.current, {
add: function add(container, className) {
return modalManager.add(modal.current, container, className);
},
remove: function remove() {
return modalManager.remove(modal.current);
},
isTopModal: function isTopModal() {
return modalManager.isTopModal(modal.current);
},
setDialogRef: (0, _react.useCallback)(function (ref) {
modal.current.dialog = ref;
}, []),
setBackdropRef: (0, _react.useCallback)(function (ref) {
modal.current.backdrop = ref;
}, [])
});
}
_this.getModalManager().add((0, _assertThisInitialized2["default"])(_this), container, containerClassName);
var Modal = (0, _react.forwardRef)(function (_ref, ref) {
var _ref$show = _ref.show,
show = _ref$show === void 0 ? false : _ref$show,
_ref$role = _ref.role,
role = _ref$role === void 0 ? 'dialog' : _ref$role,
className = _ref.className,
style = _ref.style,
children = _ref.children,
_ref$backdrop = _ref.backdrop,
backdrop = _ref$backdrop === void 0 ? true : _ref$backdrop,
_ref$keyboard = _ref.keyboard,
keyboard = _ref$keyboard === void 0 ? true : _ref$keyboard,
onBackdropClick = _ref.onBackdropClick,
onEscapeKeyDown = _ref.onEscapeKeyDown,
transition = _ref.transition,
backdropTransition = _ref.backdropTransition,
_ref$autoFocus = _ref.autoFocus,
autoFocus = _ref$autoFocus === void 0 ? true : _ref$autoFocus,
_ref$enforceFocus = _ref.enforceFocus,
enforceFocus = _ref$enforceFocus === void 0 ? true : _ref$enforceFocus,
_ref$restoreFocus = _ref.restoreFocus,
restoreFocus = _ref$restoreFocus === void 0 ? true : _ref$restoreFocus,
restoreFocusOptions = _ref.restoreFocusOptions,
renderDialog = _ref.renderDialog,
_ref$renderBackdrop = _ref.renderBackdrop,
renderBackdrop = _ref$renderBackdrop === void 0 ? function (props) {
return /*#__PURE__*/_react["default"].createElement("div", props);
} : _ref$renderBackdrop,
providedManager = _ref.manager,
containerRef = _ref.container,
containerClassName = _ref.containerClassName,
onShow = _ref.onShow,
_ref$onHide = _ref.onHide,
onHide = _ref$onHide === void 0 ? function () {} : _ref$onHide,
onExit = _ref.onExit,
onExited = _ref.onExited,
onExiting = _ref.onExiting,
onEnter = _ref.onEnter,
onEntering = _ref.onEntering,
onEntered = _ref.onEntered,
rest = (0, _objectWithoutPropertiesLoose2["default"])(_ref, ["show", "role", "className", "style", "children", "backdrop", "keyboard", "onBackdropClick", "onEscapeKeyDown", "transition", "backdropTransition", "autoFocus", "enforceFocus", "restoreFocus", "restoreFocusOptions", "renderDialog", "renderBackdrop", "manager", "container", "containerClassName", "onShow", "onHide", "onExit", "onExited", "onExiting", "onEnter", "onEntering", "onEntered"]);
var container = (0, _useWaitForDOMRef["default"])(containerRef);
var modal = useModalManager(providedManager);
var isMounted = (0, _useMounted["default"])();
var prevShow = (0, _usePrevious["default"])(show);
_this.removeKeydownListener = (0, _listen["default"])(document, 'keydown', _this.handleDocumentKeyDown);
_this.removeFocusListener = (0, _listen["default"])(document, 'focus', // the timeout is necessary b/c this will run before the new modal is mounted
// and so steals focus from it
function () {
return setTimeout(_this.enforceFocus);
}, true);
var _useState = (0, _react.useState)(!show),
exited = _useState[0],
setExited = _useState[1];
if (onShow) {
onShow();
} // autofocus after onShow, to not trigger a focus event for previous
// modals before this one is shown.
var lastFocusRef = (0, _react.useRef)(null);
(0, _react.useImperativeHandle)(ref, function () {
return modal;
}, [modal]);
if (_canUseDOM["default"] && !prevShow && show) {
lastFocusRef.current = (0, _activeElement["default"])();
}
_this.autoFocus();
};
if (!transition && !show && !exited) {
setExited(true);
} else if (show && exited) {
setExited(false);
}
_this.onHide = function () {
_this.getModalManager().remove((0, _assertThisInitialized2["default"])(_this));
var handleShow = (0, _useEventCallback["default"])(function () {
modal.add(container, containerClassName);
removeKeydownListenerRef.current = (0, _listen["default"])(document, 'keydown', handleDocumentKeyDown);
removeFocusListenerRef.current = (0, _listen["default"])(document, 'focus', // the timeout is necessary b/c this will run before the new modal is mounted
// and so steals focus from it
function () {
return setTimeout(handleEnforceFocus);
}, true);
_this.removeKeydownListener();
if (onShow) {
onShow();
} // autofocus after onShow to not trigger a focus event for previous
// modals before this one is shown.
_this.removeFocusListener();
if (_this.props.restoreFocus) {
_this.restoreLastFocus();
}
};
if (autoFocus) {
var currentActiveElement = (0, _activeElement["default"])(document);
_this.setDialogRef = function (ref) {
_this.dialog = ref;
};
_this.setBackdropRef = function (ref) {
_this.backdrop = ref && _reactDom["default"].findDOMNode(ref);
};
_this.handleHidden = function () {
_this.setState({
exited: true
});
_this.onHide();
if (_this.props.onExited) {
var _this$props2;
(_this$props2 = _this.props).onExited.apply(_this$props2, arguments);
if (modal.dialog && currentActiveElement && !(0, _contains["default"])(modal.dialog, currentActiveElement)) {
lastFocusRef.current = currentActiveElement;
modal.dialog.focus();
}
};
}
});
var handleHide = (0, _useEventCallback["default"])(function () {
modal.remove();
removeKeydownListenerRef.current == null ? void 0 : removeKeydownListenerRef.current();
removeFocusListenerRef.current == null ? void 0 : removeFocusListenerRef.current();
_this.handleBackdropClick = function (e) {
if (e.target !== e.currentTarget) {
return;
}
if (restoreFocus) {
var _lastFocusRef$current;
if (_this.props.onBackdropClick) {
_this.props.onBackdropClick(e);
}
// Support: <=IE11 doesn't support `focus()` on svg elements (RB: #917)
(_lastFocusRef$current = lastFocusRef.current) == null ? void 0 : _lastFocusRef$current.focus == null ? void 0 : _lastFocusRef$current.focus(restoreFocusOptions);
lastFocusRef.current = null;
}
}); // TODO: try and combine these effects: https://github.com/react-bootstrap/react-overlays/pull/794#discussion_r409954120
// Show logic when:
// - show is `true` _and_ `container` has resolved
if (_this.props.backdrop === true) {
_this.props.onHide();
}
};
(0, _react.useEffect)(function () {
if (!show || !container) return;
handleShow();
}, [show, container,
/* should never change: */
handleShow]); // Hide cleanup logic when:
// - `exited` switches to true
// - component unmounts;
_this.handleDocumentKeyDown = function (e) {
if (_this.props.keyboard && e.keyCode === 27 && _this.isTopModal()) {
if (_this.props.onEscapeKeyDown) {
_this.props.onEscapeKeyDown(e);
}
(0, _react.useEffect)(function () {
if (!exited) return;
handleHide();
}, [exited, handleHide]);
(0, _useWillUnmount["default"])(function () {
handleHide();
}); // --------------------------------
_this.props.onHide();
}
};
var handleEnforceFocus = (0, _useEventCallback["default"])(function () {
if (!enforceFocus || !isMounted() || !modal.isTopModal()) {
return;
}
_this.enforceFocus = function () {
if (!_this.props.enforceFocus || !_this._isMounted || !_this.isTopModal()) {
return;
}
var currentActiveElement = (0, _activeElement["default"])();
var currentActiveElement = (0, _activeElement["default"])((0, _ownerDocument["default"])((0, _assertThisInitialized2["default"])(_this)));
if (_this.dialog && !(0, _contains["default"])(_this.dialog, currentActiveElement)) {
_this.dialog.focus();
}
};
_this.renderBackdrop = function () {
var _this$props3 = _this.props,
renderBackdrop = _this$props3.renderBackdrop,
Transition = _this$props3.backdropTransition;
var backdrop = renderBackdrop({
ref: _this.setBackdropRef,
onClick: _this.handleBackdropClick
});
if (Transition) {
backdrop = _react["default"].createElement(Transition, {
appear: true,
"in": _this.props.show
}, backdrop);
}
return backdrop;
};
return _this;
}
Modal.getDerivedStateFromProps = function getDerivedStateFromProps(nextProps) {
if (nextProps.show) {
return {
exited: false
};
if (modal.dialog && currentActiveElement && !(0, _contains["default"])(modal.dialog, currentActiveElement)) {
modal.dialog.focus();
}
if (!nextProps.transition) {
// Otherwise let handleHidden take care of marking exited.
return {
exited: true
};
});
var handleBackdropClick = (0, _useEventCallback["default"])(function (e) {
if (e.target !== e.currentTarget) {
return;
}
return null;
};
onBackdropClick == null ? void 0 : onBackdropClick(e);
var _proto = Modal.prototype;
_proto.componentDidMount = function componentDidMount() {
this._isMounted = true;
if (this.props.show) {
this.onShow();
if (backdrop === true) {
onHide();
}
};
});
_proto.componentDidUpdate = function componentDidUpdate(prevProps) {
var transition = this.props.transition;
if (prevProps.show && !this.props.show && !transition) {
// Otherwise handleHidden will call this.
this.onHide();
} else if (!prevProps.show && this.props.show) {
this.onShow();
var handleDocumentKeyDown = function handleDocumentKeyDown(e) {
if (keyboard && e.keyCode === 27 && modal.isTopModal()) {
onEscapeKeyDown == null ? void 0 : onEscapeKeyDown(e);
onHide();
}
};
_proto.componentWillUnmount = function componentWillUnmount() {
var _this$props4 = this.props,
show = _this$props4.show,
transition = _this$props4.transition;
this._isMounted = false;
var removeFocusListenerRef = (0, _react.useRef)();
var removeKeydownListenerRef = (0, _react.useRef)();
if (show || transition && !this.state.exited) {
this.onHide();
}
};
var handleHidden = function handleHidden() {
setExited(true);
_proto.getSnapshotBeforeUpdate = function getSnapshotBeforeUpdate(prevProps) {
if (_canUseDOM["default"] && !prevProps.show && this.props.show) {
this.lastFocus = (0, _activeElement["default"])();
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
return null;
onExited == null ? void 0 : onExited.apply(void 0, args);
};
_proto.getModalManager = function getModalManager() {
if (this.props.manager) {
return this.props.manager;
}
var Transition = transition;
if (!manager) {
manager = new _ModalManager["default"]();
}
if (!container || !(show || Transition && !exited)) {
return null;
}
return manager;
};
var dialogProps = (0, _extends2["default"])({
role: role,
ref: modal.setDialogRef,
// apparently only works on the dialog role element
'aria-modal': role === 'dialog' ? true : undefined
}, rest, {
style: style,
className: className,
tabIndex: -1
});
var dialog = renderDialog ? renderDialog(dialogProps) : /*#__PURE__*/_react["default"].createElement("div", dialogProps, _react["default"].cloneElement(children, {
role: 'document'
}));
_proto.restoreLastFocus = function restoreLastFocus() {
// Support: <=IE11 doesn't support `focus()` on svg elements (RB: #917)
if (this.lastFocus && this.lastFocus.focus) {
this.lastFocus.focus(this.props.restoreFocusOptions);
this.lastFocus = null;
}
};
if (Transition) {
dialog = /*#__PURE__*/_react["default"].createElement(Transition, {
appear: true,
unmountOnExit: true,
"in": !!show,
onExit: onExit,
onExiting: onExiting,
onExited: handleHidden,
onEnter: onEnter,
onEntering: onEntering,
onEntered: onEntered
}, dialog);
}
_proto.autoFocus = function autoFocus() {
if (!this.props.autoFocus) return;
var currentActiveElement = (0, _activeElement["default"])((0, _ownerDocument["default"])(this));
var backdropElement = null;
if (this.dialog && !(0, _contains["default"])(this.dialog, currentActiveElement)) {
this.lastFocus = currentActiveElement;
this.dialog.focus();
}
};
_proto.isTopModal = function isTopModal() {
return this.getModalManager().isTopModal(this);
};
_proto.render = function render() {
var _this$props5 = this.props,
show = _this$props5.show,
container = _this$props5.container,
children = _this$props5.children,
renderDialog = _this$props5.renderDialog,
_this$props5$role = _this$props5.role,
role = _this$props5$role === void 0 ? 'dialog' : _this$props5$role,
Transition = _this$props5.transition,
backdrop = _this$props5.backdrop,
className = _this$props5.className,
style = _this$props5.style,
onExit = _this$props5.onExit,
onExiting = _this$props5.onExiting,
onEnter = _this$props5.onEnter,
onEntering = _this$props5.onEntering,
onEntered = _this$props5.onEntered,
props = (0, _objectWithoutPropertiesLoose2["default"])(_this$props5, ["show", "container", "children", "renderDialog", "role", "transition", "backdrop", "className", "style", "onExit", "onExiting", "onEnter", "onEntering", "onEntered"]);
if (!(show || Transition && !this.state.exited)) {
return null;
}
var dialogProps = (0, _extends2["default"])({
role: role,
ref: this.setDialogRef,
// apparently only works on the dialog role element
'aria-modal': role === 'dialog' ? true : undefined
}, omitProps(props, Modal.propTypes), {
style: style,
className: className,
tabIndex: '-1'
if (backdrop) {
var BackdropTransition = backdropTransition;
backdropElement = renderBackdrop({
ref: modal.setBackdropRef,
onClick: handleBackdropClick
});
var dialog = renderDialog ? renderDialog(dialogProps) : _react["default"].createElement("div", dialogProps, _react["default"].cloneElement(children, {
role: 'document'
}));
if (Transition) {
dialog = _react["default"].createElement(Transition, {
if (BackdropTransition) {
backdropElement = /*#__PURE__*/_react["default"].createElement(BackdropTransition, {
appear: true,
unmountOnExit: true,
"in": show,
onExit: onExit,
onExiting: onExiting,
onExited: this.handleHidden,
onEnter: onEnter,
onEntering: onEntering,
onEntered: onEntered
}, dialog);
"in": !!show
}, backdropElement);
}
}
return _reactDom["default"].createPortal(_react["default"].createElement(_react["default"].Fragment, null, backdrop && this.renderBackdrop(), dialog), container);
};
return Modal;
}(_react["default"].Component); // dumb HOC for the sake react-docgen
Modal.propTypes = {
return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, _reactDom["default"].createPortal( /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, backdropElement, dialog), container));
});
var propTypes = {
/**

@@ -388,4 +331,4 @@ * Set the visibility of the Modal

*
* ```js
* renderDialog={props => <MyDialog {...props} />}
* ```js static
* renderDialog={props => <MyDialog {...props} />}
* ```

@@ -507,35 +450,10 @@ */

};
Modal.defaultProps = {
show: false,
role: 'dialog',
backdrop: true,
keyboard: true,
autoFocus: true,
enforceFocus: true,
restoreFocus: true,
onHide: function onHide() {},
renderBackdrop: function renderBackdrop(props) {
return _react["default"].createElement("div", props);
}
};
Modal.displayName = 'Modal';
Modal.propTypes = propTypes;
function forwardRef(Component) {
// eslint-disable-next-line react/display-name
var ModalWithContainer = _react["default"].forwardRef(function (props, ref) {
var resolved = (0, _useWaitForDOMRef["default"])(props.container);
return resolved ? _react["default"].createElement(Component, (0, _extends2["default"])({}, props, {
ref: ref,
container: resolved
})) : null;
});
var _default = Object.assign(Modal, {
Manager: _ModalManager["default"]
});
ModalWithContainer.Manager = _ModalManager["default"];
ModalWithContainer._Inner = Component;
return ModalWithContainer;
}
var ModalWithContainer = forwardRef(Modal);
ModalWithContainer.Manager = _ModalManager["default"];
var _default = ModalWithContainer;
exports["default"] = _default;
module.exports = exports.default;

@@ -16,5 +16,5 @@ "use strict";

var _isOverflowing = _interopRequireDefault(require("./utils/isOverflowing"));
var _isOverflowing = _interopRequireDefault(require("./isOverflowing"));
var _manageAriaHidden = require("./utils/manageAriaHidden");
var _manageAriaHidden = require("./manageAriaHidden");

@@ -33,2 +33,3 @@ function findIndexOf(arr, cb) {

}
/**

@@ -39,4 +40,2 @@ * Proper state management for containers and the modals in those containers.

*/
var ModalManager = /*#__PURE__*/function () {

@@ -50,2 +49,8 @@ function ModalManager(_temp) {

this.hideSiblingNodes = void 0;
this.handleContainerOverflow = void 0;
this.modals = void 0;
this.containers = void 0;
this.data = void 0;
this.scrollbarSize = void 0;
this.hideSiblingNodes = hideSiblingNodes;

@@ -86,3 +91,3 @@ this.handleContainerOverflow = handleContainerOverflow;

// to add our scrollbar width
style.paddingRight = parseInt((0, _css["default"])(container, 'paddingRight') || 0, 10) + this.scrollbarSize + "px";
style.paddingRight = parseInt((0, _css["default"])(container, 'paddingRight') || '0', 10) + this.scrollbarSize + "px";
}

@@ -89,0 +94,0 @@

@@ -30,3 +30,3 @@ "use strict";

var _useWaitForDOMRef = _interopRequireDefault(require("./utils/useWaitForDOMRef"));
var _useWaitForDOMRef = _interopRequireDefault(require("./useWaitForDOMRef"));

@@ -42,3 +42,4 @@ /**

placement = props.placement,
containerPadding = props.containerPadding,
_props$containerPaddi = props.containerPadding,
containerPadding = _props$containerPaddi === void 0 ? 5 : _props$containerPaddi,
_props$popperConfig = props.popperConfig,

@@ -119,3 +120,3 @@ popperConfig = _props$popperConfig === void 0 ? {} : _props$popperConfig,

var child = props.children((0, _extends2["default"])({}, popper, {
show: props.show,
show: !!props.show,
props: {

@@ -137,3 +138,3 @@ style: styles,

onEntered = props.onEntered;
child = _react["default"].createElement(Transition, {
child = /*#__PURE__*/_react["default"].createElement(Transition, {
"in": props.show,

@@ -238,13 +239,13 @@ appear: true,

onHide: function onHide(props) {
var propType = _propTypes["default"].func;
for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
args[_key - 1] = arguments[_key];
}
if (props.rootClose) {
propType = propType.isRequired;
}
var _PropTypes$func;
for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
args[_key - 1] = arguments[_key];
return (_PropTypes$func = _propTypes["default"].func).isRequired.apply(_PropTypes$func, [props].concat(args));
}
return propType.apply(void 0, [props].concat(args));
return _propTypes["default"].func.apply(_propTypes["default"], [props].concat(args));
},

@@ -256,2 +257,3 @@

*/
// @ts-ignore
transition: _propTypes["default"].elementType,

@@ -289,7 +291,4 @@

};
Overlay.defaultProps = {
containerPadding: 5
};
var _default = Overlay;
exports["default"] = _default;
module.exports = exports.default;

@@ -17,10 +17,6 @@ 'use strict';

var reference = 'reference';
var variationPlacements =
/*#__PURE__*/
basePlacements.reduce(function (acc, placement) {
var variationPlacements = /*#__PURE__*/basePlacements.reduce(function (acc, placement) {
return acc.concat([placement + "-" + start, placement + "-" + end]);
}, []);
var placements =
/*#__PURE__*/
[].concat(basePlacements, [auto]).reduce(function (acc, placement) {
var placements = /*#__PURE__*/[].concat(basePlacements, [auto]).reduce(function (acc, placement) {
return acc.concat([placement, placement + "-" + start, placement + "-" + end]);

@@ -81,2 +77,66 @@ }, []); // modifiers that need to read the DOM

/*:: import type { Window } from '../types'; */
/*:: declare function getWindow(node: Node | Window): Window; */
function getWindow(node) {
if (node.toString() !== '[object Window]') {
var ownerDocument = node.ownerDocument;
return ownerDocument ? ownerDocument.defaultView : window;
}
return node;
}
function getNodeName(element) {
return element ? (element.nodeName || '').toLowerCase() : null;
}
function getComputedStyle(element) {
return getWindow(element).getComputedStyle(element);
}
/*:: declare function isElement(node: mixed): boolean %checks(node instanceof
Element); */
function isElement(node) {
var OwnElement = getWindow(node).Element;
return node instanceof OwnElement || node instanceof Element;
}
/*:: declare function isHTMLElement(node: mixed): boolean %checks(node instanceof
HTMLElement); */
function isHTMLElement(node) {
var OwnElement = getWindow(node).HTMLElement;
return node instanceof OwnElement || node instanceof HTMLElement;
}
function isTableElement(element) {
return ['table', 'td', 'th'].indexOf(getNodeName(element)) >= 0;
}
function getTrueOffsetParent(element) {
if (!isHTMLElement(element) || // https://github.com/popperjs/popper-core/issues/837
getComputedStyle(element).position === 'fixed') {
return null;
}
return element.offsetParent;
}
function getOffsetParent(element) {
var window = getWindow(element);
var offsetParent = getTrueOffsetParent(element); // Find the nearest non-table offsetParent
while (offsetParent && isTableElement(offsetParent)) {
offsetParent = getTrueOffsetParent(offsetParent);
}
if (offsetParent && getNodeName(offsetParent) === 'body' && getComputedStyle(offsetParent).position === 'static') {
return window;
}
return offsetParent || window;
}
function getMainAxisFromPlacement(placement) {

@@ -122,3 +182,3 @@ return ['top', 'bottom'].indexOf(placement) >= 0 ? 'x' : 'y';

if (!arrowElement) {
if (!arrowElement || !popperOffsets) {
return;

@@ -133,10 +193,14 @@ }

var startDiff = popperOffsets[axis] - state.rects.reference[axis];
var clientOffset = axis === 'y' ? state.elements.popper.clientLeft : state.elements.popper.clientTop;
var centerToReference = endDiff / 2 - startDiff / 2 - clientOffset; // Make sure the arrow doesn't overflow the popper if the center point is
var arrowOffsetParent = state.elements.arrow && getOffsetParent(state.elements.arrow);
var clientSize = arrowOffsetParent ? axis === 'y' ? arrowOffsetParent.clientHeight || 0 : arrowOffsetParent.clientWidth || 0 : 0;
var centerToReference = endDiff / 2 - startDiff / 2; // Make sure the arrow doesn't overflow the popper if the center point is
// outside of the popper bounds
var center = within(paddingObject[minProp], state.rects.popper[len] / 2 - arrowRect[len] / 2 + centerToReference, state.rects.popper[len] - arrowRect[len] - paddingObject[maxProp]); // Prevents breaking syntax highlighting...
var min = paddingObject[minProp];
var max = clientSize - arrowRect[len] - paddingObject[maxProp];
var center = clientSize / 2 - arrowRect[len] / 2 + centerToReference;
var offset = within(min, center, max); // Prevents breaking syntax highlighting...
var axisProp = axis;
state.modifiersData[name] = (_state$modifiersData$ = {}, _state$modifiersData$[axisProp] = center, _state$modifiersData$);
state.modifiersData[name] = (_state$modifiersData$ = {}, _state$modifiersData$[axisProp] = offset, _state$modifiersData$.centerOffset = offset - center, _state$modifiersData$);
}

@@ -151,4 +215,9 @@

_options$padding = options.padding,
padding = _options$padding === void 0 ? 0 : _options$padding; // CSS selector
padding = _options$padding === void 0 ? 0 : _options$padding;
if (arrowElement == null) {
return;
} // CSS selector
if (typeof arrowElement === 'string') {

@@ -174,4 +243,5 @@ arrowElement = state.elements.popper.querySelector(arrowElement);

};
}
} // eslint-disable-next-line import/no-unused-modules
var arrow$1 = {

@@ -187,72 +257,2 @@ name: 'arrow',

/*:: import type { Window } from '../types'; */
/*:: declare function getWindow(node: Node | Window): Window; */
function getWindow(node) {
if (node.toString() !== '[object Window]') {
var ownerDocument = node.ownerDocument;
return ownerDocument ? ownerDocument.defaultView : window;
}
return node;
}
function getNodeName(element) {
return element ? (element.nodeName || '').toLowerCase() : null;
}
function getComputedStyle(element) {
return getWindow(element).getComputedStyle(element);
}
/*:: declare function isElement(node: mixed): boolean %checks(node instanceof
Element); */
function isElement(node) {
var OwnElement = getWindow(node).Element;
return node instanceof OwnElement || node instanceof Element;
}
/*:: declare function isHTMLElement(node: mixed): boolean %checks(node instanceof
HTMLElement); */
function isHTMLElement(node) {
var OwnElement = getWindow(node).HTMLElement;
return node instanceof OwnElement || node instanceof HTMLElement;
}
function isTableElement(element) {
return ['table', 'td', 'th'].indexOf(getNodeName(element)) >= 0;
}
var isFirefox = function isFirefox() {
return typeof window.InstallTrigger !== 'undefined';
};
function getTrueOffsetParent(element) {
var offsetParent;
if (!isHTMLElement(element) || !(offsetParent = element.offsetParent) || // https://github.com/popperjs/popper-core/issues/837
isFirefox() && getComputedStyle(offsetParent).position === 'fixed') {
return null;
}
return offsetParent;
}
function getOffsetParent(element) {
var window = getWindow(element);
var offsetParent = getTrueOffsetParent(element); // Find the nearest non-table offsetParent
while (offsetParent && isTableElement(offsetParent)) {
offsetParent = getTrueOffsetParent(offsetParent);
}
if (offsetParent && getNodeName(offsetParent) === 'body' && getComputedStyle(offsetParent).position === 'static') {
return window;
}
return offsetParent || window;
}
function getDocumentElement(element) {

@@ -349,4 +349,3 @@ // $FlowFixMe: assume body is always available

if (process.env.NODE_ENV !== "production") {
var _getComputedStyle = getComputedStyle(state.elements.popper),
transitionProperty = _getComputedStyle.transitionProperty;
var transitionProperty = getComputedStyle(state.elements.popper).transitionProperty || '';

@@ -365,9 +364,11 @@ if (adaptive && ['transform', 'top', 'right', 'bottom', 'left'].some(function (property) {

gpuAcceleration: gpuAcceleration
}; // popper offsets are always available
};
state.styles.popper = Object.assign({}, state.styles.popper, {}, mapToStyles(Object.assign({}, commonStyles, {
offsets: state.modifiersData.popperOffsets,
position: state.options.strategy,
adaptive: adaptive
}))); // arrow offsets may not be available
if (state.modifiersData.popperOffsets != null) {
state.styles.popper = Object.assign({}, state.styles.popper, {}, mapToStyles(Object.assign({}, commonStyles, {
offsets: state.modifiersData.popperOffsets,
position: state.options.strategy,
adaptive: adaptive
})));
}

@@ -385,4 +386,5 @@ if (state.modifiersData.arrow != null) {

});
}
} // eslint-disable-next-line import/no-unused-modules
var computeStyles$1 = {

@@ -432,4 +434,5 @@ name: 'computeStyles',

};
}
} // eslint-disable-next-line import/no-unused-modules
var eventListeners = {

@@ -482,5 +485,16 @@ name: 'eventListeners',

var win = getWindow(element);
var visualViewport = win.visualViewport;
var width = win.innerWidth;
var height = win.innerHeight; // We don't know which browsers have buggy or odd implementations of this, so
// for now we're only applying it to iOS to fix the keyboard issue.
// Investigation required
if (visualViewport && /iPhone|iPod|iPad/.test(navigator.platform)) {
width = visualViewport.width;
height = visualViewport.height;
}
return {
width: win.innerWidth,
height: win.innerHeight,
width: width,
height: height,
x: 0,

@@ -583,8 +597,11 @@ y: 0

return element.parentNode || // DOM Element detected
// $FlowFixMe: need a better way to handle this...
element.host || // ShadowRoot detected
document.ownerDocument || // Fallback to ownerDocument if available
document.documentElement // Or to documentElement if everything else fails
;
return (// $FlowFixMe: this is a quicker (but less type safe) way to save quite some bytes from the bundle
element.assignedSlot || // step into the shadow DOM of the parent of a slotted node
element.parentNode || // DOM Element detected
// $FlowFixMe: need a better way to handle this...
element.host || // ShadowRoot detected
// $FlowFixMe: HTMLElement is a Node
getDocumentElement(element) // fallback
);
}

@@ -620,3 +637,4 @@

var isBody = getNodeName(scrollParent) === 'body';
var target = isBody ? getWindow(scrollParent) : scrollParent;
var win = getWindow(scrollParent);
var target = isBody ? [win].concat(win.visualViewport || []) : scrollParent;
var updatedList = list.concat(target);

@@ -815,3 +833,3 @@ return isBody ? updatedList : // $FlowFixMe: isBody tells us target will be an HTMLElement here

var element = state.elements[altBoundary ? altContext : elementContext];
var clippingClientRect = getClippingRect(isElement(element) ? element : getDocumentElement(state.elements.popper), boundary, rootBoundary);
var clippingClientRect = getClippingRect(isElement(element) ? element : element.contextElement || getDocumentElement(state.elements.popper), boundary, rootBoundary);
var referenceClientRect = getBoundingClientRect(referenceElement);

@@ -848,2 +866,5 @@ var popperOffsets = computeOffsets({

/*:: type OverflowsMap = { [ComputedPlacement]: number }; */
/*;; type OverflowsMap = { [key in ComputedPlacement]: number }; */
function computeAutoPlacement(state, options) {

@@ -859,9 +880,13 @@ if (options === void 0) {

padding = _options.padding,
flipVariations = _options.flipVariations;
flipVariations = _options.flipVariations,
_options$allowedAutoP = _options.allowedAutoPlacements,
allowedAutoPlacements = _options$allowedAutoP === void 0 ? placements : _options$allowedAutoP;
var variation = getVariation(placement);
var placements = variation ? flipVariations ? variationPlacements : variationPlacements.filter(function (placement) {
var placements$1 = (variation ? flipVariations ? variationPlacements : variationPlacements.filter(function (placement) {
return getVariation(placement) === variation;
}) : basePlacements; // $FlowFixMe: Flow seems to have problems with two array unions...
}) : basePlacements).filter(function (placement) {
return allowedAutoPlacements.indexOf(placement) >= 0;
}); // $FlowFixMe: Flow seems to have problems with two array unions...
var overflows = placements.reduce(function (acc, placement) {
var overflows = placements$1.reduce(function (acc, placement) {
acc[placement] = detectOverflow(state, {

@@ -904,3 +929,4 @@ placement: placement,

_options$flipVariatio = options.flipVariations,
flipVariations = _options$flipVariatio === void 0 ? true : _options$flipVariatio;
flipVariations = _options$flipVariatio === void 0 ? true : _options$flipVariatio,
allowedAutoPlacements = options.allowedAutoPlacements;
var preferredPlacement = state.options.placement;

@@ -916,3 +942,4 @@ var basePlacement = getBasePlacement(preferredPlacement);

padding: padding,
flipVariations: flipVariations
flipVariations: flipVariations,
allowedAutoPlacements: allowedAutoPlacements
}) : placement);

@@ -994,4 +1021,5 @@ }, []);

}
}
} // eslint-disable-next-line import/no-unused-modules
var flip$1 = {

@@ -1056,4 +1084,5 @@ name: 'flip',

});
}
} // eslint-disable-next-line import/no-unused-modules
var hide$1 = {

@@ -1067,2 +1096,54 @@ name: 'hide',

function distanceAndSkiddingToXY(placement, rects, offset) {
var basePlacement = getBasePlacement(placement);
var invertDistance = [left, top].indexOf(basePlacement) >= 0 ? -1 : 1;
var _ref = typeof offset === 'function' ? offset(Object.assign({}, rects, {
placement: placement
})) : offset,
skidding = _ref[0],
distance = _ref[1];
skidding = skidding || 0;
distance = (distance || 0) * invertDistance;
return [left, right].indexOf(basePlacement) >= 0 ? {
x: distance,
y: skidding
} : {
x: skidding,
y: distance
};
}
function offset(_ref2) {
var state = _ref2.state,
options = _ref2.options,
name = _ref2.name;
var _options$offset = options.offset,
offset = _options$offset === void 0 ? [0, 0] : _options$offset;
var data = placements.reduce(function (acc, placement) {
acc[placement] = distanceAndSkiddingToXY(placement, state.rects, offset);
return acc;
}, {});
var _data$state$placement = data[state.placement],
x = _data$state$placement.x,
y = _data$state$placement.y;
if (state.modifiersData.popperOffsets != null) {
state.modifiersData.popperOffsets.x += x;
state.modifiersData.popperOffsets.y += y;
}
state.modifiersData[name] = data;
} // eslint-disable-next-line import/no-unused-modules
var offset$1 = {
name: 'offset',
enabled: true,
phase: 'main',
requires: ['popperOffsets'],
fn: offset
};
function popperOffsets(_ref) {

@@ -1081,4 +1162,5 @@ var state = _ref.state,

});
}
} // eslint-disable-next-line import/no-unused-modules
var popperOffsets$1 = {

@@ -1134,2 +1216,6 @@ name: 'popperOffsets',

if (!popperOffsets) {
return;
}
if (checkMainAxis) {

@@ -1163,3 +1249,4 @@ var mainSide = mainAxis === 'y' ? top : left;

var maxOffset = isBasePlacement ? -referenceRect[len] / 2 + additive + arrowLen + arrowPaddingMax + tetherOffsetValue : maxLen + arrowLen + arrowPaddingMax + tetherOffsetValue;
var clientOffset = arrowElement ? mainAxis === 'y' ? state.elements.popper.clientTop : state.elements.popper.clientLeft : 0;
var arrowOffsetParent = state.elements.arrow && getOffsetParent(state.elements.arrow);
var clientOffset = arrowOffsetParent ? mainAxis === 'y' ? arrowOffsetParent.clientTop || 0 : arrowOffsetParent.clientLeft || 0 : 0;
var offsetModifierValue = state.modifiersData.offset ? state.modifiersData.offset[state.placement][mainAxis] : 0;

@@ -1186,3 +1273,3 @@ var tetherMin = popperOffsets[mainAxis] + minOffset - offsetModifierValue - clientOffset;

state.modifiersData.popperOffsets[altAxis] = _preventedOffset;
popperOffsets[altAxis] = _preventedOffset;
data[altAxis] = _preventedOffset - _offset;

@@ -1192,4 +1279,5 @@ }

state.modifiersData[name] = data;
}
} // eslint-disable-next-line import/no-unused-modules
var preventOverflow$1 = {

@@ -1427,3 +1515,3 @@ name: 'preventOverflow',

state.scrollParents = {
reference: isElement(reference) ? listScrollParents(reference) : [],
reference: isElement(reference) ? listScrollParents(reference) : reference.contextElement ? listScrollParents(reference.contextElement) : [],
popper: listScrollParents(popper)

@@ -1625,2 +1713,3 @@ }; // Orders the modifiers based on their dependencies and `phase`

eventListeners,
offset$1,
flip$1,

@@ -1627,0 +1716,0 @@ preventOverflow$1,

@@ -12,4 +12,6 @@ "use strict";

var _useWaitForDOMRef = _interopRequireDefault(require("./utils/useWaitForDOMRef"));
var _react = _interopRequireDefault(require("react"));
var _useWaitForDOMRef = _interopRequireDefault(require("./useWaitForDOMRef"));
var propTypes = {

@@ -23,9 +25,6 @@ /**

};
/**
* The `<Portal/>` component renders its children into a new "subtree" outside of current component hierarchy.
* You can think of it as a declarative `appendChild()`, or jQuery's `$.fn.appendTo()`.
* The children of `<Portal/>` component will be appended to the `container` specified.
*
* @public
*/
var Portal = function Portal(_ref) {

@@ -36,3 +35,3 @@ var container = _ref.container,

var resolvedContainer = (0, _useWaitForDOMRef["default"])(container, onRendered);
return resolvedContainer ? _reactDom["default"].createPortal(children, resolvedContainer) : null;
return resolvedContainer ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, _reactDom["default"].createPortal(children, resolvedContainer)) : null;
};

@@ -42,8 +41,4 @@

Portal.propTypes = propTypes;
/**
* @component
*/
var _default = Portal;
exports["default"] = _default;
module.exports = exports.default;

@@ -8,3 +8,3 @@ "use strict";

exports.toModifierArray = toModifierArray;
exports["default"] = usePopper;
exports["default"] = void 0;

@@ -28,3 +28,3 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

};
var initialArrowStyles = {};
var initialArrowStyles = {}; // until docjs supports type exports...

@@ -46,4 +46,8 @@ function toModifierMap(modifiers) {

function toModifierArray(map) {
if (map === void 0) {
map = {};
}
if (Array.isArray(map)) return map;
return Object.keys(map || {}).map(function (k) {
return Object.keys(map).map(function (k) {
map[k].name = k;

@@ -53,34 +57,32 @@ return map[k];

}
/**
* Position an element relative some reference element using Popper.js
*
* @param {HTMLElement} referenceElement The element
* @param {HTMLElement} popperElement
* @param {Object} options
* @param {Object} options.modifiers Popper.js modifiers
* @param {Boolean} options.enabled toggle the popper functionality on/off
* @param {String} options.placement The popper element placement relative to the reference element
* @param {Boolean} options.positionFixed use fixed positioning
* @param {Boolean} options.eventsEnabled have Popper listen on window resize events to reposition the element
* @param {Function} options.onCreate called when the popper is created
* @param {Function} options.onUpdate called when the popper is updated
* @param referenceElement
* @param popperElement
* @param {object} options
* @param {object=} options.modifiers Popper.js modifiers
* @param {boolean=} options.enabled toggle the popper functionality on/off
* @param {string=} options.placement The popper element placement relative to the reference element
* @param {string=} options.strategy the positioning strategy
* @param {boolean=} options.eventsEnabled have Popper listen on window resize events to reposition the element
* @param {function=} options.onCreate called when the popper is created
* @param {function=} options.onUpdate called when the popper is updated
*
* @returns {UsePopperState} The popper state
*/
function usePopper(referenceElement, popperElement, _temp) {
var _ref = _temp === void 0 ? {} : _temp,
_ref$enabled = _ref.enabled,
enabled = _ref$enabled === void 0 ? true : _ref$enabled,
_ref$placement = _ref.placement,
placement = _ref$placement === void 0 ? 'bottom' : _ref$placement,
_ref$strategy = _ref.strategy,
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"]);
function usePopper(referenceElement, popperElement, _ref) {
if (_ref === void 0) {
_ref = {};
}
var _ref2 = _ref,
_ref2$enabled = _ref2.enabled,
enabled = _ref2$enabled === void 0 ? true : _ref2$enabled,
_ref2$placement = _ref2.placement,
placement = _ref2$placement === void 0 ? 'bottom' : _ref2$placement,
_ref2$strategy = _ref2.strategy,
strategy = _ref2$strategy === void 0 ? 'absolute' : _ref2$strategy,
_ref2$eventsEnabled = _ref2.eventsEnabled,
eventsEnabled = _ref2$eventsEnabled === void 0 ? true : _ref2$eventsEnabled,
userModifiers = _ref2.modifiers,
popperOptions = (0, _objectWithoutPropertiesLoose2["default"])(_ref2, ["enabled", "placement", "strategy", "eventsEnabled", "modifiers"]);
var popperInstanceRef = (0, _react.useRef)();

@@ -114,3 +116,3 @@ var scheduleUpdate = (0, _react.useCallback)(function () {

scheduleUpdate: scheduleUpdate,
outOfBoundaries: (_data$state$modifiers = data.state.modifiersData.hide) == null ? void 0 : _data$state$modifiers.isReferenceHidden,
outOfBoundaries: !!((_data$state$modifiers = data.state.modifiersData.hide) == null ? void 0 : _data$state$modifiers.isReferenceHidden),
placement: data.state.placement,

@@ -164,5 +166,5 @@ styles: (0, _extends2["default"])({}, (_data$state$styles = data.state.styles) == null ? void 0 : _data$state$styles.popper),

return function () {
if (popperInstanceRef.current !== null) {
if (popperInstanceRef.current != null) {
popperInstanceRef.current.destroy();
popperInstanceRef.current = null;
popperInstanceRef.current = undefined;
setState(function (s) {

@@ -179,2 +181,5 @@ return (0, _extends2["default"])({}, s, {

return state;
}
}
var _default = usePopper;
exports["default"] = _default;

@@ -18,3 +18,3 @@ "use strict";

var _ownerDocument = _interopRequireDefault(require("./utils/ownerDocument"));
var _ownerDocument = _interopRequireDefault(require("./ownerDocument"));

@@ -32,2 +32,7 @@ var escapeKeyCode = 27;

}
var getRefTarget = function getRefTarget(ref) {
return ref && ('current' in ref ? ref.current : ref);
};
/**

@@ -39,10 +44,8 @@ * The `useRootClose` hook registers your callback on the document

*
* @param {Ref<HTMLElement>|HTMLElement} ref The element boundary
* @param {Ref<HTMLElement>| HTMLElement} ref The element boundary
* @param {function} onRootClose
* @param {object} options
* @param {boolean} options.disabled
* @param {string} options.clickTrigger The DOM event name (click, mousedown, etc) to attach listeners on
* @param {object=} options
* @param {boolean=} options.disabled
* @param {string=} options.clickTrigger The DOM event name (click, mousedown, etc) to attach listeners on
*/
function useRootClose(ref, onRootClose, _temp) {

@@ -57,5 +60,5 @@ var _ref = _temp === void 0 ? {} : _temp,

var handleMouseCapture = (0, _react.useCallback)(function (e) {
var currentTarget = ref && ('current' in ref ? ref.current : ref);
var currentTarget = getRefTarget(ref);
(0, _warning["default"])(!!currentTarget, 'RootClose captured a close event but does not have a ref to compare it to. ' + 'useRootClose(), should be passed a ref that resolves to a DOM node');
preventMouseRootCloseRef.current = !currentTarget || isModifiedEvent(e) || !isLeftClickEvent(e) || (0, _contains["default"])(currentTarget, e.target);
preventMouseRootCloseRef.current = !currentTarget || isModifiedEvent(e) || !isLeftClickEvent(e) || !!(0, _contains["default"])(currentTarget, e.target);
}, [ref]);

@@ -74,3 +77,3 @@ var handleMouse = (0, _useEventCallback["default"])(function (e) {

if (disabled || ref == null) return undefined;
var doc = (0, _ownerDocument["default"])(ref.current); // Use capture for this listener so it fires before React's listener, to
var doc = (0, _ownerDocument["default"])(getRefTarget(ref)); // Use capture for this listener so it fires before React's listener, to
// avoid false positives in the contains() check below if the target DOM

@@ -77,0 +80,0 @@ // element is removed in the React mouse callback.

@@ -5,3 +5,4 @@ {

"main": "../cjs/Dropdown.js",
"module": "../esm/Dropdown.js"
"module": "../esm/Dropdown.js",
"types": "../esm/Dropdown.d.ts"
}

@@ -5,3 +5,4 @@ {

"main": "../cjs/DropdownContext.js",
"module": "../esm/DropdownContext.js"
"module": "../esm/DropdownContext.js",
"types": "../esm/DropdownContext.d.ts"
}

@@ -5,3 +5,4 @@ {

"main": "../cjs/DropdownMenu.js",
"module": "../esm/DropdownMenu.js"
"module": "../esm/DropdownMenu.js",
"types": "../esm/DropdownMenu.d.ts"
}

@@ -5,3 +5,4 @@ {

"main": "../cjs/DropdownToggle.js",
"module": "../esm/DropdownToggle.js"
"module": "../esm/DropdownToggle.js",
"types": "../esm/DropdownToggle.d.ts"
}

@@ -5,3 +5,3 @@ import matches from 'dom-helpers/matches';

import PropTypes from 'prop-types';
import { useUncontrolled } from 'uncontrollable';
import { useUncontrolledProp } from 'uncontrollable';
import usePrevious from '@restart/hooks/usePrevious';

@@ -48,3 +48,3 @@ import useCallbackRef from '@restart/hooks/useCallbackRef';

*/
itemSelector: PropTypes.string.isRequired,
itemSelector: PropTypes.string,

@@ -72,3 +72,3 @@ /**

*
* ```js
* ```ts static
* function(

@@ -84,16 +84,6 @@ * isOpen: boolean,

};
var defaultProps = {
itemSelector: '* > *'
};
/**
* `Dropdown` is set of structural components for building, accessible dropdown menus with close-on-click,
* keyboard navigation, and correct focus handling. As with all the react-overlay's
* components its BYOS (bring your own styles). Dropdown is primarily
* built from three base components, you should compose to build your Dropdowns.
*
* - `Dropdown`, which wraps the menu and toggle, and handles keyboard navigation
* - `Dropdown.Toggle` generally a button that triggers the menu opening
* - `Dropdown.Menu` The overlaid, menu, positioned to the toggle with PopperJs
* @displayName Dropdown
*/
function Dropdown(_ref) {

@@ -105,3 +95,4 @@ var drop = _ref.drop,

rawOnToggle = _ref.onToggle,
itemSelector = _ref.itemSelector,
_ref$itemSelector = _ref.itemSelector,
itemSelector = _ref$itemSelector === void 0 ? '* > *' : _ref$itemSelector,
focusFirstItemOnShow = _ref.focusFirstItemOnShow,

@@ -111,11 +102,5 @@ children = _ref.children;

var _useUncontrolled = useUncontrolled({
defaultShow: defaultShow,
show: rawShow,
onToggle: rawOnToggle
}, {
show: 'onToggle'
}),
show = _useUncontrolled.show,
onToggle = _useUncontrolled.onToggle;
var _useUncontrolledProp = useUncontrolledProp(rawShow, defaultShow, rawOnToggle),
show = _useUncontrolledProp[0],
onToggle = _useUncontrolledProp[1];

@@ -129,3 +114,3 @@ var _useCallbackRef = useCallbackRef(),

var menuRef = useRef();
var menuRef = useRef(null);
var menuElement = menuRef.current;

@@ -199,4 +184,4 @@ var setMenu = useCallback(function (ref) {

var handleKeyDown = function handleKeyDown(event) {
var key = event.key,
target = event.target; // Second only to https://github.com/twbs/bootstrap/blob/8cfbf6933b8a0146ac3fbc369f19e520bd1ebdac/js/src/dropdown.js#L400
var key = event.key;
var target = event.target; // Second only to https://github.com/twbs/bootstrap/blob/8cfbf6933b8a0146ac3fbc369f19e520bd1ebdac/js/src/dropdown.js#L400
// in inscrutability

@@ -243,3 +228,3 @@

return React.createElement(DropdownContext.Provider, {
return /*#__PURE__*/React.createElement(DropdownContext.Provider, {
value: context

@@ -255,5 +240,4 @@ }, children({

Dropdown.propTypes = propTypes;
Dropdown.defaultProps = defaultProps;
Dropdown.Menu = DropdownMenu;
Dropdown.Toggle = DropdownToggle;
export default Dropdown;
import React from 'react';
var DropdownContext = React.createContext({
menuRef: function menuRef() {},
toggleRef: function toggleRef() {},
onToggle: function onToggle() {},
toggleNode: undefined,
alignEnd: null,
show: null,
drop: null
});
var DropdownContext = React.createContext(null);
export default DropdownContext;
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
import _extends from "@babel/runtime/helpers/esm/extends";
import PropTypes from 'prop-types';
import { useContext, useRef } from 'react';
import React, { useContext, useRef } from 'react';
import useCallbackRef from '@restart/hooks/useCallbackRef';

@@ -9,2 +9,15 @@ import DropdownContext from './DropdownContext';

import useRootClose from './useRootClose';
var noop = function noop() {};
/**
* @memberOf Dropdown
* @param {object} options
* @param {boolean} options.flip Automatically adjust the menu `drop` position based on viewport edge detection
* @param {boolean} options.show Display the menu manually, ignored in the context of a `Dropdown`
* @param {boolean} options.usePopper opt in/out of using PopperJS to position menus. When disabled you must position it yourself.
* @param {string} options.rootCloseEvent The pointer event to listen for when determining "clicks outside" the menu for triggering a close.
* @param {object} options.popperConfig Options passed to the [`usePopper`](/api/usePopper) hook.
*/
export function useDropdownMenu(options) {

@@ -30,5 +43,5 @@ var _modifiers$arrow;

_options$usePopper = _options.usePopper,
shouldUsePopper = _options$usePopper === void 0 ? true : _options$usePopper;
var show = context.show == null ? options.show : context.show;
var alignEnd = context.alignEnd == null ? options.alignEnd : context.alignEnd;
shouldUsePopper = _options$usePopper === void 0 ? !!context : _options$usePopper;
var show = (context == null ? void 0 : context.show) == null ? options.show : context.show;
var alignEnd = (context == null ? void 0 : context.alignEnd) == null ? options.alignEnd : context.alignEnd;

@@ -40,10 +53,11 @@ if (show && !hasShownRef.current) {

var handleClose = function handleClose(e) {
if (!context.toggle) return;
context.toggle(false, e);
context == null ? void 0 : context.toggle(false, e);
};
var drop = context.drop,
setMenu = context.setMenu,
menuElement = context.menuElement,
toggleElement = context.toggleElement;
var _ref = context || {},
drop = _ref.drop,
setMenu = _ref.setMenu,
menuElement = _ref.menuElement,
toggleElement = _ref.toggleElement;
var placement = alignEnd ? 'bottom-end' : 'bottom-start';

@@ -70,6 +84,6 @@ 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 menu = null;
var menu;
var menuProps = {
ref: setMenu,
'aria-labelledby': toggleElement && toggleElement.id
ref: setMenu || noop,
'aria-labelledby': toggleElement == null ? void 0 : toggleElement.id
};

@@ -166,8 +180,14 @@ var childArgs = {

function DropdownMenu(_ref) {
var children = _ref.children,
options = _objectWithoutPropertiesLoose(_ref, ["children"]);
/**
* Also exported as `<Dropdown.Menu>` from `Dropdown`.
*
* @displayName DropdownMenu
* @memberOf Dropdown
*/
function DropdownMenu(_ref2) {
var children = _ref2.children,
options = _objectWithoutPropertiesLoose(_ref2, ["children"]);
var args = useDropdownMenu(options);
return args.hasShown ? children(args) : null;
return /*#__PURE__*/React.createElement(React.Fragment, null, args.hasShown ? children(args) : null);
}

@@ -174,0 +194,0 @@

import PropTypes from 'prop-types';
import { useContext } from 'react';
import React, { useContext } from 'react';
import DropdownContext from './DropdownContext';
var noop = function noop() {};
/**
* Wires up Dropdown toggle functinality, returning a set a props to attach
* Wires up Dropdown toggle functionality, returning a set a props to attach
* to the element that functions as the dropdown toggle (generally a button).
*
* @memberOf Dropdown
*/
export function useDropdownToggle() {
var _useContext = useContext(DropdownContext),
show = _useContext.show,
toggle = _useContext.toggle,
setToggle = _useContext.setToggle;
var _ref = useContext(DropdownContext) || {},
_ref$show = _ref.show,
show = _ref$show === void 0 ? false : _ref$show,
_ref$toggle = _ref.toggle,
toggle = _ref$toggle === void 0 ? noop : _ref$toggle,
setToggle = _ref.setToggle;
return [{
ref: setToggle,
ref: setToggle || noop,
'aria-haspopup': true,

@@ -43,4 +50,10 @@ 'aria-expanded': !!show

function DropdownToggle(_ref) {
var children = _ref.children;
/**
* Also exported as `<Dropdown.Toggle>` from `Dropdown`.
*
* @displayName DropdownToggle
* @memberOf Dropdown
*/
function DropdownToggle(_ref2) {
var children = _ref2.children;

@@ -53,7 +66,7 @@ var _useDropdownToggle = useDropdownToggle(),

return children({
return /*#__PURE__*/React.createElement(React.Fragment, null, children({
show: show,
toggle: toggle,
props: props
});
}));
}

@@ -60,0 +73,0 @@

import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
/* eslint-disable @typescript-eslint/no-use-before-define */
/* eslint-disable react/prop-types */

@@ -12,323 +12,263 @@ import activeElement from 'dom-helpers/activeElement';

import PropTypes from 'prop-types';
import React from 'react';
import React, { useState, useRef, useCallback, useImperativeHandle, forwardRef, useEffect } from 'react';
import ReactDOM from 'react-dom';
import useMounted from '@restart/hooks/useMounted';
import useWillUnmount from '@restart/hooks/useWillUnmount';
import usePrevious from '@restart/hooks/esm/usePrevious';
import useEventCallback from '@restart/hooks/esm/useEventCallback';
import ModalManager from './ModalManager';
import ownerDocument from './utils/ownerDocument';
import useWaitForDOMRef from './utils/useWaitForDOMRef';
import useWaitForDOMRef from './useWaitForDOMRef';
var manager;
function omitProps(props, propTypes) {
var keys = Object.keys(props);
var newProps = {};
keys.forEach(function (prop) {
if (!Object.prototype.hasOwnProperty.call(propTypes, prop)) {
newProps[prop] = props[prop];
}
function getManager() {
if (!manager) manager = new ModalManager();
return manager;
}
function useModalManager(provided) {
var modalManager = provided || getManager();
var modal = useRef({
dialog: null,
backdrop: null
});
return newProps;
return Object.assign(modal.current, {
add: function add(container, className) {
return modalManager.add(modal.current, container, className);
},
remove: function remove() {
return modalManager.remove(modal.current);
},
isTopModal: function isTopModal() {
return modalManager.isTopModal(modal.current);
},
setDialogRef: useCallback(function (ref) {
modal.current.dialog = ref;
}, []),
setBackdropRef: useCallback(function (ref) {
modal.current.backdrop = ref;
}, [])
});
}
var manager;
/**
* Love them or hate them, `<Modal />` provides a solid foundation for creating dialogs, lightboxes, or whatever else.
* The Modal component renders its `children` node in front of a backdrop component.
*
* The Modal offers a few helpful features over using just a `<Portal/>` component and some styles:
*
* - Manages dialog stacking when one-at-a-time just isn't enough.
* - Creates a backdrop, for disabling interaction below the modal.
* - It properly manages focus; moving to the modal content, and keeping it there until the modal is closed.
* - It disables scrolling of the page content while open.
* - Adds the appropriate ARIA roles are automatically.
* - Easily pluggable animations via a `<Transition/>` component.
*
* Note that, in the same way the backdrop element prevents users from clicking or interacting
* with the page content underneath the Modal, Screen readers also need to be signaled to not to
* interact with page content while the Modal is open. To do this, we use a common technique of applying
* the `aria-hidden='true'` attribute to the non-Modal elements in the Modal `container`. This means that for
* a Modal to be truly modal, it should have a `container` that is _outside_ your app's
* React hierarchy (such as the default: document.body).
*/
var Modal = forwardRef(function (_ref, ref) {
var _ref$show = _ref.show,
show = _ref$show === void 0 ? false : _ref$show,
_ref$role = _ref.role,
role = _ref$role === void 0 ? 'dialog' : _ref$role,
className = _ref.className,
style = _ref.style,
children = _ref.children,
_ref$backdrop = _ref.backdrop,
backdrop = _ref$backdrop === void 0 ? true : _ref$backdrop,
_ref$keyboard = _ref.keyboard,
keyboard = _ref$keyboard === void 0 ? true : _ref$keyboard,
onBackdropClick = _ref.onBackdropClick,
onEscapeKeyDown = _ref.onEscapeKeyDown,
transition = _ref.transition,
backdropTransition = _ref.backdropTransition,
_ref$autoFocus = _ref.autoFocus,
autoFocus = _ref$autoFocus === void 0 ? true : _ref$autoFocus,
_ref$enforceFocus = _ref.enforceFocus,
enforceFocus = _ref$enforceFocus === void 0 ? true : _ref$enforceFocus,
_ref$restoreFocus = _ref.restoreFocus,
restoreFocus = _ref$restoreFocus === void 0 ? true : _ref$restoreFocus,
restoreFocusOptions = _ref.restoreFocusOptions,
renderDialog = _ref.renderDialog,
_ref$renderBackdrop = _ref.renderBackdrop,
renderBackdrop = _ref$renderBackdrop === void 0 ? function (props) {
return /*#__PURE__*/React.createElement("div", props);
} : _ref$renderBackdrop,
providedManager = _ref.manager,
containerRef = _ref.container,
containerClassName = _ref.containerClassName,
onShow = _ref.onShow,
_ref$onHide = _ref.onHide,
onHide = _ref$onHide === void 0 ? function () {} : _ref$onHide,
onExit = _ref.onExit,
onExited = _ref.onExited,
onExiting = _ref.onExiting,
onEnter = _ref.onEnter,
onEntering = _ref.onEntering,
onEntered = _ref.onEntered,
rest = _objectWithoutPropertiesLoose(_ref, ["show", "role", "className", "style", "children", "backdrop", "keyboard", "onBackdropClick", "onEscapeKeyDown", "transition", "backdropTransition", "autoFocus", "enforceFocus", "restoreFocus", "restoreFocusOptions", "renderDialog", "renderBackdrop", "manager", "container", "containerClassName", "onShow", "onHide", "onExit", "onExited", "onExiting", "onEnter", "onEntering", "onEntered"]);
var Modal = /*#__PURE__*/function (_React$Component) {
_inheritsLoose(Modal, _React$Component);
var container = useWaitForDOMRef(containerRef);
var modal = useModalManager(providedManager);
var isMounted = useMounted();
var prevShow = usePrevious(show);
function Modal() {
var _this;
var _useState = useState(!show),
exited = _useState[0],
setExited = _useState[1];
for (var _len = arguments.length, _args = new Array(_len), _key = 0; _key < _len; _key++) {
_args[_key] = arguments[_key];
}
var lastFocusRef = useRef(null);
useImperativeHandle(ref, function () {
return modal;
}, [modal]);
_this = _React$Component.call.apply(_React$Component, [this].concat(_args)) || this;
_this.state = {
exited: !_this.props.show
};
if (canUseDOM && !prevShow && show) {
lastFocusRef.current = activeElement();
}
_this.onShow = function () {
var _this$props = _this.props,
container = _this$props.container,
containerClassName = _this$props.containerClassName,
onShow = _this$props.onShow;
if (!transition && !show && !exited) {
setExited(true);
} else if (show && exited) {
setExited(false);
}
_this.getModalManager().add(_assertThisInitialized(_this), container, containerClassName);
var handleShow = useEventCallback(function () {
modal.add(container, containerClassName);
removeKeydownListenerRef.current = listen(document, 'keydown', handleDocumentKeyDown);
removeFocusListenerRef.current = listen(document, 'focus', // the timeout is necessary b/c this will run before the new modal is mounted
// and so steals focus from it
function () {
return setTimeout(handleEnforceFocus);
}, true);
_this.removeKeydownListener = listen(document, 'keydown', _this.handleDocumentKeyDown);
_this.removeFocusListener = listen(document, 'focus', // the timeout is necessary b/c this will run before the new modal is mounted
// and so steals focus from it
function () {
return setTimeout(_this.enforceFocus);
}, true);
if (onShow) {
onShow();
} // autofocus after onShow to not trigger a focus event for previous
// modals before this one is shown.
if (onShow) {
onShow();
} // autofocus after onShow, to not trigger a focus event for previous
// modals before this one is shown.
if (autoFocus) {
var currentActiveElement = activeElement(document);
_this.autoFocus();
};
_this.onHide = function () {
_this.getModalManager().remove(_assertThisInitialized(_this));
_this.removeKeydownListener();
_this.removeFocusListener();
if (_this.props.restoreFocus) {
_this.restoreLastFocus();
if (modal.dialog && currentActiveElement && !contains(modal.dialog, currentActiveElement)) {
lastFocusRef.current = currentActiveElement;
modal.dialog.focus();
}
};
}
});
var handleHide = useEventCallback(function () {
modal.remove();
removeKeydownListenerRef.current == null ? void 0 : removeKeydownListenerRef.current();
removeFocusListenerRef.current == null ? void 0 : removeFocusListenerRef.current();
_this.setDialogRef = function (ref) {
_this.dialog = ref;
};
if (restoreFocus) {
var _lastFocusRef$current;
_this.setBackdropRef = function (ref) {
_this.backdrop = ref && ReactDOM.findDOMNode(ref);
};
// Support: <=IE11 doesn't support `focus()` on svg elements (RB: #917)
(_lastFocusRef$current = lastFocusRef.current) == null ? void 0 : _lastFocusRef$current.focus == null ? void 0 : _lastFocusRef$current.focus(restoreFocusOptions);
lastFocusRef.current = null;
}
}); // TODO: try and combine these effects: https://github.com/react-bootstrap/react-overlays/pull/794#discussion_r409954120
// Show logic when:
// - show is `true` _and_ `container` has resolved
_this.handleHidden = function () {
_this.setState({
exited: true
});
useEffect(function () {
if (!show || !container) return;
handleShow();
}, [show, container,
/* should never change: */
handleShow]); // Hide cleanup logic when:
// - `exited` switches to true
// - component unmounts;
_this.onHide();
useEffect(function () {
if (!exited) return;
handleHide();
}, [exited, handleHide]);
useWillUnmount(function () {
handleHide();
}); // --------------------------------
if (_this.props.onExited) {
var _this$props2;
var handleEnforceFocus = useEventCallback(function () {
if (!enforceFocus || !isMounted() || !modal.isTopModal()) {
return;
}
(_this$props2 = _this.props).onExited.apply(_this$props2, arguments);
}
};
var currentActiveElement = activeElement();
_this.handleBackdropClick = function (e) {
if (e.target !== e.currentTarget) {
return;
}
if (_this.props.onBackdropClick) {
_this.props.onBackdropClick(e);
}
if (_this.props.backdrop === true) {
_this.props.onHide();
}
};
_this.handleDocumentKeyDown = function (e) {
if (_this.props.keyboard && e.keyCode === 27 && _this.isTopModal()) {
if (_this.props.onEscapeKeyDown) {
_this.props.onEscapeKeyDown(e);
}
_this.props.onHide();
}
};
_this.enforceFocus = function () {
if (!_this.props.enforceFocus || !_this._isMounted || !_this.isTopModal()) {
return;
}
var currentActiveElement = activeElement(ownerDocument(_assertThisInitialized(_this)));
if (_this.dialog && !contains(_this.dialog, currentActiveElement)) {
_this.dialog.focus();
}
};
_this.renderBackdrop = function () {
var _this$props3 = _this.props,
renderBackdrop = _this$props3.renderBackdrop,
Transition = _this$props3.backdropTransition;
var backdrop = renderBackdrop({
ref: _this.setBackdropRef,
onClick: _this.handleBackdropClick
});
if (Transition) {
backdrop = React.createElement(Transition, {
appear: true,
"in": _this.props.show
}, backdrop);
}
return backdrop;
};
return _this;
}
Modal.getDerivedStateFromProps = function getDerivedStateFromProps(nextProps) {
if (nextProps.show) {
return {
exited: false
};
if (modal.dialog && currentActiveElement && !contains(modal.dialog, currentActiveElement)) {
modal.dialog.focus();
}
if (!nextProps.transition) {
// Otherwise let handleHidden take care of marking exited.
return {
exited: true
};
});
var handleBackdropClick = useEventCallback(function (e) {
if (e.target !== e.currentTarget) {
return;
}
return null;
};
onBackdropClick == null ? void 0 : onBackdropClick(e);
var _proto = Modal.prototype;
_proto.componentDidMount = function componentDidMount() {
this._isMounted = true;
if (this.props.show) {
this.onShow();
if (backdrop === true) {
onHide();
}
};
});
_proto.componentDidUpdate = function componentDidUpdate(prevProps) {
var transition = this.props.transition;
if (prevProps.show && !this.props.show && !transition) {
// Otherwise handleHidden will call this.
this.onHide();
} else if (!prevProps.show && this.props.show) {
this.onShow();
var handleDocumentKeyDown = function handleDocumentKeyDown(e) {
if (keyboard && e.keyCode === 27 && modal.isTopModal()) {
onEscapeKeyDown == null ? void 0 : onEscapeKeyDown(e);
onHide();
}
};
_proto.componentWillUnmount = function componentWillUnmount() {
var _this$props4 = this.props,
show = _this$props4.show,
transition = _this$props4.transition;
this._isMounted = false;
var removeFocusListenerRef = useRef();
var removeKeydownListenerRef = useRef();
if (show || transition && !this.state.exited) {
this.onHide();
}
};
var handleHidden = function handleHidden() {
setExited(true);
_proto.getSnapshotBeforeUpdate = function getSnapshotBeforeUpdate(prevProps) {
if (canUseDOM && !prevProps.show && this.props.show) {
this.lastFocus = activeElement();
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
return null;
onExited == null ? void 0 : onExited.apply(void 0, args);
};
_proto.getModalManager = function getModalManager() {
if (this.props.manager) {
return this.props.manager;
}
var Transition = transition;
if (!manager) {
manager = new ModalManager();
}
if (!container || !(show || Transition && !exited)) {
return null;
}
return manager;
};
var dialogProps = _extends({
role: role,
ref: modal.setDialogRef,
// apparently only works on the dialog role element
'aria-modal': role === 'dialog' ? true : undefined
}, rest, {
style: style,
className: className,
tabIndex: -1
});
_proto.restoreLastFocus = function restoreLastFocus() {
// Support: <=IE11 doesn't support `focus()` on svg elements (RB: #917)
if (this.lastFocus && this.lastFocus.focus) {
this.lastFocus.focus(this.props.restoreFocusOptions);
this.lastFocus = null;
}
};
var dialog = renderDialog ? renderDialog(dialogProps) : /*#__PURE__*/React.createElement("div", dialogProps, React.cloneElement(children, {
role: 'document'
}));
_proto.autoFocus = function autoFocus() {
if (!this.props.autoFocus) return;
var currentActiveElement = activeElement(ownerDocument(this));
if (Transition) {
dialog = /*#__PURE__*/React.createElement(Transition, {
appear: true,
unmountOnExit: true,
"in": !!show,
onExit: onExit,
onExiting: onExiting,
onExited: handleHidden,
onEnter: onEnter,
onEntering: onEntering,
onEntered: onEntered
}, dialog);
}
if (this.dialog && !contains(this.dialog, currentActiveElement)) {
this.lastFocus = currentActiveElement;
this.dialog.focus();
}
};
var backdropElement = null;
_proto.isTopModal = function isTopModal() {
return this.getModalManager().isTopModal(this);
};
_proto.render = function render() {
var _this$props5 = this.props,
show = _this$props5.show,
container = _this$props5.container,
children = _this$props5.children,
renderDialog = _this$props5.renderDialog,
_this$props5$role = _this$props5.role,
role = _this$props5$role === void 0 ? 'dialog' : _this$props5$role,
Transition = _this$props5.transition,
backdrop = _this$props5.backdrop,
className = _this$props5.className,
style = _this$props5.style,
onExit = _this$props5.onExit,
onExiting = _this$props5.onExiting,
onEnter = _this$props5.onEnter,
onEntering = _this$props5.onEntering,
onEntered = _this$props5.onEntered,
props = _objectWithoutPropertiesLoose(_this$props5, ["show", "container", "children", "renderDialog", "role", "transition", "backdrop", "className", "style", "onExit", "onExiting", "onEnter", "onEntering", "onEntered"]);
if (!(show || Transition && !this.state.exited)) {
return null;
}
var dialogProps = _extends({
role: role,
ref: this.setDialogRef,
// apparently only works on the dialog role element
'aria-modal': role === 'dialog' ? true : undefined
}, omitProps(props, Modal.propTypes), {
style: style,
className: className,
tabIndex: '-1'
if (backdrop) {
var BackdropTransition = backdropTransition;
backdropElement = renderBackdrop({
ref: modal.setBackdropRef,
onClick: handleBackdropClick
});
var dialog = renderDialog ? renderDialog(dialogProps) : React.createElement("div", dialogProps, React.cloneElement(children, {
role: 'document'
}));
if (Transition) {
dialog = React.createElement(Transition, {
if (BackdropTransition) {
backdropElement = /*#__PURE__*/React.createElement(BackdropTransition, {
appear: true,
unmountOnExit: true,
"in": show,
onExit: onExit,
onExiting: onExiting,
onExited: this.handleHidden,
onEnter: onEnter,
onEntering: onEntering,
onEntered: onEntered
}, dialog);
"in": !!show
}, backdropElement);
}
}
return ReactDOM.createPortal(React.createElement(React.Fragment, null, backdrop && this.renderBackdrop(), dialog), container);
};
return Modal;
}(React.Component); // dumb HOC for the sake react-docgen
Modal.propTypes = {
return /*#__PURE__*/React.createElement(React.Fragment, null, ReactDOM.createPortal( /*#__PURE__*/React.createElement(React.Fragment, null, backdropElement, dialog), container));
});
var propTypes = {
/**

@@ -369,4 +309,4 @@ * Set the visibility of the Modal

*
* ```js
* renderDialog={props => <MyDialog {...props} />}
* ```js static
* renderDialog={props => <MyDialog {...props} />}
* ```

@@ -488,32 +428,6 @@ */

};
Modal.defaultProps = {
show: false,
role: 'dialog',
backdrop: true,
keyboard: true,
autoFocus: true,
enforceFocus: true,
restoreFocus: true,
onHide: function onHide() {},
renderBackdrop: function renderBackdrop(props) {
return React.createElement("div", props);
}
};
function forwardRef(Component) {
// eslint-disable-next-line react/display-name
var ModalWithContainer = React.forwardRef(function (props, ref) {
var resolved = useWaitForDOMRef(props.container);
return resolved ? React.createElement(Component, _extends({}, props, {
ref: ref,
container: resolved
})) : null;
});
ModalWithContainer.Manager = ModalManager;
ModalWithContainer._Inner = Component;
return ModalWithContainer;
}
var ModalWithContainer = forwardRef(Modal);
ModalWithContainer.Manager = ModalManager;
export default ModalWithContainer;
Modal.displayName = 'Modal';
Modal.propTypes = propTypes;
export default Object.assign(Modal, {
Manager: ModalManager
});

@@ -5,4 +5,4 @@ import addClass from 'dom-helpers/addClass';

import getScrollbarSize from 'dom-helpers/scrollbarSize';
import isOverflowing from './utils/isOverflowing';
import { ariaHidden, hideSiblings, showSiblings } from './utils/manageAriaHidden';
import isOverflowing from './isOverflowing';
import { ariaHidden, hideSiblings, showSiblings } from './manageAriaHidden';

@@ -21,2 +21,3 @@ function findIndexOf(arr, cb) {

}
/**

@@ -27,4 +28,2 @@ * Proper state management for containers and the modals in those containers.

*/
var ModalManager = /*#__PURE__*/function () {

@@ -38,2 +37,8 @@ function ModalManager(_temp) {

this.hideSiblingNodes = void 0;
this.handleContainerOverflow = void 0;
this.modals = void 0;
this.containers = void 0;
this.data = void 0;
this.scrollbarSize = void 0;
this.hideSiblingNodes = hideSiblingNodes;

@@ -74,3 +79,3 @@ this.handleContainerOverflow = handleContainerOverflow;

// to add our scrollbar width
style.paddingRight = parseInt(css(container, 'paddingRight') || 0, 10) + this.scrollbarSize + "px";
style.paddingRight = parseInt(css(container, 'paddingRight') || '0', 10) + this.scrollbarSize + "px";
}

@@ -77,0 +82,0 @@

@@ -11,3 +11,4 @@ import _extends from "@babel/runtime/helpers/esm/extends";

import useRootClose from './useRootClose';
import useWaitForDOMRef from './utils/useWaitForDOMRef';
import useWaitForDOMRef from './useWaitForDOMRef';
/**

@@ -17,3 +18,2 @@ * Built on top of `Popper.js`, the overlay component is

*/
var Overlay = React.forwardRef(function (props, outerRef) {

@@ -24,3 +24,4 @@ var _modifiers$preventOve, _modifiers$arrow;

placement = props.placement,
containerPadding = props.containerPadding,
_props$containerPaddi = props.containerPadding,
containerPadding = _props$containerPaddi === void 0 ? 5 : _props$containerPaddi,
_props$popperConfig = props.popperConfig,

@@ -101,3 +102,3 @@ popperConfig = _props$popperConfig === void 0 ? {} : _props$popperConfig,

var child = props.children(_extends({}, popper, {
show: props.show,
show: !!props.show,
props: {

@@ -119,3 +120,3 @@ style: styles,

onEntered = props.onEntered;
child = React.createElement(Transition, {
child = /*#__PURE__*/React.createElement(Transition, {
"in": props.show,

@@ -219,13 +220,13 @@ appear: true,

onHide: function onHide(props) {
var propType = PropTypes.func;
for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
args[_key - 1] = arguments[_key];
}
if (props.rootClose) {
propType = propType.isRequired;
}
var _PropTypes$func;
for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
args[_key - 1] = arguments[_key];
return (_PropTypes$func = PropTypes.func).isRequired.apply(_PropTypes$func, [props].concat(args));
}
return propType.apply(void 0, [props].concat(args));
return PropTypes.func.apply(PropTypes, [props].concat(args));
},

@@ -237,2 +238,3 @@

*/
// @ts-ignore
transition: PropTypes.elementType,

@@ -270,5 +272,2 @@

};
Overlay.defaultProps = {
containerPadding: 5
};
export default Overlay;

@@ -6,2 +6,3 @@ import arrow from '@popperjs/core/lib/modifiers/arrow';

import hide from '@popperjs/core/lib/modifiers/hide';
import offset from '@popperjs/core/lib/modifiers/offset';
import popperOffsets from '@popperjs/core/lib/modifiers/popperOffsets';

@@ -14,4 +15,4 @@ import preventOverflow from '@popperjs/core/lib/modifiers/preventOverflow';

export var createPopper = popperGenerator({
defaultModifiers: [hide, popperOffsets, computeStyles, eventListeners, flip, preventOverflow, arrow]
defaultModifiers: [hide, popperOffsets, computeStyles, eventListeners, offset, flip, preventOverflow, arrow]
});
export { placements };
import PropTypes from 'prop-types';
import ReactDOM from 'react-dom';
import useWaitForDOMRef from './utils/useWaitForDOMRef';
import React from 'react';
import useWaitForDOMRef from './useWaitForDOMRef';
var propTypes = {

@@ -12,9 +13,6 @@ /**

};
/**
* The `<Portal/>` component renders its children into a new "subtree" outside of current component hierarchy.
* You can think of it as a declarative `appendChild()`, or jQuery's `$.fn.appendTo()`.
* The children of `<Portal/>` component will be appended to the `container` specified.
*
* @public
*/
var Portal = function Portal(_ref) {

@@ -25,3 +23,3 @@ var container = _ref.container,

var resolvedContainer = useWaitForDOMRef(container, onRendered);
return resolvedContainer ? ReactDOM.createPortal(children, resolvedContainer) : null;
return resolvedContainer ? /*#__PURE__*/React.createElement(React.Fragment, null, ReactDOM.createPortal(children, resolvedContainer)) : null;
};

@@ -31,6 +29,2 @@

Portal.propTypes = propTypes;
/**
* @component
*/
export default Portal;

@@ -13,3 +13,4 @@ import _extends from "@babel/runtime/helpers/esm/extends";

};
var initialArrowStyles = {};
var initialArrowStyles = {}; // until docjs supports type exports...
export function toModifierMap(modifiers) {

@@ -29,4 +30,8 @@ var result = {};

export function toModifierArray(map) {
if (map === void 0) {
map = {};
}
if (Array.isArray(map)) return map;
return Object.keys(map || {}).map(function (k) {
return Object.keys(map).map(function (k) {
map[k].name = k;

@@ -36,34 +41,32 @@ return map[k];

}
/**
* Position an element relative some reference element using Popper.js
*
* @param {HTMLElement} referenceElement The element
* @param {HTMLElement} popperElement
* @param {Object} options
* @param {Object} options.modifiers Popper.js modifiers
* @param {Boolean} options.enabled toggle the popper functionality on/off
* @param {String} options.placement The popper element placement relative to the reference element
* @param {Boolean} options.positionFixed use fixed positioning
* @param {Boolean} options.eventsEnabled have Popper listen on window resize events to reposition the element
* @param {Function} options.onCreate called when the popper is created
* @param {Function} options.onUpdate called when the popper is updated
* @param referenceElement
* @param popperElement
* @param {object} options
* @param {object=} options.modifiers Popper.js modifiers
* @param {boolean=} options.enabled toggle the popper functionality on/off
* @param {string=} options.placement The popper element placement relative to the reference element
* @param {string=} options.strategy the positioning strategy
* @param {boolean=} options.eventsEnabled have Popper listen on window resize events to reposition the element
* @param {function=} options.onCreate called when the popper is created
* @param {function=} options.onUpdate called when the popper is updated
*
* @returns {UsePopperState} The popper state
*/
function usePopper(referenceElement, popperElement, _temp) {
var _ref = _temp === void 0 ? {} : _temp,
_ref$enabled = _ref.enabled,
enabled = _ref$enabled === void 0 ? true : _ref$enabled,
_ref$placement = _ref.placement,
placement = _ref$placement === void 0 ? 'bottom' : _ref$placement,
_ref$strategy = _ref.strategy,
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"]);
export default function usePopper(referenceElement, popperElement, _ref) {
if (_ref === void 0) {
_ref = {};
}
var _ref2 = _ref,
_ref2$enabled = _ref2.enabled,
enabled = _ref2$enabled === void 0 ? true : _ref2$enabled,
_ref2$placement = _ref2.placement,
placement = _ref2$placement === void 0 ? 'bottom' : _ref2$placement,
_ref2$strategy = _ref2.strategy,
strategy = _ref2$strategy === void 0 ? 'absolute' : _ref2$strategy,
_ref2$eventsEnabled = _ref2.eventsEnabled,
eventsEnabled = _ref2$eventsEnabled === void 0 ? true : _ref2$eventsEnabled,
userModifiers = _ref2.modifiers,
popperOptions = _objectWithoutPropertiesLoose(_ref2, ["enabled", "placement", "strategy", "eventsEnabled", "modifiers"]);
var popperInstanceRef = useRef();

@@ -97,3 +100,3 @@ var scheduleUpdate = useCallback(function () {

scheduleUpdate: scheduleUpdate,
outOfBoundaries: (_data$state$modifiers = data.state.modifiersData.hide) == null ? void 0 : _data$state$modifiers.isReferenceHidden,
outOfBoundaries: !!((_data$state$modifiers = data.state.modifiersData.hide) == null ? void 0 : _data$state$modifiers.isReferenceHidden),
placement: data.state.placement,

@@ -147,5 +150,5 @@ styles: _extends({}, (_data$state$styles = data.state.styles) == null ? void 0 : _data$state$styles.popper),

return function () {
if (popperInstanceRef.current !== null) {
if (popperInstanceRef.current != null) {
popperInstanceRef.current.destroy();
popperInstanceRef.current = null;
popperInstanceRef.current = undefined;
setState(function (s) {

@@ -162,2 +165,4 @@ return _extends({}, s, {

return state;
}
}
export default usePopper;

@@ -6,3 +6,3 @@ import contains from 'dom-helpers/contains';

import warning from 'warning';
import ownerDocument from './utils/ownerDocument';
import ownerDocument from './ownerDocument';
var escapeKeyCode = 27;

@@ -19,2 +19,7 @@

}
var getRefTarget = function getRefTarget(ref) {
return ref && ('current' in ref ? ref.current : ref);
};
/**

@@ -26,10 +31,8 @@ * The `useRootClose` hook registers your callback on the document

*
* @param {Ref<HTMLElement>|HTMLElement} ref The element boundary
* @param {Ref<HTMLElement>| HTMLElement} ref The element boundary
* @param {function} onRootClose
* @param {object} options
* @param {boolean} options.disabled
* @param {string} options.clickTrigger The DOM event name (click, mousedown, etc) to attach listeners on
* @param {object=} options
* @param {boolean=} options.disabled
* @param {string=} options.clickTrigger The DOM event name (click, mousedown, etc) to attach listeners on
*/
function useRootClose(ref, onRootClose, _temp) {

@@ -44,5 +47,5 @@ var _ref = _temp === void 0 ? {} : _temp,

var handleMouseCapture = useCallback(function (e) {
var currentTarget = ref && ('current' in ref ? ref.current : ref);
var currentTarget = getRefTarget(ref);
warning(!!currentTarget, 'RootClose captured a close event but does not have a ref to compare it to. ' + 'useRootClose(), should be passed a ref that resolves to a DOM node');
preventMouseRootCloseRef.current = !currentTarget || isModifiedEvent(e) || !isLeftClickEvent(e) || contains(currentTarget, e.target);
preventMouseRootCloseRef.current = !currentTarget || isModifiedEvent(e) || !isLeftClickEvent(e) || !!contains(currentTarget, e.target);
}, [ref]);

@@ -61,3 +64,3 @@ var handleMouse = useEventCallback(function (e) {

if (disabled || ref == null) return undefined;
var doc = ownerDocument(ref.current); // Use capture for this listener so it fires before React's listener, to
var doc = ownerDocument(getRefTarget(ref)); // Use capture for this listener so it fires before React's listener, to
// avoid false positives in the contains() check below if the target DOM

@@ -64,0 +67,0 @@ // element is removed in the React mouse callback.

@@ -5,3 +5,4 @@ {

"main": "../cjs/Modal.js",
"module": "../esm/Modal.js"
"module": "../esm/Modal.js",
"types": "../esm/Modal.d.ts"
}

@@ -5,3 +5,4 @@ {

"main": "../cjs/ModalManager.js",
"module": "../esm/ModalManager.js"
"module": "../esm/ModalManager.js",
"types": "../esm/ModalManager.d.ts"
}

@@ -5,3 +5,4 @@ {

"main": "../cjs/Overlay.js",
"module": "../esm/Overlay.js"
"module": "../esm/Overlay.js",
"types": "../esm/Overlay.d.ts"
}
{
"name": "react-overlays",
"version": "3.0.1",
"version": "3.1.0",
"description": "Utilities for creating robust overlay components",

@@ -33,3 +33,3 @@ "author": {

"lint-staged": {
"*.js": "eslint --fix"
"*.js,*.tsx": "eslint --fix --ext .js,.ts,.tsx"
},

@@ -50,2 +50,3 @@ "prettier": {

"@restart/hooks": "^0.3.12",
"@types/warning": "^3.0.0",
"dom-helpers": "^5.1.0",

@@ -52,0 +53,0 @@ "prop-types": "^15.7.2",

@@ -5,3 +5,4 @@ {

"main": "../cjs/popper.js",
"module": "../esm/popper.js"
"module": "../esm/popper.js",
"types": "../esm/popper.d.ts"
}

@@ -5,3 +5,4 @@ {

"main": "../cjs/Portal.js",
"module": "../esm/Portal.js"
"module": "../esm/Portal.js",
"types": "../esm/Portal.d.ts"
}
# react-overlays
[![test status][test-badge]][actions]
[![deploy docs status][deploy-docs-badge]][actions]
[![codecov][codecov-badge]][codecov]
[![CI status][ci-badge]][actions]
[![Deploy docs status][deploy-docs-badge]][actions]
[![Codecov][codecov-badge]][codecov]
[![Netlify Status](https://api.netlify.com/api/v1/badges/e86fa356-4480-409e-9c24-52ea0660a923/deploy-status)](https://app.netlify.com/sites/react-overlays/deploys)
Utilities for creating robust overlay components
Utilities for creating robust overlay components.
demos and docs at: https://react-bootstrap.github.io/react-overlays/modal/
## Documentation
## Install
https://react-bootstrap.github.io/react-overlays/modal/
## Installation
```sh

@@ -18,14 +20,12 @@ npm install --save react-overlays

All of these utilities have been abstracted out of [react-bootstrap](https://github.com/react-bootstrap/react-bootstrap) in order to provide better access to the generic implementations of these commonly needed components. The included components are building blocks for creating more polished components. Everything is bring-your-own-styles, css or otherwise.
## Notes
If you are looking for more complete overlays, modals, or tooltips--something you can use right out of the box--check out react-bootstrap, which is (or soon will be) built on using these components.
All of these utilities have been abstracted out of [React-Bootstrap](https://github.com/react-bootstrap/react-bootstrap) in order to provide better access to the generic implementations of these commonly-needed components. The included components are building blocks for creating more polished components. Everything is bring-your-own-styles, CSS or otherwise.
**note:** we are still in the process of abstracting out these components so the API's will probably change until we are sure that all of the bootstrap components can cleanly be implemented on top of them.
If you are looking for more complete overlays, modals, or tooltips – something you can use out-of-the-box – check out React-Bootstrap, which is built using these components.
Pre `1.0.0` breaking changes happen on the `minor` bump while feature and patches accompany a `patch` bump.
[actions]: https://github.com/react-bootstrap/react-overlays/actions
[codecov]: https://codecov.io/gh/react-bootstrap/react-overlays
[codecov-badge]: https://codecov.io/gh/react-bootstrap/react-overlays/branch/master/graph/badge.svg
[test-badge]: https://github.com/react-bootstrap/react-overlays/workflows/Run%20Tests/badge.svg
[ci-badge]: https://github.com/react-bootstrap/react-overlays/workflows/CI/badge.svg
[deploy-docs-badge]: https://github.com/react-bootstrap/react-overlays/workflows/Deploy%20Documentation/badge.svg

@@ -5,3 +5,4 @@ {

"main": "../cjs/usePopper.js",
"module": "../esm/usePopper.js"
"module": "../esm/usePopper.js",
"types": "../esm/usePopper.d.ts"
}

@@ -5,3 +5,4 @@ {

"main": "../cjs/useRootClose.js",
"module": "../esm/useRootClose.js"
"module": "../esm/useRootClose.js",
"types": "../esm/useRootClose.d.ts"
}
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc