@times-components/sticky 0.4.3 → 0.5.0

package/CHANGELOG.md

@@ -3,6 +3,33 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.5.0](https://github.com/newsuk/times-components/compare/@times-components/sticky@0.4.5...@times-components/sticky@0.5.0) (2022-08-18)
+
+
+### Features
+
+* **TDP-1712:** remove react-native foreverrrrr ([#3064](https://github.com/newsuk/times-components/issues/3064)) ([2a20cb5](https://github.com/newsuk/times-components/commit/2a20cb5abc10a4e7ca2d62487967f8fcf4eccb62)), closes [#3037](https://github.com/newsuk/times-components/issues/3037) [#3045](https://github.com/newsuk/times-components/issues/3045) [#3050](https://github.com/newsuk/times-components/issues/3050) [#3056](https://github.com/newsuk/times-components/issues/3056) [#3057](https://github.com/newsuk/times-components/issues/3057) [#3066](https://github.com/newsuk/times-components/issues/3066) [#3065](https://github.com/newsuk/times-components/issues/3065) [#3037](https://github.com/newsuk/times-components/issues/3037) [#3045](https://github.com/newsuk/times-components/issues/3045) [#3045](https://github.com/newsuk/times-components/issues/3045) [#3056](https://github.com/newsuk/times-components/issues/3056) [#3066](https://github.com/newsuk/times-components/issues/3066) [#3069](https://github.com/newsuk/times-components/issues/3069) [#3068](https://github.com/newsuk/times-components/issues/3068) [#3070](https://github.com/newsuk/times-components/issues/3070) [#3072](https://github.com/newsuk/times-components/issues/3072) [#3073](https://github.com/newsuk/times-components/issues/3073) [#3071](https://github.com/newsuk/times-components/issues/3071) [#3074](https://github.com/newsuk/times-components/issues/3074) [#3076](https://github.com/newsuk/times-components/issues/3076) [#3079](https://github.com/newsuk/times-components/issues/3079) [#3078](https://github.com/newsuk/times-components/issues/3078) [#3083](https://github.com/newsuk/times-components/issues/3083) [#3087](https://github.com/newsuk/times-components/issues/3087) [#3091](https://github.com/newsuk/times-components/issues/3091) [#3096](https://github.com/newsuk/times-components/issues/3096) [#3102](https://github.com/newsuk/times-components/issues/3102) [#3105](https://github.com/newsuk/times-components/issues/3105) [#3108](https://github.com/newsuk/times-components/issues/3108) [#3111](https://github.com/newsuk/times-components/issues/3111) [#3112](https://github.com/newsuk/times-components/issues/3112) [#3113](https://github.com/newsuk/times-components/issues/3113) [#3114](https://github.com/newsuk/times-components/issues/3114) [#3120](https://github.com/newsuk/times-components/issues/3120) [#3119](https://github.com/newsuk/times-components/issues/3119) [#3112](https://github.com/newsuk/times-components/issues/3112) [#3126](https://github.com/newsuk/times-components/issues/3126) [#3112](https://github.com/newsuk/times-components/issues/3112) [#3126](https://github.com/newsuk/times-components/issues/3126) [#3127](https://github.com/newsuk/times-components/issues/3127) [#3116](https://github.com/newsuk/times-components/issues/3116) [#3128](https://github.com/newsuk/times-components/issues/3128) [#3132](https://github.com/newsuk/times-components/issues/3132) [#3133](https://github.com/newsuk/times-components/issues/3133)
+
+
+
+
+
+## [0.4.5](https://github.com/newsuk/times-components/compare/@times-components/sticky@0.4.4...@times-components/sticky@0.4.5) (2022-08-05)
+
+**Note:** Version bump only for package @times-components/sticky
+
+
+
+
+
+## [0.4.4](https://github.com/newsuk/times-components/compare/@times-components/sticky@0.4.3...@times-components/sticky@0.4.4) (2022-07-19)
+
+**Note:** Version bump only for package @times-components/sticky
+
+
+
+
+
 ## [0.4.3](https://github.com/newsuk/times-components/compare/@times-components/sticky@0.4.2...@times-components/sticky@0.4.3) (2022-07-18)
 
 **Note:** Version bump only for package @times-components/sticky

package/babel.config.js

@@ -1,10 +1,7 @@
 module.exports = api => {
   api.cache(true);
   return {
-    plugins: [
-      "babel-plugin-styled-components",
-      "@babel/plugin-transform-react-display-name"
-    ],
-    presets: ["module:metro-react-native-babel-preset"]
+    plugins: ["babel-plugin-styled-components"],
+    presets: ["@babel/preset-env", "@babel/preset-react"]
   };
 };

package/dist/context.js

@@ -1 +1,161 @@
-var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.withStickyContext=withStickyContext;exports.StickyProvider=exports.defaultContext=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _defineProperty2=_interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));var _classCallCheck2=_interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));var _createClass2=_interopRequireDefault(require("@babel/runtime/helpers/createClass"));var _assertThisInitialized2=_interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));var _inherits2=_interopRequireDefault(require("@babel/runtime/helpers/inherits"));var _possibleConstructorReturn2=_interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));var _getPrototypeOf2=_interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));var _react=_interopRequireWildcard(require("react"));var _propTypes=_interopRequireDefault(require("prop-types"));var _reactDisplayName=_interopRequireDefault(require("react-display-name"));var _hoistNonReactStatics=_interopRequireDefault(require("hoist-non-react-statics"));var _util=require("./util");var _jsxFileName="/home/circleci/project/packages/sticky/src/context.js";function _getRequireWildcardCache(nodeInterop){if(typeof WeakMap!=="function")return null;var cacheBabelInterop=new WeakMap();var cacheNodeInterop=new WeakMap();return(_getRequireWildcardCache=function _getRequireWildcardCache(nodeInterop){return nodeInterop?cacheNodeInterop:cacheBabelInterop;})(nodeInterop);}function _interopRequireWildcard(obj,nodeInterop){if(!nodeInterop&&obj&&obj.__esModule){return obj;}if(obj===null||typeof obj!=="object"&&typeof obj!=="function"){return{default:obj};}var cache=_getRequireWildcardCache(nodeInterop);if(cache&&cache.has(obj)){return cache.get(obj);}var newObj={};var hasPropertyDescriptor=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var key in obj){if(key!=="default"&&Object.prototype.hasOwnProperty.call(obj,key)){var desc=hasPropertyDescriptor?Object.getOwnPropertyDescriptor(obj,key):null;if(desc&&(desc.get||desc.set)){Object.defineProperty(newObj,key,desc);}else{newObj[key]=obj[key];}}}newObj.default=obj;if(cache){cache.set(obj,newObj);}return newObj;}function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);if(enumerableOnly){symbols=symbols.filter(function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable;});}keys.push.apply(keys,symbols);}return keys;}function _objectSpread(target){for(var i=1;i<arguments.length;i++){var source=arguments[i]!=null?arguments[i]:{};if(i%2){ownKeys(Object(source),true).forEach(function(key){(0,_defineProperty2.default)(target,key,source[key]);});}else if(Object.getOwnPropertyDescriptors){Object.defineProperties(target,Object.getOwnPropertyDescriptors(source));}else{ownKeys(Object(source)).forEach(function(key){Object.defineProperty(target,key,Object.getOwnPropertyDescriptor(source,key));});}}return target;}function _createSuper(Derived){var hasNativeReflectConstruct=_isNativeReflectConstruct();return function _createSuperInternal(){var Super=(0,_getPrototypeOf2.default)(Derived),result;if(hasNativeReflectConstruct){var NewTarget=(0,_getPrototypeOf2.default)(this).constructor;result=Reflect.construct(Super,arguments,NewTarget);}else{result=Super.apply(this,arguments);}return(0,_possibleConstructorReturn2.default)(this,result);};}function _isNativeReflectConstruct(){if(typeof Reflect==="undefined"||!Reflect.construct)return false;if(Reflect.construct.sham)return false;if(typeof Proxy==="function")return true;try{Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));return true;}catch(e){return false;}}var defaultContext={top:0};exports.defaultContext=defaultContext;var _React$createContext=_react.default.createContext(defaultContext),Provider=_React$createContext.Provider,Consumer=_React$createContext.Consumer;var StickyProvider=function(_Component){(0,_inherits2.default)(StickyProvider,_Component);var _super=_createSuper(StickyProvider);function StickyProvider(props){var _this;(0,_classCallCheck2.default)(this,StickyProvider);_this=_super.call(this,props);_this.state=_objectSpread({},defaultContext);_this.ref=_this.ref.bind((0,_assertThisInitialized2.default)(_this));_this.setTop=_this.setTop.bind((0,_assertThisInitialized2.default)(_this));return _this;}(0,_createClass2.default)(StickyProvider,[{key:"componentDidMount",value:function componentDidMount(){window.addEventListener("resize",this.setTop);}},{key:"componentWillUnmount",value:function componentWillUnmount(){window.removeEventListener("resize",this.setTop);}},{key:"setTop",value:function setTop(){var _this$state=this.state,top=_this$state.top,node=_this$state.node;if(!node){return;}var newTop=Math.round((0,_util.getTopFromBody)(node));if(newTop!==top){this.setState({top:newTop});}}},{key:"ref",value:function ref(node){this.setState({node:node},this.setTop);}},{key:"render",value:function render(){var _this$props=this.props,Component=_this$props.Component,children=_this$props.children,props=(0,_objectWithoutProperties2.default)(_this$props,["Component","children"]);return _react.default.createElement(Component,(0,_extends2.default)({},props,{ref:this.ref,__source:{fileName:_jsxFileName,lineNumber:52,columnNumber:7}}),_react.default.createElement(Provider,{value:this.state,__source:{fileName:_jsxFileName,lineNumber:53,columnNumber:9}},children));}}]);return StickyProvider;}(_react.Component);exports.StickyProvider=StickyProvider;StickyProvider.propTypes={Component:_propTypes.default.oneOfType([_propTypes.default.string,_propTypes.default.func]),children:_propTypes.default.node.isRequired};StickyProvider.defaultProps={Component:"div"};function withStickyContext(WrappedComponent){function WithStickyContext(props){return _react.default.createElement(Consumer,{__source:{fileName:_jsxFileName,lineNumber:71,columnNumber:7}},function(stickyContext){return _react.default.createElement(WrappedComponent,(0,_extends2.default)({},props,{stickyContext:stickyContext,__source:{fileName:_jsxFileName,lineNumber:73,columnNumber:11}}));});}WithStickyContext.displayName="WithStickyContext("+(0,_reactDisplayName.default)(WrappedComponent)+")";(0,_hoistNonReactStatics.default)(WithStickyContext,WrappedComponent);return WithStickyContext;}
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.withStickyContext = withStickyContext;
+exports.StickyProvider = exports.defaultContext = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _reactDisplayName = _interopRequireDefault(require("react-display-name"));
+
+var _hoistNonReactStatics = _interopRequireDefault(require("hoist-non-react-statics"));
+
+var _util = require("./util");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
+
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
+
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+
+var defaultContext = {
+  top: 0
+};
+exports.defaultContext = defaultContext;
+
+var _React$createContext = _react["default"].createContext(defaultContext),
+    Provider = _React$createContext.Provider,
+    Consumer = _React$createContext.Consumer;
+
+var StickyProvider = /*#__PURE__*/function (_Component) {
+  _inherits(StickyProvider, _Component);
+
+  var _super = _createSuper(StickyProvider);
+
+  function StickyProvider(props) {
+    var _this;
+
+    _classCallCheck(this, StickyProvider);
+
+    _this = _super.call(this, props);
+    _this.state = _objectSpread({}, defaultContext);
+    _this.ref = _this.ref.bind(_assertThisInitialized(_this));
+    _this.setTop = _this.setTop.bind(_assertThisInitialized(_this));
+    return _this;
+  }
+
+  _createClass(StickyProvider, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      window.addEventListener("resize", this.setTop);
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      window.removeEventListener("resize", this.setTop);
+    }
+  }, {
+    key: "setTop",
+    value: function setTop() {
+      var _this$state = this.state,
+          top = _this$state.top,
+          node = _this$state.node;
+
+      if (!node) {
+        return;
+      }
+
+      var newTop = Math.round((0, _util.getTopFromBody)(node));
+
+      if (newTop !== top) {
+        this.setState({
+          top: newTop
+        });
+      }
+    }
+  }, {
+    key: "ref",
+    value: function ref(node) {
+      this.setState({
+        node: node
+      }, this.setTop);
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          Component = _this$props.Component,
+          children = _this$props.children,
+          props = _objectWithoutProperties(_this$props, ["Component", "children"]);
+
+      return /*#__PURE__*/_react["default"].createElement(Component, _extends({}, props, {
+        ref: this.ref
+      }), /*#__PURE__*/_react["default"].createElement(Provider, {
+        value: this.state
+      }, children));
+    }
+  }]);
+
+  return StickyProvider;
+}(_react.Component);
+
+exports.StickyProvider = StickyProvider;
+StickyProvider.propTypes = {
+  Component: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].func]),
+  children: _propTypes["default"].node.isRequired
+};
+StickyProvider.defaultProps = {
+  Component: "div"
+};
+
+function withStickyContext(WrappedComponent) {
+  function WithStickyContext(props) {
+    return /*#__PURE__*/_react["default"].createElement(Consumer, null, function (stickyContext) {
+      return /*#__PURE__*/_react["default"].createElement(WrappedComponent, _extends({}, props, {
+        stickyContext: stickyContext
+      }));
+    });
+  }
+
+  WithStickyContext.displayName = "WithStickyContext(".concat((0, _reactDisplayName["default"])(WrappedComponent), ")");
+  (0, _hoistNonReactStatics["default"])(WithStickyContext, WrappedComponent);
+  return WithStickyContext;
+}

