@adamjanicki/ui 1.3.1 → 1.3.3

package/components/Layer/Layer.js

@@ -29,12 +29,12 @@ var BaseLayer = function (_a) {
                 document.removeEventListener("keydown", handleEscape);
         };
     }, [onClose, disableEscape]);
-    return (_jsx("div", { className: classNames("ajui-layer-backdrop", className), style: style, onClick: onClose, children: React.cloneElement(children, {
+    return (_jsx("div", { className: classNames("ajui-layer-backdrop", className), style: style, onMouseDown: onClose, children: React.cloneElement(children, {
             ref: focusRef,
-            onClick: function (e) {
+            onMouseDown: function (e) {
                 var _a, _b;
                 e.stopPropagation();
-                (_b = (_a = children.props).onClick) === null || _b === void 0 ? void 0 : _b.call(_a, e);
+                (_b = (_a = children.props).onMouseDown) === null || _b === void 0 ? void 0 : _b.call(_a, e);
             },
         }) }));
 };

package/hooks/useFocusTrap.d.ts

@@ -2,7 +2,8 @@
  * A hook for trapping focus within an element.
  *
  * @param isActive true if the element is active, false otherwise
+ * `true` by default
  * @returns ref object that must be passed to the element that should be trapped
  */
-declare const useFocusTrap: <T extends HTMLElement>(isActive: boolean) => import("react").MutableRefObject<T | null>;
+declare const useFocusTrap: <T extends HTMLElement>(isActive?: boolean) => import("react").MutableRefObject<T | null>;
 export default useFocusTrap;

package/hooks/useFocusTrap.js

@@ -4,36 +4,47 @@ var focusableElementsString = 'a[href], area[href], input:not([disabled]), selec
  * A hook for trapping focus within an element.
  *
  * @param isActive true if the element is active, false otherwise
+ * `true` by default
  * @returns ref object that must be passed to the element that should be trapped
  */
 var useFocusTrap = function (isActive) {
+    if (isActive === void 0) { isActive = true; }
     var trapRef = useRef(null);
     useEffect(function () {
         if (!isActive || !trapRef.current)
             return;
         var focusableElements = trapRef.current.querySelectorAll(focusableElementsString);
-        var firstFocusableElement = focusableElements[0] || trapRef.current;
-        var lastFocusableElement = focusableElements[focusableElements.length - 1] || trapRef.current;
         var trapFocus = function (event) {
+            var _a;
             if (event.key !== "Tab")
                 return;
-            if (event.shiftKey) {
-                // Shift + Tab
-                if (document.activeElement === firstFocusableElement) {
-                    lastFocusableElement === null || lastFocusableElement === void 0 ? void 0 : lastFocusableElement.focus();
-                }
+            if (focusableElements.length === 0)
+                return event.preventDefault();
+            var activeEl = document.activeElement;
+            var firstEl = focusableElements[0];
+            var lastEl = focusableElements[focusableElements.length - 1];
+            var focusFirst = function () {
+                firstEl.focus();
+                event.preventDefault();
+            };
+            var focusLast = function () {
+                lastEl.focus();
+                event.preventDefault();
+            };
+            if (activeEl === firstEl && event.shiftKey) {
+                focusLast();
             }
-            else {
-                // Tab
-                if (document.activeElement === lastFocusableElement) {
-                    firstFocusableElement === null || firstFocusableElement === void 0 ? void 0 : firstFocusableElement.focus();
-                }
+            else if (activeEl === lastEl && !event.shiftKey) {
+                focusFirst();
+            }
+            else if (!activeEl || !((_a = trapRef.current) === null || _a === void 0 ? void 0 : _a.contains(activeEl))) {
+                event.shiftKey ? focusLast() : focusFirst();
             }
-            event.preventDefault();
         };
-        firstFocusableElement === null || firstFocusableElement === void 0 ? void 0 : firstFocusableElement.focus();
         document.addEventListener("keydown", trapFocus);
-        return function () { return document.removeEventListener("keydown", trapFocus); };
+        return function () {
+            document.removeEventListener("keydown", trapFocus);
+        };
     }, [isActive]);
     return trapRef;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adamjanicki/ui",
-  "version": "1.3.1",
+  "version": "1.3.3",
   "description": "Basic UI components and hooks for React in TypeScript",
   "main": "./index.js",
   "types": "./index.d.ts",