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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -1,4 +1,5 @@
1
1
  # ReactStickyHeadroom
2
+
2
3
  [![npm badge](https://img.shields.io/npm/v/@integreat-app/react-sticky-headroom.svg)](https://www.npmjs.com/package/@integreat-app/react-sticky-headroom)
3
4
 
4
5
  ReactStickyHeadroom is a React component, that hides your header when you scroll down and shows it
@@ -9,14 +10,15 @@ This helps us avoid calculating the height ourselves and therefore browsers don'
9
10
  heavy Recalculate-Style-Phases.
10
11
  For more information read [here](https://developers.google.com/web/fundamentals/performance/rendering/).
11
12
 
12
- Since it's using [styled-components](https://www.styled-components.com/) internally, it's best to
13
- use it in apps where you already have styled-components in place.
14
- The component is only compatible with styled-components v4 and higher.
13
+ Since it's using [emotion](https://emotion.sh) internally, it's best to
14
+ use it in apps where you already have emotion in place.
15
15
 
16
16
  The component is inspired by [react-headroom](https://kyleamathews.github.io/react-headroom/).
17
17
 
18
18
  ## Usage
19
+
19
20
  A basic usage example:
21
+
20
22
  ```jsx
21
23
  render () {
22
24
  return <StickyHeadroom scrollHeight={100}>
@@ -31,32 +33,33 @@ Go to [https://digitalfabrik.github.io/react-sticky-headroom/](https://digitalfa
31
33
 
32
34
  [![Demo](https://raw.githubusercontent.com/digitalfabrik/react-sticky-headroom/main/demo.gif)](https://digitalfabrik.github.io/react-sticky-headroom/)
33
35
 
34
-
35
36
  ## API
37
+
36
38
  You can pass the following props to ReactStickyHeadroom:
37
- * `children: React.Node` The header component, that should be hidden and revealed
38
- * `scrollHeight: number` The maximum amount of px the header should move up when scrolling
39
- * `pinStart: number` (Default: `0`) The minimum scrollTop position where the transform should start
40
- * `height?: number` (Optional) The height of the `children` node. Used for calculating the stickyTop position for a sticky ancestor in `onStickyTopChanged`
41
- * `onStickyTopChanged?: (number) => void` Fired, when Headroom changes its state and `height` is provided. Passes the calculated stickyTop position of an ancestor node.
42
- * `positionStickyDisabled?: boolean` (Optional, Default: `false`) If true, the header will stay static (e.g. for edge 16 support)
43
- * `parent: ?HTMLElement` (Optional, Default: `document.documentElement`) The parent element firing the scroll event.
44
- * `zIndex: number` (Optional, Default: 1) The z-index used by the wrapper.
45
- * `className?: string` (Optional) A classname for applying custom styles to the wrapper. Use at your own risk.
46
39
 
40
+ - `children: React.Node` The header component, that should be hidden and revealed
41
+ - `scrollHeight: number` The maximum amount of px the header should move up when scrolling
42
+ - `pinStart: number` (Default: `0`) The minimum scrollTop position where the transform should start
43
+ - `height?: number` (Optional) The height of the `children` node. Used for calculating the stickyTop position for a sticky ancestor in `onStickyTopChanged`
44
+ - `onStickyTopChanged?: (number) => void` Fired, when Headroom changes its state and `height` is provided. Passes the calculated stickyTop position of an ancestor node.
45
+ - `positionStickyDisabled?: boolean` (Optional, Default: `false`) If true, the header will stay static (e.g. for edge 16 support)
46
+ - `parent: ?HTMLElement` (Optional, Default: `document.documentElement`) The parent element firing the scroll event.
47
+ - `zIndex: number` (Optional, Default: 1) The z-index used by the wrapper.
48
+ - `className?: string` (Optional) A classname for applying custom styles to the wrapper. Use at your own risk.
47
49
 
48
50
  ## Support
51
+
49
52
  The component generally supports:
50
- * Internet Explorer 11
51
- * Edge >= 16
52
- * Chrome >= 41
53
- * Firefox >= 40
54
- * Safari >= 6.2
53
+
54
+ - Internet Explorer 11
55
+ - Edge >= 16
56
+ - Chrome >= 41
57
+ - Firefox >= 40
58
+ - Safari >= 6.2
55
59
 
56
60
  However, if you want to support non-modern browsers, you are responsible for transpiling the code for your preferred target.
57
61
  The distributed files on npm are transpiled for ES2020.
58
62
 
59
-
60
63
  For hiding and revealing the header, the browser needs to support the css-property `position: sticky`.
61
64
  You can read about the browser support for that on [caniuse.com](https://caniuse.com/#feat=css-sticky).
62
65
  'Partial-Support' is enough for ReactStickyHeadroom to work in most cases.
@@ -64,6 +67,8 @@ You can read about the browser support for that on [caniuse.com](https://caniuse
64
67
  Since version 2.x.x, ReactStickyHeadroom is written in TypeScript.
65
68
  Support for FlowJS types were dropped in version 2.0.0.
66
69
 
70
+ Since version 3.x.x, ReactStickyHeadroom uses @emotion/styled instead of styled-components.
71
+
67
72
  ReactStickyHeadroom is a client-side library and hence does not support Server Side Rendering (SSR) a priori.
68
73
  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).
69
74
 
package/index.cjs CHANGED
@@ -9,7 +9,8 @@ Object.defineProperty(exports, "default", {
9
9
  }
10
10
  });
11
11
  const _react = /*#__PURE__*/ _interop_require_default(require("react"));
12
- const _styledcomponents = /*#__PURE__*/ _interop_require_wildcard(require("styled-components"));
12
+ const _styled = /*#__PURE__*/ _interop_require_default(require("@emotion/styled"));
13
+ const _react1 = require("@emotion/react");
13
14
  function _define_property(obj, key, value) {
14
15
  if (key in obj) {
15
16
  Object.defineProperty(obj, key, {
@@ -28,47 +29,6 @@ function _interop_require_default(obj) {
28
29
  default: obj
29
30
  };
30
31
  }
31
- function _getRequireWildcardCache(nodeInterop) {
32
- if (typeof WeakMap !== "function") return null;
33
- var cacheBabelInterop = new WeakMap();
34
- var cacheNodeInterop = new WeakMap();
35
- return (_getRequireWildcardCache = function(nodeInterop) {
36
- return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
37
- })(nodeInterop);
38
- }
39
- function _interop_require_wildcard(obj, nodeInterop) {
40
- if (!nodeInterop && obj && obj.__esModule) {
41
- return obj;
42
- }
43
- if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
44
- return {
45
- default: obj
46
- };
47
- }
48
- var cache = _getRequireWildcardCache(nodeInterop);
49
- if (cache && cache.has(obj)) {
50
- return cache.get(obj);
51
- }
52
- var newObj = {
53
- __proto__: null
54
- };
55
- var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
56
- for(var key in obj){
57
- if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
58
- var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
59
- if (desc && (desc.get || desc.set)) {
60
- Object.defineProperty(newObj, key, desc);
61
- } else {
62
- newObj[key] = obj[key];
63
- }
64
- }
65
- }
66
- newObj.default = obj;
67
- if (cache) {
68
- cache.set(obj, newObj);
69
- }
70
- return newObj;
71
- }
72
32
  const DIRECTION_UP = 'up';
73
33
  const DIRECTION_DOWN = 'down';
74
34
  const MODE_UNPINNED = 'unpinned';
@@ -77,23 +37,13 @@ const MODE_STATIC = 'static';
77
37
  const TRANSITION_NONE = 'none';
78
38
  const TRANSITION_NORMAL = 'normal';
79
39
  const TRANSITION_PINNED_TO_STATIC = 'pinned-to-static';
80
- const HeaderWrapper = _styledcomponents.default.div([
81
- "position:",
82
- ";top:",
83
- "px;z-index:",
84
- ";transform:translateY(",
85
- "px);animation-duration:0.2s;animation-timing-function:ease-out;",
86
- " ",
87
- " ",
88
- ""
89
- ], (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)([
90
- "animation-name:",
91
- ";"
92
- ], keyframesMoveUpFrom(props.$animateUpFrom)) : '', (props)=>props.$static ? 'transition: none;' : '');
93
- const keyframesMoveUpFrom = (from)=>(0, _styledcomponents.keyframes)([
94
- "from{transform:translateY(",
95
- "px)}to{transform:translateY(0)}"
96
- ], Math.max(from, 0));
40
+ const HeaderWrapper = (0, /*#__PURE__*/ _styled.default)("div", {
41
+ target: "e17ye17o0",
42
+ label: "HeaderWrapper"
43
+ })("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;' : '', " ", (props)=>props.$transition === TRANSITION_PINNED_TO_STATIC && props.$animateUpFrom !== null ? (0, _react1.css)`
44
+ animation-name: ${keyframesMoveUpFrom(props.$animateUpFrom)};
45
+ ` : '', " ", (props)=>props.$static ? 'transition: none;' : '', "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXgudHN4Iiwic291cmNlcyI6WyJpbmRleC50c3giXSwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0IGZyb20gJ3JlYWN0J1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnXG5pbXBvcnQgeyBjc3MsIGtleWZyYW1lcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0J1xuXG5jb25zdCBESVJFQ1RJT05fVVAgPSAndXAnXG5jb25zdCBESVJFQ1RJT05fRE9XTiA9ICdkb3duJ1xuXG5jb25zdCBNT0RFX1VOUElOTkVEID0gJ3VucGlubmVkJ1xuY29uc3QgTU9ERV9QSU5ORUQgPSAncGlubmVkJ1xuY29uc3QgTU9ERV9TVEFUSUMgPSAnc3RhdGljJ1xuXG5jb25zdCBUUkFOU0lUSU9OX05PTkUgPSAnbm9uZSdcbmNvbnN0IFRSQU5TSVRJT05fTk9STUFMID0gJ25vcm1hbCdcbmNvbnN0IFRSQU5TSVRJT05fUElOTkVEX1RPX1NUQVRJQyA9ICdwaW5uZWQtdG8tc3RhdGljJ1xuXG50eXBlIE1vZGVUeXBlID0gdHlwZW9mIE1PREVfUElOTkVEIHwgdHlwZW9mIE1PREVfVU5QSU5ORUQgfCB0eXBlb2YgTU9ERV9TVEFUSUNcbnR5cGUgRGlyZWN0aW9uVHlwZSA9IHR5cGVvZiBESVJFQ1RJT05fVVAgfCB0eXBlb2YgRElSRUNUSU9OX0RPV05cbnR5cGUgVHJhbnNpdGlvblR5cGUgPSB0eXBlb2YgVFJBTlNJVElPTl9OT05FIHwgdHlwZW9mIFRSQU5TSVRJT05fTk9STUFMIHwgdHlwZW9mIFRSQU5TSVRJT05fUElOTkVEX1RPX1NUQVRJQ1xuXG50eXBlIFByb3BzVHlwZSA9IHtcbiAgLyoqIFRoZSBjaGlsZCBub2RlIHRvIGJlIGRpc3BsYXllZCBhcyBhIGhlYWRlciAqL1xuICBjaGlsZHJlbjogUmVhY3QuUmVhY3ROb2RlXG4gIC8qKiBUaGUgbWF4aW11bSBhbW91bnQgb2YgcHggdGhlIGhlYWRlciBzaG91bGQgbW92ZSB1cCB3aGVuIHNjcm9sbGluZyAqL1xuICBzY3JvbGxIZWlnaHQ6IG51bWJlclxuICAvKiogVGhlIG1pbmltdW0gc2Nyb2xsVG9wIHBvc2l0aW9uIHdoZXJlIHRoZSB0cmFuc2Zvcm0gc2hvdWxkIHN0YXJ0ICovXG4gIHBpblN0YXJ0OiBudW1iZXJcbiAgLyoqIFVzZWQgZm9yIGNhbGN1bGF0aW5nIHRoZSBzdGlja3lUb3AgcG9zaXRpb24gb2YgYW4gYW5jZXN0b3IgKi9cbiAgaGVpZ2h0PzogbnVtYmVyXG4gIC8qKiBGaXJlZCwgd2hlbiBIZWFkcm9vbSBjaGFuZ2VzIGl0cyBzdGF0ZS4gUGFzc2VzIHN0aWNreVRvcCBvZiB0aGUgYW5jZXN0b3IuICovXG4gIG9uU3RpY2t5VG9wQ2hhbmdlZD86IChzdGlja3lUb3A6IG51bWJlcikgPT4gdm9pZFxuICAvKiogVHJ1ZSwgaWYgc3RpY2t5IHBvc2l0aW9uIHNob3VsZCBiZSBkaXNhYmxlZCAoZS5nLiBmb3IgZWRnZSAxNiBzdXBwb3J0KSAqL1xuICBwb3NpdGlvblN0aWNreURpc2FibGVkPzogYm9vbGVhblxuICAvKiogVGhlIHBhcmVudCBlbGVtZW50IGZpcmluZyB0aGUgc2Nyb2xsIGV2ZW50LiBEZWZhdWx0cyB0byBkb2N1bWVudC5kb2N1bWVudEVsZW1lbnQgKi9cbiAgcGFyZW50PzogSFRNTEVsZW1lbnQgfCBudWxsXG4gIC8qKiBUaGUgei1pbmRleCB1c2VkIGJ5IHRoZSB3cmFwcGVyLiBEZWZhdWx0cyB0byAxLiAqL1xuICB6SW5kZXg/OiBudW1iZXJcbiAgLyoqIEEgY2xhc3NuYW1lIGZvciBhcHBseWluZyBjdXN0b20gc3R5bGVzIHRvIHRoZSB3cmFwcGVyLiBVc2UgYXQgeW91ciBvd24gcmlzay4gKi9cbiAgY2xhc3NOYW1lPzogc3RyaW5nXG59XG5cbnR5cGUgU3RhdGVUeXBlID0ge1xuICBtb2RlOiBNb2RlVHlwZVxuICB0cmFuc2l0aW9uOiBUcmFuc2l0aW9uVHlwZVxuICBhbmltYXRlVXBGcm9tOiBudW1iZXIgfCBudWxsXG59XG5cbmNvbnN0IEhlYWRlcldyYXBwZXIgPSBzdHlsZWQuZGl2PHtcbiAgJHBvc2l0aW9uU3RpY2t5RGlzYWJsZWQ6IGJvb2xlYW5cbiAgJHRyYW5zbGF0ZVk6IG51bWJlclxuICAkdHJhbnNpdGlvbjogVHJhbnNpdGlvblR5cGVcbiAgJGFuaW1hdGVVcEZyb206IG51bWJlciB8IG51bGxcbiAgJHpJbmRleD86IG51bWJlclxuICAkdG9wOiBudW1iZXJcbiAgJHN0YXRpYzogYm9vbGVhblxufT5gXG4gIHBvc2l0aW9uOiAke3Byb3BzID0+IChwcm9wcy4kcG9zaXRpb25TdGlja3lEaXNhYmxlZCA/ICdzdGF0aWMnIDogJ3N0aWNreScpfTtcbiAgdG9wOiAke3Byb3BzID0+IHByb3BzLiR0b3B9cHg7XG4gIHotaW5kZXg6ICR7cHJvcHMgPT4gcHJvcHMuJHpJbmRleH07XG4gIHRyYW5zZm9ybTogdHJhbnNsYXRlWSgke3Byb3BzID0+IHByb3BzLiR0cmFuc2xhdGVZfXB4KTtcbiAgYW5pbWF0aW9uLWR1cmF0aW9uOiAwLjJzO1xuICBhbmltYXRpb24tdGltaW5nLWZ1bmN0aW9uOiBlYXNlLW91dDtcbiAgJHtwcm9wcyA9PiAocHJvcHMuJHRyYW5zaXRpb24gPT09IFRSQU5TSVRJT05fTk9STUFMICYmICFwcm9wcy4kc3RhdGljID8gJ3RyYW5zaXRpb246IHRyYW5zZm9ybSAwLjJzIGVhc2Utb3V0OycgOiAnJyl9XG4gICR7cHJvcHMgPT5cbiAgICBwcm9wcy4kdHJhbnNpdGlvbiA9PT0gVFJBTlNJVElPTl9QSU5ORURfVE9fU1RBVElDICYmIHByb3BzLiRhbmltYXRlVXBGcm9tICE9PSBudWxsXG4gICAgICA/IGNzc2BcbiAgICAgICAgICBhbmltYXRpb24tbmFtZTogJHtrZXlmcmFtZXNNb3ZlVXBGcm9tKHByb3BzLiRhbmltYXRlVXBGcm9tKX07XG4gICAgICAgIGBcbiAgICAgIDogJyd9XG4gICR7cHJvcHMgPT4gKHByb3BzLiRzdGF0aWMgPyAndHJhbnNpdGlvbjogbm9uZTsnIDogJycpfVxuYFxuXG5jb25zdCBrZXlmcmFtZXNNb3ZlVXBGcm9tID0gKGZyb206IG51bWJlcikgPT4ga2V5ZnJhbWVzYFxuICAgIGZyb20ge1xuICAgICAgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKCR7TWF0aC5tYXgoZnJvbSwgMCl9cHgpXG4gICAgfVxuXG4gICAgdG8ge1xuICAgICAgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKDApXG4gICAgfVxuYFxuXG5jbGFzcyBIZWFkcm9vbSBleHRlbmRzIFJlYWN0LlB1cmVDb21wb25lbnQ8UHJvcHNUeXBlLCBTdGF0ZVR5cGU+IHtcbiAgc3RhdGljIGRlZmF1bHRQcm9wczogeyBwaW5TdGFydDogbnVtYmVyOyB6SW5kZXg6IG51bWJlcjsgcGFyZW50OiBIVE1MRWxlbWVudCB8IG51bGwgfSA9IHtcbiAgICBwaW5TdGFydDogMCxcbiAgICB6SW5kZXg6IDEsXG4gICAgcGFyZW50OiB3aW5kb3cuZG9jdW1lbnQuZG9jdW1lbnRFbGVtZW50LFxuICB9XG5cbiAgc3RhdGU6IFN0YXRlVHlwZSA9IHtcbiAgICBtb2RlOiBNT0RFX1NUQVRJQyxcbiAgICB0cmFuc2l0aW9uOiBUUkFOU0lUSU9OX05PTkUsXG4gICAgYW5pbWF0ZVVwRnJvbTogbnVsbCxcbiAgfVxuXG4gIC8qKiB0aGUgdmVyeSBsYXN0IHNjcm9sbFRvcCB3aGljaCB3ZSBrbm93IGFib3V0ICh0byBkZXRlcm1pbmUgZGlyZWN0aW9uIGNoYW5nZXMpICovXG4gIGxhc3RLbm93blNjcm9sbFRvcDogbnVtYmVyID0gMFxuXG4gIC8qKlxuICAgKiBAcmV0dXJucyB7bnVtYmVyfSB0aGUgY3VycmVudCBzY3JvbGxUb3AgcG9zaXRpb24gb2YgdGhlIHdpbmRvd1xuICAgKi9cbiAgZ2V0U2Nyb2xsVG9wKCk6IG51bWJlciB7XG4gICAgY29uc3QgcGFyZW50ID0gdGhpcy5wcm9wcy5wYXJlbnRcbiAgICBpZiAocGFyZW50ICYmIHBhcmVudC5zY3JvbGxUb3AgIT09IHVuZGVmaW5lZCAmJiBwYXJlbnQgIT09IGRvY3VtZW50LmRvY3VtZW50RWxlbWVudCkge1xuICAgICAgcmV0dXJuIHBhcmVudC5zY3JvbGxUb3BcbiAgICB9XG4gICAgaWYgKHBhcmVudCAhPT0gZG9jdW1lbnQuZG9jdW1lbnRFbGVtZW50KSB7XG4gICAgICBjb25zb2xlLndhcm4oJ0NvdWxkIG5vdCBkZXRlcm1pbmUgc2Nyb2xsVG9wIGZyb20gcGFyZW50IGZvciBTdGlja3lIZWFkcm9vbS4gRGVmYXVsdGluZyB0byB3aW5kb3cucGFnZVlPZmZzZXQuJylcbiAgICB9XG4gICAgaWYgKHdpbmRvdy5wYWdlWU9mZnNldCA9PT0gdW5kZWZpbmVkKSB7XG4gICAgICBjb25zb2xlLmVycm9yKCd3aW5kb3cucGFnZVlPZmZzZXQgaXMgdW5kZWZpbmVkLiBEZWZhdWx0aW5nIHRvIDAuJylcbiAgICAgIHJldHVybiAwXG4gICAgfVxuICAgIHJldHVybiB3aW5kb3cucGFnZVlPZmZzZXRcbiAgfVxuXG4gIGNvbXBvbmVudERpZE1vdW50KCkge1xuICAgIHRoaXMuYWRkU2Nyb2xsTGlzdGVuZXIodGhpcy5wcm9wcy5wYXJlbnQpXG4gIH1cblxuICBhZGRTY3JvbGxMaXN0ZW5lcihwYXJlbnQ/OiBIVE1MRWxlbWVudCB8IG51bGwpIHtcbiAgICBpZiAocGFyZW50ID09PSB3aW5kb3cuZG9jdW1lbnQuZG9jdW1lbnRFbGVtZW50KSB7XG4gICAgICB3aW5kb3cuYWRkRXZlbnRMaXN0ZW5lcignc2Nyb2xsJywgdGhpcy5oYW5kbGVFdmVudClcbiAgICB9IGVsc2UgaWYgKHBhcmVudCkge1xuICAgICAgcGFyZW50LmFkZEV2ZW50TGlzdGVuZXIoJ3Njcm9sbCcsIHRoaXMuaGFuZGxlRXZlbnQpXG4gICAgfSBlbHNlIHtcbiAgICAgIGNvbnNvbGUuZGVidWcoXCIncGFyZW50JyBwcm9wIG9mIEhlYWRyb29tIGlzIG51bGwuIEFzc3VtaW5nLCBpdCB3aWxsIGJlIHNldCBzb29uLi4uXCIpXG4gICAgfVxuICB9XG5cbiAgcmVtb3ZlU2Nyb2xsTGlzdGVuZXIocGFyZW50PzogSFRNTEVsZW1lbnQgfCBudWxsKSB7XG4gICAgaWYgKHBhcmVudCA9PT0gd2luZG93LmRvY3VtZW50LmRvY3VtZW50RWxlbWVudCkge1xuICAgICAgd2luZG93LnJlbW92ZUV2ZW50TGlzdGVuZXIoJ3Njcm9sbCcsIHRoaXMuaGFuZGxlRXZlbnQpXG4gICAgfSBlbHNlIGlmIChwYXJlbnQpIHtcbiAgICAgIHBhcmVudC5yZW1vdmVFdmVudExpc3RlbmVyKCdzY3JvbGwnLCB0aGlzLmhhbmRsZUV2ZW50KVxuICAgIH1cbiAgfVxuXG4gIGNvbXBvbmVudERpZFVwZGF0ZShwcmV2UHJvcHM6IFByb3BzVHlwZSkge1xuICAgIGlmIChwcmV2UHJvcHMucGFyZW50ICE9PSB0aGlzLnByb3BzLnBhcmVudCkge1xuICAgICAgdGhpcy5yZW1vdmVTY3JvbGxMaXN0ZW5lcihwcmV2UHJvcHMucGFyZW50KVxuICAgICAgdGhpcy5hZGRTY3JvbGxMaXN0ZW5lcih0aGlzLnByb3BzLnBhcmVudClcbiAgICB9XG4gIH1cblxuICBjb21wb25lbnRXaWxsVW5tb3VudCgpIHtcbiAgICB0aGlzLnJlbW92ZVNjcm9sbExpc3RlbmVyKHRoaXMucHJvcHMucGFyZW50KVxuICB9XG5cbiAgLyoqXG4gICAqIElmIHdlJ3JlIGFscmVhZHkgc3RhdGljIGFuZCBwaW5TdGFydCArIHNjcm9sbEhlaWdodCA+PSBzY3JvbGxUb3AsIHRoZW4gd2Ugc2hvdWxkIHN0YXkgc3RhdGljLlxuICAgKiBJZiB3ZSdyZSBub3QgYWxyZWFkeSBzdGF0aWMsIHRoZW4gd2Ugc2hvdWxkIHNldCB0aGUgaGVhZGVyIHN0YXRpYywgb25seSB3aGVuIHBpblN0YXJ0ID49IHNjcm9sbFRvcCAocmVnYXJkbGVzcyBvZlxuICAgKiBzY3JvbGxIZWlnaHQsIHNvIHRoZSBoZWFkZXIgZG9lc24ndCBqdW1wIHVwLCB3aGVuIHNjcm9sbGluZyB1cHdhcmRzIHRvIHRoZSB0cmlnZ2VyKS5cbiAgICogRWxzZSB3ZSBzaG91bGRuJ3Qgc2V0IGl0IHN0YXRpYy5cbiAgICogQHBhcmFtIHNjcm9sbFRvcCB0aGUgY3VycmVudFNjcm9sbFRvcCBwb3NpdGlvblxuICAgKiBAcGFyYW0gZGlyZWN0aW9uIHRoZSBjdXJyZW50IGRpcmVjdGlvblxuICAgKiBAcmV0dXJucyB7Ym9vbGVhbn0gaWYgd2Ugc2hvdWxkIHNldCB0aGUgaGVhZGVyIHN0YXRpY1xuICAgKi9cbiAgc2hvdWxkU2V0U3RhdGljKHNjcm9sbFRvcDogbnVtYmVyLCBkaXJlY3Rpb246IERpcmVjdGlvblR5cGUpOiBib29sZWFuIHtcbiAgICBpZiAodGhpcy5zdGF0ZS5tb2RlID09PSBNT0RFX1NUQVRJQyB8fCAodGhpcy5zdGF0ZS5tb2RlID09PSBNT0RFX1BJTk5FRCAmJiBkaXJlY3Rpb24gPT09IERJUkVDVElPTl9ET1dOKSkge1xuICAgICAgcmV0dXJuIHRoaXMucHJvcHMucGluU3RhcnQgKyB0aGlzLnByb3BzLnNjcm9sbEhlaWdodCA+PSBzY3JvbGxUb3BcbiAgICB9IGVsc2Uge1xuICAgICAgcmV0dXJuIHRoaXMucHJvcHMucGluU3RhcnQgPj0gc2Nyb2xsVG9wXG4gICAgfVxuICB9XG5cbiAgLyoqXG4gICAqIERldGVybWluZXMgdGhlIG1vZGUgZGVwZW5kaW5nIG9uIHRoZSBzY3JvbGxUb3AgcG9zaXRpb24gYW5kIHRoZSBjdXJyZW50IGRpcmVjdGlvblxuICAgKiBAcGFyYW0ge251bWJlcn0gc2Nyb2xsVG9wXG4gICAqIEBwYXJhbSB7c3RyaW5nfSBkaXJlY3Rpb25cbiAgICogQHJldHVybnMge3N0cmluZ30gdGhlIG5leHQgbW9kZSBvZiBIZWFkcm9vbVxuICAgKi9cbiAgZGV0ZXJtaW5lTW9kZShzY3JvbGxUb3A6IG51bWJlciwgZGlyZWN0aW9uOiBEaXJlY3Rpb25UeXBlKTogTW9kZVR5cGUge1xuICAgIGlmICh0aGlzLnNob3VsZFNldFN0YXRpYyhzY3JvbGxUb3AsIGRpcmVjdGlvbikpIHtcbiAgICAgIHJldHVybiBNT0RFX1NUQVRJQ1xuICAgIH0gZWxzZSB7XG4gICAgICByZXR1cm4gZGlyZWN0aW9uID09PSBESVJFQ1RJT05fVVAgPyBNT0RFX1BJTk5FRCA6IE1PREVfVU5QSU5ORURcbiAgICB9XG4gIH1cblxuICAvKipcbiAgICogQHJldHVybnMge1RyYW5zaXRpb25UeXBlfSBkZXRlcm1pbmVzIHRoZSBraW5kIG9mIHRyYW5zaXRpb25cbiAgICovXG4gIGRldGVybWluZVRyYW5zaXRpb24obW9kZTogTW9kZVR5cGUsIGRpcmVjdGlvbjogRGlyZWN0aW9uVHlwZSk6IFRyYW5zaXRpb25UeXBlIHtcbiAgICAvLyBIYW5kbGUgc3BlY2lhbCBjYXNlOiBJZiB3ZSdyZSBwaW5uZWQgYW5kIGdvaW5nIHRvIHN0YXRpYywgd2UgbmVlZCBhIHNwZWNpYWwgdHJhbnNpdGlvbiB1c2luZyBjc3MgYW5pbWF0aW9uXG4gICAgaWYgKHRoaXMuc3RhdGUubW9kZSA9PT0gTU9ERV9QSU5ORUQgJiYgbW9kZSA9PT0gTU9ERV9TVEFUSUMpIHtcbiAgICAgIHJldHVybiBUUkFOU0lUSU9OX1BJTk5FRF9UT19TVEFUSUNcbiAgICB9XG4gICAgLy8gSWYgbW9kZSBpcyBzdGF0aWMsIHRoZW4gbm8gdHJhbnNpdGlvbiwgYmVjYXVzZSB3ZSdyZSBhbHJlYWR5IGluIHRoZSByaWdodCBzcG90XG4gICAgLy8gKGFuZCB3YW50IHRvIGNoYW5nZSB0cmFuc2Zvcm0gYW5kIHRvcCBwcm9wZXJ0aWVzIHNlYW1sZXNzbHkpXG4gICAgaWYgKG1vZGUgPT09IE1PREVfU1RBVElDKSB7XG4gICAgICByZXR1cm4gdGhpcy5zdGF0ZS50cmFuc2l0aW9uID09PSBUUkFOU0lUSU9OX05PTkUgPyBUUkFOU0lUSU9OX05PTkUgOiBUUkFOU0lUSU9OX1BJTk5FRF9UT19TVEFUSUNcbiAgICB9XG4gICAgLy8gbW9kZSBpcyBub3Qgc3RhdGljLCB0cmFuc2l0aW9uIHdoZW4gbW92aW5nIHVwd2FyZHMgb3Igd2hlbiB3ZSd2ZSBsYXN0bHkgZGlkIHRoZSB0cmFuc2l0aW9uXG4gICAgcmV0dXJuIGRpcmVjdGlvbiA9PT0gRElSRUNUSU9OX1VQIHx8IHRoaXMuc3RhdGUudHJhbnNpdGlvbiA9PT0gVFJBTlNJVElPTl9OT1JNQUxcbiAgICAgID8gVFJBTlNJVElPTl9OT1JNQUxcbiAgICAgIDogVFJBTlNJVElPTl9OT05FXG4gIH1cblxuICAvKipcbiAgICogQ2hlY2tzIHRoZSBjdXJyZW50IHNjcm9sbFRvcCBwb3NpdGlvbiBhbmQgdXBkYXRlcyB0aGUgc3RhdGUgYWNjb3JkaW5nbHlcbiAgICovXG4gIHVwZGF0ZTogKCkgPT4gdm9pZCA9ICgpID0+IHtcbiAgICBjb25zdCBjdXJyZW50U2Nyb2xsVG9wID0gdGhpcy5nZXRTY3JvbGxUb3AoKVxuICAgIGNvbnN0IG5ld1N0YXRlOiBQYXJ0aWFsPFN0YXRlVHlwZT4gPSB7fVxuICAgIGlmIChjdXJyZW50U2Nyb2xsVG9wID09PSB0aGlzLmxhc3RLbm93blNjcm9sbFRvcCkge1xuICAgICAgcmV0dXJuXG4gICAgfVxuICAgIGNvbnN0IGRpcmVjdGlvbiA9IHRoaXMubGFzdEtub3duU2Nyb2xsVG9wIDwgY3VycmVudFNjcm9sbFRvcCA/IERJUkVDVElPTl9ET1dOIDogRElSRUNUSU9OX1VQXG4gICAgbmV3U3RhdGUubW9kZSA9IHRoaXMuZGV0ZXJtaW5lTW9kZShjdXJyZW50U2Nyb2xsVG9wLCBkaXJlY3Rpb24pXG4gICAgbmV3U3RhdGUudHJhbnNpdGlvbiA9IHRoaXMuZGV0ZXJtaW5lVHJhbnNpdGlvbihuZXdTdGF0ZS5tb2RlLCBkaXJlY3Rpb24pXG5cbiAgICBjb25zdCB7IG9uU3RpY2t5VG9wQ2hhbmdlZCwgaGVpZ2h0LCBzY3JvbGxIZWlnaHQsIHBpblN0YXJ0IH0gPSB0aGlzLnByb3BzXG4gICAgaWYgKHRoaXMuc3RhdGUubW9kZSA9PT0gTU9ERV9QSU5ORUQgJiYgbmV3U3RhdGUubW9kZSA9PT0gTU9ERV9TVEFUSUMpIHtcbiAgICAgIC8vIGFuaW1hdGlvbiBpbiB0aGUgc3BlY2lhbCBjYXNlIGZyb20gcGlubmVkIHRvIHN0YXRpY1xuICAgICAgbmV3U3RhdGUuYW5pbWF0ZVVwRnJvbSA9IGN1cnJlbnRTY3JvbGxUb3AgLSBwaW5TdGFydFxuICAgIH1cbiAgICBpZiAob25TdGlja3lUb3BDaGFuZ2VkICYmIG5ld1N0YXRlLm1vZGUgIT09IHRoaXMuc3RhdGUubW9kZSAmJiBoZWlnaHQpIHtcbiAgICAgIG9uU3RpY2t5VG9wQ2hhbmdlZChIZWFkcm9vbS5jYWxjU3RpY2t5VG9wKG5ld1N0YXRlLm1vZGUsIGhlaWdodCwgc2Nyb2xsSGVpZ2h0KSlcbiAgICB9XG4gICAgdGhpcy5zZXRTdGF0ZShuZXdTdGF0ZSBhcyBTdGF0ZVR5cGUpXG4gICAgdGhpcy5sYXN0S25vd25TY3JvbGxUb3AgPSBjdXJyZW50U2Nyb2xsVG9wXG4gIH1cblxuICBoYW5kbGVFdmVudDogKCkgPT4gdm9pZCA9ICgpID0+IHtcbiAgICB3aW5kb3cucmVxdWVzdEFuaW1hdGlvbkZyYW1lKHRoaXMudXBkYXRlKVxuICB9XG5cbiAgc3RhdGljIGNhbGNTdGlja3lUb3AobW9kZTogTW9kZVR5cGUsIGhlaWdodDogbnVtYmVyLCBzY3JvbGxIZWlnaHQ6IG51bWJlcik6IG51bWJlciB7XG4gICAgcmV0dXJuIG1vZGUgPT09IE1PREVfUElOTkVEID8gaGVpZ2h0IDogaGVpZ2h0IC0gc2Nyb2xsSGVpZ2h0XG4gIH1cblxuICByZW5kZXIoKTogUmVhY3QuUmVhY3RFbGVtZW50IHtcbiAgICBjb25zdCB7IGNoaWxkcmVuLCBzY3JvbGxIZWlnaHQsIHBvc2l0aW9uU3RpY2t5RGlzYWJsZWQsIHpJbmRleCwgY2xhc3NOYW1lIH0gPSB0aGlzLnByb3BzXG4gICAgY29uc3QgeyBtb2RlLCB0cmFuc2l0aW9uLCBhbmltYXRlVXBGcm9tIH0gPSB0aGlzLnN0YXRlXG4gICAgY29uc3QgdHJhbnNmb3JtID0gbW9kZSA9PT0gTU9ERV9VTlBJTk5FRCA/IC1zY3JvbGxIZWlnaHQgOiAwXG4gICAgY29uc3Qgb3duU3RpY2t5VG9wID0gbW9kZSA9PT0gTU9ERV9TVEFUSUMgPyAtc2Nyb2xsSGVpZ2h0IDogMFxuICAgIHJldHVybiAoXG4gICAgICA8SGVhZGVyV3JhcHBlclxuICAgICAgICBjbGFzc05hbWU9e2NsYXNzTmFtZX1cbiAgICAgICAgJHRyYW5zbGF0ZVk9e3RyYW5zZm9ybX1cbiAgICAgICAgJHRvcD17b3duU3RpY2t5VG9wfVxuICAgICAgICAkdHJhbnNpdGlvbj17dHJhbnNpdGlvbn1cbiAgICAgICAgJHBvc2l0aW9uU3RpY2t5RGlzYWJsZWQ9eyEhcG9zaXRpb25TdGlja3lEaXNhYmxlZH1cbiAgICAgICAgJHN0YXRpYz17bW9kZSA9PT0gTU9ERV9TVEFUSUN9XG4gICAgICAgICRhbmltYXRlVXBGcm9tPXthbmltYXRlVXBGcm9tfVxuICAgICAgICAkekluZGV4PXt6SW5kZXh9PlxuICAgICAgICB7Y2hpbGRyZW59XG4gICAgICA8L0hlYWRlcldyYXBwZXI+XG4gICAgKVxuICB9XG59XG5cbmV4cG9ydCBkZWZhdWx0IEhlYWRyb29tXG4iXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBOENzQiJ9 */");
46
+ const keyframesMoveUpFrom = (from)=>(0, /*#__PURE__*/ _react1.keyframes)("from{transform:translateY(", Math.max(from, 0), "px)}to{transform:translateY(0)}", "keyframesMoveUpFrom", "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXgudHN4Iiwic291cmNlcyI6WyJpbmRleC50c3giXSwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0IGZyb20gJ3JlYWN0J1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnXG5pbXBvcnQgeyBjc3MsIGtleWZyYW1lcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0J1xuXG5jb25zdCBESVJFQ1RJT05fVVAgPSAndXAnXG5jb25zdCBESVJFQ1RJT05fRE9XTiA9ICdkb3duJ1xuXG5jb25zdCBNT0RFX1VOUElOTkVEID0gJ3VucGlubmVkJ1xuY29uc3QgTU9ERV9QSU5ORUQgPSAncGlubmVkJ1xuY29uc3QgTU9ERV9TVEFUSUMgPSAnc3RhdGljJ1xuXG5jb25zdCBUUkFOU0lUSU9OX05PTkUgPSAnbm9uZSdcbmNvbnN0IFRSQU5TSVRJT05fTk9STUFMID0gJ25vcm1hbCdcbmNvbnN0IFRSQU5TSVRJT05fUElOTkVEX1RPX1NUQVRJQyA9ICdwaW5uZWQtdG8tc3RhdGljJ1xuXG50eXBlIE1vZGVUeXBlID0gdHlwZW9mIE1PREVfUElOTkVEIHwgdHlwZW9mIE1PREVfVU5QSU5ORUQgfCB0eXBlb2YgTU9ERV9TVEFUSUNcbnR5cGUgRGlyZWN0aW9uVHlwZSA9IHR5cGVvZiBESVJFQ1RJT05fVVAgfCB0eXBlb2YgRElSRUNUSU9OX0RPV05cbnR5cGUgVHJhbnNpdGlvblR5cGUgPSB0eXBlb2YgVFJBTlNJVElPTl9OT05FIHwgdHlwZW9mIFRSQU5TSVRJT05fTk9STUFMIHwgdHlwZW9mIFRSQU5TSVRJT05fUElOTkVEX1RPX1NUQVRJQ1xuXG50eXBlIFByb3BzVHlwZSA9IHtcbiAgLyoqIFRoZSBjaGlsZCBub2RlIHRvIGJlIGRpc3BsYXllZCBhcyBhIGhlYWRlciAqL1xuICBjaGlsZHJlbjogUmVhY3QuUmVhY3ROb2RlXG4gIC8qKiBUaGUgbWF4aW11bSBhbW91bnQgb2YgcHggdGhlIGhlYWRlciBzaG91bGQgbW92ZSB1cCB3aGVuIHNjcm9sbGluZyAqL1xuICBzY3JvbGxIZWlnaHQ6IG51bWJlclxuICAvKiogVGhlIG1pbmltdW0gc2Nyb2xsVG9wIHBvc2l0aW9uIHdoZXJlIHRoZSB0cmFuc2Zvcm0gc2hvdWxkIHN0YXJ0ICovXG4gIHBpblN0YXJ0OiBudW1iZXJcbiAgLyoqIFVzZWQgZm9yIGNhbGN1bGF0aW5nIHRoZSBzdGlja3lUb3AgcG9zaXRpb24gb2YgYW4gYW5jZXN0b3IgKi9cbiAgaGVpZ2h0PzogbnVtYmVyXG4gIC8qKiBGaXJlZCwgd2hlbiBIZWFkcm9vbSBjaGFuZ2VzIGl0cyBzdGF0ZS4gUGFzc2VzIHN0aWNreVRvcCBvZiB0aGUgYW5jZXN0b3IuICovXG4gIG9uU3RpY2t5VG9wQ2hhbmdlZD86IChzdGlja3lUb3A6IG51bWJlcikgPT4gdm9pZFxuICAvKiogVHJ1ZSwgaWYgc3RpY2t5IHBvc2l0aW9uIHNob3VsZCBiZSBkaXNhYmxlZCAoZS5nLiBmb3IgZWRnZSAxNiBzdXBwb3J0KSAqL1xuICBwb3NpdGlvblN0aWNreURpc2FibGVkPzogYm9vbGVhblxuICAvKiogVGhlIHBhcmVudCBlbGVtZW50IGZpcmluZyB0aGUgc2Nyb2xsIGV2ZW50LiBEZWZhdWx0cyB0byBkb2N1bWVudC5kb2N1bWVudEVsZW1lbnQgKi9cbiAgcGFyZW50PzogSFRNTEVsZW1lbnQgfCBudWxsXG4gIC8qKiBUaGUgei1pbmRleCB1c2VkIGJ5IHRoZSB3cmFwcGVyLiBEZWZhdWx0cyB0byAxLiAqL1xuICB6SW5kZXg/OiBudW1iZXJcbiAgLyoqIEEgY2xhc3NuYW1lIGZvciBhcHBseWluZyBjdXN0b20gc3R5bGVzIHRvIHRoZSB3cmFwcGVyLiBVc2UgYXQgeW91ciBvd24gcmlzay4gKi9cbiAgY2xhc3NOYW1lPzogc3RyaW5nXG59XG5cbnR5cGUgU3RhdGVUeXBlID0ge1xuICBtb2RlOiBNb2RlVHlwZVxuICB0cmFuc2l0aW9uOiBUcmFuc2l0aW9uVHlwZVxuICBhbmltYXRlVXBGcm9tOiBudW1iZXIgfCBudWxsXG59XG5cbmNvbnN0IEhlYWRlcldyYXBwZXIgPSBzdHlsZWQuZGl2PHtcbiAgJHBvc2l0aW9uU3RpY2t5RGlzYWJsZWQ6IGJvb2xlYW5cbiAgJHRyYW5zbGF0ZVk6IG51bWJlclxuICAkdHJhbnNpdGlvbjogVHJhbnNpdGlvblR5cGVcbiAgJGFuaW1hdGVVcEZyb206IG51bWJlciB8IG51bGxcbiAgJHpJbmRleD86IG51bWJlclxuICAkdG9wOiBudW1iZXJcbiAgJHN0YXRpYzogYm9vbGVhblxufT5gXG4gIHBvc2l0aW9uOiAke3Byb3BzID0+IChwcm9wcy4kcG9zaXRpb25TdGlja3lEaXNhYmxlZCA/ICdzdGF0aWMnIDogJ3N0aWNreScpfTtcbiAgdG9wOiAke3Byb3BzID0+IHByb3BzLiR0b3B9cHg7XG4gIHotaW5kZXg6ICR7cHJvcHMgPT4gcHJvcHMuJHpJbmRleH07XG4gIHRyYW5zZm9ybTogdHJhbnNsYXRlWSgke3Byb3BzID0+IHByb3BzLiR0cmFuc2xhdGVZfXB4KTtcbiAgYW5pbWF0aW9uLWR1cmF0aW9uOiAwLjJzO1xuICBhbmltYXRpb24tdGltaW5nLWZ1bmN0aW9uOiBlYXNlLW91dDtcbiAgJHtwcm9wcyA9PiAocHJvcHMuJHRyYW5zaXRpb24gPT09IFRSQU5TSVRJT05fTk9STUFMICYmICFwcm9wcy4kc3RhdGljID8gJ3RyYW5zaXRpb246IHRyYW5zZm9ybSAwLjJzIGVhc2Utb3V0OycgOiAnJyl9XG4gICR7cHJvcHMgPT5cbiAgICBwcm9wcy4kdHJhbnNpdGlvbiA9PT0gVFJBTlNJVElPTl9QSU5ORURfVE9fU1RBVElDICYmIHByb3BzLiRhbmltYXRlVXBGcm9tICE9PSBudWxsXG4gICAgICA/IGNzc2BcbiAgICAgICAgICBhbmltYXRpb24tbmFtZTogJHtrZXlmcmFtZXNNb3ZlVXBGcm9tKHByb3BzLiRhbmltYXRlVXBGcm9tKX07XG4gICAgICAgIGBcbiAgICAgIDogJyd9XG4gICR7cHJvcHMgPT4gKHByb3BzLiRzdGF0aWMgPyAndHJhbnNpdGlvbjogbm9uZTsnIDogJycpfVxuYFxuXG5jb25zdCBrZXlmcmFtZXNNb3ZlVXBGcm9tID0gKGZyb206IG51bWJlcikgPT4ga2V5ZnJhbWVzYFxuICAgIGZyb20ge1xuICAgICAgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKCR7TWF0aC5tYXgoZnJvbSwgMCl9cHgpXG4gICAgfVxuXG4gICAgdG8ge1xuICAgICAgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKDApXG4gICAgfVxuYFxuXG5jbGFzcyBIZWFkcm9vbSBleHRlbmRzIFJlYWN0LlB1cmVDb21wb25lbnQ8UHJvcHNUeXBlLCBTdGF0ZVR5cGU+IHtcbiAgc3RhdGljIGRlZmF1bHRQcm9wczogeyBwaW5TdGFydDogbnVtYmVyOyB6SW5kZXg6IG51bWJlcjsgcGFyZW50OiBIVE1MRWxlbWVudCB8IG51bGwgfSA9IHtcbiAgICBwaW5TdGFydDogMCxcbiAgICB6SW5kZXg6IDEsXG4gICAgcGFyZW50OiB3aW5kb3cuZG9jdW1lbnQuZG9jdW1lbnRFbGVtZW50LFxuICB9XG5cbiAgc3RhdGU6IFN0YXRlVHlwZSA9IHtcbiAgICBtb2RlOiBNT0RFX1NUQVRJQyxcbiAgICB0cmFuc2l0aW9uOiBUUkFOU0lUSU9OX05PTkUsXG4gICAgYW5pbWF0ZVVwRnJvbTogbnVsbCxcbiAgfVxuXG4gIC8qKiB0aGUgdmVyeSBsYXN0IHNjcm9sbFRvcCB3aGljaCB3ZSBrbm93IGFib3V0ICh0byBkZXRlcm1pbmUgZGlyZWN0aW9uIGNoYW5nZXMpICovXG4gIGxhc3RLbm93blNjcm9sbFRvcDogbnVtYmVyID0gMFxuXG4gIC8qKlxuICAgKiBAcmV0dXJucyB7bnVtYmVyfSB0aGUgY3VycmVudCBzY3JvbGxUb3AgcG9zaXRpb24gb2YgdGhlIHdpbmRvd1xuICAgKi9cbiAgZ2V0U2Nyb2xsVG9wKCk6IG51bWJlciB7XG4gICAgY29uc3QgcGFyZW50ID0gdGhpcy5wcm9wcy5wYXJlbnRcbiAgICBpZiAocGFyZW50ICYmIHBhcmVudC5zY3JvbGxUb3AgIT09IHVuZGVmaW5lZCAmJiBwYXJlbnQgIT09IGRvY3VtZW50LmRvY3VtZW50RWxlbWVudCkge1xuICAgICAgcmV0dXJuIHBhcmVudC5zY3JvbGxUb3BcbiAgICB9XG4gICAgaWYgKHBhcmVudCAhPT0gZG9jdW1lbnQuZG9jdW1lbnRFbGVtZW50KSB7XG4gICAgICBjb25zb2xlLndhcm4oJ0NvdWxkIG5vdCBkZXRlcm1pbmUgc2Nyb2xsVG9wIGZyb20gcGFyZW50IGZvciBTdGlja3lIZWFkcm9vbS4gRGVmYXVsdGluZyB0byB3aW5kb3cucGFnZVlPZmZzZXQuJylcbiAgICB9XG4gICAgaWYgKHdpbmRvdy5wYWdlWU9mZnNldCA9PT0gdW5kZWZpbmVkKSB7XG4gICAgICBjb25zb2xlLmVycm9yKCd3aW5kb3cucGFnZVlPZmZzZXQgaXMgdW5kZWZpbmVkLiBEZWZhdWx0aW5nIHRvIDAuJylcbiAgICAgIHJldHVybiAwXG4gICAgfVxuICAgIHJldHVybiB3aW5kb3cucGFnZVlPZmZzZXRcbiAgfVxuXG4gIGNvbXBvbmVudERpZE1vdW50KCkge1xuICAgIHRoaXMuYWRkU2Nyb2xsTGlzdGVuZXIodGhpcy5wcm9wcy5wYXJlbnQpXG4gIH1cblxuICBhZGRTY3JvbGxMaXN0ZW5lcihwYXJlbnQ/OiBIVE1MRWxlbWVudCB8IG51bGwpIHtcbiAgICBpZiAocGFyZW50ID09PSB3aW5kb3cuZG9jdW1lbnQuZG9jdW1lbnRFbGVtZW50KSB7XG4gICAgICB3aW5kb3cuYWRkRXZlbnRMaXN0ZW5lcignc2Nyb2xsJywgdGhpcy5oYW5kbGVFdmVudClcbiAgICB9IGVsc2UgaWYgKHBhcmVudCkge1xuICAgICAgcGFyZW50LmFkZEV2ZW50TGlzdGVuZXIoJ3Njcm9sbCcsIHRoaXMuaGFuZGxlRXZlbnQpXG4gICAgfSBlbHNlIHtcbiAgICAgIGNvbnNvbGUuZGVidWcoXCIncGFyZW50JyBwcm9wIG9mIEhlYWRyb29tIGlzIG51bGwuIEFzc3VtaW5nLCBpdCB3aWxsIGJlIHNldCBzb29uLi4uXCIpXG4gICAgfVxuICB9XG5cbiAgcmVtb3ZlU2Nyb2xsTGlzdGVuZXIocGFyZW50PzogSFRNTEVsZW1lbnQgfCBudWxsKSB7XG4gICAgaWYgKHBhcmVudCA9PT0gd2luZG93LmRvY3VtZW50LmRvY3VtZW50RWxlbWVudCkge1xuICAgICAgd2luZG93LnJlbW92ZUV2ZW50TGlzdGVuZXIoJ3Njcm9sbCcsIHRoaXMuaGFuZGxlRXZlbnQpXG4gICAgfSBlbHNlIGlmIChwYXJlbnQpIHtcbiAgICAgIHBhcmVudC5yZW1vdmVFdmVudExpc3RlbmVyKCdzY3JvbGwnLCB0aGlzLmhhbmRsZUV2ZW50KVxuICAgIH1cbiAgfVxuXG4gIGNvbXBvbmVudERpZFVwZGF0ZShwcmV2UHJvcHM6IFByb3BzVHlwZSkge1xuICAgIGlmIChwcmV2UHJvcHMucGFyZW50ICE9PSB0aGlzLnByb3BzLnBhcmVudCkge1xuICAgICAgdGhpcy5yZW1vdmVTY3JvbGxMaXN0ZW5lcihwcmV2UHJvcHMucGFyZW50KVxuICAgICAgdGhpcy5hZGRTY3JvbGxMaXN0ZW5lcih0aGlzLnByb3BzLnBhcmVudClcbiAgICB9XG4gIH1cblxuICBjb21wb25lbnRXaWxsVW5tb3VudCgpIHtcbiAgICB0aGlzLnJlbW92ZVNjcm9sbExpc3RlbmVyKHRoaXMucHJvcHMucGFyZW50KVxuICB9XG5cbiAgLyoqXG4gICAqIElmIHdlJ3JlIGFscmVhZHkgc3RhdGljIGFuZCBwaW5TdGFydCArIHNjcm9sbEhlaWdodCA+PSBzY3JvbGxUb3AsIHRoZW4gd2Ugc2hvdWxkIHN0YXkgc3RhdGljLlxuICAgKiBJZiB3ZSdyZSBub3QgYWxyZWFkeSBzdGF0aWMsIHRoZW4gd2Ugc2hvdWxkIHNldCB0aGUgaGVhZGVyIHN0YXRpYywgb25seSB3aGVuIHBpblN0YXJ0ID49IHNjcm9sbFRvcCAocmVnYXJkbGVzcyBvZlxuICAgKiBzY3JvbGxIZWlnaHQsIHNvIHRoZSBoZWFkZXIgZG9lc24ndCBqdW1wIHVwLCB3aGVuIHNjcm9sbGluZyB1cHdhcmRzIHRvIHRoZSB0cmlnZ2VyKS5cbiAgICogRWxzZSB3ZSBzaG91bGRuJ3Qgc2V0IGl0IHN0YXRpYy5cbiAgICogQHBhcmFtIHNjcm9sbFRvcCB0aGUgY3VycmVudFNjcm9sbFRvcCBwb3NpdGlvblxuICAgKiBAcGFyYW0gZGlyZWN0aW9uIHRoZSBjdXJyZW50IGRpcmVjdGlvblxuICAgKiBAcmV0dXJucyB7Ym9vbGVhbn0gaWYgd2Ugc2hvdWxkIHNldCB0aGUgaGVhZGVyIHN0YXRpY1xuICAgKi9cbiAgc2hvdWxkU2V0U3RhdGljKHNjcm9sbFRvcDogbnVtYmVyLCBkaXJlY3Rpb246IERpcmVjdGlvblR5cGUpOiBib29sZWFuIHtcbiAgICBpZiAodGhpcy5zdGF0ZS5tb2RlID09PSBNT0RFX1NUQVRJQyB8fCAodGhpcy5zdGF0ZS5tb2RlID09PSBNT0RFX1BJTk5FRCAmJiBkaXJlY3Rpb24gPT09IERJUkVDVElPTl9ET1dOKSkge1xuICAgICAgcmV0dXJuIHRoaXMucHJvcHMucGluU3RhcnQgKyB0aGlzLnByb3BzLnNjcm9sbEhlaWdodCA+PSBzY3JvbGxUb3BcbiAgICB9IGVsc2Uge1xuICAgICAgcmV0dXJuIHRoaXMucHJvcHMucGluU3RhcnQgPj0gc2Nyb2xsVG9wXG4gICAgfVxuICB9XG5cbiAgLyoqXG4gICAqIERldGVybWluZXMgdGhlIG1vZGUgZGVwZW5kaW5nIG9uIHRoZSBzY3JvbGxUb3AgcG9zaXRpb24gYW5kIHRoZSBjdXJyZW50IGRpcmVjdGlvblxuICAgKiBAcGFyYW0ge251bWJlcn0gc2Nyb2xsVG9wXG4gICAqIEBwYXJhbSB7c3RyaW5nfSBkaXJlY3Rpb25cbiAgICogQHJldHVybnMge3N0cmluZ30gdGhlIG5leHQgbW9kZSBvZiBIZWFkcm9vbVxuICAgKi9cbiAgZGV0ZXJtaW5lTW9kZShzY3JvbGxUb3A6IG51bWJlciwgZGlyZWN0aW9uOiBEaXJlY3Rpb25UeXBlKTogTW9kZVR5cGUge1xuICAgIGlmICh0aGlzLnNob3VsZFNldFN0YXRpYyhzY3JvbGxUb3AsIGRpcmVjdGlvbikpIHtcbiAgICAgIHJldHVybiBNT0RFX1NUQVRJQ1xuICAgIH0gZWxzZSB7XG4gICAgICByZXR1cm4gZGlyZWN0aW9uID09PSBESVJFQ1RJT05fVVAgPyBNT0RFX1BJTk5FRCA6IE1PREVfVU5QSU5ORURcbiAgICB9XG4gIH1cblxuICAvKipcbiAgICogQHJldHVybnMge1RyYW5zaXRpb25UeXBlfSBkZXRlcm1pbmVzIHRoZSBraW5kIG9mIHRyYW5zaXRpb25cbiAgICovXG4gIGRldGVybWluZVRyYW5zaXRpb24obW9kZTogTW9kZVR5cGUsIGRpcmVjdGlvbjogRGlyZWN0aW9uVHlwZSk6IFRyYW5zaXRpb25UeXBlIHtcbiAgICAvLyBIYW5kbGUgc3BlY2lhbCBjYXNlOiBJZiB3ZSdyZSBwaW5uZWQgYW5kIGdvaW5nIHRvIHN0YXRpYywgd2UgbmVlZCBhIHNwZWNpYWwgdHJhbnNpdGlvbiB1c2luZyBjc3MgYW5pbWF0aW9uXG4gICAgaWYgKHRoaXMuc3RhdGUubW9kZSA9PT0gTU9ERV9QSU5ORUQgJiYgbW9kZSA9PT0gTU9ERV9TVEFUSUMpIHtcbiAgICAgIHJldHVybiBUUkFOU0lUSU9OX1BJTk5FRF9UT19TVEFUSUNcbiAgICB9XG4gICAgLy8gSWYgbW9kZSBpcyBzdGF0aWMsIHRoZW4gbm8gdHJhbnNpdGlvbiwgYmVjYXVzZSB3ZSdyZSBhbHJlYWR5IGluIHRoZSByaWdodCBzcG90XG4gICAgLy8gKGFuZCB3YW50IHRvIGNoYW5nZSB0cmFuc2Zvcm0gYW5kIHRvcCBwcm9wZXJ0aWVzIHNlYW1sZXNzbHkpXG4gICAgaWYgKG1vZGUgPT09IE1PREVfU1RBVElDKSB7XG4gICAgICByZXR1cm4gdGhpcy5zdGF0ZS50cmFuc2l0aW9uID09PSBUUkFOU0lUSU9OX05PTkUgPyBUUkFOU0lUSU9OX05PTkUgOiBUUkFOU0lUSU9OX1BJTk5FRF9UT19TVEFUSUNcbiAgICB9XG4gICAgLy8gbW9kZSBpcyBub3Qgc3RhdGljLCB0cmFuc2l0aW9uIHdoZW4gbW92aW5nIHVwd2FyZHMgb3Igd2hlbiB3ZSd2ZSBsYXN0bHkgZGlkIHRoZSB0cmFuc2l0aW9uXG4gICAgcmV0dXJuIGRpcmVjdGlvbiA9PT0gRElSRUNUSU9OX1VQIHx8IHRoaXMuc3RhdGUudHJhbnNpdGlvbiA9PT0gVFJBTlNJVElPTl9OT1JNQUxcbiAgICAgID8gVFJBTlNJVElPTl9OT1JNQUxcbiAgICAgIDogVFJBTlNJVElPTl9OT05FXG4gIH1cblxuICAvKipcbiAgICogQ2hlY2tzIHRoZSBjdXJyZW50IHNjcm9sbFRvcCBwb3NpdGlvbiBhbmQgdXBkYXRlcyB0aGUgc3RhdGUgYWNjb3JkaW5nbHlcbiAgICovXG4gIHVwZGF0ZTogKCkgPT4gdm9pZCA9ICgpID0+IHtcbiAgICBjb25zdCBjdXJyZW50U2Nyb2xsVG9wID0gdGhpcy5nZXRTY3JvbGxUb3AoKVxuICAgIGNvbnN0IG5ld1N0YXRlOiBQYXJ0aWFsPFN0YXRlVHlwZT4gPSB7fVxuICAgIGlmIChjdXJyZW50U2Nyb2xsVG9wID09PSB0aGlzLmxhc3RLbm93blNjcm9sbFRvcCkge1xuICAgICAgcmV0dXJuXG4gICAgfVxuICAgIGNvbnN0IGRpcmVjdGlvbiA9IHRoaXMubGFzdEtub3duU2Nyb2xsVG9wIDwgY3VycmVudFNjcm9sbFRvcCA/IERJUkVDVElPTl9ET1dOIDogRElSRUNUSU9OX1VQXG4gICAgbmV3U3RhdGUubW9kZSA9IHRoaXMuZGV0ZXJtaW5lTW9kZShjdXJyZW50U2Nyb2xsVG9wLCBkaXJlY3Rpb24pXG4gICAgbmV3U3RhdGUudHJhbnNpdGlvbiA9IHRoaXMuZGV0ZXJtaW5lVHJhbnNpdGlvbihuZXdTdGF0ZS5tb2RlLCBkaXJlY3Rpb24pXG5cbiAgICBjb25zdCB7IG9uU3RpY2t5VG9wQ2hhbmdlZCwgaGVpZ2h0LCBzY3JvbGxIZWlnaHQsIHBpblN0YXJ0IH0gPSB0aGlzLnByb3BzXG4gICAgaWYgKHRoaXMuc3RhdGUubW9kZSA9PT0gTU9ERV9QSU5ORUQgJiYgbmV3U3RhdGUubW9kZSA9PT0gTU9ERV9TVEFUSUMpIHtcbiAgICAgIC8vIGFuaW1hdGlvbiBpbiB0aGUgc3BlY2lhbCBjYXNlIGZyb20gcGlubmVkIHRvIHN0YXRpY1xuICAgICAgbmV3U3RhdGUuYW5pbWF0ZVVwRnJvbSA9IGN1cnJlbnRTY3JvbGxUb3AgLSBwaW5TdGFydFxuICAgIH1cbiAgICBpZiAob25TdGlja3lUb3BDaGFuZ2VkICYmIG5ld1N0YXRlLm1vZGUgIT09IHRoaXMuc3RhdGUubW9kZSAmJiBoZWlnaHQpIHtcbiAgICAgIG9uU3RpY2t5VG9wQ2hhbmdlZChIZWFkcm9vbS5jYWxjU3RpY2t5VG9wKG5ld1N0YXRlLm1vZGUsIGhlaWdodCwgc2Nyb2xsSGVpZ2h0KSlcbiAgICB9XG4gICAgdGhpcy5zZXRTdGF0ZShuZXdTdGF0ZSBhcyBTdGF0ZVR5cGUpXG4gICAgdGhpcy5sYXN0S25vd25TY3JvbGxUb3AgPSBjdXJyZW50U2Nyb2xsVG9wXG4gIH1cblxuICBoYW5kbGVFdmVudDogKCkgPT4gdm9pZCA9ICgpID0+IHtcbiAgICB3aW5kb3cucmVxdWVzdEFuaW1hdGlvbkZyYW1lKHRoaXMudXBkYXRlKVxuICB9XG5cbiAgc3RhdGljIGNhbGNTdGlja3lUb3AobW9kZTogTW9kZVR5cGUsIGhlaWdodDogbnVtYmVyLCBzY3JvbGxIZWlnaHQ6IG51bWJlcik6IG51bWJlciB7XG4gICAgcmV0dXJuIG1vZGUgPT09IE1PREVfUElOTkVEID8gaGVpZ2h0IDogaGVpZ2h0IC0gc2Nyb2xsSGVpZ2h0XG4gIH1cblxuICByZW5kZXIoKTogUmVhY3QuUmVhY3RFbGVtZW50IHtcbiAgICBjb25zdCB7IGNoaWxkcmVuLCBzY3JvbGxIZWlnaHQsIHBvc2l0aW9uU3RpY2t5RGlzYWJsZWQsIHpJbmRleCwgY2xhc3NOYW1lIH0gPSB0aGlzLnByb3BzXG4gICAgY29uc3QgeyBtb2RlLCB0cmFuc2l0aW9uLCBhbmltYXRlVXBGcm9tIH0gPSB0aGlzLnN0YXRlXG4gICAgY29uc3QgdHJhbnNmb3JtID0gbW9kZSA9PT0gTU9ERV9VTlBJTk5FRCA/IC1zY3JvbGxIZWlnaHQgOiAwXG4gICAgY29uc3Qgb3duU3RpY2t5VG9wID0gbW9kZSA9PT0gTU9ERV9TVEFUSUMgPyAtc2Nyb2xsSGVpZ2h0IDogMFxuICAgIHJldHVybiAoXG4gICAgICA8SGVhZGVyV3JhcHBlclxuICAgICAgICBjbGFzc05hbWU9e2NsYXNzTmFtZX1cbiAgICAgICAgJHRyYW5zbGF0ZVk9e3RyYW5zZm9ybX1cbiAgICAgICAgJHRvcD17b3duU3RpY2t5VG9wfVxuICAgICAgICAkdHJhbnNpdGlvbj17dHJhbnNpdGlvbn1cbiAgICAgICAgJHBvc2l0aW9uU3RpY2t5RGlzYWJsZWQ9eyEhcG9zaXRpb25TdGlja3lEaXNhYmxlZH1cbiAgICAgICAgJHN0YXRpYz17bW9kZSA9PT0gTU9ERV9TVEFUSUN9XG4gICAgICAgICRhbmltYXRlVXBGcm9tPXthbmltYXRlVXBGcm9tfVxuICAgICAgICAkekluZGV4PXt6SW5kZXh9PlxuICAgICAgICB7Y2hpbGRyZW59XG4gICAgICA8L0hlYWRlcldyYXBwZXI+XG4gICAgKVxuICB9XG59XG5cbmV4cG9ydCBkZWZhdWx0IEhlYWRyb29tXG4iXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBdUU4QyJ9 */");
97
47
  var _React_PureComponent;
98
48
  class Headroom extends (_React_PureComponent = _react.default.PureComponent) {
99
49
  /**
@@ -202,14 +152,11 @@ class Headroom extends (_React_PureComponent = _react.default.PureComponent) {
202
152
  }, children);
203
153
  }
204
154
  constructor(...args){
205
- super(...args);
206
- _define_property(this, "state", {
155
+ super(...args), _define_property(this, "state", {
207
156
  mode: MODE_STATIC,
208
157
  transition: TRANSITION_NONE,
209
158
  animateUpFrom: null
210
- });
211
- /** the very last scrollTop which we know about (to determine direction changes) */ _define_property(this, "lastKnownScrollTop", 0);
212
- /**
159
+ }), /** the very last scrollTop which we know about (to determine direction changes) */ _define_property(this, "lastKnownScrollTop", 0), /**
213
160
  * Checks the current scrollTop position and updates the state accordingly
214
161
  */ _define_property(this, "update", ()=>{
215
162
  const currentScrollTop = this.getScrollTop();
@@ -230,8 +177,7 @@ class Headroom extends (_React_PureComponent = _react.default.PureComponent) {
230
177
  }
231
178
  this.setState(newState);
232
179
  this.lastKnownScrollTop = currentScrollTop;
233
- });
234
- _define_property(this, "handleEvent", ()=>{
180
+ }), _define_property(this, "handleEvent", ()=>{
235
181
  window.requestAnimationFrame(this.update);
236
182
  });
237
183
  }
package/index.cjs.map CHANGED
@@ -1 +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","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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"}
1
+ {"version":3,"sources":["index.tsx"],"sourcesContent":["import React from 'react'\nimport styled from '@emotion/styled'\nimport { css, 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 ${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","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.d.ts.map CHANGED
@@ -1 +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,CAAC;IAC1B,wEAAwE;IACxE,YAAY,EAAE,MAAM,CAAC;IACrB,sEAAsE;IACtE,QAAQ,EAAE,MAAM,CAAC;IACjB,iEAAiE;IACjE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,gFAAgF;IAChF,kBAAkB,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IACjD,6EAA6E;IAC7E,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,uFAAuF;IACvF,MAAM,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC5B,sDAAsD;IACtD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,mFAAmF;IACnF,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAED,KAAK,SAAS,GAAG;IACf,IAAI,EAAE,QAAQ,CAAC;IACf,UAAU,EAAE,cAAc,CAAC;IAC3B,aAAa,EAAE,MAAM,GAAG,IAAI,CAAA;CAC7B,CAAA;AAsCD,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,IAAK,MAAM;IAevB,iBAAiB;IAIjB,iBAAiB,CAAE,MAAM,CAAC,EAAE,WAAW,GAAG,IAAI;IAU9C,oBAAoB,CAAE,MAAM,CAAC,EAAE,WAAW,GAAG,IAAI;IAQjD,kBAAkB,CAAE,SAAS,EAAE,SAAS;IAOxC,oBAAoB;IAIpB;;;;;;;;OAQG;IACH,eAAe,CAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,aAAa,GAAG,OAAO;IAWtE;;;;;OAKG;IACH,aAAa,CAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,aAAa,GAAG,QAAQ;IAQrE;;OAEG;IACH,mBAAmB,CAAE,IAAI,EAAE,QAAQ,EAAE,SAAS,EAAE,aAAa,GAAG,cAAc;IAmB9E;;OAEG;IACH,MAAM,EAAE,MAAM,IAAI,CAqBjB;IAED,WAAW,EAAE,MAAM,IAAI,CAEtB;IAED,MAAM,CAAC,aAAa,CAClB,IAAI,EAAE,QAAQ,EACd,MAAM,EAAE,MAAM,EACd,YAAY,EAAE,MAAM,GACnB,MAAM;IAIT,MAAM,IAAK,KAAK,CAAC,YAAY;CA2B9B;AAED,eAAe,QAAQ,CAAA"}
1
+ {"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;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"}
package/index.js CHANGED
@@ -12,7 +12,8 @@ function _define_property(obj, key, value) {
12
12
  return obj;
13
13
  }
14
14
  import React from 'react';
15
- import styled, { css, keyframes } from 'styled-components';
15
+ import styled from '@emotion/styled';
16
+ import { css, keyframes } from '@emotion/react';
16
17
  const DIRECTION_UP = 'up';
17
18
  const DIRECTION_DOWN = 'down';
18
19
  const MODE_UNPINNED = 'unpinned';
@@ -21,23 +22,13 @@ const MODE_STATIC = 'static';
21
22
  const TRANSITION_NONE = 'none';
22
23
  const TRANSITION_NORMAL = 'normal';
23
24
  const TRANSITION_PINNED_TO_STATIC = 'pinned-to-static';
24
- const HeaderWrapper = styled.div([
25
- "position:",
26
- ";top:",
27
- "px;z-index:",
28
- ";transform:translateY(",
29
- "px);animation-duration:0.2s;animation-timing-function:ease-out;",
30
- " ",
31
- " ",
32
- ""
33
- ], (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([
34
- "animation-name:",
35
- ";"
36
- ], keyframesMoveUpFrom(props.$animateUpFrom)) : '', (props)=>props.$static ? 'transition: none;' : '');
37
- const keyframesMoveUpFrom = (from)=>keyframes([
38
- "from{transform:translateY(",
39
- "px)}to{transform:translateY(0)}"
40
- ], Math.max(from, 0));
25
+ const HeaderWrapper = /*#__PURE__*/ styled("div", {
26
+ target: "e17ye17o0",
27
+ label: "HeaderWrapper"
28
+ })("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;' : '', " ", (props)=>props.$transition === TRANSITION_PINNED_TO_STATIC && props.$animateUpFrom !== null ? css`
29
+ animation-name: ${keyframesMoveUpFrom(props.$animateUpFrom)};
30
+ ` : '', " ", (props)=>props.$static ? 'transition: none;' : '', "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXgudHN4Iiwic291cmNlcyI6WyJpbmRleC50c3giXSwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0IGZyb20gJ3JlYWN0J1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnXG5pbXBvcnQgeyBjc3MsIGtleWZyYW1lcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0J1xuXG5jb25zdCBESVJFQ1RJT05fVVAgPSAndXAnXG5jb25zdCBESVJFQ1RJT05fRE9XTiA9ICdkb3duJ1xuXG5jb25zdCBNT0RFX1VOUElOTkVEID0gJ3VucGlubmVkJ1xuY29uc3QgTU9ERV9QSU5ORUQgPSAncGlubmVkJ1xuY29uc3QgTU9ERV9TVEFUSUMgPSAnc3RhdGljJ1xuXG5jb25zdCBUUkFOU0lUSU9OX05PTkUgPSAnbm9uZSdcbmNvbnN0IFRSQU5TSVRJT05fTk9STUFMID0gJ25vcm1hbCdcbmNvbnN0IFRSQU5TSVRJT05fUElOTkVEX1RPX1NUQVRJQyA9ICdwaW5uZWQtdG8tc3RhdGljJ1xuXG50eXBlIE1vZGVUeXBlID0gdHlwZW9mIE1PREVfUElOTkVEIHwgdHlwZW9mIE1PREVfVU5QSU5ORUQgfCB0eXBlb2YgTU9ERV9TVEFUSUNcbnR5cGUgRGlyZWN0aW9uVHlwZSA9IHR5cGVvZiBESVJFQ1RJT05fVVAgfCB0eXBlb2YgRElSRUNUSU9OX0RPV05cbnR5cGUgVHJhbnNpdGlvblR5cGUgPSB0eXBlb2YgVFJBTlNJVElPTl9OT05FIHwgdHlwZW9mIFRSQU5TSVRJT05fTk9STUFMIHwgdHlwZW9mIFRSQU5TSVRJT05fUElOTkVEX1RPX1NUQVRJQ1xuXG50eXBlIFByb3BzVHlwZSA9IHtcbiAgLyoqIFRoZSBjaGlsZCBub2RlIHRvIGJlIGRpc3BsYXllZCBhcyBhIGhlYWRlciAqL1xuICBjaGlsZHJlbjogUmVhY3QuUmVhY3ROb2RlXG4gIC8qKiBUaGUgbWF4aW11bSBhbW91bnQgb2YgcHggdGhlIGhlYWRlciBzaG91bGQgbW92ZSB1cCB3aGVuIHNjcm9sbGluZyAqL1xuICBzY3JvbGxIZWlnaHQ6IG51bWJlclxuICAvKiogVGhlIG1pbmltdW0gc2Nyb2xsVG9wIHBvc2l0aW9uIHdoZXJlIHRoZSB0cmFuc2Zvcm0gc2hvdWxkIHN0YXJ0ICovXG4gIHBpblN0YXJ0OiBudW1iZXJcbiAgLyoqIFVzZWQgZm9yIGNhbGN1bGF0aW5nIHRoZSBzdGlja3lUb3AgcG9zaXRpb24gb2YgYW4gYW5jZXN0b3IgKi9cbiAgaGVpZ2h0PzogbnVtYmVyXG4gIC8qKiBGaXJlZCwgd2hlbiBIZWFkcm9vbSBjaGFuZ2VzIGl0cyBzdGF0ZS4gUGFzc2VzIHN0aWNreVRvcCBvZiB0aGUgYW5jZXN0b3IuICovXG4gIG9uU3RpY2t5VG9wQ2hhbmdlZD86IChzdGlja3lUb3A6IG51bWJlcikgPT4gdm9pZFxuICAvKiogVHJ1ZSwgaWYgc3RpY2t5IHBvc2l0aW9uIHNob3VsZCBiZSBkaXNhYmxlZCAoZS5nLiBmb3IgZWRnZSAxNiBzdXBwb3J0KSAqL1xuICBwb3NpdGlvblN0aWNreURpc2FibGVkPzogYm9vbGVhblxuICAvKiogVGhlIHBhcmVudCBlbGVtZW50IGZpcmluZyB0aGUgc2Nyb2xsIGV2ZW50LiBEZWZhdWx0cyB0byBkb2N1bWVudC5kb2N1bWVudEVsZW1lbnQgKi9cbiAgcGFyZW50PzogSFRNTEVsZW1lbnQgfCBudWxsXG4gIC8qKiBUaGUgei1pbmRleCB1c2VkIGJ5IHRoZSB3cmFwcGVyLiBEZWZhdWx0cyB0byAxLiAqL1xuICB6SW5kZXg/OiBudW1iZXJcbiAgLyoqIEEgY2xhc3NuYW1lIGZvciBhcHBseWluZyBjdXN0b20gc3R5bGVzIHRvIHRoZSB3cmFwcGVyLiBVc2UgYXQgeW91ciBvd24gcmlzay4gKi9cbiAgY2xhc3NOYW1lPzogc3RyaW5nXG59XG5cbnR5cGUgU3RhdGVUeXBlID0ge1xuICBtb2RlOiBNb2RlVHlwZVxuICB0cmFuc2l0aW9uOiBUcmFuc2l0aW9uVHlwZVxuICBhbmltYXRlVXBGcm9tOiBudW1iZXIgfCBudWxsXG59XG5cbmNvbnN0IEhlYWRlcldyYXBwZXIgPSBzdHlsZWQuZGl2PHtcbiAgJHBvc2l0aW9uU3RpY2t5RGlzYWJsZWQ6IGJvb2xlYW5cbiAgJHRyYW5zbGF0ZVk6IG51bWJlclxuICAkdHJhbnNpdGlvbjogVHJhbnNpdGlvblR5cGVcbiAgJGFuaW1hdGVVcEZyb206IG51bWJlciB8IG51bGxcbiAgJHpJbmRleD86IG51bWJlclxuICAkdG9wOiBudW1iZXJcbiAgJHN0YXRpYzogYm9vbGVhblxufT5gXG4gIHBvc2l0aW9uOiAke3Byb3BzID0+IChwcm9wcy4kcG9zaXRpb25TdGlja3lEaXNhYmxlZCA/ICdzdGF0aWMnIDogJ3N0aWNreScpfTtcbiAgdG9wOiAke3Byb3BzID0+IHByb3BzLiR0b3B9cHg7XG4gIHotaW5kZXg6ICR7cHJvcHMgPT4gcHJvcHMuJHpJbmRleH07XG4gIHRyYW5zZm9ybTogdHJhbnNsYXRlWSgke3Byb3BzID0+IHByb3BzLiR0cmFuc2xhdGVZfXB4KTtcbiAgYW5pbWF0aW9uLWR1cmF0aW9uOiAwLjJzO1xuICBhbmltYXRpb24tdGltaW5nLWZ1bmN0aW9uOiBlYXNlLW91dDtcbiAgJHtwcm9wcyA9PiAocHJvcHMuJHRyYW5zaXRpb24gPT09IFRSQU5TSVRJT05fTk9STUFMICYmICFwcm9wcy4kc3RhdGljID8gJ3RyYW5zaXRpb246IHRyYW5zZm9ybSAwLjJzIGVhc2Utb3V0OycgOiAnJyl9XG4gICR7cHJvcHMgPT5cbiAgICBwcm9wcy4kdHJhbnNpdGlvbiA9PT0gVFJBTlNJVElPTl9QSU5ORURfVE9fU1RBVElDICYmIHByb3BzLiRhbmltYXRlVXBGcm9tICE9PSBudWxsXG4gICAgICA/IGNzc2BcbiAgICAgICAgICBhbmltYXRpb24tbmFtZTogJHtrZXlmcmFtZXNNb3ZlVXBGcm9tKHByb3BzLiRhbmltYXRlVXBGcm9tKX07XG4gICAgICAgIGBcbiAgICAgIDogJyd9XG4gICR7cHJvcHMgPT4gKHByb3BzLiRzdGF0aWMgPyAndHJhbnNpdGlvbjogbm9uZTsnIDogJycpfVxuYFxuXG5jb25zdCBrZXlmcmFtZXNNb3ZlVXBGcm9tID0gKGZyb206IG51bWJlcikgPT4ga2V5ZnJhbWVzYFxuICAgIGZyb20ge1xuICAgICAgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKCR7TWF0aC5tYXgoZnJvbSwgMCl9cHgpXG4gICAgfVxuXG4gICAgdG8ge1xuICAgICAgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKDApXG4gICAgfVxuYFxuXG5jbGFzcyBIZWFkcm9vbSBleHRlbmRzIFJlYWN0LlB1cmVDb21wb25lbnQ8UHJvcHNUeXBlLCBTdGF0ZVR5cGU+IHtcbiAgc3RhdGljIGRlZmF1bHRQcm9wczogeyBwaW5TdGFydDogbnVtYmVyOyB6SW5kZXg6IG51bWJlcjsgcGFyZW50OiBIVE1MRWxlbWVudCB8IG51bGwgfSA9IHtcbiAgICBwaW5TdGFydDogMCxcbiAgICB6SW5kZXg6IDEsXG4gICAgcGFyZW50OiB3aW5kb3cuZG9jdW1lbnQuZG9jdW1lbnRFbGVtZW50LFxuICB9XG5cbiAgc3RhdGU6IFN0YXRlVHlwZSA9IHtcbiAgICBtb2RlOiBNT0RFX1NUQVRJQyxcbiAgICB0cmFuc2l0aW9uOiBUUkFOU0lUSU9OX05PTkUsXG4gICAgYW5pbWF0ZVVwRnJvbTogbnVsbCxcbiAgfVxuXG4gIC8qKiB0aGUgdmVyeSBsYXN0IHNjcm9sbFRvcCB3aGljaCB3ZSBrbm93IGFib3V0ICh0byBkZXRlcm1pbmUgZGlyZWN0aW9uIGNoYW5nZXMpICovXG4gIGxhc3RLbm93blNjcm9sbFRvcDogbnVtYmVyID0gMFxuXG4gIC8qKlxuICAgKiBAcmV0dXJucyB7bnVtYmVyfSB0aGUgY3VycmVudCBzY3JvbGxUb3AgcG9zaXRpb24gb2YgdGhlIHdpbmRvd1xuICAgKi9cbiAgZ2V0U2Nyb2xsVG9wKCk6IG51bWJlciB7XG4gICAgY29uc3QgcGFyZW50ID0gdGhpcy5wcm9wcy5wYXJlbnRcbiAgICBpZiAocGFyZW50ICYmIHBhcmVudC5zY3JvbGxUb3AgIT09IHVuZGVmaW5lZCAmJiBwYXJlbnQgIT09IGRvY3VtZW50LmRvY3VtZW50RWxlbWVudCkge1xuICAgICAgcmV0dXJuIHBhcmVudC5zY3JvbGxUb3BcbiAgICB9XG4gICAgaWYgKHBhcmVudCAhPT0gZG9jdW1lbnQuZG9jdW1lbnRFbGVtZW50KSB7XG4gICAgICBjb25zb2xlLndhcm4oJ0NvdWxkIG5vdCBkZXRlcm1pbmUgc2Nyb2xsVG9wIGZyb20gcGFyZW50IGZvciBTdGlja3lIZWFkcm9vbS4gRGVmYXVsdGluZyB0byB3aW5kb3cucGFnZVlPZmZzZXQuJylcbiAgICB9XG4gICAgaWYgKHdpbmRvdy5wYWdlWU9mZnNldCA9PT0gdW5kZWZpbmVkKSB7XG4gICAgICBjb25zb2xlLmVycm9yKCd3aW5kb3cucGFnZVlPZmZzZXQgaXMgdW5kZWZpbmVkLiBEZWZhdWx0aW5nIHRvIDAuJylcbiAgICAgIHJldHVybiAwXG4gICAgfVxuICAgIHJldHVybiB3aW5kb3cucGFnZVlPZmZzZXRcbiAgfVxuXG4gIGNvbXBvbmVudERpZE1vdW50KCkge1xuICAgIHRoaXMuYWRkU2Nyb2xsTGlzdGVuZXIodGhpcy5wcm9wcy5wYXJlbnQpXG4gIH1cblxuICBhZGRTY3JvbGxMaXN0ZW5lcihwYXJlbnQ/OiBIVE1MRWxlbWVudCB8IG51bGwpIHtcbiAgICBpZiAocGFyZW50ID09PSB3aW5kb3cuZG9jdW1lbnQuZG9jdW1lbnRFbGVtZW50KSB7XG4gICAgICB3aW5kb3cuYWRkRXZlbnRMaXN0ZW5lcignc2Nyb2xsJywgdGhpcy5oYW5kbGVFdmVudClcbiAgICB9IGVsc2UgaWYgKHBhcmVudCkge1xuICAgICAgcGFyZW50LmFkZEV2ZW50TGlzdGVuZXIoJ3Njcm9sbCcsIHRoaXMuaGFuZGxlRXZlbnQpXG4gICAgfSBlbHNlIHtcbiAgICAgIGNvbnNvbGUuZGVidWcoXCIncGFyZW50JyBwcm9wIG9mIEhlYWRyb29tIGlzIG51bGwuIEFzc3VtaW5nLCBpdCB3aWxsIGJlIHNldCBzb29uLi4uXCIpXG4gICAgfVxuICB9XG5cbiAgcmVtb3ZlU2Nyb2xsTGlzdGVuZXIocGFyZW50PzogSFRNTEVsZW1lbnQgfCBudWxsKSB7XG4gICAgaWYgKHBhcmVudCA9PT0gd2luZG93LmRvY3VtZW50LmRvY3VtZW50RWxlbWVudCkge1xuICAgICAgd2luZG93LnJlbW92ZUV2ZW50TGlzdGVuZXIoJ3Njcm9sbCcsIHRoaXMuaGFuZGxlRXZlbnQpXG4gICAgfSBlbHNlIGlmIChwYXJlbnQpIHtcbiAgICAgIHBhcmVudC5yZW1vdmVFdmVudExpc3RlbmVyKCdzY3JvbGwnLCB0aGlzLmhhbmRsZUV2ZW50KVxuICAgIH1cbiAgfVxuXG4gIGNvbXBvbmVudERpZFVwZGF0ZShwcmV2UHJvcHM6IFByb3BzVHlwZSkge1xuICAgIGlmIChwcmV2UHJvcHMucGFyZW50ICE9PSB0aGlzLnByb3BzLnBhcmVudCkge1xuICAgICAgdGhpcy5yZW1vdmVTY3JvbGxMaXN0ZW5lcihwcmV2UHJvcHMucGFyZW50KVxuICAgICAgdGhpcy5hZGRTY3JvbGxMaXN0ZW5lcih0aGlzLnByb3BzLnBhcmVudClcbiAgICB9XG4gIH1cblxuICBjb21wb25lbnRXaWxsVW5tb3VudCgpIHtcbiAgICB0aGlzLnJlbW92ZVNjcm9sbExpc3RlbmVyKHRoaXMucHJvcHMucGFyZW50KVxuICB9XG5cbiAgLyoqXG4gICAqIElmIHdlJ3JlIGFscmVhZHkgc3RhdGljIGFuZCBwaW5TdGFydCArIHNjcm9sbEhlaWdodCA+PSBzY3JvbGxUb3AsIHRoZW4gd2Ugc2hvdWxkIHN0YXkgc3RhdGljLlxuICAgKiBJZiB3ZSdyZSBub3QgYWxyZWFkeSBzdGF0aWMsIHRoZW4gd2Ugc2hvdWxkIHNldCB0aGUgaGVhZGVyIHN0YXRpYywgb25seSB3aGVuIHBpblN0YXJ0ID49IHNjcm9sbFRvcCAocmVnYXJkbGVzcyBvZlxuICAgKiBzY3JvbGxIZWlnaHQsIHNvIHRoZSBoZWFkZXIgZG9lc24ndCBqdW1wIHVwLCB3aGVuIHNjcm9sbGluZyB1cHdhcmRzIHRvIHRoZSB0cmlnZ2VyKS5cbiAgICogRWxzZSB3ZSBzaG91bGRuJ3Qgc2V0IGl0IHN0YXRpYy5cbiAgICogQHBhcmFtIHNjcm9sbFRvcCB0aGUgY3VycmVudFNjcm9sbFRvcCBwb3NpdGlvblxuICAgKiBAcGFyYW0gZGlyZWN0aW9uIHRoZSBjdXJyZW50IGRpcmVjdGlvblxuICAgKiBAcmV0dXJucyB7Ym9vbGVhbn0gaWYgd2Ugc2hvdWxkIHNldCB0aGUgaGVhZGVyIHN0YXRpY1xuICAgKi9cbiAgc2hvdWxkU2V0U3RhdGljKHNjcm9sbFRvcDogbnVtYmVyLCBkaXJlY3Rpb246IERpcmVjdGlvblR5cGUpOiBib29sZWFuIHtcbiAgICBpZiAodGhpcy5zdGF0ZS5tb2RlID09PSBNT0RFX1NUQVRJQyB8fCAodGhpcy5zdGF0ZS5tb2RlID09PSBNT0RFX1BJTk5FRCAmJiBkaXJlY3Rpb24gPT09IERJUkVDVElPTl9ET1dOKSkge1xuICAgICAgcmV0dXJuIHRoaXMucHJvcHMucGluU3RhcnQgKyB0aGlzLnByb3BzLnNjcm9sbEhlaWdodCA+PSBzY3JvbGxUb3BcbiAgICB9IGVsc2Uge1xuICAgICAgcmV0dXJuIHRoaXMucHJvcHMucGluU3RhcnQgPj0gc2Nyb2xsVG9wXG4gICAgfVxuICB9XG5cbiAgLyoqXG4gICAqIERldGVybWluZXMgdGhlIG1vZGUgZGVwZW5kaW5nIG9uIHRoZSBzY3JvbGxUb3AgcG9zaXRpb24gYW5kIHRoZSBjdXJyZW50IGRpcmVjdGlvblxuICAgKiBAcGFyYW0ge251bWJlcn0gc2Nyb2xsVG9wXG4gICAqIEBwYXJhbSB7c3RyaW5nfSBkaXJlY3Rpb25cbiAgICogQHJldHVybnMge3N0cmluZ30gdGhlIG5leHQgbW9kZSBvZiBIZWFkcm9vbVxuICAgKi9cbiAgZGV0ZXJtaW5lTW9kZShzY3JvbGxUb3A6IG51bWJlciwgZGlyZWN0aW9uOiBEaXJlY3Rpb25UeXBlKTogTW9kZVR5cGUge1xuICAgIGlmICh0aGlzLnNob3VsZFNldFN0YXRpYyhzY3JvbGxUb3AsIGRpcmVjdGlvbikpIHtcbiAgICAgIHJldHVybiBNT0RFX1NUQVRJQ1xuICAgIH0gZWxzZSB7XG4gICAgICByZXR1cm4gZGlyZWN0aW9uID09PSBESVJFQ1RJT05fVVAgPyBNT0RFX1BJTk5FRCA6IE1PREVfVU5QSU5ORURcbiAgICB9XG4gIH1cblxuICAvKipcbiAgICogQHJldHVybnMge1RyYW5zaXRpb25UeXBlfSBkZXRlcm1pbmVzIHRoZSBraW5kIG9mIHRyYW5zaXRpb25cbiAgICovXG4gIGRldGVybWluZVRyYW5zaXRpb24obW9kZTogTW9kZVR5cGUsIGRpcmVjdGlvbjogRGlyZWN0aW9uVHlwZSk6IFRyYW5zaXRpb25UeXBlIHtcbiAgICAvLyBIYW5kbGUgc3BlY2lhbCBjYXNlOiBJZiB3ZSdyZSBwaW5uZWQgYW5kIGdvaW5nIHRvIHN0YXRpYywgd2UgbmVlZCBhIHNwZWNpYWwgdHJhbnNpdGlvbiB1c2luZyBjc3MgYW5pbWF0aW9uXG4gICAgaWYgKHRoaXMuc3RhdGUubW9kZSA9PT0gTU9ERV9QSU5ORUQgJiYgbW9kZSA9PT0gTU9ERV9TVEFUSUMpIHtcbiAgICAgIHJldHVybiBUUkFOU0lUSU9OX1BJTk5FRF9UT19TVEFUSUNcbiAgICB9XG4gICAgLy8gSWYgbW9kZSBpcyBzdGF0aWMsIHRoZW4gbm8gdHJhbnNpdGlvbiwgYmVjYXVzZSB3ZSdyZSBhbHJlYWR5IGluIHRoZSByaWdodCBzcG90XG4gICAgLy8gKGFuZCB3YW50IHRvIGNoYW5nZSB0cmFuc2Zvcm0gYW5kIHRvcCBwcm9wZXJ0aWVzIHNlYW1sZXNzbHkpXG4gICAgaWYgKG1vZGUgPT09IE1PREVfU1RBVElDKSB7XG4gICAgICByZXR1cm4gdGhpcy5zdGF0ZS50cmFuc2l0aW9uID09PSBUUkFOU0lUSU9OX05PTkUgPyBUUkFOU0lUSU9OX05PTkUgOiBUUkFOU0lUSU9OX1BJTk5FRF9UT19TVEFUSUNcbiAgICB9XG4gICAgLy8gbW9kZSBpcyBub3Qgc3RhdGljLCB0cmFuc2l0aW9uIHdoZW4gbW92aW5nIHVwd2FyZHMgb3Igd2hlbiB3ZSd2ZSBsYXN0bHkgZGlkIHRoZSB0cmFuc2l0aW9uXG4gICAgcmV0dXJuIGRpcmVjdGlvbiA9PT0gRElSRUNUSU9OX1VQIHx8IHRoaXMuc3RhdGUudHJhbnNpdGlvbiA9PT0gVFJBTlNJVElPTl9OT1JNQUxcbiAgICAgID8gVFJBTlNJVElPTl9OT1JNQUxcbiAgICAgIDogVFJBTlNJVElPTl9OT05FXG4gIH1cblxuICAvKipcbiAgICogQ2hlY2tzIHRoZSBjdXJyZW50IHNjcm9sbFRvcCBwb3NpdGlvbiBhbmQgdXBkYXRlcyB0aGUgc3RhdGUgYWNjb3JkaW5nbHlcbiAgICovXG4gIHVwZGF0ZTogKCkgPT4gdm9pZCA9ICgpID0+IHtcbiAgICBjb25zdCBjdXJyZW50U2Nyb2xsVG9wID0gdGhpcy5nZXRTY3JvbGxUb3AoKVxuICAgIGNvbnN0IG5ld1N0YXRlOiBQYXJ0aWFsPFN0YXRlVHlwZT4gPSB7fVxuICAgIGlmIChjdXJyZW50U2Nyb2xsVG9wID09PSB0aGlzLmxhc3RLbm93blNjcm9sbFRvcCkge1xuICAgICAgcmV0dXJuXG4gICAgfVxuICAgIGNvbnN0IGRpcmVjdGlvbiA9IHRoaXMubGFzdEtub3duU2Nyb2xsVG9wIDwgY3VycmVudFNjcm9sbFRvcCA/IERJUkVDVElPTl9ET1dOIDogRElSRUNUSU9OX1VQXG4gICAgbmV3U3RhdGUubW9kZSA9IHRoaXMuZGV0ZXJtaW5lTW9kZShjdXJyZW50U2Nyb2xsVG9wLCBkaXJlY3Rpb24pXG4gICAgbmV3U3RhdGUudHJhbnNpdGlvbiA9IHRoaXMuZGV0ZXJtaW5lVHJhbnNpdGlvbihuZXdTdGF0ZS5tb2RlLCBkaXJlY3Rpb24pXG5cbiAgICBjb25zdCB7IG9uU3RpY2t5VG9wQ2hhbmdlZCwgaGVpZ2h0LCBzY3JvbGxIZWlnaHQsIHBpblN0YXJ0IH0gPSB0aGlzLnByb3BzXG4gICAgaWYgKHRoaXMuc3RhdGUubW9kZSA9PT0gTU9ERV9QSU5ORUQgJiYgbmV3U3RhdGUubW9kZSA9PT0gTU9ERV9TVEFUSUMpIHtcbiAgICAgIC8vIGFuaW1hdGlvbiBpbiB0aGUgc3BlY2lhbCBjYXNlIGZyb20gcGlubmVkIHRvIHN0YXRpY1xuICAgICAgbmV3U3RhdGUuYW5pbWF0ZVVwRnJvbSA9IGN1cnJlbnRTY3JvbGxUb3AgLSBwaW5TdGFydFxuICAgIH1cbiAgICBpZiAob25TdGlja3lUb3BDaGFuZ2VkICYmIG5ld1N0YXRlLm1vZGUgIT09IHRoaXMuc3RhdGUubW9kZSAmJiBoZWlnaHQpIHtcbiAgICAgIG9uU3RpY2t5VG9wQ2hhbmdlZChIZWFkcm9vbS5jYWxjU3RpY2t5VG9wKG5ld1N0YXRlLm1vZGUsIGhlaWdodCwgc2Nyb2xsSGVpZ2h0KSlcbiAgICB9XG4gICAgdGhpcy5zZXRTdGF0ZShuZXdTdGF0ZSBhcyBTdGF0ZVR5cGUpXG4gICAgdGhpcy5sYXN0S25vd25TY3JvbGxUb3AgPSBjdXJyZW50U2Nyb2xsVG9wXG4gIH1cblxuICBoYW5kbGVFdmVudDogKCkgPT4gdm9pZCA9ICgpID0+IHtcbiAgICB3aW5kb3cucmVxdWVzdEFuaW1hdGlvbkZyYW1lKHRoaXMudXBkYXRlKVxuICB9XG5cbiAgc3RhdGljIGNhbGNTdGlja3lUb3AobW9kZTogTW9kZVR5cGUsIGhlaWdodDogbnVtYmVyLCBzY3JvbGxIZWlnaHQ6IG51bWJlcik6IG51bWJlciB7XG4gICAgcmV0dXJuIG1vZGUgPT09IE1PREVfUElOTkVEID8gaGVpZ2h0IDogaGVpZ2h0IC0gc2Nyb2xsSGVpZ2h0XG4gIH1cblxuICByZW5kZXIoKTogUmVhY3QuUmVhY3RFbGVtZW50IHtcbiAgICBjb25zdCB7IGNoaWxkcmVuLCBzY3JvbGxIZWlnaHQsIHBvc2l0aW9uU3RpY2t5RGlzYWJsZWQsIHpJbmRleCwgY2xhc3NOYW1lIH0gPSB0aGlzLnByb3BzXG4gICAgY29uc3QgeyBtb2RlLCB0cmFuc2l0aW9uLCBhbmltYXRlVXBGcm9tIH0gPSB0aGlzLnN0YXRlXG4gICAgY29uc3QgdHJhbnNmb3JtID0gbW9kZSA9PT0gTU9ERV9VTlBJTk5FRCA/IC1zY3JvbGxIZWlnaHQgOiAwXG4gICAgY29uc3Qgb3duU3RpY2t5VG9wID0gbW9kZSA9PT0gTU9ERV9TVEFUSUMgPyAtc2Nyb2xsSGVpZ2h0IDogMFxuICAgIHJldHVybiAoXG4gICAgICA8SGVhZGVyV3JhcHBlclxuICAgICAgICBjbGFzc05hbWU9e2NsYXNzTmFtZX1cbiAgICAgICAgJHRyYW5zbGF0ZVk9e3RyYW5zZm9ybX1cbiAgICAgICAgJHRvcD17b3duU3RpY2t5VG9wfVxuICAgICAgICAkdHJhbnNpdGlvbj17dHJhbnNpdGlvbn1cbiAgICAgICAgJHBvc2l0aW9uU3RpY2t5RGlzYWJsZWQ9eyEhcG9zaXRpb25TdGlja3lEaXNhYmxlZH1cbiAgICAgICAgJHN0YXRpYz17bW9kZSA9PT0gTU9ERV9TVEFUSUN9XG4gICAgICAgICRhbmltYXRlVXBGcm9tPXthbmltYXRlVXBGcm9tfVxuICAgICAgICAkekluZGV4PXt6SW5kZXh9PlxuICAgICAgICB7Y2hpbGRyZW59XG4gICAgICA8L0hlYWRlcldyYXBwZXI+XG4gICAgKVxuICB9XG59XG5cbmV4cG9ydCBkZWZhdWx0IEhlYWRyb29tXG4iXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBOENzQiJ9 */");
31
+ const keyframesMoveUpFrom = (from)=>/*#__PURE__*/ keyframes("from{transform:translateY(", Math.max(from, 0), "px)}to{transform:translateY(0)}", "keyframesMoveUpFrom", "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXgudHN4Iiwic291cmNlcyI6WyJpbmRleC50c3giXSwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0IGZyb20gJ3JlYWN0J1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnXG5pbXBvcnQgeyBjc3MsIGtleWZyYW1lcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0J1xuXG5jb25zdCBESVJFQ1RJT05fVVAgPSAndXAnXG5jb25zdCBESVJFQ1RJT05fRE9XTiA9ICdkb3duJ1xuXG5jb25zdCBNT0RFX1VOUElOTkVEID0gJ3VucGlubmVkJ1xuY29uc3QgTU9ERV9QSU5ORUQgPSAncGlubmVkJ1xuY29uc3QgTU9ERV9TVEFUSUMgPSAnc3RhdGljJ1xuXG5jb25zdCBUUkFOU0lUSU9OX05PTkUgPSAnbm9uZSdcbmNvbnN0IFRSQU5TSVRJT05fTk9STUFMID0gJ25vcm1hbCdcbmNvbnN0IFRSQU5TSVRJT05fUElOTkVEX1RPX1NUQVRJQyA9ICdwaW5uZWQtdG8tc3RhdGljJ1xuXG50eXBlIE1vZGVUeXBlID0gdHlwZW9mIE1PREVfUElOTkVEIHwgdHlwZW9mIE1PREVfVU5QSU5ORUQgfCB0eXBlb2YgTU9ERV9TVEFUSUNcbnR5cGUgRGlyZWN0aW9uVHlwZSA9IHR5cGVvZiBESVJFQ1RJT05fVVAgfCB0eXBlb2YgRElSRUNUSU9OX0RPV05cbnR5cGUgVHJhbnNpdGlvblR5cGUgPSB0eXBlb2YgVFJBTlNJVElPTl9OT05FIHwgdHlwZW9mIFRSQU5TSVRJT05fTk9STUFMIHwgdHlwZW9mIFRSQU5TSVRJT05fUElOTkVEX1RPX1NUQVRJQ1xuXG50eXBlIFByb3BzVHlwZSA9IHtcbiAgLyoqIFRoZSBjaGlsZCBub2RlIHRvIGJlIGRpc3BsYXllZCBhcyBhIGhlYWRlciAqL1xuICBjaGlsZHJlbjogUmVhY3QuUmVhY3ROb2RlXG4gIC8qKiBUaGUgbWF4aW11bSBhbW91bnQgb2YgcHggdGhlIGhlYWRlciBzaG91bGQgbW92ZSB1cCB3aGVuIHNjcm9sbGluZyAqL1xuICBzY3JvbGxIZWlnaHQ6IG51bWJlclxuICAvKiogVGhlIG1pbmltdW0gc2Nyb2xsVG9wIHBvc2l0aW9uIHdoZXJlIHRoZSB0cmFuc2Zvcm0gc2hvdWxkIHN0YXJ0ICovXG4gIHBpblN0YXJ0OiBudW1iZXJcbiAgLyoqIFVzZWQgZm9yIGNhbGN1bGF0aW5nIHRoZSBzdGlja3lUb3AgcG9zaXRpb24gb2YgYW4gYW5jZXN0b3IgKi9cbiAgaGVpZ2h0PzogbnVtYmVyXG4gIC8qKiBGaXJlZCwgd2hlbiBIZWFkcm9vbSBjaGFuZ2VzIGl0cyBzdGF0ZS4gUGFzc2VzIHN0aWNreVRvcCBvZiB0aGUgYW5jZXN0b3IuICovXG4gIG9uU3RpY2t5VG9wQ2hhbmdlZD86IChzdGlja3lUb3A6IG51bWJlcikgPT4gdm9pZFxuICAvKiogVHJ1ZSwgaWYgc3RpY2t5IHBvc2l0aW9uIHNob3VsZCBiZSBkaXNhYmxlZCAoZS5nLiBmb3IgZWRnZSAxNiBzdXBwb3J0KSAqL1xuICBwb3NpdGlvblN0aWNreURpc2FibGVkPzogYm9vbGVhblxuICAvKiogVGhlIHBhcmVudCBlbGVtZW50IGZpcmluZyB0aGUgc2Nyb2xsIGV2ZW50LiBEZWZhdWx0cyB0byBkb2N1bWVudC5kb2N1bWVudEVsZW1lbnQgKi9cbiAgcGFyZW50PzogSFRNTEVsZW1lbnQgfCBudWxsXG4gIC8qKiBUaGUgei1pbmRleCB1c2VkIGJ5IHRoZSB3cmFwcGVyLiBEZWZhdWx0cyB0byAxLiAqL1xuICB6SW5kZXg/OiBudW1iZXJcbiAgLyoqIEEgY2xhc3NuYW1lIGZvciBhcHBseWluZyBjdXN0b20gc3R5bGVzIHRvIHRoZSB3cmFwcGVyLiBVc2UgYXQgeW91ciBvd24gcmlzay4gKi9cbiAgY2xhc3NOYW1lPzogc3RyaW5nXG59XG5cbnR5cGUgU3RhdGVUeXBlID0ge1xuICBtb2RlOiBNb2RlVHlwZVxuICB0cmFuc2l0aW9uOiBUcmFuc2l0aW9uVHlwZVxuICBhbmltYXRlVXBGcm9tOiBudW1iZXIgfCBudWxsXG59XG5cbmNvbnN0IEhlYWRlcldyYXBwZXIgPSBzdHlsZWQuZGl2PHtcbiAgJHBvc2l0aW9uU3RpY2t5RGlzYWJsZWQ6IGJvb2xlYW5cbiAgJHRyYW5zbGF0ZVk6IG51bWJlclxuICAkdHJhbnNpdGlvbjogVHJhbnNpdGlvblR5cGVcbiAgJGFuaW1hdGVVcEZyb206IG51bWJlciB8IG51bGxcbiAgJHpJbmRleD86IG51bWJlclxuICAkdG9wOiBudW1iZXJcbiAgJHN0YXRpYzogYm9vbGVhblxufT5gXG4gIHBvc2l0aW9uOiAke3Byb3BzID0+IChwcm9wcy4kcG9zaXRpb25TdGlja3lEaXNhYmxlZCA/ICdzdGF0aWMnIDogJ3N0aWNreScpfTtcbiAgdG9wOiAke3Byb3BzID0+IHByb3BzLiR0b3B9cHg7XG4gIHotaW5kZXg6ICR7cHJvcHMgPT4gcHJvcHMuJHpJbmRleH07XG4gIHRyYW5zZm9ybTogdHJhbnNsYXRlWSgke3Byb3BzID0+IHByb3BzLiR0cmFuc2xhdGVZfXB4KTtcbiAgYW5pbWF0aW9uLWR1cmF0aW9uOiAwLjJzO1xuICBhbmltYXRpb24tdGltaW5nLWZ1bmN0aW9uOiBlYXNlLW91dDtcbiAgJHtwcm9wcyA9PiAocHJvcHMuJHRyYW5zaXRpb24gPT09IFRSQU5TSVRJT05fTk9STUFMICYmICFwcm9wcy4kc3RhdGljID8gJ3RyYW5zaXRpb246IHRyYW5zZm9ybSAwLjJzIGVhc2Utb3V0OycgOiAnJyl9XG4gICR7cHJvcHMgPT5cbiAgICBwcm9wcy4kdHJhbnNpdGlvbiA9PT0gVFJBTlNJVElPTl9QSU5ORURfVE9fU1RBVElDICYmIHByb3BzLiRhbmltYXRlVXBGcm9tICE9PSBudWxsXG4gICAgICA/IGNzc2BcbiAgICAgICAgICBhbmltYXRpb24tbmFtZTogJHtrZXlmcmFtZXNNb3ZlVXBGcm9tKHByb3BzLiRhbmltYXRlVXBGcm9tKX07XG4gICAgICAgIGBcbiAgICAgIDogJyd9XG4gICR7cHJvcHMgPT4gKHByb3BzLiRzdGF0aWMgPyAndHJhbnNpdGlvbjogbm9uZTsnIDogJycpfVxuYFxuXG5jb25zdCBrZXlmcmFtZXNNb3ZlVXBGcm9tID0gKGZyb206IG51bWJlcikgPT4ga2V5ZnJhbWVzYFxuICAgIGZyb20ge1xuICAgICAgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKCR7TWF0aC5tYXgoZnJvbSwgMCl9cHgpXG4gICAgfVxuXG4gICAgdG8ge1xuICAgICAgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKDApXG4gICAgfVxuYFxuXG5jbGFzcyBIZWFkcm9vbSBleHRlbmRzIFJlYWN0LlB1cmVDb21wb25lbnQ8UHJvcHNUeXBlLCBTdGF0ZVR5cGU+IHtcbiAgc3RhdGljIGRlZmF1bHRQcm9wczogeyBwaW5TdGFydDogbnVtYmVyOyB6SW5kZXg6IG51bWJlcjsgcGFyZW50OiBIVE1MRWxlbWVudCB8IG51bGwgfSA9IHtcbiAgICBwaW5TdGFydDogMCxcbiAgICB6SW5kZXg6IDEsXG4gICAgcGFyZW50OiB3aW5kb3cuZG9jdW1lbnQuZG9jdW1lbnRFbGVtZW50LFxuICB9XG5cbiAgc3RhdGU6IFN0YXRlVHlwZSA9IHtcbiAgICBtb2RlOiBNT0RFX1NUQVRJQyxcbiAgICB0cmFuc2l0aW9uOiBUUkFOU0lUSU9OX05PTkUsXG4gICAgYW5pbWF0ZVVwRnJvbTogbnVsbCxcbiAgfVxuXG4gIC8qKiB0aGUgdmVyeSBsYXN0IHNjcm9sbFRvcCB3aGljaCB3ZSBrbm93IGFib3V0ICh0byBkZXRlcm1pbmUgZGlyZWN0aW9uIGNoYW5nZXMpICovXG4gIGxhc3RLbm93blNjcm9sbFRvcDogbnVtYmVyID0gMFxuXG4gIC8qKlxuICAgKiBAcmV0dXJucyB7bnVtYmVyfSB0aGUgY3VycmVudCBzY3JvbGxUb3AgcG9zaXRpb24gb2YgdGhlIHdpbmRvd1xuICAgKi9cbiAgZ2V0U2Nyb2xsVG9wKCk6IG51bWJlciB7XG4gICAgY29uc3QgcGFyZW50ID0gdGhpcy5wcm9wcy5wYXJlbnRcbiAgICBpZiAocGFyZW50ICYmIHBhcmVudC5zY3JvbGxUb3AgIT09IHVuZGVmaW5lZCAmJiBwYXJlbnQgIT09IGRvY3VtZW50LmRvY3VtZW50RWxlbWVudCkge1xuICAgICAgcmV0dXJuIHBhcmVudC5zY3JvbGxUb3BcbiAgICB9XG4gICAgaWYgKHBhcmVudCAhPT0gZG9jdW1lbnQuZG9jdW1lbnRFbGVtZW50KSB7XG4gICAgICBjb25zb2xlLndhcm4oJ0NvdWxkIG5vdCBkZXRlcm1pbmUgc2Nyb2xsVG9wIGZyb20gcGFyZW50IGZvciBTdGlja3lIZWFkcm9vbS4gRGVmYXVsdGluZyB0byB3aW5kb3cucGFnZVlPZmZzZXQuJylcbiAgICB9XG4gICAgaWYgKHdpbmRvdy5wYWdlWU9mZnNldCA9PT0gdW5kZWZpbmVkKSB7XG4gICAgICBjb25zb2xlLmVycm9yKCd3aW5kb3cucGFnZVlPZmZzZXQgaXMgdW5kZWZpbmVkLiBEZWZhdWx0aW5nIHRvIDAuJylcbiAgICAgIHJldHVybiAwXG4gICAgfVxuICAgIHJldHVybiB3aW5kb3cucGFnZVlPZmZzZXRcbiAgfVxuXG4gIGNvbXBvbmVudERpZE1vdW50KCkge1xuICAgIHRoaXMuYWRkU2Nyb2xsTGlzdGVuZXIodGhpcy5wcm9wcy5wYXJlbnQpXG4gIH1cblxuICBhZGRTY3JvbGxMaXN0ZW5lcihwYXJlbnQ/OiBIVE1MRWxlbWVudCB8IG51bGwpIHtcbiAgICBpZiAocGFyZW50ID09PSB3aW5kb3cuZG9jdW1lbnQuZG9jdW1lbnRFbGVtZW50KSB7XG4gICAgICB3aW5kb3cuYWRkRXZlbnRMaXN0ZW5lcignc2Nyb2xsJywgdGhpcy5oYW5kbGVFdmVudClcbiAgICB9IGVsc2UgaWYgKHBhcmVudCkge1xuICAgICAgcGFyZW50LmFkZEV2ZW50TGlzdGVuZXIoJ3Njcm9sbCcsIHRoaXMuaGFuZGxlRXZlbnQpXG4gICAgfSBlbHNlIHtcbiAgICAgIGNvbnNvbGUuZGVidWcoXCIncGFyZW50JyBwcm9wIG9mIEhlYWRyb29tIGlzIG51bGwuIEFzc3VtaW5nLCBpdCB3aWxsIGJlIHNldCBzb29uLi4uXCIpXG4gICAgfVxuICB9XG5cbiAgcmVtb3ZlU2Nyb2xsTGlzdGVuZXIocGFyZW50PzogSFRNTEVsZW1lbnQgfCBudWxsKSB7XG4gICAgaWYgKHBhcmVudCA9PT0gd2luZG93LmRvY3VtZW50LmRvY3VtZW50RWxlbWVudCkge1xuICAgICAgd2luZG93LnJlbW92ZUV2ZW50TGlzdGVuZXIoJ3Njcm9sbCcsIHRoaXMuaGFuZGxlRXZlbnQpXG4gICAgfSBlbHNlIGlmIChwYXJlbnQpIHtcbiAgICAgIHBhcmVudC5yZW1vdmVFdmVudExpc3RlbmVyKCdzY3JvbGwnLCB0aGlzLmhhbmRsZUV2ZW50KVxuICAgIH1cbiAgfVxuXG4gIGNvbXBvbmVudERpZFVwZGF0ZShwcmV2UHJvcHM6IFByb3BzVHlwZSkge1xuICAgIGlmIChwcmV2UHJvcHMucGFyZW50ICE9PSB0aGlzLnByb3BzLnBhcmVudCkge1xuICAgICAgdGhpcy5yZW1vdmVTY3JvbGxMaXN0ZW5lcihwcmV2UHJvcHMucGFyZW50KVxuICAgICAgdGhpcy5hZGRTY3JvbGxMaXN0ZW5lcih0aGlzLnByb3BzLnBhcmVudClcbiAgICB9XG4gIH1cblxuICBjb21wb25lbnRXaWxsVW5tb3VudCgpIHtcbiAgICB0aGlzLnJlbW92ZVNjcm9sbExpc3RlbmVyKHRoaXMucHJvcHMucGFyZW50KVxuICB9XG5cbiAgLyoqXG4gICAqIElmIHdlJ3JlIGFscmVhZHkgc3RhdGljIGFuZCBwaW5TdGFydCArIHNjcm9sbEhlaWdodCA+PSBzY3JvbGxUb3AsIHRoZW4gd2Ugc2hvdWxkIHN0YXkgc3RhdGljLlxuICAgKiBJZiB3ZSdyZSBub3QgYWxyZWFkeSBzdGF0aWMsIHRoZW4gd2Ugc2hvdWxkIHNldCB0aGUgaGVhZGVyIHN0YXRpYywgb25seSB3aGVuIHBpblN0YXJ0ID49IHNjcm9sbFRvcCAocmVnYXJkbGVzcyBvZlxuICAgKiBzY3JvbGxIZWlnaHQsIHNvIHRoZSBoZWFkZXIgZG9lc24ndCBqdW1wIHVwLCB3aGVuIHNjcm9sbGluZyB1cHdhcmRzIHRvIHRoZSB0cmlnZ2VyKS5cbiAgICogRWxzZSB3ZSBzaG91bGRuJ3Qgc2V0IGl0IHN0YXRpYy5cbiAgICogQHBhcmFtIHNjcm9sbFRvcCB0aGUgY3VycmVudFNjcm9sbFRvcCBwb3NpdGlvblxuICAgKiBAcGFyYW0gZGlyZWN0aW9uIHRoZSBjdXJyZW50IGRpcmVjdGlvblxuICAgKiBAcmV0dXJucyB7Ym9vbGVhbn0gaWYgd2Ugc2hvdWxkIHNldCB0aGUgaGVhZGVyIHN0YXRpY1xuICAgKi9cbiAgc2hvdWxkU2V0U3RhdGljKHNjcm9sbFRvcDogbnVtYmVyLCBkaXJlY3Rpb246IERpcmVjdGlvblR5cGUpOiBib29sZWFuIHtcbiAgICBpZiAodGhpcy5zdGF0ZS5tb2RlID09PSBNT0RFX1NUQVRJQyB8fCAodGhpcy5zdGF0ZS5tb2RlID09PSBNT0RFX1BJTk5FRCAmJiBkaXJlY3Rpb24gPT09IERJUkVDVElPTl9ET1dOKSkge1xuICAgICAgcmV0dXJuIHRoaXMucHJvcHMucGluU3RhcnQgKyB0aGlzLnByb3BzLnNjcm9sbEhlaWdodCA+PSBzY3JvbGxUb3BcbiAgICB9IGVsc2Uge1xuICAgICAgcmV0dXJuIHRoaXMucHJvcHMucGluU3RhcnQgPj0gc2Nyb2xsVG9wXG4gICAgfVxuICB9XG5cbiAgLyoqXG4gICAqIERldGVybWluZXMgdGhlIG1vZGUgZGVwZW5kaW5nIG9uIHRoZSBzY3JvbGxUb3AgcG9zaXRpb24gYW5kIHRoZSBjdXJyZW50IGRpcmVjdGlvblxuICAgKiBAcGFyYW0ge251bWJlcn0gc2Nyb2xsVG9wXG4gICAqIEBwYXJhbSB7c3RyaW5nfSBkaXJlY3Rpb25cbiAgICogQHJldHVybnMge3N0cmluZ30gdGhlIG5leHQgbW9kZSBvZiBIZWFkcm9vbVxuICAgKi9cbiAgZGV0ZXJtaW5lTW9kZShzY3JvbGxUb3A6IG51bWJlciwgZGlyZWN0aW9uOiBEaXJlY3Rpb25UeXBlKTogTW9kZVR5cGUge1xuICAgIGlmICh0aGlzLnNob3VsZFNldFN0YXRpYyhzY3JvbGxUb3AsIGRpcmVjdGlvbikpIHtcbiAgICAgIHJldHVybiBNT0RFX1NUQVRJQ1xuICAgIH0gZWxzZSB7XG4gICAgICByZXR1cm4gZGlyZWN0aW9uID09PSBESVJFQ1RJT05fVVAgPyBNT0RFX1BJTk5FRCA6IE1PREVfVU5QSU5ORURcbiAgICB9XG4gIH1cblxuICAvKipcbiAgICogQHJldHVybnMge1RyYW5zaXRpb25UeXBlfSBkZXRlcm1pbmVzIHRoZSBraW5kIG9mIHRyYW5zaXRpb25cbiAgICovXG4gIGRldGVybWluZVRyYW5zaXRpb24obW9kZTogTW9kZVR5cGUsIGRpcmVjdGlvbjogRGlyZWN0aW9uVHlwZSk6IFRyYW5zaXRpb25UeXBlIHtcbiAgICAvLyBIYW5kbGUgc3BlY2lhbCBjYXNlOiBJZiB3ZSdyZSBwaW5uZWQgYW5kIGdvaW5nIHRvIHN0YXRpYywgd2UgbmVlZCBhIHNwZWNpYWwgdHJhbnNpdGlvbiB1c2luZyBjc3MgYW5pbWF0aW9uXG4gICAgaWYgKHRoaXMuc3RhdGUubW9kZSA9PT0gTU9ERV9QSU5ORUQgJiYgbW9kZSA9PT0gTU9ERV9TVEFUSUMpIHtcbiAgICAgIHJldHVybiBUUkFOU0lUSU9OX1BJTk5FRF9UT19TVEFUSUNcbiAgICB9XG4gICAgLy8gSWYgbW9kZSBpcyBzdGF0aWMsIHRoZW4gbm8gdHJhbnNpdGlvbiwgYmVjYXVzZSB3ZSdyZSBhbHJlYWR5IGluIHRoZSByaWdodCBzcG90XG4gICAgLy8gKGFuZCB3YW50IHRvIGNoYW5nZSB0cmFuc2Zvcm0gYW5kIHRvcCBwcm9wZXJ0aWVzIHNlYW1sZXNzbHkpXG4gICAgaWYgKG1vZGUgPT09IE1PREVfU1RBVElDKSB7XG4gICAgICByZXR1cm4gdGhpcy5zdGF0ZS50cmFuc2l0aW9uID09PSBUUkFOU0lUSU9OX05PTkUgPyBUUkFOU0lUSU9OX05PTkUgOiBUUkFOU0lUSU9OX1BJTk5FRF9UT19TVEFUSUNcbiAgICB9XG4gICAgLy8gbW9kZSBpcyBub3Qgc3RhdGljLCB0cmFuc2l0aW9uIHdoZW4gbW92aW5nIHVwd2FyZHMgb3Igd2hlbiB3ZSd2ZSBsYXN0bHkgZGlkIHRoZSB0cmFuc2l0aW9uXG4gICAgcmV0dXJuIGRpcmVjdGlvbiA9PT0gRElSRUNUSU9OX1VQIHx8IHRoaXMuc3RhdGUudHJhbnNpdGlvbiA9PT0gVFJBTlNJVElPTl9OT1JNQUxcbiAgICAgID8gVFJBTlNJVElPTl9OT1JNQUxcbiAgICAgIDogVFJBTlNJVElPTl9OT05FXG4gIH1cblxuICAvKipcbiAgICogQ2hlY2tzIHRoZSBjdXJyZW50IHNjcm9sbFRvcCBwb3NpdGlvbiBhbmQgdXBkYXRlcyB0aGUgc3RhdGUgYWNjb3JkaW5nbHlcbiAgICovXG4gIHVwZGF0ZTogKCkgPT4gdm9pZCA9ICgpID0+IHtcbiAgICBjb25zdCBjdXJyZW50U2Nyb2xsVG9wID0gdGhpcy5nZXRTY3JvbGxUb3AoKVxuICAgIGNvbnN0IG5ld1N0YXRlOiBQYXJ0aWFsPFN0YXRlVHlwZT4gPSB7fVxuICAgIGlmIChjdXJyZW50U2Nyb2xsVG9wID09PSB0aGlzLmxhc3RLbm93blNjcm9sbFRvcCkge1xuICAgICAgcmV0dXJuXG4gICAgfVxuICAgIGNvbnN0IGRpcmVjdGlvbiA9IHRoaXMubGFzdEtub3duU2Nyb2xsVG9wIDwgY3VycmVudFNjcm9sbFRvcCA/IERJUkVDVElPTl9ET1dOIDogRElSRUNUSU9OX1VQXG4gICAgbmV3U3RhdGUubW9kZSA9IHRoaXMuZGV0ZXJtaW5lTW9kZShjdXJyZW50U2Nyb2xsVG9wLCBkaXJlY3Rpb24pXG4gICAgbmV3U3RhdGUudHJhbnNpdGlvbiA9IHRoaXMuZGV0ZXJtaW5lVHJhbnNpdGlvbihuZXdTdGF0ZS5tb2RlLCBkaXJlY3Rpb24pXG5cbiAgICBjb25zdCB7IG9uU3RpY2t5VG9wQ2hhbmdlZCwgaGVpZ2h0LCBzY3JvbGxIZWlnaHQsIHBpblN0YXJ0IH0gPSB0aGlzLnByb3BzXG4gICAgaWYgKHRoaXMuc3RhdGUubW9kZSA9PT0gTU9ERV9QSU5ORUQgJiYgbmV3U3RhdGUubW9kZSA9PT0gTU9ERV9TVEFUSUMpIHtcbiAgICAgIC8vIGFuaW1hdGlvbiBpbiB0aGUgc3BlY2lhbCBjYXNlIGZyb20gcGlubmVkIHRvIHN0YXRpY1xuICAgICAgbmV3U3RhdGUuYW5pbWF0ZVVwRnJvbSA9IGN1cnJlbnRTY3JvbGxUb3AgLSBwaW5TdGFydFxuICAgIH1cbiAgICBpZiAob25TdGlja3lUb3BDaGFuZ2VkICYmIG5ld1N0YXRlLm1vZGUgIT09IHRoaXMuc3RhdGUubW9kZSAmJiBoZWlnaHQpIHtcbiAgICAgIG9uU3RpY2t5VG9wQ2hhbmdlZChIZWFkcm9vbS5jYWxjU3RpY2t5VG9wKG5ld1N0YXRlLm1vZGUsIGhlaWdodCwgc2Nyb2xsSGVpZ2h0KSlcbiAgICB9XG4gICAgdGhpcy5zZXRTdGF0ZShuZXdTdGF0ZSBhcyBTdGF0ZVR5cGUpXG4gICAgdGhpcy5sYXN0S25vd25TY3JvbGxUb3AgPSBjdXJyZW50U2Nyb2xsVG9wXG4gIH1cblxuICBoYW5kbGVFdmVudDogKCkgPT4gdm9pZCA9ICgpID0+IHtcbiAgICB3aW5kb3cucmVxdWVzdEFuaW1hdGlvbkZyYW1lKHRoaXMudXBkYXRlKVxuICB9XG5cbiAgc3RhdGljIGNhbGNTdGlja3lUb3AobW9kZTogTW9kZVR5cGUsIGhlaWdodDogbnVtYmVyLCBzY3JvbGxIZWlnaHQ6IG51bWJlcik6IG51bWJlciB7XG4gICAgcmV0dXJuIG1vZGUgPT09IE1PREVfUElOTkVEID8gaGVpZ2h0IDogaGVpZ2h0IC0gc2Nyb2xsSGVpZ2h0XG4gIH1cblxuICByZW5kZXIoKTogUmVhY3QuUmVhY3RFbGVtZW50IHtcbiAgICBjb25zdCB7IGNoaWxkcmVuLCBzY3JvbGxIZWlnaHQsIHBvc2l0aW9uU3RpY2t5RGlzYWJsZWQsIHpJbmRleCwgY2xhc3NOYW1lIH0gPSB0aGlzLnByb3BzXG4gICAgY29uc3QgeyBtb2RlLCB0cmFuc2l0aW9uLCBhbmltYXRlVXBGcm9tIH0gPSB0aGlzLnN0YXRlXG4gICAgY29uc3QgdHJhbnNmb3JtID0gbW9kZSA9PT0gTU9ERV9VTlBJTk5FRCA/IC1zY3JvbGxIZWlnaHQgOiAwXG4gICAgY29uc3Qgb3duU3RpY2t5VG9wID0gbW9kZSA9PT0gTU9ERV9TVEFUSUMgPyAtc2Nyb2xsSGVpZ2h0IDogMFxuICAgIHJldHVybiAoXG4gICAgICA8SGVhZGVyV3JhcHBlclxuICAgICAgICBjbGFzc05hbWU9e2NsYXNzTmFtZX1cbiAgICAgICAgJHRyYW5zbGF0ZVk9e3RyYW5zZm9ybX1cbiAgICAgICAgJHRvcD17b3duU3RpY2t5VG9wfVxuICAgICAgICAkdHJhbnNpdGlvbj17dHJhbnNpdGlvbn1cbiAgICAgICAgJHBvc2l0aW9uU3RpY2t5RGlzYWJsZWQ9eyEhcG9zaXRpb25TdGlja3lEaXNhYmxlZH1cbiAgICAgICAgJHN0YXRpYz17bW9kZSA9PT0gTU9ERV9TVEFUSUN9XG4gICAgICAgICRhbmltYXRlVXBGcm9tPXthbmltYXRlVXBGcm9tfVxuICAgICAgICAkekluZGV4PXt6SW5kZXh9PlxuICAgICAgICB7Y2hpbGRyZW59XG4gICAgICA8L0hlYWRlcldyYXBwZXI+XG4gICAgKVxuICB9XG59XG5cbmV4cG9ydCBkZWZhdWx0IEhlYWRyb29tXG4iXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBdUU4QyJ9 */");
41
32
  var _React_PureComponent;
42
33
  class Headroom extends (_React_PureComponent = React.PureComponent) {
43
34
  /**
@@ -146,14 +137,11 @@ class Headroom extends (_React_PureComponent = React.PureComponent) {
146
137
  }, children);
147
138
  }
148
139
  constructor(...args){
149
- super(...args);
150
- _define_property(this, "state", {
140
+ super(...args), _define_property(this, "state", {
151
141
  mode: MODE_STATIC,
152
142
  transition: TRANSITION_NONE,
153
143
  animateUpFrom: null
154
- });
155
- /** the very last scrollTop which we know about (to determine direction changes) */ _define_property(this, "lastKnownScrollTop", 0);
156
- /**
144
+ }), /** the very last scrollTop which we know about (to determine direction changes) */ _define_property(this, "lastKnownScrollTop", 0), /**
157
145
  * Checks the current scrollTop position and updates the state accordingly
158
146
  */ _define_property(this, "update", ()=>{
159
147
  const currentScrollTop = this.getScrollTop();
@@ -174,8 +162,7 @@ class Headroom extends (_React_PureComponent = React.PureComponent) {
174
162
  }
175
163
  this.setState(newState);
176
164
  this.lastKnownScrollTop = currentScrollTop;
177
- });
178
- _define_property(this, "handleEvent", ()=>{
165
+ }), _define_property(this, "handleEvent", ()=>{
179
166
  window.requestAnimationFrame(this.update);
180
167
  });
181
168
  }
package/index.tsx CHANGED
@@ -1,5 +1,6 @@
1
1
  import React from 'react'
2
- import styled, { css, keyframes } from 'styled-components'
2
+ import styled from '@emotion/styled'
3
+ import { css, keyframes } from '@emotion/react'
3
4
 
4
5
  const DIRECTION_UP = 'up'
5
6
  const DIRECTION_DOWN = 'down'
@@ -18,55 +19,54 @@ type TransitionType = typeof TRANSITION_NONE | typeof TRANSITION_NORMAL | typeof
18
19
 
19
20
  type PropsType = {
20
21
  /** The child node to be displayed as a header */
21
- children: React.ReactNode,
22
+ children: React.ReactNode
22
23
  /** The maximum amount of px the header should move up when scrolling */
23
- scrollHeight: number,
24
+ scrollHeight: number
24
25
  /** The minimum scrollTop position where the transform should start */
25
- pinStart: number,
26
+ pinStart: number
26
27
  /** Used for calculating the stickyTop position of an ancestor */
27
- height?: number,
28
+ height?: number
28
29
  /** Fired, when Headroom changes its state. Passes stickyTop of the ancestor. */
29
- onStickyTopChanged?: (stickyTop: number) => void,
30
+ onStickyTopChanged?: (stickyTop: number) => void
30
31
  /** True, if sticky position should be disabled (e.g. for edge 16 support) */
31
- positionStickyDisabled?: boolean,
32
+ positionStickyDisabled?: boolean
32
33
  /** The parent element firing the scroll event. Defaults to document.documentElement */
33
- parent?: HTMLElement | null,
34
+ parent?: HTMLElement | null
34
35
  /** The z-index used by the wrapper. Defaults to 1. */
35
- zIndex?: number,
36
+ zIndex?: number
36
37
  /** A classname for applying custom styles to the wrapper. Use at your own risk. */
37
38
  className?: string
38
39
  }
39
40
 
40
41
  type StateType = {
41
- mode: ModeType,
42
- transition: TransitionType,
42
+ mode: ModeType
43
+ transition: TransitionType
43
44
  animateUpFrom: number | null
44
45
  }
45
46
 
46
47
  const HeaderWrapper = styled.div<{
47
- $positionStickyDisabled: boolean,
48
- $translateY: number,
49
- $transition: TransitionType,
50
- $animateUpFrom: number | null,
51
- $zIndex?: number,
52
- $top: number,
48
+ $positionStickyDisabled: boolean
49
+ $translateY: number
50
+ $transition: TransitionType
51
+ $animateUpFrom: number | null
52
+ $zIndex?: number
53
+ $top: number
53
54
  $static: boolean
54
55
  }>`
55
- position: ${props => props.$positionStickyDisabled ? 'static' : 'sticky'};
56
+ position: ${props => (props.$positionStickyDisabled ? 'static' : 'sticky')};
56
57
  top: ${props => props.$top}px;
57
58
  z-index: ${props => props.$zIndex};
58
59
  transform: translateY(${props => props.$translateY}px);
59
60
  animation-duration: 0.2s;
60
61
  animation-timing-function: ease-out;
61
- ${props => props.$transition === TRANSITION_NORMAL && !props.$static
62
- ? 'transition: transform 0.2s ease-out;'
63
- : ''}
64
- ${props => props.$transition === TRANSITION_PINNED_TO_STATIC && props.$animateUpFrom !== null
65
- ? css`
66
- animation-name: ${keyframesMoveUpFrom(props.$animateUpFrom)};
67
- `
68
- : ''}
69
- ${props => props.$static ? 'transition: none;' : ''}
62
+ ${props => (props.$transition === TRANSITION_NORMAL && !props.$static ? 'transition: transform 0.2s ease-out;' : '')}
63
+ ${props =>
64
+ props.$transition === TRANSITION_PINNED_TO_STATIC && props.$animateUpFrom !== null
65
+ ? css`
66
+ animation-name: ${keyframesMoveUpFrom(props.$animateUpFrom)};
67
+ `
68
+ : ''}
69
+ ${props => (props.$static ? 'transition: none;' : '')}
70
70
  `
71
71
 
72
72
  const keyframesMoveUpFrom = (from: number) => keyframes`
@@ -80,16 +80,16 @@ const keyframesMoveUpFrom = (from: number) => keyframes`
80
80
  `
81
81
 
82
82
  class Headroom extends React.PureComponent<PropsType, StateType> {
83
- static defaultProps: { pinStart: number, zIndex: number, parent: HTMLElement | null } = {
83
+ static defaultProps: { pinStart: number; zIndex: number; parent: HTMLElement | null } = {
84
84
  pinStart: 0,
85
85
  zIndex: 1,
86
- parent: window.document.documentElement
86
+ parent: window.document.documentElement,
87
87
  }
88
88
 
89
89
  state: StateType = {
90
90
  mode: MODE_STATIC,
91
91
  transition: TRANSITION_NONE,
92
- animateUpFrom: null
92
+ animateUpFrom: null,
93
93
  }
94
94
 
95
95
  /** the very last scrollTop which we know about (to determine direction changes) */
@@ -98,7 +98,7 @@ class Headroom extends React.PureComponent<PropsType, StateType> {
98
98
  /**
99
99
  * @returns {number} the current scrollTop position of the window
100
100
  */
101
- getScrollTop (): number {
101
+ getScrollTop(): number {
102
102
  const parent = this.props.parent
103
103
  if (parent && parent.scrollTop !== undefined && parent !== document.documentElement) {
104
104
  return parent.scrollTop
@@ -113,11 +113,11 @@ class Headroom extends React.PureComponent<PropsType, StateType> {
113
113
  return window.pageYOffset
114
114
  }
115
115
 
116
- componentDidMount () {
116
+ componentDidMount() {
117
117
  this.addScrollListener(this.props.parent)
118
118
  }
119
119
 
120
- addScrollListener (parent?: HTMLElement | null) {
120
+ addScrollListener(parent?: HTMLElement | null) {
121
121
  if (parent === window.document.documentElement) {
122
122
  window.addEventListener('scroll', this.handleEvent)
123
123
  } else if (parent) {
@@ -127,7 +127,7 @@ class Headroom extends React.PureComponent<PropsType, StateType> {
127
127
  }
128
128
  }
129
129
 
130
- removeScrollListener (parent?: HTMLElement | null) {
130
+ removeScrollListener(parent?: HTMLElement | null) {
131
131
  if (parent === window.document.documentElement) {
132
132
  window.removeEventListener('scroll', this.handleEvent)
133
133
  } else if (parent) {
@@ -135,14 +135,14 @@ class Headroom extends React.PureComponent<PropsType, StateType> {
135
135
  }
136
136
  }
137
137
 
138
- componentDidUpdate (prevProps: PropsType) {
138
+ componentDidUpdate(prevProps: PropsType) {
139
139
  if (prevProps.parent !== this.props.parent) {
140
140
  this.removeScrollListener(prevProps.parent)
141
141
  this.addScrollListener(this.props.parent)
142
142
  }
143
143
  }
144
144
 
145
- componentWillUnmount () {
145
+ componentWillUnmount() {
146
146
  this.removeScrollListener(this.props.parent)
147
147
  }
148
148
 
@@ -155,11 +155,8 @@ class Headroom extends React.PureComponent<PropsType, StateType> {
155
155
  * @param direction the current direction
156
156
  * @returns {boolean} if we should set the header static
157
157
  */
158
- shouldSetStatic (scrollTop: number, direction: DirectionType): boolean {
159
- if (
160
- this.state.mode === MODE_STATIC ||
161
- (this.state.mode === MODE_PINNED && direction === DIRECTION_DOWN)
162
- ) {
158
+ shouldSetStatic(scrollTop: number, direction: DirectionType): boolean {
159
+ if (this.state.mode === MODE_STATIC || (this.state.mode === MODE_PINNED && direction === DIRECTION_DOWN)) {
163
160
  return this.props.pinStart + this.props.scrollHeight >= scrollTop
164
161
  } else {
165
162
  return this.props.pinStart >= scrollTop
@@ -172,7 +169,7 @@ class Headroom extends React.PureComponent<PropsType, StateType> {
172
169
  * @param {string} direction
173
170
  * @returns {string} the next mode of Headroom
174
171
  */
175
- determineMode (scrollTop: number, direction: DirectionType): ModeType {
172
+ determineMode(scrollTop: number, direction: DirectionType): ModeType {
176
173
  if (this.shouldSetStatic(scrollTop, direction)) {
177
174
  return MODE_STATIC
178
175
  } else {
@@ -183,7 +180,7 @@ class Headroom extends React.PureComponent<PropsType, StateType> {
183
180
  /**
184
181
  * @returns {TransitionType} determines the kind of transition
185
182
  */
186
- determineTransition (mode: ModeType, direction: DirectionType): TransitionType {
183
+ determineTransition(mode: ModeType, direction: DirectionType): TransitionType {
187
184
  // Handle special case: If we're pinned and going to static, we need a special transition using css animation
188
185
  if (this.state.mode === MODE_PINNED && mode === MODE_STATIC) {
189
186
  return TRANSITION_PINNED_TO_STATIC
@@ -191,13 +188,10 @@ class Headroom extends React.PureComponent<PropsType, StateType> {
191
188
  // If mode is static, then no transition, because we're already in the right spot
192
189
  // (and want to change transform and top properties seamlessly)
193
190
  if (mode === MODE_STATIC) {
194
- return this.state.transition === TRANSITION_NONE
195
- ? TRANSITION_NONE
196
- : TRANSITION_PINNED_TO_STATIC
191
+ return this.state.transition === TRANSITION_NONE ? TRANSITION_NONE : TRANSITION_PINNED_TO_STATIC
197
192
  }
198
193
  // mode is not static, transition when moving upwards or when we've lastly did the transition
199
- return direction === DIRECTION_UP ||
200
- this.state.transition === TRANSITION_NORMAL
194
+ return direction === DIRECTION_UP || this.state.transition === TRANSITION_NORMAL
201
195
  ? TRANSITION_NORMAL
202
196
  : TRANSITION_NONE
203
197
  }
@@ -211,8 +205,7 @@ class Headroom extends React.PureComponent<PropsType, StateType> {
211
205
  if (currentScrollTop === this.lastKnownScrollTop) {
212
206
  return
213
207
  }
214
- const direction =
215
- this.lastKnownScrollTop < currentScrollTop ? DIRECTION_DOWN : DIRECTION_UP
208
+ const direction = this.lastKnownScrollTop < currentScrollTop ? DIRECTION_DOWN : DIRECTION_UP
216
209
  newState.mode = this.determineMode(currentScrollTop, direction)
217
210
  newState.transition = this.determineTransition(newState.mode, direction)
218
211
 
@@ -232,40 +225,28 @@ class Headroom extends React.PureComponent<PropsType, StateType> {
232
225
  window.requestAnimationFrame(this.update)
233
226
  }
234
227
 
235
- static calcStickyTop (
236
- mode: ModeType,
237
- height: number,
238
- scrollHeight: number
239
- ): number {
228
+ static calcStickyTop(mode: ModeType, height: number, scrollHeight: number): number {
240
229
  return mode === MODE_PINNED ? height : height - scrollHeight
241
230
  }
242
231
 
243
- render (): React.ReactElement {
244
- const {
245
- children,
246
- scrollHeight,
247
- positionStickyDisabled,
248
- zIndex,
249
- className
250
- } = this.props
251
- const {
252
- mode,
253
- transition,
254
- animateUpFrom
255
- } = this.state
232
+ render(): React.ReactElement {
233
+ const { children, scrollHeight, positionStickyDisabled, zIndex, className } = this.props
234
+ const { mode, transition, animateUpFrom } = this.state
256
235
  const transform = mode === MODE_UNPINNED ? -scrollHeight : 0
257
236
  const ownStickyTop = mode === MODE_STATIC ? -scrollHeight : 0
258
- return <HeaderWrapper
259
- className={className}
260
- $translateY={transform}
261
- $top={ownStickyTop}
262
- $transition={transition}
263
- $positionStickyDisabled={!!positionStickyDisabled}
264
- $static={mode === MODE_STATIC}
265
- $animateUpFrom={animateUpFrom}
266
- $zIndex={zIndex}>
267
- {children}
268
- </HeaderWrapper>
237
+ return (
238
+ <HeaderWrapper
239
+ className={className}
240
+ $translateY={transform}
241
+ $top={ownStickyTop}
242
+ $transition={transition}
243
+ $positionStickyDisabled={!!positionStickyDisabled}
244
+ $static={mode === MODE_STATIC}
245
+ $animateUpFrom={animateUpFrom}
246
+ $zIndex={zIndex}>
247
+ {children}
248
+ </HeaderWrapper>
249
+ )
269
250
  }
270
251
  }
271
252
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@integreat-app/react-sticky-headroom",
3
- "version": "2.2.1",
3
+ "version": "3.0.0",
4
4
  "engines": {
5
5
  "node": ">=18",
6
6
  "npm": ">=10"
@@ -36,7 +36,7 @@
36
36
  "react",
37
37
  "hide",
38
38
  "header",
39
- "styled-components",
39
+ "emotion",
40
40
  "typescript"
41
41
  ],
42
42
  "module": "./index.js",
@@ -63,48 +63,45 @@
63
63
  "safari >= 6.2"
64
64
  ],
65
65
  "peerDependencies": {
66
- "react": "16.x.x || 17.x.x || 18.x.x",
67
- "styled-components": "4.x.x || 5.x.x || 6.x.x"
66
+ "react": "16.x.x || 17.x.x || 18.x.x || 19.x.x",
67
+ "@emotion/react": "11.x.x",
68
+ "@emotion/styled": "11.x.x"
68
69
  },
69
70
  "devDependencies": {
70
- "@stylelint/postcss-css-in-js": "^0.38.0",
71
- "@swc/core": "^1.3.100",
72
- "@swc/jest": "^0.2.29",
73
- "@swc/plugin-styled-components": "^1.5.105",
74
- "@types/enzyme": "^3.10.15",
75
- "@types/enzyme-adapter-react-16": "^1.0.8",
76
- "@types/jest": "^29.5.6",
77
- "@types/node": "^20.8.7",
78
- "@types/react": "16",
79
- "@types/react-dom": "^18.2.13",
80
- "@types/styled-components": "^5.1.34",
81
- "@typescript-eslint/eslint-plugin": "6.8.0",
82
- "@typescript-eslint/parser": "^6.8.0",
83
- "browserslist": "^4.22.2",
84
- "enzyme": "^3.11.0",
85
- "enzyme-adapter-react-16": "^1.15.6",
86
- "enzyme-to-json": "^3.6.2",
87
- "eslint": "^8.51.0",
71
+ "@emotion/react": "^11.14.0",
72
+ "@emotion/styled": "^11.14.0",
73
+ "@swc/core": "^1.11.24",
74
+ "@swc/jest": "^0.2.38",
75
+ "@swc/plugin-emotion": "^9.0.4",
76
+ "@types/jest": "^29.5.14",
77
+ "@types/node": "^22.15.21",
78
+ "@types/react-dom": "^19.1.5",
79
+ "@typescript-eslint/eslint-plugin": "^8.32.1",
80
+ "@typescript-eslint/parser": "^8.32.1",
81
+ "browserslist": "^4.24.5",
82
+ "eslint": "^8.57.1",
83
+ "eslint-config-prettier": "^10.1.5",
88
84
  "eslint-config-standard": "^17.1.0",
89
- "eslint-plugin-import": "^2.28.1",
90
- "eslint-plugin-jest": "^27.4.2",
85
+ "eslint-plugin-import": "^2.31.0",
86
+ "eslint-plugin-jest": "^28.11.0",
91
87
  "eslint-plugin-node": "^11.1.0",
92
- "eslint-plugin-promise": "^6.1.1",
93
- "eslint-plugin-react": "^7.33.2",
94
- "jest": "^27.5.1",
95
- "jest-junit": "^13.0.0",
96
- "jest-styled-components": "^7.0.8",
88
+ "eslint-plugin-promise": "^6.6.0",
89
+ "eslint-plugin-react": "^7.37.5",
90
+ "jest": "^29.7.0",
91
+ "jest-environment-jsdom": "^29.7.0",
92
+ "jest-junit": "^16.0.0",
93
+ "postcss": "^8.5.3",
94
+ "postcss-styled-syntax": "^0.7.1",
95
+ "prettier": "^3.5.3",
97
96
  "raf": "^3.4.1",
98
- "react": "^16.14.0",
99
- "react-dom": "^16.14.0",
100
- "styled-components": "^6.1.2",
101
- "stylelint": "^15.6.0",
102
- "stylelint-config-recommended": "^12.0.0",
103
- "stylelint-config-styled-components": "^0.1.1",
104
- "swc-loader": "^0.2.3",
105
- "ts-node": "^10.9.1",
106
- "typescript": "^5.2.2",
107
- "webpack": "^5.70.0",
108
- "webpack-cli": "^5.1.4"
97
+ "react": "^19.1.0",
98
+ "react-dom": "^19.1.0",
99
+ "stylelint": "^16.19.1",
100
+ "stylelint-config-recommended": "^16.0.0",
101
+ "swc-loader": "^0.2.6",
102
+ "ts-node": "^10.9.2",
103
+ "typescript": "^5.8.3",
104
+ "webpack": "^5.99.9",
105
+ "webpack-cli": "^6.0.1"
109
106
  }
110
107
  }
package/index.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"sources":["index.tsx"],"sourcesContent":["import React from 'react'\nimport styled, { css, keyframes } from 'styled-components'\n\nconst DIRECTION_UP = 'up'\nconst DIRECTION_DOWN = 'down'\n\nconst MODE_UNPINNED = 'unpinned'\nconst MODE_PINNED = 'pinned'\nconst MODE_STATIC = 'static'\n\nconst TRANSITION_NONE = 'none'\nconst TRANSITION_NORMAL = 'normal'\nconst TRANSITION_PINNED_TO_STATIC = 'pinned-to-static'\n\ntype ModeType = typeof MODE_PINNED | typeof MODE_UNPINNED | typeof MODE_STATIC\ntype DirectionType = typeof DIRECTION_UP | typeof DIRECTION_DOWN\ntype TransitionType = typeof TRANSITION_NONE | typeof TRANSITION_NORMAL | typeof TRANSITION_PINNED_TO_STATIC\n\ntype PropsType = {\n /** The child node to be displayed as a header */\n children: React.ReactNode,\n /** The maximum amount of px the header should move up when scrolling */\n scrollHeight: number,\n /** The minimum scrollTop position where the transform should start */\n pinStart: number,\n /** Used for calculating the stickyTop position of an ancestor */\n height?: number,\n /** Fired, when Headroom changes its state. Passes stickyTop of the ancestor. */\n onStickyTopChanged?: (stickyTop: number) => void,\n /** True, if sticky position should be disabled (e.g. for edge 16 support) */\n positionStickyDisabled?: boolean,\n /** The parent element firing the scroll event. Defaults to document.documentElement */\n parent?: HTMLElement | null,\n /** The z-index used by the wrapper. Defaults to 1. */\n zIndex?: number,\n /** A classname for applying custom styles to the wrapper. Use at your own risk. */\n className?: string\n}\n\ntype StateType = {\n mode: ModeType,\n transition: TransitionType,\n animateUpFrom: number | null\n}\n\nconst HeaderWrapper = styled.div<{\n $positionStickyDisabled: boolean,\n $translateY: number,\n $transition: TransitionType,\n $animateUpFrom: number | null,\n $zIndex?: number,\n $top: number,\n $static: boolean\n}>`\n position: ${props => props.$positionStickyDisabled ? 'static' : 'sticky'};\n top: ${props => props.$top}px;\n z-index: ${props => props.$zIndex};\n transform: translateY(${props => props.$translateY}px);\n animation-duration: 0.2s;\n animation-timing-function: ease-out;\n ${props => props.$transition === TRANSITION_NORMAL && !props.$static\n ? 'transition: transform 0.2s ease-out;'\n : ''}\n ${props => props.$transition === TRANSITION_PINNED_TO_STATIC && props.$animateUpFrom !== null\n ? css`\n animation-name: ${keyframesMoveUpFrom(props.$animateUpFrom)};\n `\n : ''}\n ${props => props.$static ? 'transition: none;' : ''}\n`\n\nconst keyframesMoveUpFrom = (from: number) => keyframes`\n from {\n transform: translateY(${Math.max(from, 0)}px)\n }\n\n to {\n transform: translateY(0)\n }\n`\n\nclass Headroom extends React.PureComponent<PropsType, StateType> {\n static defaultProps: { pinStart: number, zIndex: number, parent: HTMLElement | null } = {\n pinStart: 0,\n zIndex: 1,\n parent: window.document.documentElement\n }\n\n state: StateType = {\n mode: MODE_STATIC,\n transition: TRANSITION_NONE,\n animateUpFrom: null\n }\n\n /** the very last scrollTop which we know about (to determine direction changes) */\n lastKnownScrollTop: number = 0\n\n /**\n * @returns {number} the current scrollTop position of the window\n */\n getScrollTop (): number {\n const parent = this.props.parent\n if (parent && parent.scrollTop !== undefined && parent !== document.documentElement) {\n return parent.scrollTop\n }\n if (parent !== document.documentElement) {\n console.warn('Could not determine scrollTop from parent for StickyHeadroom. Defaulting to window.pageYOffset.')\n }\n if (window.pageYOffset === undefined) {\n console.error('window.pageYOffset is undefined. Defaulting to 0.')\n return 0\n }\n return window.pageYOffset\n }\n\n componentDidMount () {\n this.addScrollListener(this.props.parent)\n }\n\n addScrollListener (parent?: HTMLElement | null) {\n if (parent === window.document.documentElement) {\n window.addEventListener('scroll', this.handleEvent)\n } else if (parent) {\n parent.addEventListener('scroll', this.handleEvent)\n } else {\n console.debug(\"'parent' prop of Headroom is null. Assuming, it will be set soon...\")\n }\n }\n\n removeScrollListener (parent?: HTMLElement | null) {\n if (parent === window.document.documentElement) {\n window.removeEventListener('scroll', this.handleEvent)\n } else if (parent) {\n parent.removeEventListener('scroll', this.handleEvent)\n }\n }\n\n componentDidUpdate (prevProps: PropsType) {\n if (prevProps.parent !== this.props.parent) {\n this.removeScrollListener(prevProps.parent)\n this.addScrollListener(this.props.parent)\n }\n }\n\n componentWillUnmount () {\n this.removeScrollListener(this.props.parent)\n }\n\n /**\n * If we're already static and pinStart + scrollHeight >= scrollTop, then we should stay static.\n * If we're not already static, then we should set the header static, only when pinStart >= scrollTop (regardless of\n * scrollHeight, so the header doesn't jump up, when scrolling upwards to the trigger).\n * Else we shouldn't set it static.\n * @param scrollTop the currentScrollTop position\n * @param direction the current direction\n * @returns {boolean} if we should set the header static\n */\n shouldSetStatic (scrollTop: number, direction: DirectionType): boolean {\n if (\n this.state.mode === MODE_STATIC ||\n (this.state.mode === MODE_PINNED && direction === DIRECTION_DOWN)\n ) {\n return this.props.pinStart + this.props.scrollHeight >= scrollTop\n } else {\n return this.props.pinStart >= scrollTop\n }\n }\n\n /**\n * Determines the mode depending on the scrollTop position and the current direction\n * @param {number} scrollTop\n * @param {string} direction\n * @returns {string} the next mode of Headroom\n */\n determineMode (scrollTop: number, direction: DirectionType): ModeType {\n if (this.shouldSetStatic(scrollTop, direction)) {\n return MODE_STATIC\n } else {\n return direction === DIRECTION_UP ? MODE_PINNED : MODE_UNPINNED\n }\n }\n\n /**\n * @returns {TransitionType} determines the kind of transition\n */\n determineTransition (mode: ModeType, direction: DirectionType): TransitionType {\n // Handle special case: If we're pinned and going to static, we need a special transition using css animation\n if (this.state.mode === MODE_PINNED && mode === MODE_STATIC) {\n return TRANSITION_PINNED_TO_STATIC\n }\n // If mode is static, then no transition, because we're already in the right spot\n // (and want to change transform and top properties seamlessly)\n if (mode === MODE_STATIC) {\n return this.state.transition === TRANSITION_NONE\n ? TRANSITION_NONE\n : TRANSITION_PINNED_TO_STATIC\n }\n // mode is not static, transition when moving upwards or when we've lastly did the transition\n return direction === DIRECTION_UP ||\n this.state.transition === TRANSITION_NORMAL\n ? TRANSITION_NORMAL\n : TRANSITION_NONE\n }\n\n /**\n * Checks the current scrollTop position and updates the state accordingly\n */\n update: () => void = () => {\n const currentScrollTop = this.getScrollTop()\n const newState: Partial<StateType> = {}\n if (currentScrollTop === this.lastKnownScrollTop) {\n return\n }\n const direction =\n this.lastKnownScrollTop < currentScrollTop ? DIRECTION_DOWN : DIRECTION_UP\n newState.mode = this.determineMode(currentScrollTop, direction)\n newState.transition = this.determineTransition(newState.mode, direction)\n\n const { onStickyTopChanged, height, scrollHeight, pinStart } = this.props\n if (this.state.mode === MODE_PINNED && newState.mode === MODE_STATIC) {\n // animation in the special case from pinned to static\n newState.animateUpFrom = currentScrollTop - pinStart\n }\n if (onStickyTopChanged && newState.mode !== this.state.mode && height) {\n onStickyTopChanged(Headroom.calcStickyTop(newState.mode, height, scrollHeight))\n }\n this.setState(newState as StateType)\n this.lastKnownScrollTop = currentScrollTop\n }\n\n handleEvent: () => void = () => {\n window.requestAnimationFrame(this.update)\n }\n\n static calcStickyTop (\n mode: ModeType,\n height: number,\n scrollHeight: number\n ): number {\n return mode === MODE_PINNED ? height : height - scrollHeight\n }\n\n render (): React.ReactElement {\n const {\n children,\n scrollHeight,\n positionStickyDisabled,\n zIndex,\n className\n } = this.props\n const {\n mode,\n transition,\n animateUpFrom\n } = this.state\n const transform = mode === MODE_UNPINNED ? -scrollHeight : 0\n const ownStickyTop = mode === MODE_STATIC ? -scrollHeight : 0\n return <HeaderWrapper\n className={className}\n $translateY={transform}\n $top={ownStickyTop}\n $transition={transition}\n $positionStickyDisabled={!!positionStickyDisabled}\n $static={mode === MODE_STATIC}\n $animateUpFrom={animateUpFrom}\n $zIndex={zIndex}>\n {children}\n </HeaderWrapper>\n }\n}\n\nexport default Headroom\n"],"names":["DIRECTION_UP","DIRECTION_DOWN","MODE_UNPINNED","MODE_PINNED","MODE_STATIC","TRANSITION_NONE","TRANSITION_NORMAL","TRANSITION_PINNED_TO_STATIC","HeaderWrapper","styled","div","props","$positionStickyDisabled","$top","$zIndex","$translateY","$transition","$static","$animateUpFrom","css","keyframesMoveUpFrom","from","keyframes","Math","max","Headroom","React","PureComponent","defaultProps","pinStart","zIndex","parent","window","document","documentElement","state","mode","transition","animateUpFrom","lastKnownScrollTop","getScrollTop","scrollTop","undefined","console","warn","pageYOffset","error","componentDidMount","addScrollListener","addEventListener","handleEvent","debug","removeScrollListener","removeEventListener","componentDidUpdate","prevProps","componentWillUnmount","shouldSetStatic","direction","scrollHeight","determineMode","determineTransition","update","currentScrollTop","newState","onStickyTopChanged","height","calcStickyTop","setState","requestAnimationFrame","render","children","positionStickyDisabled","className","transform","ownStickyTop"],"mappings":"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"}