package/dist/progress-styles.js

@@ -1 +1,31 @@
-Object.defineProperty(exports,"__esModule",{value:true});exports.applyProgressAttr=applyProgressAttr;exports.computeProgressStyles=computeProgressStyles;exports.PROGRESS_ATTR_NAME=void 0;var _styledComponents=require("styled-components");var PROGRESS_ATTR_NAME="data-sticky-progress";exports.PROGRESS_ATTR_NAME=PROGRESS_ATTR_NAME;function applyProgressAttr(elem,percent){if(percent){var value=""+Math.floor(percent*100);elem.setAttribute(PROGRESS_ATTR_NAME,value);}else{elem.removeAttribute(PROGRESS_ATTR_NAME);}}function computeProgressStyles(computer){var progressArr=new Array(101).fill(null);return progressArr.map(function(_,progress){var percent=progress/100;var attrSelector="["+PROGRESS_ATTR_NAME+"=\""+progress+"\"]";return(0,_styledComponents.css)(["&","{",";}"],attrSelector,computer(percent));});}
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.applyProgressAttr = applyProgressAttr;
+exports.computeProgressStyles = computeProgressStyles;
+exports.PROGRESS_ATTR_NAME = void 0;
+
+var _styledComponents = require("styled-components");
+
+var PROGRESS_ATTR_NAME = "data-sticky-progress";
+exports.PROGRESS_ATTR_NAME = PROGRESS_ATTR_NAME;
+
+function applyProgressAttr(elem, percent) {
+  if (percent) {
+    var value = "".concat(Math.floor(percent * 100));
+    elem.setAttribute(PROGRESS_ATTR_NAME, value);
+  } else {
+    elem.removeAttribute(PROGRESS_ATTR_NAME);
+  }
+}
+
+function computeProgressStyles(computer) {
+  var progressArr = new Array(101).fill(null);
+  return progressArr.map(function (_, progress) {
+    var percent = progress / 100;
+    var attrSelector = "[".concat(PROGRESS_ATTR_NAME, "=\"").concat(progress, "\"]");
+    return (0, _styledComponents.css)(["&", "{", ";}"], attrSelector, computer(percent));
+  });
+}

package/dist/selectors.js

