@dhis2-ui/layer 9.11.0 → 9.11.1-beta.10

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

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

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

@@ -1,7 +1,6 @@
 "use strict";
 
 var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
-
 (0, _cypressCucumberPreprocessor.Given)('a Layer with a button below it is rendered', () => {
   cy.visitStory('Layer', 'Blocking');
 });
@@ -9,7 +8,7 @@ var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preproces
   cy.visitStory('Layer', 'With Click Handler');
 });
 (0, _cypressCucumberPreprocessor.When)('the user clicks the button', () => {
-  cy.get('button').click();
+  cy.get('button:contains("Test")').click();
 });
 (0, _cypressCucumberPreprocessor.When)('the user clicks on the layer', () => {
   cy.get('[data-test="dhis2-uicore-layer"]').click();
@@ -19,8 +18,9 @@ var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preproces
     let [rect] = _ref;
     // Get button center coordinates
     const buttonCenterX = rect.left + rect.width / 2;
-    const buttonCenterY = rect.top + rect.height / 2; // click body on the button center
+    const buttonCenterY = rect.top + rect.height / 2;
 
+    // click body on the button center
     cy.get('body').click(buttonCenterX, buttonCenterY);
   });
 });

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

@@ -1,7 +1,6 @@
 "use strict";
 
 var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
-
 (0, _cypressCucumberPreprocessor.Given)('two equal sibling Layers are rendered', () => {
   cy.visitStory('Layer', 'Equal Siblings');
 });
