@dhis2-ui/popper 9.10.3 → 9.11.1-beta.1

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

@@ -1,7 +1,6 @@
 "use strict";
 
 var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
-
 (0, _cypressCucumberPreprocessor.Given)('a Popper with placement bottom-start has a React Ref as its reference', () => {
   cy.visitStory('Popper', 'React Ref As Reference');
 });
@@ -12,25 +11,25 @@ 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'), () => cy.get('[data-test="dhis2-uicore-popper"]')).should(_ref => {
+  cy.all(() => cy.get('button:contains("Reference")'), () => cy.get('[data-test="dhis2-uicore-popper"]')).should(_ref => {
     let [$reference, $popper] = _ref;
     const referenceRect = $reference.get(0).getBoundingClientRect();
     const popperRect = $popper.get(0).getBoundingClientRect();
-    expect(referenceRect.left).to.equal(popperRect.left);
+    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'), () => cy.get('[data-test="dhis2-uicore-popper"]')).should(_ref2 => {
-    let [$reference, $popper] = _ref2;
-    const referenceRect = $reference.get(0).getBoundingClientRect();
+  cy.all(() => cy.get('button:contains("Reference")'), () => cy.get('[data-test="dhis2-uicore-popper"]')).should(_ref2 => {
+    let [$button, $popper] = _ref2;
+    const buttonRect = $button.get(0).getBoundingClientRect();
     const popperRect = $popper.get(0).getBoundingClientRect();
-    expect(Math.round(referenceRect.bottom)).to.equal(Math.round(popperRect.top));
+    expect(buttonRect.bottom).to.be.closeTo(popperRect.top, 1);
   });
 });
 (0, _cypressCucumberPreprocessor.Then)('the top and left of the popper correspond with the virtualElement', () => {
   cy.get('[data-test="dhis2-uicore-popper"]').should($popper => {
     const popperRect = $popper.get(0).getBoundingClientRect();
-    expect(popperRect.top).to.equal(200);
-    expect(popperRect.left).to.equal(200);
+    expect(popperRect.top).to.be.closeTo(200, 1);
+    expect(popperRect.left).to.be.closeTo(200, 1);
   });
 });

package/build/cjs/features/accepts_different_reference_types.feature

@@ -13,4 +13,3 @@ Feature: Accept different reference types
     Scenario: Accepts a virtual element
         Given a Popper with placement bottom-start has a virtual element as its reference
         Then the top and left of the popper correspond with the virtualElement
-

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

@@ -1,7 +1,6 @@
 "use strict";
 
 var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
-
 // Visit stories with different placements
 (0, _cypressCucumberPreprocessor.Given)('the Popper is rendered with placement top', () => {
   cy.visitStory('Popper', 'top');
@@ -38,45 +37,47 @@ var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preproces
 });
 (0, _cypressCucumberPreprocessor.Given)('the Popper is rendered with placement left-end', () => {
   cy.visitStory('Popper', 'left-end');
-}); // Directional assertions
-// top
+});
 
+// 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;
     expect(refPos.top).to.equal(popperPos.bottom);
   });
-}); // right
-
+});
+// 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;
     expect(refPos.right).to.equal(popperPos.left);
   });
-}); // bottom
-
+});
+// 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;
     expect(refPos.bottom).to.equal(popperPos.top);
   });
-}); // left
-
+});
+// 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;
     expect(refPos.left).to.equal(popperPos.right);
   });
-}); // Horizontal alignments
-// *-start
+});
 
+// Horizontal alignments
+// *-start
 (0, _cypressCucumberPreprocessor.Then)('it is horizontally left aligned with the reference element', () => {
   getRefAndPopperPositions().should(_ref5 => {
     let [refPos, popperPos] = _ref5;
     expect(refPos.left).to.equal(popperPos.left);
   });
-}); // * (no suffix)
-
+});
+// * (no suffix)
 (0, _cypressCucumberPreprocessor.Then)('it is horizontally center aligned with the reference element', () => {
   getRefAndPopperPositions().should(_ref6 => {
     let [refPos, popperPos] = _ref6;
@@ -84,23 +85,24 @@ var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preproces
     const popperCenterX = popperPos.left + popperPos.width / 2;
     expect(refCenterX).to.equal(popperCenterX);
   });
-}); // *-end
-
+});
+// *-end
 (0, _cypressCucumberPreprocessor.Then)('it is horizontally right aligned with the reference element', () => {
   getRefAndPopperPositions().should(_ref7 => {
     let [refPos, popperPos] = _ref7;
     expect(refPos.right).to.equal(popperPos.right);
   });
-}); // Vertical alignments
-// *-start
+});
 
+// Vertical alignments
+// *-start
 (0, _cypressCucumberPreprocessor.Then)('it is vertically top aligned with the reference element', () => {
   getRefAndPopperPositions().should(_ref8 => {
     let [refPos, popperPos] = _ref8;
     expect(refPos.top).to.equal(popperPos.top);
   });
-}); // * (no suffix)
-
+});
+// * (no suffix)
 (0, _cypressCucumberPreprocessor.Then)('it is vertically center aligned with the reference element', () => {
   getRefAndPopperPositions().should(_ref9 => {
     let [refPos, popperPos] = _ref9;
@@ -108,15 +110,16 @@ var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preproces
     const popperCenterY = popperPos.top + popperPos.height / 2;
     expect(refCenterY).to.equal(popperCenterY);
   });
-}); // *-end
-
+});
+// *-end
 (0, _cypressCucumberPreprocessor.Then)('it is vertically bottom aligned with the reference element', () => {
   getRefAndPopperPositions().should(_ref10 => {
     let [refPos, popperPos] = _ref10;
     expect(refPos.bottom).to.equal(popperPos.bottom);
   });
-}); // helper
+});
 
+// helper
 function getRefAndPopperPositions() {
   return cy.getPositionsBySelectors('.reference-element', '[data-test="dhis2-uicore-popper"]');
 }

package/build/cjs/get-reference-element.js

@@ -4,19 +4,16 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getReferenceElement = void 0;
-
 const getReferenceElement = reference => {
   // Elements or virtualElements
   if (reference instanceof Element || reference && 'getBoundingClientRect' in reference) {
     return reference;
-  } // react refs
-
+  }
 
+  // react refs
   if (reference && 'current' in reference) {
     return reference.current;
   }
-
   return null;
 };
-
 exports.getReferenceElement = getReferenceElement;

package/build/cjs/index.js

@@ -27,11 +27,7 @@ Object.defineProperty(exports, "usePopper", {
     return _reactPopper.usePopper;
   }
 });
-
 var _popper = require("./popper.js");
-
 var _getReferenceElement = require("./get-reference-element.js");
-
 var _modifiers = require("./modifiers.js");
-
 var _reactPopper = require("react-popper");

package/build/cjs/modifiers.js

@@ -4,11 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.resizeObserver = exports.getBaseModifiers = exports.deduplicateModifiers = void 0;
-
 var _resizeObserverPolyfill = _interopRequireDefault(require("resize-observer-polyfill"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const attachResizeObservers = _ref => {
   let {
     state: {
@@ -25,7 +22,6 @@ const attachResizeObservers = _ref => {
       observer.observe(elements[elementKey]);
       acc.push(observer);
     }
-
     return acc;
   }, []);
   return () => {
@@ -34,7 +30,6 @@ const attachResizeObservers = _ref => {
     });
   };
 };
-
 const getBaseModifiers = _ref2 => {
   let {
     observePopperResize,
@@ -65,9 +60,7 @@ const getBaseModifiers = _ref2 => {
     }
   }];
 };
-
 exports.getBaseModifiers = getBaseModifiers;
-
 const deduplicateModifiers = (modifiers, resizeObservers) => {
   // Deduplicate modifiers from props and baseModifiers,
   // when duplicates are encountered (by name), use the
@@ -79,9 +72,8 @@ const deduplicateModifiers = (modifiers, resizeObservers) => {
     return !modifiers.some(m => m.name === name);
   }).concat(modifiers);
 };
-
 exports.deduplicateModifiers = deduplicateModifiers;
-const resizeObserver = {
+const resizeObserver = exports.resizeObserver = {
   name: 'resizeObserver',
   enabled: true,
   phase: 'write',
@@ -102,7 +94,6 @@ const resizeObserver = {
         observer.observe(elements[elementKey]);
         acc.push(observer);
       }
-
       return acc;
     }, []);
     return () => {
@@ -111,5 +102,4 @@ const resizeObserver = {
       });
     };
   }
-};
-exports.resizeObserver = resizeObserver;
+};

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

@@ -4,21 +4,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.VirtualElementAsReference = exports.TopStart = exports.TopEnd = exports.Top = exports.RightStart = exports.RightEnd = exports.Right = exports.ReactRefAsReference = exports.LeftStart = exports.LeftEnd = exports.Left = exports.DOMNodeAsReference = exports.BottomStart = exports.BottomEnd = exports.Bottom = void 0;
-
 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(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const PopperPlacement = _ref => {
   let {
     placement
@@ -38,88 +30,61 @@ const PopperPlacement = _ref => {
     id: "305551169"
   }, [".box.jsx-305551169{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;width:400px;height:400px;margin-bottom:1000px;background-color:aliceblue;}", ".reference-element.jsx-305551169{width:100px;height:50px;background-color:cadetblue;text-align:center;padding:6px;}", ".popper-content.jsx-305551169{width:80px;height:30px;background-color:lightblue;text-align:center;padding:6px;}"]));
 };
-
 PopperPlacement.propTypes = {
   placement: _propTypes.default.string
 };
-var _default = {
+var _default = exports.default = {
   title: 'Popper',
   component: _popper.Popper
 };
-exports.default = _default;
-
 const Top = () => /*#__PURE__*/_react.default.createElement(PopperPlacement, {
   placement: "top"
 });
-
 exports.Top = Top;
-
 const TopStart = () => /*#__PURE__*/_react.default.createElement(PopperPlacement, {
   placement: "top-start"
 });
-
 exports.TopStart = TopStart;
-
 const TopEnd = () => /*#__PURE__*/_react.default.createElement(PopperPlacement, {
   placement: "top-end"
 });
-
 exports.TopEnd = TopEnd;
-
 const Bottom = () => /*#__PURE__*/_react.default.createElement(PopperPlacement, {
   placement: "bottom"
 });
-
 exports.Bottom = Bottom;
-
 const BottomStart = () => /*#__PURE__*/_react.default.createElement(PopperPlacement, {
   placement: "bottom-start"
 });
-
 exports.BottomStart = BottomStart;
-
 const BottomEnd = () => /*#__PURE__*/_react.default.createElement(PopperPlacement, {
   placement: "bottom-end"
 });
-
 exports.BottomEnd = BottomEnd;
-
 const Right = () => /*#__PURE__*/_react.default.createElement(PopperPlacement, {
   placement: "right"
 });
-
 exports.Right = Right;
-
 const RightStart = () => /*#__PURE__*/_react.default.createElement(PopperPlacement, {
   placement: "right-start"
 });
-
 exports.RightStart = RightStart;
-
 const RightEnd = () => /*#__PURE__*/_react.default.createElement(PopperPlacement, {
   placement: "right-end"
 });
-
 exports.RightEnd = RightEnd;
-
 const Left = () => /*#__PURE__*/_react.default.createElement(PopperPlacement, {
   placement: "left"
 });
-
 exports.Left = Left;
-
 const LeftStart = () => /*#__PURE__*/_react.default.createElement(PopperPlacement, {
   placement: "left-start"
 });
-
 exports.LeftStart = LeftStart;
-
 const LeftEnd = () => /*#__PURE__*/_react.default.createElement(PopperPlacement, {
   placement: "left-end"
 });
-
 exports.LeftEnd = LeftEnd;
-
 const ReactRefAsReference = () => {
   const ref = (0, _react.useRef)();
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("button", {
@@ -129,9 +94,7 @@ const ReactRefAsReference = () => {
     reference: ref
   }, "Popper"));
 };
-
 exports.ReactRefAsReference = ReactRefAsReference;
-
 const DOMNodeAsReference = () => {
   const [node, setNode] = (0, _react.useState)(null);
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("button", {
@@ -141,9 +104,7 @@ const DOMNodeAsReference = () => {
     reference: node
   }, "Popper"));
 };
-
 exports.DOMNodeAsReference = DOMNodeAsReference;
-
 const VirtualElementAsReference = () => {
   const virtualElement = {
     getBoundingClientRect: () => ({
@@ -160,5 +121,4 @@ const VirtualElementAsReference = () => {
     reference: virtualElement
   }, "Popper");
 };
-
 exports.VirtualElementAsReference = VirtualElementAsReference;

package/build/cjs/popper.js

@@ -4,39 +4,25 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Popper = void 0;
-
 var _uiConstants = require("@dhis2/ui-constants");
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _reactPopper = require("react-popper");
-
 var _getReferenceElement = require("./get-reference-element.js");
-
 var _modifiers = require("./modifiers.js");
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 const flipPlacement = placement => {
   if (placement.startsWith('right')) {
     return placement.replace('right', 'left');
   }
-
   if (placement.startsWith('left')) {
     return placement.replace('left', 'right');
   }
-
   return placement;
 };
-
 const Popper = _ref => {
   let {
     children,
@@ -65,49 +51,50 @@ const Popper = _ref => {
     placement: document.documentElement.dir === 'rtl' ? flipPlacement(placement) : placement,
     modifiers: deduplicatedModifiers
   });
+  (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]);
   return /*#__PURE__*/_react.default.createElement("div", _extends({
     className: className,
     "data-test": dataTest,
     ref: setPopperElement,
     style: styles.popper
-  }, attributes.popper), children);
+  }, attributes.popper, {
+    tabIndex: 0
+  }), children);
 };
-
 exports.Popper = Popper;
 Popper.defaultProps = {
   dataTest: 'dhis2-uicore-popper',
   modifiers: [],
   placement: 'auto'
-}; // Prop names follow the names here: https://popper.js.org/docs/v2/constructors/
+};
 
+// Prop names follow the names here: https://popper.js.org/docs/v2/constructors/
 Popper.propTypes = {
   /** Content inside the Popper */
   children: _propTypes.default.node.isRequired,
   className: _propTypes.default.string,
   dataTest: _propTypes.default.string,
-
   /** A property of the `createPopper` options. See [popper docs](https://popper.js.org/docs/v2/constructors/) */
   modifiers: _propTypes.default.arrayOf(_propTypes.default.shape({
     name: _propTypes.default.string,
     options: _propTypes.default.object
   })),
-
   /** Makes the Popper update position when the **Popper content** changes size */
   observePopperResize: _propTypes.default.bool,
-
   /** Makes the Popper update position when the **reference element** changes size */
   observeReferenceResize: _propTypes.default.bool,
-
   /** A property of the `createPopper` options. See [popper docs](https://popper.js.org/docs/v2/constructors/) */
   placement: _uiConstants.sharedPropTypes.popperPlacementPropType,
-
   /** A React ref, DOM node, or [virtual element](https://popper.js.org/docs/v2/virtual-elements/) for the popper to position itself against */
   reference: _uiConstants.sharedPropTypes.popperReferencePropType,
-
   /** A property of the `createPopper` options. See [popper docs](https://popper.js.org/docs/v2/constructors/) */
   strategy: _propTypes.default.oneOf(['absolute', 'fixed']),
   // defaults to 'absolute'
-
   /** A property of the `createPopper` options. See [popper docs](https://popper.js.org/docs/v2/constructors/) */
   onFirstUpdate: _propTypes.default.func
 };

package/build/cjs/{popper.stories.js → popper.prod.stories.js}

@@ -4,21 +4,24 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.VirtualElementRef = exports.TopStart = exports.TopEnd = exports.Top = exports.RightStart = exports.RightEnd = exports.Right = exports.RTL = exports.LeftStart = exports.LeftEnd = exports.Left = exports.ElementRef = exports.BottomStart = exports.BottomEnd = exports.Bottom = void 0;
-
 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 _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.
 
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+Since it's built using [Popper.js](https://popper.js.org/docs/v2/) and [react-popper](https://popper.js.org/react-popper/), some of that functionality can be accessed through the props of this component, like modifiers.
 
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+\`\`\`js
+import { Popper } from '@dhis2/ui'
+\`\`\`
 
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-const description = "\nA tool for adding additional information or content outside of the document flow, used for example in the Tooltip or Popover components.\n\nSince it's built using [Popper.js](https://popper.js.org/docs/v2/) and [react-popper](https://popper.js.org/react-popper/), some of that functionality can be accessed through the props of this component, like modifiers.\n\n```js\nimport { Popper } from '@dhis2/ui'\n```\n\n_**Note**: Some of the stories may not look right on this page. View those examples in the 'Canvas' tab instead._\n";
-var _default = {
+_**Note**: Some of the stories may not look right on this page. View those examples in the 'Canvas' tab instead._
+`;
+var _default = exports.default = {
   title: 'Popper',
   component: _popper.Popper,
   parameters: {
@@ -29,13 +32,14 @@ var _default = {
     }
   },
   argTypes: {
-    placement: { ..._uiConstants.sharedPropTypes.popperPlacementArgType
+    placement: {
+      ..._uiConstants.sharedPropTypes.popperPlacementArgType
     },
-    reference: { ..._uiConstants.sharedPropTypes.popperReferenceArgType
+    reference: {
+      ..._uiConstants.sharedPropTypes.popperReferenceArgType
     }
   }
 };
-exports.default = _default;
 const boxStyle = {
   display: 'flex',
   alignItems: 'center',
@@ -58,7 +62,6 @@ const popperStyle = {
   textAlign: 'center',
   padding: 6
 };
-
 const Template = args => {
   const ref = (0, _react.useRef)(null);
   return /*#__PURE__*/_react.default.createElement("div", {
@@ -74,74 +77,61 @@ const Template = args => {
     style: popperStyle
   }, args.placement)));
 };
-
-const Top = Template.bind({});
-exports.Top = Top;
+const Top = exports.Top = Template.bind({});
 Top.args = {
   placement: 'top'
 };
-const TopStart = Template.bind({});
-exports.TopStart = TopStart;
+const TopStart = exports.TopStart = Template.bind({});
 TopStart.args = {
   placement: 'top-start'
 };
-const TopEnd = Template.bind({});
-exports.TopEnd = TopEnd;
+const TopEnd = exports.TopEnd = Template.bind({});
 TopEnd.args = {
   placement: 'top-end'
 };
-const Bottom = Template.bind({});
-exports.Bottom = Bottom;
+const Bottom = exports.Bottom = Template.bind({});
 Bottom.args = {
   placement: 'bottom'
 };
-const BottomStart = Template.bind({});
-exports.BottomStart = BottomStart;
+const BottomStart = exports.BottomStart = Template.bind({});
 BottomStart.args = {
   placement: 'bottom-start'
 };
-const BottomEnd = Template.bind({});
-exports.BottomEnd = BottomEnd;
+const BottomEnd = exports.BottomEnd = Template.bind({});
 BottomEnd.args = {
   placement: 'bottom-end'
 };
-const Right = Template.bind({});
-exports.Right = Right;
+const Right = exports.Right = Template.bind({});
 Right.args = {
   placement: 'right'
 };
-const RightStart = Template.bind({});
-exports.RightStart = RightStart;
+const RightStart = exports.RightStart = Template.bind({});
 RightStart.args = {
   placement: 'right-start'
 };
-const RightEnd = Template.bind({});
-exports.RightEnd = RightEnd;
+const RightEnd = exports.RightEnd = Template.bind({});
 RightEnd.args = {
   placement: 'right-end'
 };
-const Left = Template.bind({});
-exports.Left = Left;
+const Left = exports.Left = Template.bind({});
 Left.args = {
   placement: 'left'
 };
-const LeftStart = Template.bind({});
-exports.LeftStart = LeftStart;
+const LeftStart = exports.LeftStart = Template.bind({});
 LeftStart.args = {
   placement: 'left-start'
 };
-const LeftEnd = Template.bind({});
-exports.LeftEnd = LeftEnd;
+const LeftEnd = exports.LeftEnd = Template.bind({});
 LeftEnd.args = {
   placement: 'left-end'
 };
-
 const ElementRef = args => {
   const anchor = document.createElement('div');
   document.body.appendChild(anchor);
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "box",
-    style: { ...boxStyle,
+    style: {
+      ...boxStyle,
       marginBottom: '500px'
     }
   }, /*#__PURE__*/_react.default.createElement(_popper.Popper, _extends({}, args, {
@@ -150,7 +140,6 @@ const ElementRef = args => {
     style: popperStyle
   }, args.placement)));
 };
-
 exports.ElementRef = ElementRef;
 ElementRef.args = {
   placement: 'left-end'
@@ -162,7 +151,6 @@ ElementRef.parameters = {
     }
   }
 };
-
 const VirtualElementRef = args => {
   const virtualElement = {
     getBoundingClientRect: () => ({
@@ -178,7 +166,8 @@ const VirtualElementRef = args => {
   };
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "box",
-    style: { ...boxStyle,
+    style: {
+      ...boxStyle,
       marginBottom: '500px'
     }
   }, /*#__PURE__*/_react.default.createElement(_popper.Popper, _extends({}, args, {
@@ -187,7 +176,6 @@ const VirtualElementRef = args => {
     style: popperStyle
   }, args.placement)));
 };
-
 exports.VirtualElementRef = VirtualElementRef;
 VirtualElementRef.args = {
   placement: 'left-end'
@@ -199,7 +187,6 @@ VirtualElementRef.parameters = {
     }
   }
 };
-
 const RTL = args => {
   (0, _react.useEffect)(() => {
     document.documentElement.setAttribute('dir', 'rtl');
@@ -215,5 +202,4 @@ const RTL = args => {
     placement: "right-start"
   })));
 };
-
 exports.RTL = RTL;

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

@@ -9,25 +9,25 @@ 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'), () => cy.get('[data-test="dhis2-uicore-popper"]')).should(_ref => {
+  cy.all(() => cy.get('button:contains("Reference")'), () => cy.get('[data-test="dhis2-uicore-popper"]')).should(_ref => {
     let [$reference, $popper] = _ref;
     const referenceRect = $reference.get(0).getBoundingClientRect();
     const popperRect = $popper.get(0).getBoundingClientRect();
-    expect(referenceRect.left).to.equal(popperRect.left);
+    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'), () => cy.get('[data-test="dhis2-uicore-popper"]')).should(_ref2 => {
-    let [$reference, $popper] = _ref2;
-    const referenceRect = $reference.get(0).getBoundingClientRect();
+  cy.all(() => cy.get('button:contains("Reference")'), () => cy.get('[data-test="dhis2-uicore-popper"]')).should(_ref2 => {
+    let [$button, $popper] = _ref2;
+    const buttonRect = $button.get(0).getBoundingClientRect();
     const popperRect = $popper.get(0).getBoundingClientRect();
-    expect(Math.round(referenceRect.bottom)).to.equal(Math.round(popperRect.top));
+    expect(buttonRect.bottom).to.be.closeTo(popperRect.top, 1);
   });
 });
 Then('the top and left of the popper correspond with the virtualElement', () => {
   cy.get('[data-test="dhis2-uicore-popper"]').should($popper => {
     const popperRect = $popper.get(0).getBoundingClientRect();
-    expect(popperRect.top).to.equal(200);
-    expect(popperRect.left).to.equal(200);
+    expect(popperRect.top).to.be.closeTo(200, 1);
+    expect(popperRect.left).to.be.closeTo(200, 1);
   });
 });

package/build/es/features/accepts_different_reference_types.feature

@@ -13,4 +13,3 @@ Feature: Accept different reference types
     Scenario: Accepts a virtual element
         Given a Popper with placement bottom-start has a virtual element as its reference
         Then the top and left of the popper correspond with the virtualElement
-

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

@@ -1,5 +1,6 @@
-import { Given, Then } from '@badeball/cypress-cucumber-preprocessor'; // Visit stories with different placements
+import { Given, Then } from '@badeball/cypress-cucumber-preprocessor';
 
+// Visit stories with different placements
 Given('the Popper is rendered with placement top', () => {
   cy.visitStory('Popper', 'top');
 });
@@ -35,45 +36,47 @@ Given('the Popper is rendered with placement left-start', () => {
 });
 Given('the Popper is rendered with placement left-end', () => {
   cy.visitStory('Popper', 'left-end');
-}); // Directional assertions
-// top
+});
 
+// 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;
     expect(refPos.top).to.equal(popperPos.bottom);
   });
-}); // right
-
+});
+// right
 Then('the left of the popper is adjacent to the right of the reference element', () => {
   getRefAndPopperPositions().should(_ref2 => {
     let [refPos, popperPos] = _ref2;
     expect(refPos.right).to.equal(popperPos.left);
   });
-}); // bottom
-
+});
+// bottom
 Then('the top of the popper is adjacent to the bottom of the reference element', () => {
   getRefAndPopperPositions().should(_ref3 => {
     let [refPos, popperPos] = _ref3;
     expect(refPos.bottom).to.equal(popperPos.top);
   });
-}); // left
-
+});
+// left
 Then('the right of the popper is adjacent to the left of the reference element', () => {
   getRefAndPopperPositions().should(_ref4 => {
     let [refPos, popperPos] = _ref4;
     expect(refPos.left).to.equal(popperPos.right);
   });
-}); // Horizontal alignments
-// *-start
+});
 
+// Horizontal alignments
+// *-start
 Then('it is horizontally left aligned with the reference element', () => {
   getRefAndPopperPositions().should(_ref5 => {
     let [refPos, popperPos] = _ref5;
     expect(refPos.left).to.equal(popperPos.left);
   });
-}); // * (no suffix)
-
+});
+// * (no suffix)
 Then('it is horizontally center aligned with the reference element', () => {
   getRefAndPopperPositions().should(_ref6 => {
     let [refPos, popperPos] = _ref6;
@@ -81,23 +84,24 @@ Then('it is horizontally center aligned with the reference element', () => {
     const popperCenterX = popperPos.left + popperPos.width / 2;
     expect(refCenterX).to.equal(popperCenterX);
   });
-}); // *-end
-
+});
+// *-end
 Then('it is horizontally right aligned with the reference element', () => {
   getRefAndPopperPositions().should(_ref7 => {
     let [refPos, popperPos] = _ref7;
     expect(refPos.right).to.equal(popperPos.right);
   });
-}); // Vertical alignments
-// *-start
+});
 
+// Vertical alignments
+// *-start
 Then('it is vertically top aligned with the reference element', () => {
   getRefAndPopperPositions().should(_ref8 => {
     let [refPos, popperPos] = _ref8;
     expect(refPos.top).to.equal(popperPos.top);
   });
-}); // * (no suffix)
-
+});
+// * (no suffix)
 Then('it is vertically center aligned with the reference element', () => {
   getRefAndPopperPositions().should(_ref9 => {
     let [refPos, popperPos] = _ref9;
@@ -105,15 +109,16 @@ Then('it is vertically center aligned with the reference element', () => {
     const popperCenterY = popperPos.top + popperPos.height / 2;
     expect(refCenterY).to.equal(popperCenterY);
   });
-}); // *-end
-
+});
+// *-end
 Then('it is vertically bottom aligned with the reference element', () => {
   getRefAndPopperPositions().should(_ref10 => {
     let [refPos, popperPos] = _ref10;
     expect(refPos.bottom).to.equal(popperPos.bottom);
   });
-}); // helper
+});
 
+// helper
 function getRefAndPopperPositions() {
   return cy.getPositionsBySelectors('.reference-element', '[data-test="dhis2-uicore-popper"]');
 }

package/build/es/get-reference-element.js

@@ -2,12 +2,11 @@ export const getReferenceElement = reference => {
   // Elements or virtualElements
   if (reference instanceof Element || reference && 'getBoundingClientRect' in reference) {
     return reference;
-  } // react refs
-
+  }
 
+  // react refs
   if (reference && 'current' in reference) {
     return reference.current;
   }
-
   return null;
 };

package/build/es/modifiers.js

@@ -1,5 +1,4 @@
 import ResizeObserver from 'resize-observer-polyfill';
-
 const attachResizeObservers = _ref => {
   let {
     state: {
@@ -16,7 +15,6 @@ const attachResizeObservers = _ref => {
       observer.observe(elements[elementKey]);
       acc.push(observer);
     }
-
     return acc;
   }, []);
   return () => {
@@ -25,7 +23,6 @@ const attachResizeObservers = _ref => {
     });
   };
 };
-
 export const getBaseModifiers = _ref2 => {
   let {
     observePopperResize,
@@ -88,7 +85,6 @@ export const resizeObserver = {
         observer.observe(elements[elementKey]);
         acc.push(observer);
       }
-
       return acc;
     }, []);
     return () => {

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

@@ -2,7 +2,6 @@ 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
@@ -22,7 +21,6 @@ const PopperPlacement = _ref => {
     id: "305551169"
   }, [".box.jsx-305551169{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;width:400px;height:400px;margin-bottom:1000px;background-color:aliceblue;}", ".reference-element.jsx-305551169{width:100px;height:50px;background-color:cadetblue;text-align:center;padding:6px;}", ".popper-content.jsx-305551169{width:80px;height:30px;background-color:lightblue;text-align:center;padding:6px;}"]));
 };
-
 PopperPlacement.propTypes = {
   placement: PropTypes.string
 };

package/build/es/popper.js

@@ -1,24 +1,19 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 import { sharedPropTypes } from '@dhis2/ui-constants';
 import PropTypes from 'prop-types';
-import React, { useState, useMemo } from 'react';
+import React, { useState, useMemo, useEffect } from 'react';
 import { usePopper } from 'react-popper';
 import { getReferenceElement } from './get-reference-element.js';
 import { deduplicateModifiers } from './modifiers.js';
-
 const flipPlacement = placement => {
   if (placement.startsWith('right')) {
     return placement.replace('right', 'left');
   }
-
   if (placement.startsWith('left')) {
     return placement.replace('left', 'right');
   }
-
   return placement;
 };
-
 const Popper = _ref => {
   let {
     children,
@@ -47,48 +42,49 @@ const Popper = _ref => {
     placement: document.documentElement.dir === 'rtl' ? flipPlacement(placement) : placement,
     modifiers: deduplicatedModifiers
   });
+  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]);
   return /*#__PURE__*/React.createElement("div", _extends({
     className: className,
     "data-test": dataTest,
     ref: setPopperElement,
     style: styles.popper
-  }, attributes.popper), children);
+  }, attributes.popper, {
+    tabIndex: 0
+  }), children);
 };