@@ -1 +1,37 @@
-Object.defineProperty(exports,"__esModule",{value:true});exports.selectors=exports.CONTAINS_STICKY_CLASSNAME=exports.STICKY_CLASS_NAME=void 0;var _styledComponents=require("styled-components");var STICKY_CLASS_NAME="tc-sticky";exports.STICKY_CLASS_NAME=STICKY_CLASS_NAME;var CONTAINS_STICKY_CLASSNAME="contains-"+STICKY_CLASS_NAME;exports.CONTAINS_STICKY_CLASSNAME=CONTAINS_STICKY_CLASSNAME;var sticky=function sticky(styles){return(0,_styledComponents.css)(["&.","{",";}"],STICKY_CLASS_NAME,styles);};var containsSticky=function containsSticky(styles){return(0,_styledComponents.css)(["&.","{",";}"],CONTAINS_STICKY_CLASSNAME,styles);};var sizer=function sizer(styles){return(0,_styledComponents.css)(["[data-tc-sticky-sizer]{",";}"],styles);};var stickySizer=function stickySizer(styles){return sticky(sizer(styles));};var selectors={sticky:sticky,containsSticky:containsSticky,sizer:sizer,stickySizer:stickySizer};exports.selectors=selectors;
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.selectors = exports.CONTAINS_STICKY_CLASSNAME = exports.STICKY_CLASS_NAME = void 0;
+
+var _styledComponents = require("styled-components");
+
+var STICKY_CLASS_NAME = "tc-sticky";
+exports.STICKY_CLASS_NAME = STICKY_CLASS_NAME;
+var CONTAINS_STICKY_CLASSNAME = "contains-".concat(STICKY_CLASS_NAME);
+exports.CONTAINS_STICKY_CLASSNAME = CONTAINS_STICKY_CLASSNAME;
+
+var sticky = function sticky(styles) {
+  return (0, _styledComponents.css)(["&.", "{", ";}"], STICKY_CLASS_NAME, styles);
+};
+
+var containsSticky = function containsSticky(styles) {
+  return (0, _styledComponents.css)(["&.", "{", ";}"], CONTAINS_STICKY_CLASSNAME, styles);
+};
+
+var sizer = function sizer(styles) {
+  return (0, _styledComponents.css)(["[data-tc-sticky-sizer]{", ";}"], styles);
+};
+
+var stickySizer = function stickySizer(styles) {
+  return sticky(sizer(styles));
+};
+
+var selectors = {
+  sticky: sticky,
+  containsSticky: containsSticky,
+  sizer: sizer,
+  stickySizer: stickySizer
+};
+exports.selectors = selectors;

package/dist/sticky.js

@@ -1 +1,327 @@
-var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});Object.defineProperty(exports,"mediaQuery",{enumerable:true,get:function get(){return _util.mediaQuery;}});Object.defineProperty(exports,"StickyProvider",{enumerable:true,get:function get(){return _context.StickyProvider;}});Object.defineProperty(exports,"computeProgressStyles",{enumerable:true,get:function get(){return _progressStyles.computeProgressStyles;}});Object.defineProperty(exports,"PROGRESS_ATTR_NAME",{enumerable:true,get:function get(){return _progressStyles.PROGRESS_ATTR_NAME;}});Object.defineProperty(exports,"STICKY_CLASS_NAME",{enumerable:true,get:function get(){return _selectors.STICKY_CLASS_NAME;}});Object.defineProperty(exports,"selectors",{enumerable:true,get:function get(){return _selectors.selectors;}});exports.default=exports.UnwrappedSticky=void 0;var _defineProperty2=_interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));var _classCallCheck2=_interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));var _createClass2=_interopRequireDefault(require("@babel/runtime/helpers/createClass"));var _assertThisInitialized2=_interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));var _inherits2=_interopRequireDefault(require("@babel/runtime/helpers/inherits"));var _possibleConstructorReturn2=_interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));var _getPrototypeOf2=_interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));var _react=_interopRequireWildcard(require("react"));var _propTypes=_interopRequireDefault(require("prop-types"));var _util=require("./util");var _context=require("./context");var _progressStyles=require("./progress-styles");var _selectors=require("./selectors");var _jsxFileName="/home/circleci/project/packages/sticky/src/sticky.js";function _getRequireWildcardCache(nodeInterop){if(typeof WeakMap!=="function")return null;var cacheBabelInterop=new WeakMap();var cacheNodeInterop=new WeakMap();return(_getRequireWildcardCache=function _getRequireWildcardCache(nodeInterop){return nodeInterop?cacheNodeInterop:cacheBabelInterop;})(nodeInterop);}function _interopRequireWildcard(obj,nodeInterop){if(!nodeInterop&&obj&&obj.__esModule){return obj;}if(obj===null||typeof obj!=="object"&&typeof obj!=="function"){return{default:obj};}var cache=_getRequireWildcardCache(nodeInterop);if(cache&&cache.has(obj)){return cache.get(obj);}var newObj={};var hasPropertyDescriptor=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var key in obj){if(key!=="default"&&Object.prototype.hasOwnProperty.call(obj,key)){var desc=hasPropertyDescriptor?Object.getOwnPropertyDescriptor(obj,key):null;if(desc&&(desc.get||desc.set)){Object.defineProperty(newObj,key,desc);}else{newObj[key]=obj[key];}}}newObj.default=obj;if(cache){cache.set(obj,newObj);}return newObj;}function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);if(enumerableOnly){symbols=symbols.filter(function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable;});}keys.push.apply(keys,symbols);}return keys;}function _objectSpread(target){for(var i=1;i<arguments.length;i++){var source=arguments[i]!=null?arguments[i]:{};if(i%2){ownKeys(Object(source),true).forEach(function(key){(0,_defineProperty2.default)(target,key,source[key]);});}else if(Object.getOwnPropertyDescriptors){Object.defineProperties(target,Object.getOwnPropertyDescriptors(source));}else{ownKeys(Object(source)).forEach(function(key){Object.defineProperty(target,key,Object.getOwnPropertyDescriptor(source,key));});}}return target;}function _createSuper(Derived){var hasNativeReflectConstruct=_isNativeReflectConstruct();return function _createSuperInternal(){var Super=(0,_getPrototypeOf2.default)(Derived),result;if(hasNativeReflectConstruct){var NewTarget=(0,_getPrototypeOf2.default)(this).constructor;result=Reflect.construct(Super,arguments,NewTarget);}else{result=Super.apply(this,arguments);}return(0,_possibleConstructorReturn2.default)(this,result);};}function _isNativeReflectConstruct(){if(typeof Reflect==="undefined"||!Reflect.construct)return false;if(Reflect.construct.sham)return false;if(typeof Proxy==="function")return true;try{Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));return true;}catch(e){return false;}}var UnwrappedSticky=function(_Component){(0,_inherits2.default)(UnwrappedSticky,_Component);var _super=_createSuper(UnwrappedSticky);function UnwrappedSticky(props){var _this;(0,_classCallCheck2.default)(this,UnwrappedSticky);_this=_super.call(this,props);_this.updateSticky=_this.updateSticky.bind((0,_assertThisInitialized2.default)(_this));_this.updateStickyOnResize=_this.updateStickyOnResize.bind((0,_assertThisInitialized2.default)(_this));_this.createContainerRef=_this.createContainerRef.bind((0,_assertThisInitialized2.default)(_this));_this.isSticky=false;return _this;}(0,_createClass2.default)(UnwrappedSticky,[{key:"componentDidMount",value:function componentDidMount(){window.addEventListener("scroll",this.updateSticky);window.addEventListener("resize",this.updateStickyOnResize);this.updateSticky();}},{key:"componentDidUpdate",value:function componentDidUpdate(){delete this.placeholderBox;if(this.isSticky){this.setSticky(false);}this.updateSticky();}},{key:"componentWillUnmount",value:function componentWillUnmount(){window.removeEventListener("scroll",this.updateSticky);window.removeEventListener("resize",this.updateStickyOnResize);if(this.isSticky){this.setSticky(false);}}},{key:"setSticky",value:function setSticky(shouldBeSticky){var placeholder=this.placeholder,container=this.container,component=this.component,sizer=this.sizer;if(!placeholder||!container||!component||!sizer){return;}var _this$props=this.props,stickyContext=_this$props.stickyContext,zIndex=_this$props.zIndex;var _stickyContext$node=stickyContext.node,node=_stickyContext$node===void 0?document.body:_stickyContext$node;this.isSticky=shouldBeSticky;if(shouldBeSticky){var styles=window.getComputedStyle(component);container.style.cssText+="\n        top: "+stickyContext.top+"px;\n        z-index: "+zIndex+";\n        position: fixed;\n        left: 0;\n        width: 100%;\n        transform: translateY(-"+styles.marginTop+"); \n      ";component.classList.add(_selectors.STICKY_CLASS_NAME);node.appendChild(container);placeholder.style.cssText+="\n        margin-top: "+(styles.marginTop||0)+";\n        margin-bottom: "+(styles.marginBottom||0)+";\n        height: "+(styles.height||0)+";\n        display: block;\n      ";placeholder.parentNode.classList.add(_selectors.CONTAINS_STICKY_CLASSNAME);this.updateSizer();}else{component.classList.remove(_selectors.STICKY_CLASS_NAME);placeholder.parentNode.classList.remove(_selectors.CONTAINS_STICKY_CLASSNAME);placeholder.parentNode.insertBefore(container,placeholder.nextSibling);placeholder.style.display="none";container.setAttribute("style","");sizer.setAttribute("style","");}}},{key:"setScrollProgressPercent",value:function setScrollProgressPercent(percent){if(percent===this.placeholderProgress){return;}this.placeholderProgress=percent;(0,_progressStyles.applyProgressAttr)(this.component,percent);}},{key:"doesStickyNeedUpdating",value:function doesStickyNeedUpdating(shouldBeSticky){return shouldBeSticky!==this.isSticky;}},{key:"createContainerRef",value:function createContainerRef(node){this.container=node;if(node){this.component=node.firstElementChild;this.sizer=this.component.firstElementChild;this.placeholder=this.container.previousSibling;this.updateSticky();}else{delete this.component;delete this.sizer;delete this.placeholder;}}},{key:"updateSticky",value:function updateSticky(){var _this$props2=this.props,stickyContext=_this$props2.stickyContext,shouldBeSticky=_this$props2.shouldBeSticky;var component=this.component,placeholder=this.placeholder,isSticky=this.isSticky;if(!placeholder||!component){return;}var shouldCurrentlyBeSticky=shouldBeSticky()&&(0,_util.isOutOfView)(isSticky?placeholder:component,stickyContext.top);if(this.doesStickyNeedUpdating(shouldCurrentlyBeSticky)){this.setSticky(shouldCurrentlyBeSticky);}this.trackScrollProgress();}},{key:"trackScrollProgress",value:function trackScrollProgress(){var isSticky=this.isSticky;var stickyContext=this.props.stickyContext;if(!isSticky){delete this.placeholderBox;this.setScrollProgressPercent(0);return;}if(!this.placeholderBox){this.placeholderBox={top:(0,_util.getTopFromBody)(this.placeholder),height:this.placeholder.offsetHeight};}var _this$placeholderBox=this.placeholderBox,top=_this$placeholderBox.top,height=_this$placeholderBox.height;var distance=(top-window.pageYOffset-stickyContext.top)*-1;var percent=Math.max(0,Math.min(1,distance/height));this.setScrollProgressPercent(percent);}},{key:"updateStickyOnResize",value:function updateStickyOnResize(){delete this.placeholderBox;this.updateSticky();this.updateSizer();}},{key:"updateSizer",value:function updateSizer(){var sizer=this.sizer,placeholder=this.placeholder,isSticky=this.isSticky;if(isSticky){var rect=placeholder.getBoundingClientRect();sizer.style.cssText+="\n        width: "+rect.width+"px;\n        margin-left: "+rect.left+"px;\n        height: 100%;\n        box-sizing: border-box;\n      ";}}},{key:"render",value:function render(){var _this$props3=this.props,Component=_this$props3.Component,style=_this$props3.style,children=_this$props3.children,className=_this$props3.className;return _react.default.createElement(_react.default.Fragment,null,_react.default.createElement("div",{style:{display:"none"},"data-tc-sticky-placeholder":true,__source:{fileName:_jsxFileName,lineNumber:195,columnNumber:9}}),_react.default.createElement("div",{"data-tc-sticky-container":true,ref:this.createContainerRef,__source:{fileName:_jsxFileName,lineNumber:196,columnNumber:9}},_react.default.createElement(Component,{className:className,style:style,__source:{fileName:_jsxFileName,lineNumber:197,columnNumber:11}},_react.default.createElement("div",{"data-tc-sticky-sizer":true,__source:{fileName:_jsxFileName,lineNumber:198,columnNumber:13}},children))));}}]);return UnwrappedSticky;}(_react.Component);exports.UnwrappedSticky=UnwrappedSticky;UnwrappedSticky.displayName="Sticky";UnwrappedSticky.propTypes={Component:_propTypes.default.elementType,style:_propTypes.default.object,className:_propTypes.default.string,children:_propTypes.default.node,stickyContext:_propTypes.default.shape({top:_propTypes.default.number.isRequired,node:_propTypes.default.object}),zIndex:_propTypes.default.string,shouldBeSticky:_propTypes.default.func};UnwrappedSticky.defaultProps={Component:"div",className:"",children:null,stickyContext:_objectSpread({},_context.defaultContext),style:{},zIndex:"999",shouldBeSticky:function shouldBeSticky(){return true;}};var Sticky=(0,_context.withStickyContext)(UnwrappedSticky);var _default=Sticky;exports.default=_default;
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "mediaQuery", {
+  enumerable: true,
+  get: function get() {
+    return _util.mediaQuery;
+  }
+});
+Object.defineProperty(exports, "StickyProvider", {
+  enumerable: true,
+  get: function get() {
+    return _context.StickyProvider;
+  }
+});
+Object.defineProperty(exports, "computeProgressStyles", {
+  enumerable: true,
+  get: function get() {
+    return _progressStyles.computeProgressStyles;
+  }
+});
+Object.defineProperty(exports, "PROGRESS_ATTR_NAME", {
+  enumerable: true,
+  get: function get() {
+    return _progressStyles.PROGRESS_ATTR_NAME;
+  }
+});
+Object.defineProperty(exports, "STICKY_CLASS_NAME", {
+  enumerable: true,
+  get: function get() {
+    return _selectors.STICKY_CLASS_NAME;
+  }
+});
+Object.defineProperty(exports, "selectors", {
+  enumerable: true,
+  get: function get() {
+    return _selectors.selectors;
+  }
+});
+exports["default"] = exports.UnwrappedSticky = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _util = require("./util");
+
+var _context = require("./context");
+
+var _progressStyles = require("./progress-styles");
+
+var _selectors = require("./selectors");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
+
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
+
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+
+var UnwrappedSticky = /*#__PURE__*/function (_Component) {
+  _inherits(UnwrappedSticky, _Component);
+
+  var _super = _createSuper(UnwrappedSticky);
+
+  function UnwrappedSticky(props) {
+    var _this;
+
+    _classCallCheck(this, UnwrappedSticky);
+
+    _this = _super.call(this, props);
+    _this.updateSticky = _this.updateSticky.bind(_assertThisInitialized(_this));
+    _this.updateStickyOnResize = _this.updateStickyOnResize.bind(_assertThisInitialized(_this));
+    _this.createContainerRef = _this.createContainerRef.bind(_assertThisInitialized(_this));
+    _this.isSticky = false;
+    return _this;
+  }
+
+  _createClass(UnwrappedSticky, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      window.addEventListener("scroll", this.updateSticky);
+      window.addEventListener("resize", this.updateStickyOnResize);
+      this.updateSticky();
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate() {
+      delete this.placeholderBox;
+
+      if (this.isSticky) {
+        this.setSticky(false);
+      }
+
+      this.updateSticky();
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      window.removeEventListener("scroll", this.updateSticky);
+      window.removeEventListener("resize", this.updateStickyOnResize);
+
+      if (this.isSticky) {
+        this.setSticky(false);
+      }
+    }
+  }, {
+    key: "setSticky",
+    value: function setSticky(shouldBeSticky) {
+      var placeholder = this.placeholder,
+          container = this.container,
+          component = this.component,
+          sizer = this.sizer;
+
+      if (!placeholder || !container || !component || !sizer) {
+        return;
+      }
+
+      var _this$props = this.props,
+          stickyContext = _this$props.stickyContext,
+          zIndex = _this$props.zIndex;
+      var _stickyContext$node = stickyContext.node,
+          node = _stickyContext$node === void 0 ? document.body : _stickyContext$node;
+      this.isSticky = shouldBeSticky;
+
+      if (shouldBeSticky) {
+        var styles = window.getComputedStyle(component);
+        container.style.cssText += "\n        top: ".concat(stickyContext.top, "px;\n        z-index: ").concat(zIndex, ";\n        position: fixed;\n        left: 0;\n        width: 100%;\n        transform: translateY(-").concat(styles.marginTop, "); \n      ");
+        component.classList.add(_selectors.STICKY_CLASS_NAME);
+        node.appendChild(container);
+        placeholder.style.cssText += "\n        margin-top: ".concat(styles.marginTop || 0, ";\n        margin-bottom: ").concat(styles.marginBottom || 0, ";\n        height: ").concat(styles.height || 0, ";\n        display: block;\n      ");
+        placeholder.parentNode.classList.add(_selectors.CONTAINS_STICKY_CLASSNAME);
+        this.updateSizer();
+      } else {
+        component.classList.remove(_selectors.STICKY_CLASS_NAME);
+        placeholder.parentNode.classList.remove(_selectors.CONTAINS_STICKY_CLASSNAME);
+        placeholder.parentNode.insertBefore(container, placeholder.nextSibling);
+        placeholder.style.display = "none";
+        container.setAttribute("style", "");
+        sizer.setAttribute("style", "");
+      }
+    }
+  }, {
+    key: "setScrollProgressPercent",
+    value: function setScrollProgressPercent(percent) {
+      if (percent === this.placeholderProgress) {
+        return;
+      }
+
+      this.placeholderProgress = percent;
+      (0, _progressStyles.applyProgressAttr)(this.component, percent);
+    }
+  }, {
+    key: "doesStickyNeedUpdating",
+    value: function doesStickyNeedUpdating(shouldBeSticky) {
+      return shouldBeSticky !== this.isSticky;
+    }
+  }, {
+    key: "createContainerRef",
+    value: function createContainerRef(node) {
+      this.container = node;
+
+      if (node) {
+        this.component = node.firstElementChild;
+        this.sizer = this.component.firstElementChild;
+        this.placeholder = this.container.previousSibling;
+        this.updateSticky();
+      } else {
+        delete this.component;
+        delete this.sizer;
+        delete this.placeholder;
+      }
+    }
+  }, {
+    key: "updateSticky",
+    value: function updateSticky() {
+      var _this$props2 = this.props,
+          stickyContext = _this$props2.stickyContext,
+          shouldBeSticky = _this$props2.shouldBeSticky;
+      var component = this.component,
+          placeholder = this.placeholder,
+          isSticky = this.isSticky;
+
+      if (!placeholder || !component) {
+        return;
+      }
+
+      var shouldCurrentlyBeSticky = shouldBeSticky() && (0, _util.isOutOfView)(isSticky ? placeholder : component, stickyContext.top);
+
+      if (this.doesStickyNeedUpdating(shouldCurrentlyBeSticky)) {
+        this.setSticky(shouldCurrentlyBeSticky);
+      }
+
+      this.trackScrollProgress();
+    }
+  }, {
+    key: "trackScrollProgress",
+    value: function trackScrollProgress() {
+      var isSticky = this.isSticky;
+      var stickyContext = this.props.stickyContext;
+
+      if (!isSticky) {
+        delete this.placeholderBox;
+        this.setScrollProgressPercent(0);
+        return;
+      }
+
+      if (!this.placeholderBox) {
+        this.placeholderBox = {
+          top: (0, _util.getTopFromBody)(this.placeholder),
+          height: this.placeholder.offsetHeight
+        };
+      }
+
+      var _this$placeholderBox = this.placeholderBox,
+          top = _this$placeholderBox.top,
+          height = _this$placeholderBox.height;
+      var distance = (top - window.pageYOffset - stickyContext.top) * -1;
+      var percent = Math.max(0, Math.min(1, distance / height));
+      this.setScrollProgressPercent(percent);
+    }
+  }, {
+    key: "updateStickyOnResize",
+    value: function updateStickyOnResize() {
+      delete this.placeholderBox;
+      this.updateSticky();
+      this.updateSizer();
+    }
+  }, {
+    key: "updateSizer",
+    value: function updateSizer() {
+      var sizer = this.sizer,
+          placeholder = this.placeholder,
+          isSticky = this.isSticky;
+
+      if (isSticky) {
+        var rect = placeholder.getBoundingClientRect();
+        sizer.style.cssText += "\n        width: ".concat(rect.width, "px;\n        margin-left: ").concat(rect.left, "px;\n        height: 100%;\n        box-sizing: border-box;\n      ");
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props3 = this.props,
+          Component = _this$props3.Component,
+          style = _this$props3.style,
+          children = _this$props3.children,
+          className = _this$props3.className;
+      return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
+        style: {
+          display: "none"
+        },
+        "data-tc-sticky-placeholder": true
+      }), /*#__PURE__*/_react["default"].createElement("div", {
+        "data-tc-sticky-container": true,
+        ref: this.createContainerRef
+      }, /*#__PURE__*/_react["default"].createElement(Component, {
+        className: className,
+        style: style
+      }, /*#__PURE__*/_react["default"].createElement("div", {
+        "data-tc-sticky-sizer": true
+      }, children))));
+    }
+  }]);
+
+  return UnwrappedSticky;
+}(_react.Component);
+
+exports.UnwrappedSticky = UnwrappedSticky;
+UnwrappedSticky.displayName = "Sticky";
+UnwrappedSticky.propTypes = {
+  // @todo Update prop-types and eslint to avoid needing to disable this rule
+  // eslint-disable-next-line react/no-typos
+  Component: _propTypes["default"].elementType,
+  style: _propTypes["default"].object,
+  className: _propTypes["default"].string,
+  children: _propTypes["default"].node,
+  stickyContext: _propTypes["default"].shape({
+    top: _propTypes["default"].number.isRequired,
+    node: _propTypes["default"].object
+  }),
+  zIndex: _propTypes["default"].string,
+  shouldBeSticky: _propTypes["default"].func
+};
+UnwrappedSticky.defaultProps = {
+  Component: "div",
+  className: "",
+  children: null,
+  stickyContext: _objectSpread({}, _context.defaultContext),
+  style: {},
+  zIndex: "999",
+  shouldBeSticky: function shouldBeSticky() {
+    return true;
+  }
+};
+var Sticky = (0, _context.withStickyContext)(UnwrappedSticky);
+var _default = Sticky;
+exports["default"] = _default;

