@dhis2-ui/layer - npm Package Compare versions

Comparing version 6.17.0 to 6.18.0

build/cjs/layer.js

@@ -10,3 +10,3 @@ "use strict";
 
-var _uiConstants = require("@dhis2/ui-constants");
+var _portal = require("@dhis2-ui/portal");
 
@@ -17,14 +17,4 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 
-var _reactDom = require("react-dom");
-
-var _layerContext = require("./layer-context.js");
-
-var _useLayerContext = require("./use-layer-context.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 }; }
@@ -43,2 +33,3 @@
   dataTest,
+  disablePortal,
   level,
@@ -48,26 +39,16 @@ onClick,
   translucent
-}) => {
-  const parentLayer = (0, _useLayerContext.useLayerContext)();
-  const [layerEl, setLayerEl] = (0, _react.useState)(null);
-  const nextLayer = {
-    node: layerEl,
-    level: Math.max(parentLayer.level, level)
-  };
-  const portalNode = level > parentLayer.level ? document.body : parentLayer.node;
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/(0, _reactDom.createPortal)( /*#__PURE__*/_react.default.createElement("div", {
-    ref: setLayerEl,
-    "data-test": dataTest,
-    onClick: createClickHandler(onClick),
-    className: "jsx-3270755513 " + _style.default.dynamic([["1492615244", [level]]]) + " " + ((0, _classnames.default)('layer', className, position, `level-${level}`, {
-      translucent
-    }) || "")
-  }, layerEl && /*#__PURE__*/_react.default.createElement(_layerContext.Provider, {
-    value: nextLayer
-  }, children), /*#__PURE__*/_react.default.createElement(_style.default, {
-    id: "1492615244",
-    dynamic: [level]
-  }, [`div.__jsx-style-dynamic-selector{z-index:${level};}`]), /*#__PURE__*/_react.default.createElement(_style.default, {
-    id: "3270755513"
-  }, ["div.jsx-3270755513{top:0;left:0;min-height:100vh;min-width:100vw;}", "div.fixed.jsx-3270755513{position:fixed;height:100vh;width:100vw;}", "div.absolute.jsx-3270755513{position:absolute;height:100%;width:100%;}", "div.translucent.jsx-3270755513{background-color:rgba(33,43,54,0.4);}"])), portalNode));
-};
+}) => /*#__PURE__*/_react.default.createElement(_portal.Portal, {
+  disable: disablePortal
+}, /*#__PURE__*/_react.default.createElement("div", {
+  "data-test": dataTest,
+  onClick: createClickHandler(onClick),
+  className: "jsx-2944291715 " + _style.default.dynamic([["2635812695", [level]]]) + " " + ((0, _classnames.default)('layer', className, position, {
+    translucent
+  }) || "")
+}, children, /*#__PURE__*/_react.default.createElement(_style.default, {
+  id: "2635812695",
+  dynamic: [level]
+}, [`div.__jsx-style-dynamic-selector{z-index:${level};}`]), /*#__PURE__*/_react.default.createElement(_style.default, {
+  id: "2944291715"
+}, ["div.jsx-2944291715{top:0;left:0;min-height:100vh;min-width:100vw;}", "div.fixed.jsx-2944291715{position:fixed;height:100vh;width:100vw;}", "div.absolute.jsx-2944291715{position:absolute;height:100%;width:100%;}", "div.translucent.jsx-2944291715{background-color:rgba(33,43,54,0.4);}"])));
 
@@ -78,3 +59,3 @@ exports.Layer = Layer;
   dataTest: 'dhis2-uicore-layer',
-  level: _uiConstants.layers.applicationTop
+  level: 'auto'
 };
@@ -86,4 +67,7 @@ Layer.propTypes = {
 
+  /** Disable the Portal, useful for nesting layers */
+  disablePortal: _propTypes.default.bool,
+
   /** Z-index level */
-  level: _propTypes.default.number,
+  level: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
   position: _propTypes.default.oneOf(['absolute', 'fixed']),
@@ -90,0 +74,0 @@

build/cjs/layer.stories.e2e.js

@@ -75,2 +75,3 @@ "use strict";
   dataTest: "blocking",
+  disablePortal: true,
   onClick: createNamedLayerClick('blocking')
@@ -77,0 +78,0 @@ }));

build/es/index.js

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

build/es/layer.js

 import _JSXStyle from "styled-jsx/style";
-import { layers } from '@dhis2/ui-constants';
+import { Portal } from '@dhis2-ui/portal';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
-import React, { useState } from 'react';
-import { createPortal } from 'react-dom';
-import { Provider } from './layer-context.js';
-import { useLayerContext } from './use-layer-context.js';
+import React from 'react';
 
@@ -21,2 +18,3 @@ const createClickHandler = onClick => event => {
   dataTest,
+  disablePortal,
   level,
@@ -26,26 +24,16 @@ onClick,
   translucent
-}) => {
-  const parentLayer = useLayerContext();
-  const [layerEl, setLayerEl] = useState(null);
-  const nextLayer = {
-    node: layerEl,
-    level: Math.max(parentLayer.level, level)
-  };
-  const portalNode = level > parentLayer.level ? document.body : parentLayer.node;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement("div", {
-    ref: setLayerEl,
-    "data-test": dataTest,
-    onClick: createClickHandler(onClick),
-    className: "jsx-3270755513 " + _JSXStyle.dynamic([["1492615244", [level]]]) + " " + (cx('layer', className, position, `level-${level}`, {
-      translucent
-    }) || "")
-  }, layerEl && /*#__PURE__*/React.createElement(Provider, {
-    value: nextLayer
-  }, children), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "1492615244",
-    dynamic: [level]
-  }, [`div.__jsx-style-dynamic-selector{z-index:${level};}`]), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "3270755513"
-  }, ["div.jsx-3270755513{top:0;left:0;min-height:100vh;min-width:100vw;}", "div.fixed.jsx-3270755513{position:fixed;height:100vh;width:100vw;}", "div.absolute.jsx-3270755513{position:absolute;height:100%;width:100%;}", "div.translucent.jsx-3270755513{background-color:rgba(33,43,54,0.4);}"])), portalNode));
-};
+}) => /*#__PURE__*/React.createElement(Portal, {
+  disable: disablePortal
+}, /*#__PURE__*/React.createElement("div", {
+  "data-test": dataTest,
+  onClick: createClickHandler(onClick),
+  className: "jsx-2944291715 " + _JSXStyle.dynamic([["2635812695", [level]]]) + " " + (cx('layer', className, position, {
+    translucent
+  }) || "")
+}, children, /*#__PURE__*/React.createElement(_JSXStyle, {
+  id: "2635812695",
+  dynamic: [level]
+}, [`div.__jsx-style-dynamic-selector{z-index:${level};}`]), /*#__PURE__*/React.createElement(_JSXStyle, {
+  id: "2944291715"
+}, ["div.jsx-2944291715{top:0;left:0;min-height:100vh;min-width:100vw;}", "div.fixed.jsx-2944291715{position:fixed;height:100vh;width:100vw;}", "div.absolute.jsx-2944291715{position:absolute;height:100%;width:100%;}", "div.translucent.jsx-2944291715{background-color:rgba(33,43,54,0.4);}"])));
 
@@ -55,3 +43,3 @@ Layer.defaultProps = {
   dataTest: 'dhis2-uicore-layer',
-  level: layers.applicationTop
+  level: 'auto'
 };
@@ -63,4 +51,7 @@ Layer.propTypes = {
 
+  /** Disable the Portal, useful for nesting layers */
+  disablePortal: PropTypes.bool,
+
   /** Z-index level */
-  level: PropTypes.number,
+  level: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   position: PropTypes.oneOf(['absolute', 'fixed']),
@@ -67,0 +58,0 @@

build/es/layer.stories.e2e.js

@@ -46,2 +46,3 @@ import { layers } from '@dhis2/ui-constants';
   dataTest: "blocking",
+  disablePortal: true,
   onClick: createNamedLayerClick('blocking')
@@ -48,0 +49,0 @@ }));

package.json

 {
     "name": "@dhis2-ui/layer",
-    "version": "6.17.0",
+    "version": "6.18.0",
     "description": "UI Layer",
@@ -34,4 +34,5 @@ "repository": {
     "dependencies": {
+        "@dhis2-ui/portal": "6.18.0",
         "@dhis2/prop-types": "^1.6.4",
-        "@dhis2/ui-constants": "6.17.0",
+        "@dhis2/ui-constants": "6.18.0",
         "classnames": "^2.3.1",
@@ -38,0 +39,0 @@ "prop-types": "^15.7.2"

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

32422

decreased by-5.85%

Dependency count

8

increased by14.29%

Lines of code

637

decreased by-3.48%

Dependency changes

• + Added@dhis2-ui/portal@6.18.0

• + Added@dhis2-ui/portal@6.18.0(transitive)

• + Added@dhis2/ui-constants@6.18.0(transitive)

• - Removed@dhis2/ui-constants@6.17.0(transitive)

• Updated@dhis2/ui-constants@6.18.0