@dhis2-ui/popper 10.16.3 → 10.16.4

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

@@ -11,16 +11,14 @@ var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preproces
   cy.visitStory('Popper', 'Virtual Element As Reference');
 });
 (0, _cypressCucumberPreprocessor.Then)('the left of the popper is aligned with the left of the reference element', () => {
-  cy.all(() => cy.get('button:contains("Reference")'), () => cy.get('[data-test="dhis2-uicore-popper"]')).should(_ref => {
-    let [$reference, $popper] = _ref;
+  cy.all(() => cy.get('button:contains("Reference")'), () => cy.get('[data-test="dhis2-uicore-popper"]')).should(([$reference, $popper]) => {
     const referenceRect = $reference.get(0).getBoundingClientRect();
     const popperRect = $popper.get(0).getBoundingClientRect();
     expect(referenceRect.left).to.be.closeTo(popperRect.left, 1);
   });
 });
 (0, _cypressCucumberPreprocessor.Then)('the top of the popper is adjacent to the bottom of the reference element', () => {
-  cy.all(() => cy.get('button:contains("Reference")'), () => cy.get('[data-test="dhis2-uicore-popper"]')).should(_ref2 => {
-    let [$button, $popper] = _ref2;
+  cy.all(() => cy.get('button:contains("Reference")'), () => cy.get('[data-test="dhis2-uicore-popper"]')).should(([$button, $popper]) => {
     const buttonRect = $button.get(0).getBoundingClientRect();
     const popperRect = $popper.get(0).getBoundingClientRect();
     expect(buttonRect.bottom).to.be.closeTo(popperRect.top, 1);

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

@@ -42,29 +42,25 @@ var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preproces
 // Directional assertions
 // top
 (0, _cypressCucumberPreprocessor.Then)('the bottom of the popper is adjacent to the top of the reference element', () => {
-  getRefAndPopperPositions().should(_ref => {
-    let [refPos, popperPos] = _ref;
+  getRefAndPopperPositions().should(([refPos, popperPos]) => {
     expect(refPos.top).to.equal(popperPos.bottom);
   });
 });
 // right
 (0, _cypressCucumberPreprocessor.Then)('the left of the popper is adjacent to the right of the reference element', () => {
-  getRefAndPopperPositions().should(_ref2 => {
-    let [refPos, popperPos] = _ref2;
+  getRefAndPopperPositions().should(([refPos, popperPos]) => {
     expect(refPos.right).to.equal(popperPos.left);
   });
 });
 // bottom
 (0, _cypressCucumberPreprocessor.Then)('the top of the popper is adjacent to the bottom of the reference element', () => {
-  getRefAndPopperPositions().should(_ref3 => {
-    let [refPos, popperPos] = _ref3;
+  getRefAndPopperPositions().should(([refPos, popperPos]) => {
     expect(refPos.bottom).to.equal(popperPos.top);
   });
 });
 // left
 (0, _cypressCucumberPreprocessor.Then)('the right of the popper is adjacent to the left of the reference element', () => {
-  getRefAndPopperPositions().should(_ref4 => {
-    let [refPos, popperPos] = _ref4;
+  getRefAndPopperPositions().should(([refPos, popperPos]) => {
     expect(refPos.left).to.equal(popperPos.right);
   });
 });
@@ -72,15 +68,13 @@ var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preproces
 // Horizontal alignments
 // *-start
 (0, _cypressCucumberPreprocessor.Then)('it is horizontally left aligned with the reference element', () => {
-  getRefAndPopperPositions().should(_ref5 => {
-    let [refPos, popperPos] = _ref5;
+  getRefAndPopperPositions().should(([refPos, popperPos]) => {
     expect(refPos.left).to.equal(popperPos.left);
   });
 });
 // * (no suffix)
 (0, _cypressCucumberPreprocessor.Then)('it is horizontally center aligned with the reference element', () => {
-  getRefAndPopperPositions().should(_ref6 => {
-    let [refPos, popperPos] = _ref6;
+  getRefAndPopperPositions().should(([refPos, popperPos]) => {
     const refCenterX = refPos.left + refPos.width / 2;
     const popperCenterX = popperPos.left + popperPos.width / 2;
     expect(refCenterX).to.equal(popperCenterX);
@@ -88,8 +82,7 @@ var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preproces
 });
 // *-end
 (0, _cypressCucumberPreprocessor.Then)('it is horizontally right aligned with the reference element', () => {
-  getRefAndPopperPositions().should(_ref7 => {
-    let [refPos, popperPos] = _ref7;
+  getRefAndPopperPositions().should(([refPos, popperPos]) => {
     expect(refPos.right).to.equal(popperPos.right);
   });
 });
@@ -97,15 +90,13 @@ var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preproces
 // Vertical alignments
 // *-start
 (0, _cypressCucumberPreprocessor.Then)('it is vertically top aligned with the reference element', () => {
-  getRefAndPopperPositions().should(_ref8 => {
-    let [refPos, popperPos] = _ref8;
+  getRefAndPopperPositions().should(([refPos, popperPos]) => {
     expect(refPos.top).to.equal(popperPos.top);
   });
 });
 // * (no suffix)
 (0, _cypressCucumberPreprocessor.Then)('it is vertically center aligned with the reference element', () => {
-  getRefAndPopperPositions().should(_ref9 => {
-    let [refPos, popperPos] = _ref9;
+  getRefAndPopperPositions().should(([refPos, popperPos]) => {
     const refCenterY = refPos.top + refPos.height / 2;
     const popperCenterY = popperPos.top + popperPos.height / 2;
     expect(refCenterY).to.equal(popperCenterY);
@@ -113,8 +104,7 @@ var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preproces
 });
 // *-end
 (0, _cypressCucumberPreprocessor.Then)('it is vertically bottom aligned with the reference element', () => {
-  getRefAndPopperPositions().should(_ref10 => {
-    let [refPos, popperPos] = _ref10;
+  getRefAndPopperPositions().should(([refPos, popperPos]) => {
     expect(refPos.bottom).to.equal(popperPos.bottom);
   });
 });

package/build/cjs/modifiers.js

@@ -6,16 +6,15 @@ Object.defineProperty(exports, "__esModule", {
 exports.resizeObserver = exports.getBaseModifiers = exports.deduplicateModifiers = void 0;
 var _resizeObserverPolyfill = _interopRequireDefault(require("resize-observer-polyfill"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const attachResizeObservers = _ref => {
-  let {
-    state: {
-      elements
-    },
-    options,
-    instance: {
-      update
-    }
-  } = _ref;
+const attachResizeObservers = ({
+  state: {
+    elements
+  },
+  options,
+  instance: {
+    update
+  }
+}) => {
   const observers = Object.keys(options).reduce((acc, elementKey) => {
     if (options[elementKey]) {
       const observer = new _resizeObserverPolyfill.default(update);
@@ -30,47 +29,41 @@ const attachResizeObservers = _ref => {
     });
   };
 };
-const getBaseModifiers = _ref2 => {
-  let {
-    observePopperResize,
-    observeReferenceResize
-  } = _ref2;
-  return [{
-    name: 'preventOverflow',
-    options: {
-      altAxis: true,
-      rootBoundary: 'document',
-      boundary: document.body
-    }
-  }, {
-    name: 'flip',
-    options: {
-      rootBoundary: 'document',
-      boundary: document.body
-    }
-  }, {
-    name: 'resizeObserver',
-    enabled: true,
-    phase: 'write',
-    fn: () => {},
-    effect: attachResizeObservers,
-    options: {
-      popper: observePopperResize,
-      reference: observeReferenceResize
-    }
-  }];
-};
+const getBaseModifiers = ({
+  observePopperResize,
+  observeReferenceResize
+}) => [{
+  name: 'preventOverflow',
+  options: {
+    altAxis: true,
+    rootBoundary: 'document',
+    boundary: document.body
+  }
+}, {
+  name: 'flip',
+  options: {
+    rootBoundary: 'document',
+    boundary: document.body
+  }
+}, {
+  name: 'resizeObserver',
+  enabled: true,
+  phase: 'write',
+  fn: () => {},
+  effect: attachResizeObservers,
+  options: {
+    popper: observePopperResize,
+    reference: observeReferenceResize
+  }
+}];
 exports.getBaseModifiers = getBaseModifiers;
 const deduplicateModifiers = (modifiers, resizeObservers) => {
   // Deduplicate modifiers from props and baseModifiers,
   // when duplicates are encountered (by name), use the
   // modifier from props so each Popper can be fully custom
-  return getBaseModifiers(resizeObservers).filter(_ref3 => {
-    let {
-      name
-    } = _ref3;
-    return !modifiers.some(m => m.name === name);
-  }).concat(modifiers);
+  return getBaseModifiers(resizeObservers).filter(({
+    name
+  }) => !modifiers.some(m => m.name === name)).concat(modifiers);
 };
 exports.deduplicateModifiers = deduplicateModifiers;
 const resizeObserver = exports.resizeObserver = {
@@ -78,16 +71,15 @@ const resizeObserver = exports.resizeObserver = {
   enabled: true,
   phase: 'write',
   fn: () => {},
-  effect: _ref4 => {
-    let {
-      state: {
-        elements
-      },
-      options,
-      instance: {
-        update
-      }
-    } = _ref4;
+  effect: ({
+    state: {
+      elements
+    },
+    options,
+    instance: {
+      update
+    }
+  }) => {
     const observers = Object.keys(options).reduce((acc, elementKey) => {
       if (options[elementKey]) {
         const observer = new _resizeObserverPolyfill.default(update);

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

@@ -8,13 +8,11 @@ var _style = _interopRequireDefault(require("styled-jsx/style"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _react = _interopRequireWildcard(require("react"));
 var _popper = require("./popper.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 PopperPlacement = _ref => {
-  let {
-    placement
-  } = _ref;
+const PopperPlacement = ({
+  placement
+}) => {
   const ref = (0, _react.useRef)();
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "jsx-305551169" + " " + "box"

package/build/cjs/popper.js

@@ -10,8 +10,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _reactPopper = require("react-popper");
 var _getReferenceElement = require("./get-reference-element.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 flipPlacement = placement => {
@@ -26,19 +25,18 @@ const flipPlacement = placement => {
 
 // Stable object reference
 const staticArray = [];
-const Popper = _ref => {
-  let {
-    children,
-    className,
-    dataTest = 'dhis2-uicore-popper',
-    modifiers = staticArray,
-    observePopperResize,
-    observeReferenceResize,
-    onFirstUpdate,
-    placement = 'auto',
-    reference,
-    strategy
-  } = _ref;
+const Popper = ({
+  children,
+  className,
+  dataTest = 'dhis2-uicore-popper',
+  modifiers = staticArray,
+  observePopperResize,
+  observeReferenceResize,
+  onFirstUpdate,
+  placement = 'auto',
+  reference,
+  strategy
+}) => {
   const referenceElement = (0, _getReferenceElement.getReferenceElement)(reference);
   const [popperElement, setPopperElement] = (0, _react.useState)(null);
   const deduplicatedModifiers = (0, _react.useMemo)(() => (0, _modifiers.deduplicateModifiers)(modifiers, {
@@ -57,7 +55,7 @@ const Popper = _ref => {
   (0, _react.useEffect)(() => {
     if (popperElement) {
       var _popperElement$firstE;
-      popperElement === null || popperElement === void 0 ? void 0 : (_popperElement$firstE = popperElement.firstElementChild) === null || _popperElement$firstE === void 0 ? void 0 : _popperElement$firstE.focus();
+      popperElement === null || popperElement === void 0 || (_popperElement$firstE = popperElement.firstElementChild) === null || _popperElement$firstE === void 0 || _popperElement$firstE.focus();
     }
   }, [popperElement]);
   return /*#__PURE__*/_react.default.createElement("div", _extends({

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

@@ -7,8 +7,7 @@ exports.default = exports.VirtualElementRef = exports.TopStart = exports.TopEnd
 var _uiConstants = require("@dhis2/ui-constants");
 var _react = _interopRequireWildcard(require("react"));
 var _popper = require("./popper.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 description = `
 A tool for adding additional information or content outside of the document flow, used for example in the Tooltip or Popover components.

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

@@ -9,16 +9,14 @@ Given('a Popper with placement bottom-start has a virtual element as its referen
   cy.visitStory('Popper', 'Virtual Element As Reference');
 });
 Then('the left of the popper is aligned with the left of the reference element', () => {
-  cy.all(() => cy.get('button:contains("Reference")'), () => cy.get('[data-test="dhis2-uicore-popper"]')).should(_ref => {
-    let [$reference, $popper] = _ref;
+  cy.all(() => cy.get('button:contains("Reference")'), () => cy.get('[data-test="dhis2-uicore-popper"]')).should(([$reference, $popper]) => {
     const referenceRect = $reference.get(0).getBoundingClientRect();
     const popperRect = $popper.get(0).getBoundingClientRect();
     expect(referenceRect.left).to.be.closeTo(popperRect.left, 1);
   });
 });
 Then('the top of the popper is adjacent to the bottom of the reference element', () => {
-  cy.all(() => cy.get('button:contains("Reference")'), () => cy.get('[data-test="dhis2-uicore-popper"]')).should(_ref2 => {
-    let [$button, $popper] = _ref2;
+  cy.all(() => cy.get('button:contains("Reference")'), () => cy.get('[data-test="dhis2-uicore-popper"]')).should(([$button, $popper]) => {
     const buttonRect = $button.get(0).getBoundingClientRect();
     const popperRect = $popper.get(0).getBoundingClientRect();
     expect(buttonRect.bottom).to.be.closeTo(popperRect.top, 1);

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

@@ -41,29 +41,25 @@ Given('the Popper is rendered with placement left-end', () => {
 // Directional assertions
 // top
 Then('the bottom of the popper is adjacent to the top of the reference element', () => {
-  getRefAndPopperPositions().should(_ref => {
-    let [refPos, popperPos] = _ref;
+  getRefAndPopperPositions().should(([refPos, popperPos]) => {
     expect(refPos.top).to.equal(popperPos.bottom);
   });
 });
 // right
 Then('the left of the popper is adjacent to the right of the reference element', () => {
-  getRefAndPopperPositions().should(_ref2 => {
-    let [refPos, popperPos] = _ref2;
+  getRefAndPopperPositions().should(([refPos, popperPos]) => {
     expect(refPos.right).to.equal(popperPos.left);
   });
 });
 // bottom
 Then('the top of the popper is adjacent to the bottom of the reference element', () => {
-  getRefAndPopperPositions().should(_ref3 => {
-    let [refPos, popperPos] = _ref3;
+  getRefAndPopperPositions().should(([refPos, popperPos]) => {
     expect(refPos.bottom).to.equal(popperPos.top);
   });
 });
 // left
 Then('the right of the popper is adjacent to the left of the reference element', () => {
-  getRefAndPopperPositions().should(_ref4 => {
-    let [refPos, popperPos] = _ref4;
+  getRefAndPopperPositions().should(([refPos, popperPos]) => {
     expect(refPos.left).to.equal(popperPos.right);
   });
 });
@@ -71,15 +67,13 @@ Then('the right of the popper is adjacent to the left of the reference element',
 // Horizontal alignments
 // *-start
 Then('it is horizontally left aligned with the reference element', () => {
-  getRefAndPopperPositions().should(_ref5 => {
-    let [refPos, popperPos] = _ref5;
+  getRefAndPopperPositions().should(([refPos, popperPos]) => {
     expect(refPos.left).to.equal(popperPos.left);
   });
 });
 // * (no suffix)
 Then('it is horizontally center aligned with the reference element', () => {
-  getRefAndPopperPositions().should(_ref6 => {
-    let [refPos, popperPos] = _ref6;
+  getRefAndPopperPositions().should(([refPos, popperPos]) => {
     const refCenterX = refPos.left + refPos.width / 2;
     const popperCenterX = popperPos.left + popperPos.width / 2;
     expect(refCenterX).to.equal(popperCenterX);
@@ -87,8 +81,7 @@ Then('it is horizontally center aligned with the reference element', () => {
 });
 // *-end
 Then('it is horizontally right aligned with the reference element', () => {
-  getRefAndPopperPositions().should(_ref7 => {
-    let [refPos, popperPos] = _ref7;
+  getRefAndPopperPositions().should(([refPos, popperPos]) => {
     expect(refPos.right).to.equal(popperPos.right);
   });
 });
@@ -96,15 +89,13 @@ Then('it is horizontally right aligned with the reference element', () => {
 // Vertical alignments
 // *-start
 Then('it is vertically top aligned with the reference element', () => {
-  getRefAndPopperPositions().should(_ref8 => {
-    let [refPos, popperPos] = _ref8;
+  getRefAndPopperPositions().should(([refPos, popperPos]) => {
     expect(refPos.top).to.equal(popperPos.top);
   });
 });
 // * (no suffix)
 Then('it is vertically center aligned with the reference element', () => {
-  getRefAndPopperPositions().should(_ref9 => {
-    let [refPos, popperPos] = _ref9;
+  getRefAndPopperPositions().should(([refPos, popperPos]) => {
     const refCenterY = refPos.top + refPos.height / 2;
     const popperCenterY = popperPos.top + popperPos.height / 2;
     expect(refCenterY).to.equal(popperCenterY);
@@ -112,8 +103,7 @@ Then('it is vertically center aligned with the reference element', () => {
 });
 // *-end
 Then('it is vertically bottom aligned with the reference element', () => {
-  getRefAndPopperPositions().should(_ref10 => {
-    let [refPos, popperPos] = _ref10;
+  getRefAndPopperPositions().should(([refPos, popperPos]) => {
     expect(refPos.bottom).to.equal(popperPos.bottom);
   });
 });

package/build/es/modifiers.js

@@ -1,14 +1,13 @@
 import ResizeObserver from 'resize-observer-polyfill';
-const attachResizeObservers = _ref => {
-  let {
-    state: {
-      elements
-    },
-    options,
-    instance: {
-      update
-    }
-  } = _ref;
+const attachResizeObservers = ({
+  state: {
+    elements
+  },
+  options,
+  instance: {
+    update
+  }
+}) => {
   const observers = Object.keys(options).reduce((acc, elementKey) => {
     if (options[elementKey]) {
       const observer = new ResizeObserver(update);
@@ -23,62 +22,55 @@ const attachResizeObservers = _ref => {
     });
   };
 };
-export const getBaseModifiers = _ref2 => {
-  let {
-    observePopperResize,
-    observeReferenceResize
-  } = _ref2;
-  return [{
-    name: 'preventOverflow',
-    options: {
-      altAxis: true,
-      rootBoundary: 'document',
-      boundary: document.body
-    }
-  }, {
-    name: 'flip',
-    options: {
-      rootBoundary: 'document',
-      boundary: document.body
-    }
-  }, {
-    name: 'resizeObserver',
-    enabled: true,
-    phase: 'write',
-    fn: () => {},
-    effect: attachResizeObservers,
-    options: {
-      popper: observePopperResize,
-      reference: observeReferenceResize
-    }
-  }];
-};
+export const getBaseModifiers = ({
+  observePopperResize,
+  observeReferenceResize
+}) => [{
+  name: 'preventOverflow',
+  options: {
+    altAxis: true,
+    rootBoundary: 'document',
+    boundary: document.body
+  }
+}, {
+  name: 'flip',
+  options: {
+    rootBoundary: 'document',
+    boundary: document.body
+  }
+}, {
+  name: 'resizeObserver',
+  enabled: true,
+  phase: 'write',
+  fn: () => {},
+  effect: attachResizeObservers,
+  options: {
+    popper: observePopperResize,
+    reference: observeReferenceResize
+  }
+}];
 export const deduplicateModifiers = (modifiers, resizeObservers) => {
   // Deduplicate modifiers from props and baseModifiers,
   // when duplicates are encountered (by name), use the
   // modifier from props so each Popper can be fully custom
-  return getBaseModifiers(resizeObservers).filter(_ref3 => {
-    let {
-      name
-    } = _ref3;
-    return !modifiers.some(m => m.name === name);
-  }).concat(modifiers);
+  return getBaseModifiers(resizeObservers).filter(({
+    name
+  }) => !modifiers.some(m => m.name === name)).concat(modifiers);
 };
 export const resizeObserver = {
   name: 'resizeObserver',
   enabled: true,
   phase: 'write',
   fn: () => {},
-  effect: _ref4 => {
-    let {
-      state: {
-        elements
-      },
-      options,
-      instance: {
-        update
-      }
-    } = _ref4;
+  effect: ({
+    state: {
+      elements
+    },
+    options,
+    instance: {
+      update
+    }
+  }) => {
     const observers = Object.keys(options).reduce((acc, elementKey) => {
       if (options[elementKey]) {
         const observer = new ResizeObserver(update);

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

@@ -2,10 +2,9 @@ import _JSXStyle from "styled-jsx/style";
 import PropTypes from 'prop-types';
 import React, { useRef, useState } from 'react';
 import { Popper } from './popper.js';
-const PopperPlacement = _ref => {
-  let {
-    placement
-  } = _ref;
+const PopperPlacement = ({
+  placement
+}) => {
   const ref = useRef();
   return /*#__PURE__*/React.createElement("div", {
     className: "jsx-305551169" + " " + "box"

package/build/es/popper.js

@@ -17,19 +17,18 @@ const flipPlacement = placement => {
 
 // Stable object reference
 const staticArray = [];
-const Popper = _ref => {
-  let {
-    children,
-    className,
-    dataTest = 'dhis2-uicore-popper',
-    modifiers = staticArray,
-    observePopperResize,
-    observeReferenceResize,
-    onFirstUpdate,
-    placement = 'auto',
-    reference,
-    strategy
-  } = _ref;
+const Popper = ({
+  children,
+  className,
+  dataTest = 'dhis2-uicore-popper',
+  modifiers = staticArray,
+  observePopperResize,
+  observeReferenceResize,
+  onFirstUpdate,
+  placement = 'auto',
+  reference,
+  strategy
+}) => {
   const referenceElement = getReferenceElement(reference);
   const [popperElement, setPopperElement] = useState(null);
   const deduplicatedModifiers = useMemo(() => deduplicateModifiers(modifiers, {
@@ -48,7 +47,7 @@ const Popper = _ref => {
   useEffect(() => {
     if (popperElement) {
       var _popperElement$firstE;
-      popperElement === null || popperElement === void 0 ? void 0 : (_popperElement$firstE = popperElement.firstElementChild) === null || _popperElement$firstE === void 0 ? void 0 : _popperElement$firstE.focus();
+      popperElement === null || popperElement === void 0 || (_popperElement$firstE = popperElement.firstElementChild) === null || _popperElement$firstE === void 0 || _popperElement$firstE.focus();
     }
   }, [popperElement]);
   return /*#__PURE__*/React.createElement("div", _extends({

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/popper",
-    "version": "10.16.3",
+    "version": "10.16.4",
     "description": "UI Popper",
     "repository": {
         "type": "git",
@@ -33,7 +33,7 @@
     },
     "dependencies": {
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2/ui-constants": "10.16.3",
+        "@dhis2/ui-constants": "10.16.4",
         "@popperjs/core": "^2.11.8",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2",