package/dist/util.js

@@ -1 +1,41 @@
-Object.defineProperty(exports,"__esModule",{value:true});exports.mediaQuery=mediaQuery;exports.isOutOfView=exports.getTopFromBody=exports.getTop=void 0;var getTop=function getTop(node){return node.getBoundingClientRect().top;};exports.getTop=getTop;var getTopFromBody=function getTopFromBody(node){return(getTop(node)||0)+window.pageYOffset;};exports.getTopFromBody=getTopFromBody;var isOutOfView=function isOutOfView(node,top){return getTop(node)<=top;};exports.isOutOfView=isOutOfView;var matchMedia=typeof window!=="undefined"&&window.matchMedia||function(){return{matches:true};};function mediaQuery(query){var mql=matchMedia(query);return function(){return mql.matches;};}
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.mediaQuery = mediaQuery;
+exports.isOutOfView = exports.getTopFromBody = exports.getTop = void 0;
+
+/* eslint-disable import/prefer-default-export,prefer-destructuring */
+
+/* eslint-env browser */
+var getTop = function getTop(node) {
+  return node.getBoundingClientRect().top;
+};
+
+exports.getTop = getTop;
+
+var getTopFromBody = function getTopFromBody(node) {
+  return (getTop(node) || 0) + window.pageYOffset;
+};
+
+exports.getTopFromBody = getTopFromBody;
+
+var isOutOfView = function isOutOfView(node, top) {
+  return getTop(node) <= top;
+};
+
+exports.isOutOfView = isOutOfView;
+
+var matchMedia = typeof window !== "undefined" && window.matchMedia || function () {
+  return {
+    matches: true
+  };
+};
+
+function mediaQuery(query) {
+  var mql = matchMedia(query);
+  return function () {
+    return mql.matches;
+  };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@times-components/sticky",
-  "version": "0.4.3",
+  "version": "0.5.0",
   "description": "Attach children to viewport on scroll (web only)",
   "main": "dist/sticky",
   "dev": "src/sticky",
@@ -9,7 +9,7 @@
     "fmt": "eslint . --fix && prettier --write '**/*.*'",
     "prettier:diff": "prettier --list-different '**/*.*'",
     "lint": "eslint . && stylelint . && yarn prettier:diff && yarn depcheck",
-    "test:web": "jest --config='./__tests__/web/jest.config.js'",
+    "test:web": "jest --config='./__tests__/jest.config.js'",
     "prepublishOnly": "yarn transpile && yarn bundle",
     "cleanup-dist": "rm -rf dist",
     "transpile": "yarn cleanup-dist && babel src -d dist",
@@ -21,10 +21,7 @@
     "url": "git+https://github.com/newsuk/times-components.git"
   },
   "keywords": [
-    "react-native-web",
     "react",
-    "native",
-    "web",
     "sticky",
     "component"
   ],
