react-floater - npm Package Compare versions

Comparing version 0.7.3 to 0.8.0-0

lib/index.js

@@ -1,238 +0,462 @@
-'use strict';
-
-function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
-
-var React = _interopDefault(require('react'));
-var PropTypes = _interopDefault(require('prop-types'));
-var isRequiredIf = _interopDefault(require('react-proptype-conditional-require'));
-var Popper = _interopDefault(require('popper.js'));
-var deepmerge = _interopDefault(require('deepmerge'));
-var is = _interopDefault(require('is-lite'));
-var treeChanges = _interopDefault(require('tree-changes'));
-var ReactDOM = _interopDefault(require('react-dom'));
-var ExecutionEnvironment = _interopDefault(require('exenv'));
-
-function ownKeys(object, enumerableOnly) {
-  var keys = Object.keys(object);
-
-  if (Object.getOwnPropertySymbols) {
-    var symbols = Object.getOwnPropertySymbols(object);
-
-    if (enumerableOnly) {
-      symbols = symbols.filter(function (sym) {
-        return Object.getOwnPropertyDescriptor(object, sym).enumerable;
-      });
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
     }
-
-    keys.push.apply(keys, symbols);
-  }
-
-  return keys;
-}
-
-function _objectSpread2(target) {
-  for (var i = 1; i < arguments.length; i++) {
-    var source = arguments[i] != null ? arguments[i] : {};
-
-    if (i % 2) {
-      ownKeys(Object(source), true).forEach(function (key) {
-        _defineProperty(target, key, source[key]);
-      });
-    } else if (Object.getOwnPropertyDescriptors) {
-      Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
-    } else {
-      ownKeys(Object(source)).forEach(function (key) {
-        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
-      });
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
     }
-  }
-
-  return target;
-}
-
-function _classCallCheck(instance, Constructor) {
-  if (!(instance instanceof Constructor)) {
-    throw new TypeError("Cannot call a class as a function");
-  }
-}
-
-function _defineProperties(target, props) {
-  for (var i = 0; i < props.length; i++) {
-    var descriptor = props[i];
-    descriptor.enumerable = descriptor.enumerable || false;
-    descriptor.configurable = true;
-    if ("value" in descriptor) descriptor.writable = true;
-    Object.defineProperty(target, descriptor.key, descriptor);
-  }
-}
-
-function _createClass(Constructor, protoProps, staticProps) {
-  if (protoProps) _defineProperties(Constructor.prototype, protoProps);
-  if (staticProps) _defineProperties(Constructor, staticProps);
-  return Constructor;
-}
-
-function _defineProperty(obj, key, value) {
-  if (key in obj) {
-    Object.defineProperty(obj, key, {
-      value: value,
-      enumerable: true,
-      configurable: true,
-      writable: true
+    return ar;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var React = require("react");
+var core_1 = require("@popperjs/core");
+var is_lite_1 = require("is-lite");
+var tree_changes_hook_1 = require("tree-changes-hook");
+var Floater_1 = require("./components/Floater");
+var Portal_1 = require("./components/Portal");
+var Wrapper_1 = require("./components/Wrapper");
+var literals_1 = require("./literals");
+var styles_1 = require("./styles");
+var utils_1 = require("./utils");
+function ReactFloater(props) {
+    var _a = (0, utils_1.enhanceProps)(props), autoOpen = _a.autoOpen, callback = _a.callback, children = _a.children, component = _a.component, content = _a.content, debug = _a.debug, disableFlip = _a.disableFlip, disableHoverToClick = _a.disableHoverToClick, event = _a.event, eventDelay = _a.eventDelay, footer = _a.footer, getPopper = _a.getPopper, hideArrow = _a.hideArrow, id = _a.id, modifiers = _a.modifiers, offset = _a.offset, open = _a.open, placement = _a.placement, portalElement = _a.portalElement, showCloseButton = _a.showCloseButton, style = _a.style, styles = _a.styles, target = _a.target, title = _a.title, wrapperOptions = _a.wrapperOptions;
+    var _b = __read((0, utils_1.useSetState)({
+        currentPlacement: placement || 'bottom',
+        positionWrapper: !!(wrapperOptions === null || wrapperOptions === void 0 ? void 0 : wrapperOptions.position) && !!target,
+        status: literals_1.STATUS.INIT,
+        statusWrapper: literals_1.STATUS.INIT,
+    }), 2), state = _b[0], setState = _b[1];
+    var arrowRef = React.useRef(null);
+    var childRef = React.useRef(null);
+    var eventDelayTimer = React.useRef();
+    var floaterRef = React.useRef(null);
+    var internalId = React.useRef((0, utils_1.randomId)());
+    var isMounted = React.useRef(false);
+    var popperRef = React.useRef();
+    var stateRef = React.useRef(state);
+    var wrapperPopper = React.useRef();
+    var wrapperRef = React.useRef(null);
+    var wrapperStyles = React.useRef({});
+    var currentPlacement = state.currentPlacement, positionWrapper = state.positionWrapper, status = state.status, statusWrapper = state.statusWrapper;
+    var changed = (0, tree_changes_hook_1.default)(state).changed;
+    var changedProps = (0, tree_changes_hook_1.default)(props).changed;
+    var updateState = React.useCallback(function (nextState, callback_) {
+        if (isMounted.current) {
+            setState(nextState);
+            stateRef.current = __assign(__assign({}, state), nextState);
+            if (callback_) {
+                callback_();
+            }
+        }
+    }, [setState, state]);
+    var toggle = React.useCallback(function (forceStatus) {
+        var nextStatus = stateRef.current.status === literals_1.STATUS.OPEN ? literals_1.STATUS.CLOSING : literals_1.STATUS.RENDER;
+        if (!is_lite_1.default.undefined(forceStatus)) {
+            nextStatus = forceStatus;
+        }
+        updateState({
+            status: nextStatus,
+            statusWrapper: nextStatus === literals_1.STATUS.CLOSING ? literals_1.STATUS.RENDER : literals_1.STATUS.IDLE,
+        });
+    }, [updateState]);
+    var targetElement = React.useRef(function () {
+        if (!utils_1.canUseDOM) {
+            return null;
+        }
+        if (target) {
+            if (is_lite_1.default.domElement(target)) {
+                return target;
+            }
+            return document.querySelector(target);
+        }
+        return childRef.current || wrapperRef.current;
     });
-  } else {
-    obj[key] = value;
-  }
-
-  return obj;
+    var currentDebug = React.useMemo(function () {
+        return debug || utils_1.canUseDOM ? !!window.ReactFloaterDebug : false;
+    }, [debug]);
+    var currentEvent = React.useMemo(function () {
+        if (event === 'hover' && (0, utils_1.isMobile)() && !disableHoverToClick) {
+            return 'click';
+        }
+        return event;
+    }, [disableHoverToClick, event]);
+    var currentStyles = React.useMemo(function () {
+        var _a;
+        var nextStyles = (0, styles_1.default)(styles);
+        var element = targetElement.current();
+        if (positionWrapper) {
+            var wrapperCurrentStyles = void 0;
+            if (status !== literals_1.STATUS.IDLE) {
+                wrapperCurrentStyles = nextStyles.wrapperPosition;
+            }
+            else if (statusWrapper === literals_1.STATUS.RENDER) {
+                wrapperCurrentStyles = (_a = wrapperPopper.current) === null || _a === void 0 ? void 0 : _a.state.styles;
+            }
+            nextStyles.wrapper = __assign(__assign({}, nextStyles.wrapper), wrapperCurrentStyles);
+        }
+        /* istanbul ignore else */
+        if (element) {
+            var targetStyles_1 = window.getComputedStyle(element);
+            /* istanbul ignore else */
+            if (wrapperStyles.current) {
+                nextStyles.wrapper = __assign(__assign({}, nextStyles.wrapper), wrapperStyles.current);
+            }
+            else if (!['relative', 'static'].includes(targetStyles_1.position)) {
+                wrapperStyles.current = {};
+                if (!positionWrapper) {
+                    literals_1.POSITIONING_PROPS.forEach(function (d) {
+                        if (d === 'position') {
+                            wrapperStyles.current[d] = targetStyles_1[d];
+                        }
+                        else {
+                            wrapperStyles.current[d] = targetStyles_1[d];
+                        }
+                    });
+                    nextStyles.wrapper = __assign(__assign({}, nextStyles.wrapper), wrapperStyles.current);
+                }
+            }
+        }
+        return nextStyles;
+    }, [positionWrapper, status, statusWrapper, styles]);
+    var cleanUp = React.useRef(function () {
+        if (popperRef.current) {
+            popperRef.current.destroy();
+        }
+        if (wrapperPopper.current) {
+            wrapperPopper.current.destroy();
+        }
+    });
+    var initPopper = React.useRef(function () {
+        var nextStatus = stateRef.current.status === literals_1.STATUS.RENDER ? literals_1.STATUS.OPENING : literals_1.STATUS.IDLE;
+        var element = targetElement.current();
+        /* istanbul ignore else */
+        if (placement === 'center') {
+            setTimeout(function () {
+                updateState({ status: nextStatus });
+            }, 100);
+        }
+        else if (element) {
+            if (floaterRef.current) {
+                var _a = (0, utils_1.getModifiers)(modifiers), arrow = _a.arrow, flip = _a.flip, offsetModifier = _a.offset, rest = __rest(_a, ["arrow", "flip", "offset"]);
+                popperRef.current = (0, core_1.createPopper)(element, floaterRef.current, {
+                    placement: placement,
+                    strategy: (0, utils_1.isFixed)(childRef.current) ? 'fixed' : 'absolute',
+                    modifiers: __spreadArray([
+                        (0, utils_1.mergeModifier)({
+                            name: 'arrow',
+                            enabled: !hideArrow,
+                            options: {
+                                element: arrowRef.current,
+                                padding: 8,
+                            },
+                        }, arrow),
+                        (0, utils_1.mergeModifier)({
+                            name: 'flip',
+                            enabled: !disableFlip,
+                            options: {
+                                altAxis: false,
+                                fallbackPlacements: (0, utils_1.getFallbackPlacements)(placement || 'bottom'),
+                            },
+                        }, flip),
+                        (0, utils_1.mergeModifier)({
+                            name: 'offset',
+                            options: {
+                                offset: [0, offset],
+                            },
+                        }, offsetModifier),
+                        {
+                            name: 'updatePlacement',
+                            enabled: true,
+                            phase: 'afterWrite',
+                            fn: function (_a) {
+                                var instance = _a.instance, popperState = _a.state;
+                                if (popperState.placement !== stateRef.current.currentPlacement) {
+                                    popperRef.current = instance;
+                                    updateState({ currentPlacement: popperState.placement });
+                                }
+                            },
+                        },
+                        {
+                            name: 'applyArrowStyle',
+                            enabled: true,
+                            phase: 'write',
+                            fn: function (_a) {
+                                var popperState = _a.state;
+                                var stateArrow = popperState.elements.arrow, statePlacement = popperState.placement;
+                                if (stateArrow) {
+                                    if (statePlacement.startsWith('top')) {
+                                        stateArrow.style.bottom = '0px';
+                                        stateArrow.style.right = '';
+                                    }
+                                    else if (statePlacement.startsWith('bottom')) {
+                                        stateArrow.style.top = '0px';
+                                        stateArrow.style.right = '';
+                                    }
+                                    else if (statePlacement.startsWith('left')) {
+                                        stateArrow.style.right = '0px';
+                                        stateArrow.style.bottom = '';
+                                    }
+                                    else if (statePlacement.startsWith('right')) {
+                                        stateArrow.style.left = '0px';
+                                        stateArrow.style.bottom = '';
+                                    }
+                                }
+                            },
+                        }
+                    ], __read((rest ? Object.values(rest) : [])), false),
+                    onFirstUpdate: function (popperState) {
+                        updateState({
+                            currentPlacement: popperState.placement,
+                            status: nextStatus,
+                        });
+                        if (placement !== popperState.placement) {
+                            setTimeout(function () {
+                                var _a;
+                                (_a = popperRef.current) === null || _a === void 0 ? void 0 : _a.forceUpdate();
+                            });
+                        }
+                    },
+                });
+                if (getPopper && popperRef.current) {
+                    getPopper(popperRef.current, 'floater');
+                }
+            }
+            else {
+                updateState({
+                    status: literals_1.STATUS.IDLE,
+                });
+            }
+        }
+        if (!wrapperPopper.current &&
+            stateRef.current.positionWrapper &&
+            element &&
+            wrapperRef.current &&
+            placement !== 'center') {
+            var wrapperOffset = (wrapperOptions === null || wrapperOptions === void 0 ? void 0 : wrapperOptions.offset) ? wrapperOptions.offset : 0;
+            wrapperPopper.current = (0, core_1.createPopper)(element, wrapperRef.current, {
+                placement: (wrapperOptions === null || wrapperOptions === void 0 ? void 0 : wrapperOptions.placement) || placement,
+                modifiers: [
+                    {
+                        name: 'arrow',
+                        enabled: false,
+                    },
+                    {
+                        name: 'offset',
+                        options: {
+                            offset: [0, wrapperOffset],
+                        },
+                    },
+                    {
+                        name: 'flip',
+                        enabled: false,
+                    },
+                ],
+                onFirstUpdate: function (popperState) {
+                    updateState({ statusWrapper: literals_1.STATUS.RENDER });
+                    if (placement !== popperState.placement) {
+                        setTimeout(function () {
+                            var _a;
+                            (_a = wrapperPopper.current) === null || _a === void 0 ? void 0 : _a.forceUpdate();
+                        });
+                    }
+                },
+            });
+            if (getPopper) {
+                getPopper(wrapperPopper.current, 'wrapper');
+            }
+        }
+    });
+    var handleLoad = React.useRef(function () {
+        if (popperRef.current) {
+            popperRef.current.forceUpdate();
+        }
+        if (wrapperPopper.current) {
+            wrapperPopper.current.forceUpdate();
+        }
+    });
+    var handleTransitionEnd = React.useRef(function () {
+        /* istanbul ignore else */
+        if (wrapperPopper.current) {
+            wrapperPopper.current.forceUpdate();
+        }
+        updateState({
+            status: stateRef.current.status === literals_1.STATUS.OPENING ? literals_1.STATUS.OPEN : literals_1.STATUS.IDLE,
+        }, function () {
+            if (callback) {
+                callback(stateRef.current.status === literals_1.STATUS.OPEN ? 'open' : 'close', (0, utils_1.enhanceProps)(props));
+            }
+        });
+    });
+    var handleClick = React.useCallback(function () {
+        if (is_lite_1.default.boolean(open)) {
+            return;
+        }
+        /* istanbul ignore else */
+        if (currentEvent === 'click' || (currentEvent === 'hover' && positionWrapper)) {
+            (0, utils_1.log)({
+                title: 'click',
+                data: [{ event: event, status: status === literals_1.STATUS.OPEN ? 'closing' : 'opening' }],
+                debug: currentDebug,
+            });
+            toggle(status === 'idle' ? literals_1.STATUS.RENDER : undefined);
+        }
+    }, [currentDebug, currentEvent, event, open, positionWrapper, status, toggle]);
+    var handleMouseEnter = React.useCallback(function () {
+        if (is_lite_1.default.boolean(open) || (0, utils_1.isMobile)() || currentEvent !== 'hover') {
+            return;
+        }
+        (0, utils_1.log)({
+            title: 'mouseEnter',
+            data: [{ key: 'originalEvent', value: event }],
+            debug: currentDebug,
+        });
+        if (status === literals_1.STATUS.IDLE) {
+            clearTimeout(eventDelayTimer.current);
+            eventDelayTimer.current = undefined;
+            toggle(literals_1.STATUS.RENDER);
+        }
+    }, [currentDebug, currentEvent, event, open, status, toggle]);
+    var handleMouseLeave = React.useCallback(function () {
+        if (is_lite_1.default.boolean(open) || (0, utils_1.isMobile)()) {
+            return;
+        }
+        /* istanbul ignore else */
+        if (currentEvent === 'hover') {
+            (0, utils_1.log)({
+                title: 'mouseLeave',
+                data: [{ key: 'originalEvent', value: event }],
+                debug: currentDebug,
+            });
+            var hasOpenStatus = [literals_1.STATUS.OPENING, literals_1.STATUS.OPEN].includes(status);
+            if (!eventDelay) {
+                toggle(status === literals_1.STATUS.CLOSING ? literals_1.STATUS.IDLE : literals_1.STATUS.CLOSING);
+            }
+            else if (!positionWrapper) {
+                if (hasOpenStatus) {
+                    clearTimeout(eventDelayTimer.current);
+                    eventDelayTimer.current = window.setTimeout(function () {
+                        toggle();
+                        eventDelayTimer.current = undefined;
+                    }, eventDelay * 1000);
+                }
+            }
+        }
+    }, [currentDebug, currentEvent, event, eventDelay, open, positionWrapper, status, toggle]);
+    // Handle mount/unmount
+    React.useEffect(function () {
+        var cleanUpFn = cleanUp.current;
+        var handleLoadFn = handleLoad.current;
+        isMounted.current = true;
+        (0, utils_1.log)({
+            title: 'init',
+            data: {
+                hasChildren: !!children,
+                hasTarget: !!target,
+                isControlled: is_lite_1.default.boolean(open),
+                positionWrapper: positionWrapper,
+                target: targetElement.current(),
+                floater: floaterRef.current,
+            },
+            debug: currentDebug,
+        });
+        initPopper.current();
+        return function () {
+            isMounted.current = false;
+            cleanUpFn();
+            window.removeEventListener('load', handleLoadFn);
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    // handle changes
+    (0, utils_1.useUpdateEffect)(function () {
+        var _a;
+        if (!utils_1.canUseDOM) {
+            return;
+        }
+        if (changedProps('open')) {
+            var forceStatus = void 0;
+            // always follow `open` in controlled mode
+            if (is_lite_1.default.boolean(open)) {
+                forceStatus = open ? literals_1.STATUS.RENDER : literals_1.STATUS.CLOSING;
+            }
+            toggle(forceStatus);
+        }
+        if (changedProps('wrapperOptions.position') || changedProps('target')) {
+            updateState({
+                positionWrapper: !!(wrapperOptions === null || wrapperOptions === void 0 ? void 0 : wrapperOptions.position) && !!target,
+            });
+        }
+        if ((changed('status', literals_1.STATUS.IDLE) && open) ||
+            (changed('status', literals_1.STATUS.IDLE, literals_1.STATUS.INIT) && autoOpen)) {
+            toggle(literals_1.STATUS.RENDER);
+        }
+        if (changed('status', literals_1.STATUS.RENDER)) {
+            if (popperRef.current) {
+                (_a = popperRef.current) === null || _a === void 0 ? void 0 : _a.destroy();
+            }
+            initPopper.current();
+        }
+        if (floaterRef.current && changed('status', [literals_1.STATUS.RENDER, literals_1.STATUS.CLOSING])) {
+            (0, utils_1.once)(floaterRef.current, 'transitionend', handleTransitionEnd.current);
+        }
+        if (changed('status', literals_1.STATUS.IDLE, literals_1.STATUS.CLOSING) && popperRef.current) {
+            popperRef.current.destroy();
+            popperRef.current = undefined;
+            if (wrapperPopper.current) {
+                wrapperPopper.current.forceUpdate();
+            }
+        }
+    });
+    (0, utils_1.useSingleton)(function () {
+        if (utils_1.canUseDOM) {
+            window.addEventListener('load', handleLoad.current);
+        }
+    });
+    var wrapper = (React.createElement(Wrapper_1.default, { childRef: childRef, id: id || internalId.current, isControlled: is_lite_1.default.boolean(open), onClick: handleClick, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, status: status, style: style, styles: currentStyles.wrapper, wrapperRef: wrapperRef }, children));
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Portal_1.default, { hasChildren: !!children, placement: currentPlacement, portalElement: portalElement, target: target, zIndex: currentStyles.options.zIndex },
+            React.createElement(Floater_1.default, { arrowRef: arrowRef, component: component, content: content, floaterRef: floaterRef, footer: footer, hideArrow: hideArrow || currentPlacement === 'center', id: id || internalId.current, onClick: handleClick, placement: currentPlacement, positionWrapper: positionWrapper, showCloseButton: showCloseButton, status: status, styles: currentStyles, title: title }),
+            positionWrapper && wrapper),
+        !positionWrapper && wrapper));
 }
-
-function _inherits(subClass, superClass) {
-  if (typeof superClass !== "function" && superClass !== null) {
-    throw new TypeError("Super expression must either be null or a function");
-  }
-
-  subClass.prototype = Object.create(superClass && superClass.prototype, {
-    constructor: {
-      value: subClass,
-      writable: true,
-      configurable: true
-    }
-  });
-  if (superClass) _setPrototypeOf(subClass, superClass);
-}
-
-function _getPrototypeOf(o) {
-  _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {
-    return o.__proto__ || Object.getPrototypeOf(o);
-  };
-  return _getPrototypeOf(o);
-}
-
-function _setPrototypeOf(o, p) {
-  _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
-    o.__proto__ = p;
-    return o;
-  };
-
-  return _setPrototypeOf(o, p);
-}
-
-function _isNativeReflectConstruct() {
-  if (typeof Reflect === "undefined" || !Reflect.construct) return false;
-  if (Reflect.construct.sham) return false;
-  if (typeof Proxy === "function") return true;
-
-  try {
-    Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {}));
-    return true;
-  } catch (e) {
-    return false;
-  }
-}
-
-function _objectWithoutPropertiesLoose(source, excluded) {
-  if (source == null) return {};
-  var target = {};
-  var sourceKeys = Object.keys(source);
-  var key, i;
-
-  for (i = 0; i < sourceKeys.length; i++) {
-    key = sourceKeys[i];
-    if (excluded.indexOf(key) >= 0) continue;
-    target[key] = source[key];
-  }
-
-  return target;
-}
-
-function _objectWithoutProperties(source, excluded) {
-  if (source == null) return {};
-
-  var target = _objectWithoutPropertiesLoose(source, excluded);
-
-  var key, i;
-
-  if (Object.getOwnPropertySymbols) {
-    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
-
-    for (i = 0; i < sourceSymbolKeys.length; i++) {
-      key = sourceSymbolKeys[i];
-      if (excluded.indexOf(key) >= 0) continue;
-      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
-      target[key] = source[key];
-    }
-  }
-
-  return target;
-}
-
-function _assertThisInitialized(self) {
-  if (self === void 0) {
-    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
-  }
-
-  return self;
-}
-
-function _possibleConstructorReturn(self, call) {
-  if (call && (typeof call === "object" || typeof call === "function")) {
-    return call;
-  }
-
-  return _assertThisInitialized(self);
-}
-
-function _createSuper(Derived) {
-  var hasNativeReflectConstruct = _isNativeReflectConstruct();
-
-  return function _createSuperInternal() {
-    var Super = _getPrototypeOf(Derived),
-        result;
-
-    if (hasNativeReflectConstruct) {
-      var NewTarget = _getPrototypeOf(this).constructor;
-
-      result = Reflect.construct(Super, arguments, NewTarget);
-    } else {
-      result = Super.apply(this, arguments);
-    }
-
-    return _possibleConstructorReturn(this, result);
-  };
-}
-
-var DEFAULTS = {flip:{padding:20},preventOverflow:{padding:10}};
-
-var STATUS = {INIT:'init',IDLE:'idle',OPENING:'opening',OPEN:'open',CLOSING:'closing',ERROR:'error'};
-
-var canUseDOM=ExecutionEnvironment.canUseDOM;var isReact16=ReactDOM.createPortal!==undefined;function isMobile(){return 'ontouchstart'in window&&/Mobi/.test(navigator.userAgent);}/**
- * Log method calls if debug is enabled
- *
- * @private
- * @param {Object}       arg
- * @param {string}       arg.title    - The title the logger was called from
- * @param {Object|Array} [arg.data]   - The data to be logged
- * @param {boolean}      [arg.warn]  - If true, the message will be a warning
- * @param {boolean}      [arg.debug] - Nothing will be logged unless debug is true
- */function log(_ref){var title=_ref.title,data=_ref.data,_ref$warn=_ref.warn,warn=_ref$warn===void 0?false:_ref$warn,_ref$debug=_ref.debug,debug=_ref$debug===void 0?false:_ref$debug;/* eslint-disable no-console */var logFn=warn?console.warn||console.error:console.log;if(debug&&title&&data){console.groupCollapsed("%creact-floater: ".concat(title),'color: #9b00ff; font-weight: bold; font-size: 12px;');if(Array.isArray(data)){data.forEach(function(d){if(is.plainObject(d)&&d.key){logFn.apply(console,[d.key,d.value]);}else {logFn.apply(console,[d]);}});}else {logFn.apply(console,[data]);}console.groupEnd();}/* eslint-enable */}function on(element,event,cb){var capture=arguments.length>3&&arguments[3]!==undefined?arguments[3]:false;element.addEventListener(event,cb,capture);}function off(element,event,cb){var capture=arguments.length>3&&arguments[3]!==undefined?arguments[3]:false;element.removeEventListener(event,cb,capture);}function once(element,event,cb){var capture=arguments.length>3&&arguments[3]!==undefined?arguments[3]:false;var _nextCB;// eslint-disable-next-line prefer-const
-_nextCB=function nextCB(e){cb(e);off(element,event,_nextCB);};on(element,event,_nextCB,capture);}function noop(){}
-
-var ReactFloaterPortal=/*#__PURE__*/function(_React$Component){_inherits(ReactFloaterPortal,_React$Component);var _super=_createSuper(ReactFloaterPortal);function ReactFloaterPortal(props){var _this;_classCallCheck(this,ReactFloaterPortal);_this=_super.call(this,props);if(!canUseDOM)return _possibleConstructorReturn(_this);_this.node=document.createElement('div');if(props.id){_this.node.id=props.id;}if(props.zIndex){_this.node.style.zIndex=props.zIndex;}document.body.appendChild(_this.node);return _this;}_createClass(ReactFloaterPortal,[{key:"componentDidMount",value:function componentDidMount(){if(!canUseDOM)return;if(!isReact16){this.renderPortal();}}},{key:"componentDidUpdate",value:function componentDidUpdate(){if(!canUseDOM)return;if(!isReact16){this.renderPortal();}}},{key:"componentWillUnmount",value:function componentWillUnmount(){if(!canUseDOM||!this.node)return;if(!isReact16){ReactDOM.unmountComponentAtNode(this.node);}document.body.removeChild(this.node);}},{key:"renderPortal",value:function renderPortal(){if(!canUseDOM)return null;var _this$props=this.props,children=_this$props.children,setRef=_this$props.setRef;/* istanbul ignore else */if(isReact16){return/*#__PURE__*/ReactDOM.createPortal(children,this.node);}var portal=ReactDOM.unstable_renderSubtreeIntoContainer(this,children.length>1?/*#__PURE__*/React.createElement("div",null,children):children[0],this.node);setRef(portal);return null;}},{key:"renderReact16",value:function renderReact16(){var _this$props2=this.props,hasChildren=_this$props2.hasChildren,placement=_this$props2.placement,target=_this$props2.target;if(!hasChildren){if(target||placement==='center'){return this.renderPortal();}return null;}return this.renderPortal();}},{key:"render",value:function render(){if(!isReact16){return null;}return this.renderReact16();}}]);return ReactFloaterPortal;}(React.Component);_defineProperty(ReactFloaterPortal,"propTypes",{children:PropTypes.oneOfType([PropTypes.element,PropTypes.array]),hasChildren:PropTypes.bool,id:PropTypes.oneOfType([PropTypes.string,PropTypes.number]),placement:PropTypes.string,setRef:PropTypes.func.isRequired,target:PropTypes.oneOfType([PropTypes.object,PropTypes.string]),zIndex:PropTypes.number});
-
-var FloaterArrow=/*#__PURE__*/function(_React$Component){_inherits(FloaterArrow,_React$Component);var _super=_createSuper(FloaterArrow);function FloaterArrow(){_classCallCheck(this,FloaterArrow);return _super.apply(this,arguments);}_createClass(FloaterArrow,[{key:"parentStyle",get:function get(){var _this$props=this.props,placement=_this$props.placement,styles=_this$props.styles;var length=styles.arrow.length;var arrow={pointerEvents:'none',position:'absolute',width:'100%'};/* istanbul ignore else */if(placement.startsWith('top')){arrow.bottom=0;arrow.left=0;arrow.right=0;arrow.height=length;}else if(placement.startsWith('bottom')){arrow.left=0;arrow.right=0;arrow.top=0;arrow.height=length;}else if(placement.startsWith('left')){arrow.right=0;arrow.top=0;arrow.bottom=0;}else if(placement.startsWith('right')){arrow.left=0;arrow.top=0;}return arrow;}},{key:"render",value:function render(){var _this$props2=this.props,placement=_this$props2.placement,setArrowRef=_this$props2.setArrowRef,styles=_this$props2.styles;var _styles$arrow=styles.arrow,color=_styles$arrow.color,display=_styles$arrow.display,length=_styles$arrow.length,margin=_styles$arrow.margin,position=_styles$arrow.position,spread=_styles$arrow.spread;var arrowStyles={display:display,position:position};var points;var x=spread;var y=length;/* istanbul ignore else */if(placement.startsWith('top')){points="0,0 ".concat(x/2,",").concat(y," ").concat(x,",0");arrowStyles.bottom=0;arrowStyles.marginLeft=margin;arrowStyles.marginRight=margin;}else if(placement.startsWith('bottom')){points="".concat(x,",").concat(y," ").concat(x/2,",0 0,").concat(y);arrowStyles.top=0;arrowStyles.marginLeft=margin;arrowStyles.marginRight=margin;}else if(placement.startsWith('left')){y=spread;x=length;points="0,0 ".concat(x,",").concat(y/2," 0,").concat(y);arrowStyles.right=0;arrowStyles.marginTop=margin;arrowStyles.marginBottom=margin;}else if(placement.startsWith('right')){y=spread;x=length;points="".concat(x,",").concat(y," ").concat(x,",0 0,").concat(y/2);arrowStyles.left=0;arrowStyles.marginTop=margin;arrowStyles.marginBottom=margin;}return/*#__PURE__*/React.createElement("div",{className:"__floater__arrow",style:this.parentStyle},/*#__PURE__*/React.createElement("span",{ref:setArrowRef,style:arrowStyles},/*#__PURE__*/React.createElement("svg",{width:x,height:y,version:"1.1",xmlns:"http://www.w3.org/2000/svg"},/*#__PURE__*/React.createElement("polygon",{points:points,fill:color}))));}}]);return FloaterArrow;}(React.Component);_defineProperty(FloaterArrow,"propTypes",{placement:PropTypes.string.isRequired,setArrowRef:PropTypes.func.isRequired,styles:PropTypes.object.isRequired});
-
-var _excluded=["color","height","width"];var FloaterCloseBtn=function FloaterCloseBtn(_ref){var handleClick=_ref.handleClick,styles=_ref.styles;var color=styles.color,height=styles.height,width=styles.width,style=_objectWithoutProperties(styles,_excluded);return/*#__PURE__*/React.createElement("button",{"aria-label":"close",onClick:handleClick,style:style,type:"button"},/*#__PURE__*/React.createElement("svg",{width:"".concat(width,"px"),height:"".concat(height,"px"),viewBox:"0 0 18 18",version:"1.1",xmlns:"http://www.w3.org/2000/svg",preserveAspectRatio:"xMidYMid"},/*#__PURE__*/React.createElement("g",null,/*#__PURE__*/React.createElement("path",{d:"M8.13911129,9.00268191 L0.171521827,17.0258467 C-0.0498027049,17.248715 -0.0498027049,17.6098394 0.171521827,17.8327545 C0.28204354,17.9443526 0.427188206,17.9998706 0.572051765,17.9998706 C0.71714958,17.9998706 0.862013139,17.9443526 0.972581703,17.8327545 L9.0000937,9.74924618 L17.0276057,17.8327545 C17.1384085,17.9443526 17.2832721,17.9998706 17.4281356,17.9998706 C17.5729992,17.9998706 17.718097,17.9443526 17.8286656,17.8327545 C18.0499901,17.6098862 18.0499901,17.2487618 17.8286656,17.0258467 L9.86135722,9.00268191 L17.8340066,0.973848225 C18.0553311,0.750979934 18.0553311,0.389855532 17.8340066,0.16694039 C17.6126821,-0.0556467968 17.254037,-0.0556467968 17.0329467,0.16694039 L9.00042166,8.25611765 L0.967006424,0.167268345 C0.745681892,-0.0553188426 0.387317931,-0.0553188426 0.165993399,0.167268345 C-0.0553311331,0.390136635 -0.0553311331,0.751261038 0.165993399,0.974176179 L8.13920499,9.00268191 L8.13911129,9.00268191 Z",fill:color}))));};FloaterCloseBtn.propTypes={handleClick:PropTypes.func.isRequired,styles:PropTypes.object.isRequired};
-
-var FloaterContainer=function FloaterContainer(_ref){var content=_ref.content,footer=_ref.footer,handleClick=_ref.handleClick,open=_ref.open,positionWrapper=_ref.positionWrapper,showCloseButton=_ref.showCloseButton,title=_ref.title,styles=_ref.styles;var output={content:/*#__PURE__*/React.isValidElement(content)?content:/*#__PURE__*/React.createElement("div",{className:"__floater__content",style:styles.content},content)};if(title){output.title=/*#__PURE__*/React.isValidElement(title)?title:/*#__PURE__*/React.createElement("div",{className:"__floater__title",style:styles.title},title);}if(footer){output.footer=/*#__PURE__*/React.isValidElement(footer)?footer:/*#__PURE__*/React.createElement("div",{className:"__floater__footer",style:styles.footer},footer);}if((showCloseButton||positionWrapper)&&!is["boolean"](open)){output.close=/*#__PURE__*/React.createElement(FloaterCloseBtn,{styles:styles.close,handleClick:handleClick});}return/*#__PURE__*/React.createElement("div",{className:"__floater__container",style:styles.container},output.close,output.title,output.content,output.footer);};FloaterContainer.propTypes={content:PropTypes.node.isRequired,footer:PropTypes.node,handleClick:PropTypes.func.isRequired,open:PropTypes.bool,positionWrapper:PropTypes.bool.isRequired,showCloseButton:PropTypes.bool.isRequired,styles:PropTypes.object.isRequired,title:PropTypes.node};
-
-var Floater=/*#__PURE__*/function(_React$Component){_inherits(Floater,_React$Component);var _super=_createSuper(Floater);function Floater(){_classCallCheck(this,Floater);return _super.apply(this,arguments);}_createClass(Floater,[{key:"style",get:function get(){var _this$props=this.props,disableAnimation=_this$props.disableAnimation,component=_this$props.component,placement=_this$props.placement,hideArrow=_this$props.hideArrow,status=_this$props.status,styles=_this$props.styles;var length=styles.arrow.length,floater=styles.floater,floaterCentered=styles.floaterCentered,floaterClosing=styles.floaterClosing,floaterOpening=styles.floaterOpening,floaterWithAnimation=styles.floaterWithAnimation,floaterWithComponent=styles.floaterWithComponent;var element={};if(!hideArrow){if(placement.startsWith('top')){element.padding="0 0 ".concat(length,"px");}else if(placement.startsWith('bottom')){element.padding="".concat(length,"px 0 0");}else if(placement.startsWith('left')){element.padding="0 ".concat(length,"px 0 0");}else if(placement.startsWith('right')){element.padding="0 0 0 ".concat(length,"px");}}if([STATUS.OPENING,STATUS.OPEN].indexOf(status)!==-1){element=_objectSpread2(_objectSpread2({},element),floaterOpening);}if(status===STATUS.CLOSING){element=_objectSpread2(_objectSpread2({},element),floaterClosing);}if(status===STATUS.OPEN&&!disableAnimation){element=_objectSpread2(_objectSpread2({},element),floaterWithAnimation);}if(placement==='center'){element=_objectSpread2(_objectSpread2({},element),floaterCentered);}if(component){element=_objectSpread2(_objectSpread2({},element),floaterWithComponent);}return _objectSpread2(_objectSpread2({},floater),element);}},{key:"render",value:function render(){var _this$props2=this.props,component=_this$props2.component,closeFn=_this$props2.handleClick,hideArrow=_this$props2.hideArrow,setFloaterRef=_this$props2.setFloaterRef,status=_this$props2.status;var output={};var classes=['__floater'];if(component){if(/*#__PURE__*/React.isValidElement(component)){output.content=/*#__PURE__*/React.cloneElement(component,{closeFn:closeFn});}else {output.content=component({closeFn:closeFn});}}else {output.content=/*#__PURE__*/React.createElement(FloaterContainer,this.props);}if(status===STATUS.OPEN){classes.push('__floater__open');}if(!hideArrow){output.arrow=/*#__PURE__*/React.createElement(FloaterArrow,this.props);}return/*#__PURE__*/React.createElement("div",{ref:setFloaterRef,className:classes.join(' '),style:this.style},/*#__PURE__*/React.createElement("div",{className:"__floater__body"},output.content,output.arrow));}}]);return Floater;}(React.Component);_defineProperty(Floater,"propTypes",{component:PropTypes.oneOfType([PropTypes.func,PropTypes.element]),content:PropTypes.node,disableAnimation:PropTypes.bool.isRequired,footer:PropTypes.node,handleClick:PropTypes.func.isRequired,hideArrow:PropTypes.bool.isRequired,open:PropTypes.bool,placement:PropTypes.string.isRequired,positionWrapper:PropTypes.bool.isRequired,setArrowRef:PropTypes.func.isRequired,setFloaterRef:PropTypes.func.isRequired,showCloseButton:PropTypes.bool,status:PropTypes.string.isRequired,styles:PropTypes.object.isRequired,title:PropTypes.node});
-
-var ReactFloaterWrapper=/*#__PURE__*/function(_React$Component){_inherits(ReactFloaterWrapper,_React$Component);var _super=_createSuper(ReactFloaterWrapper);function ReactFloaterWrapper(){_classCallCheck(this,ReactFloaterWrapper);return _super.apply(this,arguments);}_createClass(ReactFloaterWrapper,[{key:"render",value:function render(){var _this$props=this.props,children=_this$props.children,handleClick=_this$props.handleClick,handleMouseEnter=_this$props.handleMouseEnter,handleMouseLeave=_this$props.handleMouseLeave,setChildRef=_this$props.setChildRef,setWrapperRef=_this$props.setWrapperRef,style=_this$props.style,styles=_this$props.styles;var element;/* istanbul ignore else */if(children){if(React.Children.count(children)===1){if(!/*#__PURE__*/React.isValidElement(children)){element=/*#__PURE__*/React.createElement("span",null,children);}else {var refProp=is["function"](children.type)?'innerRef':'ref';element=/*#__PURE__*/React.cloneElement(React.Children.only(children),_defineProperty({},refProp,setChildRef));}}else {element=children;}}if(!element){return null;}return/*#__PURE__*/React.createElement("span",{ref:setWrapperRef,style:_objectSpread2(_objectSpread2({},styles),style),onClick:handleClick,onMouseEnter:handleMouseEnter,onMouseLeave:handleMouseLeave},element);}}]);return ReactFloaterWrapper;}(React.Component);_defineProperty(ReactFloaterWrapper,"propTypes",{children:PropTypes.node,handleClick:PropTypes.func.isRequired,handleMouseEnter:PropTypes.func.isRequired,handleMouseLeave:PropTypes.func.isRequired,setChildRef:PropTypes.func.isRequired,setWrapperRef:PropTypes.func.isRequired,style:PropTypes.object,styles:PropTypes.object.isRequired});
-
-var defaultOptions={zIndex:100};function getStyles(styles){var options=deepmerge(defaultOptions,styles.options||{});return {wrapper:{cursor:'help',display:'inline-flex',flexDirection:'column',zIndex:options.zIndex},wrapperPosition:{left:-1000,position:'absolute',top:-1000,visibility:'hidden'},floater:{display:'inline-block',filter:'drop-shadow(0 0 3px rgba(0, 0, 0, 0.3))',maxWidth:300,opacity:0,position:'relative',transition:'opacity 0.3s',visibility:'hidden',zIndex:options.zIndex},floaterOpening:{opacity:1,visibility:'visible'},floaterWithAnimation:{opacity:1,transition:'opacity 0.3s, transform 0.2s',visibility:'visible'},floaterWithComponent:{maxWidth:'100%'},floaterClosing:{opacity:0,visibility:'visible'},floaterCentered:{left:'50%',position:'fixed',top:'50%',transform:'translate(-50%, -50%)'},container:{backgroundColor:'#fff',color:'#666',minHeight:60,minWidth:200,padding:20,position:'relative',zIndex:10},title:{borderBottom:'1px solid #555',color:'#555',fontSize:18,marginBottom:5,paddingBottom:6,paddingRight:18},content:{fontSize:15},close:{backgroundColor:'transparent',border:0,borderRadius:0,color:'#555',fontSize:0,height:15,outline:'none',padding:10,position:'absolute',right:0,top:0,width:15,WebkitAppearance:'none'},footer:{borderTop:'1px solid #ccc',fontSize:13,marginTop:10,paddingTop:5},arrow:{color:'#fff',display:'inline-flex',length:16,margin:8,position:'absolute',spread:32},options:options};}
-
-var _excluded$1=["arrow","flip","offset"];var POSITIONING_PROPS=['position','top','right','bottom','left'];var ReactFloater=/*#__PURE__*/function(_React$Component){_inherits(ReactFloater,_React$Component);var _super=_createSuper(ReactFloater);function ReactFloater(props){var _this;_classCallCheck(this,ReactFloater);_this=_super.call(this,props);/* istanbul ignore else */_defineProperty(_assertThisInitialized(_this),"setArrowRef",function(ref){_this.arrowRef=ref;});_defineProperty(_assertThisInitialized(_this),"setChildRef",function(ref){_this.childRef=ref;});_defineProperty(_assertThisInitialized(_this),"setFloaterRef",function(ref){if(!_this.floaterRef){_this.floaterRef=ref;}});_defineProperty(_assertThisInitialized(_this),"setWrapperRef",function(ref){_this.wrapperRef=ref;});_defineProperty(_assertThisInitialized(_this),"handleTransitionEnd",function(){var status=_this.state.status;var callback=_this.props.callback;/* istanbul ignore else */if(_this.wrapperPopper){_this.wrapperPopper.instance.update();}_this.setState({status:status===STATUS.OPENING?STATUS.OPEN:STATUS.IDLE},function(){var newStatus=_this.state.status;callback(newStatus===STATUS.OPEN?'open':'close',_this.props);});});_defineProperty(_assertThisInitialized(_this),"handleClick",function(){var _this$props=_this.props,event=_this$props.event,open=_this$props.open;if(is["boolean"](open))return;var _this$state=_this.state,positionWrapper=_this$state.positionWrapper,status=_this$state.status;/* istanbul ignore else */if(_this.event==='click'||_this.event==='hover'&&positionWrapper){log({title:'click',data:[{event:event,status:status===STATUS.OPEN?'closing':'opening'}],debug:_this.debug});_this.toggle();}});_defineProperty(_assertThisInitialized(_this),"handleMouseEnter",function(){var _this$props2=_this.props,event=_this$props2.event,open=_this$props2.open;if(is["boolean"](open)||isMobile())return;var status=_this.state.status;/* istanbul ignore else */if(_this.event==='hover'&&status===STATUS.IDLE){log({title:'mouseEnter',data:[{key:'originalEvent',value:event}],debug:_this.debug});clearTimeout(_this.eventDelayTimeout);_this.toggle();}});_defineProperty(_assertThisInitialized(_this),"handleMouseLeave",function(){var _this$props3=_this.props,event=_this$props3.event,eventDelay=_this$props3.eventDelay,open=_this$props3.open;if(is["boolean"](open)||isMobile())return;var _this$state2=_this.state,status=_this$state2.status,positionWrapper=_this$state2.positionWrapper;/* istanbul ignore else */if(_this.event==='hover'){log({title:'mouseLeave',data:[{key:'originalEvent',value:event}],debug:_this.debug});if(!eventDelay){_this.toggle(STATUS.IDLE);}else if([STATUS.OPENING,STATUS.OPEN].indexOf(status)!==-1&&!positionWrapper&&!_this.eventDelayTimeout){_this.eventDelayTimeout=setTimeout(function(){delete _this.eventDelayTimeout;_this.toggle();},eventDelay*1000);}}});_this.state={currentPlacement:props.placement,positionWrapper:props.wrapperOptions.position&&!!props.target,status:STATUS.INIT,statusWrapper:STATUS.INIT};_this._isMounted=false;if(canUseDOM){window.addEventListener('load',function(){if(_this.popper){_this.popper.instance.update();}if(_this.wrapperPopper){_this.wrapperPopper.instance.update();}});}return _this;}_createClass(ReactFloater,[{key:"componentDidMount",value:function componentDidMount(){if(!canUseDOM)return;var positionWrapper=this.state.positionWrapper;var _this$props5=this.props,children=_this$props5.children,open=_this$props5.open,target=_this$props5.target;this._isMounted=true;log({title:'init',data:{hasChildren:!!children,hasTarget:!!target,isControlled:is["boolean"](open),positionWrapper:positionWrapper,target:this.target,floater:this.floaterRef},debug:this.debug});this.initPopper();if(!children&&target&&!is["boolean"](open));}},{key:"componentDidUpdate",value:function componentDidUpdate(prevProps,prevState){if(!canUseDOM)return;var _this$props6=this.props,autoOpen=_this$props6.autoOpen,open=_this$props6.open,target=_this$props6.target,wrapperOptions=_this$props6.wrapperOptions;var _treeChanges=treeChanges(prevState,this.state),changedFrom=_treeChanges.changedFrom,changedTo=_treeChanges.changedTo;if(prevProps.open!==open){var forceStatus;// always follow `open` in controlled mode
-if(is["boolean"](open)){forceStatus=open?STATUS.OPENING:STATUS.CLOSING;}this.toggle(forceStatus);}if(prevProps.wrapperOptions.position!==wrapperOptions.position||prevProps.target!==target){this.changeWrapperPosition(this.props);}if(changedTo('status',STATUS.IDLE)&&open){this.toggle(STATUS.OPEN);}else if(changedFrom('status',STATUS.INIT,STATUS.IDLE)&&autoOpen){this.toggle(STATUS.OPEN);}if(this.popper&&changedTo('status',STATUS.OPENING)){this.popper.instance.update();}if(this.floaterRef&&(changedTo('status',STATUS.OPENING)||changedTo('status',STATUS.CLOSING))){once(this.floaterRef,'transitionend',this.handleTransitionEnd);}}},{key:"componentWillUnmount",value:function componentWillUnmount(){if(!canUseDOM)return;this._isMounted=false;if(this.popper){this.popper.instance.destroy();}if(this.wrapperPopper){this.wrapperPopper.instance.destroy();}}},{key:"initPopper",value:function initPopper(){var _this2=this;var target=arguments.length>0&&arguments[0]!==undefined?arguments[0]:this.target;var positionWrapper=this.state.positionWrapper;var _this$props7=this.props,disableFlip=_this$props7.disableFlip,getPopper=_this$props7.getPopper,hideArrow=_this$props7.hideArrow,offset=_this$props7.offset,placement=_this$props7.placement,wrapperOptions=_this$props7.wrapperOptions;var flipBehavior=placement==='top'||placement==='bottom'?'flip':['right','bottom-end','top-end','left','top-start','bottom-start'];/* istanbul ignore else */if(placement==='center'){this.setState({status:STATUS.IDLE});}else if(target&&this.floaterRef){var _this$options=this.options,arrow=_this$options.arrow,flip=_this$options.flip,offsetOptions=_this$options.offset,rest=_objectWithoutProperties(_this$options,_excluded$1);new Popper(target,this.floaterRef,{placement:placement,modifiers:_objectSpread2({arrow:_objectSpread2({enabled:!hideArrow,element:this.arrowRef},arrow),flip:_objectSpread2({enabled:!disableFlip,behavior:flipBehavior},flip),offset:_objectSpread2({offset:"0, ".concat(offset,"px")},offsetOptions)},rest),onCreate:function onCreate(data){_this2.popper=data;getPopper(data,'floater');if(_this2._isMounted){_this2.setState({currentPlacement:data.placement,status:STATUS.IDLE});}if(placement!==data.placement){setTimeout(function(){data.instance.update();},1);}},onUpdate:function onUpdate(data){_this2.popper=data;var currentPlacement=_this2.state.currentPlacement;if(_this2._isMounted&&data.placement!==currentPlacement){_this2.setState({currentPlacement:data.placement});}}});}if(positionWrapper){var wrapperOffset=!is.undefined(wrapperOptions.offset)?wrapperOptions.offset:0;new Popper(this.target,this.wrapperRef,{placement:wrapperOptions.placement||placement,modifiers:{arrow:{enabled:false},offset:{offset:"0, ".concat(wrapperOffset,"px")},flip:{enabled:false}},onCreate:function onCreate(data){_this2.wrapperPopper=data;if(_this2._isMounted){_this2.setState({statusWrapper:STATUS.IDLE});}getPopper(data,'wrapper');if(placement!==data.placement){setTimeout(function(){data.instance.update();},1);}}});}}},{key:"changeWrapperPosition",value:function changeWrapperPosition(_ref){var target=_ref.target,wrapperOptions=_ref.wrapperOptions;this.setState({positionWrapper:wrapperOptions.position&&!!target});}},{key:"toggle",value:function toggle(forceStatus){var status=this.state.status;var nextStatus=status===STATUS.OPEN?STATUS.CLOSING:STATUS.OPENING;if(!is.undefined(forceStatus)){nextStatus=forceStatus;}this.setState({status:nextStatus});}},{key:"debug",get:function get(){var debug=this.props.debug;return debug||!!global.ReactFloaterDebug;}},{key:"event",get:function get(){var _this$props8=this.props,disableHoverToClick=_this$props8.disableHoverToClick,event=_this$props8.event;if(event==='hover'&&isMobile()&&!disableHoverToClick){return 'click';}return event;}},{key:"options",get:function get(){var options=this.props.options;return deepmerge(DEFAULTS,options||{});}},{key:"styles",get:function get(){var _this3=this;var _this$state3=this.state,status=_this$state3.status,positionWrapper=_this$state3.positionWrapper,statusWrapper=_this$state3.statusWrapper;var styles=this.props.styles;var nextStyles=deepmerge(getStyles(styles),styles);if(positionWrapper){var wrapperStyles;if(!([STATUS.IDLE].indexOf(status)!==-1)||!([STATUS.IDLE].indexOf(statusWrapper)!==-1)){wrapperStyles=nextStyles.wrapperPosition;}else {wrapperStyles=this.wrapperPopper.styles;}nextStyles.wrapper=_objectSpread2(_objectSpread2({},nextStyles.wrapper),wrapperStyles);}/* istanbul ignore else */if(this.target){var targetStyles=window.getComputedStyle(this.target);/* istanbul ignore else */if(this.wrapperStyles){nextStyles.wrapper=_objectSpread2(_objectSpread2({},nextStyles.wrapper),this.wrapperStyles);}else if(!(['relative','static'].indexOf(targetStyles.position)!==-1)){this.wrapperStyles={};if(!positionWrapper){POSITIONING_PROPS.forEach(function(d){_this3.wrapperStyles[d]=targetStyles[d];});nextStyles.wrapper=_objectSpread2(_objectSpread2({},nextStyles.wrapper),this.wrapperStyles);this.target.style.position='relative';this.target.style.top='auto';this.target.style.right='auto';this.target.style.bottom='auto';this.target.style.left='auto';}}}return nextStyles;}},{key:"target",get:function get(){if(!canUseDOM)return null;var target=this.props.target;if(target){if(is.domElement(target)){return target;}return document.querySelector(target);}return this.childRef||this.wrapperRef;}},{key:"render",value:function render(){var _this$state4=this.state,currentPlacement=_this$state4.currentPlacement,positionWrapper=_this$state4.positionWrapper,status=_this$state4.status;var _this$props9=this.props,children=_this$props9.children,component=_this$props9.component,content=_this$props9.content,disableAnimation=_this$props9.disableAnimation,footer=_this$props9.footer,hideArrow=_this$props9.hideArrow,id=_this$props9.id,open=_this$props9.open,showCloseButton=_this$props9.showCloseButton,style=_this$props9.style,target=_this$props9.target,title=_this$props9.title;var wrapper=/*#__PURE__*/React.createElement(ReactFloaterWrapper,{handleClick:this.handleClick,handleMouseEnter:this.handleMouseEnter,handleMouseLeave:this.handleMouseLeave,setChildRef:this.setChildRef,setWrapperRef:this.setWrapperRef,style:style,styles:this.styles.wrapper},children);var output={};if(positionWrapper){output.wrapperInPortal=wrapper;}else {output.wrapperAsChildren=wrapper;}return/*#__PURE__*/React.createElement("span",null,/*#__PURE__*/React.createElement(ReactFloaterPortal,{hasChildren:!!children,id:id,placement:currentPlacement,setRef:this.setFloaterRef,target:target,zIndex:this.styles.options.zIndex},/*#__PURE__*/React.createElement(Floater,{component:component,content:content,disableAnimation:disableAnimation,footer:footer,handleClick:this.handleClick,hideArrow:hideArrow||currentPlacement==='center',open:open,placement:currentPlacement,positionWrapper:positionWrapper,setArrowRef:this.setArrowRef,setFloaterRef:this.setFloaterRef,showCloseButton:showCloseButton,status:status,styles:this.styles,title:title}),output.wrapperInPortal),output.wrapperAsChildren);}}]);return ReactFloater;}(React.Component);_defineProperty(ReactFloater,"propTypes",{autoOpen:PropTypes.bool,callback:PropTypes.func,children:PropTypes.node,component:isRequiredIf(PropTypes.oneOfType([PropTypes.func,PropTypes.element]),function(props){return !props.content;}),content:isRequiredIf(PropTypes.node,function(props){return !props.component;}),debug:PropTypes.bool,disableAnimation:PropTypes.bool,disableFlip:PropTypes.bool,disableHoverToClick:PropTypes.bool,event:PropTypes.oneOf(['hover','click']),eventDelay:PropTypes.number,footer:PropTypes.node,getPopper:PropTypes.func,hideArrow:PropTypes.bool,id:PropTypes.oneOfType([PropTypes.string,PropTypes.number]),offset:PropTypes.number,open:PropTypes.bool,options:PropTypes.object,placement:PropTypes.oneOf(['top','top-start','top-end','bottom','bottom-start','bottom-end','left','left-start','left-end','right','right-start','right-end','auto','center']),showCloseButton:PropTypes.bool,style:PropTypes.object,styles:PropTypes.object,target:PropTypes.oneOfType([PropTypes.object,PropTypes.string]),title:PropTypes.node,wrapperOptions:PropTypes.shape({offset:PropTypes.number,placement:PropTypes.oneOf(['top','top-start','top-end','bottom','bottom-start','bottom-end','left','left-start','left-end','right','right-start','right-end','auto']),position:PropTypes.bool})});_defineProperty(ReactFloater,"defaultProps",{autoOpen:false,callback:noop,debug:false,disableAnimation:false,disableFlip:false,disableHoverToClick:false,event:'click',eventDelay:0.4,getPopper:noop,hideArrow:false,offset:15,placement:'bottom',showCloseButton:false,styles:{},target:null,wrapperOptions:{position:false}});
-
-module.exports = ReactFloater;
+exports.default = ReactFloater;
+//# sourceMappingURL=index.js.map