@@ -21,28 +20,31 @@ var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preproces
   cy.visitStory('Layer', 'Nested Higher Level Ends On Top');
 });
 (0, _cypressCucumberPreprocessor.Then)('the second layer is on top of the first layer', () => {
-  cy.get('body').click();
+  // Wouldn't work if the element wasn't ontop of the second layer.
+  // Cypress would fail, stating:
+  // "[...] is being covered by another element: [...]"
+  cy.get('.backdrop:visible').click();
   cy.window().should(win => {
     expect(win.onLayerClick).to.be.calledOnce;
     expect(win.onLayerClick).to.be.calledWith('second');
   });
 });
 (0, _cypressCucumberPreprocessor.Then)('the alert layer is on top', () => {
-  cy.get('body').click();
+  cy.get('.backdrop:visible').click();
   cy.window().should(win => {
     expect(win.onLayerClick).to.be.calledOnce;
     expect(win.onLayerClick).to.be.calledWith('alert');
   });
 });
 (0, _cypressCucumberPreprocessor.Then)('the layer with level 1001 is on top', () => {
-  cy.get('body').click();
+  cy.get('.backdrop:visible').click();
   cy.window().should(win => {
     expect(win.onLayerClick).to.be.calledOnce;
     expect(win.onLayerClick).to.be.calledWith('1001');
   });
 });
 (0, _cypressCucumberPreprocessor.Then)('the blocking layer is on top', () => {
-  cy.get('body').click();
+  cy.get('.backdrop:visible').click();
   cy.window().should(win => {
     expect(win.onLayerClick).to.be.calledOnce;
     expect(win.onLayerClick).to.be.calledWith('blocking');

package/build/cjs/index.js

@@ -15,7 +15,5 @@ Object.defineProperty(exports, "useLayerContext", {
     return _useLayerContext.useLayerContext;
   }
 });
-
 var _layer = require("./layer.js");
-
 var _useLayerContext = require("./use-layer-context.js");

package/build/cjs/layer-context.js

@@ -4,14 +4,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Provider = exports.LayerContext = exports.Consumer = void 0;
-
 var _react = require("react");
-
-const LayerContext = /*#__PURE__*/(0, _react.createContext)({
+const LayerContext = exports.LayerContext = /*#__PURE__*/(0, _react.createContext)({
   node: document.body,
   level: 0
 });
-exports.LayerContext = LayerContext;
 const {
   Provider,
   Consumer

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

@@ -4,54 +4,37 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.WithClickHandler = exports.NestedLowerLevels = exports.NestedHigherLevels = exports.NestedHigherLevelEndsOnTop = exports.LevelsAreRespectedWhenNesting = exports.InequalSiblings = exports.EqualSiblings = exports.Default = exports.Blocking = void 0;
-
 var _uiConstants = require("@dhis2/ui-constants");
-
 var _react = _interopRequireDefault(require("react"));
-
 var _layer = require("./layer.js");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 window.onButtonClick = window.Cypress && window.Cypress.cy.stub();
 window.onLayerClick = window.Cypress && window.Cypress.cy.stub();
-
 const createNamedLayerClick = name => () => {
   window.onLayerClick(name);
 };
-
-var _default = {
+var _default = exports.default = {
   title: 'Layer',
   component: _layer.Layer
 };
-exports.default = _default;
-
 const Default = () => /*#__PURE__*/_react.default.createElement(_layer.Layer, null, /*#__PURE__*/_react.default.createElement("p", null, "I am a child"));
-
 exports.Default = Default;
-
 const Blocking = () => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("button", {
   onClick: window.onButtonClick
 }, "Test"), /*#__PURE__*/_react.default.createElement(_layer.Layer, null));
-
 exports.Blocking = Blocking;
-
 const WithClickHandler = () => /*#__PURE__*/_react.default.createElement(_layer.Layer, {
   onBackdropClick: window.onLayerClick
 }, /*#__PURE__*/_react.default.createElement("button", {
   onClick: window.onButtonClick
 }, "Test"));
-
 exports.WithClickHandler = WithClickHandler;
-
 const EqualSiblings = () => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_layer.Layer, {
   onBackdropClick: createNamedLayerClick('first')
 }), /*#__PURE__*/_react.default.createElement(_layer.Layer, {
   onBackdropClick: createNamedLayerClick('second')
 }));
-
 exports.EqualSiblings = EqualSiblings;
-
 const InequalSiblings = () => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_layer.Layer, {
   level: _uiConstants.layers.alert,
   onBackdropClick: createNamedLayerClick('alert')
@@ -62,9 +45,7 @@ const InequalSiblings = () => /*#__PURE__*/_react.default.createElement(_react.d
   level: _uiConstants.layers.applicationTop,
   onBackdropClick: createNamedLayerClick('applicationTop')
 }));
-
 exports.InequalSiblings = InequalSiblings;
-
 const NestedLowerLevels = () => /*#__PURE__*/_react.default.createElement(_layer.Layer, {
   level: _uiConstants.layers.alert,
   dataTest: "alert",
@@ -75,9 +56,7 @@ const NestedLowerLevels = () => /*#__PURE__*/_react.default.createElement(_layer
   disablePortal: true,
   onBackdropClick: createNamedLayerClick('blocking')
 }));
-
 exports.NestedLowerLevels = NestedLowerLevels;
-
 const NestedHigherLevels = () => /*#__PURE__*/_react.default.createElement(_layer.Layer, {
   level: _uiConstants.layers.blocking,
   dataTest: "blocking",
@@ -87,9 +66,7 @@ const NestedHigherLevels = () => /*#__PURE__*/_react.default.createElement(_laye
   dataTest: "alert",
   onBackdropClick: createNamedLayerClick('alert')
 }));
-
 exports.NestedHigherLevels = NestedHigherLevels;
-
 const LevelsAreRespectedWhenNesting = () => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_layer.Layer, {
   level: 1000
 }, /*#__PURE__*/_react.default.createElement(_layer.Layer, {
@@ -101,9 +78,7 @@ const LevelsAreRespectedWhenNesting = () => /*#__PURE__*/_react.default.createEl
   level: 1001,
   onBackdropClick: createNamedLayerClick('1001')
 }));
-
 exports.LevelsAreRespectedWhenNesting = LevelsAreRespectedWhenNesting;
-
 const NestedHigherLevelEndsOnTop = () => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_layer.Layer, {
   level: _uiConstants.layers.applicationTop
 }, /*#__PURE__*/_react.default.createElement(_layer.Layer, {
@@ -113,5 +88,4 @@ const NestedHigherLevelEndsOnTop = () => /*#__PURE__*/_react.default.createEleme
   level: _uiConstants.layers.blocking,
   onBackdropClick: createNamedLayerClick('blocking')
 }));
-
 exports.NestedHigherLevelEndsOnTop = NestedHigherLevelEndsOnTop;

package/build/cjs/layer.js

@@ -4,21 +4,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Layer = void 0;
-
 var _style = _interopRequireDefault(require("styled-jsx/style"));
-
-var _portal = require("@dhis2-ui/portal");
-
 var _propTypes = require("@dhis2/prop-types");
-
+var _portal = require("@dhis2-ui/portal");
 var _classnames = _interopRequireDefault(require("classnames"));
-
 var _propTypes2 = _interopRequireDefault(require("prop-types"));
-
 var _react = _interopRequireDefault(require("react"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const Layer = _ref => {
   let {
     children,
@@ -45,11 +37,10 @@ const Layer = _ref => {
   }), children, /*#__PURE__*/_react.default.createElement(_style.default, {
     id: "1893150038",
     dynamic: [level]
-  }, ["div.__jsx-style-dynamic-selector{z-index:".concat(level, ";}")]), /*#__PURE__*/_react.default.createElement(_style.default, {
+  }, [`div.__jsx-style-dynamic-selector{z-index:${level};}`]), /*#__PURE__*/_react.default.createElement(_style.default, {
     id: "4284133831"
   }, ["div.jsx-4284133831{-webkit-inset-block-start:0;-ms-intb-rlock-start:0;inset-block-start:0;inset-inline-start:0;min-height:100vh;min-width:100vw;}", "div.fixed.jsx-4284133831{position:fixed;height:100vh;width:100vw;}", "div.absolute.jsx-4284133831{position:absolute;height:100%;width:100%;}", "div.translucent.jsx-4284133831{background-color:rgba(33,43,54,0.4);}", "div.backdrop.jsx-4284133831{position:absolute;inset:0;z-index:-1;}"])));
 };
-
 exports.Layer = Layer;
 Layer.defaultProps = {
   position: 'fixed',
@@ -60,20 +51,15 @@ Layer.propTypes = {
   children: _propTypes2.default.node,
   className: _propTypes2.default.string,
   dataTest: _propTypes2.default.string,
-
   /** Disable the Portal, useful for nesting layers */
   disablePortal: _propTypes2.default.bool,
-
   /** Z-index level */
   level: _propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.string]),
   position: _propTypes2.default.oneOf(['absolute', 'fixed']),
-
   /** Adds a semi-transparent background */
   translucent: _propTypes2.default.bool,
-
   /** Backdrop click handler */
   onBackdropClick: _propTypes2.default.func,
-
   /** Click handler - DEPRECATED */
   onClick: (0, _propTypes.deprecated)(_propTypes2.default.func, 'Please use "onBackdropClick" instead')
 };

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