@@ -42,10 +39,10 @@
   "devDependencies": {
     "@babel/core": "7.4.4",
     "@times-components/eslint-config-thetimes": "0.8.18",
-    "@times-components/jest-configurator": "2.8.0",
-    "@times-components/storybook": "4.3.1",
-    "@times-components/ts-styleguide": "1.36.7",
-    "@times-components/webpack-configurator": "2.0.29",
+    "@times-components/jest-configurator-web": "0.8.0",
+    "@times-components/storybook": "4.5.0",
+    "@times-components/ts-styleguide": "1.37.0",
+    "@times-components/webpack-configurator": "2.1.0",
     "babel-jest": "24.8.0",
     "babel-loader": "8.0.5",
     "eslint": "5.9.0",
@@ -53,13 +50,8 @@
     "prettier": "1.14.3",
     "react": "16.9.0",
     "react-dom": "16.9.0",
-    "react-native": "0.61.5",
     "stylelint": "9.4.0",
-    "stylelint-config-recommended": "2.1.0",
-    "stylelint-config-styled-components": "0.1.1",
-    "stylelint-processor-styled-components": "1.3.2",
-    "webpack": "4.30.0",
-    "webpack-cli": "3.3.1"
+    "webpack": "4.30.0"
   },
   "resolutions": {
     "react": "16.9.0",
@@ -67,12 +59,10 @@
   },
   "peerDependencies": {
     "react": ">=16.9",
-    "react-dom": ">=16.9",
-    "react-native": ">=0.59",
-    "react-native-web": "0.11.4"
+    "react-dom": ">=16.9"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "358bc4e3a3e654126c6b3af629dd1c6f074cc0cd"
+  "gitHead": "fe2f12b7448a88662c53f840772282cd97756c5c"
 }

package/rnw.js

