@integreat-app/react-sticky-headroom 2.2.2 → 3.0.1

package/README.md

@@ -10,9 +10,8 @@ This helps us avoid calculating the height ourselves and therefore browsers don'
 heavy Recalculate-Style-Phases.
 For more information read [here](https://developers.google.com/web/fundamentals/performance/rendering/).
 
-Since it's using [styled-components](https://www.styled-components.com/) internally, it's best to
-use it in apps where you already have styled-components in place.
-The component is only compatible with styled-components v4 and higher.
+Since it's using [emotion](https://emotion.sh) internally, it's best to
+use it in apps where you already have emotion in place.
 
 The component is inspired by [react-headroom](https://kyleamathews.github.io/react-headroom/).
 
@@ -68,6 +67,8 @@ You can read about the browser support for that on [caniuse.com](https://caniuse
 Since version 2.x.x, ReactStickyHeadroom is written in TypeScript.
 Support for FlowJS types were dropped in version 2.0.0.
 
+Since version 3.x.x, ReactStickyHeadroom uses @emotion/styled instead of styled-components.
+
 ReactStickyHeadroom is a client-side library and hence does not support Server Side Rendering (SSR) a priori.
 For NextJS you can find more information on how to embed this library [here](https://nextjs.org/docs/advanced-features/dynamic-import#with-no-ssr).
 

package/index.cjs

@@ -9,7 +9,8 @@ Object.defineProperty(exports, "default", {
     }
 });
 const _react = /*#__PURE__*/ _interop_require_default(require("react"));
-const _styledcomponents = /*#__PURE__*/ _interop_require_wildcard(require("styled-components"));
+const _styled = /*#__PURE__*/ _interop_require_default(require("@emotion/styled"));
+const _react1 = require("@emotion/react");
 function _define_property(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
@@ -28,47 +29,6 @@ function _interop_require_default(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';
@@ -77,23 +37,11 @@ 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));
+const HeaderWrapper = (0, /*#__PURE__*/ _styled.default)("div", {
+    target: "e1o9mv740",
+    label: "HeaderWrapper"
+})("position:", (props)=>props.$positionStickyDisabled ? 'static' : 'sticky', ";top:", (props)=>props.$top, "px;z-index:", (props)=>props.$zIndex, ";transform:translateY(", (props)=>props.$translateY, "px);animation-duration:0.2s;animation-timing-function:ease-out;", (props)=>props.$transition === TRANSITION_NORMAL && !props.$static ? 'transition: transform 0.2s ease-out;' : '', "  animation-name:", (props)=>props.$transition === TRANSITION_PINNED_TO_STATIC && props.$animateUpFrom !== null ? keyframesMoveUpFrom(props.$animateUpFrom) : 'none', ";", (props)=>props.$static ? 'transition: none;' : '');
+const keyframesMoveUpFrom = (from)=>(0, /*#__PURE__*/ _react1.keyframes)("from{transform:translateY(", Math.max(from, 0), "px)}to{transform:translateY(0)}", "keyframesMoveUpFrom");
 var _React_PureComponent;
 class Headroom extends (_React_PureComponent = _react.default.PureComponent) {
     /**

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 ? 'transition: transform 0.2s ease-out;' : '')}\n  ${props =>\n    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 (this.state.mode === MODE_STATIC || (this.state.mode === MODE_PINNED && direction === DIRECTION_DOWN)) {\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 ? TRANSITION_NONE : 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 || 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 = 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(mode: ModeType, height: number, scrollHeight: number): number {\n    return mode === MODE_PINNED ? height : height - scrollHeight\n  }\n\n  render(): React.ReactElement {\n    const { children, scrollHeight, positionStickyDisabled, zIndex, className } = this.props\n    const { mode, transition, animateUpFrom } = this.state\n    const transform = mode === MODE_UNPINNED ? -scrollHeight : 0\n    const ownStickyTop = mode === MODE_STATIC ? -scrollHeight : 0\n    return (\n      <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}\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":";;;;+BA2PA;;;eAAA;;;8DA3PkB;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,QAAUA,MAAMC,uBAAuB,GAAG,WAAW,UAC1DD,CAAAA,QAASA,MAAME,IAAI,EACfF,CAAAA,QAASA,MAAMG,OAAO,EACTH,CAAAA,QAASA,MAAMI,WAAW,EAGhDJ,CAAAA,QAAUA,MAAMK,WAAW,KAAKV,qBAAqB,CAACK,MAAMM,OAAO,GAAG,yCAAyC,IAC/GN,CAAAA,QACAA,MAAMK,WAAW,KAAKT,+BAA+BI,MAAMO,cAAc,KAAK,OAC1EC,IAAAA,qBAAG;;;OACiBC,oBAAoBT,MAAMO,cAAc,KAE5D,IACJP,CAAAA,QAAUA,MAAMM,OAAO,GAAG,sBAAsB;AAGpD,MAAMG,sBAAsB,CAACC,OAAiBC,IAAAA,2BAAS;;;OAEzBC,KAAKC,GAAG,CAACH,MAAM;IAQtBI;AAAvB,MAAMC,iBAAiBD,CAAAA,uBAAAA,cAAK,CAACE,aAAa,AAAD;IAgBvC;;GAEC,GACDC,eAAuB;QACrB,MAAMC,SAAS,IAAI,CAAClB,KAAK,CAACkB,MAAM;QAChC,IAAIA,UAAUA,OAAOC,SAAS,KAAKC,aAAaF,WAAWG,SAASC,eAAe,EAAE;YACnF,OAAOJ,OAAOC,SAAS;QACzB;QACA,IAAID,WAAWG,SAASC,eAAe,EAAE;YACvCC,QAAQC,IAAI,CAAC;QACf;QACA,IAAIC,OAAOC,WAAW,KAAKN,WAAW;YACpCG,QAAQI,KAAK,CAAC;YACd,OAAO;QACT;QACA,OAAOF,OAAOC,WAAW;IAC3B;IAEAE,oBAAoB;QAClB,IAAI,CAACC,iBAAiB,CAAC,IAAI,CAAC7B,KAAK,CAACkB,MAAM;IAC1C;IAEAW,kBAAkBX,MAA2B,EAAE;QAC7C,IAAIA,WAAWO,OAAOJ,QAAQ,CAACC,eAAe,EAAE;YAC9CG,OAAOK,gBAAgB,CAAC,UAAU,IAAI,CAACC,WAAW;QACpD,OAAO,IAAIb,QAAQ;YACjBA,OAAOY,gBAAgB,CAAC,UAAU,IAAI,CAACC,WAAW;QACpD,OAAO;YACLR,QAAQS,KAAK,CAAC;QAChB;IACF;IAEAC,qBAAqBf,MAA2B,EAAE;QAChD,IAAIA,WAAWO,OAAOJ,QAAQ,CAACC,eAAe,EAAE;YAC9CG,OAAOS,mBAAmB,CAAC,UAAU,IAAI,CAACH,WAAW;QACvD,OAAO,IAAIb,QAAQ;YACjBA,OAAOgB,mBAAmB,CAAC,UAAU,IAAI,CAACH,WAAW;QACvD;IACF;IAEAI,mBAAmBC,SAAoB,EAAE;QACvC,IAAIA,UAAUlB,MAAM,KAAK,IAAI,CAAClB,KAAK,CAACkB,MAAM,EAAE;YAC1C,IAAI,CAACe,oBAAoB,CAACG,UAAUlB,MAAM;YAC1C,IAAI,CAACW,iBAAiB,CAAC,IAAI,CAAC7B,KAAK,CAACkB,MAAM;QAC1C;IACF;IAEAmB,uBAAuB;QACrB,IAAI,CAACJ,oBAAoB,CAAC,IAAI,CAACjC,KAAK,CAACkB,MAAM;IAC7C;IAEA;;;;;;;;GAQC,GACDoB,gBAAgBnB,SAAiB,EAAEoB,SAAwB,EAAW;QACpE,IAAI,IAAI,CAACC,KAAK,CAACC,IAAI,KAAKhD,eAAgB,IAAI,CAAC+C,KAAK,CAACC,IAAI,KAAKjD,eAAe+C,cAAcjD,gBAAiB;YACxG,OAAO,IAAI,CAACU,KAAK,CAAC0C,QAAQ,GAAG,IAAI,CAAC1C,KAAK,CAAC2C,YAAY,IAAIxB;QAC1D,OAAO;YACL,OAAO,IAAI,CAACnB,KAAK,CAAC0C,QAAQ,IAAIvB;QAChC;IACF;IAEA;;;;;GAKC,GACDyB,cAAczB,SAAiB,EAAEoB,SAAwB,EAAY;QACnE,IAAI,IAAI,CAACD,eAAe,CAACnB,WAAWoB,YAAY;YAC9C,OAAO9C;QACT,OAAO;YACL,OAAO8C,cAAclD,eAAeG,cAAcD;QACpD;IACF;IAEA;;GAEC,GACDsD,oBAAoBJ,IAAc,EAAEF,SAAwB,EAAkB;QAC5E,6GAA6G;QAC7G,IAAI,IAAI,CAACC,KAAK,CAACC,IAAI,KAAKjD,eAAeiD,SAAShD,aAAa;YAC3D,OAAOG;QACT;QACA,iFAAiF;QACjF,+DAA+D;QAC/D,IAAI6C,SAAShD,aAAa;YACxB,OAAO,IAAI,CAAC+C,KAAK,CAACM,UAAU,KAAKpD,kBAAkBA,kBAAkBE;QACvE;QACA,6FAA6F;QAC7F,OAAO2C,cAAclD,gBAAgB,IAAI,CAACmD,KAAK,CAACM,UAAU,KAAKnD,oBAC3DA,oBACAD;IACN;IA+BA,OAAOqD,cAAcN,IAAc,EAAEO,MAAc,EAAEL,YAAoB,EAAU;QACjF,OAAOF,SAASjD,cAAcwD,SAASA,SAASL;IAClD;IAEAM,SAA6B;QAC3B,MAAM,EAAEC,QAAQ,EAAEP,YAAY,EAAEQ,sBAAsB,EAAEC,MAAM,EAAEC,SAAS,EAAE,GAAG,IAAI,CAACrD,KAAK;QACxF,MAAM,EAAEyC,IAAI,EAAEK,UAAU,EAAEQ,aAAa,EAAE,GAAG,IAAI,CAACd,KAAK;QACtD,MAAMe,YAAYd,SAASlD,gBAAgB,CAACoD,eAAe;QAC3D,MAAMa,eAAef,SAAShD,cAAc,CAACkD,eAAe;QAC5D,qBACE,6BAAC9C;YACCwD,WAAWA;YACXjD,aAAamD;YACbrD,MAAMsD;YACNnD,aAAayC;YACb7C,yBAAyB,CAAC,CAACkD;YAC3B7C,SAASmC,SAAShD;YAClBc,gBAAgB+C;YAChBnD,SAASiD;WACRF;IAGP;;QAxKF,gBAOEV,uBAAAA,SAAmB;YACjBC,MAAMhD;YACNqD,YAAYpD;YACZ4D,eAAe;QACjB,IAEA,iFAAiF,GACjFG,uBAAAA,sBAA6B,IAuG7B;;GAEC,GACDC,uBAAAA,UAAqB;YACnB,MAAMC,mBAAmB,IAAI,CAAC1C,YAAY;YAC1C,MAAM2C,WAA+B,CAAC;YACtC,IAAID,qBAAqB,IAAI,CAACF,kBAAkB,EAAE;gBAChD;YACF;YACA,MAAMlB,YAAY,IAAI,CAACkB,kBAAkB,GAAGE,mBAAmBrE,iBAAiBD;YAChFuE,SAASnB,IAAI,GAAG,IAAI,CAACG,aAAa,CAACe,kBAAkBpB;YACrDqB,SAASd,UAAU,GAAG,IAAI,CAACD,mBAAmB,CAACe,SAASnB,IAAI,EAAEF;YAE9D,MAAM,EAAEsB,kBAAkB,EAAEb,MAAM,EAAEL,YAAY,EAAED,QAAQ,EAAE,GAAG,IAAI,CAAC1C,KAAK;YACzE,IAAI,IAAI,CAACwC,KAAK,CAACC,IAAI,KAAKjD,eAAeoE,SAASnB,IAAI,KAAKhD,aAAa;gBACpE,sDAAsD;gBACtDmE,SAASN,aAAa,GAAGK,mBAAmBjB;YAC9C;YACA,IAAImB,sBAAsBD,SAASnB,IAAI,KAAK,IAAI,CAACD,KAAK,CAACC,IAAI,IAAIO,QAAQ;gBACrEa,mBAAmB9C,SAASgC,aAAa,CAACa,SAASnB,IAAI,EAAEO,QAAQL;YACnE;YACA,IAAI,CAACmB,QAAQ,CAACF;YACd,IAAI,CAACH,kBAAkB,GAAGE;QAC5B,IAEA5B,uBAAAA,eAA0B;YACxBN,OAAOsC,qBAAqB,CAAC,IAAI,CAACL,MAAM;QAC1C;;AAyBF;AAxKE,iBADI3C,UACGiD,gBAAiF;IACtFtB,UAAU;IACVU,QAAQ;IACRlC,QAAQO,OAAOJ,QAAQ,CAACC,eAAe;AACzC;MAsKF,WAAeP"}
+{"version":3,"sources":["index.tsx"],"sourcesContent":["import React from 'react'\nimport styled from '@emotion/styled'\nimport { keyframes } from '@emotion/react'\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 ? 'transition: transform 0.2s ease-out;' : '')}\n  animation-name: ${props =>\n    props.$transition === TRANSITION_PINNED_TO_STATIC && props.$animateUpFrom !== null\n      ? keyframesMoveUpFrom(props.$animateUpFrom)\n      : 'none'};\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 (this.state.mode === MODE_STATIC || (this.state.mode === MODE_PINNED && direction === DIRECTION_DOWN)) {\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 ? TRANSITION_NONE : 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 || 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 = 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(mode: ModeType, height: number, scrollHeight: number): number {\n    return mode === MODE_PINNED ? height : height - scrollHeight\n  }\n\n  render(): React.ReactElement {\n    const { children, scrollHeight, positionStickyDisabled, zIndex, className } = this.props\n    const { mode, transition, animateUpFrom } = this.state\n    const transform = mode === MODE_UNPINNED ? -scrollHeight : 0\n    const ownStickyTop = mode === MODE_STATIC ? -scrollHeight : 0\n    return (\n      <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}\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","props","$positionStickyDisabled","$top","$zIndex","$translateY","$transition","$static","$animateUpFrom","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.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,QAAA,MAAM,YAAY,OAAO,CAAA;AACzB,QAAA,MAAM,cAAc,SAAS,CAAA;AAE7B,QAAA,MAAM,aAAa,aAAa,CAAA;AAChC,QAAA,MAAM,WAAW,WAAW,CAAA;AAC5B,QAAA,MAAM,WAAW,WAAW,CAAA;AAE5B,QAAA,MAAM,eAAe,SAAS,CAAA;AAC9B,QAAA,MAAM,iBAAiB,WAAW,CAAA;AAClC,QAAA,MAAM,2BAA2B,qBAAqB,CAAA;AAEtD,KAAK,QAAQ,GAAG,OAAO,WAAW,GAAG,OAAO,aAAa,GAAG,OAAO,WAAW,CAAA;AAC9E,KAAK,aAAa,GAAG,OAAO,YAAY,GAAG,OAAO,cAAc,CAAA;AAChE,KAAK,cAAc,GAAG,OAAO,eAAe,GAAG,OAAO,iBAAiB,GAAG,OAAO,2BAA2B,CAAA;AAE5G,KAAK,SAAS,GAAG;IACf,iDAAiD;IACjD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,wEAAwE;IACxE,YAAY,EAAE,MAAM,CAAA;IACpB,sEAAsE;IACtE,QAAQ,EAAE,MAAM,CAAA;IAChB,iEAAiE;IACjE,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,gFAAgF;IAChF,kBAAkB,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAA;IAChD,6EAA6E;IAC7E,sBAAsB,CAAC,EAAE,OAAO,CAAA;IAChC,uFAAuF;IACvF,MAAM,CAAC,EAAE,WAAW,GAAG,IAAI,CAAA;IAC3B,sDAAsD;IACtD,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,mFAAmF;IACnF,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAED,KAAK,SAAS,GAAG;IACf,IAAI,EAAE,QAAQ,CAAA;IACd,UAAU,EAAE,cAAc,CAAA;IAC1B,aAAa,EAAE,MAAM,GAAG,IAAI,CAAA;CAC7B,CAAA;AAqCD,cAAM,QAAS,SAAQ,KAAK,CAAC,aAAa,CAAC,SAAS,EAAE,SAAS,CAAC;IAC9D,MAAM,CAAC,YAAY,EAAE;QAAE,QAAQ,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,WAAW,GAAG,IAAI,CAAA;KAAE,CAIpF;IAED,KAAK,EAAE,SAAS,CAIf;IAED,mFAAmF;IACnF,kBAAkB,EAAE,MAAM,CAAI;IAE9B;;OAEG;IACH,YAAY,IAAI,MAAM;IAetB,iBAAiB;IAIjB,iBAAiB,CAAC,MAAM,CAAC,EAAE,WAAW,GAAG,IAAI;IAU7C,oBAAoB,CAAC,MAAM,CAAC,EAAE,WAAW,GAAG,IAAI;IAQhD,kBAAkB,CAAC,SAAS,EAAE,SAAS;IAOvC,oBAAoB;IAIpB;;;;;;;;OAQG;IACH,eAAe,CAAC,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,aAAa,GAAG,OAAO;IAQrE;;;;;OAKG;IACH,aAAa,CAAC,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,aAAa,GAAG,QAAQ;IAQpE;;OAEG;IACH,mBAAmB,CAAC,IAAI,EAAE,QAAQ,EAAE,SAAS,EAAE,aAAa,GAAG,cAAc;IAgB7E;;OAEG;IACH,MAAM,EAAE,MAAM,IAAI,CAoBjB;IAED,WAAW,EAAE,MAAM,IAAI,CAEtB;IAED,MAAM,CAAC,aAAa,CAAC,IAAI,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,GAAG,MAAM;IAIlF,MAAM,IAAI,KAAK,CAAC,YAAY;CAmB7B;AAED,eAAe,QAAQ,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,QAAA,MAAM,YAAY,OAAO,CAAA;AACzB,QAAA,MAAM,cAAc,SAAS,CAAA;AAE7B,QAAA,MAAM,aAAa,aAAa,CAAA;AAChC,QAAA,MAAM,WAAW,WAAW,CAAA;AAC5B,QAAA,MAAM,WAAW,WAAW,CAAA;AAE5B,QAAA,MAAM,eAAe,SAAS,CAAA;AAC9B,QAAA,MAAM,iBAAiB,WAAW,CAAA;AAClC,QAAA,MAAM,2BAA2B,qBAAqB,CAAA;AAEtD,KAAK,QAAQ,GAAG,OAAO,WAAW,GAAG,OAAO,aAAa,GAAG,OAAO,WAAW,CAAA;AAC9E,KAAK,aAAa,GAAG,OAAO,YAAY,GAAG,OAAO,cAAc,CAAA;AAChE,KAAK,cAAc,GAAG,OAAO,eAAe,GAAG,OAAO,iBAAiB,GAAG,OAAO,2BAA2B,CAAA;AAE5G,KAAK,SAAS,GAAG;IACf,iDAAiD;IACjD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,wEAAwE;IACxE,YAAY,EAAE,MAAM,CAAA;IACpB,sEAAsE;IACtE,QAAQ,EAAE,MAAM,CAAA;IAChB,iEAAiE;IACjE,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,gFAAgF;IAChF,kBAAkB,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAA;IAChD,6EAA6E;IAC7E,sBAAsB,CAAC,EAAE,OAAO,CAAA;IAChC,uFAAuF;IACvF,MAAM,CAAC,EAAE,WAAW,GAAG,IAAI,CAAA;IAC3B,sDAAsD;IACtD,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,mFAAmF;IACnF,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAED,KAAK,SAAS,GAAG;IACf,IAAI,EAAE,QAAQ,CAAA;IACd,UAAU,EAAE,cAAc,CAAA;IAC1B,aAAa,EAAE,MAAM,GAAG,IAAI,CAAA;CAC7B,CAAA;AAmCD,cAAM,QAAS,SAAQ,KAAK,CAAC,aAAa,CAAC,SAAS,EAAE,SAAS,CAAC;IAC9D,MAAM,CAAC,YAAY,EAAE;QAAE,QAAQ,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,WAAW,GAAG,IAAI,CAAA;KAAE,CAIpF;IAED,KAAK,EAAE,SAAS,CAIf;IAED,mFAAmF;IACnF,kBAAkB,EAAE,MAAM,CAAI;IAE9B;;OAEG;IACH,YAAY,IAAI,MAAM;IAetB,iBAAiB;IAIjB,iBAAiB,CAAC,MAAM,CAAC,EAAE,WAAW,GAAG,IAAI;IAU7C,oBAAoB,CAAC,MAAM,CAAC,EAAE,WAAW,GAAG,IAAI;IAQhD,kBAAkB,CAAC,SAAS,EAAE,SAAS;IAOvC,oBAAoB;IAIpB;;;;;;;;OAQG;IACH,eAAe,CAAC,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,aAAa,GAAG,OAAO;IAQrE;;;;;OAKG;IACH,aAAa,CAAC,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,aAAa,GAAG,QAAQ;IAQpE;;OAEG;IACH,mBAAmB,CAAC,IAAI,EAAE,QAAQ,EAAE,SAAS,EAAE,aAAa,GAAG,cAAc;IAgB7E;;OAEG;IACH,MAAM,EAAE,MAAM,IAAI,CAoBjB;IAED,WAAW,EAAE,MAAM,IAAI,CAEtB;IAED,MAAM,CAAC,aAAa,CAAC,IAAI,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,GAAG,MAAM;IAIlF,MAAM,IAAI,KAAK,CAAC,YAAY;CAmB7B;AAED,eAAe,QAAQ,CAAA"}

package/index.js

@@ -12,7 +12,8 @@ function _define_property(obj, key, value) {
     return obj;
 }
 import React from 'react';
-import styled, { css, keyframes } from 'styled-components';
+import styled from '@emotion/styled';
+import { keyframes } from '@emotion/react';
 const DIRECTION_UP = 'up';
 const DIRECTION_DOWN = 'down';
 const MODE_UNPINNED = 'unpinned';
@@ -21,23 +22,11 @@ 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));
+const HeaderWrapper = /*#__PURE__*/ styled("div", {
+    target: "e1o9mv740",
+    label: "HeaderWrapper"
+})("position:", (props)=>props.$positionStickyDisabled ? 'static' : 'sticky', ";top:", (props)=>props.$top, "px;z-index:", (props)=>props.$zIndex, ";transform:translateY(", (props)=>props.$translateY, "px);animation-duration:0.2s;animation-timing-function:ease-out;", (props)=>props.$transition === TRANSITION_NORMAL && !props.$static ? 'transition: transform 0.2s ease-out;' : '', "  animation-name:", (props)=>props.$transition === TRANSITION_PINNED_TO_STATIC && props.$animateUpFrom !== null ? keyframesMoveUpFrom(props.$animateUpFrom) : 'none', ";", (props)=>props.$static ? 'transition: none;' : '');
+const keyframesMoveUpFrom = (from)=>/*#__PURE__*/ keyframes("from{transform:translateY(", Math.max(from, 0), "px)}to{transform:translateY(0)}", "keyframesMoveUpFrom");
 var _React_PureComponent;
 class Headroom extends (_React_PureComponent = React.PureComponent) {
     /**

package/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["index.tsx"],"sourcesContent":["import React from 'react'\nimport styled from '@emotion/styled'\nimport { keyframes } from '@emotion/react'\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 ? 'transition: transform 0.2s ease-out;' : '')}\n  animation-name: ${props =>\n    props.$transition === TRANSITION_PINNED_TO_STATIC && props.$animateUpFrom !== null\n      ? keyframesMoveUpFrom(props.$animateUpFrom)\n      : 'none'};\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 (this.state.mode === MODE_STATIC || (this.state.mode === MODE_PINNED && direction === DIRECTION_DOWN)) {\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 ? TRANSITION_NONE : 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 || 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 = 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(mode: ModeType, height: number, scrollHeight: number): number {\n    return mode === MODE_PINNED ? height : height - scrollHeight\n  }\n\n  render(): React.ReactElement {\n    const { children, scrollHeight, positionStickyDisabled, zIndex, className } = this.props\n    const { mode, transition, animateUpFrom } = this.state\n    const transform = mode === MODE_UNPINNED ? -scrollHeight : 0\n    const ownStickyTop = mode === MODE_STATIC ? -scrollHeight : 0\n    return (\n      <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}\n\nexport default Headroom\n"],"names":["React","styled","keyframes","DIRECTION_UP","DIRECTION_DOWN","MODE_UNPINNED","MODE_PINNED","MODE_STATIC","TRANSITION_NONE","TRANSITION_NORMAL","TRANSITION_PINNED_TO_STATIC","HeaderWrapper","props","$positionStickyDisabled","$top","$zIndex","$translateY","$transition","$static","$animateUpFrom","keyframesMoveUpFrom","from","Math","max","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.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
-import styled, { css, keyframes } from 'styled-components'
+import styled from '@emotion/styled'
+import { keyframes } from '@emotion/react'
 
 const DIRECTION_UP = 'up'
 const DIRECTION_DOWN = 'down'
@@ -59,12 +60,10 @@ const HeaderWrapper = styled.div<{
   animation-duration: 0.2s;
   animation-timing-function: ease-out;
   ${props => (props.$transition === TRANSITION_NORMAL && !props.$static ? 'transition: transform 0.2s ease-out;' : '')}
-  ${props =>
+  animation-name: ${props =>
     props.$transition === TRANSITION_PINNED_TO_STATIC && props.$animateUpFrom !== null
-      ? css`
-          animation-name: ${keyframesMoveUpFrom(props.$animateUpFrom)};
-        `
-      : ''}
+      ? keyframesMoveUpFrom(props.$animateUpFrom)
+      : 'none'};
   ${props => (props.$static ? 'transition: none;' : '')}
 `
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@integreat-app/react-sticky-headroom",
-  "version": "2.2.2",
+  "version": "3.0.1",
   "engines": {
     "node": ">=18",
     "npm": ">=10"
@@ -36,7 +36,7 @@
     "react",
     "hide",
     "header",
-    "styled-components",
+    "emotion",
     "typescript"
   ],
   "module": "./index.js",
@@ -64,44 +64,44 @@
   ],
   "peerDependencies": {
     "react": "16.x.x || 17.x.x || 18.x.x || 19.x.x",
-    "styled-components": "4.x.x || 5.x.x || 6.x.x"
+    "@emotion/react": "11.x.x",
+    "@emotion/styled": "11.x.x"
   },
   "devDependencies": {
-    "@stylelint/postcss-css-in-js": "^0.38.0",
-    "@swc/core": "^1.11.24",
-    "@swc/jest": "^0.2.38",
-    "@swc/plugin-styled-components": "^7.1.5",
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.1",
+    "@swc/core": "^1.13.2",
+    "@swc/jest": "^0.2.39",
+    "@swc/plugin-emotion": "^11.0.0",
     "@types/jest": "^29.5.14",
-    "@types/node": "^22.15.21",
-    "@types/react-dom": "^19.1.5",
-    "@typescript-eslint/eslint-plugin": "^8.32.1",
-    "@typescript-eslint/parser": "^8.32.1",
-    "browserslist": "^4.24.5",
+    "@types/node": "^22.16.5",
+    "@types/react-dom": "^19.1.6",
+    "@typescript-eslint/eslint-plugin": "^8.38.0",
+    "@typescript-eslint/parser": "^8.38.0",
+    "browserslist": "^4.25.1",
     "eslint": "^8.57.1",
-    "eslint-config-prettier": "^10.1.5",
+    "eslint-config-prettier": "^10.1.8",
     "eslint-config-standard": "^17.1.0",
-    "eslint-plugin-import": "^2.31.0",
-    "eslint-plugin-jest": "^28.11.0",
+    "eslint-plugin-import": "^2.32.0",
+    "eslint-plugin-jest": "^28.14.0",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-promise": "^6.6.0",
     "eslint-plugin-react": "^7.37.5",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "jest-junit": "^16.0.0",
-    "jest-styled-components": "^7.2.0",
-    "postcss": "^8.5.3",
+    "postcss": "^8.5.6",
     "postcss-styled-syntax": "^0.7.1",
-    "prettier": "^3.5.3",
+    "prettier": "^3.6.2",
     "raf": "^3.4.1",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
-    "styled-components": "^6.1.18",
-    "stylelint": "^16.19.1",
+    "stylelint": "^16.22.0",
     "stylelint-config-recommended": "^16.0.0",
     "swc-loader": "^0.2.6",
     "ts-node": "^10.9.2",
     "typescript": "^5.8.3",
-    "webpack": "^5.99.9",
+    "webpack": "^5.100.2",
     "webpack-cli": "^6.0.1"
   }
 }