@decisiv/ui-components 2.0.1-alpha.196 → 2.0.1-alpha.197

package/lib/components/Drawer/index.d.ts

@@ -14,7 +14,7 @@ export interface DrawerProps extends HeaderProps, FooterProps {
     side?: 'left' | 'right';
     zIndex?: number;
     visible?: boolean;
-    onClose?: (event: React.MouseEvent<unknown> | KeyboardEvent) => void;
+    onClose?: (event: MouseEvent | KeyboardEvent) => void;
 }
 export declare type OverlayProps = Pick<DrawerProps, 'zIndex' | 'side' | 'visible'>;
 declare const Drawer: React.FC<DrawerProps>;

package/lib/components/Drawer/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Drawer/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiC,MAAM,OAAO,CAAC;AAItD,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,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,OAAO,CAAC,GAAG,aAAa,KAAK,IAAI,CAAC;CACtE;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,CAiGjC,CAAC;AAEF,eAAe,MAAM,CAAC"}
+{"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"}

package/lib/components/Drawer/index.js

@@ -25,6 +25,8 @@ var _styles = require("./styles");
 
 var _useTranslations = _interopRequireDefault(require("../../utils/useTranslations"));
 
+var _useClickOutside = _interopRequireDefault(require("../../utils/useClickOutside"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 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; } }
@@ -47,11 +49,18 @@ var Drawer = function Drawer(_ref) {
       createPortal = _useConfig.createPortal;
 
   var translate = (0, _useTranslations.default)();
+  var contentRef = (0, _react.useRef)(null);
   var onKeyDown = (0, _react.useCallback)(function (event) {
     if (event.key === 'Escape') {
       onClose && onClose(event);
     }
-  }, [onClose]); // Allow closing the modal by pressing the Escape key
+  }, [onClose]);
+  var handleOnClickOutside = (0, _react.useCallback)(function (event) {
+    if (onClose && visible) {
+      onClose(event);
+    }
+  }, [onClose, visible]);
+  (0, _useClickOutside.default)([contentRef], handleOnClickOutside); // Allow closing the modal by pressing the Escape key
 
   (0, _react.useEffect)(function () {
     if (visible && _canUseDOM.default) {
@@ -74,8 +83,9 @@ var Drawer = function Drawer(_ref) {
     visible: visible,
     "data-testid": "overlay"
   }, _react.default.createElement(_styles.Content, {
-    visible: visible,
+    ref: contentRef,
     side: side,
+    visible: visible,
     "data-testid": "content"
   }, showHeader && _react.default.createElement(_styles.Header, {
     "data-testid": "drawer-header"

package/lib/components/Drawer/index.test.js

@@ -119,4 +119,21 @@ describe('Drawer', function () {
       });
     });
   });
+  describe('click outside', function () {
+    it('calls the "onClose" function when clicking outside the Drawer', function () {
+      var onClose = jest.fn();
+
+      var _render7 = render(_react.default.createElement(_.default, {
+        visible: true,
+        onClose: onClose
+      })),
+          getByTestId = _render7.getByTestId;
+
+      var overlay = getByTestId(/overlay/i);
+
+      _react2.fireEvent.click(overlay);
+
+      expect(onClose).toHaveBeenCalled();
+    });
+  });
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@decisiv/ui-components",
-  "version": "2.0.1-alpha.196+9518bb9",
+  "version": "2.0.1-alpha.197+38aedc2",
   "description": "Decisiv's design system React components",
   "author": "Decisiv UI Development Team",
   "license": "MIT",
@@ -71,5 +71,5 @@
     "access": "public"
   },
   "private": false,
-  "gitHead": "9518bb958af5cb4a795b7feddcaf1695d75ac8ba"
+  "gitHead": "38aedc23c6e54372524d3b975486e84d8575fcce"
 }