@dhis2-ui/modal 9.12.0-alpha.4 → 9.13.0

package/build/cjs/modal/modal.js

@@ -27,12 +27,12 @@ const Modal = _ref => {
   let {
     children,
     className,
-    dataTest,
+    dataTest = 'dhis2-uicore-modal',
     hide,
     fluid,
     large,
     onClose,
-    position,
+    position = 'top',
     small
   } = _ref;
   const layerStyles = resolveLayerStyles(hide);
@@ -77,10 +77,6 @@ const Modal = _ref => {
   }, [`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',
-  position: 'top'
-};
 Modal.propTypes = {
   children: _propTypes.default.node,
   className: _propTypes.default.string,

package/build/cjs/modal/modal.test.js

@@ -9,7 +9,7 @@ describe('Modal', () => {
   describe('Modal Accessibility', () => {
     it('closes when ESC key is pressed', () => {
       const onCloseMock = jest.fn();
-      (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_modal.Modal, {
+      (0, _react.render)(/*#__PURE__*/_react2.default.createElement(_modal.Modal, {
         onClose: onCloseMock
       }));
       const modalElement = _react.screen.getByRole('dialog');
@@ -21,7 +21,7 @@ describe('Modal', () => {
     });
     it('does not close when "Enter" is pressed', () => {
       const onCloseMock = jest.fn();
-      (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_modal.Modal, {
+      (0, _react.render)(/*#__PURE__*/_react2.default.createElement(_modal.Modal, {
         onClose: onCloseMock
       }));
       const modalElement = _react.screen.getByRole('dialog');
@@ -33,7 +33,7 @@ describe('Modal', () => {
     });
     it('does not close when "SpaceBar" is pressed', () => {
       const onCloseMock = jest.fn();
-      (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_modal.Modal, {
+      (0, _react.render)(/*#__PURE__*/_react2.default.createElement(_modal.Modal, {
         onClose: onCloseMock
       }));
       const modalElement = _react.screen.getByRole('dialog');
@@ -44,7 +44,7 @@ describe('Modal', () => {
       expect(onCloseMock).not.toHaveBeenCalled();
     });
     it('has a close button with proper accessibility attributes', async () => {
-      (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_closeButton.CloseButton, null));
+      (0, _react.render)(/*#__PURE__*/_react2.default.createElement(_closeButton.CloseButton, null));
       const closeButton = await _react.screen.findByLabelText(/Close modal dialog/);
       expect(closeButton).toBeInTheDocument();
       expect(closeButton.tagName).toBe('BUTTON');
@@ -52,7 +52,7 @@ describe('Modal', () => {
   });
   describe('Regular dimensions', () => {
     it('has the correct dimension styles in its default state', () => {
-      (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_modal.Modal, null));
+      (0, _react.render)(/*#__PURE__*/_react2.default.createElement(_modal.Modal, null));
       const modalEl = _react.screen.getByRole('dialog');
       const style = window.getComputedStyle(modalEl);
       expect(style.height).toBe('auto');
@@ -61,7 +61,7 @@ describe('Modal', () => {
       expect(style.width).toBe('600px');
     });
     it('has the correct dimension styles when the "small" prop is provided', () => {
-      (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_modal.Modal, {
+      (0, _react.render)(/*#__PURE__*/_react2.default.createElement(_modal.Modal, {
         small: true
       }));
       const modalEl = _react.screen.getByRole('dialog');
@@ -72,7 +72,7 @@ describe('Modal', () => {
       expect(style.width).toBe('400px');
     });
     it('has the correct dimension styles when the "large" prop is provided', () => {
-      (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_modal.Modal, {
+      (0, _react.render)(/*#__PURE__*/_react2.default.createElement(_modal.Modal, {
         large: true
       }));
       const modalEl = _react.screen.getByRole('dialog');
@@ -83,7 +83,7 @@ describe('Modal', () => {
       expect(style.width).toBe('800px');
     });
     it('has the correct dimension styles when the "fluid" prop is provided', () => {
-      (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_modal.Modal, {
+      (0, _react.render)(/*#__PURE__*/_react2.default.createElement(_modal.Modal, {
         fluid: true
       }));
       const modalEl = _react.screen.getByRole('dialog');

package/build/cjs/modal-actions/modal-actions.js

@@ -12,7 +12,7 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
 const ModalActions = _ref => {
   let {
     children,
-    dataTest
+    dataTest = 'dhis2-uicore-modalactions'
   } = _ref;
   return /*#__PURE__*/_react.default.createElement("div", {
     "data-test": dataTest,
@@ -23,9 +23,6 @@ const ModalActions = _ref => {
   }, [`div.__jsx-style-dynamic-selector{-webkit-order:3;-ms-flex-order:3;order:3;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-webkit-justify-content:flex-end;-ms-flex-pack:end;justify-content:flex-end;-webkit-align-self:flex-end;-ms-flex-item-align:end;align-self:flex-end;margin:${_uiConstants.spacers.dp16} 0 0;}`]));
 };
 exports.ModalActions = ModalActions;
-ModalActions.defaultProps = {
-  dataTest: 'dhis2-uicore-modalactions'
-};
 ModalActions.propTypes = {
   children: _propTypes.default.node,
   dataTest: _propTypes.default.string

package/build/cjs/modal-content/modal-content.js

@@ -12,7 +12,7 @@ const ModalContent = _ref => {
   let {
     children,
     className,
-    dataTest
+    dataTest = 'dhis2-uicore-modalcontent'
   } = _ref;
   return /*#__PURE__*/_react.default.createElement("div", {
     "data-test": dataTest,
@@ -22,9 +22,6 @@ const ModalContent = _ref => {
   }, ["div.jsx-3719215021{-webkit-order:2;-ms-flex-order:2;order:2;-webkit-box-flex:2;-webkit-flex-grow:2;-ms-flex-positive:2;flex-grow:2;overflow-y:auto;}"]));
 };
 exports.ModalContent = ModalContent;
-ModalContent.defaultProps = {
-  dataTest: 'dhis2-uicore-modalcontent'
-};
 ModalContent.propTypes = {
   children: _propTypes.default.node,
   className: _propTypes.default.string,

package/build/cjs/modal-title/modal-title.js

@@ -13,7 +13,7 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
 const ModalTitle = _ref => {
   let {
     children,
-    dataTest
+    dataTest = 'dhis2-uicore-modaltitle'
   } = _ref;
   return /*#__PURE__*/_react.default.createElement("h1", {
     "data-test": dataTest,
@@ -24,9 +24,6 @@ const ModalTitle = _ref => {
   }, [`h1.__jsx-style-dynamic-selector{-webkit-order:1;-ms-flex-order:1;order:1;-webkit-align-self:flex-start;-ms-flex-item-align:start;align-self:flex-start;color:${_uiConstants.colors.grey900};font-size:20px;font-weight:500;line-height:24px;margin:0 0 ${_uiConstants.spacers.dp12};}`]));
 };
 exports.ModalTitle = ModalTitle;
-ModalTitle.defaultProps = {
-  dataTest: 'dhis2-uicore-modaltitle'
-};
 ModalTitle.propTypes = {
   children: _propTypes.default.node,
   dataTest: _propTypes.default.string

package/build/es/modal/modal.js

@@ -18,12 +18,12 @@ export const Modal = _ref => {
   let {
     children,
     className,
-    dataTest,
+    dataTest = 'dhis2-uicore-modal',
     hide,
     fluid,
     large,
     onClose,
-    position,
+    position = 'top',
     small
   } = _ref;
   const layerStyles = resolveLayerStyles(hide);
@@ -67,10 +67,6 @@ export const Modal = _ref => {
     dynamic: [2 * spacersNum.dp64, 2 * spacersNum.dp64, 2 * spacersNum.dp64, 2 * spacersNum.dp64]
   }, [`aside.__jsx-style-dynamic-selector{height:auto;width:600px;max-width:calc(100vw - ${2 * spacersNum.dp64}px);max-height:calc(100vh - ${2 * 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 * spacersNum.dp64}px);max-height:calc(100vh - ${2 * spacersNum.dp64}px);}`]));
 };
-Modal.defaultProps = {
-  dataTest: 'dhis2-uicore-modal',
-  position: 'top'
-};
 Modal.propTypes = {
   children: PropTypes.node,
   className: PropTypes.string,

package/build/es/modal/modal.test.js

@@ -6,7 +6,7 @@ describe('Modal', () => {
   describe('Modal Accessibility', () => {
     it('closes when ESC key is pressed', () => {
       const onCloseMock = jest.fn();
-      render( /*#__PURE__*/React.createElement(Modal, {
+      render(/*#__PURE__*/React.createElement(Modal, {
         onClose: onCloseMock
       }));
       const modalElement = screen.getByRole('dialog');
@@ -18,7 +18,7 @@ describe('Modal', () => {
     });
     it('does not close when "Enter" is pressed', () => {
       const onCloseMock = jest.fn();
-      render( /*#__PURE__*/React.createElement(Modal, {
+      render(/*#__PURE__*/React.createElement(Modal, {
         onClose: onCloseMock
       }));
       const modalElement = screen.getByRole('dialog');
@@ -30,7 +30,7 @@ describe('Modal', () => {
     });
     it('does not close when "SpaceBar" is pressed', () => {
       const onCloseMock = jest.fn();
-      render( /*#__PURE__*/React.createElement(Modal, {
+      render(/*#__PURE__*/React.createElement(Modal, {
         onClose: onCloseMock
       }));
       const modalElement = screen.getByRole('dialog');
@@ -41,7 +41,7 @@ describe('Modal', () => {
       expect(onCloseMock).not.toHaveBeenCalled();
     });
     it('has a close button with proper accessibility attributes', async () => {
-      render( /*#__PURE__*/React.createElement(CloseButton, null));
+      render(/*#__PURE__*/React.createElement(CloseButton, null));
       const closeButton = await screen.findByLabelText(/Close modal dialog/);
       expect(closeButton).toBeInTheDocument();
       expect(closeButton.tagName).toBe('BUTTON');
@@ -49,7 +49,7 @@ describe('Modal', () => {
   });
   describe('Regular dimensions', () => {
     it('has the correct dimension styles in its default state', () => {
-      render( /*#__PURE__*/React.createElement(Modal, null));
+      render(/*#__PURE__*/React.createElement(Modal, null));
       const modalEl = screen.getByRole('dialog');
       const style = window.getComputedStyle(modalEl);
       expect(style.height).toBe('auto');
@@ -58,7 +58,7 @@ describe('Modal', () => {
       expect(style.width).toBe('600px');
     });
     it('has the correct dimension styles when the "small" prop is provided', () => {
-      render( /*#__PURE__*/React.createElement(Modal, {
+      render(/*#__PURE__*/React.createElement(Modal, {
         small: true
       }));
       const modalEl = screen.getByRole('dialog');
@@ -69,7 +69,7 @@ describe('Modal', () => {
       expect(style.width).toBe('400px');
     });
     it('has the correct dimension styles when the "large" prop is provided', () => {
-      render( /*#__PURE__*/React.createElement(Modal, {
+      render(/*#__PURE__*/React.createElement(Modal, {
         large: true
       }));
       const modalEl = screen.getByRole('dialog');
@@ -80,7 +80,7 @@ describe('Modal', () => {
       expect(style.width).toBe('800px');
     });
     it('has the correct dimension styles when the "fluid" prop is provided', () => {
-      render( /*#__PURE__*/React.createElement(Modal, {
+      render(/*#__PURE__*/React.createElement(Modal, {
         fluid: true
       }));
       const modalEl = screen.getByRole('dialog');

package/build/es/modal-actions/modal-actions.js

@@ -5,7 +5,7 @@ import React from 'react';
 export const ModalActions = _ref => {
   let {
     children,
-    dataTest
+    dataTest = 'dhis2-uicore-modalactions'
   } = _ref;
   return /*#__PURE__*/React.createElement("div", {
     "data-test": dataTest,
@@ -15,9 +15,6 @@ export const ModalActions = _ref => {
     dynamic: [spacers.dp16]
   }, [`div.__jsx-style-dynamic-selector{-webkit-order:3;-ms-flex-order:3;order:3;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-webkit-justify-content:flex-end;-ms-flex-pack:end;justify-content:flex-end;-webkit-align-self:flex-end;-ms-flex-item-align:end;align-self:flex-end;margin:${spacers.dp16} 0 0;}`]));
 };
-ModalActions.defaultProps = {
-  dataTest: 'dhis2-uicore-modalactions'
-};
 ModalActions.propTypes = {
   children: PropTypes.node,
   dataTest: PropTypes.string

package/build/es/modal-content/modal-content.js

@@ -5,7 +5,7 @@ export const ModalContent = _ref => {
   let {
     children,
     className,
-    dataTest
+    dataTest = 'dhis2-uicore-modalcontent'
   } = _ref;
   return /*#__PURE__*/React.createElement("div", {
     "data-test": dataTest,
@@ -14,9 +14,6 @@ export const ModalContent = _ref => {
     id: "3719215021"
   }, ["div.jsx-3719215021{-webkit-order:2;-ms-flex-order:2;order:2;-webkit-box-flex:2;-webkit-flex-grow:2;-ms-flex-positive:2;flex-grow:2;overflow-y:auto;}"]));
 };
-ModalContent.defaultProps = {
-  dataTest: 'dhis2-uicore-modalcontent'
-};
 ModalContent.propTypes = {
   children: PropTypes.node,
   className: PropTypes.string,

package/build/es/modal-title/modal-title.js

@@ -6,7 +6,7 @@ import React from 'react';
 export const ModalTitle = _ref => {
   let {
     children,
-    dataTest
+    dataTest = 'dhis2-uicore-modaltitle'
   } = _ref;
   return /*#__PURE__*/React.createElement("h1", {
     "data-test": dataTest,
@@ -16,9 +16,6 @@ export const ModalTitle = _ref => {
     dynamic: [colors.grey900, spacers.dp12]
   }, [`h1.__jsx-style-dynamic-selector{-webkit-order:1;-ms-flex-order:1;order:1;-webkit-align-self:flex-start;-ms-flex-item-align:start;align-self:flex-start;color:${colors.grey900};font-size:20px;font-weight:500;line-height:24px;margin:0 0 ${spacers.dp12};}`]));
 };
-ModalTitle.defaultProps = {
-  dataTest: 'dhis2-uicore-modaltitle'
-};
 ModalTitle.propTypes = {
   children: PropTypes.node,
   dataTest: PropTypes.string

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/modal",
-    "version": "9.12.0-alpha.4",
+    "version": "9.13.0",
     "description": "UI Modal",
     "repository": {
         "type": "git",
@@ -27,18 +27,18 @@
         "test": "d2-app-scripts test --jestConfig ../../jest.config.shared.js"
     },
     "peerDependencies": {
-        "react": "^16.13",
-        "react-dom": "^16.13",
+        "react": "^16.13 || ^18",
+        "react-dom": "^16.13 || ^18",
         "styled-jsx": "^4"
     },
     "dependencies": {
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2-ui/card": "9.12.0-alpha.4",
-        "@dhis2-ui/center": "9.12.0-alpha.4",
-        "@dhis2-ui/layer": "9.12.0-alpha.4",
-        "@dhis2-ui/portal": "9.12.0-alpha.4",
-        "@dhis2/ui-constants": "9.12.0-alpha.4",
-        "@dhis2/ui-icons": "9.12.0-alpha.4",
+        "@dhis2-ui/card": "9.13.0",
+        "@dhis2-ui/center": "9.13.0",
+        "@dhis2-ui/layer": "9.13.0",
+        "@dhis2-ui/portal": "9.13.0",
+        "@dhis2/ui-constants": "9.13.0",
+        "@dhis2/ui-icons": "9.13.0",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },
@@ -47,8 +47,8 @@
         "types"
     ],
     "devDependencies": {
-        "react": "16.13",
-        "react-dom": "16.13",
+        "react": "^18.3.1",
+        "react-dom": "^18.3.1",
         "styled-jsx": "^4.0.1"
     },
     "types": "types"