@@ -4,22 +4,26 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.WithOnBackdropClick = exports.WithCenteredContentCircularLoader = exports.Translucent = exports.Default = void 0;
-
 var _center = require("@dhis2-ui/center");
-
 var _loader = require("@dhis2-ui/loader");
-
 var _react = _interopRequireDefault(require("react"));
-
 var _layer = require("./layer.js");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const description = `
+Layers are used for creating different levels of stacking of interface elements.
+See more about stacking guidelines at the [design system](https://github.com/dhis2/design-system/blob/master/principles/layout.md#stacking).
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+Layers are used in Modals, Popovers, and Alerts.
 
-const description = "\nLayers are used for creating different levels of stacking of interface elements.\nSee more about stacking guidelines at the [design system](https://github.com/dhis2/design-system/blob/master/principles/layout.md#stacking).\n\nLayers are used in Modals, Popovers, and Alerts.\n\n```js\nimport { Layer } from '@dhis2/ui'\n```\n\n_**Note:** These demos may take some time to load._\n";
-var _default = {
+\`\`\`js
+import { Layer } from '@dhis2/ui'
+\`\`\`
+
+_**Note:** These demos may take some time to load._
+`;
+var _default = exports.default = {
   title: 'Layer',
   component: _layer.Layer,
-
   /**
    * `inlineStories: false` renders these layers in iframes instead of inline.
    * This fixes an issue where all the layers on the docs page render on top
@@ -36,27 +40,21 @@ var _default = {
     }
   },
   // Handle weird treatment of non-literal defaultProps (see Transfer.stories)
-  args: { ..._layer.Layer.defaultProps
+  args: {
+    ..._layer.Layer.defaultProps
   }
 };
-exports.default = _default;
-
 const Template = args => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_layer.Layer, args), /*#__PURE__*/_react.default.createElement("h1", null, "Text behind the layer"), /*#__PURE__*/_react.default.createElement("p", null, "Lorem ipsum"));
-
-const Default = Template.bind({});
-exports.Default = Default;
-const Translucent = Template.bind({});
-exports.Translucent = Translucent;
+const Default = exports.Default = Template.bind({});
+const Translucent = exports.Translucent = Template.bind({});
 Translucent.args = {
   translucent: true
 };
-const WithOnBackdropClick = Template.bind({});
-exports.WithOnBackdropClick = WithOnBackdropClick;
+const WithOnBackdropClick = exports.WithOnBackdropClick = Template.bind({});
 WithOnBackdropClick.args = {
   onBackdropClick: () => alert('layer backdrop was clicked')
 };
-const WithCenteredContentCircularLoader = Template.bind({});
-exports.WithCenteredContentCircularLoader = WithCenteredContentCircularLoader;
+const WithCenteredContentCircularLoader = exports.WithCenteredContentCircularLoader = Template.bind({});
 WithCenteredContentCircularLoader.args = {
   children: /*#__PURE__*/_react.default.createElement(_center.Center, null, /*#__PURE__*/_react.default.createElement(_loader.CircularLoader, null))
 };

package/build/cjs/use-layer-context.js

@@ -4,11 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useLayerContext = void 0;
-
 var _react = require("react");
-
 var _layerContext = require("./layer-context.js");
-
 const useLayerContext = () => (0, _react.useContext)(_layerContext.LayerContext);
-
 exports.useLayerContext = useLayerContext;

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

@@ -6,7 +6,7 @@ Given('a Layer with a button in it is rendered', () => {
   cy.visitStory('Layer', 'With Click Handler');
 });
 When('the user clicks the button', () => {
-  cy.get('button').click();
+  cy.get('button:contains("Test")').click();
 });
 When('the user clicks on the layer', () => {
   cy.get('[data-test="dhis2-uicore-layer"]').click();
@@ -16,8 +16,9 @@ When('the user clicks on the button coordinates', () => {
     let [rect] = _ref;
     // Get button center coordinates
     const buttonCenterX = rect.left + rect.width / 2;
-    const buttonCenterY = rect.top + rect.height / 2; // click body on the button center
+    const buttonCenterY = rect.top + rect.height / 2;
 
+    // click body on the button center
     cy.get('body').click(buttonCenterX, buttonCenterY);
   });
 });

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

@@ -18,28 +18,31 @@ Given('an applicatioTop layer with a nested alert layer with a blocking sibling'
   cy.visitStory('Layer', 'Nested Higher Level Ends On Top');
 });
 Then('the second layer is on top of the first layer', () => {
-  cy.get('body').click();
+  // Wouldn't work if the element wasn't ontop of the second layer.
+  // Cypress would fail, stating:
+  // "[...] is being covered by another element: [...]"
+  cy.get('.backdrop:visible').click();
   cy.window().should(win => {
     expect(win.onLayerClick).to.be.calledOnce;
     expect(win.onLayerClick).to.be.calledWith('second');
   });
 });
 Then('the alert layer is on top', () => {
-  cy.get('body').click();
+  cy.get('.backdrop:visible').click();
   cy.window().should(win => {
     expect(win.onLayerClick).to.be.calledOnce;
     expect(win.onLayerClick).to.be.calledWith('alert');
   });
 });
 Then('the layer with level 1001 is on top', () => {
-  cy.get('body').click();
+  cy.get('.backdrop:visible').click();
   cy.window().should(win => {
     expect(win.onLayerClick).to.be.calledOnce;
     expect(win.onLayerClick).to.be.calledWith('1001');
   });
 });
 Then('the blocking layer is on top', () => {
-  cy.get('body').click();
+  cy.get('.backdrop:visible').click();
   cy.window().should(win => {
     expect(win.onLayerClick).to.be.calledOnce;
     expect(win.onLayerClick).to.be.calledWith('blocking');

package/build/es/index.js

@@ -1,3 +1,4 @@
-export { Layer } from './layer.js'; // DEPRECATED: Remove in 7.0.0
+export { Layer } from './layer.js';
 
+// DEPRECATED: Remove in 7.0.0
 export { useLayerContext } from './use-layer-context.js';

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

@@ -3,11 +3,9 @@ import React from 'react';
 import { Layer } from './layer.js';
 window.onButtonClick = window.Cypress && window.Cypress.cy.stub();
 window.onLayerClick = window.Cypress && window.Cypress.cy.stub();
-
 const createNamedLayerClick = name => () => {
   window.onLayerClick(name);
 };
-
 export default {
   title: 'Layer',
   component: Layer

package/build/es/layer.js

@@ -1,10 +1,9 @@
 import _JSXStyle from "styled-jsx/style";
-import { Portal } from '@dhis2-ui/portal';
 import { deprecated } from '@dhis2/prop-types';
+import { Portal } from '@dhis2-ui/portal';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
-
 const Layer = _ref => {
   let {
     children,
@@ -31,11 +30,10 @@ const Layer = _ref => {
   }), children, /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "1893150038",
     dynamic: [level]
-  }, ["div.__jsx-style-dynamic-selector{z-index:".concat(level, ";}")]), /*#__PURE__*/React.createElement(_JSXStyle, {
+  }, [`div.__jsx-style-dynamic-selector{z-index:${level};}`]), /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "4284133831"
   }, ["div.jsx-4284133831{-webkit-inset-block-start:0;-ms-intb-rlock-start:0;inset-block-start:0;inset-inline-start:0;min-height:100vh;min-width:100vw;}", "div.fixed.jsx-4284133831{position:fixed;height:100vh;width:100vw;}", "div.absolute.jsx-4284133831{position:absolute;height:100%;width:100%;}", "div.translucent.jsx-4284133831{background-color:rgba(33,43,54,0.4);}", "div.backdrop.jsx-4284133831{position:absolute;inset:0;z-index:-1;}"])));
 };
