solid-dismiss - npm Package Compare versions

Comparing version 1.0.9 to 1.0.10

dist/esm/index.js

@@ -872,3 +872,2 @@ import { insert, template, delegateEvents, addEventListener, effect, setAttribute, classList, createComponent, mergeProps } from 'solid-js/web';
   const {
-    focusSentinelFirstEl,
     containerEl,
@@ -879,3 +878,5 @@ menuBtnEl,
     onKeydownMenuButtonRef,
-    onBlurMenuButtonRef
+    onBlurMenuButtonRef,
+    mount,
+    focusSentinelBeforeEl
   } = state;
@@ -885,3 +886,17 @@ if (!open()) return;
   if (e.key === "Tab" && e.shiftKey) {
-    globalState.closedByEvents = true;
+    globalState.closedByEvents = true; // menuPopup is previous general sibling of menuButton
+
+    if (!mount || menuBtnEl.nextElementSibling !== containerEl) {
+      e.preventDefault();
+      let el = getNextTabbableElement({
+        from: menuBtnEl,
+        direction: "backwards",
+        ignoreElement: [containerEl]
+      });
+
+      if (el) {
+        el.focus();
+      }
+    }
+
     setOpen(false);
@@ -898,3 +913,3 @@ state.menuBtnKeyupTabFired = true;
   const el = getNextTabbableElement({
-    from: focusSentinelFirstEl
+    from: focusSentinelBeforeEl
   });
@@ -927,3 +942,3 @@
     containerEl,
-    focusSentinelLastEl
+    focusSentinelAfterEl
   } = state;
@@ -936,3 +951,3 @@ if (enableLastFocusSentinel) return;
   })) return;
-  focusSentinelLastEl.setAttribute("tabindex", "0");
+  focusSentinelAfterEl.setAttribute("tabindex", "0");
 };
@@ -944,8 +959,9 @@ const onFocusSentinel = (state, type, relatedTarget) => {
     menuBtnEl,
-    focusSentinelFirstEl,
+    focusSentinelBeforeEl,
     trapFocus,
-    focusSentinelLastEl,
+    focusSentinelAfterEl,
     closeWhenMenuButtonIsTabbed,
     focusElementOnClose,
     mount,
+    open,
     setOpen
@@ -988,5 +1004,7 @@ } = state; // clearTimeout(containerFocusTimeoutId!);
 