@@ -1 +1 @@
-module.exports=function(e){var t={};function r(n){if(t[n])return t[n].exports;var i=t[n]={i:n,l:!1,exports:{}};return e[n].call(i.exports,i,i.exports,r),i.l=!0,i.exports}return r.m=e,r.c=t,r.d=function(e,t,n){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var i in e)r.d(n,i,function(t){return e[t]}.bind(null,i));return n},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="",r(r.s=12)}([function(e,t){e.exports=require("@babel/runtime/helpers/interopRequireDefault")},function(e,t){e.exports=require("@babel/runtime/helpers/defineProperty")},function(e,t){e.exports=require("@babel/runtime/helpers/classCallCheck")},function(e,t){e.exports=require("@babel/runtime/helpers/createClass")},function(e,t){e.exports=require("@babel/runtime/helpers/assertThisInitialized")},function(e,t){e.exports=require("@babel/runtime/helpers/inherits")},function(e,t){e.exports=require("@babel/runtime/helpers/possibleConstructorReturn")},function(e,t){e.exports=require("@babel/runtime/helpers/getPrototypeOf")},function(e,t){e.exports=require("react")},function(e,t){e.exports=require("prop-types")},function(e,t){Object.defineProperty(t,"__esModule",{value:!0}),t.mediaQuery=function(e){var t=n(e);return function(){return t.matches}},t.isOutOfView=t.getTopFromBody=t.getTop=void 0;var r=function(e){return e.getBoundingClientRect().top};t.getTop=r;t.getTopFromBody=function(e){return(r(e)||0)+window.pageYOffset};t.isOutOfView=function(e,t){return r(e)<=t};var n="undefined"!=typeof window&&window.matchMedia||function(){return{matches:!0}}},function(e,t){e.exports=require("styled-components")},function(e,t,r){var n=r(0);Object.defineProperty(t,"__esModule",{value:!0}),Object.defineProperty(t,"mediaQuery",{enumerable:!0,get:function(){return p.mediaQuery}}),Object.defineProperty(t,"StickyProvider",{enumerable:!0,get:function(){return d.StickyProvider}}),Object.defineProperty(t,"computeProgressStyles",{enumerable:!0,get:function(){return y.computeProgressStyles}}),Object.defineProperty(t,"PROGRESS_ATTR_NAME",{enumerable:!0,get:function(){return y.PROGRESS_ATTR_NAME}}),Object.defineProperty(t,"STICKY_CLASS_NAME",{enumerable:!0,get:function(){return h.STICKY_CLASS_NAME}}),Object.defineProperty(t,"selectors",{enumerable:!0,get:function(){return h.selectors}}),t.default=t.UnwrappedSticky=void 0;var i=n(r(1)),o=n(r(2)),c=n(r(3)),s=n(r(4)),u=n(r(5)),a=n(r(6)),l=n(r(7)),f=function(e,t){if(!t&&e&&e.__esModule)return e;if(null===e||"object"!=typeof e&&"function"!=typeof e)return{default:e};var r=v(t);if(r&&r.has(e))return r.get(e);var n={},i=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var o in e)if("default"!==o&&Object.prototype.hasOwnProperty.call(e,o)){var c=i?Object.getOwnPropertyDescriptor(e,o):null;c&&(c.get||c.set)?Object.defineProperty(n,o,c):n[o]=e[o]}n.default=e,r&&r.set(e,n);return n}(r(8)),p=(n(r(9)),r(10)),d=r(13),y=r(18),h=r(19);function v(e){if("function"!=typeof WeakMap)return null;var t=new WeakMap,r=new WeakMap;return(v=function(e){return e?r:t})(e)}function b(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function S(e){var t=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}();return function(){var r,n=(0,l.default)(e);if(t){var i=(0,l.default)(this).constructor;r=Reflect.construct(n,arguments,i)}else r=n.apply(this,arguments);return(0,a.default)(this,r)}}var m=function(e){(0,u.default)(r,e);var t=S(r);function r(e){var n;return(0,o.default)(this,r),(n=t.call(this,e)).updateSticky=n.updateSticky.bind((0,s.default)(n)),n.updateStickyOnResize=n.updateStickyOnResize.bind((0,s.default)(n)),n.createContainerRef=n.createContainerRef.bind((0,s.default)(n)),n.isSticky=!1,n}return(0,c.default)(r,[{key:"componentDidMount",value:function(){window.addEventListener("scroll",this.updateSticky),window.addEventListener("resize",this.updateStickyOnResize),this.updateSticky()}},{key:"componentDidUpdate",value:function(){delete this.placeholderBox,this.isSticky&&this.setSticky(!1),this.updateSticky()}},{key:"componentWillUnmount",value:function(){window.removeEventListener("scroll",this.updateSticky),window.removeEventListener("resize",this.updateStickyOnResize),this.isSticky&&this.setSticky(!1)}},{key:"setSticky",value:function(e){var t=this.placeholder,r=this.container,n=this.component,i=this.sizer;if(t&&r&&n&&i){var o=this.props,c=o.stickyContext,s=o.zIndex,u=c.node,a=void 0===u?document.body:u;if(this.isSticky=e,e){var l=window.getComputedStyle(n);r.style.cssText+="\n        top: "+c.top+"px;\n        z-index: "+s+";\n        position: fixed;\n        left: 0;\n        width: 100%;\n        transform: translateY(-"+l.marginTop+"); \n      ",n.classList.add(h.STICKY_CLASS_NAME),a.appendChild(r),t.style.cssText+="\n        margin-top: "+(l.marginTop||0)+";\n        margin-bottom: "+(l.marginBottom||0)+";\n        height: "+(l.height||0)+";\n        display: block;\n      ",t.parentNode.classList.add(h.CONTAINS_STICKY_CLASSNAME),this.updateSizer()}else n.classList.remove(h.STICKY_CLASS_NAME),t.parentNode.classList.remove(h.CONTAINS_STICKY_CLASSNAME),t.parentNode.insertBefore(r,t.nextSibling),t.style.display="none",r.setAttribute("style",""),i.setAttribute("style","")}}},{key:"setScrollProgressPercent",value:function(e){e!==this.placeholderProgress&&(this.placeholderProgress=e,(0,y.applyProgressAttr)(this.component,e))}},{key:"doesStickyNeedUpdating",value:function(e){return e!==this.isSticky}},{key:"createContainerRef",value:function(e){this.container=e,e?(this.component=e.firstElementChild,this.sizer=this.component.firstElementChild,this.placeholder=this.container.previousSibling,this.updateSticky()):(delete this.component,delete this.sizer,delete this.placeholder)}},{key:"updateSticky",value:function(){var e=this.props,t=e.stickyContext,r=e.shouldBeSticky,n=this.component,i=this.placeholder,o=this.isSticky;if(i&&n){var c=r()&&(0,p.isOutOfView)(o?i:n,t.top);this.doesStickyNeedUpdating(c)&&this.setSticky(c),this.trackScrollProgress()}}},{key:"trackScrollProgress",value:function(){var e=this.isSticky,t=this.props.stickyContext;if(!e)return delete this.placeholderBox,void this.setScrollProgressPercent(0);this.placeholderBox||(this.placeholderBox={top:(0,p.getTopFromBody)(this.placeholder),height:this.placeholder.offsetHeight});var r=this.placeholderBox,n=r.top,i=r.height,o=-1*(n-window.pageYOffset-t.top),c=Math.max(0,Math.min(1,o/i));this.setScrollProgressPercent(c)}},{key:"updateStickyOnResize",value:function(){delete this.placeholderBox,this.updateSticky(),this.updateSizer()}},{key:"updateSizer",value:function(){var e=this.sizer,t=this.placeholder;if(this.isSticky){var r=t.getBoundingClientRect();e.style.cssText+="\n        width: "+r.width+"px;\n        margin-left: "+r.left+"px;\n        height: 100%;\n        box-sizing: border-box;\n      "}}},{key:"render",value:function(){var e=this.props,t=e.Component,r=e.style,n=e.children,i=e.className;return f.default.createElement(f.default.Fragment,null,f.default.createElement("div",{style:{display:"none"},"data-tc-sticky-placeholder":!0}),f.default.createElement("div",{"data-tc-sticky-container":!0,ref:this.createContainerRef},f.default.createElement(t,{className:i,style:r},f.default.createElement("div",{"data-tc-sticky-sizer":!0},n))))}}]),r}(f.Component);t.UnwrappedSticky=m,m.displayName="Sticky",m.defaultProps={Component:"div",className:"",children:null,stickyContext:function(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?b(Object(r),!0).forEach((function(t){(0,i.default)(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):b(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}({},d.defaultContext),style:{},zIndex:"999",shouldBeSticky:function(){return!0}};var O=(0,d.withStickyContext)(m);t.default=O},function(e,t,r){var n=r(0);Object.defineProperty(t,"__esModule",{value:!0}),t.withStickyContext=function(e){function t(t){return d.default.createElement(P,null,(function(r){return d.default.createElement(e,(0,i.default)({},t,{stickyContext:r}))}))}return t.displayName="WithStickyContext("+(0,y.default)(e)+")",(0,h.default)(t,e),t},t.StickyProvider=t.defaultContext=void 0;var i=n(r(14)),o=n(r(15)),c=n(r(1)),s=n(r(2)),u=n(r(3)),a=n(r(4)),l=n(r(5)),f=n(r(6)),p=n(r(7)),d=function(e,t){if(!t&&e&&e.__esModule)return e;if(null===e||"object"!=typeof e&&"function"!=typeof e)return{default:e};var r=b(t);if(r&&r.has(e))return r.get(e);var n={},i=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var o in e)if("default"!==o&&Object.prototype.hasOwnProperty.call(e,o)){var c=i?Object.getOwnPropertyDescriptor(e,o):null;c&&(c.get||c.set)?Object.defineProperty(n,o,c):n[o]=e[o]}n.default=e,r&&r.set(e,n);return n}(r(8)),y=(n(r(9)),n(r(16))),h=n(r(17)),v=r(10);function b(e){if("function"!=typeof WeakMap)return null;var t=new WeakMap,r=new WeakMap;return(b=function(e){return e?r:t})(e)}function S(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function m(e){var t=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}();return function(){var r,n=(0,p.default)(e);if(t){var i=(0,p.default)(this).constructor;r=Reflect.construct(n,arguments,i)}else r=n.apply(this,arguments);return(0,f.default)(this,r)}}var O={top:0};t.defaultContext=O;var k=d.default.createContext(O),g=k.Provider,P=k.Consumer,C=function(e){(0,l.default)(r,e);var t=m(r);function r(e){var n;return(0,s.default)(this,r),(n=t.call(this,e)).state=function(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?S(Object(r),!0).forEach((function(t){(0,c.default)(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):S(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}({},O),n.ref=n.ref.bind((0,a.default)(n)),n.setTop=n.setTop.bind((0,a.default)(n)),n}return(0,u.default)(r,[{key:"componentDidMount",value:function(){window.addEventListener("resize",this.setTop)}},{key:"componentWillUnmount",value:function(){window.removeEventListener("resize",this.setTop)}},{key:"setTop",value:function(){var e=this.state,t=e.top,r=e.node;if(r){var n=Math.round((0,v.getTopFromBody)(r));n!==t&&this.setState({top:n})}}},{key:"ref",value:function(e){this.setState({node:e},this.setTop)}},{key:"render",value:function(){var e=this.props,t=e.Component,r=e.children,n=(0,o.default)(e,["Component","children"]);return d.default.createElement(t,(0,i.default)({},n,{ref:this.ref}),d.default.createElement(g,{value:this.state},r))}}]),r}(d.Component);t.StickyProvider=C,C.defaultProps={Component:"div"}},function(e,t){e.exports=require("@babel/runtime/helpers/extends")},function(e,t){e.exports=require("@babel/runtime/helpers/objectWithoutProperties")},function(e,t){e.exports=require("react-display-name")},function(e,t){e.exports=require("hoist-non-react-statics")},function(e,t,r){Object.defineProperty(t,"__esModule",{value:!0}),t.applyProgressAttr=function(e,t){if(t){var r=""+Math.floor(100*t);e.setAttribute("data-sticky-progress",r)}else e.removeAttribute("data-sticky-progress")},t.computeProgressStyles=function(e){return new Array(101).fill(null).map((function(t,r){var i=r/100,o='[data-sticky-progress="'+r+'"]';return(0,n.css)(["&","{",";}"],o,e(i))}))},t.PROGRESS_ATTR_NAME=void 0;var n=r(11);t.PROGRESS_ATTR_NAME="data-sticky-progress"},function(e,t,r){Object.defineProperty(t,"__esModule",{value:!0}),t.selectors=t.CONTAINS_STICKY_CLASSNAME=t.STICKY_CLASS_NAME=void 0;var n=r(11);t.STICKY_CLASS_NAME="tc-sticky";t.CONTAINS_STICKY_CLASSNAME="contains-tc-sticky";var i=function(e){return(0,n.css)(["&.","{",";}"],"tc-sticky",e)},o=function(e){return(0,n.css)(["[data-tc-sticky-sizer]{",";}"],e)},c={sticky:i,containsSticky:function(e){return(0,n.css)(["&.","{",";}"],"contains-tc-sticky",e)},sizer:o,stickySizer:function(e){return i(o(e))}};t.selectors=c}]);
+module.exports=function(t){var e={};function n(r){if(e[r])return e[r].exports;var o=e[r]={i:r,l:!1,exports:{}};return t[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}return n.m=t,n.c=e,n.d=function(t,e,r){n.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:r})},n.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},n.t=function(t,e){if(1&e&&(t=n(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var o in t)n.d(r,o,function(e){return t[e]}.bind(null,o));return r},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="",n(n.s=5)}([function(t,e){t.exports=require("react")},function(t,e){t.exports=require("styled-components")},function(t,e){t.exports=require("prop-types")},function(t,e){t.exports=require("react-display-name")},function(t,e){t.exports=require("hoist-non-react-statics")},function(t,e,n){"use strict";n.r(e);var r=n(0),o=n.n(r),i=(n(2),function(t){return t.getBoundingClientRect().top}),c=function(t){return(i(t)||0)+window.pageYOffset},s="undefined"!=typeof window&&window.matchMedia||function(){return{matches:!0}};function u(t){var e=s(t);return function(){return e.matches}}var a=n(3),l=n.n(a),f=n(4),p=n.n(f);function y(t){return(y="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}function d(){return(d=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(t[r]=n[r])}return t}).apply(this,arguments)}function h(t,e){if(null==t)return{};var n,r,o=function(t,e){if(null==t)return{};var n,r,o={},i=Object.keys(t);for(r=0;r<i.length;r++)n=i[r],e.indexOf(n)>=0||(o[n]=t[n]);return o}(t,e);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(t);for(r=0;r<i.length;r++)n=i[r],e.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(t,n)&&(o[n]=t[n])}return o}function b(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(t);e&&(r=r.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),n.push.apply(n,r)}return n}function v(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}function m(t,e){for(var n=0;n<e.length;n++){var r=e[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r)}}function O(t,e){return(O=Object.setPrototypeOf||function(t,e){return t.__proto__=e,t})(t,e)}function k(t){var e=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(t){return!1}}();return function(){var n,r=w(t);if(e){var o=w(this).constructor;n=Reflect.construct(r,arguments,o)}else n=r.apply(this,arguments);return S(this,n)}}function S(t,e){return!e||"object"!==y(e)&&"function"!=typeof e?g(t):e}function g(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}function w(t){return(w=Object.setPrototypeOf?Object.getPrototypeOf:function(t){return t.__proto__||Object.getPrototypeOf(t)})(t)}var j={top:0},P=o.a.createContext(j),x=P.Provider,E=P.Consumer,C=function(t){!function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),e&&O(t,e)}(s,t);var e,n,r,i=k(s);function s(t){var e;return function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,s),(e=i.call(this,t)).state=function(t){for(var e=1;e<arguments.length;e++){var n=null!=arguments[e]?arguments[e]:{};e%2?b(Object(n),!0).forEach((function(e){v(t,e,n[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(n)):b(Object(n)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(n,e))}))}return t}({},j),e.ref=e.ref.bind(g(e)),e.setTop=e.setTop.bind(g(e)),e}return e=s,(n=[{key:"componentDidMount",value:function(){window.addEventListener("resize",this.setTop)}},{key:"componentWillUnmount",value:function(){window.removeEventListener("resize",this.setTop)}},{key:"setTop",value:function(){var t=this.state,e=t.top,n=t.node;if(n){var r=Math.round(c(n));r!==e&&this.setState({top:r})}}},{key:"ref",value:function(t){this.setState({node:t},this.setTop)}},{key:"render",value:function(){var t=this.props,e=t.Component,n=t.children,r=h(t,["Component","children"]);return o.a.createElement(e,d({},r,{ref:this.ref}),o.a.createElement(x,{value:this.state},n))}}])&&m(e.prototype,n),r&&m(e,r),s}(r.Component);C.defaultProps={Component:"div"};var R=n(1);function _(t){return new Array(101).fill(null).map((function(e,n){var r=n/100,o="[".concat("data-sticky-progress",'="').concat(n,'"]');return Object(R.css)(["&","{",";}"],o,t(r))}))}var z="contains-".concat("tc-sticky"),T=function(t){return Object(R.css)(["&.","{",";}"],"tc-sticky",t)},B=function(t){return Object(R.css)(["[data-tc-sticky-sizer]{",";}"],t)},M={sticky:T,containsSticky:function(t){return Object(R.css)(["&.","{",";}"],z,t)},sizer:B,stickySizer:function(t){return T(B(t))}};function N(t){return(N="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}function D(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(t);e&&(r=r.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),n.push.apply(n,r)}return n}function L(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}function A(t,e){for(var n=0;n<e.length;n++){var r=e[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r)}}function U(t,e){return(U=Object.setPrototypeOf||function(t,e){return t.__proto__=e,t})(t,e)}function q(t){var e=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(t){return!1}}();return function(){var n,r=W(t);if(e){var o=W(this).constructor;n=Reflect.construct(r,arguments,o)}else n=r.apply(this,arguments);return I(this,n)}}function I(t,e){return!e||"object"!==N(e)&&"function"!=typeof e?Y(t):e}function Y(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}function W(t){return(W=Object.setPrototypeOf?Object.getPrototypeOf:function(t){return t.__proto__||Object.getPrototypeOf(t)})(t)}n.d(e,"UnwrappedSticky",(function(){return F})),n.d(e,"mediaQuery",(function(){return u})),n.d(e,"computeProgressStyles",(function(){return _})),n.d(e,"PROGRESS_ATTR_NAME",(function(){return"data-sticky-progress"})),n.d(e,"selectors",(function(){return M})),n.d(e,"StickyProvider",(function(){return C})),n.d(e,"STICKY_CLASS_NAME",(function(){return"tc-sticky"}));var F=function(t){!function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),e&&U(t,e)}(u,t);var e,n,r,s=q(u);function u(t){var e;return function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,u),(e=s.call(this,t)).updateSticky=e.updateSticky.bind(Y(e)),e.updateStickyOnResize=e.updateStickyOnResize.bind(Y(e)),e.createContainerRef=e.createContainerRef.bind(Y(e)),e.isSticky=!1,e}return e=u,(n=[{key:"componentDidMount",value:function(){window.addEventListener("scroll",this.updateSticky),window.addEventListener("resize",this.updateStickyOnResize),this.updateSticky()}},{key:"componentDidUpdate",value:function(){delete this.placeholderBox,this.isSticky&&this.setSticky(!1),this.updateSticky()}},{key:"componentWillUnmount",value:function(){window.removeEventListener("scroll",this.updateSticky),window.removeEventListener("resize",this.updateStickyOnResize),this.isSticky&&this.setSticky(!1)}},{key:"setSticky",value:function(t){var e=this.placeholder,n=this.container,r=this.component,o=this.sizer;if(e&&n&&r&&o){var i=this.props,c=i.stickyContext,s=i.zIndex,u=c.node,a=void 0===u?document.body:u;if(this.isSticky=t,t){var l=window.getComputedStyle(r);n.style.cssText+="\n        top: ".concat(c.top,"px;\n        z-index: ").concat(s,";\n        position: fixed;\n        left: 0;\n        width: 100%;\n        transform: translateY(-").concat(l.marginTop,"); \n      "),r.classList.add("tc-sticky"),a.appendChild(n),e.style.cssText+="\n        margin-top: ".concat(l.marginTop||0,";\n        margin-bottom: ").concat(l.marginBottom||0,";\n        height: ").concat(l.height||0,";\n        display: block;\n      "),e.parentNode.classList.add(z),this.updateSizer()}else r.classList.remove("tc-sticky"),e.parentNode.classList.remove(z),e.parentNode.insertBefore(n,e.nextSibling),e.style.display="none",n.setAttribute("style",""),o.setAttribute("style","")}}},{key:"setScrollProgressPercent",value:function(t){t!==this.placeholderProgress&&(this.placeholderProgress=t,function(t,e){if(e){var n="".concat(Math.floor(100*e));t.setAttribute("data-sticky-progress",n)}else t.removeAttribute("data-sticky-progress")}(this.component,t))}},{key:"doesStickyNeedUpdating",value:function(t){return t!==this.isSticky}},{key:"createContainerRef",value:function(t){this.container=t,t?(this.component=t.firstElementChild,this.sizer=this.component.firstElementChild,this.placeholder=this.container.previousSibling,this.updateSticky()):(delete this.component,delete this.sizer,delete this.placeholder)}},{key:"updateSticky",value:function(){var t=this.props,e=t.stickyContext,n=t.shouldBeSticky,r=this.component,o=this.placeholder,c=this.isSticky;if(o&&r){var s,u,a=n()&&(s=c?o:r,u=e.top,i(s)<=u);this.doesStickyNeedUpdating(a)&&this.setSticky(a),this.trackScrollProgress()}}},{key:"trackScrollProgress",value:function(){var t=this.isSticky,e=this.props.stickyContext;if(!t)return delete this.placeholderBox,void this.setScrollProgressPercent(0);this.placeholderBox||(this.placeholderBox={top:c(this.placeholder),height:this.placeholder.offsetHeight});var n=this.placeholderBox,r=n.top,o=n.height,i=-1*(r-window.pageYOffset-e.top),s=Math.max(0,Math.min(1,i/o));this.setScrollProgressPercent(s)}},{key:"updateStickyOnResize",value:function(){delete this.placeholderBox,this.updateSticky(),this.updateSizer()}},{key:"updateSizer",value:function(){var t=this.sizer,e=this.placeholder;if(this.isSticky){var n=e.getBoundingClientRect();t.style.cssText+="\n        width: ".concat(n.width,"px;\n        margin-left: ").concat(n.left,"px;\n        height: 100%;\n        box-sizing: border-box;\n      ")}}},{key:"render",value:function(){var t=this.props,e=t.Component,n=t.style,r=t.children,i=t.className;return o.a.createElement(o.a.Fragment,null,o.a.createElement("div",{style:{display:"none"},"data-tc-sticky-placeholder":!0}),o.a.createElement("div",{"data-tc-sticky-container":!0,ref:this.createContainerRef},o.a.createElement(e,{className:i,style:n},o.a.createElement("div",{"data-tc-sticky-sizer":!0},r))))}}])&&A(e.prototype,n),r&&A(e,r),u}(r.Component);F.displayName="Sticky",F.defaultProps={Component:"div",className:"",children:null,stickyContext:function(t){for(var e=1;e<arguments.length;e++){var n=null!=arguments[e]?arguments[e]:{};e%2?D(Object(n),!0).forEach((function(e){L(t,e,n[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(n)):D(Object(n)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(n,e))}))}return t}({},j),style:{},zIndex:"999",shouldBeSticky:function(){return!0}};var G=function(t){function e(e){return o.a.createElement(E,null,(function(n){return o.a.createElement(t,d({},e,{stickyContext:n}))}))}return e.displayName="WithStickyContext(".concat(l()(t),")"),p()(e,t),e}(F);e.default=G}]);