package.json

 {
   "name": "react-floater",
-  "version": "0.7.3",
+  "version": "0.8.0-0",
   "description": "Floaters everywhere!",
   "author": "Gil Barbara <[e-mail]>",
+  "keywords": [
+    "react",
+    "react-component",
+    "component",
+    "tooltip",
+    "modal",
+    "popup",
+    "alert",
+    "notification"
+  ],
+  "license": "MIT",
   "repository": {
@@ -15,125 +26,95 @@ "type": "git",
   "main": "lib/index.js",
-  "module": "es/index.js",
+  "module": "esm/index.js",
   "files": [
-    "es",
+    "esm",
     "lib",
-    "types/*.ts"
+    "src"
   ],
-  "types": "./types/index.d.ts",
-  "keywords": [
-    "react",
-    "react-component",
-    "component",
-    "tooltip",
-    "modal",
-    "popup",
-    "alert",
-    "notification"
-  ],
-  "license": "MIT",
+  "types": "lib",
+  "sideEffects": false,
   "peerDependencies": {
-    "prop-types": "^15.7.2",
-    "react": "^15.0.0 || ^16.0.0 || ^17.0.0",
-    "react-dom": "^15.0.0 || ^16.0.0 || ^17.0.0"
+    "react": "^16.8.0 || ^17.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0"
   },
   "dependencies": {
+    "@popperjs/core": "^2.10.1",
     "deepmerge": "^4.2.2",
     "exenv": "^1.2.2",
     "is-lite": "^0.8.1",
-    "popper.js": "^1.16.0",
-    "react-proptype-conditional-require": "^1.0.4",
-    "tree-changes": "^0.5.1"
+    "tree-changes-hook": "^0.8.0"
   },
   "devDependencies": {
-    "@babel/cli": "7.14.5",
-    "@babel/core": "7.14.6",
-    "@babel/plugin-external-helpers": "7.14.5",
-    "@babel/plugin-proposal-class-properties": "7.14.5",
-    "@babel/plugin-proposal-decorators": "7.14.5",
-    "@babel/plugin-proposal-do-expressions": "7.14.5",
-    "@babel/plugin-proposal-export-default-from": "7.14.5",
-    "@babel/plugin-proposal-export-namespace-from": "7.14.5",
-    "@babel/plugin-proposal-function-bind": "7.14.5",
-    "@babel/plugin-proposal-function-sent": "7.14.5",
-    "@babel/plugin-proposal-json-strings": "7.14.5",
-    "@babel/plugin-proposal-logical-assignment-operators": "7.14.5",
-    "@babel/plugin-proposal-nullish-coalescing-operator": "7.14.5",
-    "@babel/plugin-proposal-numeric-separator": "7.14.5",
-    "@babel/plugin-proposal-optional-chaining": "7.14.5",
-    "@babel/plugin-proposal-pipeline-operator": "7.14.5",
-    "@babel/plugin-proposal-throw-expressions": "7.14.5",
-    "@babel/plugin-syntax-dynamic-import": "7.8.3",
-    "@babel/plugin-syntax-import-meta": "7.10.4",
-    "@babel/plugin-transform-flow-strip-types": "7.14.5",
-    "@babel/preset-env": "7.14.7",
-    "@babel/preset-flow": "7.14.5",
-    "@babel/preset-react": "7.14.5",
-    "@types/react": "^17.0.14",
-    "autoprefixer": "^9.7.3",
-    "babel-core": "^7.0.0-bridge.0",
-    "babel-eslint": "^10.0.3",
-    "babel-jest": "^27.0.6",
-    "babel-plugin-array-includes": "^2.0.3",
-    "babel-plugin-transform-node-env-inline": "^0.4.3",
-    "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
-    "bundlesize": "^0.18.1",
-    "chalk": "^4.1.1",
-    "cross-env": "^7.0.3",
-    "dtslint": "^2.0.2",
-    "enzyme": "^3.11.0",
-    "enzyme-adapter-react-16": "^1.15.6",
-    "enzyme-to-json": "^3.6.2",
-    "eslint": "^6.7.2",
-    "eslint-config-airbnb": "^18.0.1",
-    "eslint-config-prettier": "^6.7.0",
-    "eslint-plugin-babel": "^5.3.0",
-    "eslint-plugin-flowtype": "^4.5.2",
-    "eslint-plugin-import": "^2.18.2",
-    "eslint-plugin-jsx-a11y": "^6.2.3",
-    "eslint-plugin-prettier": "^3.1.1",
-    "eslint-plugin-react": "^7.17.0",
-    "flow-bin": "^0.113.0",
-    "husky": "^3.1.0",
+    "@gilbarbara/eslint-config": "^0.1.6",
+    "@gilbarbara/prettier-config": "^0.1.0",
+    "@gilbarbara/tsconfig": "^0.1.0",
+    "@size-limit/preset-small-lib": "^5.0.3",
+    "@testing-library/dom": "^8.5.0",
+    "@testing-library/jest-dom": "^5.14.1",
+    "@testing-library/react": "^12.1.0",
+    "@types/enzyme-adapter-react-16": "^1.0.6",
+    "@types/exenv": "^1.2.0",
+    "@types/jest": "^27.0.1",
+    "@types/node": "^16.9.2",
+    "@types/react": "^17.0.21",
+    "@types/react-dom": "^17.0.9",
+    "@types/styled-components": "^5.1.14",
+    "del-cli": "^4.0.1",
+    "husky": "^4.3.8",
     "is-ci-cli": "^2.2.0",
-    "jest": "^27.0.6",
-    "jest-enzyme": "^7.1.2",
+    "jest": "^27.2.0",
     "jest-extended": "^0.11.5",
+    "jest-serializer-html": "^7.1.0",
     "jest-watch-typeahead": "^0.6.4",
-    "lint-staged": "^9.5.0",
-    "prettier": "^1.19.1",
-    "prop-types": "^15.7.2",
+    "lint-staged": "^11.1.2",
     "react": "^16.14.0",
     "react-dom": "^16.14.0",
-    "rimraf": "^3.0.2",
-    "rollup": "^1.27.9",
-    "rollup-plugin-babel": "^4.3.3",
-    "rollup-plugin-commonjs": "^10.1.0",
-    "rollup-plugin-node-resolve": "^5.2.0",
-    "styled-components": "^4.4.1",
-    "watch-run": "^1.2.5",
-    "yargs": "^17.0.1"
+    "repo-tools": "^0.2.2",
+    "size-limit": "^5.0.3",
+    "styled-components": "^5.3.1",
+    "ts-jest": "^27.0.5",
+    "ts-node": "^10.2.1",
+    "type-fest": "^2.3.3",
+    "typescript": "^4.4.3"
   },
   "scripts": {
-    "build": "npm run clean && npm run build:base && npm run build:umd",
-    "build:base": "cross-env NODE_ENV=production rollup -c",
-    "build:umd": "cross-env NODE_ENV=production rollup -c rollup.config.umd.js",
-    "watch": "rollup -cw",
-    "clean": "rimraf es && rimraf lib",
-    "lint": "eslint --ext .js --ext .jsx src test",
+    "build": "npm run clean && npm run build:cjs && npm run build:esm",
+    "build:cjs": "tsc",
+    "build:esm": "tsc -m es6 --outDir esm",
+    "watch:cjs": "npm run build:cjs -- -w",
+    "watch:esm": "npm run build:esm -- -w",
+    "clean": "del lib/* && del esm/*",
     "test": "is-ci \"test:coverage\" \"test:watch\"",
     "test:coverage": "jest --bail --coverage",
     "test:watch": "jest --watchAll --verbose",
-    "validate": "npm run lint && npm run test:coverage && flow && npm run build && npm run bundlesize",
-    "format": "prettier \"**/*.{js,jsx,ts}\" --write",
-    "bundlesize": "bundlesize",
+    "lint": "eslint --ext .ts,.tsx src test",
+    "format": "prettier \"**/*.{js,jsx,json,yml,yaml,css,less,scss,ts,tsx,md,graphql,mdx}\" --write",
+    "validate": "npm run lint && npm run test:coverage && npm run build && npm run size",
+    "size": "size-limit",
     "prepublishOnly": "npm run validate"
   },
-  "bundlesize": [
+  "eslintConfig": {
+    "extends": [
+      "@gilbarbara/eslint-config"
+    ],
+    "rules": {
+      "testing-library/no-node-access": "off"
+    }
+  },
+  "prettier": "@gilbarbara/prettier-config",
+  "size-limit": [
     {
-      "path": "./es/index.js",
-      "maxSize": "10 kB"
+      "path": "./esm/index.js",
+      "limit": "20 kB",
+      "ignore": [
+        "react",
+        "react-dom"
+      ]
     },
     {
       "path": "./lib/index.js",
-      "maxSize": "10 kB"
+      "limit": "20 kB",
+      "ignore": [
+        "react",
+        "react-dom"
+      ]
     }
@@ -143,23 +124,15 @@ ],
     "hooks": {
-      "post-merge": "node tools update",
-      "pre-commit": "node tools upstream && lint-staged && flow"
+      "post-merge": "repo-tools install-packages",
+      "pre-commit": "repo-tools check-remote && lint-staged"
     }
   },
-  "prettier": {
-    "jsxBracketSameLine": false,
-    "printWidth": 100,
-    "singleQuote": true,
-    "trailingComma": "all"
-  },
   "lint-staged": {
-    "*.js?(x)": [
+    "*.ts?(x)": [
       "eslint --fix",
-      "git add",
       "jest --findRelatedTests"
     ],
     "*.(js|jsx|json|yml|yaml|css|less|scss|ts|tsx|md|graphql|mdx)": [
-      "prettier --write",
-      "git add"
+      "prettier --write"
     ]
   }
 }

README.md

@@ -1,16 +0,17 @@
-React Floater
-===
+# React Floater
 
-[![NPM version](https://badge.fury.io/js/react-floater.svg)](https://www.npmjs.com/package/react-floater)
-[![build status](https://travis-ci.org/gilbarbara/react-floater.svg)](https://travis-ci.org/gilbarbara/react-floater)
-[![Maintainability](https://api.codeclimate.com/v1/badges/a3457f536c0915c0935b/maintainability)](https://codeclimate.com/github/gilbarbara/react-floater/maintainability)
-[![Test Coverage](https://api.codeclimate.com/v1/badges/a3457f536c0915c0935b/test_coverage)](https://codeclimate.com/github/gilbarbara/react-floater/test_coverage)
+[![NPM version](https://badge.fury.io/js/react-floater.svg)](https://www.npmjs.com/package/react-floater) [![Build Status](https://travis-ci.com/gilbarbara/react-floater.svg?branch=master)](https://travis-ci.com/gilbarbara/react-floater) [![Maintainability](https://api.codeclimate.com/v1/badges/a3457f536c0915c0935b/maintainability)](https://codeclimate.com/github/gilbarbara/react-floater/maintainability) [![Test Coverage](https://api.codeclimate.com/v1/badges/a3457f536c0915c0935b/test_coverage)](https://codeclimate.com/github/gilbarbara/react-floater/test_coverage)
 
-### View the [demo](https://d0pt7.csb.app)
-You can view and edit the code for each Floater [here](https://codesandbox.io/s/github/gilbarbara/react-floater-demo)
+Advanced tooltips for React!
 
+View the [demo](https://codesandbox.io/s/github/gilbarbara/react-floater/tree/master/demo)
+
+## Highlights
+
+- 🏖 **Easy to use:** Just set the `content`
+- 🛠 **Flexible:** Personalize the options to fit your needs
+- 🟦 **Typescript:** Nicely typed
+
 ## Usage
 
-Install.
-
 ```bash
@@ -20,3 +21,3 @@ npm install --save react-floater
 
-Import it into your component:
+And import it into your code:
 
@@ -27,5 +28,4 @@ ```jsx
 <Floater content="This is the Floater content">
-    <span>click me</span>
-</Floater>
-
+  <span>click me</span>
+</Floater>;
 ```
@@ -41,3 +41,3 @@
 If you use your own components as `children` it will receive an `innerRef` prop that you must set in your HTMLElement:  
-*Stateless components don't accept refs...*
+_Stateless components don't accept refs..._
 
@@ -55,3 +55,3 @@ ```jsx
 
-This works transparently with styled-components (and possible other modules):  
+This works transparently with styled-components (and possible other modules):
 
@@ -66,5 +66,4 @@ ```jsx
 <Floater content="This is the Floater content">
-    <Wrapper>click me</Wrapper>
-</Floater>
-
+  <Wrapper>click me</Wrapper>
+</Floater>;
 ```
@@ -80,3 +79,3 @@
 
-- **action** {string} `open` or `close`  
+- **action** {string} `open` or `close`
 - **props** {object} the props you passed.
@@ -93,11 +92,8 @@
 The Floater content. It can be anything that can be rendered.  
-*This is the only required props, unless you pass a* `component`.
+_This is the only required props, unless you pass a_ `component`.
 
 **debug** {bool} ▶︎ `false`  
 Log some basic actions.  
-*You can also set a global variable* `ReactFloaterDebug = true;`
+_You can also set a global variable_ `ReactFloaterDebug = true;`
 
-**disableAnimation** {bool} ▶︎ `false`  
-Animate the Floater on scroll/resize.
-
 **disableFlip** {bool} ▶︎ `false`  
@@ -107,7 +103,7 @@ Disable changes in the Floater position on scroll/resize.
 **disableHoverToClick** {bool} ▶︎ `false`  
-Don't convert *hover* event to *click* on mobile.
+Don't convert _hover_ event to _click_ on mobile.
 
 **event** {string} ▶︎ `click`  
 The event that will trigger the Floater. It can be `hover | click`.  
-*These won't work in controlled mode.*
+_These won't work in controlled mode._
 
@@ -121,6 +117,5 @@ **eventDelay** {number} ▶︎ `0.4`
 
-**getPopper** {function}
-Get the popper.js instance. It receives with 2 parameters:
+**getPopper** {function} Get the popper.js instance. It receives with 2 parameters:
 
-- **popper** {object} the popper object  
+- **popper** {object} the popper object
 - **origin** {object} `floater` or `wrapper`
@@ -131,5 +126,2 @@
 
-**id** {string|number}  
-In case that you need to identify the portal.
-
 **offset** {number} ▶︎ `15`  
@@ -140,7 +132,7 @@ The distance between the Floater and its target in pixels.
 The switch between normal and controlled modes.  
-*Setting this prop will disabled the normal behavior.*
+_Setting this prop will disabled the normal behavior._
 
 **options** {object}  
 Customize popper.js modifiers.  
-*Don't use it unless you know what you're doing*
+_Don't use it unless you know what you're doing_
 
@@ -155,6 +147,9 @@ **placement** {string} ▶︎ `bottom`
 - left (left-start, left-end)
-- right (right-start, right-end
+- right (right-start, right-end)
 - auto
 - center
 
+**portalElement** {string|null|HTMLElement}  
+A css selector or element to render the tooltips
+
 **showCloseButton** {bool} ▶︎ `false`  
@@ -175,3 +170,3 @@ It will show a ⨉ button to close the Floater.
 Position the wrapper relative to the target.  
-*You need to set a `target` for this to work.*
+_You need to set a `target` for this to work._
 
@@ -186,4 +181,4 @@ ```js
 
+## Styling
 
-## Styling
 You can customize everything with the `styles` prop.  
@@ -194,3 +189,2 @@ Only set the properties you want to change and the default [styles](./src/styles.js) will be merged.
 
-
 ## Modes
@@ -203,5 +197,4 @@
 <Floater content="This is the Floater content">
-    <span>click me</span>
+  <span>click me</span>
 </Floater>
-
 ```
@@ -214,12 +207,8 @@
 <div className="App">
-    <img src="some-path" />
+  <img src="some-path" />
 
-    <Floater
-      content="This is the Floater content"
-      target=".App img"
-    >
-        <span>click me</span>
-    </Floater>
+  <Floater content="This is the Floater content" target=".App img">
+    <span>click me</span>
+  </Floater>
 </div>
-
 ```
@@ -232,17 +221,20 @@
 <div className="App">
-    <img src="https://upload.wikimedia.org/wikipedia/commons/2/2d/Google-favicon-2015.png" width="100" className="my-super-image" />
+  <img
+    src="https://upload.wikimedia.org/wikipedia/commons/2/2d/Google-favicon-2015.png"
+    width="100"
+    className="my-super-image"
+  />
 
-    <Floater
-        content="This is the Floater content"
-        target=".my-super-image"
-        wrapperOptions={{
-            offset: -22,
-            placement: 'top',
-            position: true,
-        }}
-    >
+  <Floater
+    content="This is the Floater content"
+    target=".my-super-image"
+    wrapperOptions={{
+      offset: -22,
+      placement: 'top',
+      position: true,
+    }}
+  >
     <span style={{ color: '#f04', fontSize: 34 }}>◉</span>
-    </Floater>
+  </Floater>
 </div>
-
 ```
@@ -256,9 +248,5 @@
 <div className="App">
-    <img src="some-path" />
-    <Floater
-        content="This is the Floater content"
-        open={true}
-        target=".App img"
-    />
+  <img src="some-path" />
+  <Floater content="This is the Floater content" open={true} target=".App img" />
 </div>
 ```

New alerts

License Policy Violation

License

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

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

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

Found 1 instance in 1 package

Improved metrics

Dependency count

7

decreased by-22.22%

Dev dependency count

31

decreased by-53.73%

Number of package files

80

increased by1042.86%

Worsened metrics

Total package byte prevSize

223372

decreased by-11.43%

Lines of code

3881

decreased by-11.09%

Number of lines in readme file

234

decreased by-4.88%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Added@popperjs/core@^2.10.1

• + Addedtree-changes-hook@^0.8.0

• + Added@popperjs/core@2.11.8(transitive)

• + Addedfast-deep-equal@3.1.3(transitive)

• + Addedtree-changes@0.8.0(transitive)

• + Addedtree-changes-hook@0.8.0(transitive)

• - Removedpopper.js@^1.16.0

• - Removedreact-proptype-conditional-require@^1.0.4

• - Removedtree-changes@^0.5.1

• - Removeddeep-diff@1.0.2(transitive)

• - Removednested-property@1.0.1(transitive)

• - Removedpopper.js@1.16.1(transitive)

• - Removedprop-types@15.8.1(transitive)

• - Removedreact-is@16.13.1(transitive)

• - Removedreact-proptype-conditional-require@1.0.4(transitive)

• - Removedtree-changes@0.5.1(transitive)