@dhis2-ui/layer 8.2.4 → 8.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/build/cjs/layer.js +25 -23
  2. package/build/cjs/layer.stories.e2e.js +14 -14
  3. package/build/cjs/layer.stories.js +5 -5
  4. package/build/es/layer.js +16 -15
  5. package/build/es/layer.stories.e2e.js +14 -14
  6. package/build/es/layer.stories.js +3 -3
  7. package/package.json +4 -4
package/build/cjs/layer.js CHANGED
@@ -9,21 +9,16 @@ var _style = _interopRequireDefault(require("styled-jsx/style"));
9
9
 
10
10
  var _portal = require("@dhis2-ui/portal");
11
11
 
12
+ var _propTypes = require("@dhis2/prop-types");
13
+
12
14
  var _classnames = _interopRequireDefault(require("classnames"));
13
15
 
14
- var _propTypes = _interopRequireDefault(require("prop-types"));
16
+ var _propTypes2 = _interopRequireDefault(require("prop-types"));
15
17
 
16
18
  var _react = _interopRequireDefault(require("react"));
17
19
 
18
20
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
19
21
 
20
- const createClickHandler = onClick => event => {
21
- // don't respond to clicks that originated in the children
22
- if (onClick && event.target === event.currentTarget) {
23
- onClick({}, event);
24
- }
25
- };
26
-
27
22
  const Layer = _ref => {
28
23
  let {
29
24
  children,
@@ -31,24 +26,28 @@ const Layer = _ref => {
31
26
  dataTest,
32
27
  disablePortal,
33
28
  level,
29
+ onBackdropClick,
34
30
  onClick,
35
31
  position,
36
32
  translucent
37
33
  } = _ref;
34
+ const resolvedOnClick = onBackdropClick || onClick;
38
35
  return /*#__PURE__*/_react.default.createElement(_portal.Portal, {
39
36
  disable: disablePortal
40
37
  }, /*#__PURE__*/_react.default.createElement("div", {
41
38
  "data-test": dataTest,
42
- onClick: createClickHandler(onClick),
43
- className: "jsx-2944291715 " + _style.default.dynamic([["2635812695", [level]]]) + " " + ((0, _classnames.default)('layer', className, position, {
39
+ className: "jsx-1613565548 " + _style.default.dynamic([["4184224765", [level]]]) + " " + ((0, _classnames.default)('layer', className, position, {
44
40
  translucent
45
41
  }) || "")
46
- }, children, /*#__PURE__*/_react.default.createElement(_style.default, {
47
- id: "2635812695",
42
+ }, resolvedOnClick && /*#__PURE__*/_react.default.createElement("div", {
43
+ onClick: event => resolvedOnClick({}, event),
44
+ className: "jsx-1613565548 " + _style.default.dynamic([["4184224765", [level]]]) + " " + "backdrop"
45
+ }), children, /*#__PURE__*/_react.default.createElement(_style.default, {
46
+ id: "4184224765",
48
47
  dynamic: [level]
49
48
  }, ["div.__jsx-style-dynamic-selector{z-index:".concat(level, ";}")]), /*#__PURE__*/_react.default.createElement(_style.default, {
50
- id: "2944291715"
51
- }, ["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);}"])));
49
+ id: "1613565548"
50
+ }, ["div.jsx-1613565548{top:0;left:0;min-height:100vh;min-width:100vw;}", "div.fixed.jsx-1613565548{position:fixed;height:100vh;width:100vw;}", "div.absolute.jsx-1613565548{position:absolute;height:100%;width:100%;}", "div.translucent.jsx-1613565548{background-color:rgba(33,43,54,0.4);}", "div.backdrop.jsx-1613565548{position:absolute;inset:0;z-index:-1;}"])));
52
51
  };
53
52
 
54
53
  exports.Layer = Layer;
@@ -58,20 +57,23 @@ Layer.defaultProps = {
58
57
  level: 'auto'
59
58
  };
60
59
  Layer.propTypes = {
61
- children: _propTypes.default.node,
62
- className: _propTypes.default.string,
63
- dataTest: _propTypes.default.string,
60
+ children: _propTypes2.default.node,
61
+ className: _propTypes2.default.string,
62
+ dataTest: _propTypes2.default.string,
64
63
 
65
64
  /** Disable the Portal, useful for nesting layers */
66
- disablePortal: _propTypes.default.bool,
65
+ disablePortal: _propTypes2.default.bool,
67
66
 
68
67
  /** Z-index level */
69
- level: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
70
- position: _propTypes.default.oneOf(['absolute', 'fixed']),
68
+ level: _propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.string]),
69
+ position: _propTypes2.default.oneOf(['absolute', 'fixed']),
71
70
 
72
71
  /** Adds a semi-transparent background */
73
- translucent: _propTypes.default.bool,
72
+ translucent: _propTypes2.default.bool,
73
+
74
+ /** Backdrop click handler */
75
+ onBackdropClick: _propTypes2.default.func,
74
76
 
75
- /** Click handler */
76
- onClick: _propTypes.default.func
77
+ /** Click handler - DEPRECATED */
78
+ onClick: (0, _propTypes.deprecated)(_propTypes2.default.func, 'Please use "onBackdropClick" instead')
77
79
  };
package/build/cjs/layer.stories.e2e.js CHANGED
@@ -37,7 +37,7 @@ const Blocking = () => /*#__PURE__*/_react.default.createElement(_react.default.
37
37
  exports.Blocking = Blocking;
38
38
 
39
39
  const WithClickHandler = () => /*#__PURE__*/_react.default.createElement(_layer.Layer, {
40
- onClick: window.onLayerClick
40
+ onBackdropClick: window.onLayerClick
41
41
  }, /*#__PURE__*/_react.default.createElement("button", {
42
42
  onClick: window.onButtonClick
43
43
  }, "Test"));
@@ -45,22 +45,22 @@ const WithClickHandler = () => /*#__PURE__*/_react.default.createElement(_layer.
45
45
  exports.WithClickHandler = WithClickHandler;
46
46
 
47
47
  const EqualSiblings = () => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_layer.Layer, {
48
- onClick: createNamedLayerClick('first')
48
+ onBackdropClick: createNamedLayerClick('first')
49
49
  }), /*#__PURE__*/_react.default.createElement(_layer.Layer, {
50
- onClick: createNamedLayerClick('second')
50
+ onBackdropClick: createNamedLayerClick('second')
51
51
  }));
52
52
 
53
53
  exports.EqualSiblings = EqualSiblings;
54
54
 
55
55
  const InequalSiblings = () => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_layer.Layer, {
56
56
  level: _uiConstants.layers.alert,
57
- onClick: createNamedLayerClick('alert')
57
+ onBackdropClick: createNamedLayerClick('alert')
58
58
  }), /*#__PURE__*/_react.default.createElement(_layer.Layer, {
59
59
  level: _uiConstants.layers.blocking,
60
- onClick: createNamedLayerClick('blocking')
60
+ onBackdropClick: createNamedLayerClick('blocking')
61
61
  }), /*#__PURE__*/_react.default.createElement(_layer.Layer, {
62
62
  level: _uiConstants.layers.applicationTop,
63
- onClick: createNamedLayerClick('applicationTop')
63
+ onBackdropClick: createNamedLayerClick('applicationTop')
64
64
  }));
65
65
 
66
66
  exports.InequalSiblings = InequalSiblings;
@@ -68,12 +68,12 @@ exports.InequalSiblings = InequalSiblings;
68
68
  const NestedLowerLevels = () => /*#__PURE__*/_react.default.createElement(_layer.Layer, {
69
69
  level: _uiConstants.layers.alert,
70
70
  dataTest: "alert",
71
- onClick: createNamedLayerClick('alert')
71
+ onBackdropClick: createNamedLayerClick('alert')
72
72
  }, /*#__PURE__*/_react.default.createElement(_layer.Layer, {
73
73
  level: _uiConstants.layers.blocking,
74
74
  dataTest: "blocking",
75
75
  disablePortal: true,
76
- onClick: createNamedLayerClick('blocking')
76
+ onBackdropClick: createNamedLayerClick('blocking')
77
77
  }));
78
78
 
79
79
  exports.NestedLowerLevels = NestedLowerLevels;
@@ -81,11 +81,11 @@ exports.NestedLowerLevels = NestedLowerLevels;
81
81
  const NestedHigherLevels = () => /*#__PURE__*/_react.default.createElement(_layer.Layer, {
82
82
  level: _uiConstants.layers.blocking,
83
83
  dataTest: "blocking",
84
- onClick: createNamedLayerClick('blocking')
84
+ onBackdropClick: createNamedLayerClick('blocking')
85
85
  }, /*#__PURE__*/_react.default.createElement(_layer.Layer, {
86
86
  level: _uiConstants.layers.alert,
87
87
  dataTest: "alert",
88
- onClick: createNamedLayerClick('alert')
88
+ onBackdropClick: createNamedLayerClick('alert')
89
89
  }));
90
90
 
91
91
  exports.NestedHigherLevels = NestedHigherLevels;
@@ -96,10 +96,10 @@ const LevelsAreRespectedWhenNesting = () => /*#__PURE__*/_react.default.createEl
96
96
  level: 1000
97
97
  }, /*#__PURE__*/_react.default.createElement(_layer.Layer, {
98
98
  level: 1000,
99
- onClick: createNamedLayerClick('1000')
99
+ onBackdropClick: createNamedLayerClick('1000')
100
100
  }))), /*#__PURE__*/_react.default.createElement(_layer.Layer, {
101
101
  level: 1001,
102
- onClick: createNamedLayerClick('1001')
102
+ onBackdropClick: createNamedLayerClick('1001')
103
103
  }));
104
104
 
105
105
  exports.LevelsAreRespectedWhenNesting = LevelsAreRespectedWhenNesting;
@@ -108,10 +108,10 @@ const NestedHigherLevelEndsOnTop = () => /*#__PURE__*/_react.default.createEleme
108
108
  level: _uiConstants.layers.applicationTop
109
109
  }, /*#__PURE__*/_react.default.createElement(_layer.Layer, {
110
110
  level: _uiConstants.layers.alert,
111
- onClick: createNamedLayerClick('alert')
111
+ onBackdropClick: createNamedLayerClick('alert')
112
112
  })), /*#__PURE__*/_react.default.createElement(_layer.Layer, {
113
113
  level: _uiConstants.layers.blocking,
114
- onClick: createNamedLayerClick('blocking')
114
+ onBackdropClick: createNamedLayerClick('blocking')
115
115
  }));
116
116
 
117
117
  exports.NestedHigherLevelEndsOnTop = NestedHigherLevelEndsOnTop;
package/build/cjs/layer.stories.js CHANGED
@@ -3,7 +3,7 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.default = exports.WithClickHandler = exports.WithCenteredContentCircularLoader = exports.Translucent = exports.Default = void 0;
6
+ exports.default = exports.WithOnBackdropClick = exports.WithCenteredContentCircularLoader = exports.Translucent = exports.Default = void 0;
7
7
 
8
8
  var _center = require("@dhis2-ui/center");
9
9
 
@@ -50,10 +50,10 @@ exports.Translucent = Translucent;
50
50
  Translucent.args = {
51
51
  translucent: true
52
52
  };
53
- const WithClickHandler = Template.bind({});
54
- exports.WithClickHandler = WithClickHandler;
55
- WithClickHandler.args = {
56
- onClick: () => alert('layer was clicked')
53
+ const WithOnBackdropClick = Template.bind({});
54
+ exports.WithOnBackdropClick = WithOnBackdropClick;
55
+ WithOnBackdropClick.args = {
56
+ onBackdropClick: () => alert('layer backdrop was clicked')
57
57
  };
58
58
  const WithCenteredContentCircularLoader = Template.bind({});
59
59
  exports.WithCenteredContentCircularLoader = WithCenteredContentCircularLoader;
package/build/es/layer.js CHANGED
@@ -1,16 +1,10 @@
1
1
  import _JSXStyle from "styled-jsx/style";
2
2
  import { Portal } from '@dhis2-ui/portal';
3
+ import { deprecated } from '@dhis2/prop-types';
3
4
  import cx from 'classnames';
4
5
  import PropTypes from 'prop-types';
5
6
  import React from 'react';
6
7
 
7
- const createClickHandler = onClick => event => {
8
- // don't respond to clicks that originated in the children
9
- if (onClick && event.target === event.currentTarget) {
10
- onClick({}, event);
11
- }
12
- };
13
-
14
8
  const Layer = _ref => {
15
9
  let {
16
10
  children,
@@ -18,24 +12,28 @@ const Layer = _ref => {
18
12
  dataTest,
19
13
  disablePortal,
20
14
  level,
15
+ onBackdropClick,
21
16
  onClick,
22
17
  position,
23
18
  translucent
24
19
  } = _ref;
20
+ const resolvedOnClick = onBackdropClick || onClick;
25
21
  return /*#__PURE__*/React.createElement(Portal, {
26
22
  disable: disablePortal
27
23
  }, /*#__PURE__*/React.createElement("div", {
28
24
  "data-test": dataTest,
29
- onClick: createClickHandler(onClick),
30
- className: "jsx-2944291715 " + _JSXStyle.dynamic([["2635812695", [level]]]) + " " + (cx('layer', className, position, {
25
+ className: "jsx-1613565548 " + _JSXStyle.dynamic([["4184224765", [level]]]) + " " + (cx('layer', className, position, {
31
26
  translucent
32
27
  }) || "")
33
- }, children, /*#__PURE__*/React.createElement(_JSXStyle, {
34
- id: "2635812695",
28
+ }, resolvedOnClick && /*#__PURE__*/React.createElement("div", {
29
+ onClick: event => resolvedOnClick({}, event),
30
+ className: "jsx-1613565548 " + _JSXStyle.dynamic([["4184224765", [level]]]) + " " + "backdrop"
31
+ }), children, /*#__PURE__*/React.createElement(_JSXStyle, {
32
+ id: "4184224765",
35
33
  dynamic: [level]
36
34
  }, ["div.__jsx-style-dynamic-selector{z-index:".concat(level, ";}")]), /*#__PURE__*/React.createElement(_JSXStyle, {
37
- id: "2944291715"
38
- }, ["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);}"])));
35
+ id: "1613565548"
36
+ }, ["div.jsx-1613565548{top:0;left:0;min-height:100vh;min-width:100vw;}", "div.fixed.jsx-1613565548{position:fixed;height:100vh;width:100vw;}", "div.absolute.jsx-1613565548{position:absolute;height:100%;width:100%;}", "div.translucent.jsx-1613565548{background-color:rgba(33,43,54,0.4);}", "div.backdrop.jsx-1613565548{position:absolute;inset:0;z-index:-1;}"])));
39
37
  };
40
38
 
41
39
  Layer.defaultProps = {
@@ -58,7 +56,10 @@ Layer.propTypes = {
58
56
  /** Adds a semi-transparent background */
59
57
  translucent: PropTypes.bool,
60
58
 
61
- /** Click handler */
62
- onClick: PropTypes.func
59
+ /** Backdrop click handler */
60
+ onBackdropClick: PropTypes.func,
61
+
62
+ /** Click handler - DEPRECATED */
63
+ onClick: deprecated(PropTypes.func, 'Please use "onBackdropClick" instead')
63
64
  };
64
65
  export { Layer };
package/build/es/layer.stories.e2e.js CHANGED
@@ -17,43 +17,43 @@ export const Blocking = () => /*#__PURE__*/React.createElement(React.Fragment, n
17
17
  onClick: window.onButtonClick
18
18
  }, "Test"), /*#__PURE__*/React.createElement(Layer, null));
19
19
  export const WithClickHandler = () => /*#__PURE__*/React.createElement(Layer, {
20
- onClick: window.onLayerClick
20
+ onBackdropClick: window.onLayerClick
21
21
  }, /*#__PURE__*/React.createElement("button", {
22
22
  onClick: window.onButtonClick
23
23
  }, "Test"));
24
24
  export const EqualSiblings = () => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Layer, {
25
- onClick: createNamedLayerClick('first')
25
+ onBackdropClick: createNamedLayerClick('first')
26
26
  }), /*#__PURE__*/React.createElement(Layer, {
27
- onClick: createNamedLayerClick('second')
27
+ onBackdropClick: createNamedLayerClick('second')
28
28
  }));
29
29
  export const InequalSiblings = () => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Layer, {
30
30
  level: layers.alert,
31
- onClick: createNamedLayerClick('alert')
31
+ onBackdropClick: createNamedLayerClick('alert')
32
32
  }), /*#__PURE__*/React.createElement(Layer, {
33
33
  level: layers.blocking,
34
- onClick: createNamedLayerClick('blocking')
34
+ onBackdropClick: createNamedLayerClick('blocking')
35
35
  }), /*#__PURE__*/React.createElement(Layer, {
36
36
  level: layers.applicationTop,
37
- onClick: createNamedLayerClick('applicationTop')
37
+ onBackdropClick: createNamedLayerClick('applicationTop')
38
38
  }));
39
39
  export const NestedLowerLevels = () => /*#__PURE__*/React.createElement(Layer, {
40
40
  level: layers.alert,
41
41
  dataTest: "alert",
42
- onClick: createNamedLayerClick('alert')
42
+ onBackdropClick: createNamedLayerClick('alert')
43
43
  }, /*#__PURE__*/React.createElement(Layer, {
44
44
  level: layers.blocking,
45
45
  dataTest: "blocking",
46
46
  disablePortal: true,
47
- onClick: createNamedLayerClick('blocking')
47
+ onBackdropClick: createNamedLayerClick('blocking')
48
48
  }));
49
49
  export const NestedHigherLevels = () => /*#__PURE__*/React.createElement(Layer, {
50
50
  level: layers.blocking,
51
51
  dataTest: "blocking",
52
- onClick: createNamedLayerClick('blocking')
52
+ onBackdropClick: createNamedLayerClick('blocking')
53
53
  }, /*#__PURE__*/React.createElement(Layer, {
54
54
  level: layers.alert,
55
55
  dataTest: "alert",
56
- onClick: createNamedLayerClick('alert')
56
+ onBackdropClick: createNamedLayerClick('alert')
57
57
  }));
58
58
  export const LevelsAreRespectedWhenNesting = () => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Layer, {
59
59
  level: 1000
@@ -61,17 +61,17 @@ export const LevelsAreRespectedWhenNesting = () => /*#__PURE__*/React.createElem
61
61
  level: 1000
62
62
  }, /*#__PURE__*/React.createElement(Layer, {
63
63
  level: 1000,
64
- onClick: createNamedLayerClick('1000')
64
+ onBackdropClick: createNamedLayerClick('1000')
65
65
  }))), /*#__PURE__*/React.createElement(Layer, {
66
66
  level: 1001,
67
- onClick: createNamedLayerClick('1001')
67
+ onBackdropClick: createNamedLayerClick('1001')
68
68
  }));
69
69
  export const NestedHigherLevelEndsOnTop = () => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Layer, {
70
70
  level: layers.applicationTop
71
71
  }, /*#__PURE__*/React.createElement(Layer, {
72
72
  level: layers.alert,
73
- onClick: createNamedLayerClick('alert')
73
+ onBackdropClick: createNamedLayerClick('alert')
74
74
  })), /*#__PURE__*/React.createElement(Layer, {
75
75
  level: layers.blocking,
76
- onClick: createNamedLayerClick('blocking')
76
+ onBackdropClick: createNamedLayerClick('blocking')
77
77
  }));
package/build/es/layer.stories.js CHANGED
@@ -34,9 +34,9 @@ export const Translucent = Template.bind({});
34
34
  Translucent.args = {
35
35
  translucent: true
36
36
  };
37
- export const WithClickHandler = Template.bind({});
38
- WithClickHandler.args = {
39
- onClick: () => alert('layer was clicked')
37
+ export const WithOnBackdropClick = Template.bind({});
38
+ WithOnBackdropClick.args = {
39
+ onBackdropClick: () => alert('layer backdrop was clicked')
40
40
  };
41
41
  export const WithCenteredContentCircularLoader = Template.bind({});
42
42
  WithCenteredContentCircularLoader.args = {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dhis2-ui/layer",
3
- "version": "8.2.4",
3
+ "version": "8.3.0",
4
4
  "description": "UI Layer",
5
5
  "repository": {
6
6
  "type": "git",
@@ -31,9 +31,9 @@
31
31
  "styled-jsx": "^4"
32
32
  },
33
33
  "dependencies": {
34
- "@dhis2/prop-types": "^3.0.0-beta.1",
35
- "@dhis2-ui/portal": "8.2.4",
36
- "@dhis2/ui-constants": "8.2.4",
34
+ "@dhis2/prop-types": "^3.1.2",
35
+ "@dhis2-ui/portal": "8.3.0",
36
+ "@dhis2/ui-constants": "8.3.0",
37
37
  "classnames": "^2.3.1",
38
38
  "prop-types": "^15.7.2"
39
39
  },