-
 Popper.defaultProps = {
   dataTest: 'dhis2-uicore-popper',
   modifiers: [],
   placement: 'auto'
-}; // Prop names follow the names here: https://popper.js.org/docs/v2/constructors/
+};
 
+// Prop names follow the names here: https://popper.js.org/docs/v2/constructors/
 Popper.propTypes = {
   /** Content inside the Popper */
   children: PropTypes.node.isRequired,
   className: PropTypes.string,
   dataTest: PropTypes.string,
-
   /** A property of the `createPopper` options. See [popper docs](https://popper.js.org/docs/v2/constructors/) */
   modifiers: PropTypes.arrayOf(PropTypes.shape({
     name: PropTypes.string,
     options: PropTypes.object
   })),
-
   /** Makes the Popper update position when the **Popper content** changes size */
   observePopperResize: PropTypes.bool,
-
   /** Makes the Popper update position when the **reference element** changes size */
   observeReferenceResize: PropTypes.bool,
-
   /** A property of the `createPopper` options. See [popper docs](https://popper.js.org/docs/v2/constructors/) */
   placement: sharedPropTypes.popperPlacementPropType,
-
   /** A React ref, DOM node, or [virtual element](https://popper.js.org/docs/v2/virtual-elements/) for the popper to position itself against */
   reference: sharedPropTypes.popperReferencePropType,
-
   /** A property of the `createPopper` options. See [popper docs](https://popper.js.org/docs/v2/constructors/) */
   strategy: PropTypes.oneOf(['absolute', 'fixed']),
   // defaults to 'absolute'
-
   /** A property of the `createPopper` options. See [popper docs](https://popper.js.org/docs/v2/constructors/) */
   onFirstUpdate: PropTypes.func
 };

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

@@ -1,9 +1,18 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 import { sharedPropTypes } from '@dhis2/ui-constants';
 import React, { useEffect, useRef } from 'react';
 import { Popper } from './popper.js';
-const description = "\nA tool for adding additional information or content outside of the document flow, used for example in the Tooltip or Popover components.\n\nSince it's built using [Popper.js](https://popper.js.org/docs/v2/) and [react-popper](https://popper.js.org/react-popper/), some of that functionality can be accessed through the props of this component, like modifiers.\n\n```js\nimport { Popper } from '@dhis2/ui'\n```\n\n_**Note**: Some of the stories may not look right on this page. View those examples in the 'Canvas' tab instead._\n";
+const description = `
+A tool for adding additional information or content outside of the document flow, used for example in the Tooltip or Popover components.
+
+Since it's built using [Popper.js](https://popper.js.org/docs/v2/) and [react-popper](https://popper.js.org/react-popper/), some of that functionality can be accessed through the props of this component, like modifiers.
+
+\`\`\`js
+import { Popper } from '@dhis2/ui'
+\`\`\`
+
+_**Note**: Some of the stories may not look right on this page. View those examples in the 'Canvas' tab instead._
+`;
 export default {
   title: 'Popper',
   component: Popper,
@@ -15,9 +24,11 @@ export default {
     }
   },
   argTypes: {
-    placement: { ...sharedPropTypes.popperPlacementArgType
+    placement: {
+      ...sharedPropTypes.popperPlacementArgType
     },
-    reference: { ...sharedPropTypes.popperReferenceArgType
+    reference: {
+      ...sharedPropTypes.popperReferenceArgType
     }
   }
 };
@@ -43,7 +54,6 @@ const popperStyle = {
   textAlign: 'center',
   padding: 6
 };
-
 const Template = args => {
   const ref = useRef(null);
   return /*#__PURE__*/React.createElement("div", {
@@ -59,7 +69,6 @@ const Template = args => {
     style: popperStyle
   }, args.placement)));
 };
-
 export const Top = Template.bind({});
 Top.args = {
   placement: 'top'
@@ -113,7 +122,8 @@ export const ElementRef = args => {
   document.body.appendChild(anchor);
   return /*#__PURE__*/React.createElement("div", {
     className: "box",
-    style: { ...boxStyle,
+    style: {
+      ...boxStyle,
       marginBottom: '500px'
     }
   }, /*#__PURE__*/React.createElement(Popper, _extends({}, args, {
@@ -147,7 +157,8 @@ export const VirtualElementRef = args => {
   };
   return /*#__PURE__*/React.createElement("div", {
     className: "box",
-    style: { ...boxStyle,
+    style: {
+      ...boxStyle,
       marginBottom: '500px'
     }
   }, /*#__PURE__*/React.createElement(Popper, _extends({}, args, {

package/package.json

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