@integreat-app/react-sticky-headroom 1.2.3 → 2.1.0

package/index.js

@@ -1,259 +1,172 @@
-"use strict";
-
-function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var React = _interopRequireWildcard(require("react"));
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-var UPWARDS = 'up';
-var DOWNWARDS = 'down';
-var UNPINNED = 'unpinned';
-var PINNED = 'pinned';
-var STATIC = 'static';
-var NO_TRANSITION = 'none';
-var NORMAL_TRANSITION = 'normal';
-var PINNED_TO_STATIC = 'pinned-to-static';
-var HeaderWrapper = _styledComponents.default.div.withConfig({
-  displayName: "Headroom__HeaderWrapper",
-  componentId: "sc-16d3zk-0"
-})(["position:", ";top:", "px;z-index:", ";transform:translateY(", "px);animation-duration:0.2s;animation-timing-function:ease-out;", " ", " ", ""], function (props) {
-  return props.positionStickyDisabled ? 'static' : 'sticky';
-}, function (props) {
-  return props.top;
-}, function (props) {
-  return props.zIndex;
-}, function (props) {
-  return props.translateY;
-}, function (props) {
-  return props.transition === NORMAL_TRANSITION && !props.static ? 'transition: transform 0.2s ease-out;' : '';
-}, function (props) {
-  return props.transition === PINNED_TO_STATIC ? (0, _styledComponents.css)(["animation-name:", ";"], keyframesMoveUpFrom(props.animateUpFrom)) : '';
-}, function (props) {
-  return props.static ? 'transition: none;' : '';
-});
-var keyframesMoveUpFrom = function keyframesMoveUpFrom(from) {
-  return (0, _styledComponents.keyframes)(["from{transform:translateY(", "px)}to{transform:translateY(0)}"], Math.max(from, 0));
-};
-var Headroom = /*#__PURE__*/function (_React$PureComponent) {
-  _inherits(Headroom, _React$PureComponent);
-  var _super = _createSuper(Headroom);
-  function Headroom() {
-    var _this;
-    _classCallCheck(this, Headroom);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    _this = _super.call.apply(_super, [this].concat(args));
-    _defineProperty(_assertThisInitialized(_this), "state", {
-      mode: STATIC,
-      transition: NO_TRANSITION,
-      animateUpFrom: null
-    });
-    _defineProperty(_assertThisInitialized(_this), "lastKnownScrollTop", 0);
-    _defineProperty(_assertThisInitialized(_this), "update", function () {
-      var currentScrollTop = _this.getScrollTop();
-      var newState = {};
-      if (currentScrollTop === _this.lastKnownScrollTop) {
-        return;
-      }
-      var direction = _this.lastKnownScrollTop < currentScrollTop ? DOWNWARDS : UPWARDS;
-      newState.mode = _this.determineMode(currentScrollTop, direction);
-      newState.transition = _this.determineTransition(newState.mode, direction);
-      var _this$props = _this.props,
-        onStickyTopChanged = _this$props.onStickyTopChanged,
-        height = _this$props.height,
-        scrollHeight = _this$props.scrollHeight,
-        pinStart = _this$props.pinStart;
-      if (_this.state.mode === PINNED && newState.mode === STATIC) {
-        // animation in the special case from pinned to static
-        newState.animateUpFrom = currentScrollTop - pinStart;
-      }
-      if (onStickyTopChanged && newState.mode !== _this.state.mode && height) {
-        onStickyTopChanged(Headroom.calcStickyTop(newState.mode, height, scrollHeight));
-      }
-      _this.setState(newState);
-      _this.lastKnownScrollTop = currentScrollTop;
-    });
-    _defineProperty(_assertThisInitialized(_this), "handleEvent", function () {
-      window.requestAnimationFrame(_this.update);
-    });
-    return _this;
-  }
-  _createClass(Headroom, [{
-    key: "getScrollTop",
-    value:
+import React from 'react';
+import styled, { css, keyframes } from 'styled-components';
+const DIRECTION_UP = 'up';
+const DIRECTION_DOWN = 'down';
+const MODE_UNPINNED = 'unpinned';
+const MODE_PINNED = 'pinned';
+const MODE_STATIC = 'static';
+const TRANSITION_NONE = 'none';
+const TRANSITION_NORMAL = 'normal';
+const TRANSITION_PINNED_TO_STATIC = 'pinned-to-static';
+const HeaderWrapper = styled.div([
+    "position:",
+    ";top:",
+    "px;z-index:",
+    ";transform:translateY(",
+    "px);animation-duration:0.2s;animation-timing-function:ease-out;",
+    " ",
+    " ",
+    ""
+], (props)=>props.$positionStickyDisabled ? 'static' : 'sticky', (props)=>props.$top, (props)=>props.$zIndex, (props)=>props.$translateY, (props)=>props.$transition === TRANSITION_NORMAL && !props.$static ? 'transition: transform 0.2s ease-out;' : '', (props)=>props.$transition === TRANSITION_PINNED_TO_STATIC && props.$animateUpFrom !== null ? css([
+        "animation-name:",
+        ";"
+    ], keyframesMoveUpFrom(props.$animateUpFrom)) : '', (props)=>props.$static ? 'transition: none;' : '');
+const keyframesMoveUpFrom = (from)=>keyframes([
+        "from{transform:translateY(",
+        "px)}to{transform:translateY(0)}"
+    ], Math.max(from, 0));
+class Headroom extends React.PureComponent {
+    static defaultProps = {
+        pinStart: 0,
+        zIndex: 1,
+        parent: window.document.documentElement
+    };
+    state = {
+        mode: MODE_STATIC,
+        transition: TRANSITION_NONE,
+        animateUpFrom: null
+    };
+    /** the very last scrollTop which we know about (to determine direction changes) */ lastKnownScrollTop = 0;
     /**
-     * @returns {number} the current scrollTop position of the window
-     */
-    function getScrollTop() {
-      var parent = this.props.parent;
-      if (parent && parent.scrollTop !== undefined && parent !== document.documentElement) {
-        return parent.scrollTop;
-      }
-      if (parent !== document.documentElement) {
-        console.warn('Could not find parent for StickyHeadroom. Defaulting to window, documentElement or body.');
-      }
-      if (window.pageYOffset !== undefined) {
+   * @returns {number} the current scrollTop position of the window
+   */ getScrollTop() {
+        const parent = this.props.parent;
+        if (parent && parent.scrollTop !== undefined && parent !== document.documentElement) {
+            return parent.scrollTop;
+        }
+        if (parent !== document.documentElement) {
+            console.warn('Could not determine scrollTop from parent for StickyHeadroom. Defaulting to window.pageYOffset.');
+        }
+        if (window.pageYOffset === undefined) {
+            console.error('window.pageYOffset is undefined. Defaulting to 0.');
+            return 0;
+        }
         return window.pageYOffset;
-      } else if (window.scrollTop !== undefined) {
-        return window.scrollTop;
-      } else if (document.documentElement) {
-        return document.documentElement.scrollTop;
-      } else if (document.body) {
-        return document.body.scrollTop;
-      } else {
-        throw new Error('Could not determine scrollTop!');
-      }
     }
-  }, {
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      this.addScrollListener(this.props.parent);
+    componentDidMount() {
+        this.addScrollListener(this.props.parent);
     }
-  }, {
-    key: "addScrollListener",
-    value: function addScrollListener(parent) {
-      if (parent === window.document.documentElement) {
-        window.addEventListener('scroll', this.handleEvent);
-      } else if (parent) {
-        parent.addEventListener('scroll', this.handleEvent);
-      } else {
-        console.debug('Property parent of Headroom is null. Assuming, parent will be set soon...');
-      }
+    addScrollListener(parent) {
+        if (parent === window.document.documentElement) {
+            window.addEventListener('scroll', this.handleEvent);
+        } else if (parent) {
+            parent.addEventListener('scroll', this.handleEvent);
+        } else {
+            console.debug("'parent' prop of Headroom is null. Assuming, it will be set soon...");
+        }
     }
-  }, {
-    key: "removeScrollListener",
-    value: function removeScrollListener(parent) {
-      if (parent === window.document.documentElement) {
-        window.removeEventListener('scroll', this.handleEvent);
-      } else if (parent) {
-        parent.removeEventListener('scroll', this.handleEvent);
-      }
+    removeScrollListener(parent) {
+        if (parent === window.document.documentElement) {
+            window.removeEventListener('scroll', this.handleEvent);
+        } else if (parent) {
+            parent.removeEventListener('scroll', this.handleEvent);
+        }
     }
-  }, {
-    key: "componentDidUpdate",
-    value: function componentDidUpdate(prevProps) {
-      if (prevProps.parent !== this.props.parent) {
-        this.removeScrollListener(prevProps.parent);
-        this.addScrollListener(this.props.parent);
-      }
+    componentDidUpdate(prevProps) {
+        if (prevProps.parent !== this.props.parent) {
+            this.removeScrollListener(prevProps.parent);
+            this.addScrollListener(this.props.parent);
+        }
     }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      this.removeScrollListener(this.props.parent);
+    componentWillUnmount() {
+        this.removeScrollListener(this.props.parent);
     }
-
     /**
-     * If we're already static and pinStart + scrollHeight >= scrollTop, then we should stay static.
-     * If we're not already static, then we should set the header static, only when pinStart >= scrollTop (regardless of
-     * scrollHeight, so the header doesn't jump up, when scrolling upwards to the trigger).
-     * Else we shouldn't set it static.
-     * @param scrollTop the currentScrollTop position
-     * @param direction the current direction
-     * @returns {boolean} if we should set the header static
-     */
-  }, {
-    key: "shouldSetStatic",
-    value: function shouldSetStatic(scrollTop, direction) {
-      if (this.state.mode === STATIC || this.state.mode === PINNED && direction === DOWNWARDS) {
-        return this.props.pinStart + this.props.scrollHeight >= scrollTop;
-      } else {
-        return this.props.pinStart >= scrollTop;
-      }
+   * If we're already static and pinStart + scrollHeight >= scrollTop, then we should stay static.
+   * If we're not already static, then we should set the header static, only when pinStart >= scrollTop (regardless of
+   * scrollHeight, so the header doesn't jump up, when scrolling upwards to the trigger).
+   * Else we shouldn't set it static.
+   * @param scrollTop the currentScrollTop position
+   * @param direction the current direction
+   * @returns {boolean} if we should set the header static
+   */ shouldSetStatic(scrollTop, direction) {
+        if (this.state.mode === MODE_STATIC || this.state.mode === MODE_PINNED && direction === DIRECTION_DOWN) {
+            return this.props.pinStart + this.props.scrollHeight >= scrollTop;
+        } else {
+            return this.props.pinStart >= scrollTop;
+        }
     }
-
     /**
-     * Determines the mode depending on the scrollTop position and the current direction
-     * @param {number} scrollTop
-     * @param {string} direction
-     * @returns {string} the next mode of Headroom
-     */
-  }, {
-    key: "determineMode",
-    value: function determineMode(scrollTop, direction) {
-      if (this.shouldSetStatic(scrollTop, direction)) {
-        return STATIC;
-      } else {
-        return direction === UPWARDS ? PINNED : UNPINNED;
-      }
+   * Determines the mode depending on the scrollTop position and the current direction
+   * @param {number} scrollTop
+   * @param {string} direction
+   * @returns {string} the next mode of Headroom
+   */ determineMode(scrollTop, direction) {
+        if (this.shouldSetStatic(scrollTop, direction)) {
+            return MODE_STATIC;
+        } else {
+            return direction === DIRECTION_UP ? MODE_PINNED : MODE_UNPINNED;
+        }
     }
-
     /**
-     * @returns {TransitionType} determines the kind of transition
-     */
-  }, {
-    key: "determineTransition",
-    value: function determineTransition(mode, direction) {
-      // Handle special case: If we're pinned and going to static, we need a special transition using css animation
-      if (this.state.mode === PINNED && mode === STATIC) {
-        return PINNED_TO_STATIC;
-      }
-      // If mode is static, then no transition, because we're already in the right spot
-      // (and want to change transform and top properties seamlessly)
-      if (mode === STATIC) {
-        return this.state.transition === NO_TRANSITION ? NO_TRANSITION : PINNED_TO_STATIC;
-      }
-      // mode is not static, transition when moving upwards or when we've lastly did the transition
-      return direction === UPWARDS || this.state.transition === NORMAL_TRANSITION ? NORMAL_TRANSITION : NO_TRANSITION;
+   * @returns {TransitionType} determines the kind of transition
+   */ determineTransition(mode, direction) {
+        // Handle special case: If we're pinned and going to static, we need a special transition using css animation
+        if (this.state.mode === MODE_PINNED && mode === MODE_STATIC) {
+            return TRANSITION_PINNED_TO_STATIC;
+        }
+        // If mode is static, then no transition, because we're already in the right spot
+        // (and want to change transform and top properties seamlessly)
+        if (mode === MODE_STATIC) {
+            return this.state.transition === TRANSITION_NONE ? TRANSITION_NONE : TRANSITION_PINNED_TO_STATIC;
+        }
+        // mode is not static, transition when moving upwards or when we've lastly did the transition
+        return direction === DIRECTION_UP || this.state.transition === TRANSITION_NORMAL ? TRANSITION_NORMAL : TRANSITION_NONE;
     }
-
     /**
-     * Checks the current scrollTop position and updates the state accordingly
-     */
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$props2 = this.props,
-        children = _this$props2.children,
-        scrollHeight = _this$props2.scrollHeight,
-        positionStickyDisabled = _this$props2.positionStickyDisabled,
-        zIndex = _this$props2.zIndex,
-        className = _this$props2.className;
-      var _this$state = this.state,
-        mode = _this$state.mode,
-        transition = _this$state.transition,
-        animateUpFrom = _this$state.animateUpFrom;
-      var transform = mode === UNPINNED ? -scrollHeight : 0;
-      var ownStickyTop = mode === STATIC ? -scrollHeight : 0;
-      return /*#__PURE__*/React.createElement(HeaderWrapper, {
-        className: className,
-        translateY: transform,
-        top: ownStickyTop,
-        transition: transition,
-        positionStickyDisabled: positionStickyDisabled,
-        static: mode === STATIC,
-        animateUpFrom: animateUpFrom,
-        zIndex: zIndex
-      }, children);
+   * Checks the current scrollTop position and updates the state accordingly
+   */ update = ()=>{
+        const currentScrollTop = this.getScrollTop();
+        const newState = {};
+        if (currentScrollTop === this.lastKnownScrollTop) {
+            return;
+        }
+        const direction = this.lastKnownScrollTop < currentScrollTop ? DIRECTION_DOWN : DIRECTION_UP;
+        newState.mode = this.determineMode(currentScrollTop, direction);
+        newState.transition = this.determineTransition(newState.mode, direction);
+        const { onStickyTopChanged, height, scrollHeight, pinStart } = this.props;
+        if (this.state.mode === MODE_PINNED && newState.mode === MODE_STATIC) {
+            // animation in the special case from pinned to static
+            newState.animateUpFrom = currentScrollTop - pinStart;
+        }
+        if (onStickyTopChanged && newState.mode !== this.state.mode && height) {
+            onStickyTopChanged(Headroom.calcStickyTop(newState.mode, height, scrollHeight));
+        }
+        this.setState(newState);
+        this.lastKnownScrollTop = currentScrollTop;
+    };
+    handleEvent = ()=>{
+        window.requestAnimationFrame(this.update);
+    };
+    static calcStickyTop(mode, height, scrollHeight) {
+        return mode === MODE_PINNED ? height : height - scrollHeight;
     }
-  }], [{
-    key: "calcStickyTop",
-    value: function calcStickyTop(mode, height, scrollHeight) {
-      return mode === PINNED ? height : height - scrollHeight;
+    render() {
+        const { children, scrollHeight, positionStickyDisabled, zIndex, className } = this.props;
+        const { mode, transition, animateUpFrom } = this.state;
+        const transform = mode === MODE_UNPINNED ? -scrollHeight : 0;
+        const ownStickyTop = mode === MODE_STATIC ? -scrollHeight : 0;
+        return /*#__PURE__*/ React.createElement(HeaderWrapper, {
+            className: className,
+            $translateY: transform,
+            $top: ownStickyTop,
+            $transition: transition,
+            $positionStickyDisabled: !!positionStickyDisabled,
+            $static: mode === MODE_STATIC,
+            $animateUpFrom: animateUpFrom,
+            $zIndex: zIndex
+        }, children);
     }
-  }]);
-  return Headroom;
-}(React.PureComponent);
-_defineProperty(Headroom, "defaultProps", {
-  pinStart: 0,
-  zIndex: 1,
-  parent: window.document.documentElement
-});
-var _default = Headroom;
-exports.default = _default;
+}
+export default Headroom;
+//# sourceMappingURL=index.js.map

package/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["index.tsx"],"sourcesContent":["import React from 'react'\nimport styled, { css, keyframes } from 'styled-components'\n\nconst DIRECTION_UP = 'up'\nconst DIRECTION_DOWN = 'down'\n\nconst MODE_UNPINNED = 'unpinned'\nconst MODE_PINNED = 'pinned'\nconst MODE_STATIC = 'static'\n\nconst TRANSITION_NONE = 'none'\nconst TRANSITION_NORMAL = 'normal'\nconst TRANSITION_PINNED_TO_STATIC = 'pinned-to-static'\n\ntype ModeType = typeof MODE_PINNED | typeof MODE_UNPINNED | typeof MODE_STATIC\ntype DirectionType = typeof DIRECTION_UP | typeof DIRECTION_DOWN\ntype TransitionType = typeof TRANSITION_NONE | typeof TRANSITION_NORMAL | typeof TRANSITION_PINNED_TO_STATIC\n\ntype PropsType = {\n  /** The child node to be displayed as a header */\n  children: React.ReactNode,\n  /** The maximum amount of px the header should move up when scrolling */\n  scrollHeight: number,\n  /** The minimum scrollTop position where the transform should start */\n  pinStart: number,\n  /** Used for calculating the stickyTop position of an ancestor */\n  height?: number,\n  /** Fired, when Headroom changes its state. Passes stickyTop of the ancestor. */\n  onStickyTopChanged?: (stickyTop: number) => void,\n  /** True, if sticky position should be disabled (e.g. for edge 16 support) */\n  positionStickyDisabled?: boolean,\n  /** The parent element firing the scroll event. Defaults to document.documentElement */\n  parent?: HTMLElement | null,\n  /** The z-index used by the wrapper. Defaults to 1. */\n  zIndex?: number,\n  /** A classname for applying custom styles to the wrapper. Use at your own risk. */\n  className?: string\n}\n\ntype StateType = {\n  mode: ModeType,\n  transition: TransitionType,\n  animateUpFrom: number | null\n}\n\nconst HeaderWrapper = styled.div<{\n  $positionStickyDisabled: boolean,\n  $translateY: number,\n  $transition: TransitionType,\n  $animateUpFrom: number | null,\n  $zIndex?: number,\n  $top: number,\n  $static: boolean\n}>`\n  position: ${props => props.$positionStickyDisabled ? 'static' : 'sticky'};\n  top: ${props => props.$top}px;\n  z-index: ${props => props.$zIndex};\n  transform: translateY(${props => props.$translateY}px);\n  animation-duration: 0.2s;\n  animation-timing-function: ease-out;\n  ${props => props.$transition === TRANSITION_NORMAL && !props.$static\n  ? 'transition: transform 0.2s ease-out;'\n  : ''}\n  ${props => props.$transition === TRANSITION_PINNED_TO_STATIC && props.$animateUpFrom !== null\n  ? css`\n    animation-name: ${keyframesMoveUpFrom(props.$animateUpFrom)};\n  `\n  : ''}\n  ${props => props.$static ? 'transition: none;' : ''}\n`\n\nconst keyframesMoveUpFrom = (from: number) => keyframes`\n    from {\n      transform: translateY(${Math.max(from, 0)}px)\n    }\n\n    to {\n      transform: translateY(0)\n    }\n`\n\nclass Headroom extends React.PureComponent<PropsType, StateType> {\n  static defaultProps: { pinStart: number, zIndex: number, parent: HTMLElement | null } = {\n    pinStart: 0,\n    zIndex: 1,\n    parent: window.document.documentElement\n  }\n\n  state: StateType = {\n    mode: MODE_STATIC,\n    transition: TRANSITION_NONE,\n    animateUpFrom: null\n  }\n\n  /** the very last scrollTop which we know about (to determine direction changes) */\n  lastKnownScrollTop: number = 0\n\n  /**\n   * @returns {number} the current scrollTop position of the window\n   */\n  getScrollTop (): number {\n    const parent = this.props.parent\n    if (parent && parent.scrollTop !== undefined && parent !== document.documentElement) {\n      return parent.scrollTop\n    }\n    if (parent !== document.documentElement) {\n      console.warn('Could not determine scrollTop from parent for StickyHeadroom. Defaulting to window.pageYOffset.')\n    }\n    if (window.pageYOffset === undefined) {\n      console.error('window.pageYOffset is undefined. Defaulting to 0.')\n      return 0\n    }\n    return window.pageYOffset\n  }\n\n  componentDidMount () {\n    this.addScrollListener(this.props.parent)\n  }\n\n  addScrollListener (parent?: HTMLElement | null) {\n    if (parent === window.document.documentElement) {\n      window.addEventListener('scroll', this.handleEvent)\n    } else if (parent) {\n      parent.addEventListener('scroll', this.handleEvent)\n    } else {\n      console.debug(\"'parent' prop of Headroom is null. Assuming, it will be set soon...\")\n    }\n  }\n\n  removeScrollListener (parent?: HTMLElement | null) {\n    if (parent === window.document.documentElement) {\n      window.removeEventListener('scroll', this.handleEvent)\n    } else if (parent) {\n      parent.removeEventListener('scroll', this.handleEvent)\n    }\n  }\n\n  componentDidUpdate (prevProps: PropsType) {\n    if (prevProps.parent !== this.props.parent) {\n      this.removeScrollListener(prevProps.parent)\n      this.addScrollListener(this.props.parent)\n    }\n  }\n\n  componentWillUnmount () {\n    this.removeScrollListener(this.props.parent)\n  }\n\n  /**\n   * If we're already static and pinStart + scrollHeight >= scrollTop, then we should stay static.\n   * If we're not already static, then we should set the header static, only when pinStart >= scrollTop (regardless of\n   * scrollHeight, so the header doesn't jump up, when scrolling upwards to the trigger).\n   * Else we shouldn't set it static.\n   * @param scrollTop the currentScrollTop position\n   * @param direction the current direction\n   * @returns {boolean} if we should set the header static\n   */\n  shouldSetStatic (scrollTop: number, direction: DirectionType): boolean {\n    if (\n      this.state.mode === MODE_STATIC ||\n      (this.state.mode === MODE_PINNED && direction === DIRECTION_DOWN)\n    ) {\n      return this.props.pinStart + this.props.scrollHeight >= scrollTop\n    } else {\n      return this.props.pinStart >= scrollTop\n    }\n  }\n\n  /**\n   * Determines the mode depending on the scrollTop position and the current direction\n   * @param {number} scrollTop\n   * @param {string} direction\n   * @returns {string} the next mode of Headroom\n   */\n  determineMode (scrollTop: number, direction: DirectionType): ModeType {\n    if (this.shouldSetStatic(scrollTop, direction)) {\n      return MODE_STATIC\n    } else {\n      return direction === DIRECTION_UP ? MODE_PINNED : MODE_UNPINNED\n    }\n  }\n\n  /**\n   * @returns {TransitionType} determines the kind of transition\n   */\n  determineTransition (mode: ModeType, direction: DirectionType): TransitionType {\n    // Handle special case: If we're pinned and going to static, we need a special transition using css animation\n    if (this.state.mode === MODE_PINNED && mode === MODE_STATIC) {\n      return TRANSITION_PINNED_TO_STATIC\n    }\n    // If mode is static, then no transition, because we're already in the right spot\n    // (and want to change transform and top properties seamlessly)\n    if (mode === MODE_STATIC) {\n      return this.state.transition === TRANSITION_NONE\n        ? TRANSITION_NONE\n        : TRANSITION_PINNED_TO_STATIC\n    }\n    // mode is not static, transition when moving upwards or when we've lastly did the transition\n    return direction === DIRECTION_UP ||\n      this.state.transition === TRANSITION_NORMAL\n      ? TRANSITION_NORMAL\n      : TRANSITION_NONE\n  }\n\n  /**\n   * Checks the current scrollTop position and updates the state accordingly\n   */\n  update: () => void = () => {\n    const currentScrollTop = this.getScrollTop()\n    const newState: Partial<StateType> = {}\n    if (currentScrollTop === this.lastKnownScrollTop) {\n      return\n    }\n    const direction =\n      this.lastKnownScrollTop < currentScrollTop ? DIRECTION_DOWN : DIRECTION_UP\n    newState.mode = this.determineMode(currentScrollTop, direction)\n    newState.transition = this.determineTransition(newState.mode, direction)\n\n    const { onStickyTopChanged, height, scrollHeight, pinStart } = this.props\n    if (this.state.mode === MODE_PINNED && newState.mode === MODE_STATIC) {\n      // animation in the special case from pinned to static\n      newState.animateUpFrom = currentScrollTop - pinStart\n    }\n    if (onStickyTopChanged && newState.mode !== this.state.mode && height) {\n      onStickyTopChanged(Headroom.calcStickyTop(newState.mode, height, scrollHeight))\n    }\n    this.setState(newState as StateType)\n    this.lastKnownScrollTop = currentScrollTop\n  }\n\n  handleEvent: () => void = () => {\n    window.requestAnimationFrame(this.update)\n  }\n\n  static calcStickyTop (\n    mode: ModeType,\n    height: number,\n    scrollHeight: number\n  ): number {\n    return mode === MODE_PINNED ? height : height - scrollHeight\n  }\n\n  render (): React.ReactElement {\n    const {\n      children,\n      scrollHeight,\n      positionStickyDisabled,\n      zIndex,\n      className\n    } = this.props\n    const {\n      mode,\n      transition,\n      animateUpFrom\n    } = this.state\n    const transform = mode === MODE_UNPINNED ? -scrollHeight : 0\n    const ownStickyTop = mode === MODE_STATIC ? -scrollHeight : 0\n    return <HeaderWrapper\n      className={className}\n      $translateY={transform}\n      $top={ownStickyTop}\n      $transition={transition}\n      $positionStickyDisabled={!!positionStickyDisabled}\n      $static={mode === MODE_STATIC}\n      $animateUpFrom={animateUpFrom}\n      $zIndex={zIndex}>\n      {children}\n    </HeaderWrapper>\n  }\n}\n\nexport default Headroom\n"],"names":["DIRECTION_UP","DIRECTION_DOWN","MODE_UNPINNED","MODE_PINNED","MODE_STATIC","TRANSITION_NONE","TRANSITION_NORMAL","TRANSITION_PINNED_TO_STATIC","HeaderWrapper","styled","div","props","$positionStickyDisabled","$top","$zIndex","$translateY","$transition","$static","$animateUpFrom","css","keyframesMoveUpFrom","from","keyframes","Math","max","Headroom","React","PureComponent","defaultProps","pinStart","zIndex","parent","window","document","documentElement","state","mode","transition","animateUpFrom","lastKnownScrollTop","getScrollTop","scrollTop","undefined","console","warn","pageYOffset","error","componentDidMount","addScrollListener","addEventListener","handleEvent","debug","removeScrollListener","removeEventListener","componentDidUpdate","prevProps","componentWillUnmount","shouldSetStatic","direction","scrollHeight","determineMode","determineTransition","update","currentScrollTop","newState","onStickyTopChanged","height","calcStickyTop","setState","requestAnimationFrame","render","children","positionStickyDisabled","className","transform","ownStickyTop"],"mappings":"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"}