@decisiv/ui-components 2.0.1-alpha.219 → 2.0.1-alpha.220

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 (5) hide show
  1. package/lib/components/Drawer/index.d.ts +1 -1
  2. package/lib/components/Drawer/index.d.ts.map +1 -1
  3. package/lib/components/Drawer/index.js +13 -6
  4. package/lib/components/Drawer/index.test.js +37 -12
  5. package/package.json +1 -1
package/lib/components/Drawer/index.d.ts CHANGED
@@ -14,7 +14,7 @@ export interface DrawerProps extends HeaderProps, FooterProps {
14
14
  side?: 'left' | 'right';
15
15
  zIndex?: number;
16
16
  visible?: boolean;
17
- onClose?: (event: MouseEvent | KeyboardEvent) => void;
17
+ onClose?: (event: React.MouseEvent<HTMLDivElement, MouseEvent> | KeyboardEvent) => void;
18
18
  }
19
19
  export declare type OverlayProps = Pick<DrawerProps, 'zIndex' | 'side' | 'visible'>;
20
20
  declare const Drawer: React.FC<DrawerProps>;
package/lib/components/Drawer/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Drawer/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyC,MAAM,OAAO,CAAC;AAI9D,OAAe,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAmBhD,UAAU,WAAW;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,UAAU,MAAO,SAAQ,WAAW;IAClC,EAAE,EAAE,MAAM,CAAC;CACZ;AAED,UAAU,WAAW;IACnB,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;CACpB;AAED,MAAM,WAAW,WAAY,SAAQ,WAAW,EAAE,WAAW;IAC3D,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,GAAG,aAAa,KAAK,IAAI,CAAC;CACvD;AAED,oBAAY,YAAY,GAAG,IAAI,CAAC,WAAW,EAAE,QAAQ,GAAG,MAAM,GAAG,SAAS,CAAC,CAAC;AAE5E,QAAA,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAmHjC,CAAC;AAEF,eAAe,MAAM,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Drawer/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyC,MAAM,OAAO,CAAC;AAI9D,OAAe,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAkBhD,UAAU,WAAW;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,UAAU,MAAO,SAAQ,WAAW;IAClC,EAAE,EAAE,MAAM,CAAC;CACZ;AAED,UAAU,WAAW;IACnB,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;CACpB;AAED,MAAM,WAAW,WAAY,SAAQ,WAAW,EAAE,WAAW;IAC3D,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,CACR,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,EAAE,UAAU,CAAC,GAAG,aAAa,KAChE,IAAI,CAAC;CACX;AAED,oBAAY,YAAY,GAAG,IAAI,CAAC,WAAW,EAAE,QAAQ,GAAG,MAAM,GAAG,SAAS,CAAC,CAAC;AAM5E,QAAA,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAuHjC,CAAC;AAEF,eAAe,MAAM,CAAC"}
package/lib/components/Drawer/index.js CHANGED
@@ -25,12 +25,14 @@ var _styles = require("./styles");
25
25
 
26
26
  var _useTranslations = _interopRequireDefault(require("../../utils/useTranslations"));
27
27
 
28
- var _useClickOutside = _interopRequireDefault(require("../../utils/useClickOutside"));
29
-
30
28
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
31
29
 
32
30
  function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
33
31
 
32
+ var stopPropagation = function stopPropagation(e) {
33
+ e.stopPropagation();
34
+ };
35
+
34
36
  var Drawer = function Drawer(_ref) {
35
37
  var title = _ref.title,
36
38
  description = _ref.description,
@@ -59,8 +61,7 @@ var Drawer = function Drawer(_ref) {
59
61
  if (onClose && visible) {
60
62
  onClose(event);
61
63
  }
62
- }, [onClose, visible]);
63
- (0, _useClickOutside.default)([contentRef], handleOnClickOutside); // Allow closing the modal by pressing the Escape key
64
+ }, [onClose, visible]); // Allow closing the modal by pressing the Escape key
64
65
 
65
66
  (0, _react.useEffect)(function () {
66
67
  if (visible && _canUseDOM.default) {
@@ -81,12 +82,18 @@ var Drawer = function Drawer(_ref) {
81
82
  zIndex: zIndex,
82
83
  side: side,
83
84
  visible: visible,
84
- "data-testid": "overlay"
85
+ "data-testid": "overlay",
86
+ onClick: handleOnClickOutside,
87
+ role: "presentation",
88
+ tabIndex: -1
85
89
  }, _react.default.createElement(_styles.Content, {
86
90
  ref: contentRef,
87
91
  side: side,
88
92
  visible: visible,
89
- "data-testid": "content"
93
+ "data-testid": "content",
94
+ onClick: stopPropagation,
95
+ "aria-modal": "true",
96
+ role: "dialog"
90
97
  }, showHeader && _react.default.createElement(_styles.Header, {
91
98
  "data-testid": "drawer-header"
92
99
  }, _react.default.createElement(_Flex.default, null, title && _react.default.createElement(_styles.Title, null, title), onClose && _react.default.createElement(_Tooltip.default, {
package/lib/components/Drawer/index.test.js CHANGED
@@ -10,6 +10,8 @@ var _ConfigProvider = require("../../providers/ConfigProvider");
10
10
 
11
11
  var _ = _interopRequireDefault(require("."));
12
12
 
13
+ var _Combobox = _interopRequireDefault(require("../Combobox"));
14
+
13
15
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
14
16
 
15
17
  function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { keys.push.apply(keys, Object.getOwnPropertySymbols(object)); } if (enumerableOnly) keys = keys.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); return keys; }
@@ -39,16 +41,39 @@ describe('Drawer', function () {
39
41
  expect(getByTestId(/overlay/i)).toHaveStyleRule('display', 'none');
40
42
  });
41
43
  });
44
+ it('does not close when clicking on another Portal based component', function () {
45
+ var onClose = jest.fn();
46
+
47
+ var _render2 = render(_react.default.createElement(_.default, {
48
+ visible: true,
49
+ onClose: onClose
50
+ }, _react.default.createElement(_Combobox.default, {
51
+ label: "My Combobox",
52
+ options: [{
53
+ id: '1',
54
+ label: 'My Option',
55
+ value: '1'
56
+ }]
57
+ }))),
58
+ getByLabelText = _render2.getByLabelText,
59
+ getByText = _render2.getByText;
60
+
61
+ _react2.fireEvent.click(getByLabelText('My Combobox'));
62
+
63
+ _react2.fireEvent.click(getByText('My Option'));
64
+
65
+ expect(onClose).not.toHaveBeenCalled();
66
+ });
42
67
  });
43
68
  describe('title', function () {
44
69
  it('renders the text passed as "title" in an h3 tag', function () {
45
70
  var title = 'This is the title';
46
71
 
47
- var _render2 = render(_react.default.createElement(_.default, {
72
+ var _render3 = render(_react.default.createElement(_.default, {
48
73
  visible: true,
49
74
  title: title
50
75
  })),
51
- getByText = _render2.getByText;
76
+ getByText = _render3.getByText;
52
77
 
53
78
  expect(getByText(title, {
54
79
  selector: 'h3'
@@ -58,30 +83,30 @@ describe('Drawer', function () {
58
83
  describe('onClose', function () {
59
84
  var onClose = jest.fn();
60
85
  it('renders a close button if "onClose" is passed', function () {
61
- var _render3 = render(_react.default.createElement(_.default, {
86
+ var _render4 = render(_react.default.createElement(_.default, {
62
87
  visible: true,
63
88
  onClose: onClose
64
89
  })),
65
- getByLabelText = _render3.getByLabelText;
90
+ getByLabelText = _render4.getByLabelText;
66
91
 
67
92
  var closeBtn = getByLabelText(/close drawer/i);
68
93
  expect(closeBtn).toBeInTheDocument();
69
94
  });
70
95
  it('does not render a close button if "onClose" is not passed', function () {
71
- var _render4 = render(_react.default.createElement(_.default, {
96
+ var _render5 = render(_react.default.createElement(_.default, {
72
97
  visible: true
73
98
  })),
74
- queryByLabelText = _render4.queryByLabelText;
99
+ queryByLabelText = _render5.queryByLabelText;
75
100
 
76
101
  var closeBtn = queryByLabelText(/close drawer/i);
77
102
  expect(closeBtn).not.toBeInTheDocument();
78
103
  });
79
104
  it('calls the "onClose" function when clicking the close button', function () {
80
- var _render5 = render(_react.default.createElement(_.default, {
105
+ var _render6 = render(_react.default.createElement(_.default, {
81
106
  visible: true,
82
107
  onClose: onClose
83
108
  })),
84
- getByLabelText = _render5.getByLabelText;
109
+ getByLabelText = _render6.getByLabelText;
85
110
 
86
111
  var closeBtn = getByLabelText(/close drawer/i);
87
112
 
@@ -104,11 +129,11 @@ describe('Drawer', function () {
104
129
  onClick: onCancel
105
130
  }];
106
131
  it('renders the array as buttons in the footer of the Drawer', function () {
107
- var _render6 = render(_react.default.createElement(_.default, {
132
+ var _render7 = render(_react.default.createElement(_.default, {
108
133
  visible: true,
109
134
  actions: actions
110
135
  })),
111
- getByText = _render6.getByText;
136
+ getByText = _render7.getByText;
112
137
 
113
138
  expect(getByText(/submit/i, {
114
139
  selector: 'button'
@@ -123,11 +148,11 @@ describe('Drawer', function () {
123
148
  it('calls the "onClose" function when clicking outside the Drawer', function () {
124
149
  var onClose = jest.fn();
125
150
 
126
- var _render7 = render(_react.default.createElement(_.default, {
151
+ var _render8 = render(_react.default.createElement(_.default, {
127
152
  visible: true,
128
153
  onClose: onClose
129
154
  })),
130
- getByTestId = _render7.getByTestId;
155
+ getByTestId = _render8.getByTestId;
131
156
 
132
157
  var overlay = getByTestId(/overlay/i);
133
158
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@decisiv/ui-components",
3
- "version": "2.0.1-alpha.219",
3
+ "version": "2.0.1-alpha.220",
4
4
  "description": "Decisiv's design system React components",
5
5
  "author": "Decisiv UI Development Team",
6
6
  "license": "MIT",