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

package/index.cjs

@@ -0,0 +1,228 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "default", {
+    enumerable: true,
+    get: function() {
+        return _default;
+    }
+});
+const _react = /*#__PURE__*/ _interop_require_default(require("react"));
+const _styledcomponents = /*#__PURE__*/ _interop_require_wildcard(require("styled-components"));
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(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 = {
+        __proto__: null
+    };
+    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;
+}
+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 = _styledcomponents.default.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 ? (0, _styledcomponents.css)([
+        "animation-name:",
+        ";"
+    ], keyframesMoveUpFrom(props.$animateUpFrom)) : '', (props)=>props.$static ? 'transition: none;' : '');
+const keyframesMoveUpFrom = (from)=>(0, _styledcomponents.keyframes)([
+        "from{transform:translateY(",
+        "px)}to{transform:translateY(0)}"
+    ], Math.max(from, 0));
+class Headroom extends _react.default.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
+   */ 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;
+    }
+    componentDidMount() {
+        this.addScrollListener(this.props.parent);
+    }
+    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...");
+        }
+    }
+    removeScrollListener(parent) {
+        if (parent === window.document.documentElement) {
+            window.removeEventListener('scroll', this.handleEvent);
+        } else if (parent) {
+            parent.removeEventListener('scroll', this.handleEvent);
+        }
+    }
+    componentDidUpdate(prevProps) {
+        if (prevProps.parent !== this.props.parent) {
+            this.removeScrollListener(prevProps.parent);
+            this.addScrollListener(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
+   */ 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
+   */ 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
+   */ 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
+   */ 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;
+    }
+    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.default.createElement(HeaderWrapper, {
+            className: className,
+            $translateY: transform,
+            $top: ownStickyTop,
+            $transition: transition,
+            $positionStickyDisabled: !!positionStickyDisabled,
+            $static: mode === MODE_STATIC,
+            $animateUpFrom: animateUpFrom,
+            $zIndex: zIndex
+        }, children);
+    }
+}
+const _default = Headroom;
+//# sourceMappingURL=index.cjs.map

