@dhis2-ui/modal 9.11.0 → 9.11.1-beta.2

package/build/cjs/index.js

@@ -27,11 +27,7 @@ Object.defineProperty(exports, "ModalTitle", {
     return _index4.ModalTitle;
   }
 });
-
 var _index = require("./modal/index.js");
-
 var _index2 = require("./modal-actions/index.js");
-
 var _index3 = require("./modal-content/index.js");
-
 var _index4 = require("./modal-title/index.js");

package/build/cjs/locales/index.js

@@ -4,13 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _d2I18n = _interopRequireDefault(require("@dhis2/d2-i18n"));
-
 var _translations = _interopRequireDefault(require("./en/translations.json"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 //------------------------------------------------------------------------------
 // <auto-generated>
 // This code was generated by d2-i18n-generate.
@@ -19,9 +15,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 // the code is regenerated.
 // </auto-generated>
 //------------------------------------------------------------------------------
-const namespace = 'default';
 
+const namespace = 'default';
 _d2I18n.default.addResources('en', namespace, _translations.default);
-
-var _default = _d2I18n.default;
-exports.default = _default;
+var _default = exports.default = _d2I18n.default;

package/build/cjs/modal/close-button.js

@@ -4,25 +4,16 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.CloseButton = void 0;
-
 var _style = _interopRequireDefault(require("styled-jsx/style"));
-
 var _uiConstants = require("@dhis2/ui-constants");
-
 var _uiIcons = require("@dhis2/ui-icons");
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _react = _interopRequireDefault(require("react"));
-
 var _index = _interopRequireDefault(require("../locales/index.js"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const createClickHandler = onClick => event => {
   onClick({}, event);
 };
-
 const CloseButton = _ref => {
   let {
     onClick
@@ -36,9 +27,8 @@ const CloseButton = _ref => {
   }, /*#__PURE__*/_react.default.createElement(_uiIcons.IconCross16, null), /*#__PURE__*/_react.default.createElement(_style.default, {
     id: "80232614",
     dynamic: [_uiConstants.colors.grey700, _uiConstants.colors.grey200, _uiConstants.colors.grey900, _uiConstants.colors.grey200, _uiConstants.theme.focus, _uiConstants.colors.grey300]
-  }, ["button.__jsx-style-dynamic-selector{background-color:transparent;color:".concat(_uiConstants.colors.grey700, ";border:none;outline:none;padding:4px 4px 0px;border-radius:3px;position:absolute;top:0px;inset-inline-end:0px;}"), "button.__jsx-style-dynamic-selector:hover{background-color:".concat(_uiConstants.colors.grey200, ";color:").concat(_uiConstants.colors.grey900, ";}"), "button.__jsx-style-dynamic-selector:focus{background-color:".concat(_uiConstants.colors.grey200, ";outline:3px solid ").concat(_uiConstants.theme.focus, ";}"), "button.__jsx-style-dynamic-selector:focus.__jsx-style-dynamic-selector:not(:focus-visible){outline:none;}", "button.__jsx-style-dynamic-selector:active{background-color:".concat(_uiConstants.colors.grey300, ";}")]));
+  }, [`button.__jsx-style-dynamic-selector{background-color:transparent;color:${_uiConstants.colors.grey700};border:none;outline:none;padding:4px 4px 0px;border-radius:3px;position:absolute;top:0px;inset-inline-end:0px;}`, `button.__jsx-style-dynamic-selector:hover{background-color:${_uiConstants.colors.grey200};color:${_uiConstants.colors.grey900};}`, `button.__jsx-style-dynamic-selector:focus{background-color:${_uiConstants.colors.grey200};outline:3px solid ${_uiConstants.theme.focus};}`, "button.__jsx-style-dynamic-selector:focus.__jsx-style-dynamic-selector:not(:focus-visible){outline:none;}", `button.__jsx-style-dynamic-selector:active{background-color:${_uiConstants.colors.grey300};}`]));
 };
-
 exports.CloseButton = CloseButton;
 CloseButton.propTypes = {
   onClick: _propTypes.default.func

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

@@ -1,7 +1,6 @@
 "use strict";
 
 var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
-
 (0, _cypressCucumberPreprocessor.Given)('a Modal with children is rendered', () => {
   cy.visitStory('Modal', 'With children');
   cy.get('[data-test="dhis2-uicore-modal"]').should('exist');

package/build/cjs/modal/features/can_be_closed/index.js

@@ -1,9 +1,8 @@
 "use strict";
 
 var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
-
 (0, _cypressCucumberPreprocessor.Given)('a top-aligned Modal with onClose handler is rendered', () => {
-  cy.visitStory('Modal', 'With onClose');
+  cy.visitStory('Modal', 'With on close');
 });
 (0, _cypressCucumberPreprocessor.When)('the Screencover is clicked above the modal', () => {
   cy.get('[data-test="dhis2-uicore-layer"] > .backdrop').click('top');
@@ -14,13 +13,13 @@ var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preproces
   });
 });
 (0, _cypressCucumberPreprocessor.Given)('a bottom-aligned Modal with onClose handler is rendered', () => {
-  cy.visitStory('Modal', 'Bottom-aligned, with onClose');
+  cy.visitStory('Modal', 'Bottom-aligned, with on close');
 });
 (0, _cypressCucumberPreprocessor.When)('the Screencover is clicked below the modal', () => {
   cy.get('[data-test="dhis2-uicore-layer"] > .backdrop').click('bottom');
 });
 (0, _cypressCucumberPreprocessor.Given)('a Modal with onClose handler is rendered', () => {
-  cy.visitStory('Modal', 'With onClose');
+  cy.visitStory('Modal', 'With on close');
 });
 (0, _cypressCucumberPreprocessor.When)('the close button is clicked', () => {
   cy.get('[data-test="dhis2-modal-close-button"]').click();

package/build/cjs/modal/features/does_not_unmount_children_when_hiding/index.js

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

package/build/cjs/modal/index.js

@@ -9,5 +9,4 @@ Object.defineProperty(exports, "Modal", {
     return _modal.Modal;
   }
 });
-
 var _modal = require("./modal.js");

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

@@ -0,0 +1,63 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.WithStatefulChildren = exports.WithOnClose = exports.WithChildren = exports.BottomAlignedWithOnClose = void 0;
+var _button = require("@dhis2-ui/button");
+var _react = _interopRequireWildcard(require("react"));
+var _index = require("../index.js");
+var _modal = require("./modal.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; }
+window.onClose = window.Cypress && window.Cypress.cy.stub();
+const StatefuleComponent = () => {
+  const [counter, setCounter] = (0, _react.useState)(0);
+  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("p", null, "Current counter:", /*#__PURE__*/_react.default.createElement("span", {
+    id: "counter-value"
+  }, counter)), /*#__PURE__*/_react.default.createElement("button", {
+    id: "increment-counter",
+    onClick: () => setCounter(counter + 1)
+  }, "Add 1 to counter"));
+};
+var _default = exports.default = {
+  title: 'Modal'
+};
+const WithOnClose = () => /*#__PURE__*/_react.default.createElement(_modal.Modal, {
+  small: true,
+  onClose: window.onClose
+}, /*#__PURE__*/_react.default.createElement(_index.ModalTitle, null, "Title"), /*#__PURE__*/_react.default.createElement(_index.ModalContent, null, "Content"), /*#__PURE__*/_react.default.createElement(_index.ModalActions, null, /*#__PURE__*/_react.default.createElement(_button.ButtonStrip, {
+  end: true
+}, /*#__PURE__*/_react.default.createElement(_button.Button, {
+  secondary: true
+}, "Secondary action"), /*#__PURE__*/_react.default.createElement(_button.Button, {
+  primary: true
+}, "Primary action"))));
+exports.WithOnClose = WithOnClose;
+const BottomAlignedWithOnClose = () => /*#__PURE__*/_react.default.createElement(_modal.Modal, {
+  small: true,
+  onClose: window.onClose,
+  position: "bottom"
+}, /*#__PURE__*/_react.default.createElement(_index.ModalTitle, null, "Title"), /*#__PURE__*/_react.default.createElement(_index.ModalContent, null, "Content"), /*#__PURE__*/_react.default.createElement(_index.ModalActions, null, /*#__PURE__*/_react.default.createElement(_button.ButtonStrip, {
+  end: true
+}, /*#__PURE__*/_react.default.createElement(_button.Button, {
+  secondary: true
+}, "Secondary action"), /*#__PURE__*/_react.default.createElement(_button.Button, {
+  primary: true
+}, "Primary action"))));
+exports.BottomAlignedWithOnClose = BottomAlignedWithOnClose;
+const WithChildren = () => /*#__PURE__*/_react.default.createElement(_modal.Modal, null, "I am a child");
+exports.WithChildren = WithChildren;
+const WithStatefulChildren = () => {
+  const [hide, setHide] = (0, _react.useState)(false);
+  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("button", {
+    id: "show-modal",
+    onClick: () => setHide(false)
+  }, "Show"), /*#__PURE__*/_react.default.createElement(_modal.Modal, {
+    hide: hide
+  }, /*#__PURE__*/_react.default.createElement(_index.ModalTitle, null, "Can be hidden"), /*#__PURE__*/_react.default.createElement(_index.ModalContent, null, /*#__PURE__*/_react.default.createElement(StatefuleComponent, null)), /*#__PURE__*/_react.default.createElement(_index.ModalActions, null, /*#__PURE__*/_react.default.createElement("button", {
+    id: "hide-modal",
+    onClick: () => setHide(true)
+  }, "Hide modal"))));
+};
+exports.WithStatefulChildren = WithStatefulChildren;

package/build/cjs/modal/modal.js

@@ -4,39 +4,25 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Modal = void 0;
-
 var _style = _interopRequireDefault(require("styled-jsx/style"));
-
+var _uiConstants = require("@dhis2/ui-constants");
 var _card = require("@dhis2-ui/card");
-
 var _center = require("@dhis2-ui/center");
-
 var _layer = require("@dhis2-ui/layer");
-
-var _uiConstants = require("@dhis2/ui-constants");
-
 var _classnames = _interopRequireDefault(require("classnames"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _closeButton = require("./close-button.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 resolveLayerStyles = hide => ({
   styles: /*#__PURE__*/_react.default.createElement(_style.default, {
     id: "1884450060",
     dynamic: [_uiConstants.spacers.dp64, hide ? 'none' : 'block']
-  }, ["div.__jsx-style-dynamic-selector{padding:".concat(_uiConstants.spacers.dp64, ";display:").concat(hide ? 'none' : 'block', ";}")]),
+  }, [`div.__jsx-style-dynamic-selector{padding:${_uiConstants.spacers.dp64};display:${hide ? 'none' : 'block'};}`]),
   className: _style.default.dynamic([["1884450060", [_uiConstants.spacers.dp64, hide ? 'none' : 'block']]])
 });
-
 const Modal = _ref => {
   let {
     children,
@@ -54,7 +40,6 @@ const Modal = _ref => {
     if (hide) {
       return;
     }
-
     const handleKeyDown = event => {
       if (event.key === 'Escape' && onClose) {
         event.preventDefault();
@@ -62,7 +47,6 @@ const Modal = _ref => {
         onClose();
       }
     };
-
     document.addEventListener('keydown', handleKeyDown);
     return () => {
       document.removeEventListener('keydown', handleKeyDown);
@@ -90,9 +74,8 @@ const Modal = _ref => {
   }, children))), layerStyles.styles), /*#__PURE__*/_react.default.createElement(_style.default, {
     id: "3655640549",
     dynamic: [2 * _uiConstants.spacersNum.dp64, 2 * _uiConstants.spacersNum.dp64, 2 * _uiConstants.spacersNum.dp64, 2 * _uiConstants.spacersNum.dp64]
-  }, ["aside.__jsx-style-dynamic-selector{height:auto;width:600px;max-width:calc(100vw - ".concat(2 * _uiConstants.spacersNum.dp64, "px);max-height:calc(100vh - ").concat(2 * _uiConstants.spacersNum.dp64, "px);}"), "aside.small.__jsx-style-dynamic-selector{width:400px;}", "aside.large.__jsx-style-dynamic-selector{width:800px;}", "aside.fluid.__jsx-style-dynamic-selector{width:auto;}", "div.__jsx-style-dynamic-selector{padding:24px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-flow:column;-ms-flex-flow:column;flex-flow:column;max-width:calc(100vw - ".concat(2 * _uiConstants.spacersNum.dp64, "px);max-height:calc(100vh - ").concat(2 * _uiConstants.spacersNum.dp64, "px);}")]));
+  }, [`aside.__jsx-style-dynamic-selector{height:auto;width:600px;max-width:calc(100vw - ${2 * _uiConstants.spacersNum.dp64}px);max-height:calc(100vh - ${2 * _uiConstants.spacersNum.dp64}px);}`, "aside.small.__jsx-style-dynamic-selector{width:400px;}", "aside.large.__jsx-style-dynamic-selector{width:800px;}", "aside.fluid.__jsx-style-dynamic-selector{width:auto;}", `div.__jsx-style-dynamic-selector{padding:24px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-flow:column;-ms-flex-flow:column;flex-flow:column;max-width:calc(100vw - ${2 * _uiConstants.spacersNum.dp64}px);max-height:calc(100vh - ${2 * _uiConstants.spacersNum.dp64}px);}`]));
 };
-
 exports.Modal = Modal;
 Modal.defaultProps = {
   dataTest: 'dhis2-uicore-modal',
@@ -107,7 +90,6 @@ Modal.propTypes = {
   large: _uiConstants.sharedPropTypes.sizePropType,
   position: _uiConstants.sharedPropTypes.insideAlignmentPropType,
   small: _uiConstants.sharedPropTypes.sizePropType,
-
   /** Callback used when the Modal closes */
   onClose: _propTypes.default.func
 };