-
 Layer.defaultProps = {
   position: 'fixed',
   dataTest: 'dhis2-uicore-layer',
@@ -45,20 +43,15 @@ Layer.propTypes = {
   children: PropTypes.node,
   className: PropTypes.string,
   dataTest: PropTypes.string,
-
   /** Disable the Portal, useful for nesting layers */
   disablePortal: PropTypes.bool,
-
   /** Z-index level */
   level: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   position: PropTypes.oneOf(['absolute', 'fixed']),
-
   /** Adds a semi-transparent background */
   translucent: PropTypes.bool,
-
   /** Backdrop click handler */
   onBackdropClick: PropTypes.func,
-
   /** Click handler - DEPRECATED */
   onClick: deprecated(PropTypes.func, 'Please use "onBackdropClick" instead')
 };

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

@@ -2,11 +2,21 @@ import { Center } from '@dhis2-ui/center';
 import { CircularLoader } from '@dhis2-ui/loader';
 import React from 'react';
 import { Layer } from './layer.js';
-const description = "\nLayers are used for creating different levels of stacking of interface elements.\nSee more about stacking guidelines at the [design system](https://github.com/dhis2/design-system/blob/master/principles/layout.md#stacking).\n\nLayers are used in Modals, Popovers, and Alerts.\n\n```js\nimport { Layer } from '@dhis2/ui'\n```\n\n_**Note:** These demos may take some time to load._\n";
+const description = `
+Layers are used for creating different levels of stacking of interface elements.
+See more about stacking guidelines at the [design system](https://github.com/dhis2/design-system/blob/master/principles/layout.md#stacking).
+
+Layers are used in Modals, Popovers, and Alerts.
+
+\`\`\`js
+import { Layer } from '@dhis2/ui'
+\`\`\`
+
+_**Note:** These demos may take some time to load._
+`;
 export default {
   title: 'Layer',
   component: Layer,
-
   /**
    * `inlineStories: false` renders these layers in iframes instead of inline.
    * This fixes an issue where all the layers on the docs page render on top
@@ -23,12 +33,11 @@ export default {
     }
   },
   // Handle weird treatment of non-literal defaultProps (see Transfer.stories)
-  args: { ...Layer.defaultProps
+  args: {
+    ...Layer.defaultProps
   }
 };
-
 const Template = args => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Layer, args), /*#__PURE__*/React.createElement("h1", null, "Text behind the layer"), /*#__PURE__*/React.createElement("p", null, "Lorem ipsum"));
-
 export const Default = Template.bind({});
 export const Translucent = Template.bind({});
 Translucent.args = {

package/package.json

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