react-stick - npm Package Compare versions

Comparing version 4.2.2 to 5.0.0-rc1

es/defaultPosition.js

@@ -1,3 +0,14 @@
-var DEFAULT_POSITION = "bottom left";
-var positions = ["bottom left", "bottom center", "bottom right", "middle left", "middle center", "middle right", "top left", "top center", "top right"];
-export { DEFAULT_POSITION as default, positions };
+const DEFAULT_POSITION = 'bottom left';
+export default DEFAULT_POSITION;
+export const positions = [
+    'bottom left',
+    'bottom center',
+    'bottom right',
+    'middle left',
+    'middle center',
+    'middle right',
+    'top left',
+    'top center',
+    'top right',
+];
+//# sourceMappingURL=defaultPosition.js.map

es/hooks/useAutoFlip.js

@@ -1,123 +0,114 @@
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import invariant from "invariant";
-import { useState, useEffect, useCallback } from "react";
-import { positions } from "../defaultPosition.js";
-import { isPositionedToBottom, isPositionedToTop, fitsOnBottom, fitsOnTop, isPositionedToLeft, isPositionedToRight, fitsOnRight, fitsOnLeft } from "../utils/fit.js";
-import getDefaultAlign from "../utils/getDefaultAlign.js";
-import "@babel/runtime/helpers/defineProperty";
-var useAutoFlip = function useAutoFlip2(enableAutoHorizontalFlip, enableAutoVerticalFlip, initialPosition, initialAlign) {
-  var _useState = useState(initialPosition), _useState2 = _slicedToArray(_useState, 2), currentPosition = _useState2[0], setCurrentPosition = _useState2[1];
-  var _useState3 = useState(initialAlign || getDefaultAlign(initialPosition)), _useState4 = _slicedToArray(_useState3, 2), currentAlign = _useState4[0], setCurrentAlign = _useState4[1];
-  useEffect(function() {
-    setCurrentPosition(initialPosition);
-    setCurrentAlign(initialAlign || getDefaultAlign(initialPosition));
-  }, [initialAlign, initialPosition]);
-  var checkAlignment = useCallback(function(nodeRef, anchorRef) {
-    var _autoFlipHorizontally = autoFlipHorizontally(nodeRef, anchorRef, {
-      enabled: enableAutoHorizontalFlip,
-      initialPosition,
-      initialAlign,
-      currentPosition,
-      currentAlign
-    }), _autoFlipHorizontally2 = _slicedToArray(_autoFlipHorizontally, 2), horizontalPosition = _autoFlipHorizontally2[0], horizontalAlign = _autoFlipHorizontally2[1];
-    var _autoFlipVertically = autoFlipVertically(nodeRef, anchorRef, {
-      enabled: enableAutoVerticalFlip,
-      initialPosition,
-      initialAlign,
-      currentPosition: horizontalPosition,
-      currentAlign: horizontalAlign
-    }), _autoFlipVertically2 = _slicedToArray(_autoFlipVertically, 2), verticalPosition = _autoFlipVertically2[0], verticalAlign = _autoFlipVertically2[1];
-    if (verticalPosition !== currentPosition) {
-      setCurrentPosition(verticalPosition);
+import invariant from 'invariant';
+import { useCallback, useState, useEffect } from 'react';
+import { positions } from '../defaultPosition';
+import { fitsOnBottom, fitsOnLeft, fitsOnRight, fitsOnTop, getDefaultAlign, isPositionedToBottom, isPositionedToLeft, isPositionedToRight, isPositionedToTop, } from '../utils';
+const useAutoFlip = (enableAutoHorizontalFlip, enableAutoVerticalFlip, initialPosition, initialAlign) => {
+    const [currentPosition, setCurrentPosition] = useState(initialPosition);
+    const [currentAlign, setCurrentAlign] = useState(initialAlign || getDefaultAlign(initialPosition));
+    useEffect(() => {
+        setCurrentPosition(initialPosition);
+        setCurrentAlign(initialAlign || getDefaultAlign(initialPosition));
+    }, [initialAlign, initialPosition]);
+    const checkAlignment = useCallback((nodeRef, anchorRef) => {
+        const [horizontalPosition, horizontalAlign] = autoFlipHorizontally(nodeRef, anchorRef, {
+            enabled: enableAutoHorizontalFlip,
+            initialPosition,
+            initialAlign,
+            currentPosition,
+            currentAlign,
+        });
+        const [verticalPosition, verticalAlign] = autoFlipVertically(nodeRef, anchorRef, {
+            enabled: enableAutoVerticalFlip,
+            initialPosition,
+            initialAlign,
+            currentPosition: horizontalPosition,
+            currentAlign: horizontalAlign,
+        });
+        if (verticalPosition !== currentPosition) {
+            setCurrentPosition(verticalPosition);
+        }
+        if (verticalAlign !== currentAlign) {
+            setCurrentAlign(verticalAlign);
+        }
+    }, [
+        currentAlign,
+        currentPosition,
+        enableAutoHorizontalFlip,
+        enableAutoVerticalFlip,
+        initialAlign,
+        initialPosition,
+    ]);
+    return [currentPosition, currentAlign, checkAlignment];
+};
+export default useAutoFlip;
+const autoFlipVertically = (nodeRef, anchorRef, { enabled, initialPosition, currentPosition, initialAlign, currentAlign, }) => {
+    if (!enabled) {
+        return [currentPosition, currentAlign];
     }
-    if (verticalAlign !== currentAlign) {
-      setCurrentAlign(verticalAlign);
+    const positionedToBottom = isPositionedToBottom(currentPosition);
+    const positionedToTop = isPositionedToTop(currentPosition);
+    if (isPositionedToBottom(initialPosition)) {
+        if (fitsOnBottom(nodeRef, anchorRef)) {
+            if (!positionedToBottom) {
+                return [switchToBottom(currentPosition), switchToTop(currentAlign)];
+            }
+        }
+        else if (fitsOnTop(nodeRef, anchorRef) && !positionedToTop) {
+            return [switchToTop(currentPosition), switchToBottom(currentAlign)];
+        }
     }
-  }, [currentAlign, currentPosition, enableAutoHorizontalFlip, enableAutoVerticalFlip, initialAlign, initialPosition]);
-  return [currentPosition, currentAlign, checkAlignment];
+    if (isPositionedToTop(initialPosition)) {
+        if (fitsOnTop(nodeRef, anchorRef)) {
+            if (!positionedToTop) {
+                return [switchToTop(currentPosition), switchToBottom(currentAlign)];
+            }
+        }
+        else if (fitsOnBottom(nodeRef, anchorRef) && !positionedToBottom) {
+            return [switchToBottom(currentPosition), switchToTop(currentAlign)];
+        }
+    }
+    return [currentPosition, currentAlign];
 };
-var autoFlipVertically = function autoFlipVertically2(nodeRef, anchorRef, _ref) {
-  var enabled = _ref.enabled, initialPosition = _ref.initialPosition, currentPosition = _ref.currentPosition;
-  _ref.initialAlign;
-  var currentAlign = _ref.currentAlign;
-  if (!enabled) {
-    return [currentPosition, currentAlign];
-  }
-  var positionedToBottom = isPositionedToBottom(currentPosition);
-  var positionedToTop = isPositionedToTop(currentPosition);
-  if (isPositionedToBottom(initialPosition)) {
-    if (fitsOnBottom(nodeRef, anchorRef)) {
-      if (!positionedToBottom) {
-        return [switchToBottom(currentPosition), switchToTop(currentAlign)];
-      }
-    } else if (fitsOnTop(nodeRef, anchorRef) && !positionedToTop) {
-      return [switchToTop(currentPosition), switchToBottom(currentAlign)];
+const autoFlipHorizontally = (nodeRef, anchorRef, { enabled, initialPosition, currentPosition, initialAlign, currentAlign, }) => {
+    if (!enabled) {
+        return [currentPosition, currentAlign];
     }
-  }
-  if (isPositionedToTop(initialPosition)) {
-    if (fitsOnTop(nodeRef, anchorRef)) {
-      if (!positionedToTop) {
-        return [switchToTop(currentPosition), switchToBottom(currentAlign)];
-      }
-    } else if (fitsOnBottom(nodeRef, anchorRef) && !positionedToBottom) {
-      return [switchToBottom(currentPosition), switchToTop(currentAlign)];
+    const positionedToLeft = isPositionedToLeft(currentPosition);
+    const positionedToRight = isPositionedToRight(currentPosition);
+    if (isPositionedToRight(initialPosition)) {
+        if (fitsOnRight(nodeRef, anchorRef)) {
+            if (!positionedToRight) {
+                return [switchToRight(currentPosition), switchToLeft(currentAlign)];
+            }
+        }
+        else if (fitsOnLeft(nodeRef, anchorRef) && !positionedToLeft) {
+            return [switchToLeft(currentPosition), switchToRight(currentAlign)];
+        }
     }
-  }
-  return [currentPosition, currentAlign];
-};
-var autoFlipHorizontally = function autoFlipHorizontally2(nodeRef, anchorRef, _ref2) {
-  var enabled = _ref2.enabled, initialPosition = _ref2.initialPosition, currentPosition = _ref2.currentPosition;
-  _ref2.initialAlign;
-  var currentAlign = _ref2.currentAlign;
-  if (!enabled) {
+    if (isPositionedToLeft(initialPosition)) {
+        if (fitsOnLeft(nodeRef, anchorRef)) {
+            if (!positionedToLeft) {
+                return [switchToLeft(currentPosition), switchToRight(currentAlign)];
+            }
+        }
+        else if (fitsOnRight(nodeRef, anchorRef) && !positionedToRight) {
+            return [switchToRight(currentPosition), switchToLeft(currentAlign)];
+        }
+    }
     return [currentPosition, currentAlign];
-  }
-  var positionedToLeft = isPositionedToLeft(currentPosition);
-  var positionedToRight = isPositionedToRight(currentPosition);
-  if (isPositionedToRight(initialPosition)) {
-    if (fitsOnRight(nodeRef, anchorRef)) {
-      if (!positionedToRight) {
-        return [switchToRight(currentPosition), switchToLeft(currentAlign)];
-      }
-    } else if (fitsOnLeft(nodeRef, anchorRef) && !positionedToLeft) {
-      return [switchToLeft(currentPosition), switchToRight(currentAlign)];
-    }
-  }
-  if (isPositionedToLeft(initialPosition)) {
-    if (fitsOnLeft(nodeRef, anchorRef)) {
-      if (!positionedToLeft) {
-        return [switchToLeft(currentPosition), switchToRight(currentAlign)];
-      }
-    } else if (fitsOnRight(nodeRef, anchorRef) && !positionedToRight) {
-      return [switchToRight(currentPosition), switchToLeft(currentAlign)];
-    }
-  }
-  return [currentPosition, currentAlign];
 };
-var switchVerticalPosition = function switchVerticalPosition2(position, target) {
-  var newPosition = positions.find(function(standardPosition) {
-    return standardPosition === "".concat(target, " ").concat(position.split(" ")[1]);
-  });
-  invariant(newPosition, 'Could not determine new position. Old position "'.concat(position, '", new vertical target "').concat(target, '"'));
-  return newPosition;
+const switchVerticalPosition = (position, target) => {
+    const newPosition = positions.find((standardPosition) => standardPosition === `${target} ${position.split(' ')[1]}`);
+    invariant(newPosition, `Could not determine new position. Old position "${position}", new vertical target "${target}"`);
+    return newPosition;
 };
-var switchHorizontalPosition = function switchHorizontalPosition2(position, target) {
-  var newPosition = positions.find(function(standardPosition) {
-    return standardPosition === "".concat(position.split(" ")[0], " ").concat(target);
-  });
-  invariant(newPosition, 'Could not determine new position. Old position "'.concat(position, '", new horizontal target "').concat(target, '"'));
-  return newPosition;
+const switchHorizontalPosition = (position, target) => {
+    const newPosition = positions.find((standardPosition) => standardPosition === `${position.split(' ')[0]} ${target}`);
+    invariant(newPosition, `Could not determine new position. Old position "${position}", new horizontal target "${target}"`);
+    return newPosition;
 };
-var switchToBottom = function switchToBottom2(position) {
-  return switchVerticalPosition(position, "bottom");
-};
-var switchToTop = function switchToTop2(position) {
-  return switchVerticalPosition(position, "top");
-};
-var switchToLeft = function switchToLeft2(position) {
-  return switchHorizontalPosition(position, "left");
-};
-var switchToRight = function switchToRight2(position) {
-  return switchHorizontalPosition(position, "right");
-};
-export { useAutoFlip as default };
+const switchToBottom = (position) => switchVerticalPosition(position, 'bottom');
+const switchToTop = (position) => switchVerticalPosition(position, 'top');
+const switchToLeft = (position) => switchHorizontalPosition(position, 'left');
+const switchToRight = (position) => switchHorizontalPosition(position, 'right');
+//# sourceMappingURL=useAutoFlip.js.map

es/hooks/useWatcher.js

@@ -1,28 +0,30 @@
-import { useEffect } from "react";
-function useWatcher(watcher, _ref) {
-  var updateOnAnimationFrame = _ref.updateOnAnimationFrame, enabled = _ref.enabled;
-  useEffect(function() {
-    var animationFrameId;
-    var idleCallbackId;
-    if (enabled && typeof window.requestAnimationFrame !== "undefined") {
-      var callback = function callback2() {
-        watcher();
-        if (updateOnAnimationFrame) {
-          animationFrameId = requestAnimationFrame(callback2);
-        } else {
-          idleCallbackId = requestIdleCallback(callback2);
+import { useEffect } from 'react';
+function useWatcher(watcher, { updateOnAnimationFrame, enabled }) {
+    useEffect(() => {
+        let animationFrameId;
+        let idleCallbackId;
+        // do not track in node
+        if (enabled && typeof window.requestAnimationFrame !== 'undefined') {
+            const callback = () => {
+                watcher();
+                if (updateOnAnimationFrame) {
+                    animationFrameId = requestAnimationFrame(callback);
+                }
+                else {
+                    idleCallbackId = requestIdleCallback(callback);
+                }
+            };
+            callback();
         }
-      };
-      callback();
-    }
-    return function() {
-      if (animationFrameId) {
-        cancelAnimationFrame(animationFrameId);
-      }
-      if (idleCallbackId) {
-        cancelIdleCallback(idleCallbackId);
-      }
-    };
-  }, [updateOnAnimationFrame, watcher, enabled]);
+        return () => {
+            if (animationFrameId) {
+                cancelAnimationFrame(animationFrameId);
+            }
+            if (idleCallbackId) {
+                cancelIdleCallback(idleCallbackId);
+            }
+        };
+    }, [updateOnAnimationFrame, watcher, enabled]);
 }
-export { useWatcher as default };
+export default useWatcher;
+//# sourceMappingURL=useWatcher.js.map

es/index.js

@@ -1,2 +0,3 @@
-export { default } from "./Stick.js";
-export { PortalContext } from "./StickPortal.js";
+export { default } from './Stick';
+export { PortalContext } from './StickPortal';
+//# sourceMappingURL=index.js.map

es/Stick.js

@@ -1,181 +0,136 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-import "requestidlecallback";
-import invariant from "invariant";
-import React, { useState, useContext, useRef, useEffect, useCallback } from "react";
-import useStyles from "substyle";
-import { StickContext } from "./StickContext.js";
-import StickInline from "./StickInline.js";
-import StickNode from "./StickNode.js";
-import StickPortal from "./StickPortal.js";
-import DEFAULT_POSITION from "./defaultPosition.js";
-import useAutoFlip from "./hooks/useAutoFlip.js";
-import useWatcher from "./hooks/useWatcher.js";
-import { scrollX } from "./utils/scroll.js";
-import getDefaultAlign from "./utils/getDefaultAlign.js";
-import getModifiers from "./utils/getModifiers.js";
-import uniqueId from "./utils/uniqueId.js";
-var _excluded = ["inline", "node", "sameWidth", "children", "updateOnAnimationFrame", "position", "align", "component", "transportTo", "autoFlipHorizontally", "autoFlipVertically", "onClickOutside", "style", "className", "classNames"];
-var defaultStyles = {
-  node: {
-    position: "absolute",
-    zIndex: 99,
-    textAlign: "left"
-  }
+import { jsx as _jsx } from "react/jsx-runtime";
+import 'requestidlecallback';
+import invariant from 'invariant';
+import { useCallback, useContext, useEffect, useRef, useState, } from 'react';
+import useStyles from 'substyle';
+import { StickContext } from './StickContext';
+import StickInline from './StickInline';
+import StickNode from './StickNode';
+import StickPortal from './StickPortal';
+import DEFAULT_POSITION from './defaultPosition';
+import { useAutoFlip, useWatcher } from './hooks';
+import { getDefaultAlign, getModifiers, scrollX, uniqueId } from './utils';
+const defaultStyles = {
+    node: {
+        position: 'absolute',
+        zIndex: 99,
+        textAlign: 'left',
+    },
 };
-function Stick(_ref) {
-  var _ref$inline = _ref.inline, inline = _ref$inline === void 0 ? false : _ref$inline, node = _ref.node, _ref$sameWidth = _ref.sameWidth, sameWidth = _ref$sameWidth === void 0 ? false : _ref$sameWidth, children = _ref.children, _ref$updateOnAnimatio = _ref.updateOnAnimationFrame, updateOnAnimationFrame = _ref$updateOnAnimatio === void 0 ? false : _ref$updateOnAnimatio, position = _ref.position, align = _ref.align, component = _ref.component, transportTo = _ref.transportTo, _ref$autoFlipHorizont = _ref.autoFlipHorizontally, autoFlipHorizontally = _ref$autoFlipHorizont === void 0 ? false : _ref$autoFlipHorizont, _ref$autoFlipVertical = _ref.autoFlipVertically, autoFlipVertically = _ref$autoFlipVertical === void 0 ? false : _ref$autoFlipVertical, onClickOutside = _ref.onClickOutside, style = _ref.style, className = _ref.className, classNames = _ref.classNames, rest = _objectWithoutProperties(_ref, _excluded);
-  var _useState = useState(0), _useState2 = _slicedToArray(_useState, 2), width = _useState2[0], setWidth = _useState2[1];
-  var _useState3 = useState(function() {
-    return uniqueId();
-  }), _useState4 = _slicedToArray(_useState3, 1), containerNestingKeyExtension = _useState4[0];
-  var nestingKey = [useContext(StickContext), containerNestingKeyExtension].filter(function(key) {
-    return !!key;
-  }).join("_");
-  var anchorRef = useRef();
-  var nodeRef = useRef();
-  var _containerRef = useRef();
-  var _useAutoFlip = useAutoFlip(autoFlipHorizontally, autoFlipVertically, position || DEFAULT_POSITION, align || getDefaultAlign(position || DEFAULT_POSITION)), _useAutoFlip2 = _slicedToArray(_useAutoFlip, 3), resolvedPosition = _useAutoFlip2[0], resolvedAlign = _useAutoFlip2[1], checkAlignment = _useAutoFlip2[2];
-  var styles = useStyles(defaultStyles, {
-    style,
-    className,
-    classNames
-  }, getModifiers({
-    position: resolvedPosition,
-    align: resolvedAlign,
-    sameWidth
-  }));
-  useEffect(function() {
-    var handleScroll = function handleScroll2() {
-      if (!nodeRef.current || !anchorRef.current) {
-        return;
-      }
-      checkAlignment(nodeRef.current, anchorRef.current);
-    };
-    handleScroll();
-    window.addEventListener("scroll", handleScroll);
-    return function() {
-      window.removeEventListener("scroll", handleScroll);
-    };
-  }, [checkAlignment]);
-  useEffect(function() {
-    var handleClickOutside = function handleClickOutside2(ev) {
-      if (!onClickOutside) {
-        return;
-      }
-      var target = ev.target;
-      if (target instanceof window.HTMLElement && isOutside(anchorRef, _containerRef, target)) {
-        onClickOutside(ev);
-      }
-    };
-    document.addEventListener("click", handleClickOutside, true);
-    return function() {
-      document.removeEventListener("click", handleClickOutside, true);
-    };
-  }, [onClickOutside]);
-  var measure = useCallback(function() {
-    if (!anchorRef.current) {
-      return;
-    }
-    var boundingRect = anchorRef.current.getBoundingClientRect();
-    var newWidth = sameWidth ? boundingRect.width : calculateWidth(anchorRef.current, resolvedPosition, resolvedAlign, boundingRect);
-    if (newWidth !== width) {
-      setWidth(newWidth);
-    }
-  }, [resolvedAlign, resolvedPosition, sameWidth, width]);
-  useWatcher(measure, {
-    updateOnAnimationFrame,
-    enabled: !!node
-  });
-  var handleReposition = useCallback(function() {
-    if (nodeRef.current && anchorRef.current) {
-      checkAlignment(nodeRef.current, anchorRef.current);
-    }
-  }, [checkAlignment]);
-  if (inline) {
-    return /* @__PURE__ */ React.createElement(StickContext.Provider, {
-      value: nestingKey
-    }, /* @__PURE__ */ React.createElement(StickInline, _extends({}, rest, {
-      position: resolvedPosition,
-      align: resolvedAlign,
-      style: styles,
-      node: node && /* @__PURE__ */ React.createElement(StickNode, {
-        width,
+function Stick({ inline = false, node, sameWidth = false, children, updateOnAnimationFrame = false, position, align, component, transportTo, autoFlipHorizontally = false, autoFlipVertically = false, onClickOutside, style, className, classNames, ...rest }) {
+    const [width, setWidth] = useState(0);
+    const [containerNestingKeyExtension] = useState(() => uniqueId());
+    const nestingKey = [useContext(StickContext), containerNestingKeyExtension]
+        .filter((key) => !!key)
+        .join('_');
+    const anchorRef = useRef();
+    const nodeRef = useRef(null);
+    const containerRef = useRef();
+    const [resolvedPosition, resolvedAlign, checkAlignment] = useAutoFlip(autoFlipHorizontally, autoFlipVertically, position || DEFAULT_POSITION, align || getDefaultAlign(position || DEFAULT_POSITION));
+    const styles = useStyles(defaultStyles, { style, className, classNames }, getModifiers({
         position: resolvedPosition,
         align: resolvedAlign,
         sameWidth,
-        ref: nodeRef
-      }, node),
-      nestingKey,
-      containerRef: function containerRef(node2) {
-        anchorRef.current = node2;
-        _containerRef.current = node2;
-      },
-      component
-    }), children));
-  }
-  return /* @__PURE__ */ React.createElement(StickContext.Provider, {
-    value: nestingKey
-  }, /* @__PURE__ */ React.createElement(StickPortal, _extends({}, rest, {
-    updateOnAnimationFrame,
-    transportTo,
-    component,
-    ref: function ref(node2) {
-      invariant(!node2 || node2 instanceof Element, "Only HTML elements can be stick anchors.");
-      anchorRef.current = node2;
-    },
-    position: resolvedPosition,
-    node: node && /* @__PURE__ */ React.createElement(StickNode, {
-      width,
-      position: resolvedPosition,
-      align: resolvedAlign,
-      sameWidth,
-      ref: nodeRef
-    }, node),
-    style: styles,
-    nestingKey,
-    containerRef: _containerRef,
-    onReposition: handleReposition
-  }), children));
+    }));
+    useEffect(() => {
+        const handleScroll = () => {
+            if (!nodeRef.current || !anchorRef.current) {
+                return;
+            }
+            checkAlignment(nodeRef.current, anchorRef.current);
+        };
+        handleScroll(); // Check alignment on first render
+        window.addEventListener('scroll', handleScroll);
+        return () => {
+            window.removeEventListener('scroll', handleScroll);
+        };
+    }, [checkAlignment]);
+    useEffect(() => {
+        const handleClickOutside = (ev) => {
+            if (!onClickOutside) {
+                return;
+            }
+            const { target } = ev;
+            if (target instanceof window.HTMLElement &&
+                isOutside(anchorRef, containerRef, target)) {
+                onClickOutside(ev);
+            }
+        };
+        document.addEventListener('click', handleClickOutside, true);
+        return () => {
+            document.removeEventListener('click', handleClickOutside, true);
+        };
+    }, [onClickOutside]);
+    const measure = useCallback(() => {
+        if (!anchorRef.current) {
+            return;
+        }
+        const boundingRect = anchorRef.current.getBoundingClientRect();
+        const newWidth = sameWidth
+            ? boundingRect.width
+            : calculateWidth(anchorRef.current, resolvedPosition, resolvedAlign, boundingRect);
+        if (newWidth !== width) {
+            setWidth(newWidth);
+        }
+    }, [resolvedAlign, resolvedPosition, sameWidth, width]);
+    useWatcher(measure, { updateOnAnimationFrame, enabled: !!node });
+    const handleReposition = useCallback(() => {
+        if (nodeRef.current && anchorRef.current) {
+            checkAlignment(nodeRef.current, anchorRef.current);
+        }
+    }, [checkAlignment]);
+    if (inline) {
+        return (_jsx(StickContext.Provider, { value: nestingKey, children: _jsx(StickInline, { ...rest, position: resolvedPosition, align: resolvedAlign, style: styles, node: node && (_jsx(StickNode, { width: width, position: resolvedPosition, align: resolvedAlign, sameWidth: sameWidth, ref: nodeRef, children: node })), nestingKey: nestingKey, containerRef: (node) => {
+                    anchorRef.current = node || undefined;
+                    containerRef.current = node || undefined;
+                }, component: component, children: children }) }));
+    }
+    return (_jsx(StickContext.Provider, { value: nestingKey, children: _jsx(StickPortal, { ...rest, updateOnAnimationFrame: updateOnAnimationFrame, transportTo: transportTo, component: component, ref: (node) => {
+                invariant(!node || node instanceof Element, 'Only HTML elements can be stick anchors.');
+                anchorRef.current = node || undefined;
+            }, position: resolvedPosition, node: node && (_jsx(StickNode, { width: width, position: resolvedPosition, align: resolvedAlign, sameWidth: sameWidth, ref: nodeRef, children: node })), style: styles, nestingKey: nestingKey, containerRef: containerRef, onReposition: handleReposition, children: children }) }));
 }
 function isOutside(anchorRef, containerRef, target) {
-  if (anchorRef.current && anchorRef.current.contains(target)) {
-    return false;
-  }
-  var nestingKey = containerRef.current && containerRef.current.getAttribute("data-sticknestingkey");
-  if (nestingKey) {
-    var nestedStickNodes = document.querySelectorAll("[data-stickNestingKey^='".concat(nestingKey, "']"));
-    return !nestedStickNodes || !Array.from(nestedStickNodes).some(function(stickNode) {
-      return stickNode.contains(target);
-    });
-  }
-  return true;
+    if (anchorRef.current && anchorRef.current.contains(target)) {
+        return false;
+    }
+    const nestingKey = containerRef.current &&
+        containerRef.current.getAttribute('data-sticknestingkey');
+    if (nestingKey) {
+        // Find all stick nodes nested inside our own stick node and check if the click
+        // happened on any of these (our own stick node will also be part of the query result)
+        const nestedStickNodes = document.querySelectorAll(`[data-stickNestingKey^='${nestingKey}']`);
+        return (!nestedStickNodes ||
+            !Array.from(nestedStickNodes).some((stickNode) => stickNode.contains(target)));
+    }
+    return true;
 }
-function calculateWidth(anchorRef, position, align, _ref2) {
-  var left = _ref2.left, width = _ref2.width, right = _ref2.right;
-  if (!anchorRef) {
+function calculateWidth(anchorRef, position, align, { left, width, right }) {
+    if (!anchorRef) {
+        return 0;
+    }
+    invariant(document.documentElement, 'Could not find document root node.');
+    const scrollWidth = document.documentElement.scrollWidth;
+    const [, horizontalPosition] = position.split(' ');
+    invariant(horizontalPosition === 'left' ||
+        horizontalPosition === 'center' ||
+        horizontalPosition === 'right', `Expected horizontal position to be "left", "center", or "right" but got "${horizontalPosition}".`);
+    const positionAdjustments = {
+        left,
+        center: left + width / 2,
+        right,
+    };
+    const absLeft = scrollX(anchorRef) + positionAdjustments[horizontalPosition];
+    if (align.indexOf('left') !== -1) {
+        return scrollWidth - absLeft;
+    }
+    if (align.indexOf('right') !== -1) {
+        return absLeft;
+    }
+    if (align.indexOf('center') !== -1) {
+        return Math.min(absLeft, scrollWidth - absLeft) * 2;
+    }
     return 0;
-  }
-  invariant(document.documentElement, "Could not find document root node.");
-  var scrollWidth = document.documentElement.scrollWidth;
-  var _position$split = position.split(" "), _position$split2 = _slicedToArray(_position$split, 2), horizontalPosition = _position$split2[1];
-  invariant(horizontalPosition === "left" || horizontalPosition === "center" || horizontalPosition === "right", 'Expected horizontal position to be "left", "center", or "right" but got "'.concat(horizontalPosition, '".'));
-  var positionAdjustments = {
-    left,
-    center: left + width / 2,
-    right
-  };
-  var absLeft = scrollX(anchorRef) + positionAdjustments[horizontalPosition];
-  if (align.indexOf("left") !== -1) {
-    return scrollWidth - absLeft;
-  }
-  if (align.indexOf("right") !== -1) {
-    return absLeft;
-  }
-  if (align.indexOf("center") !== -1) {
-    return Math.min(absLeft, scrollWidth - absLeft) * 2;
-  }
-  return 0;
 }
-export { Stick as default };
+export default Stick;
+//# sourceMappingURL=Stick.js.map

es/StickContext.js

@@ -1,3 +0,3 @@
-import { createContext } from "react";
-var StickContext = /* @__PURE__ */ createContext(null);
-export { StickContext };
+import { createContext } from 'react';
+export const StickContext = createContext(null);
+//# sourceMappingURL=StickContext.js.map

es/StickInline.js

@@ -1,60 +0,48 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-import React from "react";
-import useStyles from "substyle";
-import "@babel/runtime/helpers/slicedToArray";
-import getModifiers from "./utils/getModifiers.js";
-var _excluded = ["node", "children", "component", "containerRef", "nestingKey", "align", "position", "style"];
-function StickInline(_ref) {
-  var node = _ref.node, children = _ref.children, component = _ref.component, containerRef = _ref.containerRef, nestingKey = _ref.nestingKey, align = _ref.align, position = _ref.position, style = _ref.style, rest = _objectWithoutProperties(_ref, _excluded);
-  var styles = useStyles(defaultStyle, {
-    style
-  }, getModifiers({
-    align,
-    position
-  }));
-  var Component = component || "div";
-  return /* @__PURE__ */ React.createElement(Component, _extends({}, rest, styles, {
-    ref: containerRef,
-    "data-sticknestingkey": nestingKey
-  }), children, node && /* @__PURE__ */ React.createElement("div", styles("node"), node));
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import useStyles from 'substyle';
+import { getModifiers } from './utils';
+function StickInline({ node, children, component, containerRef, nestingKey, align, position, style, ...rest }) {
+    const styles = useStyles(defaultStyle, { style }, getModifiers({ align, position }));
+    const Component = component || 'div';
+    return (_jsxs(Component, { ...rest, ...styles, ref: containerRef, "data-sticknestingkey": nestingKey, children: [children, node && _jsx("div", { ...styles('node'), children: node })] }));
 }
-var defaultStyle = {
-  position: "relative",
-  node: {
-    position: "absolute",
-    zIndex: 99,
-    textAlign: "left"
-  },
-  "&position-top": {
+const defaultStyle = {
+    position: 'relative',
     node: {
-      top: 0
-    }
-  },
-  "&position-middle": {
-    node: {
-      top: "50%"
-    }
-  },
-  "&position-bottom": {
-    node: {
-      top: "100%"
-    }
-  },
-  "&position-left": {
-    node: {
-      left: 0
-    }
-  },
-  "&position-center": {
-    node: {
-      left: "50%"
-    }
-  },
-  "&position-right": {
-    node: {
-      left: "100%"
-    }
-  }
+        position: 'absolute',
+        zIndex: 99,
+        textAlign: 'left',
+    },
+    '&position-top': {
+        node: {
+            top: 0,
+        },
+    },
+    '&position-middle': {
+        node: {
+            top: '50%',
+        },
+    },
+    '&position-bottom': {
+        node: {
+            top: '100%',
+        },
+    },
+    '&position-left': {
+        node: {
+            left: 0,
+        },
+    },
+    '&position-center': {
+        node: {
+            left: '50%',
+        },
+    },
+    '&position-right': {
+        node: {
+            left: '100%',
+        },
+    },
 };
-export { StickInline as default };
+export default StickInline;
+//# sourceMappingURL=StickInline.js.map

es/StickNode.js

@@ -1,62 +0,55 @@
-import _extends from "@babel/runtime/helpers/extends";
-import React, { forwardRef } from "react";
-import useStyles, { inline } from "substyle";
-import "@babel/runtime/helpers/slicedToArray";
-import getModifiers from "./utils/getModifiers.js";
-function StickNode(_ref, ref) {
-  var children = _ref.children, width = _ref.width, align = _ref.align, position = _ref.position, sameWidth = _ref.sameWidth;
-  var styles = useStyles(defaultStyle, {}, getModifiers({
-    align,
-    position,
-    sameWidth
-  }));
-  return /* @__PURE__ */ React.createElement("div", inline(styles, {
-    width
-  }), /* @__PURE__ */ React.createElement("div", _extends({}, styles("content"), {
-    ref
-  }), children));
-}
-var defaultStyle = {
-  position: "absolute",
-  right: 0,
-  bottom: 0,
-  content: {
-    position: "absolute",
-    display: "inline-block",
-    left: "inherit",
-    right: "inherit",
-    top: "inherit",
-    bottom: "inherit"
-  },
-  "&sameWidth": {
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import useStyles, { inline } from 'substyle';
+import { getModifiers } from './utils';
+const StickNode = forwardRef(function ({ children, width, align, position, sameWidth }, ref) {
+    const styles = useStyles(defaultStyle, {}, getModifiers({ align, position, sameWidth }));
+    return (_jsx("div", { ...inline(styles, { width }), children: _jsx("div", { ...styles('content'), ref: ref, children: children }) }));
+});
+const defaultStyle = {
+    position: 'absolute',
+    right: 0,
+    bottom: 0,
     content: {
-      display: "block",
-      width: "100%"
-    }
-  },
-  "&align-left": {
-    right: "auto",
-    left: 0
-  },
-  "&align-top": {
-    bottom: "auto",
-    top: 0
-  },
-  "&align-middle": {
-    content: {
-      transform: "translate(0, 50%)"
-    }
-  },
-  "&align-center": {
-    content: {
-      transform: "translate(50%, 0)"
+        // absolute position is needed as the stick node would otherwise
+        // cover up the base node and, for instance, make it impossible to
+        // click buttons
+        position: 'absolute',
+        display: 'inline-block',
+        left: 'inherit',
+        right: 'inherit',
+        top: 'inherit',
+        bottom: 'inherit',
     },
-    "&align-middle": {
-      content: {
-        transform: "translate(50%, 50%)"
-      }
-    }
-  }
+    '&sameWidth': {
+        content: {
+            display: 'block',
+            width: '100%',
+        },
+    },
+    '&align-left': {
+        right: 'auto',
+        left: 0,
+    },
+    '&align-top': {
+        bottom: 'auto',
+        top: 0,
+    },
+    '&align-middle': {
+        content: {
+            transform: 'translate(0, 50%)',
+        },
+    },
+    '&align-center': {
+        content: {
+            transform: 'translate(50%, 0)',
+        },
+        '&align-middle': {
+            content: {
+                transform: 'translate(50%, 50%)',
+            },
+        },
+    },
 };
-var StickNode$1 = /* @__PURE__ */ forwardRef(StickNode);
-export { StickNode$1 as default };
+export default StickNode;
+//# sourceMappingURL=StickNode.js.map

es/StickPortal.js

@@ -1,152 +0,140 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-import "requestidlecallback";
-import invariant from "invariant";
-import React, { createContext, forwardRef, useRef, useState, useEffect, useLayoutEffect, useCallback, useContext } from "react";
-import { createPortal } from "react-dom";
-import { inline } from "substyle";
-import { scrollY, scrollX } from "./utils/scroll.js";
-import "@babel/runtime/helpers/defineProperty";
-import useWatcher from "./hooks/useWatcher.js";
-var _excluded = ["children", "component", "style", "transportTo", "nestingKey", "node", "position", "containerRef", "updateOnAnimationFrame", "onReposition"];
-function StickPortal(_ref, _ref2) {
-  var children = _ref.children, component = _ref.component, style = _ref.style, transportTo = _ref.transportTo, nestingKey = _ref.nestingKey, node = _ref.node, position = _ref.position, containerRef = _ref.containerRef, updateOnAnimationFrame = _ref.updateOnAnimationFrame, onReposition = _ref.onReposition, rest = _objectWithoutProperties(_ref, _excluded);
-  var nodeRef = useRef();
-  var _useState = useState(null), _useState2 = _slicedToArray(_useState, 2), top = _useState2[0], setTop = _useState2[1];
-  var _useState3 = useState(null), _useState4 = _slicedToArray(_useState3, 2), left = _useState4[0], setLeft = _useState4[1];
-  var _useState5 = useState(!!node), _useState6 = _slicedToArray(_useState5, 2), visible = _useState6[0], setVisible = _useState6[1];
-  var _useHost = useHost(transportTo), _useHost2 = _slicedToArray(_useHost, 2), host = _useHost2[0], hostParent = _useHost2[1];
-  useEffect(function() {
-    if (nodeRef.current) {
-      onReposition(nodeRef.current);
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import 'requestidlecallback';
+import invariant from 'invariant';
+import { createContext, forwardRef, useCallback, useContext, useEffect, useLayoutEffect, useRef, useState, } from 'react';
+import { createPortal } from 'react-dom';
+import { inline } from 'substyle';
+import { useWatcher } from './hooks';
+import { scrollX, scrollY } from './utils';
+const StickPortal = forwardRef(function ({ children, component, style, transportTo, nestingKey, node, position, containerRef, updateOnAnimationFrame, onReposition, ...rest }, ref) {
+    const nodeRef = useRef();
+    const [top, setTop] = useState(null);
+    const [left, setLeft] = useState(null);
+    const [visible, setVisible] = useState(!!node);
+    const [host, hostParent] = useHost(transportTo);
+    useEffect(() => {
+        if (nodeRef.current) {
+            onReposition(nodeRef.current);
+        }
+    }, [onReposition, top, left]);
+    useEffect(() => {
+        setVisible(!!node);
+    }, [node]);
+    useLayoutEffect(() => {
+        if (visible) {
+            hostParent.appendChild(host);
+            return () => {
+                hostParent.removeChild(host);
+            };
+        }
+    }, [host, hostParent, visible]);
+    const measure = useCallback(() => {
+        const node = nodeRef.current;
+        if (!node || !visible) {
+            return;
+        }
+        const newTop = calculateTop(node, position, host);
+        const newLeft = calculateLeft(node, position, host);
+        if (newTop !== top) {
+            setTop(newTop);
+        }
+        if (newLeft !== left) {
+            setLeft(newLeft);
+        }
+    }, [host, left, position, top, visible]);
+    useWatcher(measure, { updateOnAnimationFrame, enabled: visible });
+    const Component = component || 'div';
+    return (_jsxs(Component, { ...rest, ...style, ref: (node) => {
+            if (typeof ref === 'function') {
+                ref(node);
+            }
+            else if (ref) {
+                ref.current = node;
+            }
+            nodeRef.current = node;
+        }, children: [children, top != null && left != null && (_jsx(PortalContext.Provider, { value: (host.parentNode || defaultRoot), children: createPortal(_jsx("div", { ref: containerRef, "data-sticknestingkey": nestingKey, ...inline(style('node'), {
+                        position: 'absolute',
+                        top,
+                        left,
+                    }), children: node }), host) }))] }));
+});
+invariant(document.body, 'Stick can only be used in a browser environment.');
+const defaultRoot = document.body;
+export const PortalContext = createContext(defaultRoot);
+export default StickPortal;
+function useHost(transportTo) {
+    const [host] = useState(() => document.createElement('div'));
+    const portalHost = useContext(PortalContext);
+    const hostParent = transportTo || portalHost;
+    invariant(hostParent, 'Could not determine a parent for the host node.');
+    return [host, hostParent];
+}
+function calculateTop(node, position, host) {
+    const { top, height, bottom } = node.getBoundingClientRect();
+    const fixedHost = getFixedParent(host);
+    let result = 0;
+    if (position.indexOf('top') !== -1) {
+        result = top;
     }
-  }, [onReposition, top, left]);
-  useEffect(function() {
-    setVisible(!!node);
-  }, [node]);
-  useLayoutEffect(function() {
-    if (visible) {
-      hostParent.appendChild(host);
-      return function() {
-        hostParent.removeChild(host);
-      };
+    if (position.indexOf('middle') !== -1) {
+        result = top + height / 2;
     }
-  }, [host, hostParent, visible]);
-  var measure = useCallback(function() {
-    var node2 = nodeRef.current;
-    if (!node2 || !visible) {
-      return;
+    if (position.indexOf('bottom') !== -1) {
+        result = bottom;
     }
-    var newTop = calculateTop(node2, position, host);
-    var newLeft = calculateLeft(node2, position, host);
-    if (newTop !== top) {
-      setTop(newTop);
+    if (fixedHost) {
+        const { top: hostTop } = fixedHost.getBoundingClientRect();
+        return result - hostTop;
     }
-    if (newLeft !== left) {
-      setLeft(newLeft);
+    return result + scrollY();
+}
+function calculateLeft(node, position, host) {
+    const { left, width, right } = node.getBoundingClientRect();
+    const fixedHost = getFixedParent(host);
+    const scrollHost = getScrollParent(node);
+    let result = 0;
+    if (position.indexOf('left') !== -1) {
+        result = left;
     }
-  }, [host, left, position, top, visible]);
-  useWatcher(measure, {
-    updateOnAnimationFrame,
-    enabled: visible
-  });
-  var Component = component || "div";
-  return /* @__PURE__ */ React.createElement(Component, _extends({}, rest, style, {
-    ref: function ref(node2) {
-      if (typeof _ref2 === "function") {
-        _ref2(node2);
-      } else {
-        _ref2.current = node2;
-      }
-      nodeRef.current = node2;
+    if (position.indexOf('center') !== -1) {
+        result = left + width / 2;
     }
-  }), children, top != null && left != null && /* @__PURE__ */ React.createElement(PortalContext.Provider, {
-    value: host.parentNode || defaultRoot
-  }, /* @__PURE__ */ createPortal(/* @__PURE__ */ React.createElement("div", _extends({
-    ref: containerRef,
-    "data-sticknestingkey": nestingKey
-  }, inline(style("node"), {
-    position: "absolute",
-    top,
-    left
-  })), node), host)));
+    if (position.indexOf('right') !== -1) {
+        result = right;
+    }
+    if (fixedHost) {
+        const { left: hostLeft } = fixedHost.getBoundingClientRect();
+        return result - hostLeft;
+    }
+    if (scrollHost) {
+        return result + scrollX(node) - scrollHost.scrollLeft;
+    }
+    return result + scrollX(node);
 }
-invariant(document.body, "Stick can only be used in a browser environment.");
-var defaultRoot = document.body;
-var PortalContext = /* @__PURE__ */ createContext(defaultRoot);
-var StickPortal$1 = /* @__PURE__ */ forwardRef(StickPortal);
-function useHost(transportTo) {
-  var _useState7 = useState(function() {
-    return document.createElement("div");
-  }), _useState8 = _slicedToArray(_useState7, 1), host = _useState8[0];
-  var portalHost = useContext(PortalContext);
-  var hostParent = transportTo || portalHost;
-  invariant(hostParent, "Could not determine a parent for the host node.");
-  return [host, hostParent];
-}
-function calculateTop(node, position, host) {
-  var _node$getBoundingClie = node.getBoundingClientRect(), top = _node$getBoundingClie.top, height = _node$getBoundingClie.height, bottom = _node$getBoundingClie.bottom;
-  var fixedHost = getFixedParent(host);
-  var result = 0;
-  if (position.indexOf("top") !== -1) {
-    result = top;
-  }
-  if (position.indexOf("middle") !== -1) {
-    result = top + height / 2;
-  }
-  if (position.indexOf("bottom") !== -1) {
-    result = bottom;
-  }
-  if (fixedHost) {
-    var _fixedHost$getBoundin = fixedHost.getBoundingClientRect(), hostTop = _fixedHost$getBoundin.top;
-    return result - hostTop;
-  }
-  return result + scrollY();
-}
-function calculateLeft(node, position, host) {
-  var _node$getBoundingClie2 = node.getBoundingClientRect(), left = _node$getBoundingClie2.left, width = _node$getBoundingClie2.width, right = _node$getBoundingClie2.right;
-  var fixedHost = getFixedParent(host);
-  var scrollHost = getScrollParent(node);
-  var result = 0;
-  if (position.indexOf("left") !== -1) {
-    result = left;
-  }
-  if (position.indexOf("center") !== -1) {
-    result = left + width / 2;
-  }
-  if (position.indexOf("right") !== -1) {
-    result = right;
-  }
-  if (fixedHost) {
-    var _fixedHost$getBoundin2 = fixedHost.getBoundingClientRect(), hostLeft = _fixedHost$getBoundin2.left;
-    return result - hostLeft;
-  }
-  if (scrollHost) {
-    return result + scrollX(node) - scrollHost.scrollLeft;
-  }
-  return result + scrollX(node);
-}
 function getScrollParent(element) {
-  if (!element) {
-    return null;
-  }
-  if (element.nodeName === "BODY" || element.nodeName === "HTML") {
-    return null;
-  }
-  var style = getComputedStyle(element);
-  if (style.overflowX === "auto" || style.overflowX === "scroll") {
-    return element;
-  }
-  return element.parentNode instanceof Element ? getScrollParent(element.parentNode) : null;
+    if (!element) {
+        return null;
+    }
+    if (element.nodeName === 'BODY' || element.nodeName === 'HTML') {
+        return null;
+    }
+    const style = getComputedStyle(element);
+    if (style.overflowX === 'auto' || style.overflowX === 'scroll') {
+        return element;
+    }
+    return element.parentNode instanceof Element
+        ? getScrollParent(element.parentNode)
+        : null;
 }
 function getFixedParent(element) {
-  if (element.nodeName === "BODY" || element.nodeName === "HTML") {
-    return null;
-  }
-  if (getComputedStyle(element).position === "fixed") {
-    return element;
-  }
-  return element.parentNode instanceof Element ? getFixedParent(element.parentNode) : null;
+    if (element.nodeName === 'BODY' || element.nodeName === 'HTML') {
+        return null;
+    }
+    if (getComputedStyle(element).position === 'fixed') {
+        return element;
+    }
+    return element.parentNode instanceof Element
+        ? getFixedParent(element.parentNode)
+        : null;
 }
-export { PortalContext, StickPortal$1 as default };
+//# sourceMappingURL=StickPortal.js.map

es/utils/fit.js

@@ -1,38 +0,37 @@
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-var isPositionedToTop = function isPositionedToTop2(position) {
-  var _position$split = position.split(" "), _position$split2 = _slicedToArray(_position$split, 1), positionMarker = _position$split2[0];
-  return positionMarker === "top";
+export const isPositionedToTop = (position) => {
+    const [positionMarker] = position.split(' ');
+    return positionMarker === 'top';
 };
-var isPositionedToBottom = function isPositionedToBottom2(position) {
-  var _position$split3 = position.split(" "), _position$split4 = _slicedToArray(_position$split3, 1), positionMarker = _position$split4[0];
-  return positionMarker === "bottom";
+export const isPositionedToBottom = (position) => {
+    const [positionMarker] = position.split(' ');
+    return positionMarker === 'bottom';
 };
-var isPositionedToRight = function isPositionedToRight2(position) {
-  var positionMarker = position.split(" ")[1];
-  return positionMarker === "right";
+export const isPositionedToRight = (position) => {
+    const positionMarker = position.split(' ')[1];
+    return positionMarker === 'right';
 };
-var isPositionedToLeft = function isPositionedToLeft2(position) {
-  var positionMarker = position.split(" ")[1];
-  return positionMarker === "left";
+export const isPositionedToLeft = (position) => {
+    const positionMarker = position.split(' ')[1];
+    return positionMarker === 'left';
 };
-var fitsOnRight = function fitsOnRight2(nodeRef, anchorRef) {
-  var _nodeRef$getBoundingC = nodeRef.getBoundingClientRect(), nodeWidth = _nodeRef$getBoundingC.width;
-  var _anchorRef$getBoundin = anchorRef.getBoundingClientRect(), anchorRight = _anchorRef$getBoundin.right;
-  return anchorRight + nodeWidth <= window.innerWidth;
+export const fitsOnRight = (nodeRef, anchorRef) => {
+    const { width: nodeWidth } = nodeRef.getBoundingClientRect();
+    const { right: anchorRight } = anchorRef.getBoundingClientRect();
+    return anchorRight + nodeWidth <= window.innerWidth;
 };
-var fitsOnLeft = function fitsOnLeft2(nodeRef, anchorRef) {
-  var _nodeRef$getBoundingC2 = nodeRef.getBoundingClientRect(), nodeWidth = _nodeRef$getBoundingC2.width;
-  var _anchorRef$getBoundin2 = anchorRef.getBoundingClientRect(), anchorLeft = _anchorRef$getBoundin2.left;
-  return anchorLeft - nodeWidth >= 0;
+export const fitsOnLeft = (nodeRef, anchorRef) => {
+    const { width: nodeWidth } = nodeRef.getBoundingClientRect();
+    const { left: anchorLeft } = anchorRef.getBoundingClientRect();
+    return anchorLeft - nodeWidth >= 0;
 };
-var fitsOnTop = function fitsOnTop2(nodeRef, anchorRef) {
-  var _nodeRef$getBoundingC3 = nodeRef.getBoundingClientRect(), nodeHeight = _nodeRef$getBoundingC3.height;
-  var _anchorRef$getBoundin3 = anchorRef.getBoundingClientRect(), anchorTop = _anchorRef$getBoundin3.top;
-  return anchorTop - nodeHeight >= 0;
+export const fitsOnTop = (nodeRef, anchorRef) => {
+    const { height: nodeHeight } = nodeRef.getBoundingClientRect();
+    const { top: anchorTop } = anchorRef.getBoundingClientRect();
+    return anchorTop - nodeHeight >= 0;
 };
-var fitsOnBottom = function fitsOnBottom2(nodeRef, anchorRef) {
-  var _nodeRef$getBoundingC4 = nodeRef.getBoundingClientRect(), nodeHeight = _nodeRef$getBoundingC4.height;
-  var _anchorRef$getBoundin4 = anchorRef.getBoundingClientRect(), anchorBottom = _anchorRef$getBoundin4.bottom;
-  return anchorBottom + nodeHeight <= window.innerHeight;
+export const fitsOnBottom = (nodeRef, anchorRef) => {
+    const { height: nodeHeight } = nodeRef.getBoundingClientRect();
+    const { bottom: anchorBottom } = anchorRef.getBoundingClientRect();
+    return anchorBottom + nodeHeight <= window.innerHeight;
 };
-export { fitsOnBottom, fitsOnLeft, fitsOnRight, fitsOnTop, isPositionedToBottom, isPositionedToLeft, isPositionedToRight, isPositionedToTop };
+//# sourceMappingURL=fit.js.map

es/utils/getDefaultAlign.js

@@ -1,15 +0,14 @@
-var defaultAligns = {
-  "top left": "bottom left",
-  "top center": "bottom center",
-  "top right": "bottom right",
-  "middle left": "middle right",
-  "middle center": "middle center",
-  "middle right": "middle left",
-  "bottom left": "top left",
-  "bottom center": "top center",
-  "bottom right": "top right"
+const defaultAligns = {
+    'top left': 'bottom left',
+    'top center': 'bottom center',
+    'top right': 'bottom right',
+    'middle left': 'middle right',
+    'middle center': 'middle center',
+    'middle right': 'middle left',
+    'bottom left': 'top left',
+    'bottom center': 'top center',
+    'bottom right': 'top right',
 };
-var getDefaultAlign = function getDefaultAlign2(position) {
-  return defaultAligns[position];
-};
-export { getDefaultAlign as default };
+const getDefaultAlign = (position) => defaultAligns[position];
+export default getDefaultAlign;
+//# sourceMappingURL=getDefaultAlign.js.map

es/utils/getModifiers.js

@@ -1,13 +0,16 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import DEFAULT_POSITION from "../defaultPosition.js";
-import getDefaultAlign from "./getDefaultAlign.js";
-var getModifiers = function getModifiers2(_ref) {
-  var _ref2;
-  var align = _ref.align, position = _ref.position, sameWidth = _ref.sameWidth;
-  var finalPosition = position || DEFAULT_POSITION;
-  var _finalPosition$split = finalPosition.split(" "), _finalPosition$split2 = _slicedToArray(_finalPosition$split, 2), verticalPosition = _finalPosition$split2[0], horizontalPosition = _finalPosition$split2[1];
-  var _split = (align || getDefaultAlign(finalPosition)).split(" "), _split2 = _slicedToArray(_split, 2), verticalAlign = _split2[0], horizontalAlign = _split2[1];
-  return _ref2 = {}, _defineProperty(_ref2, "&position-".concat(horizontalPosition), true), _defineProperty(_ref2, "&position-".concat(verticalPosition), true), _defineProperty(_ref2, "&align-".concat(horizontalAlign), true), _defineProperty(_ref2, "&align-".concat(verticalAlign), true), _defineProperty(_ref2, "&sameWidth", !!sameWidth), _ref2;
+import DEFAULT_POSITION from '../defaultPosition';
+import getDefaultAlign from './getDefaultAlign';
+const getModifiers = ({ align, position, sameWidth }) => {
+    const finalPosition = position || DEFAULT_POSITION;
+    const [verticalPosition, horizontalPosition] = finalPosition.split(' ');
+    const [verticalAlign, horizontalAlign] = (align || getDefaultAlign(finalPosition)).split(' ');
+    return {
+        [`&position-${horizontalPosition}`]: true,
+        [`&position-${verticalPosition}`]: true,
+        [`&align-${horizontalAlign}`]: true,
+        [`&align-${verticalAlign}`]: true,
+        '&sameWidth': !!sameWidth,
+    };
 };
-export { getModifiers as default };
+export default getModifiers;
+//# sourceMappingURL=getModifiers.js.map

es/utils/scroll.js

@@ -1,16 +0,18 @@
-function scrollX(node) {
-  if (!node) {
+export function scrollX(node) {
+    if (!node) {
+        return 0;
+    }
+    if (!(node instanceof HTMLElement)) {
+        return 0;
+    }
+    return node.scrollLeft + scrollX(node.parentNode);
+}
+export function scrollY() {
+    if (typeof window !== 'undefined') {
+        return typeof window.scrollY === 'number'
+            ? window.scrollY
+            : window.pageYOffset;
+    }
     return 0;
-  }
-  if (!(node instanceof HTMLElement)) {
-    return 0;
-  }
-  return node.scrollLeft + scrollX(node.parentNode);
 }
-function scrollY() {
-  if (typeof window !== "undefined") {
-    return typeof window.scrollY === "number" ? window.scrollY : window.pageYOffset;
-  }
-  return 0;
-}
-export { scrollX, scrollY };
+//# sourceMappingURL=scroll.js.map

es/utils/uniqueId.js

@@ -1,5 +0,6 @@
-var counter = 1;
+let counter = 1;
 function uniqueId() {
-  return counter++;
+    return counter++;
 }
-export { uniqueId as default };
+export default uniqueId;
+//# sourceMappingURL=uniqueId.js.map

lib/defaultPosition.js

@@ -1,1 +0,17 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});var t="bottom left",e=["bottom left","bottom center","bottom right","middle left","middle center","middle right","top left","top center","top right"];exports.default=t;exports.positions=e;
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.positions = void 0;
+const DEFAULT_POSITION = 'bottom left';
+exports.default = DEFAULT_POSITION;
+exports.positions = [
+    'bottom left',
+    'bottom center',
+    'bottom right',
+    'middle left',
+    'middle center',
+    'middle right',
+    'top left',
+    'top center',
+    'top right',
+];
+//# sourceMappingURL=defaultPosition.js.map

lib/hooks/useAutoFlip.js

@@ -1,1 +0,119 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});var k=require("@babel/runtime/helpers/slicedToArray"),M=require("invariant"),d=require("react"),F=require("../defaultPosition.js"),r=require("../utils/fit.js"),z=require("../utils/getDefaultAlign.js");require("@babel/runtime/helpers/defineProperty");function L(u){return u&&typeof u=="object"&&"default"in u?u:{default:u}}var v=L(k),S=L(M),E=function(t,n,i,a){var l=d.useState(i),o=v.default(l,2),e=o[0],s=o[1],c=d.useState(a||z.default(i)),h=v.default(c,2),f=h[0],w=h[1];d.useEffect(function(){s(i),w(a||z.default(i))},[a,i]);var j=d.useCallback(function(y,A){var C=G(y,A,{enabled:t,initialPosition:i,initialAlign:a,currentPosition:e,currentAlign:f}),m=v.default(C,2),H=m[0],V=m[1],D=x(y,A,{enabled:n,initialPosition:i,initialAlign:a,currentPosition:H,currentAlign:V}),b=v.default(D,2),O=b[0],_=b[1];O!==e&&s(O),_!==f&&w(_)},[f,e,t,n,a,i]);return[e,f,j]},x=function(t,n,i){var a=i.enabled,l=i.initialPosition,o=i.currentPosition;i.initialAlign;var e=i.currentAlign;if(!a)return[o,e];var s=r.isPositionedToBottom(o),c=r.isPositionedToTop(o);if(r.isPositionedToBottom(l)){if(r.fitsOnBottom(t,n)){if(!s)return[p(o),T(e)]}else if(r.fitsOnTop(t,n)&&!c)return[T(o),p(e)]}if(r.isPositionedToTop(l)){if(r.fitsOnTop(t,n)){if(!c)return[T(o),p(e)]}else if(r.fitsOnBottom(t,n)&&!s)return[p(o),T(e)]}return[o,e]},G=function(t,n,i){var a=i.enabled,l=i.initialPosition,o=i.currentPosition;i.initialAlign;var e=i.currentAlign;if(!a)return[o,e];var s=r.isPositionedToLeft(o),c=r.isPositionedToRight(o);if(r.isPositionedToRight(l)){if(r.fitsOnRight(t,n)){if(!c)return[g(o),P(e)]}else if(r.fitsOnLeft(t,n)&&!s)return[P(o),g(e)]}if(r.isPositionedToLeft(l)){if(r.fitsOnLeft(t,n)){if(!s)return[P(o),g(e)]}else if(r.fitsOnRight(t,n)&&!c)return[g(o),P(e)]}return[o,e]},q=function(t,n){var i=F.positions.find(function(a){return a==="".concat(n," ").concat(t.split(" ")[1])});return S.default(i,'Could not determine new position. Old position "'.concat(t,'", new vertical target "').concat(n,'"')),i},B=function(t,n){var i=F.positions.find(function(a){return a==="".concat(t.split(" ")[0]," ").concat(n)});return S.default(i,'Could not determine new position. Old position "'.concat(t,'", new horizontal target "').concat(n,'"')),i},p=function(t){return q(t,"bottom")},T=function(t){return q(t,"top")},P=function(t){return B(t,"left")},g=function(t){return B(t,"right")};exports.default=E;
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const invariant_1 = __importDefault(require("invariant"));
+const react_1 = require("react");
+const defaultPosition_1 = require("../defaultPosition");
+const utils_1 = require("../utils");
+const useAutoFlip = (enableAutoHorizontalFlip, enableAutoVerticalFlip, initialPosition, initialAlign) => {
+    const [currentPosition, setCurrentPosition] = (0, react_1.useState)(initialPosition);
+    const [currentAlign, setCurrentAlign] = (0, react_1.useState)(initialAlign || (0, utils_1.getDefaultAlign)(initialPosition));
+    (0, react_1.useEffect)(() => {
+        setCurrentPosition(initialPosition);
+        setCurrentAlign(initialAlign || (0, utils_1.getDefaultAlign)(initialPosition));
+    }, [initialAlign, initialPosition]);
+    const checkAlignment = (0, react_1.useCallback)((nodeRef, anchorRef) => {
+        const [horizontalPosition, horizontalAlign] = autoFlipHorizontally(nodeRef, anchorRef, {
+            enabled: enableAutoHorizontalFlip,
+            initialPosition,
+            initialAlign,
+            currentPosition,
+            currentAlign,
+        });
+        const [verticalPosition, verticalAlign] = autoFlipVertically(nodeRef, anchorRef, {
+            enabled: enableAutoVerticalFlip,
+            initialPosition,
+            initialAlign,
+            currentPosition: horizontalPosition,
+            currentAlign: horizontalAlign,
+        });
+        if (verticalPosition !== currentPosition) {
+            setCurrentPosition(verticalPosition);
+        }
+        if (verticalAlign !== currentAlign) {
+            setCurrentAlign(verticalAlign);
+        }
+    }, [
+        currentAlign,
+        currentPosition,
+        enableAutoHorizontalFlip,
+        enableAutoVerticalFlip,
+        initialAlign,
+        initialPosition,
+    ]);
+    return [currentPosition, currentAlign, checkAlignment];
+};
+exports.default = useAutoFlip;
+const autoFlipVertically = (nodeRef, anchorRef, { enabled, initialPosition, currentPosition, initialAlign, currentAlign, }) => {
+    if (!enabled) {
+        return [currentPosition, currentAlign];
+    }
+    const positionedToBottom = (0, utils_1.isPositionedToBottom)(currentPosition);
+    const positionedToTop = (0, utils_1.isPositionedToTop)(currentPosition);
+    if ((0, utils_1.isPositionedToBottom)(initialPosition)) {
+        if ((0, utils_1.fitsOnBottom)(nodeRef, anchorRef)) {
+            if (!positionedToBottom) {
+                return [switchToBottom(currentPosition), switchToTop(currentAlign)];
+            }
+        }
+        else if ((0, utils_1.fitsOnTop)(nodeRef, anchorRef) && !positionedToTop) {
+            return [switchToTop(currentPosition), switchToBottom(currentAlign)];
+        }
+    }
+    if ((0, utils_1.isPositionedToTop)(initialPosition)) {
+        if ((0, utils_1.fitsOnTop)(nodeRef, anchorRef)) {
+            if (!positionedToTop) {
+                return [switchToTop(currentPosition), switchToBottom(currentAlign)];
+            }
+        }
+        else if ((0, utils_1.fitsOnBottom)(nodeRef, anchorRef) && !positionedToBottom) {
+            return [switchToBottom(currentPosition), switchToTop(currentAlign)];
+        }
+    }
+    return [currentPosition, currentAlign];
+};
+const autoFlipHorizontally = (nodeRef, anchorRef, { enabled, initialPosition, currentPosition, initialAlign, currentAlign, }) => {
+    if (!enabled) {
+        return [currentPosition, currentAlign];
+    }
+    const positionedToLeft = (0, utils_1.isPositionedToLeft)(currentPosition);
+    const positionedToRight = (0, utils_1.isPositionedToRight)(currentPosition);
+    if ((0, utils_1.isPositionedToRight)(initialPosition)) {
+        if ((0, utils_1.fitsOnRight)(nodeRef, anchorRef)) {
+            if (!positionedToRight) {
+                return [switchToRight(currentPosition), switchToLeft(currentAlign)];
+            }
+        }
+        else if ((0, utils_1.fitsOnLeft)(nodeRef, anchorRef) && !positionedToLeft) {
+            return [switchToLeft(currentPosition), switchToRight(currentAlign)];
+        }
+    }
+    if ((0, utils_1.isPositionedToLeft)(initialPosition)) {
+        if ((0, utils_1.fitsOnLeft)(nodeRef, anchorRef)) {
+            if (!positionedToLeft) {
+                return [switchToLeft(currentPosition), switchToRight(currentAlign)];
+            }
+        }
+        else if ((0, utils_1.fitsOnRight)(nodeRef, anchorRef) && !positionedToRight) {
+            return [switchToRight(currentPosition), switchToLeft(currentAlign)];
+        }
+    }
+    return [currentPosition, currentAlign];
+};
+const switchVerticalPosition = (position, target) => {
+    const newPosition = defaultPosition_1.positions.find((standardPosition) => standardPosition === `${target} ${position.split(' ')[1]}`);
+    (0, invariant_1.default)(newPosition, `Could not determine new position. Old position "${position}", new vertical target "${target}"`);
+    return newPosition;
+};
+const switchHorizontalPosition = (position, target) => {
+    const newPosition = defaultPosition_1.positions.find((standardPosition) => standardPosition === `${position.split(' ')[0]} ${target}`);
+    (0, invariant_1.default)(newPosition, `Could not determine new position. Old position "${position}", new horizontal target "${target}"`);
+    return newPosition;
+};
+const switchToBottom = (position) => switchVerticalPosition(position, 'bottom');
+const switchToTop = (position) => switchVerticalPosition(position, 'top');
+const switchToLeft = (position) => switchHorizontalPosition(position, 'left');
+const switchToRight = (position) => switchHorizontalPosition(position, 'right');
+//# sourceMappingURL=useAutoFlip.js.map

lib/hooks/useWatcher.js

@@ -1,1 +0,32 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});var c=require("react");function o(n,i){var t=i.updateOnAnimationFrame,r=i.enabled;c.useEffect(function(){var e,a;if(r&&typeof window.requestAnimationFrame!="undefined"){var u=function l(){n(),t?e=requestAnimationFrame(l):a=requestIdleCallback(l)};u()}return function(){e&&cancelAnimationFrame(e),a&&cancelIdleCallback(a)}},[t,n,r])}exports.default=o;
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("react");
+function useWatcher(watcher, { updateOnAnimationFrame, enabled }) {
+    (0, react_1.useEffect)(() => {
+        let animationFrameId;
+        let idleCallbackId;
+        // do not track in node
+        if (enabled && typeof window.requestAnimationFrame !== 'undefined') {
+            const callback = () => {
+                watcher();
+                if (updateOnAnimationFrame) {
+                    animationFrameId = requestAnimationFrame(callback);
+                }
+                else {
+                    idleCallbackId = requestIdleCallback(callback);
+                }
+            };
+            callback();
+        }
+        return () => {
+            if (animationFrameId) {
+                cancelAnimationFrame(animationFrameId);
+            }
+            if (idleCallbackId) {
+                cancelIdleCallback(idleCallbackId);
+            }
+        };
+    }, [updateOnAnimationFrame, watcher, enabled]);
+}
+exports.default = useWatcher;
+//# sourceMappingURL=useWatcher.js.map

lib/index.js

@@ -1,1 +0,11 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});var t=require("./Stick.js"),e=require("./StickPortal.js");exports.default=t.default;exports.PortalContext=e.PortalContext;
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PortalContext = exports.default = void 0;
+var Stick_1 = require("./Stick");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(Stick_1).default; } });
+var StickPortal_1 = require("./StickPortal");
+Object.defineProperty(exports, "PortalContext", { enumerable: true, get: function () { return StickPortal_1.PortalContext; } });
+//# sourceMappingURL=index.js.map

lib/Stick.js

@@ -1,1 +0,141 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});var ee=require("@babel/runtime/helpers/extends"),te=require("@babel/runtime/helpers/slicedToArray"),ie=require("@babel/runtime/helpers/objectWithoutProperties");require("requestidlecallback");var ne=require("invariant"),r=require("react"),re=require("substyle"),O=require("./StickContext.js"),ae=require("./StickInline.js"),z=require("./StickNode.js"),le=require("./StickPortal.js"),M=require("./defaultPosition.js"),ue=require("./hooks/useAutoFlip.js"),oe=require("./hooks/useWatcher.js"),se=require("./utils/scroll.js"),ce=require("./utils/getDefaultAlign.js"),de=require("./utils/getModifiers.js"),fe=require("./utils/uniqueId.js");function h(e){return e&&typeof e=="object"&&"default"in e?e:{default:e}}var $=h(ee),j=h(te),ve=h(ie),W=h(ne),p=h(r),me=h(re),pe=["inline","node","sameWidth","children","updateOnAnimationFrame","position","align","component","transportTo","autoFlipHorizontally","autoFlipVertically","onClickOutside","style","className","classNames"],he={node:{position:"absolute",zIndex:99,textAlign:"left"}};function ge(e){var s=e.inline,u=s===void 0?!1:s,i=e.node,o=e.sameWidth,l=o===void 0?!1:o,y=e.children,g=e.updateOnAnimationFrame,k=g===void 0?!1:g,S=e.position,c=e.align,b=e.component,f=e.transportTo,C=e.autoFlipHorizontally,H=C===void 0?!1:C,w=e.autoFlipVertically,K=w===void 0?!1:w,E=e.onClickOutside,I=e.style,V=e.className,D=e.classNames,P=ve.default(e,pe),B=r.useState(0),R=j.default(B,2),q=R[0],X=R[1],G=r.useState(function(){return fe.default()}),J=j.default(G,1),Q=J[0],A=[r.useContext(O.StickContext),Q].filter(function(t){return!!t}).join("_"),a=r.useRef(),v=r.useRef(),x=r.useRef(),U=ue.default(H,K,S||M.default,c||ce.default(S||M.default)),F=j.default(U,3),d=F[0],m=F[1],_=F[2],N=me.default(he,{style:I,className:V,classNames:D},de.default({position:d,align:m,sameWidth:l}));r.useEffect(function(){var t=function(){!v.current||!a.current||_(v.current,a.current)};return t(),window.addEventListener("scroll",t),function(){window.removeEventListener("scroll",t)}},[_]),r.useEffect(function(){var t=function(T){if(!!E){var L=T.target;L instanceof window.HTMLElement&&ye(a,x,L)&&E(T)}};return document.addEventListener("click",t,!0),function(){document.removeEventListener("click",t,!0)}},[E]);var Y=r.useCallback(function(){if(!!a.current){var t=a.current.getBoundingClientRect(),n=l?t.width:ke(a.current,d,m,t);n!==q&&X(n)}},[m,d,l,q]);oe.default(Y,{updateOnAnimationFrame:k,enabled:!!i});var Z=r.useCallback(function(){v.current&&a.current&&_(v.current,a.current)},[_]);return u?p.default.createElement(O.StickContext.Provider,{value:A},p.default.createElement(ae.default,$.default({},P,{position:d,align:m,style:N,node:i&&p.default.createElement(z.default,{width:q,position:d,align:m,sameWidth:l,ref:v},i),nestingKey:A,containerRef:function(n){a.current=n,x.current=n},component:b}),y)):p.default.createElement(O.StickContext.Provider,{value:A},p.default.createElement(le.default,$.default({},P,{updateOnAnimationFrame:k,transportTo:f,component:b,ref:function(n){W.default(!n||n instanceof Element,"Only HTML elements can be stick anchors."),a.current=n},position:d,node:i&&p.default.createElement(z.default,{width:q,position:d,align:m,sameWidth:l,ref:v},i),style:N,nestingKey:A,containerRef:x,onReposition:Z}),y))}function ye(e,s,u){if(e.current&&e.current.contains(u))return!1;var i=s.current&&s.current.getAttribute("data-sticknestingkey");if(i){var o=document.querySelectorAll("[data-stickNestingKey^='".concat(i,"']"));return!o||!Array.from(o).some(function(l){return l.contains(u)})}return!0}function ke(e,s,u,i){var o=i.left,l=i.width,y=i.right;if(!e)return 0;W.default(document.documentElement,"Could not find document root node.");var g=document.documentElement.scrollWidth,k=s.split(" "),S=j.default(k,2),c=S[1];W.default(c==="left"||c==="center"||c==="right",'Expected horizontal position to be "left", "center", or "right" but got "'.concat(c,'".'));var b={left:o,center:o+l/2,right:y},f=se.scrollX(e)+b[c];return u.indexOf("left")!==-1?g-f:u.indexOf("right")!==-1?f:u.indexOf("center")!==-1?Math.min(f,g-f)*2:0}exports.default=ge;
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+require("requestidlecallback");
+const invariant_1 = __importDefault(require("invariant"));
+const react_1 = require("react");
+const substyle_1 = __importDefault(require("substyle"));
+const StickContext_1 = require("./StickContext");
+const StickInline_1 = __importDefault(require("./StickInline"));
+const StickNode_1 = __importDefault(require("./StickNode"));
+const StickPortal_1 = __importDefault(require("./StickPortal"));
+const defaultPosition_1 = __importDefault(require("./defaultPosition"));
+const hooks_1 = require("./hooks");
+const utils_1 = require("./utils");
+const defaultStyles = {
+    node: {
+        position: 'absolute',
+        zIndex: 99,
+        textAlign: 'left',
+    },
+};
+function Stick({ inline = false, node, sameWidth = false, children, updateOnAnimationFrame = false, position, align, component, transportTo, autoFlipHorizontally = false, autoFlipVertically = false, onClickOutside, style, className, classNames, ...rest }) {
+    const [width, setWidth] = (0, react_1.useState)(0);
+    const [containerNestingKeyExtension] = (0, react_1.useState)(() => (0, utils_1.uniqueId)());
+    const nestingKey = [(0, react_1.useContext)(StickContext_1.StickContext), containerNestingKeyExtension]
+        .filter((key) => !!key)
+        .join('_');
+    const anchorRef = (0, react_1.useRef)();
+    const nodeRef = (0, react_1.useRef)(null);
+    const containerRef = (0, react_1.useRef)();
+    const [resolvedPosition, resolvedAlign, checkAlignment] = (0, hooks_1.useAutoFlip)(autoFlipHorizontally, autoFlipVertically, position || defaultPosition_1.default, align || (0, utils_1.getDefaultAlign)(position || defaultPosition_1.default));
+    const styles = (0, substyle_1.default)(defaultStyles, { style, className, classNames }, (0, utils_1.getModifiers)({
+        position: resolvedPosition,
+        align: resolvedAlign,
+        sameWidth,
+    }));
+    (0, react_1.useEffect)(() => {
+        const handleScroll = () => {
+            if (!nodeRef.current || !anchorRef.current) {
+                return;
+            }
+            checkAlignment(nodeRef.current, anchorRef.current);
+        };
+        handleScroll(); // Check alignment on first render
+        window.addEventListener('scroll', handleScroll);
+        return () => {
+            window.removeEventListener('scroll', handleScroll);
+        };
+    }, [checkAlignment]);
+    (0, react_1.useEffect)(() => {
+        const handleClickOutside = (ev) => {
+            if (!onClickOutside) {
+                return;
+            }
+            const { target } = ev;
+            if (target instanceof window.HTMLElement &&
+                isOutside(anchorRef, containerRef, target)) {
+                onClickOutside(ev);
+            }
+        };
+        document.addEventListener('click', handleClickOutside, true);
+        return () => {
+            document.removeEventListener('click', handleClickOutside, true);
+        };
+    }, [onClickOutside]);
+    const measure = (0, react_1.useCallback)(() => {
+        if (!anchorRef.current) {
+            return;
+        }
+        const boundingRect = anchorRef.current.getBoundingClientRect();
+        const newWidth = sameWidth
+            ? boundingRect.width
+            : calculateWidth(anchorRef.current, resolvedPosition, resolvedAlign, boundingRect);
+        if (newWidth !== width) {
+            setWidth(newWidth);
+        }
+    }, [resolvedAlign, resolvedPosition, sameWidth, width]);
+    (0, hooks_1.useWatcher)(measure, { updateOnAnimationFrame, enabled: !!node });
+    const handleReposition = (0, react_1.useCallback)(() => {
+        if (nodeRef.current && anchorRef.current) {
+            checkAlignment(nodeRef.current, anchorRef.current);
+        }
+    }, [checkAlignment]);
+    if (inline) {
+        return ((0, jsx_runtime_1.jsx)(StickContext_1.StickContext.Provider, { value: nestingKey, children: (0, jsx_runtime_1.jsx)(StickInline_1.default, { ...rest, position: resolvedPosition, align: resolvedAlign, style: styles, node: node && ((0, jsx_runtime_1.jsx)(StickNode_1.default, { width: width, position: resolvedPosition, align: resolvedAlign, sameWidth: sameWidth, ref: nodeRef, children: node })), nestingKey: nestingKey, containerRef: (node) => {
+                    anchorRef.current = node || undefined;
+                    containerRef.current = node || undefined;
+                }, component: component, children: children }) }));
+    }
+    return ((0, jsx_runtime_1.jsx)(StickContext_1.StickContext.Provider, { value: nestingKey, children: (0, jsx_runtime_1.jsx)(StickPortal_1.default, { ...rest, updateOnAnimationFrame: updateOnAnimationFrame, transportTo: transportTo, component: component, ref: (node) => {
+                (0, invariant_1.default)(!node || node instanceof Element, 'Only HTML elements can be stick anchors.');
+                anchorRef.current = node || undefined;
+            }, position: resolvedPosition, node: node && ((0, jsx_runtime_1.jsx)(StickNode_1.default, { width: width, position: resolvedPosition, align: resolvedAlign, sameWidth: sameWidth, ref: nodeRef, children: node })), style: styles, nestingKey: nestingKey, containerRef: containerRef, onReposition: handleReposition, children: children }) }));
+}
+function isOutside(anchorRef, containerRef, target) {
+    if (anchorRef.current && anchorRef.current.contains(target)) {
+        return false;
+    }
+    const nestingKey = containerRef.current &&
+        containerRef.current.getAttribute('data-sticknestingkey');
+    if (nestingKey) {
+        // Find all stick nodes nested inside our own stick node and check if the click
+        // happened on any of these (our own stick node will also be part of the query result)
+        const nestedStickNodes = document.querySelectorAll(`[data-stickNestingKey^='${nestingKey}']`);
+        return (!nestedStickNodes ||
+            !Array.from(nestedStickNodes).some((stickNode) => stickNode.contains(target)));
+    }
+    return true;
+}
+function calculateWidth(anchorRef, position, align, { left, width, right }) {
+    if (!anchorRef) {
+        return 0;
+    }
+    (0, invariant_1.default)(document.documentElement, 'Could not find document root node.');
+    const scrollWidth = document.documentElement.scrollWidth;
+    const [, horizontalPosition] = position.split(' ');
+    (0, invariant_1.default)(horizontalPosition === 'left' ||
+        horizontalPosition === 'center' ||
+        horizontalPosition === 'right', `Expected horizontal position to be "left", "center", or "right" but got "${horizontalPosition}".`);
+    const positionAdjustments = {
+        left,
+        center: left + width / 2,
+        right,
+    };
+    const absLeft = (0, utils_1.scrollX)(anchorRef) + positionAdjustments[horizontalPosition];
+    if (align.indexOf('left') !== -1) {
+        return scrollWidth - absLeft;
+    }
+    if (align.indexOf('right') !== -1) {
+        return absLeft;
+    }
+    if (align.indexOf('center') !== -1) {
+        return Math.min(absLeft, scrollWidth - absLeft) * 2;
+    }
+    return 0;
+}
+exports.default = Stick;
+//# sourceMappingURL=Stick.js.map

lib/StickContext.js

@@ -1,1 +0,6 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});var e=require("react"),t=e.createContext(null);exports.StickContext=t;
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StickContext = void 0;
+const react_1 = require("react");
+exports.StickContext = (0, react_1.createContext)(null);
+//# sourceMappingURL=StickContext.js.map

lib/StickInline.js

@@ -1,1 +0,53 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});var v=require("@babel/runtime/helpers/extends"),y=require("@babel/runtime/helpers/objectWithoutProperties"),b=require("react"),g=require("substyle");require("@babel/runtime/helpers/slicedToArray");var m=require("./utils/getModifiers.js");function t(e){return e&&typeof e=="object"&&"default"in e?e:{default:e}}var h=t(v),_=t(y),o=t(b),j=t(g),q=["node","children","component","containerRef","nestingKey","align","position","style"];function x(e){var i=e.node,r=e.children,l=e.component,a=e.containerRef,s=e.nestingKey,d=e.align,u=e.position,p=e.style,c=_.default(e,q),n=j.default(S,{style:p},m.default({align:d,position:u})),f=l||"div";return o.default.createElement(f,h.default({},c,n,{ref:a,"data-sticknestingkey":s}),r,i&&o.default.createElement("div",n("node"),i))}var S={position:"relative",node:{position:"absolute",zIndex:99,textAlign:"left"},"&position-top":{node:{top:0}},"&position-middle":{node:{top:"50%"}},"&position-bottom":{node:{top:"100%"}},"&position-left":{node:{left:0}},"&position-center":{node:{left:"50%"}},"&position-right":{node:{left:"100%"}}};exports.default=x;
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const substyle_1 = __importDefault(require("substyle"));
+const utils_1 = require("./utils");
+function StickInline({ node, children, component, containerRef, nestingKey, align, position, style, ...rest }) {
+    const styles = (0, substyle_1.default)(defaultStyle, { style }, (0, utils_1.getModifiers)({ align, position }));
+    const Component = component || 'div';
+    return ((0, jsx_runtime_1.jsxs)(Component, { ...rest, ...styles, ref: containerRef, "data-sticknestingkey": nestingKey, children: [children, node && (0, jsx_runtime_1.jsx)("div", { ...styles('node'), children: node })] }));
+}
+const defaultStyle = {
+    position: 'relative',
+    node: {
+        position: 'absolute',
+        zIndex: 99,
+        textAlign: 'left',
+    },
+    '&position-top': {
+        node: {
+            top: 0,
+        },
+    },
+    '&position-middle': {
+        node: {
+            top: '50%',
+        },
+    },
+    '&position-bottom': {
+        node: {
+            top: '100%',
+        },
+    },
+    '&position-left': {
+        node: {
+            left: 0,
+        },
+    },
+    '&position-center': {
+        node: {
+            left: '50%',
+        },
+    },
+    '&position-right': {
+        node: {
+            left: '100%',
+        },
+    },
+};
+exports.default = StickInline;
+//# sourceMappingURL=StickInline.js.map

lib/StickNode.js

@@ -1,1 +0,80 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});var f=require("@babel/runtime/helpers/extends"),r=require("react"),n=require("substyle");require("@babel/runtime/helpers/slicedToArray");var h=require("./utils/getModifiers.js");function e(t){return t&&typeof t=="object"&&"default"in t?t:{default:t}}var m=e(f),a=e(r),g=e(n);function b(t,l){var o=t.children,d=t.width,s=t.align,u=t.position,c=t.sameWidth,i=g.default(p,{},h.default({align:s,position:u,sameWidth:c}));return a.default.createElement("div",n.inline(i,{width:d}),a.default.createElement("div",m.default({},i("content"),{ref:l}),o))}var p={position:"absolute",right:0,bottom:0,content:{position:"absolute",display:"inline-block",left:"inherit",right:"inherit",top:"inherit",bottom:"inherit"},"&sameWidth":{content:{display:"block",width:"100%"}},"&align-left":{right:"auto",left:0},"&align-top":{bottom:"auto",top:0},"&align-middle":{content:{transform:"translate(0, 50%)"}},"&align-center":{content:{transform:"translate(50%, 0)"},"&align-middle":{content:{transform:"translate(50%, 50%)"}}}},v=r.forwardRef(b);exports.default=v;
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const substyle_1 = __importStar(require("substyle"));
+const utils_1 = require("./utils");
+const StickNode = (0, react_1.forwardRef)(function ({ children, width, align, position, sameWidth }, ref) {
+    const styles = (0, substyle_1.default)(defaultStyle, {}, (0, utils_1.getModifiers)({ align, position, sameWidth }));
+    return ((0, jsx_runtime_1.jsx)("div", { ...(0, substyle_1.inline)(styles, { width }), children: (0, jsx_runtime_1.jsx)("div", { ...styles('content'), ref: ref, children: children }) }));
+});
+const defaultStyle = {
+    position: 'absolute',
+    right: 0,
+    bottom: 0,
+    content: {
+        // absolute position is needed as the stick node would otherwise
+        // cover up the base node and, for instance, make it impossible to
+        // click buttons
+        position: 'absolute',
+        display: 'inline-block',
+        left: 'inherit',
+        right: 'inherit',
+        top: 'inherit',
+        bottom: 'inherit',
+    },
+    '&sameWidth': {
+        content: {
+            display: 'block',
+            width: '100%',
+        },
+    },
+    '&align-left': {
+        right: 'auto',
+        left: 0,
+    },
+    '&align-top': {
+        bottom: 'auto',
+        top: 0,
+    },
+    '&align-middle': {
+        content: {
+            transform: 'translate(0, 50%)',
+        },
+    },
+    '&align-center': {
+        content: {
+            transform: 'translate(50%, 0)',
+        },
+        '&align-middle': {
+            content: {
+                transform: 'translate(50%, 50%)',
+            },
+        },
+    },
+};
+exports.default = StickNode;
+//# sourceMappingURL=StickNode.js.map

lib/StickPortal.js

@@ -1,1 +0,146 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});var V=require("@babel/runtime/helpers/extends"),z=require("@babel/runtime/helpers/slicedToArray"),G=require("@babel/runtime/helpers/objectWithoutProperties");require("requestidlecallback");var I=require("invariant"),r=require("react"),J=require("react-dom"),Q=require("substyle"),R=require("./utils/scroll.js");require("@babel/runtime/helpers/defineProperty");var U=require("./hooks/useWatcher.js");function g(e){return e&&typeof e=="object"&&"default"in e?e:{default:e}}var k=g(V),b=g(z),Z=g(G),w=g(I),C=g(r),ee=["children","component","style","transportTo","nestingKey","node","position","containerRef","updateOnAnimationFrame","onReposition"];function te(e,t){var d=e.children,a=e.component,o=e.style,l=e.transportTo,c=e.nestingKey,i=e.node,n=e.position,u=e.containerRef,v=e.updateOnAnimationFrame,y=e.onReposition,j=Z.default(e,ee),S=r.useRef(),A=r.useState(null),q=b.default(A,2),p=q[0],F=q[1],W=r.useState(null),T=b.default(W,2),m=T[0],D=T[1],M=r.useState(!!i),E=b.default(M,2),h=E[0],X=E[1],K=ne(l),H=b.default(K,2),s=H[0],x=H[1];r.useEffect(function(){S.current&&y(S.current)},[y,p,m]),r.useEffect(function(){X(!!i)},[i]),r.useLayoutEffect(function(){if(h)return x.appendChild(s),function(){x.removeChild(s)}},[s,x,h]);var Y=r.useCallback(function(){var _=S.current;if(!(!_||!h)){var f=ae(_,n,s),N=oe(_,n,s);f!==p&&F(f),N!==m&&D(N)}},[s,m,n,p,h]);U.default(Y,{updateOnAnimationFrame:v,enabled:h});var $=a||"div";return C.default.createElement($,k.default({},j,o,{ref:function(f){typeof t=="function"?t(f):t.current=f,S.current=f}}),d,p!=null&&m!=null&&C.default.createElement(P.Provider,{value:s.parentNode||B},J.createPortal(C.default.createElement("div",k.default({ref:u,"data-sticknestingkey":c},Q.inline(o("node"),{position:"absolute",top:p,left:m})),i),s)))}w.default(document.body,"Stick can only be used in a browser environment.");var B=document.body,P=r.createContext(B),re=r.forwardRef(te);function ne(e){var t=r.useState(function(){return document.createElement("div")}),d=b.default(t,1),a=d[0],o=r.useContext(P),l=e||o;return w.default(l,"Could not determine a parent for the host node."),[a,l]}function ae(e,t,d){var a=e.getBoundingClientRect(),o=a.top,l=a.height,c=a.bottom,i=O(d),n=0;if(t.indexOf("top")!==-1&&(n=o),t.indexOf("middle")!==-1&&(n=o+l/2),t.indexOf("bottom")!==-1&&(n=c),i){var u=i.getBoundingClientRect(),v=u.top;return n-v}return n+R.scrollY()}function oe(e,t,d){var a=e.getBoundingClientRect(),o=a.left,l=a.width,c=a.right,i=O(d),n=L(e),u=0;if(t.indexOf("left")!==-1&&(u=o),t.indexOf("center")!==-1&&(u=o+l/2),t.indexOf("right")!==-1&&(u=c),i){var v=i.getBoundingClientRect(),y=v.left;return u-y}return n?u+R.scrollX(e)-n.scrollLeft:u+R.scrollX(e)}function L(e){if(!e||e.nodeName==="BODY"||e.nodeName==="HTML")return null;var t=getComputedStyle(e);return t.overflowX==="auto"||t.overflowX==="scroll"?e:e.parentNode instanceof Element?L(e.parentNode):null}function O(e){return e.nodeName==="BODY"||e.nodeName==="HTML"?null:getComputedStyle(e).position==="fixed"?e:e.parentNode instanceof Element?O(e.parentNode):null}exports.PortalContext=P;exports.default=re;
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PortalContext = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+require("requestidlecallback");
+const invariant_1 = __importDefault(require("invariant"));
+const react_1 = require("react");
+const react_dom_1 = require("react-dom");
+const substyle_1 = require("substyle");
+const hooks_1 = require("./hooks");
+const utils_1 = require("./utils");
+const StickPortal = (0, react_1.forwardRef)(function ({ children, component, style, transportTo, nestingKey, node, position, containerRef, updateOnAnimationFrame, onReposition, ...rest }, ref) {
+    const nodeRef = (0, react_1.useRef)();
+    const [top, setTop] = (0, react_1.useState)(null);
+    const [left, setLeft] = (0, react_1.useState)(null);
+    const [visible, setVisible] = (0, react_1.useState)(!!node);
+    const [host, hostParent] = useHost(transportTo);
+    (0, react_1.useEffect)(() => {
+        if (nodeRef.current) {
+            onReposition(nodeRef.current);
+        }
+    }, [onReposition, top, left]);
+    (0, react_1.useEffect)(() => {
+        setVisible(!!node);
+    }, [node]);
+    (0, react_1.useLayoutEffect)(() => {
+        if (visible) {
+            hostParent.appendChild(host);
+            return () => {
+                hostParent.removeChild(host);
+            };
+        }
+    }, [host, hostParent, visible]);
+    const measure = (0, react_1.useCallback)(() => {
+        const node = nodeRef.current;
+        if (!node || !visible) {
+            return;
+        }
+        const newTop = calculateTop(node, position, host);
+        const newLeft = calculateLeft(node, position, host);
+        if (newTop !== top) {
+            setTop(newTop);
+        }
+        if (newLeft !== left) {
+            setLeft(newLeft);
+        }
+    }, [host, left, position, top, visible]);
+    (0, hooks_1.useWatcher)(measure, { updateOnAnimationFrame, enabled: visible });
+    const Component = component || 'div';
+    return ((0, jsx_runtime_1.jsxs)(Component, { ...rest, ...style, ref: (node) => {
+            if (typeof ref === 'function') {
+                ref(node);
+            }
+            else if (ref) {
+                ref.current = node;
+            }
+            nodeRef.current = node;
+        }, children: [children, top != null && left != null && ((0, jsx_runtime_1.jsx)(exports.PortalContext.Provider, { value: (host.parentNode || defaultRoot), children: (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)("div", { ref: containerRef, "data-sticknestingkey": nestingKey, ...(0, substyle_1.inline)(style('node'), {
+                        position: 'absolute',
+                        top,
+                        left,
+                    }), children: node }), host) }))] }));
+});
+(0, invariant_1.default)(document.body, 'Stick can only be used in a browser environment.');
+const defaultRoot = document.body;
+exports.PortalContext = (0, react_1.createContext)(defaultRoot);
+exports.default = StickPortal;
+function useHost(transportTo) {
+    const [host] = (0, react_1.useState)(() => document.createElement('div'));
+    const portalHost = (0, react_1.useContext)(exports.PortalContext);
+    const hostParent = transportTo || portalHost;
+    (0, invariant_1.default)(hostParent, 'Could not determine a parent for the host node.');
+    return [host, hostParent];
+}
+function calculateTop(node, position, host) {
+    const { top, height, bottom } = node.getBoundingClientRect();
+    const fixedHost = getFixedParent(host);
+    let result = 0;
+    if (position.indexOf('top') !== -1) {
+        result = top;
+    }
+    if (position.indexOf('middle') !== -1) {
+        result = top + height / 2;
+    }
+    if (position.indexOf('bottom') !== -1) {
+        result = bottom;
+    }
+    if (fixedHost) {
+        const { top: hostTop } = fixedHost.getBoundingClientRect();
+        return result - hostTop;
+    }
+    return result + (0, utils_1.scrollY)();
+}
+function calculateLeft(node, position, host) {
+    const { left, width, right } = node.getBoundingClientRect();
+    const fixedHost = getFixedParent(host);
+    const scrollHost = getScrollParent(node);
+    let result = 0;
+    if (position.indexOf('left') !== -1) {
+        result = left;
+    }
+    if (position.indexOf('center') !== -1) {
+        result = left + width / 2;
+    }
+    if (position.indexOf('right') !== -1) {
+        result = right;
+    }
+    if (fixedHost) {
+        const { left: hostLeft } = fixedHost.getBoundingClientRect();
+        return result - hostLeft;
+    }
+    if (scrollHost) {
+        return result + (0, utils_1.scrollX)(node) - scrollHost.scrollLeft;
+    }
+    return result + (0, utils_1.scrollX)(node);
+}
+function getScrollParent(element) {
+    if (!element) {
+        return null;
+    }
+    if (element.nodeName === 'BODY' || element.nodeName === 'HTML') {
+        return null;
+    }
+    const style = getComputedStyle(element);
+    if (style.overflowX === 'auto' || style.overflowX === 'scroll') {
+        return element;
+    }
+    return element.parentNode instanceof Element
+        ? getScrollParent(element.parentNode)
+        : null;
+}
+function getFixedParent(element) {
+    if (element.nodeName === 'BODY' || element.nodeName === 'HTML') {
+        return null;
+    }
+    if (getComputedStyle(element).position === 'fixed') {
+        return element;
+    }
+    return element.parentNode instanceof Element
+        ? getFixedParent(element.parentNode)
+        : null;
+}
+//# sourceMappingURL=StickPortal.js.map

lib/utils/fit.js

@@ -1,1 +0,48 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});var a=require("@babel/runtime/helpers/slicedToArray");function u(o){return o&&typeof o=="object"&&"default"in o?o:{default:o}}var d=u(a),f=function(t){var i=t.split(" "),n=d.default(i,1),e=n[0];return e==="top"},g=function(t){var i=t.split(" "),n=d.default(i,1),e=n[0];return e==="bottom"},l=function(t){var i=t.split(" ")[1];return i==="right"},c=function(t){var i=t.split(" ")[1];return i==="left"},h=function(t,i){var n=t.getBoundingClientRect(),e=n.width,r=i.getBoundingClientRect(),s=r.right;return s+e<=window.innerWidth},p=function(t,i){var n=t.getBoundingClientRect(),e=n.width,r=i.getBoundingClientRect(),s=r.left;return s-e>=0},v=function(t,i){var n=t.getBoundingClientRect(),e=n.height,r=i.getBoundingClientRect(),s=r.top;return s-e>=0},B=function(t,i){var n=t.getBoundingClientRect(),e=n.height,r=i.getBoundingClientRect(),s=r.bottom;return s+e<=window.innerHeight};exports.fitsOnBottom=B;exports.fitsOnLeft=p;exports.fitsOnRight=h;exports.fitsOnTop=v;exports.isPositionedToBottom=g;exports.isPositionedToLeft=c;exports.isPositionedToRight=l;exports.isPositionedToTop=f;
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.fitsOnBottom = exports.fitsOnTop = exports.fitsOnLeft = exports.fitsOnRight = exports.isPositionedToLeft = exports.isPositionedToRight = exports.isPositionedToBottom = exports.isPositionedToTop = void 0;
+const isPositionedToTop = (position) => {
+    const [positionMarker] = position.split(' ');
+    return positionMarker === 'top';
+};
+exports.isPositionedToTop = isPositionedToTop;
+const isPositionedToBottom = (position) => {
+    const [positionMarker] = position.split(' ');
+    return positionMarker === 'bottom';
+};
+exports.isPositionedToBottom = isPositionedToBottom;
+const isPositionedToRight = (position) => {
+    const positionMarker = position.split(' ')[1];
+    return positionMarker === 'right';
+};
+exports.isPositionedToRight = isPositionedToRight;
+const isPositionedToLeft = (position) => {
+    const positionMarker = position.split(' ')[1];
+    return positionMarker === 'left';
+};
+exports.isPositionedToLeft = isPositionedToLeft;
+const fitsOnRight = (nodeRef, anchorRef) => {
+    const { width: nodeWidth } = nodeRef.getBoundingClientRect();
+    const { right: anchorRight } = anchorRef.getBoundingClientRect();
+    return anchorRight + nodeWidth <= window.innerWidth;
+};
+exports.fitsOnRight = fitsOnRight;
+const fitsOnLeft = (nodeRef, anchorRef) => {
+    const { width: nodeWidth } = nodeRef.getBoundingClientRect();
+    const { left: anchorLeft } = anchorRef.getBoundingClientRect();
+    return anchorLeft - nodeWidth >= 0;
+};
+exports.fitsOnLeft = fitsOnLeft;
+const fitsOnTop = (nodeRef, anchorRef) => {
+    const { height: nodeHeight } = nodeRef.getBoundingClientRect();
+    const { top: anchorTop } = anchorRef.getBoundingClientRect();
+    return anchorTop - nodeHeight >= 0;
+};
+exports.fitsOnTop = fitsOnTop;
+const fitsOnBottom = (nodeRef, anchorRef) => {
+    const { height: nodeHeight } = nodeRef.getBoundingClientRect();
+    const { bottom: anchorBottom } = anchorRef.getBoundingClientRect();
+    return anchorBottom + nodeHeight <= window.innerHeight;
+};
+exports.fitsOnBottom = fitsOnBottom;
+//# sourceMappingURL=fit.js.map

lib/utils/getDefaultAlign.js

@@ -1,1 +0,16 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});var e={"top left":"bottom left","top center":"bottom center","top right":"bottom right","middle left":"middle right","middle center":"middle center","middle right":"middle left","bottom left":"top left","bottom center":"top center","bottom right":"top right"},l=function(t){return e[t]};exports.default=l;
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const defaultAligns = {
+    'top left': 'bottom left',
+    'top center': 'bottom center',
+    'top right': 'bottom right',
+    'middle left': 'middle right',
+    'middle center': 'middle center',
+    'middle right': 'middle left',
+    'bottom left': 'top left',
+    'bottom center': 'top center',
+    'bottom right': 'top right',
+};
+const getDefaultAlign = (position) => defaultAligns[position];
+exports.default = getDefaultAlign;
+//# sourceMappingURL=getDefaultAlign.js.map

lib/utils/getModifiers.js

@@ -1,1 +0,21 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});var y=require("@babel/runtime/helpers/defineProperty"),b=require("@babel/runtime/helpers/slicedToArray"),h=require("../defaultPosition.js"),A=require("./getDefaultAlign.js");function u(t){return t&&typeof t=="object"&&"default"in t?t:{default:t}}var i=u(y),n=u(b),m=function(a){var e,s=a.align,d=a.position,f=a.sameWidth,r=d||h.default,c=r.split(" "),l=n.default(c,2),p=l[0],v=l[1],g=(s||A.default(r)).split(" "),o=n.default(g,2),_=o[0],P=o[1];return e={},i.default(e,"&position-".concat(v),!0),i.default(e,"&position-".concat(p),!0),i.default(e,"&align-".concat(P),!0),i.default(e,"&align-".concat(_),!0),i.default(e,"&sameWidth",!!f),e};exports.default=m;
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const defaultPosition_1 = __importDefault(require("../defaultPosition"));
+const getDefaultAlign_1 = __importDefault(require("./getDefaultAlign"));
+const getModifiers = ({ align, position, sameWidth }) => {
+    const finalPosition = position || defaultPosition_1.default;
+    const [verticalPosition, horizontalPosition] = finalPosition.split(' ');
+    const [verticalAlign, horizontalAlign] = (align || (0, getDefaultAlign_1.default)(finalPosition)).split(' ');
+    return {
+        [`&position-${horizontalPosition}`]: true,
+        [`&position-${verticalPosition}`]: true,
+        [`&align-${horizontalAlign}`]: true,
+        [`&align-${verticalAlign}`]: true,
+        '&sameWidth': !!sameWidth,
+    };
+};
+exports.default = getModifiers;
+//# sourceMappingURL=getModifiers.js.map

lib/utils/scroll.js

@@ -1,1 +0,23 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});function r(e){return!e||!(e instanceof HTMLElement)?0:e.scrollLeft+r(e.parentNode)}function t(){return typeof window!="undefined"?typeof window.scrollY=="number"?window.scrollY:window.pageYOffset:0}exports.scrollX=r;exports.scrollY=t;
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.scrollY = exports.scrollX = void 0;
+function scrollX(node) {
+    if (!node) {
+        return 0;
+    }
+    if (!(node instanceof HTMLElement)) {
+        return 0;
+    }
+    return node.scrollLeft + scrollX(node.parentNode);
+}
+exports.scrollX = scrollX;
+function scrollY() {
+    if (typeof window !== 'undefined') {
+        return typeof window.scrollY === 'number'
+            ? window.scrollY
+            : window.pageYOffset;
+    }
+    return 0;
+}
+exports.scrollY = scrollY;
+//# sourceMappingURL=scroll.js.map

lib/utils/uniqueId.js

@@ -1,1 +0,8 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});var e=1;function u(){return e++}exports.default=u;
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+let counter = 1;
+function uniqueId() {
+    return counter++;
+}
+exports.default = uniqueId;
+//# sourceMappingURL=uniqueId.js.map

package.json

 {
   "name": "react-stick",
-  "version": "4.2.2",
+  "version": "5.0.0-rc1",
   "description": "React component to stick a portaled node to an anchor node",
@@ -17,52 +17,49 @@ "main": "lib/index.js",
     "prebuild": "npm run clean",
-    "build": "vite build",
-    "postbuild": "flow-copy-source -v src lib && flow-copy-source -v src es",
+    "build": "tsc -p ./src/tsconfig.json --outdir ./es && tsc -p ./src/tsconfig.json --module commonJS --outdir ./lib ",
     "prepublishOnly": "npm run build",
-    "build-demo": "webpack",
-    "clean": "rimraf coverage es lib demo/dist build",
-    "flow": "flow check",
-    "format": "prettier --write --no-semi --single-quote --trailing-comma es5 \"{src,stories}/**/*.js\"",
-    "lint": "eslint --max-warnings=0 --ext .js src tests demo/src",
+    "build-demo": "NODE_ENV=PRODUCTION webpack --config ./demo/webpack.config.js",
+    "clean": "rimraf coverage es lib build",
+    "_format": "prettier --write --no-semi --single-quote --trailing-comma es5 \"{src,stories}/**/*.js\"",
+    "lint": "eslint --max-warnings=0 --ext .ts --ext .tsx src tests demo/src",
     "prenow-build": "npm run build",
-    "now-build": "webpack",
-    "start": "NODE_ENV=development webpack server",
+    "now-build": "npm run build-demo",
+    "start": "NODE_ENV=development webpack server --mode=development --config demo/webpack.config.js",
     "semantic-release": "semantic-release",
     "semantic-release-preview": "semantic-release-github-pr",
-    "test": "NODE_ENV=test karma start"
+    "test": "NODE_ENV=test karma start ./tests/karma.conf.js",
+    "prepare": "husky install"
   },
   "dependencies": {
-    "@babel/runtime": "^7.17.9",
+    "@types/invariant": "^2.2.35",
     "invariant": "^2.2.4",
     "requestidlecallback": "^0.3.0",
-    "substyle": "^9.1.0"
+    "substyle": "^9.4.1"
   },
   "devDependencies": {
-    "@babel/core": "7.17.10",
-    "@babel/plugin-proposal-object-rest-spread": "7.17.3",
-    "@babel/plugin-transform-runtime": "7.17.10",
-    "@babel/preset-env": "7.17.10",
-    "@babel/preset-flow": "7.16.7",
-    "@babel/preset-react": "7.16.7",
-    "@testing-library/react": "12.1.5",
-    "@vitejs/plugin-react": "1.3.2",
+    "@babel/core": "7.17.12",
+    "@babel/preset-env": "7.17.12",
+    "@babel/preset-react": "7.17.12",
+    "@babel/preset-typescript": "^7.17.12",
+    "@testing-library/react": "^12.1.5",
+    "@types/expect": "^1.20.4",
+    "@types/mocha": "^9.1.1",
     "babel-eslint": "10.1.0",
-    "babel-loader": "8.2.5",
+    "babel-loader": "^8.2.5",
     "babel-plugin-istanbul": "6.1.1",
-    "babel-plugin-syntax-dynamic-import": "6.18.0",
     "condition-circle": "2.0.2",
     "core-js": "3.22.5",
-    "eslint": "7.32.0",
+    "eslint": "8.15.0",
+    "eslint-config-prettier": "^8.5.0",
     "eslint-config-react-app": "7.0.1",
-    "eslint-plugin-flowtype": "8.0.3",
     "eslint-plugin-import": "2.26.0",
     "eslint-plugin-jsx-a11y": "6.5.1",
+    "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-react": "7.29.4",
     "eslint-plugin-react-hooks": "4.5.0",
     "expect": "1.20.2",
-    "flow-bin": "0.133.0",
-    "flow-copy-source": "2.0.9",
     "glamor": "2.20.40",
     "html-webpack-harddisk-plugin": "2.0.0",
-    "html-webpack-plugin": "4.5.2",
-    "karma": "6.3.19",
+    "html-webpack-plugin": "5.5.0",
+    "husky": "^8.0.1",
+    "karma": "6.3.20",
     "karma-chrome-launcher": "3.1.1",
@@ -74,12 +71,11 @@ "karma-coverage": "2.2.0",
     "karma-webpack": "5.0.0",
+    "lint-staged": "^12.4.1",
     "mocha": "10.0.0",
     "prettier": "2.6.2",
-    "react": "16.14.0",
-    "react-dom": "16.14.0",
-    "regenerator-runtime": "0.13.9",
     "rimraf": "3.0.2",
     "semantic-release": "19.0.2",
     "substyle-glamor": "4.1.2",
-    "vite": "2.9.8",
-    "webpack": "4.46.0",
+    "ts-loader": "^9.3.0",
+    "typescript": "^4.6.4",
+    "webpack": "5.72.1",
     "webpack-cli": "4.9.2",
@@ -108,3 +104,9 @@ "webpack-dev-server": "4.9.0"
     "npm": ">=8.x"
+  },
+  "lint-staged": {
+    "*.{js,ts,tsx}": [
+      "eslint --max-warnings 0 --fix"
+    ],
+    "*.{json,md,yaml,yml}": "prettier --write"
   }
 }

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

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

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

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 2 instances in 1 package

Improved metrics

Total package byte prevSize

146136

increased by27.74%

Dev dependency count

43

decreased by-6.52%

Number of package files

139

increased by113.85%

Lines of code

1644

increased by111.86%

Number of low quality alerts

2

decreased by-77.78%

Worsened metrics

Number of medium supply chain risk alerts

2

increased byInfinity%

Dependency changes

• + Added@types/invariant@^2.2.35

• + Added@types/invariant@2.2.37(transitive)

• - Removed@babel/runtime@^7.17.9

• Updatedsubstyle@^9.4.1