@dhis2-ui/intersection-detector 9.11.0 → 9.11.1-beta.10

package/build/cjs/features/Visibility_notification/index.js

@@ -1,21 +1,22 @@
 "use strict";
 
 var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
-
 (0, _cypressCucumberPreprocessor.Given)('the detector is not intersecting with the root', () => {
   cy.visitStory('IntersectionDetector', 'Out Of View');
-  cy.window().then(win => {
-    cy.wrap(win.onChange).as('onChangeStub').should('be.calledOnce').should('be.calledWith', {
-      isIntersecting: false
-    });
+  cy.window().should(win => expect(win.onChange).to.not.be.undefined);
+  cy.window().its('onChange').as('onChangeStub', {
+    static: true
+  }).should('be.calledOnce').should('be.calledWith', {
+    isIntersecting: false
   });
 });
 (0, _cypressCucumberPreprocessor.Given)('the detector is intersecting with the root', () => {
   cy.visitStory('IntersectionDetector', 'In View');
-  cy.window().then(win => {
-    cy.wrap(win.onChange).as('onChangeStub').should('be.calledOnce').should('be.calledWith', {
-      isIntersecting: true
-    });
+  cy.window().should(win => expect(win.onChange).to.not.be.undefined);
+  cy.window().its('onChange').as('onChangeStub', {
+    static: true
+  }).should('be.calledOnce').should('be.calledWith', {
+    isIntersecting: true
   });
 });
 (0, _cypressCucumberPreprocessor.When)('the user scrolls the detector into view', () => {

package/build/cjs/index.js

@@ -9,5 +9,4 @@ Object.defineProperty(exports, "IntersectionDetector", {
     return _intersectionDetector.IntersectionDetector;
   }
 });
-
 var _intersectionDetector = require("./intersection-detector.js");

package/build/cjs/{intersection-detector.stories.e2e.js → intersection-detector.e2e.stories.js}

@@ -4,21 +4,14 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.OutOfView = exports.InView = void 0;
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _intersectionDetector = require("./intersection-detector.js");
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _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 _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 window.onChange = window.Cypress ? window.Cypress.cy.stub() : () => null;
-var _default = {
+var _default = exports.default = {
   title: 'IntersectionDetector'
 };
-exports.default = _default;
-
 const OutOfView = () => {
   const rootRef = (0, _react.useRef)();
   return /*#__PURE__*/_react.default.createElement("div", {
@@ -47,9 +40,7 @@ const OutOfView = () => {
     }
   })));
 };
-
 exports.OutOfView = OutOfView;
-
 const InView = () => {
   const rootRef = (0, _react.useRef)();
   return /*#__PURE__*/_react.default.createElement("div", {
@@ -78,5 +69,4 @@ const InView = () => {
     }
   }));
 };
-
 exports.InView = InView;

package/build/cjs/intersection-detector.js

@@ -4,19 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.IntersectionDetector = void 0;
-
 var _style = _interopRequireDefault(require("styled-jsx/style"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _react = _interopRequireWildcard(require("react"));
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const IntersectionDetector = _ref => {
   let {
     threshold,
@@ -31,25 +24,26 @@ const IntersectionDetector = _ref => {
   //   so there's no need for re-rendering the (potentially computational
   //   heavy) children.  Also: If the parent re-renders (e. g. due to a state
   //   change), then this component will re-render as well.
+
   // @var {Object}
   // @prop {bool} current
-  const isIntersecting = (0, _react.useRef)(); // @var {Object}
-  // @prop {HTMLElement} current
+  const isIntersecting = (0, _react.useRef)();
 
+  // @var {Object}
+  // @prop {HTMLElement} current
   const intersectionRef = (0, _react.useRef)();
   (0, _react.useEffect)(() => {
     const rootEl = rootRef.current;
     const intersectionEl = intersectionRef.current;
-
     if (rootEl && intersectionEl) {
       const onIntersection = entries => {
         // Currently there's no way to supply multiple thresholds,
         // so a single entry can be assumed safely
-        const [entry] = entries; // Make sure the callback is not called multiple times
-        // if there is no change
+        const [entry] = entries;
 
+        // Make sure the callback is not called multiple times
+        // if there is no change
         const intersectionChange = entry.isIntersecting !== isIntersecting.current;
-
         if (intersectionChange) {
           isIntersecting.current = entry.isIntersecting;
           onChange({
@@ -57,16 +51,16 @@ const IntersectionDetector = _ref => {
           });
         }
       };
-
       const observerOptions = {
         root: rootEl,
         threshold
       };
       const intersectionObserver = new IntersectionObserver(onIntersection, observerOptions);
-      intersectionObserver.observe(intersectionEl); // Make sure to clean up everything when un-mounting.
+      intersectionObserver.observe(intersectionEl);
+
+      // Make sure to clean up everything when un-mounting.
       // Using an arrow function instead of just returning
       // the disconnect function for better readability.
-
       return () => intersectionObserver.disconnect();
     }
   }, [rootRef.current, intersectionRef.current]);
@@ -78,7 +72,6 @@ const IntersectionDetector = _ref => {
     id: "2829611397"
   }, ["div.jsx-2829611397{height:100%;}"]));
 };
-
 exports.IntersectionDetector = IntersectionDetector;
 IntersectionDetector.defaultProps = {
   threshold: 0,
@@ -90,13 +83,11 @@ IntersectionDetector.propTypes = {
     // not required so `current` can be `null`
     current: _propTypes.default.instanceOf(HTMLElement)
   }).isRequired,
-
   /** Called with signature `({ isIntersecting: bool })` */
   onChange: _propTypes.default.func.isRequired,
   children: _propTypes.default.any,
   className: _propTypes.default.string,
   dataTest: _propTypes.default.string,
-
   /** The [threshold](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#Intersection_observer_options) value: a value from 0.0 to 1.0 that controls the point at which an intersecting component is considered 'intersected' or 'visible' and the onChange callback triggers */
   threshold: _propTypes.default.number
 };

package/build/cjs/{intersection-detector.stories.js → intersection-detector.prod.stories.js}

@@ -4,25 +4,24 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.BottomArea = exports.AbsoluteTopArea = exports.AbsoluteBottomArea = void 0;
-
 var _style = _interopRequireDefault(require("styled-jsx/style"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _intersectionDetector = require("./intersection-detector.js");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+const description = `
+A tool to performantly detect when two components intersect, which is often better to use than scroll listeners. A common use case is to detect when a child component is in view inside a scrolling parent. Uses an [\`IntersectionObserver\`](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) object internally.
 
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _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; }
+See the code examples below for examples on how to implement it.
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-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); }
-
-const description = "\nA tool to performantly detect when two components intersect, which is often better to use than scroll listeners. A common use case is to detect when a child component is in view inside a scrolling parent. Uses an [`IntersectionObserver`](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) object internally.\n\nSee the code examples below for examples on how to implement it.\n\n```js\nimport { IntersectionDetector } from '@dhis2/ui'\n```\n";
-var _default = {
+\`\`\`js
+import { IntersectionDetector } from '@dhis2/ui'
+\`\`\`
+`;
+var _default = exports.default = {
   title: 'Intersection Observer',
   component: _intersectionDetector.IntersectionDetector,
   parameters: {
@@ -44,14 +43,11 @@ var _default = {
     }
   }
 };
-exports.default = _default;
-
 const Text = () => /*#__PURE__*/_react.default.createElement("p", {
   className: "jsx-3862390236"
 }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tempor venenatis hendrerit. Donec dictum sed ligula id efficitur. Suspendisse feugiat, elit in dictum imperdiet, mi tellus euismod nibh, vitae hendrerit turpis odio ut mauris. Vestibulum rhoncus interdum nunc eu eleifend. Aenean viverra nibh hendrerit nulla iaculis, vitae tincidunt erat ullamcorper. Donec tempus mattis faucibus. Donec nec lacus vitae elit aliquet pharetra. Cras vitae odio eu lorem euismod malesuada. Nunc eu rhoncus mauris. Nullam vehicula elit id vehicula maximus. Phasellus gravida tincidunt mauris, vitae laoreet erat commodo id. Nullam vitae erat ante. Proin id ultricies risus, in ultricies mauris. Vivamus lectus enim, ultricies vel egestas nec, tempor a magna. Nam sed fermentum ipsum, a ullamcorper felis. Aenean finibus erat elit, at eleifend nulla rutrum at.", /*#__PURE__*/_react.default.createElement(_style.default, {
   id: "3862390236"
 }, ["p.jsx-3862390236{margin:0;}"]));
-
 const Template = _ref => {
   let {
     containerStyles,
@@ -63,7 +59,7 @@ const Template = _ref => {
     className: "jsx-2697878418" + " " + "container"
   }, /*#__PURE__*/_react.default.createElement("p", {
     className: "jsx-2697878418"
-  }, "Is intersecting: ", " ".concat(isIntersecting)), /*#__PURE__*/_react.default.createElement("div", {
+  }, "Is intersecting: ", ` ${isIntersecting}`), /*#__PURE__*/_react.default.createElement("div", {
     ref: rootRef,
     className: "jsx-2697878418" + " " + "scrollContainer"
   }, /*#__PURE__*/_react.default.createElement("div", {
@@ -83,7 +79,6 @@ const Template = _ref => {
     id: "2697878418"
   }, [".scrollContainer.jsx-2697878418{width:200px;height:300px;overflow:hidden;overflow-y:auto;}", ".contentContainer.jsx-2697878418{position:relative;}"]));
 };
-
 Template.propTypes = {
   containerStyles: _propTypes.default.shape({})
 };
@@ -94,27 +89,27 @@ const boxStyles = {
   width: '100%',
   height: '100px'
 };
-const AbsoluteBottomArea = Template.bind({});
-exports.AbsoluteBottomArea = AbsoluteBottomArea;
+const AbsoluteBottomArea = exports.AbsoluteBottomArea = Template.bind({});
 AbsoluteBottomArea.args = {
-  containerStyles: { ...boxStyles,
+  containerStyles: {
+    ...boxStyles,
     position: 'absolute',
     bottom: '0',
     left: '0'
   }
 };
-const AbsoluteTopArea = Template.bind({});
-exports.AbsoluteTopArea = AbsoluteTopArea;
+const AbsoluteTopArea = exports.AbsoluteTopArea = Template.bind({});
 AbsoluteTopArea.args = {
-  containerStyles: { ...boxStyles,
+  containerStyles: {
+    ...boxStyles,
     position: 'absolute',
     top: '0',
     left: '0'
   }
 };
-const BottomArea = Template.bind({});
-exports.BottomArea = BottomArea;
+const BottomArea = exports.BottomArea = Template.bind({});
 BottomArea.args = {
-  containerStyles: { ...boxStyles
+  containerStyles: {
+    ...boxStyles
   }
 };

package/build/es/features/Visibility_notification/index.js

@@ -1,18 +1,20 @@
 import { Given, When, Then } from '@badeball/cypress-cucumber-preprocessor';
 Given('the detector is not intersecting with the root', () => {
   cy.visitStory('IntersectionDetector', 'Out Of View');
-  cy.window().then(win => {
-    cy.wrap(win.onChange).as('onChangeStub').should('be.calledOnce').should('be.calledWith', {
-      isIntersecting: false
-    });
+  cy.window().should(win => expect(win.onChange).to.not.be.undefined);
+  cy.window().its('onChange').as('onChangeStub', {
+    static: true
+  }).should('be.calledOnce').should('be.calledWith', {
+    isIntersecting: false
   });
 });
 Given('the detector is intersecting with the root', () => {
   cy.visitStory('IntersectionDetector', 'In View');
-  cy.window().then(win => {
-    cy.wrap(win.onChange).as('onChangeStub').should('be.calledOnce').should('be.calledWith', {
-      isIntersecting: true
-    });
+  cy.window().should(win => expect(win.onChange).to.not.be.undefined);
+  cy.window().its('onChange').as('onChangeStub', {
+    static: true
+  }).should('be.calledOnce').should('be.calledWith', {
+    isIntersecting: true
   });
 });
 When('the user scrolls the detector into view', () => {

package/build/es/intersection-detector.js

@@ -15,25 +15,26 @@ export const IntersectionDetector = _ref => {
   //   so there's no need for re-rendering the (potentially computational
   //   heavy) children.  Also: If the parent re-renders (e. g. due to a state
   //   change), then this component will re-render as well.
+
   // @var {Object}
   // @prop {bool} current
-  const isIntersecting = useRef(); // @var {Object}
-  // @prop {HTMLElement} current
+  const isIntersecting = useRef();
 
+  // @var {Object}
+  // @prop {HTMLElement} current
   const intersectionRef = useRef();
   useEffect(() => {
     const rootEl = rootRef.current;
     const intersectionEl = intersectionRef.current;
-
     if (rootEl && intersectionEl) {
       const onIntersection = entries => {
         // Currently there's no way to supply multiple thresholds,
         // so a single entry can be assumed safely
-        const [entry] = entries; // Make sure the callback is not called multiple times
-        // if there is no change
+        const [entry] = entries;
 
+        // Make sure the callback is not called multiple times
+        // if there is no change
         const intersectionChange = entry.isIntersecting !== isIntersecting.current;
-
         if (intersectionChange) {
           isIntersecting.current = entry.isIntersecting;
           onChange({
@@ -41,16 +42,16 @@ export const IntersectionDetector = _ref => {
           });
         }
       };
-
       const observerOptions = {
         root: rootEl,
         threshold
       };
       const intersectionObserver = new IntersectionObserver(onIntersection, observerOptions);
-      intersectionObserver.observe(intersectionEl); // Make sure to clean up everything when un-mounting.
+      intersectionObserver.observe(intersectionEl);
+
+      // Make sure to clean up everything when un-mounting.
       // Using an arrow function instead of just returning
       // the disconnect function for better readability.
-
       return () => intersectionObserver.disconnect();
     }
   }, [rootRef.current, intersectionRef.current]);
@@ -72,13 +73,11 @@ IntersectionDetector.propTypes = {
     // not required so `current` can be `null`
     current: PropTypes.instanceOf(HTMLElement)
   }).isRequired,
-
   /** Called with signature `({ isIntersecting: bool })` */
   onChange: PropTypes.func.isRequired,
   children: PropTypes.any,
   className: PropTypes.string,
   dataTest: PropTypes.string,
-
   /** The [threshold](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#Intersection_observer_options) value: a value from 0.0 to 1.0 that controls the point at which an intersecting component is considered 'intersected' or 'visible' and the onChange callback triggers */
   threshold: PropTypes.number
 };

package/build/es/{intersection-detector.stories.js → intersection-detector.prod.stories.js}

@@ -1,11 +1,17 @@
 import _JSXStyle from "styled-jsx/style";
-
-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 _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 import PropTypes from 'prop-types';
 import React, { useState, useRef } from 'react';
 import { IntersectionDetector } from './intersection-detector.js';
-const description = "\nA tool to performantly detect when two components intersect, which is often better to use than scroll listeners. A common use case is to detect when a child component is in view inside a scrolling parent. Uses an [`IntersectionObserver`](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) object internally.\n\nSee the code examples below for examples on how to implement it.\n\n```js\nimport { IntersectionDetector } from '@dhis2/ui'\n```\n";
+const description = `
+A tool to performantly detect when two components intersect, which is often better to use than scroll listeners. A common use case is to detect when a child component is in view inside a scrolling parent. Uses an [\`IntersectionObserver\`](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) object internally.
+
+See the code examples below for examples on how to implement it.
+
+\`\`\`js
+import { IntersectionDetector } from '@dhis2/ui'
+\`\`\`
+`;
 export default {
   title: 'Intersection Observer',
   component: IntersectionDetector,
@@ -28,13 +34,11 @@ export default {
     }
   }
 };
-
 const Text = () => /*#__PURE__*/React.createElement("p", {
   className: "jsx-3862390236"
 }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tempor venenatis hendrerit. Donec dictum sed ligula id efficitur. Suspendisse feugiat, elit in dictum imperdiet, mi tellus euismod nibh, vitae hendrerit turpis odio ut mauris. Vestibulum rhoncus interdum nunc eu eleifend. Aenean viverra nibh hendrerit nulla iaculis, vitae tincidunt erat ullamcorper. Donec tempus mattis faucibus. Donec nec lacus vitae elit aliquet pharetra. Cras vitae odio eu lorem euismod malesuada. Nunc eu rhoncus mauris. Nullam vehicula elit id vehicula maximus. Phasellus gravida tincidunt mauris, vitae laoreet erat commodo id. Nullam vitae erat ante. Proin id ultricies risus, in ultricies mauris. Vivamus lectus enim, ultricies vel egestas nec, tempor a magna. Nam sed fermentum ipsum, a ullamcorper felis. Aenean finibus erat elit, at eleifend nulla rutrum at.", /*#__PURE__*/React.createElement(_JSXStyle, {
   id: "3862390236"
 }, ["p.jsx-3862390236{margin:0;}"]));
-
 const Template = _ref => {
   let {
     containerStyles,
@@ -46,7 +50,7 @@ const Template = _ref => {
     className: "jsx-2697878418" + " " + "container"
   }, /*#__PURE__*/React.createElement("p", {
     className: "jsx-2697878418"
-  }, "Is intersecting: ", " ".concat(isIntersecting)), /*#__PURE__*/React.createElement("div", {
+  }, "Is intersecting: ", ` ${isIntersecting}`), /*#__PURE__*/React.createElement("div", {
     ref: rootRef,
     className: "jsx-2697878418" + " " + "scrollContainer"
   }, /*#__PURE__*/React.createElement("div", {
@@ -66,7 +70,6 @@ const Template = _ref => {
     id: "2697878418"
   }, [".scrollContainer.jsx-2697878418{width:200px;height:300px;overflow:hidden;overflow-y:auto;}", ".contentContainer.jsx-2697878418{position:relative;}"]));
 };
-
 Template.propTypes = {
   containerStyles: PropTypes.shape({})
 };
@@ -79,7 +82,8 @@ const boxStyles = {
 };
 export const AbsoluteBottomArea = Template.bind({});
 AbsoluteBottomArea.args = {
-  containerStyles: { ...boxStyles,
+  containerStyles: {
+    ...boxStyles,
     position: 'absolute',
     bottom: '0',
     left: '0'
@@ -87,7 +91,8 @@ AbsoluteBottomArea.args = {
 };
 export const AbsoluteTopArea = Template.bind({});
 AbsoluteTopArea.args = {
-  containerStyles: { ...boxStyles,
+  containerStyles: {
+    ...boxStyles,
     position: 'absolute',
     top: '0',
     left: '0'
@@ -95,6 +100,7 @@ AbsoluteTopArea.args = {
 };
 export const BottomArea = Template.bind({});
 BottomArea.args = {
-  containerStyles: { ...boxStyles
+  containerStyles: {
+    ...boxStyles
   }
 };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/intersection-detector",
-    "version": "9.11.0",
+    "version": "9.11.1-beta.10",
     "description": "UI IntersectionDetector",
     "repository": {
         "type": "git",
@@ -22,18 +22,18 @@
         "access": "public"
     },
     "scripts": {
-        "start": "start-storybook -c ../../storybook/config --port 5000",
+        "start": "storybook dev -c ../../storybook/config --port 5000",
         "build": "d2-app-scripts build",
         "test": "d2-app-scripts test --jestConfig ../../jest.config.shared.js"
     },
     "peerDependencies": {
-        "react": "^16.8",
-        "react-dom": "^16.8",
+        "react": "^16.13",
+        "react-dom": "^16.13",
         "styled-jsx": "^4"
     },
     "dependencies": {
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2/ui-constants": "9.11.0",
+        "@dhis2/ui-constants": "9.11.1-beta.10",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },