@dhis2-ui/popover 8.2.0 → 8.2.3

package/build/cjs/arrow.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ARROW_SIZE = exports.Arrow = void 0;
+exports.Arrow = exports.ARROW_SIZE = void 0;
 
 var _style = _interopRequireDefault(require("styled-jsx/style"));
 
@@ -25,21 +25,24 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 const ARROW_SIZE = 8;
 exports.ARROW_SIZE = ARROW_SIZE;
-const Arrow = /*#__PURE__*/(0, _react.forwardRef)(({
-  hidden,
-  popperPlacement,
-  styles
-}, ref) => /*#__PURE__*/_react.default.createElement("div", {
-  "data-test": "dhis2-uicore-popoverarrow",
-  style: styles,
-  ref: ref,
-  className: _style.default.dynamic([["1397459397", [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]]]) + " " + ((0, _classnames.default)((0, _getArrowPosition.getArrowPosition)(popperPlacement), {
-    hidden
-  }) || "")
-}, /*#__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:${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);}"])));
+const Arrow = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    hidden,
+    popperPlacement,
+    styles
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    "data-test": "dhis2-uicore-popoverarrow",
+    style: styles,
+    ref: ref,
+    className: _style.default.dynamic([["1397459397", [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]]]) + " " + ((0, _classnames.default)((0, _getArrowPosition.getArrowPosition)(popperPlacement), {
+      hidden
+    }) || "")
+  }, /*#__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);}"]));
+});
 exports.Arrow = Arrow;
 Arrow.displayName = 'Arrow';
 Arrow.propTypes = {

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

@@ -18,7 +18,8 @@ var _steps = require("cypress-cucumber-preprocessor/steps");
   cy.visitStory('Popover', 'Shifted Arrow');
 });
 (0, _steps.Then)('the Arrow is horizontally aligned with the Popper', () => {
-  cy.all(() => cy.get('[data-test="dhis2-uicore-popover"]'), () => cy.get('[data-test="dhis2-uicore-popoverarrow"]')).should(([$popover, $arrow]) => {
+  cy.all(() => cy.get('[data-test="dhis2-uicore-popover"]'), () => cy.get('[data-test="dhis2-uicore-popoverarrow"]')).should(_ref => {
+    let [$popover, $arrow] = _ref;
     const popoverRect = $popover.get(0).getBoundingClientRect();
     const arrowRect = $arrow.get(0).getBoundingClientRect();
     const popoverCenterX = popoverRect.left + popoverRect.width / 2;
@@ -27,7 +28,8 @@ var _steps = require("cypress-cucumber-preprocessor/steps");
   });
 });
 (0, _steps.Then)('the Arrow is vertically aligned with the Popper', () => {
-  cy.all(() => cy.get('[data-test="dhis2-uicore-popover"]'), () => cy.get('[data-test="dhis2-uicore-popoverarrow"]')).should(([$popover, $arrow]) => {
+  cy.all(() => cy.get('[data-test="dhis2-uicore-popover"]'), () => cy.get('[data-test="dhis2-uicore-popoverarrow"]')).should(_ref2 => {
+    let [$popover, $arrow] = _ref2;
     const popoverRect = $popover.get(0).getBoundingClientRect();
     const arrowRect = $arrow.get(0).getBoundingClientRect();
     const popoverCenterY = popoverRect.top + popoverRect.height / 2;
@@ -36,7 +38,8 @@ var _steps = require("cypress-cucumber-preprocessor/steps");
   });
 });
 (0, _steps.Then)('the Arrow is vertically aligned with the reference element', () => {
-  cy.all(() => cy.get('[data-test="reference-element"]'), () => cy.get('[data-test="dhis2-uicore-popoverarrow"]')).should(([$reference, $arrow]) => {
+  cy.all(() => cy.get('[data-test="reference-element"]'), () => cy.get('[data-test="dhis2-uicore-popoverarrow"]')).should(_ref3 => {
+    let [$reference, $arrow] = _ref3;
     const referenceRect = $reference.get(0).getBoundingClientRect();
     const arrowRect = $arrow.get(0).getBoundingClientRect();
     const referenceCenterY = referenceRect.top + referenceRect.height / 2;
@@ -45,7 +48,8 @@ var _steps = require("cypress-cucumber-preprocessor/steps");
   });
 });
 (0, _steps.Then)('the Arrow is at the bottom of the Popper', () => {
-  cy.all(() => cy.get('[data-test="dhis2-uicore-popover"]'), () => cy.get('[data-test="dhis2-uicore-popoverarrow"]')).should(([$popover, $arrow]) => {
+  cy.all(() => cy.get('[data-test="dhis2-uicore-popover"]'), () => cy.get('[data-test="dhis2-uicore-popoverarrow"]')).should(_ref4 => {
+    let [$popover, $arrow] = _ref4;
     const popoverRect = $popover.get(0).getBoundingClientRect();
     const arrowRect = $arrow.get(0).getBoundingClientRect();
     const arrowCenterY = arrowRect.top + arrowRect.height / 2;
@@ -53,7 +57,8 @@ var _steps = require("cypress-cucumber-preprocessor/steps");
   });
 });
 (0, _steps.Then)('the Arrow is at the left of the Popper', () => {
-  cy.all(() => cy.get('[data-test="dhis2-uicore-popover"]'), () => cy.get('[data-test="dhis2-uicore-popoverarrow"]')).should(([$popover, $arrow]) => {
+  cy.all(() => cy.get('[data-test="dhis2-uicore-popover"]'), () => cy.get('[data-test="dhis2-uicore-popoverarrow"]')).should(_ref5 => {
+    let [$popover, $arrow] = _ref5;
     const popoverRect = $popover.get(0).getBoundingClientRect();
     const arrowRect = $arrow.get(0).getBoundingClientRect();
     const arrowCenterX = arrowRect.left + arrowRect.width / 2;
@@ -61,7 +66,8 @@ var _steps = require("cypress-cucumber-preprocessor/steps");
   });
 });
 (0, _steps.Then)('the Arrow is at the top of the Popper', () => {
-  cy.all(() => cy.get('[data-test="dhis2-uicore-popover"]'), () => cy.get('[data-test="dhis2-uicore-popoverarrow"]')).should(([$popover, $arrow]) => {
+  cy.all(() => cy.get('[data-test="dhis2-uicore-popover"]'), () => cy.get('[data-test="dhis2-uicore-popoverarrow"]')).should(_ref6 => {
+    let [$popover, $arrow] = _ref6;
     const popoverRect = $popover.get(0).getBoundingClientRect();
     const arrowRect = $arrow.get(0).getBoundingClientRect();
     const arrowCenterY = arrowRect.top + arrowRect.height / 2;
@@ -69,7 +75,8 @@ var _steps = require("cypress-cucumber-preprocessor/steps");
   });
 });
 (0, _steps.Then)('the Arrow is at the right of the Popper', () => {
-  cy.all(() => cy.get('[data-test="dhis2-uicore-popover"]'), () => cy.get('[data-test="dhis2-uicore-popoverarrow"]')).should(([$popover, $arrow]) => {
+  cy.all(() => cy.get('[data-test="dhis2-uicore-popover"]'), () => cy.get('[data-test="dhis2-uicore-popoverarrow"]')).should(_ref7 => {
+    let [$popover, $arrow] = _ref7;
     const popoverRect = $popover.get(0).getBoundingClientRect();
     const arrowRect = $arrow.get(0).getBoundingClientRect();
     const arrowCenterX = arrowRect.left + arrowRect.width / 2;
@@ -77,7 +84,8 @@ var _steps = require("cypress-cucumber-preprocessor/steps");
   });
 });
 (0, _steps.Then)('the Arrow is at the top half of the Popper', () => {
-  cy.all(() => cy.get('[data-test="dhis2-uicore-popover"]'), () => cy.get('[data-test="dhis2-uicore-popoverarrow"]')).should(([$popover, $arrow]) => {
+  cy.all(() => cy.get('[data-test="dhis2-uicore-popover"]'), () => cy.get('[data-test="dhis2-uicore-popoverarrow"]')).should(_ref8 => {
+    let [$popover, $arrow] = _ref8;
     const popoverRect = $popover.get(0).getBoundingClientRect();
     const arrowRect = $arrow.get(0).getBoundingClientRect();
     const popoverCenterY = popoverRect.top + popoverRect.height / 2;

package/build/cjs/modifiers.js

@@ -19,9 +19,10 @@ const computeArrowPadding = () => {
   return Math.ceil(padding);
 };
 
-const hideArrowWhenDisplaced = ({
-  state
-}) => {
+const hideArrowWhenDisplaced = _ref => {
+  let {
+    state
+  } = _ref;
   const halfArrow = _arrow.ARROW_SIZE / 2;
   const displacement = state.modifiersData.preventOverflow;
   const referenceRect = state.rects.reference;

package/build/cjs/popover.js

@@ -29,19 +29,20 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 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 Popover = ({
-  children,
-  reference,
-  arrow,
-  className,
-  dataTest,
-  elevation,
-  maxWidth,
-  observePopperResize,
-  observeReferenceResize,
-  placement,
-  onClickOutside
-}) => {
+const Popover = _ref => {
+  let {
+    children,
+    reference,
+    arrow,
+    className,
+    dataTest,
+    elevation,
+    maxWidth,
+    observePopperResize,
+    observeReferenceResize,
+    placement,
+    onClickOutside
+  } = _ref;
   const referenceElement = (0, _popper.getReferenceElement)(reference);
   const [popperElement, setPopperElement] = (0, _react.useState)(null);
   const [arrowElement, setArrowElement] = (0, _react.useState)(null);
@@ -72,7 +73,7 @@ const Popover = ({
   }), /*#__PURE__*/_react.default.createElement(_style.default, {
     id: "632767479",
     dynamic: [maxWidth, elevation, _uiConstants.colors.white]
-  }, [`div.__jsx-style-dynamic-selector{max-width:${maxWidth}px;box-shadow:${elevation};background-color:${_uiConstants.colors.white};border-radius:4px;}`])));
+  }, ["div.__jsx-style-dynamic-selector{max-width:".concat(maxWidth, "px;box-shadow:").concat(elevation, ";background-color:").concat(_uiConstants.colors.white, ";border-radius:4px;}")])));
 };
 
 exports.Popover = Popover;

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ShiftedArrow = exports.PlacementLeft = exports.PlacementBottom = exports.PlacementRight = exports.PlacementTop = exports.WithOnClickOutside = exports.NoArrow = exports.HiddenArrow = exports.Flipped = exports.Default = exports.default = void 0;
+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"));
 
