"use strict"; var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault"); exports.__esModule = true; exports["default"] = void 0; var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")); var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose")); var _react = require("react"); var _useSafeState2 = _interopRequireDefault(require("@restart/hooks/useSafeState")); var _popper = require("./popper"); var initialPopperStyles = function initialPopperStyles(position) { return { position: position, top: '0', left: '0', opacity: '0', pointerEvents: 'none' }; }; var disabledApplyStylesModifier = { name: 'applyStyles', enabled: false }; // until docjs supports type exports... var EMPTY_MODIFIERS = []; /** * Position an element relative some reference element using Popper.js * * @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$modifiers = _ref.modifiers, modifiers = _ref$modifiers === void 0 ? EMPTY_MODIFIERS : _ref$modifiers, config = (0, _objectWithoutPropertiesLoose2["default"])(_ref, ["enabled", "placement", "strategy", "modifiers"]); var popperInstanceRef = (0, _react.useRef)(); var update = (0, _react.useCallback)(function () { var _popperInstanceRef$cu; (_popperInstanceRef$cu = popperInstanceRef.current) == null ? void 0 : _popperInstanceRef$cu.update(); }, []); var forceUpdate = (0, _react.useCallback)(function () { var _popperInstanceRef$cu2; (_popperInstanceRef$cu2 = popperInstanceRef.current) == null ? void 0 : _popperInstanceRef$cu2.forceUpdate(); }, []); var _useSafeState = (0, _useSafeState2["default"])((0, _react.useState)({ placement: placement, update: update, forceUpdate: forceUpdate, attributes: {}, styles: { popper: initialPopperStyles(strategy), arrow: {} } })), popperState = _useSafeState[0], setState = _useSafeState[1]; var updateModifier = (0, _react.useMemo)(function () { return { name: 'updateStateModifier', enabled: true, phase: 'write', requires: ['computeStyles'], fn: function fn(_ref2) { var state = _ref2.state; var styles = {}; var attributes = {}; Object.keys(state.elements).forEach(function (element) { styles[element] = state.styles[element]; attributes[element] = state.attributes[element]; }); setState({ state: state, styles: styles, attributes: attributes, update: update, forceUpdate: forceUpdate, placement: state.placement }); } }; }, [update, forceUpdate, setState]); (0, _react.useEffect)(function () { if (!popperInstanceRef.current || !enabled) return; popperInstanceRef.current.setOptions({ placement: placement, strategy: strategy, modifiers: [].concat(modifiers, [updateModifier, disabledApplyStylesModifier]) }); // intentionally NOT re-running on new modifiers // eslint-disable-next-line react-hooks/exhaustive-deps }, [strategy, placement, updateModifier, enabled]); (0, _react.useEffect)(function () { if (!enabled || referenceElement == null || popperElement == null) { return undefined; } popperInstanceRef.current = (0, _popper.createPopper)(referenceElement, popperElement, (0, _extends2["default"])({}, config, { placement: placement, strategy: strategy, modifiers: [].concat(modifiers, [updateModifier]) })); return function () { if (popperInstanceRef.current != null) { popperInstanceRef.current.destroy(); popperInstanceRef.current = undefined; setState(function (s) { return (0, _extends2["default"])({}, s, { attributes: {}, styles: { popper: initialPopperStyles(strategy) } }); }); } }; // This is only run once to _create_ the popper // eslint-disable-next-line react-hooks/exhaustive-deps }, [enabled, referenceElement, popperElement]); return popperState; } var _default = usePopper; exports["default"] = _default; module.exports = exports.default;