@dhis2-ui/popover 9.11.0 → 9.11.1-beta.2

package/build/cjs/arrow.js

@@ -4,28 +4,17 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Arrow = exports.ARROW_SIZE = void 0;
-
 var _style = _interopRequireDefault(require("styled-jsx/style"));
-
 var _uiConstants = require("@dhis2/ui-constants");
-
 var _classnames = _interopRequireDefault(require("classnames"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _getArrowPosition = require("./get-arrow-position.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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const ARROW_SIZE = 8;
-exports.ARROW_SIZE = ARROW_SIZE;
-const Arrow = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+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 ARROW_SIZE = exports.ARROW_SIZE = 8;
+const Arrow = exports.Arrow = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   let {
     hidden,
     popperPlacement,
@@ -41,9 +30,8 @@ const Arrow = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   }, /*#__PURE__*/_react.default.createElement(_style.default, {
     id: "1397459397",
     dynamic: [ARROW_SIZE, ARROW_SIZE, ARROW_SIZE / 2, ARROW_SIZE / 2, ARROW_SIZE / 2, ARROW_SIZE / 2, ARROW_SIZE / 2, _uiConstants.colors.white, _uiConstants.colors.white]
-  }, ["div.__jsx-style-dynamic-selector{width:".concat(ARROW_SIZE, "px;height:").concat(ARROW_SIZE, "px;position:absolute;}"), "div.top.__jsx-style-dynamic-selector{top:-".concat(ARROW_SIZE / 2, "px;}"), "div.right.__jsx-style-dynamic-selector{right:-".concat(ARROW_SIZE / 2, "px;}"), "div.bottom.__jsx-style-dynamic-selector{bottom:-".concat(ARROW_SIZE / 2, "px;}"), "div.left.__jsx-style-dynamic-selector{left:-".concat(ARROW_SIZE / 2, "px;}"), "div.hidden.__jsx-style-dynamic-selector{visibility:hidden;}", "div.__jsx-style-dynamic-selector::after{content:'';position:absolute;pointer-events:none;box-sizing:border-box;border-style:solid;border-width:".concat(ARROW_SIZE / 2, "px;border-color:transparent transparent ").concat(_uiConstants.colors.white, " ").concat(_uiConstants.colors.white, ";box-shadow:-1px 1px 1px 0 rgba(64,75,90,0.08), -3px 3px 8px -6px rgba(64,75,90,0.15);}"), "div.bottom.__jsx-style-dynamic-selector::after{-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg);}", "div.top.__jsx-style-dynamic-selector::after{-webkit-transform:rotate(135deg);-ms-transform:rotate(135deg);transform:rotate(135deg);}", "div.right.__jsx-style-dynamic-selector::after{-webkit-transform:rotate(-135deg);-ms-transform:rotate(-135deg);transform:rotate(-135deg);}", "div.left.__jsx-style-dynamic-selector::after{-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);}"]));
+  }, [`div.__jsx-style-dynamic-selector{width:${ARROW_SIZE}px;height:${ARROW_SIZE}px;position:absolute;}`, `div.top.__jsx-style-dynamic-selector{top:-${ARROW_SIZE / 2}px;}`, `div.right.__jsx-style-dynamic-selector{right:-${ARROW_SIZE / 2}px;}`, `div.bottom.__jsx-style-dynamic-selector{bottom:-${ARROW_SIZE / 2}px;}`, `div.left.__jsx-style-dynamic-selector{left:-${ARROW_SIZE / 2}px;}`, "div.hidden.__jsx-style-dynamic-selector{visibility:hidden;}", `div.__jsx-style-dynamic-selector::after{content:'';position:absolute;pointer-events:none;box-sizing:border-box;border-style:solid;border-width:${ARROW_SIZE / 2}px;border-color:transparent transparent ${_uiConstants.colors.white} ${_uiConstants.colors.white};box-shadow:-1px 1px 1px 0 rgba(64,75,90,0.08), -3px 3px 8px -6px rgba(64,75,90,0.15);}`, "div.bottom.__jsx-style-dynamic-selector::after{-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg);}", "div.top.__jsx-style-dynamic-selector::after{-webkit-transform:rotate(135deg);-ms-transform:rotate(135deg);transform:rotate(135deg);}", "div.right.__jsx-style-dynamic-selector::after{-webkit-transform:rotate(-135deg);-ms-transform:rotate(-135deg);transform:rotate(-135deg);}", "div.left.__jsx-style-dynamic-selector::after{-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);}"]));
 });
-exports.Arrow = Arrow;
 Arrow.displayName = 'Arrow';
 Arrow.propTypes = {
   hidden: _propTypes.default.bool,

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

@@ -1,7 +1,6 @@
 "use strict";
 
 var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
-
 (0, _cypressCucumberPreprocessor.Given)('a Popover is rendered with placement top', () => {
   cy.visitStory('Popover', 'Placement Top');
 });

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

@@ -1,7 +1,6 @@
 "use strict";
 
 var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
-
 (0, _cypressCucumberPreprocessor.Given)('a default Popper is rendered with arrow set to true', () => {
   cy.visitStory('Popover', 'Default');
 });

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

@@ -1,7 +1,6 @@
 "use strict";
 
 var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
-
 (0, _cypressCucumberPreprocessor.Given)('a default Popper is rendered with arrow set to true', () => {
   cy.visitStory('Popover', 'Default');
 });

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

@@ -1,9 +1,9 @@
 "use strict";
 
 var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
+const CLOSE_TO_DELTA = 1;
 
-const CLOSE_TO_DELTA = 1; // Stories
-
+// Stories
 (0, _cypressCucumberPreprocessor.Given)('there is sufficient space to place the Popover above the reference element', () => {
   cy.visitStory('Popover', 'Default');
 });
@@ -12,8 +12,9 @@ const CLOSE_TO_DELTA = 1; // Stories
 });
 (0, _cypressCucumberPreprocessor.Given)('there is very little space between the top of the reference element and the top of the body', () => {
   cy.visitStory('Popover', 'Hidden Arrow');
-}); // Window height manipulation to control the space below the reference element
+});
 
+// Window height manipulation to control the space below the reference element
 (0, _cypressCucumberPreprocessor.Given)('there is sufficient space between the reference element bottom and the body bottom to fit the Popover', () => {
   cy.viewport(1000, 660);
 });
@@ -22,8 +23,9 @@ const CLOSE_TO_DELTA = 1; // Stories
 });
 (0, _cypressCucumberPreprocessor.Given)('there is not enough space between the top of the reference element and the top of the Popover to show the arrow', () => {
   cy.viewport(1000, 380);
-}); // Assertions
+});
 
+// Assertions
 (0, _cypressCucumberPreprocessor.Given)('there is sufficient space between the bottom of the reference element and the bottom of the Popover to show the arrow', () => {
   compareRefAndPopoverPositions((refPos, popoverPos) => {
     expect(refPos.bottom).to.be.greaterThan(popoverPos.bottom + 8);
@@ -62,8 +64,9 @@ const CLOSE_TO_DELTA = 1; // Stories
   compareRefAndPopoverPositions((refPos, popoverPos) => {
     expect(popoverPos.bottom + 8).to.be.closeTo(refPos.top, CLOSE_TO_DELTA);
   });
-}); // helper
+});
 
+// helper
 const compareRefAndPopoverPositions = callback => {
   // this needs to be done as the cypress reference to the popover is lost
   // once react re-renders it to adjust to the changed viewport size,

package/build/cjs/get-arrow-position.js

@@ -4,26 +4,19 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getArrowPosition = void 0;
-
 const getArrowPosition = popperPlacement => {
   const direction = typeof popperPlacement === 'string' ? popperPlacement.split('-')[0] : '';
-
   switch (direction) {
     case 'top':
       return 'bottom';
-
     case 'right':
       return 'left';
-
     case 'bottom':
       return 'top';
-
     case 'left':
       return 'right';
-
     default:
       return '';
   }
 };
-
 exports.getArrowPosition = getArrowPosition;

package/build/cjs/index.js

@@ -9,5 +9,4 @@ Object.defineProperty(exports, "Popover", {
     return _popover.Popover;
   }
 });
-
 var _popover = require("./popover.js");

package/build/cjs/modifiers.js

@@ -4,13 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.combineModifiers = void 0;
-
 var _popper = require("@dhis2-ui/popper");
-
 var _arrow = require("./arrow.js");
-
 const BORDER_RADIUS = 4;
-
 const computeArrowPadding = () => {
   // pythagoras
   const diagonal = Math.sqrt(2 * Math.pow(_arrow.ARROW_SIZE, 2));
@@ -18,7 +14,6 @@ const computeArrowPadding = () => {
   const padding = BORDER_RADIUS + overflowInPx;
   return Math.ceil(padding);
 };
-
 const hideArrowWhenDisplaced = _ref => {
   let {
     state
@@ -27,22 +22,17 @@ const hideArrowWhenDisplaced = _ref => {
   const displacement = state.modifiersData.preventOverflow;
   const referenceRect = state.rects.reference;
   const shouldHideArrow = Math.abs(displacement.x) >= referenceRect.width + halfArrow || Math.abs(displacement.y) >= referenceRect.height + halfArrow;
-
   if (typeof state.attributes.arrow !== 'object') {
     state.attributes.arrow = {};
   }
-
   state.attributes.arrow['data-arrow-hidden'] = shouldHideArrow;
   return state;
 };
-
 const combineModifiers = (arrow, arrowElement, resizeObservers) => {
   const baseModifiers = (0, _popper.getBaseModifiers)(resizeObservers);
-
   if (!arrow) {
     return baseModifiers;
   }
-
   return [...baseModifiers, {
     name: 'offset',
     options: {
@@ -62,5 +52,4 @@ const combineModifiers = (arrow, arrowElement, resizeObservers) => {
     requires: ['preventOverflow']
   }];
 };
-
 exports.combineModifiers = combineModifiers;

package/build/cjs/{popover.stories.e2e.js → popover.e2e.stories.js}

@@ -4,23 +4,16 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.WithOnClickOutside = exports.ShiftedArrow = exports.PlacementTop = exports.PlacementRight = exports.PlacementLeft = exports.PlacementBottom = exports.NoArrow = exports.HiddenArrow = exports.Flipped = exports.Default = void 0;
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _popover = require("./popover.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 _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); }
-
-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 _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); }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 const boxStyle = {
   display: 'flex',
   justifyContent: 'center',
@@ -34,14 +27,11 @@ const referenceElementStyle = {
   textAlign: 'center',
   padding: 6
 };
-
 class PopperInBoxWithCenteredReferenceElement extends _react.Component {
   constructor() {
     super(...arguments);
-
     _defineProperty(this, "ref", /*#__PURE__*/(0, _react.createRef)());
   }
-
   render() {
     const {
       paddingTop,
@@ -50,7 +40,8 @@ class PopperInBoxWithCenteredReferenceElement extends _react.Component {
       ...popoverProps
     } = this.props;
     return /*#__PURE__*/_react.default.createElement("div", {
-      style: { ...boxStyle,
+      style: {
+        ...boxStyle,
         paddingTop,
         height: paddingTop + 100
       }
@@ -68,9 +59,7 @@ class PopperInBoxWithCenteredReferenceElement extends _react.Component {
       }
     }, "I am in a box with width: ", popoverWidth, "px and height:", ' ', popoverHeight, "px")));
   }
-
 }
-
 PopperInBoxWithCenteredReferenceElement.defaultProps = {
   paddingTop: 220,
   popoverHeight: 200,
@@ -82,16 +71,12 @@ PopperInBoxWithCenteredReferenceElement.propTypes = {
   popoverWidth: _propTypes.default.number
 };
 window.onClickOutside = window.Cypress && window.Cypress.cy.stub();
-var _default = {
+var _default = exports.default = {
   title: 'Popover',
   component: _popover.Popover
 };
-exports.default = _default;
-
 const Default = () => /*#__PURE__*/_react.default.createElement(PopperInBoxWithCenteredReferenceElement, null);
-
 exports.Default = Default;
-
 const Flipped = () =>
 /*#__PURE__*/
 // default viewport-height for flipped popover
@@ -99,71 +84,54 @@ const Flipped = () =>
 _react.default.createElement(PopperInBoxWithCenteredReferenceElement, {
   paddingTop: 160
 });
-
 exports.Flipped = Flipped;
-
 const HiddenArrow = () =>
 /*#__PURE__*/
 // viewPort height 325px
 _react.default.createElement(PopperInBoxWithCenteredReferenceElement, {
   paddingTop: 110
 });
-
 exports.HiddenArrow = HiddenArrow;
-
 const NoArrow = () => /*#__PURE__*/_react.default.createElement(PopperInBoxWithCenteredReferenceElement, {
   arrow: false
 });
-
 exports.NoArrow = NoArrow;
-
 const WithOnClickOutside = () => /*#__PURE__*/_react.default.createElement(PopperInBoxWithCenteredReferenceElement, {
   onClickOutside: window.onClickOutside
 });
-
 exports.WithOnClickOutside = WithOnClickOutside;
-
 const PlacementTop = () => /*#__PURE__*/_react.default.createElement(PopperInBoxWithCenteredReferenceElement, {
   popoverHeight: 40,
   popoverWidth: 180,
   paddingTop: 50,
   placement: "top"
 });
-
 exports.PlacementTop = PlacementTop;
-
 const PlacementRight = () => /*#__PURE__*/_react.default.createElement(PopperInBoxWithCenteredReferenceElement, {
   popoverHeight: 60,
   popoverWidth: 130,
   paddingTop: 50,
   placement: "right"
 });
-
 exports.PlacementRight = PlacementRight;
-
 const PlacementBottom = () => /*#__PURE__*/_react.default.createElement(PopperInBoxWithCenteredReferenceElement, {
   popoverHeight: 40,
   popoverWidth: 180,
   paddingTop: 50,
   placement: "bottom"
 });
-
 exports.PlacementBottom = PlacementBottom;
-
 const PlacementLeft = () => /*#__PURE__*/_react.default.createElement(PopperInBoxWithCenteredReferenceElement, {
   popoverHeight: 60,
   popoverWidth: 130,
   paddingTop: 50,
   placement: "left"
 });
-
 exports.PlacementLeft = PlacementLeft;
-
 const ShiftedArrow = () => /*#__PURE__*/_react.default.createElement(PopperInBoxWithCenteredReferenceElement, {
   popoverHeight: 160,
   popoverWidth: 130,
   paddingTop: 1,
   placement: "left"
 });
-
 exports.ShiftedArrow = ShiftedArrow;

package/build/cjs/popover.js

@@ -4,31 +4,18 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Popover = void 0;
-
 var _style = _interopRequireDefault(require("styled-jsx/style"));
-
+var _uiConstants = require("@dhis2/ui-constants");
 var _layer = require("@dhis2-ui/layer");
-
 var _popper = require("@dhis2-ui/popper");
-
-var _uiConstants = require("@dhis2/ui-constants");
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _arrow = require("./arrow.js");
-
 var _modifiers = require("./modifiers.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 _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); }
-
+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 Popover = _ref => {
   let {
     children,
@@ -73,9 +60,8 @@ const Popover = _ref => {
   }), /*#__PURE__*/_react.default.createElement(_style.default, {
     id: "632767479",
     dynamic: [maxWidth, elevation, _uiConstants.colors.white]
-  }, ["div.__jsx-style-dynamic-selector{max-width:".concat(maxWidth, "px;box-shadow:").concat(elevation, ";background-color:").concat(_uiConstants.colors.white, ";border-radius:4px;}")])));
+  }, [`div.__jsx-style-dynamic-selector{max-width:${maxWidth}px;box-shadow:${elevation};background-color:${_uiConstants.colors.white};border-radius:4px;}`])));
 };
-
 exports.Popover = Popover;
 Popover.defaultProps = {
   arrow: true,
@@ -86,19 +72,16 @@ Popover.defaultProps = {
 };
 Popover.propTypes = {
   children: _propTypes.default.node.isRequired,
-
   /** Show or hide the arrow */
   arrow: _propTypes.default.bool,
   className: _propTypes.default.string,
   dataTest: _propTypes.default.string,
-
   /** Box-shadow to create appearance of elevation.  Use `elevations` constants from the UI library. */
   elevation: _propTypes.default.string,
   maxWidth: _propTypes.default.number,
   observePopperResize: _propTypes.default.bool,
   observeReferenceResize: _propTypes.default.bool,
   placement: _uiConstants.sharedPropTypes.popperPlacementPropType,
-
   /** A React ref that refers to the element the Popover should position against */
   reference: _uiConstants.sharedPropTypes.popperReferencePropType,
   onClickOutside: _propTypes.default.func

package/build/cjs/popover.prod.stories.js

@@ -0,0 +1,109 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.NoArrow = exports.Default = exports.Customization = void 0;
+var _uiConstants = require("@dhis2/ui-constants");
+var _react = _interopRequireWildcard(require("react"));
+var _popover = require("./popover.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 _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 subtitle = `Useful to give a user more information or possible actions without disrupting a page or flow`;
+const description = `
+Popovers are similar to tooltips: they are for displaying extra information, but popovers are intended for richer information and actions.
+
+Popovers are triggered by hovering or tapping on an element. Clicking on a element keeps the popover open until the user clicks or interacts elsewhere on the page.
+
+Popovers can contain information in the form of rich markup, as well as actions. Critical actions, or the only action on a page, should not be hidden inside a popover.
+
+Before using a popover, consider that some users may never see the information contained within. If that is a problem, display the information right on the page instead. Do not use a popover for content that is essential to the user experience or application.
+
+See more about Popovers at [Design System: Popover](https://github.com/dhis2/design-system/blob/master/molecules/popover.md).
+
+\`\`\`js
+import { Popover } from '@dhis2/ui'
+\`\`\`
+
+_**Note**: Due to the full-page interaction of this component, only one representative example in an iframe sandbox is shown here. See more (interactive) examples in the 'Canvas' tab._
+`;
+var _default = exports.default = {
+  title: 'Popover',
+  component: _popover.Popover,
+  parameters: {
+    componentSubtitle: subtitle,
+    docs: {
+      description: {
+        component: description
+      },
+      // Contain the popovers in iframes in the docs page
+      inlineStories: false,
+      iframeHeight: '500px',
+      // Disable stories in docs page by default to use one representative example
+      disable: true
+    }
+  },
+  // Handles weird treatment of non-literal args (`elevation: elevations.e200`)
+  args: {
+    ..._popover.Popover.defaultProps
+  },
+  argTypes: {
+    reference: {
+      ..._uiConstants.sharedPropTypes.popperReferenceArgType
+    },
+    placement: {
+      ..._uiConstants.sharedPropTypes.popperPlacementArgType
+    }
+  }
+};
+const boxStyle = {
+  display: 'flex',
+  justifyContent: 'center',
+  width: 400,
+  paddingTop: 280,
+  backgroundColor: 'aliceblue'
+};
+const referenceElementStyle = {
+  width: 100,
+  height: 50,
+  backgroundColor: 'cadetblue',
+  textAlign: 'center',
+  padding: 6
+};
+const Template = args => {
+  const ref = (0, _react.useRef)(null);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    style: boxStyle
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    style: referenceElementStyle,
+    ref: ref
+  }, "Reference element"), /*#__PURE__*/_react.default.createElement(_popover.Popover, _extends({}, args, {
+    reference: ref
+  }), /*#__PURE__*/_react.default.createElement("div", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Consectetur purus ut faucibus pulvinar elementum. Dignissim diam quis enim lobortis scelerisque fermentum dui faucibus. Rhoncus aenean vel elit scelerisque mauris pellentesque. Non sodales neque sodales ut etiam sit amet. Volutpat sed cras ornare arcu dui. Quis imperdiet massa tincidunt nunc pulvinar sapien et ligula. Convallis posuere morbi leo urna molestie at. Mauris cursus mattis molestie a iaculis at.")));
+};
+const Default = exports.Default = Template.bind({});
+Default.parameters = {
+  docs: {
+    // Enable this story for the docs page
+    disable: false,
+    // Show source, including 'ref' hooks
+    source: {
+      type: 'code'
+    }
+  }
+};
+const NoArrow = exports.NoArrow = Template.bind({});
+NoArrow.args = {
+  arrow: false
+};
+const Customization = exports.Customization = Template.bind({});
+Customization.args = {
+  arrow: true,
+  className: 'custom-classname',
+  dataTest: 'custom-data-test-id',
+  elevation: _uiConstants.elevations.e200,
+  maxWidth: 400,
+  placement: 'bottom-start',
+  onClickOutside: () => console.log('backdrop was clicked...')
+};

package/build/es/arrow.js

@@ -21,7 +21,7 @@ const Arrow = /*#__PURE__*/forwardRef((_ref, ref) => {
   }, /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "1397459397",
     dynamic: [ARROW_SIZE, ARROW_SIZE, ARROW_SIZE / 2, ARROW_SIZE / 2, ARROW_SIZE / 2, ARROW_SIZE / 2, ARROW_SIZE / 2, colors.white, colors.white]
-  }, ["div.__jsx-style-dynamic-selector{width:".concat(ARROW_SIZE, "px;height:").concat(ARROW_SIZE, "px;position:absolute;}"), "div.top.__jsx-style-dynamic-selector{top:-".concat(ARROW_SIZE / 2, "px;}"), "div.right.__jsx-style-dynamic-selector{right:-".concat(ARROW_SIZE / 2, "px;}"), "div.bottom.__jsx-style-dynamic-selector{bottom:-".concat(ARROW_SIZE / 2, "px;}"), "div.left.__jsx-style-dynamic-selector{left:-".concat(ARROW_SIZE / 2, "px;}"), "div.hidden.__jsx-style-dynamic-selector{visibility:hidden;}", "div.__jsx-style-dynamic-selector::after{content:'';position:absolute;pointer-events:none;box-sizing:border-box;border-style:solid;border-width:".concat(ARROW_SIZE / 2, "px;border-color:transparent transparent ").concat(colors.white, " ").concat(colors.white, ";box-shadow:-1px 1px 1px 0 rgba(64,75,90,0.08), -3px 3px 8px -6px rgba(64,75,90,0.15);}"), "div.bottom.__jsx-style-dynamic-selector::after{-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg);}", "div.top.__jsx-style-dynamic-selector::after{-webkit-transform:rotate(135deg);-ms-transform:rotate(135deg);transform:rotate(135deg);}", "div.right.__jsx-style-dynamic-selector::after{-webkit-transform:rotate(-135deg);-ms-transform:rotate(-135deg);transform:rotate(-135deg);}", "div.left.__jsx-style-dynamic-selector::after{-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);}"]));
+  }, [`div.__jsx-style-dynamic-selector{width:${ARROW_SIZE}px;height:${ARROW_SIZE}px;position:absolute;}`, `div.top.__jsx-style-dynamic-selector{top:-${ARROW_SIZE / 2}px;}`, `div.right.__jsx-style-dynamic-selector{right:-${ARROW_SIZE / 2}px;}`, `div.bottom.__jsx-style-dynamic-selector{bottom:-${ARROW_SIZE / 2}px;}`, `div.left.__jsx-style-dynamic-selector{left:-${ARROW_SIZE / 2}px;}`, "div.hidden.__jsx-style-dynamic-selector{visibility:hidden;}", `div.__jsx-style-dynamic-selector::after{content:'';position:absolute;pointer-events:none;box-sizing:border-box;border-style:solid;border-width:${ARROW_SIZE / 2}px;border-color:transparent transparent ${colors.white} ${colors.white};box-shadow:-1px 1px 1px 0 rgba(64,75,90,0.08), -3px 3px 8px -6px rgba(64,75,90,0.15);}`, "div.bottom.__jsx-style-dynamic-selector::after{-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg);}", "div.top.__jsx-style-dynamic-selector::after{-webkit-transform:rotate(135deg);-ms-transform:rotate(135deg);transform:rotate(135deg);}", "div.right.__jsx-style-dynamic-selector::after{-webkit-transform:rotate(-135deg);-ms-transform:rotate(-135deg);transform:rotate(-135deg);}", "div.left.__jsx-style-dynamic-selector::after{-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);}"]));
 });
 Arrow.displayName = 'Arrow';
 Arrow.propTypes = {

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

@@ -1,6 +1,7 @@
 import { Given, Then } from '@badeball/cypress-cucumber-preprocessor';
-const CLOSE_TO_DELTA = 1; // Stories
+const CLOSE_TO_DELTA = 1;
 
+// Stories
 Given('there is sufficient space to place the Popover above the reference element', () => {
   cy.visitStory('Popover', 'Default');
 });
@@ -9,8 +10,9 @@ Given('there is not enough space between the reference element top and the body
 });
 Given('there is very little space between the top of the reference element and the top of the body', () => {
   cy.visitStory('Popover', 'Hidden Arrow');
-}); // Window height manipulation to control the space below the reference element
+});
 
+// Window height manipulation to control the space below the reference element
 Given('there is sufficient space between the reference element bottom and the body bottom to fit the Popover', () => {
   cy.viewport(1000, 660);
 });
@@ -19,8 +21,9 @@ Given('there is not enough space between the reference element bottom and the bo
 });
 Given('there is not enough space between the top of the reference element and the top of the Popover to show the arrow', () => {
   cy.viewport(1000, 380);
-}); // Assertions
+});
 
+// Assertions
 Given('there is sufficient space between the bottom of the reference element and the bottom of the Popover to show the arrow', () => {
   compareRefAndPopoverPositions((refPos, popoverPos) => {
     expect(refPos.bottom).to.be.greaterThan(popoverPos.bottom + 8);
@@ -59,8 +62,9 @@ Then('there is some space between the anchor and the popover', () => {
   compareRefAndPopoverPositions((refPos, popoverPos) => {
     expect(popoverPos.bottom + 8).to.be.closeTo(refPos.top, CLOSE_TO_DELTA);
   });
-}); // helper
+});
 
+// helper
 const compareRefAndPopoverPositions = callback => {
   // this needs to be done as the cypress reference to the popover is lost
   // once react re-renders it to adjust to the changed viewport size,

package/build/es/get-arrow-position.js

@@ -1,22 +1,16 @@
 const getArrowPosition = popperPlacement => {
   const direction = typeof popperPlacement === 'string' ? popperPlacement.split('-')[0] : '';
-
   switch (direction) {
     case 'top':
       return 'bottom';
-
     case 'right':
       return 'left';
-
     case 'bottom':
       return 'top';
-
     case 'left':
       return 'right';
-
     default:
       return '';
   }
 };
-
 export { getArrowPosition };

package/build/es/modifiers.js

@@ -1,7 +1,6 @@
 import { getBaseModifiers } from '@dhis2-ui/popper';
 import { ARROW_SIZE } from './arrow.js';
 const BORDER_RADIUS = 4;
-
 const computeArrowPadding = () => {
   // pythagoras
   const diagonal = Math.sqrt(2 * Math.pow(ARROW_SIZE, 2));
@@ -9,7 +8,6 @@ const computeArrowPadding = () => {
   const padding = BORDER_RADIUS + overflowInPx;
   return Math.ceil(padding);
 };
-
 const hideArrowWhenDisplaced = _ref => {
   let {
     state
@@ -18,22 +16,17 @@ const hideArrowWhenDisplaced = _ref => {
   const displacement = state.modifiersData.preventOverflow;
   const referenceRect = state.rects.reference;
   const shouldHideArrow = Math.abs(displacement.x) >= referenceRect.width + halfArrow || Math.abs(displacement.y) >= referenceRect.height + halfArrow;
-
   if (typeof state.attributes.arrow !== 'object') {
     state.attributes.arrow = {};
   }
-
   state.attributes.arrow['data-arrow-hidden'] = shouldHideArrow;
   return state;
 };
-
 export const combineModifiers = (arrow, arrowElement, resizeObservers) => {
   const baseModifiers = getBaseModifiers(resizeObservers);
-
   if (!arrow) {
     return baseModifiers;
   }
-
   return [...baseModifiers, {
     name: 'offset',
     options: {

package/build/es/{popover.stories.e2e.js → popover.e2e.stories.js}

@@ -1,7 +1,7 @@
-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 _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 _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); }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 import PropTypes from 'prop-types';
 import React, { Component, createRef } from 'react';
 import { Popover } from './popover.js';
@@ -18,14 +18,11 @@ const referenceElementStyle = {
   textAlign: 'center',
   padding: 6
 };
-
 class PopperInBoxWithCenteredReferenceElement extends Component {
   constructor() {
     super(...arguments);
-
     _defineProperty(this, "ref", /*#__PURE__*/createRef());
   }
-
   render() {
     const {
       paddingTop,
@@ -34,7 +31,8 @@ class PopperInBoxWithCenteredReferenceElement extends Component {
       ...popoverProps
     } = this.props;
     return /*#__PURE__*/React.createElement("div", {
-      style: { ...boxStyle,
+      style: {
+        ...boxStyle,
         paddingTop,
         height: paddingTop + 100
       }
@@ -52,9 +50,7 @@ class PopperInBoxWithCenteredReferenceElement extends Component {
       }
     }, "I am in a box with width: ", popoverWidth, "px and height:", ' ', popoverHeight, "px")));
   }
-
 }
-
 PopperInBoxWithCenteredReferenceElement.defaultProps = {
   paddingTop: 220,
   popoverHeight: 200,

package/build/es/popover.js

@@ -1,15 +1,12 @@
 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 { colors, elevations, sharedPropTypes } from '@dhis2/ui-constants';
 import { Layer } from '@dhis2-ui/layer';
 import { getReferenceElement, usePopper } from '@dhis2-ui/popper';
-import { colors, elevations, sharedPropTypes } from '@dhis2/ui-constants';
 import PropTypes from 'prop-types';
 import React, { useState, useMemo } from 'react';
 import { Arrow } from './arrow.js';
 import { combineModifiers } from './modifiers.js';
-
 const Popover = _ref => {
   let {
     children,
@@ -54,9 +51,8 @@ const Popover = _ref => {
   }), /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "632767479",
     dynamic: [maxWidth, elevation, colors.white]
-  }, ["div.__jsx-style-dynamic-selector{max-width:".concat(maxWidth, "px;box-shadow:").concat(elevation, ";background-color:").concat(colors.white, ";border-radius:4px;}")])));
+  }, [`div.__jsx-style-dynamic-selector{max-width:${maxWidth}px;box-shadow:${elevation};background-color:${colors.white};border-radius:4px;}`])));
 };
-
 Popover.defaultProps = {
   arrow: true,
   dataTest: 'dhis2-uicore-popover',
@@ -66,19 +62,16 @@ Popover.defaultProps = {
 };
 Popover.propTypes = {
   children: PropTypes.node.isRequired,
-
   /** Show or hide the arrow */
   arrow: PropTypes.bool,
   className: PropTypes.string,
   dataTest: PropTypes.string,
-
   /** Box-shadow to create appearance of elevation.  Use `elevations` constants from the UI library. */
   elevation: PropTypes.string,
   maxWidth: PropTypes.number,
   observePopperResize: PropTypes.bool,
   observeReferenceResize: PropTypes.bool,
   placement: sharedPropTypes.popperPlacementPropType,
-
   /** A React ref that refers to the element the Popover should position against */
   reference: sharedPropTypes.popperReferencePropType,
   onClickOutside: PropTypes.func

package/build/es/{popover.stories.js → popover.prod.stories.js}

@@ -1,10 +1,25 @@
-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 { elevations, sharedPropTypes } from '@dhis2/ui-constants';
 import React, { useRef } from 'react';
 import { Popover } from './popover.js';
-const subtitle = "Useful to give a user more information or possible actions without disrupting a page or flow";
-const description = "\nPopovers are similar to tooltips: they are for displaying extra information, but popovers are intended for richer information and actions.\n\nPopovers are triggered by hovering or tapping on an element. Clicking on a element keeps the popover open until the user clicks or interacts elsewhere on the page.\n\nPopovers can contain information in the form of rich markup, as well as actions. Critical actions, or the only action on a page, should not be hidden inside a popover.\n\nBefore using a popover, consider that some users may never see the information contained within. If that is a problem, display the information right on the page instead. Do not use a popover for content that is essential to the user experience or application.\n\nSee more about Popovers at [Design System: Popover](https://github.com/dhis2/design-system/blob/master/molecules/popover.md).\n\n```js\nimport { Popover } from '@dhis2/ui'\n```\n\n_**Note**: Due to the full-page interaction of this component, only one representative example in an iframe sandbox is shown here. See more (interactive) examples in the 'Canvas' tab._\n";
+const subtitle = `Useful to give a user more information or possible actions without disrupting a page or flow`;
+const description = `
+Popovers are similar to tooltips: they are for displaying extra information, but popovers are intended for richer information and actions.
+
+Popovers are triggered by hovering or tapping on an element. Clicking on a element keeps the popover open until the user clicks or interacts elsewhere on the page.
+
+Popovers can contain information in the form of rich markup, as well as actions. Critical actions, or the only action on a page, should not be hidden inside a popover.
+
+Before using a popover, consider that some users may never see the information contained within. If that is a problem, display the information right on the page instead. Do not use a popover for content that is essential to the user experience or application.
+
+See more about Popovers at [Design System: Popover](https://github.com/dhis2/design-system/blob/master/molecules/popover.md).
+
+\`\`\`js
+import { Popover } from '@dhis2/ui'
+\`\`\`
+
+_**Note**: Due to the full-page interaction of this component, only one representative example in an iframe sandbox is shown here. See more (interactive) examples in the 'Canvas' tab._
+`;
 export default {
   title: 'Popover',
   component: Popover,
@@ -22,12 +37,15 @@ export default {
     }
   },
   // Handles weird treatment of non-literal args (`elevation: elevations.e200`)
-  args: { ...Popover.defaultProps
+  args: {
+    ...Popover.defaultProps
   },
   argTypes: {
-    reference: { ...sharedPropTypes.popperReferenceArgType
+    reference: {
+      ...sharedPropTypes.popperReferenceArgType
     },
-    placement: { ...sharedPropTypes.popperPlacementArgType
+    placement: {
+      ...sharedPropTypes.popperPlacementArgType
     }
   }
 };
@@ -45,7 +63,6 @@ const referenceElementStyle = {
   textAlign: 'center',
   padding: 6
 };
-
 const Template = args => {
   const ref = useRef(null);
   return /*#__PURE__*/React.createElement("div", {
@@ -57,7 +74,6 @@ const Template = args => {
     reference: ref
   }), /*#__PURE__*/React.createElement("div", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Consectetur purus ut faucibus pulvinar elementum. Dignissim diam quis enim lobortis scelerisque fermentum dui faucibus. Rhoncus aenean vel elit scelerisque mauris pellentesque. Non sodales neque sodales ut etiam sit amet. Volutpat sed cras ornare arcu dui. Quis imperdiet massa tincidunt nunc pulvinar sapien et ligula. Convallis posuere morbi leo urna molestie at. Mauris cursus mattis molestie a iaculis at.")));
 };
-
 export const Default = Template.bind({});
 Default.parameters = {
   docs: {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/popover",
-    "version": "9.11.0",
+    "version": "9.11.1-beta.2",
     "description": "UI Popover",
     "repository": {
         "type": "git",
@@ -22,20 +22,20 @@
         "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/layer": "9.11.0",
-        "@dhis2-ui/popper": "9.11.0",
-        "@dhis2/ui-constants": "9.11.0",
+        "@dhis2-ui/layer": "9.11.1-beta.2",
+        "@dhis2-ui/popper": "9.11.1-beta.2",
+        "@dhis2/ui-constants": "9.11.1-beta.2",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },

package/build/cjs/popover.stories.js

@@ -1,103 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.NoArrow = exports.Default = exports.Customization = void 0;
-
-var _uiConstants = require("@dhis2/ui-constants");
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _popover = require("./popover.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 _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 subtitle = "Useful to give a user more information or possible actions without disrupting a page or flow";
-const description = "\nPopovers are similar to tooltips: they are for displaying extra information, but popovers are intended for richer information and actions.\n\nPopovers are triggered by hovering or tapping on an element. Clicking on a element keeps the popover open until the user clicks or interacts elsewhere on the page.\n\nPopovers can contain information in the form of rich markup, as well as actions. Critical actions, or the only action on a page, should not be hidden inside a popover.\n\nBefore using a popover, consider that some users may never see the information contained within. If that is a problem, display the information right on the page instead. Do not use a popover for content that is essential to the user experience or application.\n\nSee more about Popovers at [Design System: Popover](https://github.com/dhis2/design-system/blob/master/molecules/popover.md).\n\n```js\nimport { Popover } from '@dhis2/ui'\n```\n\n_**Note**: Due to the full-page interaction of this component, only one representative example in an iframe sandbox is shown here. See more (interactive) examples in the 'Canvas' tab._\n";
-var _default = {
-  title: 'Popover',
-  component: _popover.Popover,
-  parameters: {
-    componentSubtitle: subtitle,
-    docs: {
-      description: {
-        component: description
-      },
-      // Contain the popovers in iframes in the docs page
-      inlineStories: false,
-      iframeHeight: '500px',
-      // Disable stories in docs page by default to use one representative example
-      disable: true
-    }
-  },
-  // Handles weird treatment of non-literal args (`elevation: elevations.e200`)
-  args: { ..._popover.Popover.defaultProps
-  },
-  argTypes: {
-    reference: { ..._uiConstants.sharedPropTypes.popperReferenceArgType
-    },
-    placement: { ..._uiConstants.sharedPropTypes.popperPlacementArgType
-    }
-  }
-};
-exports.default = _default;
-const boxStyle = {
-  display: 'flex',
-  justifyContent: 'center',
-  width: 400,
-  paddingTop: 280,
-  backgroundColor: 'aliceblue'
-};
-const referenceElementStyle = {
-  width: 100,
-  height: 50,
-  backgroundColor: 'cadetblue',
-  textAlign: 'center',
-  padding: 6
-};
-
-const Template = args => {
-  const ref = (0, _react.useRef)(null);
-  return /*#__PURE__*/_react.default.createElement("div", {
-    style: boxStyle
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    style: referenceElementStyle,
-    ref: ref
-  }, "Reference element"), /*#__PURE__*/_react.default.createElement(_popover.Popover, _extends({}, args, {
-    reference: ref
-  }), /*#__PURE__*/_react.default.createElement("div", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Consectetur purus ut faucibus pulvinar elementum. Dignissim diam quis enim lobortis scelerisque fermentum dui faucibus. Rhoncus aenean vel elit scelerisque mauris pellentesque. Non sodales neque sodales ut etiam sit amet. Volutpat sed cras ornare arcu dui. Quis imperdiet massa tincidunt nunc pulvinar sapien et ligula. Convallis posuere morbi leo urna molestie at. Mauris cursus mattis molestie a iaculis at.")));
-};
-
-const Default = Template.bind({});
-exports.Default = Default;
-Default.parameters = {
-  docs: {
-    // Enable this story for the docs page
-    disable: false,
-    // Show source, including 'ref' hooks
-    source: {
-      type: 'code'
-    }
-  }
-};
-const NoArrow = Template.bind({});
-exports.NoArrow = NoArrow;
-NoArrow.args = {
-  arrow: false
-};
-const Customization = Template.bind({});
-exports.Customization = Customization;
-Customization.args = {
-  arrow: true,
-  className: 'custom-classname',
-  dataTest: 'custom-data-test-id',
-  elevation: _uiConstants.elevations.e200,
-  maxWidth: 400,
-  placement: 'bottom-start',
-  onClickOutside: () => console.log('backdrop was clicked...')
-};