@@ -36,8 +36,8 @@ const referenceElementStyle = {
 };
 
 class PopperInBoxWithCenteredReferenceElement extends _react.Component {
-  constructor(...args) {
-    super(...args);
+  constructor() {
+    super(...arguments);
 
     _defineProperty(this, "ref", /*#__PURE__*/(0, _react.createRef)());
   }

package/build/cjs/popover.stories.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Customization = exports.NoArrow = exports.Default = exports.default = void 0;
+exports.default = exports.NoArrow = exports.Default = exports.Customization = void 0;
 
 var _uiConstants = require("@dhis2/ui-constants");
 
@@ -17,26 +17,10 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && 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 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._
-`;
+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: 'Data Display/Popover',
+  title: 'Popover',
   component: _popover.Popover,
   parameters: {
     componentSubtitle: subtitle,

package/build/es/arrow.js

@@ -5,21 +5,24 @@ import PropTypes from 'prop-types';
 import React, { forwardRef } from 'react';
 import { getArrowPosition } from './get-arrow-position.js';
 const ARROW_SIZE = 8;
-const Arrow = /*#__PURE__*/forwardRef(({
-  hidden,
-  popperPlacement,
-  styles
-}, ref) => /*#__PURE__*/React.createElement("div", {
-  "data-test": "dhis2-uicore-popoverarrow",
-  style: styles,
-  ref: ref,
-  className: _JSXStyle.dynamic([["1397459397", [ARROW_SIZE, ARROW_SIZE, ARROW_SIZE / 2, ARROW_SIZE / 2, ARROW_SIZE / 2, ARROW_SIZE / 2, ARROW_SIZE / 2, colors.white, colors.white]]]) + " " + (cx(getArrowPosition(popperPlacement), {
-    hidden
-  }) || "")
-}, /*#__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:${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);}"])));
+const Arrow = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    hidden,
+    popperPlacement,
+    styles
+  } = _ref;
+  return /*#__PURE__*/React.createElement("div", {
+    "data-test": "dhis2-uicore-popoverarrow",
+    style: styles,
+    ref: ref,
+    className: _JSXStyle.dynamic([["1397459397", [ARROW_SIZE, ARROW_SIZE, ARROW_SIZE / 2, ARROW_SIZE / 2, ARROW_SIZE / 2, ARROW_SIZE / 2, ARROW_SIZE / 2, colors.white, colors.white]]]) + " " + (cx(getArrowPosition(popperPlacement), {
+      hidden
+    }) || "")
+  }, /*#__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);}"]));
+});
 Arrow.displayName = 'Arrow';
 Arrow.propTypes = {
   hidden: PropTypes.bool,

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

@@ -15,7 +15,8 @@ Given('a Popover with position left is shifted into view', () => {
   cy.visitStory('Popover', 'Shifted Arrow');
 });
 Then('the Arrow is horizontally aligned with the Popper', () => {
-  cy.all(() => cy.get('[data-test="dhis2-uicore-popover"]'), () => cy.get('[data-test="dhis2-uicore-popoverarrow"]')).should(([$popover, $arrow]) => {
+  cy.all(() => cy.get('[data-test="dhis2-uicore-popover"]'), () => cy.get('[data-test="dhis2-uicore-popoverarrow"]')).should(_ref => {
+    let [$popover, $arrow] = _ref;
     const popoverRect = $popover.get(0).getBoundingClientRect();
     const arrowRect = $arrow.get(0).getBoundingClientRect();
     const popoverCenterX = popoverRect.left + popoverRect.width / 2;
@@ -24,7 +25,8 @@ Then('the Arrow is horizontally aligned with the Popper', () => {
   });
 });
 Then('the Arrow is vertically aligned with the Popper', () => {
-  cy.all(() => cy.get('[data-test="dhis2-uicore-popover"]'), () => cy.get('[data-test="dhis2-uicore-popoverarrow"]')).should(([$popover, $arrow]) => {
+  cy.all(() => cy.get('[data-test="dhis2-uicore-popover"]'), () => cy.get('[data-test="dhis2-uicore-popoverarrow"]')).should(_ref2 => {
+    let [$popover, $arrow] = _ref2;
     const popoverRect = $popover.get(0).getBoundingClientRect();
     const arrowRect = $arrow.get(0).getBoundingClientRect();
     const popoverCenterY = popoverRect.top + popoverRect.height / 2;
@@ -33,7 +35,8 @@ Then('the Arrow is vertically aligned with the Popper', () => {
   });
 });
 Then('the Arrow is vertically aligned with the reference element', () => {
-  cy.all(() => cy.get('[data-test="reference-element"]'), () => cy.get('[data-test="dhis2-uicore-popoverarrow"]')).should(([$reference, $arrow]) => {
+  cy.all(() => cy.get('[data-test="reference-element"]'), () => cy.get('[data-test="dhis2-uicore-popoverarrow"]')).should(_ref3 => {
+    let [$reference, $arrow] = _ref3;
     const referenceRect = $reference.get(0).getBoundingClientRect();
     const arrowRect = $arrow.get(0).getBoundingClientRect();
     const referenceCenterY = referenceRect.top + referenceRect.height / 2;
@@ -42,7 +45,8 @@ Then('the Arrow is vertically aligned with the reference element', () => {
   });
 });
 Then('the Arrow is at the bottom of the Popper', () => {
-  cy.all(() => cy.get('[data-test="dhis2-uicore-popover"]'), () => cy.get('[data-test="dhis2-uicore-popoverarrow"]')).should(([$popover, $arrow]) => {
+  cy.all(() => cy.get('[data-test="dhis2-uicore-popover"]'), () => cy.get('[data-test="dhis2-uicore-popoverarrow"]')).should(_ref4 => {
+    let [$popover, $arrow] = _ref4;
     const popoverRect = $popover.get(0).getBoundingClientRect();
     const arrowRect = $arrow.get(0).getBoundingClientRect();
     const arrowCenterY = arrowRect.top + arrowRect.height / 2;
@@ -50,7 +54,8 @@ Then('the Arrow is at the bottom of the Popper', () => {
   });
 });
 Then('the Arrow is at the left of the Popper', () => {
-  cy.all(() => cy.get('[data-test="dhis2-uicore-popover"]'), () => cy.get('[data-test="dhis2-uicore-popoverarrow"]')).should(([$popover, $arrow]) => {
+  cy.all(() => cy.get('[data-test="dhis2-uicore-popover"]'), () => cy.get('[data-test="dhis2-uicore-popoverarrow"]')).should(_ref5 => {
+    let [$popover, $arrow] = _ref5;
     const popoverRect = $popover.get(0).getBoundingClientRect();
     const arrowRect = $arrow.get(0).getBoundingClientRect();
     const arrowCenterX = arrowRect.left + arrowRect.width / 2;
@@ -58,7 +63,8 @@ Then('the Arrow is at the left of the Popper', () => {
   });
 });
 Then('the Arrow is at the top of the Popper', () => {
-  cy.all(() => cy.get('[data-test="dhis2-uicore-popover"]'), () => cy.get('[data-test="dhis2-uicore-popoverarrow"]')).should(([$popover, $arrow]) => {
+  cy.all(() => cy.get('[data-test="dhis2-uicore-popover"]'), () => cy.get('[data-test="dhis2-uicore-popoverarrow"]')).should(_ref6 => {
+    let [$popover, $arrow] = _ref6;
     const popoverRect = $popover.get(0).getBoundingClientRect();
     const arrowRect = $arrow.get(0).getBoundingClientRect();
     const arrowCenterY = arrowRect.top + arrowRect.height / 2;
@@ -66,7 +72,8 @@ Then('the Arrow is at the top of the Popper', () => {
   });
 });
 Then('the Arrow is at the right of the Popper', () => {
-  cy.all(() => cy.get('[data-test="dhis2-uicore-popover"]'), () => cy.get('[data-test="dhis2-uicore-popoverarrow"]')).should(([$popover, $arrow]) => {
+  cy.all(() => cy.get('[data-test="dhis2-uicore-popover"]'), () => cy.get('[data-test="dhis2-uicore-popoverarrow"]')).should(_ref7 => {
+    let [$popover, $arrow] = _ref7;
     const popoverRect = $popover.get(0).getBoundingClientRect();
     const arrowRect = $arrow.get(0).getBoundingClientRect();
     const arrowCenterX = arrowRect.left + arrowRect.width / 2;
@@ -74,7 +81,8 @@ Then('the Arrow is at the right of the Popper', () => {
   });
 });
 Then('the Arrow is at the top half of the Popper', () => {
-  cy.all(() => cy.get('[data-test="dhis2-uicore-popover"]'), () => cy.get('[data-test="dhis2-uicore-popoverarrow"]')).should(([$popover, $arrow]) => {
+  cy.all(() => cy.get('[data-test="dhis2-uicore-popover"]'), () => cy.get('[data-test="dhis2-uicore-popoverarrow"]')).should(_ref8 => {
+    let [$popover, $arrow] = _ref8;
     const popoverRect = $popover.get(0).getBoundingClientRect();
     const arrowRect = $arrow.get(0).getBoundingClientRect();
     const popoverCenterY = popoverRect.top + popoverRect.height / 2;

package/build/es/modifiers.js

@@ -10,9 +10,10 @@ const computeArrowPadding = () => {
   return Math.ceil(padding);
 };
 
-const hideArrowWhenDisplaced = ({
-  state
-}) => {
+const hideArrowWhenDisplaced = _ref => {
+  let {
+    state
+  } = _ref;
   const halfArrow = ARROW_SIZE / 2;
   const displacement = state.modifiersData.preventOverflow;
   const referenceRect = state.rects.reference;

package/build/es/popover.js

@@ -10,19 +10,20 @@ import React, { useState, useMemo } from 'react';
 import { Arrow } from './arrow.js';
 import { combineModifiers } from './modifiers.js';
 
-const Popover = ({
-  children,
-  reference,
-  arrow,
-  className,
-  dataTest,
-  elevation,
-  maxWidth,
-  observePopperResize,
-  observeReferenceResize,
-  placement,
-  onClickOutside
-}) => {
+const Popover = _ref => {
+  let {
+    children,
+    reference,
+    arrow,
+    className,
+    dataTest,
+    elevation,
+    maxWidth,
+    observePopperResize,
+    observeReferenceResize,
+    placement,
+    onClickOutside
+  } = _ref;
   const referenceElement = getReferenceElement(reference);
   const [popperElement, setPopperElement] = useState(null);
   const [arrowElement, setArrowElement] = useState(null);
@@ -53,7 +54,7 @@ const Popover = ({
   }), /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "632767479",
     dynamic: [maxWidth, elevation, colors.white]
-  }, [`div.__jsx-style-dynamic-selector{max-width:${maxWidth}px;box-shadow:${elevation};background-color:${colors.white};border-radius:4px;}`])));
+  }, ["div.__jsx-style-dynamic-selector{max-width:".concat(maxWidth, "px;box-shadow:").concat(elevation, ";background-color:").concat(colors.white, ";border-radius:4px;}")])));
 };
 
 Popover.defaultProps = {

package/build/es/popover.stories.e2e.js

@@ -20,8 +20,8 @@ const referenceElementStyle = {
 };
 
 class PopperInBoxWithCenteredReferenceElement extends Component {
-  constructor(...args) {
-    super(...args);
+  constructor() {
+    super(...arguments);
 
     _defineProperty(this, "ref", /*#__PURE__*/createRef());
   }

package/build/es/popover.stories.js

@@ -3,26 +3,10 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 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 = `
-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._
-`;
+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";
 export default {
-  title: 'Data Display/Popover',
+  title: 'Popover',
   component: Popover,
   parameters: {
     componentSubtitle: subtitle,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/popover",
-    "version": "8.2.0",
+    "version": "8.2.3",
     "description": "UI Popover",
     "repository": {
         "type": "git",
@@ -32,9 +32,9 @@
     },
     "dependencies": {
         "@dhis2/prop-types": "^3.0.0-beta.1",
-        "@dhis2-ui/layer": "8.2.0",
-        "@dhis2-ui/popper": "8.2.0",
-        "@dhis2/ui-constants": "8.2.0",
+        "@dhis2-ui/layer": "8.2.3",
+        "@dhis2-ui/popper": "8.2.3",
+        "@dhis2/ui-constants": "8.2.3",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },