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

package/README.md

@@ -54,6 +54,8 @@ The component generally supports:
 * Safari >= 6.2
 
 However, if you want to support non-modern browsers, you are responsible for transpiling the code for your preferred target.
+The distributed files on npm are transpiled for ES2020.
+
 
 For hiding and revealing the header, the browser needs to support the css-property `position: sticky`.
 You can read about the browser support for that on [caniuse.com](https://caniuse.com/#feat=css-sticky).

package/index.cjs

@@ -10,6 +10,19 @@ Object.defineProperty(exports, "default", {
 });
 const _react = /*#__PURE__*/ _interop_require_default(require("react"));
 const _styledcomponents = /*#__PURE__*/ _interop_require_wildcard(require("styled-components"));
+function _define_property(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;
+}
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -81,18 +94,8 @@ 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;
+var _React_PureComponent;
+class Headroom extends (_React_PureComponent = _react.default.PureComponent) {
     /**
    * @returns {number} the current scrollTop position of the window
    */ getScrollTop() {
@@ -179,31 +182,6 @@ class Headroom extends _react.default.PureComponent {
         // 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;
     }
@@ -223,6 +201,45 @@ class Headroom extends _react.default.PureComponent {
             $zIndex: zIndex
         }, children);
     }
+    constructor(...args){
+        super(...args);
+        _define_property(this, "state", {
+            mode: MODE_STATIC,
+            transition: TRANSITION_NONE,
+            animateUpFrom: null
+        });
+        /** the very last scrollTop which we know about (to determine direction changes) */ _define_property(this, "lastKnownScrollTop", 0);
+        /**
+   * Checks the current scrollTop position and updates the state accordingly
+   */ _define_property(this, "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;
+        });
+        _define_property(this, "handleEvent", ()=>{
+            window.requestAnimationFrame(this.update);
+        });
+    }
 }
+_define_property(Headroom, "defaultProps", {
+    pinStart: 0,
+    zIndex: 1,
+    parent: window.document.documentElement
+});
 const _default = Headroom;
 //# sourceMappingURL=index.cjs.map

package/index.cjs.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":["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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"}
+{"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","React","Headroom","PureComponent","getScrollTop","parent","scrollTop","undefined","document","documentElement","console","warn","window","pageYOffset","error","componentDidMount","addScrollListener","addEventListener","handleEvent","debug","removeScrollListener","removeEventListener","componentDidUpdate","prevProps","componentWillUnmount","shouldSetStatic","direction","state","mode","pinStart","scrollHeight","determineMode","determineTransition","transition","calcStickyTop","height","render","children","positionStickyDisabled","zIndex","className","animateUpFrom","transform","ownStickyTop","lastKnownScrollTop","update","currentScrollTop","newState","onStickyTopChanged","setState","requestAnimationFrame","defaultProps"],"mappings":"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"}

package/index.js

@@ -1,3 +1,16 @@
+function _define_property(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;
+}
 import React from 'react';
 import styled, { css, keyframes } from 'styled-components';
 const DIRECTION_UP = 'up';
@@ -25,18 +38,8 @@ 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;
+var _React_PureComponent;
+class Headroom extends (_React_PureComponent = React.PureComponent) {
     /**
    * @returns {number} the current scrollTop position of the window
    */ getScrollTop() {
@@ -123,31 +126,6 @@ class Headroom extends React.PureComponent {
         // 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;
     }
@@ -167,6 +145,45 @@ class Headroom extends React.PureComponent {
             $zIndex: zIndex
         }, children);
     }
+    constructor(...args){
+        super(...args);
+        _define_property(this, "state", {
+            mode: MODE_STATIC,
+            transition: TRANSITION_NONE,
+            animateUpFrom: null
+        });
+        /** the very last scrollTop which we know about (to determine direction changes) */ _define_property(this, "lastKnownScrollTop", 0);
+        /**
+   * Checks the current scrollTop position and updates the state accordingly
+   */ _define_property(this, "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;
+        });
+        _define_property(this, "handleEvent", ()=>{
+            window.requestAnimationFrame(this.update);
+        });
+    }
 }
+_define_property(Headroom, "defaultProps", {
+    pinStart: 0,
+    zIndex: 1,
+    parent: window.document.documentElement
+});
 export default Headroom;
 //# sourceMappingURL=index.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@integreat-app/react-sticky-headroom",
-  "version": "2.1.0",
+  "version": "2.2.1",
   "engines": {
     "node": ">=18",
     "npm": ">=10"
@@ -21,6 +21,7 @@
     "index.d.ts.map",
     "index.tsx"
   ],
+  "sideEffects": false,
   "exports": {
     "import": "./index.js",
     "require": "./index.cjs",