package/index.cjs.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":";;;;+BA+QA;;;eAAA;;;8DA/QkB;0EACqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEvC,MAAMA,eAAe;AACrB,MAAMC,iBAAiB;AAEvB,MAAMC,gBAAgB;AACtB,MAAMC,cAAc;AACpB,MAAMC,cAAc;AAEpB,MAAMC,kBAAkB;AACxB,MAAMC,oBAAoB;AAC1B,MAAMC,8BAA8B;AAiCpC,MAAMC,gBAAgBC,yBAAM,CAACC,GAAG;;;;;;;;;GASlBC,CAAAA,QAASA,MAAMC,uBAAuB,GAAG,WAAW,UACzDD,CAAAA,QAASA,MAAME,IAAI,EACfF,CAAAA,QAASA,MAAMG,OAAO,EACTH,CAAAA,QAASA,MAAMI,WAAW,EAGhDJ,CAAAA,QAASA,MAAMK,WAAW,KAAKV,qBAAqB,CAACK,MAAMM,OAAO,GAClE,yCACA,IACAN,CAAAA,QAASA,MAAMK,WAAW,KAAKT,+BAA+BI,MAAMO,cAAc,KAAK,OACvFC,IAAAA,qBAAG;;;OACeC,oBAAoBT,MAAMO,cAAc,KAE1D,IACAP,CAAAA,QAASA,MAAMM,OAAO,GAAG,sBAAsB;AAGnD,MAAMG,sBAAsB,CAACC,OAAiBC,IAAAA,2BAAS;;;OAEzBC,KAAKC,GAAG,CAACH,MAAM;AAQ7C,MAAMI,iBAAiBC,cAAK,CAACC,aAAa;IACxC,OAAOC,eAAiF;QACtFC,UAAU;QACVC,QAAQ;QACRC,QAAQC,OAAOC,QAAQ,CAACC,eAAe;IACzC,EAAC;IAEDC,QAAmB;QACjBC,MAAMhC;QACNiC,YAAYhC;QACZiC,eAAe;IACjB,EAAC;IAED,iFAAiF,GACjFC,qBAA6B,EAAC;IAE9B;;GAEC,GACDC,eAAwB;QACtB,MAAMT,SAAS,IAAI,CAACpB,KAAK,CAACoB,MAAM;QAChC,IAAIA,UAAUA,OAAOU,SAAS,KAAKC,aAAaX,WAAWE,SAASC,eAAe,EAAE;YACnF,OAAOH,OAAOU,SAAS;QACzB;QACA,IAAIV,WAAWE,SAASC,eAAe,EAAE;YACvCS,QAAQC,IAAI,CAAC;QACf;QACA,IAAIZ,OAAOa,WAAW,KAAKH,WAAW;YACpCC,QAAQG,KAAK,CAAC;YACd,OAAO;QACT;QACA,OAAOd,OAAOa,WAAW;IAC3B;IAEAE,oBAAqB;QACnB,IAAI,CAACC,iBAAiB,CAAC,IAAI,CAACrC,KAAK,CAACoB,MAAM;IAC1C;IAEAiB,kBAAmBjB,MAA2B,EAAE;QAC9C,IAAIA,WAAWC,OAAOC,QAAQ,CAACC,eAAe,EAAE;YAC9CF,OAAOiB,gBAAgB,CAAC,UAAU,IAAI,CAACC,WAAW;QACpD,OAAO,IAAInB,QAAQ;YACjBA,OAAOkB,gBAAgB,CAAC,UAAU,IAAI,CAACC,WAAW;QACpD,OAAO;YACLP,QAAQQ,KAAK,CAAC;QAChB;IACF;IAEAC,qBAAsBrB,MAA2B,EAAE;QACjD,IAAIA,WAAWC,OAAOC,QAAQ,CAACC,eAAe,EAAE;YAC9CF,OAAOqB,mBAAmB,CAAC,UAAU,IAAI,CAACH,WAAW;QACvD,OAAO,IAAInB,QAAQ;YACjBA,OAAOsB,mBAAmB,CAAC,UAAU,IAAI,CAACH,WAAW;QACvD;IACF;IAEAI,mBAAoBC,SAAoB,EAAE;QACxC,IAAIA,UAAUxB,MAAM,KAAK,IAAI,CAACpB,KAAK,CAACoB,MAAM,EAAE;YAC1C,IAAI,CAACqB,oBAAoB,CAACG,UAAUxB,MAAM;YAC1C,IAAI,CAACiB,iBAAiB,CAAC,IAAI,CAACrC,KAAK,CAACoB,MAAM;QAC1C;IACF;IAEAyB,uBAAwB;QACtB,IAAI,CAACJ,oBAAoB,CAAC,IAAI,CAACzC,KAAK,CAACoB,MAAM;IAC7C;IAEA;;;;;;;;GAQC,GACD0B,gBAAiBhB,SAAiB,EAAEiB,SAAwB,EAAW;QACrE,IACE,IAAI,CAACvB,KAAK,CAACC,IAAI,KAAKhC,eACnB,IAAI,CAAC+B,KAAK,CAACC,IAAI,KAAKjC,eAAeuD,cAAczD,gBAClD;YACA,OAAO,IAAI,CAACU,KAAK,CAACkB,QAAQ,GAAG,IAAI,CAAClB,KAAK,CAACgD,YAAY,IAAIlB;QAC1D,OAAO;YACL,OAAO,IAAI,CAAC9B,KAAK,CAACkB,QAAQ,IAAIY;QAChC;IACF;IAEA;;;;;GAKC,GACDmB,cAAenB,SAAiB,EAAEiB,SAAwB,EAAY;QACpE,IAAI,IAAI,CAACD,eAAe,CAAChB,WAAWiB,YAAY;YAC9C,OAAOtD;QACT,OAAO;YACL,OAAOsD,cAAc1D,eAAeG,cAAcD;QACpD;IACF;IAEA;;GAEC,GACD2D,oBAAqBzB,IAAc,EAAEsB,SAAwB,EAAkB;QAC7E,6GAA6G;QAC7G,IAAI,IAAI,CAACvB,KAAK,CAACC,IAAI,KAAKjC,eAAeiC,SAAShC,aAAa;YAC3D,OAAOG;QACT;QACA,iFAAiF;QACjF,+DAA+D;QAC/D,IAAI6B,SAAShC,aAAa;YACxB,OAAO,IAAI,CAAC+B,KAAK,CAACE,UAAU,KAAKhC,kBAC7BA,kBACAE;QACN;QACA,6FAA6F;QAC7F,OAAOmD,cAAc1D,gBACnB,IAAI,CAACmC,KAAK,CAACE,UAAU,KAAK/B,oBACxBA,oBACAD;IACN;IAEA;;GAEC,GACDyD,SAAqB;QACnB,MAAMC,mBAAmB,IAAI,CAACvB,YAAY;QAC1C,MAAMwB,WAA+B,CAAC;QACtC,IAAID,qBAAqB,IAAI,CAACxB,kBAAkB,EAAE;YAChD;QACF;QACA,MAAMmB,YACJ,IAAI,CAACnB,kBAAkB,GAAGwB,mBAAmB9D,iBAAiBD;QAChEgE,SAAS5B,IAAI,GAAG,IAAI,CAACwB,aAAa,CAACG,kBAAkBL;QACrDM,SAAS3B,UAAU,GAAG,IAAI,CAACwB,mBAAmB,CAACG,SAAS5B,IAAI,EAAEsB;QAE9D,MAAM,EAAEO,kBAAkB,EAAEC,MAAM,EAAEP,YAAY,EAAE9B,QAAQ,EAAE,GAAG,IAAI,CAAClB,KAAK;QACzE,IAAI,IAAI,CAACwB,KAAK,CAACC,IAAI,KAAKjC,eAAe6D,SAAS5B,IAAI,KAAKhC,aAAa;YACpE,sDAAsD;YACtD4D,SAAS1B,aAAa,GAAGyB,mBAAmBlC;QAC9C;QACA,IAAIoC,sBAAsBD,SAAS5B,IAAI,KAAK,IAAI,CAACD,KAAK,CAACC,IAAI,IAAI8B,QAAQ;YACrED,mBAAmBxC,SAAS0C,aAAa,CAACH,SAAS5B,IAAI,EAAE8B,QAAQP;QACnE;QACA,IAAI,CAACS,QAAQ,CAACJ;QACd,IAAI,CAACzB,kBAAkB,GAAGwB;IAC5B,EAAC;IAEDb,cAA0B;QACxBlB,OAAOqC,qBAAqB,CAAC,IAAI,CAACP,MAAM;IAC1C,EAAC;IAED,OAAOK,cACL/B,IAAc,EACd8B,MAAc,EACdP,YAAoB,EACZ;QACR,OAAOvB,SAASjC,cAAc+D,SAASA,SAASP;IAClD;IAEAW,SAA8B;QAC5B,MAAM,EACJC,QAAQ,EACRZ,YAAY,EACZa,sBAAsB,EACtB1C,MAAM,EACN2C,SAAS,EACV,GAAG,IAAI,CAAC9D,KAAK;QACd,MAAM,EACJyB,IAAI,EACJC,UAAU,EACVC,aAAa,EACd,GAAG,IAAI,CAACH,KAAK;QACd,MAAMuC,YAAYtC,SAASlC,gBAAgB,CAACyD,eAAe;QAC3D,MAAMgB,eAAevC,SAAShC,cAAc,CAACuD,eAAe;QAC5D,qBAAO,6BAACnD;YACNiE,WAAWA;YACX1D,aAAa2D;YACb7D,MAAM8D;YACN3D,aAAaqB;YACbzB,yBAAyB,CAAC,CAAC4D;YAC3BvD,SAASmB,SAAShC;YAClBc,gBAAgBoB;YAChBxB,SAASgB;WACRyC;IAEL;AACF;MAEA,WAAe9C"}

package/index.js.map

@@ -1 +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":["React","styled","css","keyframes","DIRECTION_UP","DIRECTION_DOWN","MODE_UNPINNED","MODE_PINNED","MODE_STATIC","TRANSITION_NONE","TRANSITION_NORMAL","TRANSITION_PINNED_TO_STATIC","HeaderWrapper","div","props","$positionStickyDisabled","$top","$zIndex","$translateY","$transition","$static","$animateUpFrom","keyframesMoveUpFrom","from","Math","max","Headroom","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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"}
+{"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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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@integreat-app/react-sticky-headroom",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "engines": {
     "node": ">=18",
     "npm": ">=10"
@@ -15,10 +15,17 @@
   "files": [
     "index.js",
     "index.js.map",
+    "index.cjs",
+    "index.cjs.map",
     "index.d.ts",
     "index.d.ts.map",
     "index.tsx"
   ],
+  "exports": {
+    "import": "./index.js",
+    "require": "./index.cjs",
+    "types": "./index.d.ts"
+  },
   "publishConfig": {
     "access": "public"
   },