+  if (!open()) return;
+
   if (relatedTarget === containerEl || relatedTarget === menuBtnEl) {
     const el = getNextTabbableElement({
-      from: focusSentinelFirstEl
+      from: focusSentinelBeforeEl
     });
@@ -997,6 +1015,6 @@ el.focus();
 
-  if (type === "first") {
+  if (type === "before") {
     if (trapFocus) {
       const el = getNextTabbableElement({
-        from: focusSentinelLastEl,
+        from: focusSentinelAfterEl,
         direction: "backwards"
@@ -1026,3 +1044,3 @@ });
     const el = getNextTabbableElement({
-      from: focusSentinelFirstEl
+      from: focusSentinelBeforeEl
     });
@@ -1577,3 +1595,7 @@ el.focus();
     if (!open) {
-      // used to detect programmatic removal
+      if (state.focusSentinelAfterEl) {
+        state.focusSentinelAfterEl.tabIndex = -1;
+      } // used to detect programmatic removal
+
+
       if (!globalState.closedByEvents) {
@@ -1723,7 +1745,7 @@ if (!globalState.closedBySetOpen) {
 
-      const _ref$3 = state.focusSentinelFirstEl;
-      typeof _ref$3 === "function" ? _ref$3(_el$3) : state.focusSentinelFirstEl = _el$3;
+      const _ref$3 = state.focusSentinelBeforeEl;
+      typeof _ref$3 === "function" ? _ref$3(_el$3) : state.focusSentinelBeforeEl = _el$3;
 
       _el$3.addEventListener("focus", e => {
-        onFocusSentinel(state, "first", e.relatedTarget);
+        onFocusSentinel(state, "before", e.relatedTarget);
       });
@@ -1733,7 +1755,7 @@
 
-      const _ref$4 = state.focusSentinelLastEl;
-      typeof _ref$4 === "function" ? _ref$4(_el$4) : state.focusSentinelLastEl = _el$4;
+      const _ref$4 = state.focusSentinelAfterEl;
+      typeof _ref$4 === "function" ? _ref$4(_el$4) : state.focusSentinelAfterEl = _el$4;
 
       _el$4.addEventListener("focus", () => {
-        onFocusSentinel(state, "last");
+        onFocusSentinel(state, "after");
       });
@@ -1740,0 +1762,0 @@

dist/source/focusSentinel.js

@@ -5,3 +5,3 @@ import { dismissStack } from "./dismissStack";
 export const activateLastFocusSentinel = (state) => {
-    const { enableLastFocusSentinel, menuBtnEl, containerEl, focusSentinelLastEl, } = state;
+    const { enableLastFocusSentinel, menuBtnEl, containerEl, focusSentinelAfterEl, } = state;
     if (enableLastFocusSentinel)
@@ -15,6 +15,6 @@ return;
         return;
-    focusSentinelLastEl.setAttribute("tabindex", "0");
+    focusSentinelAfterEl.setAttribute("tabindex", "0");
 };
 export const onFocusSentinel = (state, type, relatedTarget) => {
-    const { uniqueId, containerEl, menuBtnEl, focusSentinelFirstEl, trapFocus, focusSentinelLastEl, closeWhenMenuButtonIsTabbed, focusElementOnClose, mount, setOpen, } = state;
+    const { uniqueId, containerEl, menuBtnEl, focusSentinelBeforeEl, trapFocus, focusSentinelAfterEl, closeWhenMenuButtonIsTabbed, focusElementOnClose, mount, open, setOpen, } = state;
     // clearTimeout(containerFocusTimeoutId!);
@@ -51,5 +51,7 @@ // if (mount) {
     };
+    if (!open())
+        return;
     if (relatedTarget === containerEl || relatedTarget === menuBtnEl) {
         const el = getNextTabbableElement({
-            from: focusSentinelFirstEl,
+            from: focusSentinelBeforeEl,
         });
@@ -59,6 +61,6 @@ el.focus();
     }
-    if (type === "first") {
+    if (type === "before") {
         if (trapFocus) {
             const el = getNextTabbableElement({
-                from: focusSentinelLastEl,
+                from: focusSentinelAfterEl,
                 direction: "backwards",
@@ -85,3 +87,3 @@ });
         const el = getNextTabbableElement({
-            from: focusSentinelFirstEl,
+            from: focusSentinelBeforeEl,
         });
@@ -88,0 +90,0 @@ el.focus();

dist/source/index.jsx

@@ -281,2 +281,5 @@ import "./browserInfo";
         if (!open) {
+            if (state.focusSentinelAfterEl) {
+                state.focusSentinelAfterEl.tabIndex = -1;
+            }
             // used to detect programmatic removal
@@ -386,8 +389,8 @@ if (!globalState.closedByEvents) {
         <div tabindex={props.open() ? "0" : "-1"} onFocus={(e) => {
-                onFocusSentinel(state, "first", e.relatedTarget);
-            }} style="position: fixed; top: 0; left: 0; outline: none; pointer-events: none; width: 0; height: 0;" aria-hidden="true" ref={state.focusSentinelFirstEl}></div>
+                onFocusSentinel(state, "before", e.relatedTarget);
+            }} style="position: fixed; top: 0; left: 0; outline: none; pointer-events: none; width: 0; height: 0;" aria-hidden="true" ref={state.focusSentinelBeforeEl}></div>
         {children}
         <div tabindex={props.open() && state.hasFocusSentinels ? "0" : "-1"} onFocus={() => {
-                onFocusSentinel(state, "last");
-            }} style="position: fixed; top: 0; left: 0; outline: none; pointer-events: none; width: 0; height: 0;" aria-hidden="true" ref={state.focusSentinelLastEl}></div>
+                onFocusSentinel(state, "after");
+            }} style="position: fixed; top: 0; left: 0; outline: none; pointer-events: none; width: 0; height: 0;" aria-hidden="true" ref={state.focusSentinelAfterEl}></div>
       </div>);
@@ -394,0 +397,0 @@ }

dist/source/menuButton.js

@@ -93,3 +93,3 @@ import { dismissStack } from "./dismissStack";
 export const onKeydownMenuButton = (state, e) => {
-    const { focusSentinelFirstEl, containerEl, menuBtnEl, setOpen, open, onKeydownMenuButtonRef, onBlurMenuButtonRef, } = state;
+    const { containerEl, menuBtnEl, setOpen, open, onKeydownMenuButtonRef, onBlurMenuButtonRef, mount, focusSentinelBeforeEl, } = state;
     if (!open())
@@ -99,2 +99,14 @@ return;
         globalState.closedByEvents = true;
+        // menuPopup is previous general sibling of menuButton
+        if (!mount || menuBtnEl.nextElementSibling !== containerEl) {
+            e.preventDefault();
+            let el = getNextTabbableElement({
+                from: menuBtnEl,
+                direction: "backwards",
+                ignoreElement: [containerEl],
+            });
+            if (el) {
+                el.focus();
+            }
+        }
         setOpen(false);
@@ -110,3 +122,3 @@ state.menuBtnKeyupTabFired = true;
     e.preventDefault();
-    const el = getNextTabbableElement({ from: focusSentinelFirstEl });
+    const el = getNextTabbableElement({ from: focusSentinelBeforeEl });
     if (el) {
@@ -113,0 +125,0 @@ el.focus();

dist/types/focusSentinel.d.ts

 import { TLocalState } from "./localState";
 export declare const activateLastFocusSentinel: (state: TLocalState) => void;
-export declare const onFocusSentinel: (state: TLocalState, type: "first" | "last", relatedTarget?: HTMLElement) => void;
+export declare const onFocusSentinel: (state: TLocalState, type: "before" | "after" | "last", relatedTarget?: HTMLElement) => void;

dist/types/localState.d.ts

@@ -9,4 +9,4 @@ import { Accessor } from "solid-js";
     menuBtnEl?: HTMLElement;
-    focusSentinelFirstEl?: HTMLDivElement;
-    focusSentinelLastEl?: HTMLDivElement;
+    focusSentinelBeforeEl?: HTMLDivElement;
+    focusSentinelAfterEl?: HTMLDivElement;
     containerEl?: HTMLDivElement;
@@ -13,0 +13,0 @@ overlayEl?: HTMLDivElement;

package.json

 {
   "name": "solid-dismiss",
-  "version": "1.0.9",
+  "version": "1.0.10",
   "homepage": "https://aquaductape.github.io/solid-dismiss/",
@@ -5,0 +5,0 @@ "description": "Handles \"click outside\" behavior for popup menu. Closing is triggered by click/focus outside of popup element or pressing \"Escape\" key.",

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

254848

increased by0.86%

Lines of code

3487

increased by0.96%

No dependency changes