@dhis2-ui/popover 10.16.3 → 10.16.4

package/build/cjs/arrow.js

@@ -10,28 +10,24 @@ 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(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 _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 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,
-    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:${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 = exports.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);}"])));
 Arrow.displayName = 'Arrow';
 Arrow.propTypes = {
   hidden: _propTypes.default.bool,

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

@@ -17,8 +17,7 @@ var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preproces
   cy.visitStory('Popover', 'Shifted Arrow');
 });
 (0, _cypressCucumberPreprocessor.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(_ref => {
-    let [$popover, $arrow] = _ref;
+  cy.all(() => cy.get('[data-test="dhis2-uicore-popover"]'), () => cy.get('[data-test="dhis2-uicore-popoverarrow"]')).should(([$popover, $arrow]) => {
     const popoverRect = $popover.get(0).getBoundingClientRect();
     const arrowRect = $arrow.get(0).getBoundingClientRect();
     const popoverCenterX = popoverRect.left + popoverRect.width / 2;
@@ -27,8 +26,7 @@ var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preproces
   });
 });
 (0, _cypressCucumberPreprocessor.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(_ref2 => {
-    let [$popover, $arrow] = _ref2;
+  cy.all(() => cy.get('[data-test="dhis2-uicore-popover"]'), () => cy.get('[data-test="dhis2-uicore-popoverarrow"]')).should(([$popover, $arrow]) => {
     const popoverRect = $popover.get(0).getBoundingClientRect();
     const arrowRect = $arrow.get(0).getBoundingClientRect();
     const popoverCenterY = popoverRect.top + popoverRect.height / 2;
@@ -37,8 +35,7 @@ var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preproces
   });
 });
 (0, _cypressCucumberPreprocessor.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(_ref3 => {
-    let [$reference, $arrow] = _ref3;
+  cy.all(() => cy.get('[data-test="reference-element"]'), () => cy.get('[data-test="dhis2-uicore-popoverarrow"]')).should(([$reference, $arrow]) => {
     const referenceRect = $reference.get(0).getBoundingClientRect();
     const arrowRect = $arrow.get(0).getBoundingClientRect();
     const referenceCenterY = referenceRect.top + referenceRect.height / 2;
@@ -47,8 +44,7 @@ var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preproces
   });
 });
 (0, _cypressCucumberPreprocessor.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(_ref4 => {
-    let [$popover, $arrow] = _ref4;
+  cy.all(() => cy.get('[data-test="dhis2-uicore-popover"]'), () => cy.get('[data-test="dhis2-uicore-popoverarrow"]')).should(([$popover, $arrow]) => {
     const popoverRect = $popover.get(0).getBoundingClientRect();
     const arrowRect = $arrow.get(0).getBoundingClientRect();
     const arrowCenterY = arrowRect.top + arrowRect.height / 2;
@@ -56,8 +52,7 @@ var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preproces
   });
 });
 (0, _cypressCucumberPreprocessor.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(_ref5 => {
-    let [$popover, $arrow] = _ref5;
+  cy.all(() => cy.get('[data-test="dhis2-uicore-popover"]'), () => cy.get('[data-test="dhis2-uicore-popoverarrow"]')).should(([$popover, $arrow]) => {
     const popoverRect = $popover.get(0).getBoundingClientRect();
     const arrowRect = $arrow.get(0).getBoundingClientRect();
     const arrowCenterX = arrowRect.left + arrowRect.width / 2;
@@ -65,8 +60,7 @@ var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preproces
   });
 });
 (0, _cypressCucumberPreprocessor.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(_ref6 => {
-    let [$popover, $arrow] = _ref6;
+  cy.all(() => cy.get('[data-test="dhis2-uicore-popover"]'), () => cy.get('[data-test="dhis2-uicore-popoverarrow"]')).should(([$popover, $arrow]) => {
     const popoverRect = $popover.get(0).getBoundingClientRect();
     const arrowRect = $arrow.get(0).getBoundingClientRect();
     const arrowCenterY = arrowRect.top + arrowRect.height / 2;
@@ -74,8 +68,7 @@ var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preproces
   });
 });
 (0, _cypressCucumberPreprocessor.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(_ref7 => {
-    let [$popover, $arrow] = _ref7;
+  cy.all(() => cy.get('[data-test="dhis2-uicore-popover"]'), () => cy.get('[data-test="dhis2-uicore-popoverarrow"]')).should(([$popover, $arrow]) => {
     const popoverRect = $popover.get(0).getBoundingClientRect();
     const arrowRect = $arrow.get(0).getBoundingClientRect();
     const arrowCenterX = arrowRect.left + arrowRect.width / 2;
@@ -83,8 +76,7 @@ var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preproces
   });
 });
 (0, _cypressCucumberPreprocessor.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(_ref8 => {
-    let [$popover, $arrow] = _ref8;
+  cy.all(() => cy.get('[data-test="dhis2-uicore-popover"]'), () => cy.get('[data-test="dhis2-uicore-popoverarrow"]')).should(([$popover, $arrow]) => {
     const popoverRect = $popover.get(0).getBoundingClientRect();
     const arrowRect = $arrow.get(0).getBoundingClientRect();
     const popoverCenterY = popoverRect.top + popoverRect.height / 2;

package/build/cjs/modifiers.js

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

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

@@ -7,8 +7,7 @@ exports.default = exports.WithOnClickOutside = exports.ShiftedArrow = exports.Pl
 var _propTypes = _interopRequireDefault(require("prop-types"));
 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 _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 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; }
@@ -28,8 +27,8 @@ const referenceElementStyle = {
   padding: 6
 };
 class PopperInBoxWithCenteredReferenceElement extends _react.Component {
-  constructor() {
-    super(...arguments);
+  constructor(...args) {
+    super(...args);
     _defineProperty(this, "ref", /*#__PURE__*/(0, _react.createRef)());
   }
   render() {

package/build/cjs/popover.js

@@ -12,24 +12,22 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _react = _interopRequireWildcard(require("react"));
 var _arrow = require("./arrow.js");
 var _modifiers = require("./modifiers.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 _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 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,
-    reference,
-    arrow = true,
-    className,
-    dataTest = 'dhis2-uicore-popover',
-    elevation = _uiConstants.elevations.popover,
-    maxWidth = 360,
-    observePopperResize,
-    observeReferenceResize,
-    placement = 'top',
-    onClickOutside
-  } = _ref;
+const Popover = ({
+  children,
+  reference,
+  arrow = true,
+  className,
+  dataTest = 'dhis2-uicore-popover',
+  elevation = _uiConstants.elevations.popover,
+  maxWidth = 360,
+  observePopperResize,
+  observeReferenceResize,
+  placement = 'top',
+  onClickOutside
+}) => {
   const referenceElement = (0, _popper.getReferenceElement)(reference);
   const [popperElement, setPopperElement] = (0, _react.useState)(null);
   const [arrowElement, setArrowElement] = (0, _react.useState)(null);

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

@@ -7,8 +7,7 @@ exports.default = exports.NoArrow = exports.Default = exports.Customization = vo
 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 _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 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 = `

package/build/es/arrow.js

@@ -5,24 +5,21 @@ 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((_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:${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(({
+  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);}"])));
 Arrow.displayName = 'Arrow';
 Arrow.propTypes = {
   hidden: PropTypes.bool,

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

@@ -15,8 +15,7 @@ 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(_ref => {
-    let [$popover, $arrow] = _ref;
+  cy.all(() => cy.get('[data-test="dhis2-uicore-popover"]'), () => cy.get('[data-test="dhis2-uicore-popoverarrow"]')).should(([$popover, $arrow]) => {
     const popoverRect = $popover.get(0).getBoundingClientRect();
     const arrowRect = $arrow.get(0).getBoundingClientRect();
     const popoverCenterX = popoverRect.left + popoverRect.width / 2;
@@ -25,8 +24,7 @@ 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(_ref2 => {
-    let [$popover, $arrow] = _ref2;
+  cy.all(() => cy.get('[data-test="dhis2-uicore-popover"]'), () => cy.get('[data-test="dhis2-uicore-popoverarrow"]')).should(([$popover, $arrow]) => {
     const popoverRect = $popover.get(0).getBoundingClientRect();
     const arrowRect = $arrow.get(0).getBoundingClientRect();
     const popoverCenterY = popoverRect.top + popoverRect.height / 2;
@@ -35,8 +33,7 @@ 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(_ref3 => {
-    let [$reference, $arrow] = _ref3;
+  cy.all(() => cy.get('[data-test="reference-element"]'), () => cy.get('[data-test="dhis2-uicore-popoverarrow"]')).should(([$reference, $arrow]) => {
     const referenceRect = $reference.get(0).getBoundingClientRect();
     const arrowRect = $arrow.get(0).getBoundingClientRect();
     const referenceCenterY = referenceRect.top + referenceRect.height / 2;
@@ -45,8 +42,7 @@ 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(_ref4 => {
-    let [$popover, $arrow] = _ref4;
+  cy.all(() => cy.get('[data-test="dhis2-uicore-popover"]'), () => cy.get('[data-test="dhis2-uicore-popoverarrow"]')).should(([$popover, $arrow]) => {
     const popoverRect = $popover.get(0).getBoundingClientRect();
     const arrowRect = $arrow.get(0).getBoundingClientRect();
     const arrowCenterY = arrowRect.top + arrowRect.height / 2;
@@ -54,8 +50,7 @@ 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(_ref5 => {
-    let [$popover, $arrow] = _ref5;
+  cy.all(() => cy.get('[data-test="dhis2-uicore-popover"]'), () => cy.get('[data-test="dhis2-uicore-popoverarrow"]')).should(([$popover, $arrow]) => {
     const popoverRect = $popover.get(0).getBoundingClientRect();
     const arrowRect = $arrow.get(0).getBoundingClientRect();
     const arrowCenterX = arrowRect.left + arrowRect.width / 2;
@@ -63,8 +58,7 @@ 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(_ref6 => {
-    let [$popover, $arrow] = _ref6;
+  cy.all(() => cy.get('[data-test="dhis2-uicore-popover"]'), () => cy.get('[data-test="dhis2-uicore-popoverarrow"]')).should(([$popover, $arrow]) => {
     const popoverRect = $popover.get(0).getBoundingClientRect();
     const arrowRect = $arrow.get(0).getBoundingClientRect();
     const arrowCenterY = arrowRect.top + arrowRect.height / 2;
@@ -72,8 +66,7 @@ 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(_ref7 => {
-    let [$popover, $arrow] = _ref7;
+  cy.all(() => cy.get('[data-test="dhis2-uicore-popover"]'), () => cy.get('[data-test="dhis2-uicore-popoverarrow"]')).should(([$popover, $arrow]) => {
     const popoverRect = $popover.get(0).getBoundingClientRect();
     const arrowRect = $arrow.get(0).getBoundingClientRect();
     const arrowCenterX = arrowRect.left + arrowRect.width / 2;
@@ -81,8 +74,7 @@ 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(_ref8 => {
-    let [$popover, $arrow] = _ref8;
+  cy.all(() => cy.get('[data-test="dhis2-uicore-popover"]'), () => cy.get('[data-test="dhis2-uicore-popoverarrow"]')).should(([$popover, $arrow]) => {
     const popoverRect = $popover.get(0).getBoundingClientRect();
     const arrowRect = $arrow.get(0).getBoundingClientRect();
     const popoverCenterY = popoverRect.top + popoverRect.height / 2;

package/build/es/modifiers.js

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

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

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

package/build/es/popover.js

@@ -7,20 +7,19 @@ 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,
-    reference,
-    arrow = true,
-    className,
-    dataTest = 'dhis2-uicore-popover',
-    elevation = elevations.popover,
-    maxWidth = 360,
-    observePopperResize,
-    observeReferenceResize,
-    placement = 'top',
-    onClickOutside
-  } = _ref;
+const Popover = ({
+  children,
+  reference,
+  arrow = true,
+  className,
+  dataTest = 'dhis2-uicore-popover',
+  elevation = elevations.popover,
+  maxWidth = 360,
+  observePopperResize,
+  observeReferenceResize,
+  placement = 'top',
+  onClickOutside
+}) => {
   const referenceElement = getReferenceElement(reference);
   const [popperElement, setPopperElement] = useState(null);
   const [arrowElement, setArrowElement] = useState(null);

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/popover",
-    "version": "10.16.3",
+    "version": "10.16.4",
     "description": "UI Popover",
     "repository": {
         "type": "git",
@@ -33,9 +33,9 @@
     },
     "dependencies": {
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2-ui/layer": "10.16.3",
-        "@dhis2-ui/popper": "10.16.3",
-        "@dhis2/ui-constants": "10.16.3",
+        "@dhis2-ui/layer": "10.16.4",
+        "@dhis2-ui/popper": "10.16.4",
+        "@dhis2/ui-constants": "10.16.4",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },