@elvia/elvis-toolbox - npm Package Compare versions

Comparing version 4.2.0 to 5.0.0

CHANGELOG.json

@@ -6,2 +6,17 @@ {
       "date": "18.10.22",
+      "version": "5.0.0",
+      "changelog": [
+        {
+          "type": "breaking_changes",
+          "changes": [
+            "The <span class=\"code-text\">useFocusTrap</span> is now a proper hook that returns a toggle for enabling/disabling focus trap."
+          ],
+          "fixes": [
+            "Instead of calling the <span class=\"code-text\">useFocusTrap</span> each time you enable/disable the focus trap, you use the returned method."
+          ]
+        }
+      ]
+    },
+    {
+      "date": "18.10.22",
       "version": "4.2.0",
@@ -8,0 +23,0 @@ "changelog": [

dist/hooks/useFocusTrap.d.ts

 import { RefObject } from 'react';
-export declare const useFocusTrap: (focusTrapContainer: RefObject<HTMLElement>, removeEventListener?: boolean) => void;
+export declare const useFocusTrap: () => {
+    trapFocus: (focusTrapContainer: RefObject<HTMLElement>) => void;
+    releaseFocusTrap: () => void;
+};

dist/hooks/useFocusTrap.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useFocusTrap = void 0;
-const useFocusTrap = (focusTrapContainer, removeEventListener) => {
-    setTimeout(() => {
-        if (!focusTrapContainer.current) {
-            return;
+const useFocusTrap = () => {
+    let firstItem;
+    let lastItem;
+    const handleFirstItemTab = (e) => {
+        if (e.key === 'Tab' && e.shiftKey) {
+            if (lastItem) {
+                lastItem.focus();
+            }
+            e.preventDefault();
         }
-        const focusableItems = Array.from(focusTrapContainer.current.querySelectorAll('a[href], button, textarea, input, select, details, [tabindex]:not([tabindex="-1"]')).filter((element) => {
-            var _a;
-            return (!element.hasAttribute('disabled') &&
-                element.getAttribute('aria-hidden') !== 'true' &&
-                parseInt((_a = element.getAttribute('tabindex')) !== null && _a !== void 0 ? _a : '0') >= 0);
-        });
-        const firstItem = focusableItems[0];
-        const lastItem = focusableItems[focusableItems.length - 1];
-        const handleFirstItemTab = (e) => {
-            if (e.key === 'Tab' && e.shiftKey) {
-                if (lastItem) {
-                    lastItem.focus();
-                }
-                e.preventDefault();
+    };
+    const handleLastItemTab = (e) => {
+        if (e.key === 'Tab' && !e.shiftKey) {
+            if (firstItem) {
+                firstItem.focus();
             }
-        };
-        const handleLastItemTab = (e) => {
-            if (e.key === 'Tab' && !e.shiftKey) {
-                if (firstItem) {
-                    firstItem.focus();
-                }
-                e.preventDefault();
+            e.preventDefault();
+        }
+    };
+    const trapFocus = (focusTrapContainer) => {
+        setTimeout(() => {
+            if (!focusTrapContainer.current) {
+                return;
             }
-        };
-        if (firstItem) {
-            firstItem.focus();
-            firstItem.addEventListener('keydown', handleFirstItemTab);
-        }
-        if (lastItem) {
-            lastItem.addEventListener('keydown', handleLastItemTab);
-        }
-        if (removeEventListener) {
+            const focusableItems = Array.from(focusTrapContainer.current.querySelectorAll('a[href], button, textarea, input, select, details, [tabindex]:not([tabindex="-1"]')).filter((element) => {
+                var _a;
+                return (!element.hasAttribute('disabled') &&
+                    element.getAttribute('aria-hidden') !== 'true' &&
+                    parseInt((_a = element.getAttribute('tabindex')) !== null && _a !== void 0 ? _a : '0') >= 0);
+            });
+            firstItem = focusableItems[0];
+            lastItem = focusableItems[focusableItems.length - 1];
             if (firstItem) {
-                firstItem.removeEventListener('keydown', handleFirstItemTab);
+                firstItem.focus();
+                firstItem.addEventListener('keydown', handleFirstItemTab);
             }
             if (lastItem) {
-                lastItem.removeEventListener('keydown', handleLastItemTab);
+                lastItem.addEventListener('keydown', handleLastItemTab);
             }
+        });
+    };
+    const releaseFocusTrap = () => {
+        if (firstItem) {
+            firstItem.removeEventListener('keydown', handleFirstItemTab);
         }
-    });
+        if (lastItem) {
+            lastItem.removeEventListener('keydown', handleLastItemTab);
+        }
+    };
+    return { trapFocus, releaseFocusTrap };
 };
 exports.useFocusTrap = useFocusTrap;

package.json

 {
   "name": "@elvia/elvis-toolbox",
-  "version": "4.2.0",
+  "version": "5.0.0",
   "description": "",
@@ -5,0 +5,0 @@ "license": "MIT",

README.md

 # Toolbox

src/elvis-toolbox.ts

@@ -0,0 +0,0 @@ import { isSsr } from './isSsr';

src/hooks/useBreakpoint.ts

@@ -0,0 +0,0 @@ import { useEffect, useState } from 'react';

src/hooks/useConnectedOverlay.ts

@@ -0,0 +0,0 @@ import { Dispatch, RefObject, SetStateAction, useEffect, useState } from 'react';

src/hooks/useFocusTrap.ts

 import { RefObject } from 'react';
 
-export const useFocusTrap = (
-  focusTrapContainer: RefObject<HTMLElement>,
-  removeEventListener?: boolean,
-): void => {
-  setTimeout(() => {
-    if (!focusTrapContainer.current) {
-      return;
+export const useFocusTrap = (): {
+  trapFocus: (focusTrapContainer: RefObject<HTMLElement>) => void;
+  releaseFocusTrap: () => void;
+} => {
+  let firstItem: Element;
+  let lastItem: Element;
+
+  const handleFirstItemTab = (e: KeyboardEvent) => {
+    if (e.key === 'Tab' && e.shiftKey) {
+      if (lastItem) {
+        (lastItem as HTMLElement).focus();
+      }
+      e.preventDefault();
     }
-    const focusableItems = Array.from(
-      focusTrapContainer.current.querySelectorAll(
-        'a[href], button, textarea, input, select, details, [tabindex]:not([tabindex="-1"]',
-      ),
-    ).filter((element) => {
-      return (
-        !element.hasAttribute('disabled') &&
-        element.getAttribute('aria-hidden') !== 'true' &&
-        parseInt(element.getAttribute('tabindex') ?? '0') >= 0
-      );
-    });
+  };
 
-    const firstItem = focusableItems[0];
-    const lastItem = focusableItems[focusableItems.length - 1];
+  const handleLastItemTab = (e: KeyboardEvent) => {
+    if (e.key === 'Tab' && !e.shiftKey) {
+      if (firstItem) {
+        (firstItem as HTMLElement).focus();
+      }
+      e.preventDefault();
+    }
+  };
 
-    const handleFirstItemTab = (e: KeyboardEvent) => {
-      if (e.key === 'Tab' && e.shiftKey) {
-        if (lastItem) {
-          (lastItem as HTMLElement).focus();
-        }
-        e.preventDefault();
+  const trapFocus = (focusTrapContainer: RefObject<HTMLElement>) => {
+    setTimeout(() => {
+      if (!focusTrapContainer.current) {
+        return;
       }
-    };
-    const handleLastItemTab = (e: KeyboardEvent) => {
-      if (e.key === 'Tab' && !e.shiftKey) {
-        if (firstItem) {
-          (firstItem as HTMLElement).focus();
-        }
-        e.preventDefault();
+      const focusableItems = Array.from(
+        focusTrapContainer.current.querySelectorAll(
+          'a[href], button, textarea, input, select, details, [tabindex]:not([tabindex="-1"]',
+        ),
+      ).filter((element) => {
+        return (
+          !element.hasAttribute('disabled') &&
+          element.getAttribute('aria-hidden') !== 'true' &&
+          parseInt(element.getAttribute('tabindex') ?? '0') >= 0
+        );
+      });
+
+      firstItem = focusableItems[0];
+      lastItem = focusableItems[focusableItems.length - 1];
+
+      if (firstItem) {
+        (firstItem as HTMLElement).focus();
+        firstItem.addEventListener('keydown', handleFirstItemTab);
       }
-    };
+      if (lastItem) {
+        lastItem.addEventListener('keydown', handleLastItemTab);
+      }
+    });
+  };
+
+  const releaseFocusTrap = () => {
     if (firstItem) {
-      (firstItem as HTMLElement).focus();
-      firstItem.addEventListener('keydown', handleFirstItemTab);
+      firstItem.removeEventListener('keydown', handleFirstItemTab);
     }
     if (lastItem) {
-      lastItem.addEventListener('keydown', handleLastItemTab);
+      lastItem.removeEventListener('keydown', handleLastItemTab);
     }
+  };
 
-    if (removeEventListener) {
-      if (firstItem) {
-        firstItem.removeEventListener('keydown', handleFirstItemTab);
-      }
-      if (lastItem) {
-        lastItem.removeEventListener('keydown', handleLastItemTab);
-      }
-    }
-  });
+  return { trapFocus, releaseFocusTrap };
 };

src/hooks/useIsOverflowing.ts

@@ -0,0 +0,0 @@ import React, { useLayoutEffect, useRef, useState } from 'react';

src/hooks/useLongPress.ts

@@ -0,0 +0,0 @@ import { RefObject, useEffect, useState } from 'react';

src/index.ts

@@ -0,0 +0,0 @@ export * from './elvis-toolbox';

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

51989

increased by0.09%

Lines of code

1345

increased by2.13%

No dependency changes