@synerise/ds-utils 0.21.9 → 0.22.1

package/CHANGELOG.md

@@ -3,6 +3,33 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.22.1](https://github.com/synerise/synerise-design/compare/@synerise/ds-utils@0.22.0...@synerise/ds-utils@0.22.1) (2022-07-06)
+
+**Note:** Version bump only for package @synerise/ds-utils
+
+
+
+
+
+# [0.22.0](https://github.com/synerise/synerise-design/compare/@synerise/ds-utils@0.21.10...@synerise/ds-utils@0.22.0) (2022-06-15)
+
+
+### Features
+
+* **utils:** outside click other ignored elements (useful for nesting) ([0ac399d](https://github.com/synerise/synerise-design/commit/0ac399dcd64cbff0158b5b1902ff34efa8aefb3d))
+
+
+
+
+
+## [0.21.10](https://github.com/synerise/synerise-design/compare/@synerise/ds-utils@0.21.9...@synerise/ds-utils@0.21.10) (2022-04-29)
+
+**Note:** Version bump only for package @synerise/ds-utils
+
+
+
+
+
 ## [0.21.9](https://github.com/synerise/synerise-design/compare/@synerise/ds-utils@0.21.8...@synerise/ds-utils@0.21.9) (2022-04-05)
 
 **Note:** Version bump only for package @synerise/ds-utils

package/dist/focusWithArrowKeys/focusWithArrowKeys.js

@@ -22,7 +22,12 @@ var focusWithArrowKeys = function focusWithArrowKeys(keyDownEvent, focusableItem
       elementToFocusOn = document.querySelector("." + focusableItemClass);
     }
 
-    !elementToFocusOn ? fallback() : elementToFocusOn.focus();
+    if (elementToFocusOn) {
+      elementToFocusOn.focus();
+    } else {
+      fallback();
+    }
+
     return;
   }
 
@@ -36,7 +41,12 @@ var focusWithArrowKeys = function focusWithArrowKeys(keyDownEvent, focusableItem
       _elementToFocusOn = prevSibling !== null && !hasFocusableElementInside(prevSibling, selector) ? prevSibling : focusableElements[activeElementIndex - 1];
     }
 
-    !_elementToFocusOn ? fallback() : _elementToFocusOn.focus();
+    if (_elementToFocusOn) {
+      _elementToFocusOn.focus();
+    } else {
+      fallback();
+    }
+
     return;
   }
 

package/dist/useOnClickOutside/useOnClickOutside.d.ts

@@ -9,5 +9,13 @@ declare type PossibleEvent = {
     [Type in HandledEventsType]: HTMLElementEventMap[Type];
 }[HandledEventsType];
 declare type Handler = (event: PossibleEvent) => void;
-export declare const useOnClickOutside: (ref: RefObject<HTMLElement>, handler: Handler | null, customEventsTypes?: ("mousedown" | "touchstart" | "click" | "contextmenu")[] | undefined) => void;
+/**
+ * Hook for listening for outside clicks.
+ *
+ * @param ref main component to out of which outside clicks will be detected
+ * @param handler function called on outside click
+ * @param customEventsTypes list of events to handle that are happening outside (optional, pass something else than `undefined` to overwrite default `['mousedown', 'touchstart']`)
+ * @param ignoreSelectors list of selectors/classes which, in case it is found that any of parent elements of triggering element has this class, event `handler` won't be called
+ */
+export declare const useOnClickOutside: (ref: RefObject<HTMLElement>, handler: Handler | null, customEventsTypes?: ("mousedown" | "touchstart" | "click" | "contextmenu")[] | undefined, ignoreSelectors?: string[] | undefined) => void;
 export {};

package/dist/useOnClickOutside/useOnClickOutside.js

@@ -4,7 +4,16 @@ var TOUCHSTART = 'touchstart';
 var CLICK = 'click';
 var CONTEXTMENU = 'contextmenu';
 var defaultEvents = [MOUSEDOWN, TOUCHSTART];
-export var useOnClickOutside = function useOnClickOutside(ref, handler, customEventsTypes) {
+/**
+ * Hook for listening for outside clicks.
+ *
+ * @param ref main component to out of which outside clicks will be detected
+ * @param handler function called on outside click
+ * @param customEventsTypes list of events to handle that are happening outside (optional, pass something else than `undefined` to overwrite default `['mousedown', 'touchstart']`)
+ * @param ignoreSelectors list of selectors/classes which, in case it is found that any of parent elements of triggering element has this class, event `handler` won't be called
+ */
+
+export var useOnClickOutside = function useOnClickOutside(ref, handler, customEventsTypes, ignoreSelectors) {
   var handlerRef = useRef(handler);
   var events = customEventsTypes || defaultEvents;
   useEffect(function () {
@@ -18,7 +27,20 @@ export var useOnClickOutside = function useOnClickOutside(ref, handler, customEv
     }
 
     var listener = function listener(event) {
-      if (!ref.current || !handlerRef.current || ref.current.contains(event.target)) {
+      if (!ref.current || !handlerRef.current) {
+        return;
+      }
+
+      if (ref.current.contains(event.target)) {
+        return;
+      }
+
+      if (ignoreSelectors != null && ignoreSelectors.some(function (className) {
+        var _event$target;
+
+        return (_event$target = event.target) == null ? void 0 : _event$target.closest(className);
+      })) {
+        // if any of parent elements contain one of ignored classes - stop proceeding this event
         return;
       }
 
@@ -33,5 +55,5 @@ export var useOnClickOutside = function useOnClickOutside(ref, handler, customEv
         document.removeEventListener(event, listener);
       });
     };
-  }, [handler, ref, events]);
+  }, [handler, ref, events, ignoreSelectors]);
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-utils",
-  "version": "0.21.9",
+  "version": "0.22.1",
   "description": "Utils UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "synerise/synerise-design",
@@ -37,7 +37,7 @@
     "react": ">=16.9.0 < 17.0.0"
   },
   "devDependencies": {
-    "@synerise/ds-core": "^0.33.0"
+    "@synerise/ds-core": "^0.34.1"
   },
-  "gitHead": "5793ce09feb88b36cc8ca1923ddfcb272b889cb0"
+  "gitHead": "6e09a689031ae03275336274cc4302de669f380d"
 }