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

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Combobox/index.tsx"],"names":[],"mappings":"AASA,OAAc,EAGZ,sBAAsB,EAQvB,MAAM,OAAO,CAAC;AA2Bf,OAAO,EAAE,aAAa,EAAE,gBAAgB,EAAQ,MAAM,SAAS,CAAC;AAuiBhE,QAAA,MAAM,eAAe,EAAE,sBAAsB,CAC3C,gBAAgB,EAChB,aAAa,CACS,CAAC;AAOzB,eAAe,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Combobox/index.tsx"],"names":[],"mappings":"AASA,OAAc,EAGZ,sBAAsB,EAQvB,MAAM,OAAO,CAAC;AA2Bf,OAAO,EAAE,aAAa,EAAE,gBAAgB,EAAQ,MAAM,SAAS,CAAC;AAmjBhE,QAAA,MAAM,eAAe,EAAE,sBAAsB,CAC3C,gBAAgB,EAChB,aAAa,CACS,CAAC;AAOzB,eAAe,eAAe,CAAC"}

package/lib/components/Combobox/index.js

@@ -337,45 +337,41 @@ function Combobox(props, ref) {
        * Usually that's fine. In this case, we don't want that behavior.
        */
       updateIsPopoverVisible(false);
-    } else if (isFocused) {
-      if (variant === 'sync' && finalComboboxRef && // @ts-ignore
-      finalComboboxRef.current === event.target) {
+    } else if (variant === 'sync' && finalComboboxRef && // @ts-ignore
+    finalComboboxRef.current === event.target) {
+      /**
+       * This prevents a double toggle when the user clicks
+       * the actual input field inside the combobox.
+       */
+      event.preventDefault();
+      event.stopPropagation();
+
+      if (!isPopoverVisible) {
         /**
-         * This prevents a double toggle when the user clicks
-         * the actual input field inside the combobox.
+         * This re-opens the popover if you first open it,
+         * then make a selection, then click the <input> again.
          */
-        event.preventDefault();
-        event.stopPropagation();
-
-        if (!isPopoverVisible) {
-          /**
-           * This re-opens the popover if you first open it,
-           * then make a selection, then click the <input> again.
-           */
-          updateIsPopoverVisible(true);
-        }
-      } else {
-        updateIsPopoverVisible('toggle');
+        updateIsPopoverVisible(true);
       }
+    } else {
+      updateIsPopoverVisible('toggle');
     }
 
     onClick && onClick(event);
-  }, // eslint-disable-next-line react-hooks/exhaustive-deps
-  [isFocused, isPopoverVisible, variant, onClick, updateIsPopoverVisible]);
+  }, [finalInputContainerRef, onClick, updateIsPopoverVisible, variant, finalComboboxRef, isPopoverVisible]);
   /**
    * This focus handler is responsible for opening the dropdown list and tracking focus state.
    * It's important to do this in the focus handler because the dropdown should open when the
    * Combobox is clicked or tabbed to.
+   *
+   * [KDS-3742] Patch: Updated this handler to align the behavior with the Select component.
+   * The popover will no longer automatically show when the Combobox gains focus.
    */
 
   var handleContainerFocus = (0, _react.useCallback)(function (event) {
-    if (variant === 'sync') {
-      updateIsPopoverVisible(true);
-    }
-
     setIsFocused(true);
     onFocus && onFocus(event);
-  }, [onFocus, updateIsPopoverVisible, variant]);
+  }, [onFocus]);
   /**
    * Pressing certain keys when focused on the Combobox component should trigger some actions.
    */
@@ -410,7 +406,13 @@ function Combobox(props, ref) {
       }
     }
 
+    if (event.key === 'Enter' && !isPopoverVisible) {
+      event.preventDefault();
+      updateIsPopoverVisible(true);
+    }
+
     if (event.key === 'Enter' && isPopoverVisible) {
+      event.preventDefault();
       updateSelected(activeId || '');
       updateIsPopoverVisible(false);
     }

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

@@ -110,7 +110,7 @@ describe('Combobox', function () {
       expect(getByLabelText('test')).toBeVisible();
     });
   });
-  describe('when the input field has focus', function () {
+  describe('when the input field is clicked', function () {
     it('displays the list of options', function () {
       var _render4 = render(_react.default.createElement(_.default, {
         label: "test",
@@ -958,7 +958,7 @@ describe('Combobox', function () {
   });
   describe('when a controlled component', function () {
     it('initializes with and prefers prop values', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
-      var newInputValue, onChangeInputValue, onChangeValue, _render32, baseElement, queryByLabelText, rerender, container, getByRole, getAllByRole;
+      var newInputValue, onChangeInputValue, onChangeValue, _render32, baseElement, queryByLabelText, rerender;
 
       return regeneratorRuntime.wrap(function _callee$(_context) {
         while (1) {
@@ -977,7 +977,7 @@ describe('Combobox', function () {
                 onChangeValue: onChangeValue,
                 autoComplete: "auto-complete-test",
                 type: "search"
-              })), baseElement = _render32.baseElement, queryByLabelText = _render32.queryByLabelText, rerender = _render32.rerender, container = _render32.container, getByRole = _render32.getByRole, getAllByRole = _render32.getAllByRole;
+              })), baseElement = _render32.baseElement, queryByLabelText = _render32.queryByLabelText, rerender = _render32.rerender;
 
               _react2.fireEvent.click(queryByLabelText('test'));
 

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.198+f78212f",
   "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": "f78212fe48488d8667830efc7e5dedeb8fe6a5ce"
 }