flowbite-svelte 1.2.3 → 1.2.4

package/dist/drawer/Drawer.svelte

@@ -5,6 +5,7 @@
   import { drawer } from ".";
   import type { DrawerProps } from "../types";
   import clsx from "clsx";
+  import { trapFocus } from "../utils/actions.svelte";
 
   let { children, hidden = $bindable(), closeDrawer = () => (hidden = true), activateClickOutside = true, position, width, backdrop = true, backdropClass, placement = "left", class: className, transitionParams, transitionType = fly, ...restProps }: DrawerProps = $props();
 
@@ -26,11 +27,11 @@
   let transition_params = $derived(Object.assign({}, { x, y, duration: 200, easing: sineIn }));
 </script>
 
-<svelte:window onkeydown={hidden ? undefined : (ev: KeyboardEvent) => ev.key === "Escape" && (hidden = true)} bind:innerWidth bind:innerHeight />
+<svelte:window bind:innerWidth bind:innerHeight />
 
 {#if !hidden}
   <div role="presentation" class={backdropCls({ class: backdropClass })} onclick={activateClickOutside ? closeDrawer : undefined}></div>
-  <div {...restProps} class={base({ class: clsx(className) })} transition:transitionType={transitionParams ? transitionParams : (transition_params as ParamsType)} tabindex="-1">
+  <div use:trapFocus={{ onEscape: closeDrawer }} {...restProps} class={base({ class: clsx(className) })} transition:transitionType={transitionParams ? transitionParams : (transition_params as ParamsType)} tabindex="-1">
     {@render children?.()}
   </div>
 {/if}

package/dist/modal/Modal.svelte

@@ -6,8 +6,7 @@
   import { fade } from "svelte/transition";
   import { modal as modalTheme } from ".";
   import type { ModalProps } from "../types";
-
-  // TODO: missing focus trap
+  import { trapFocus } from "../utils/actions.svelte";
 
   let { children, oncancel, onclose, modal = true, autoclose = false, header, footer, title, open = $bindable(false), permanent = false, dismissable = true, closeBtnClass, headerClass, bodyClass, footerClass, outsideclose = true, size = "md", placement, class: className, params, transition = fade, ...restProps }: ModalProps = $props();
 
@@ -25,13 +24,13 @@
   };
 
   function _oncancel(ev: Event & { currentTarget: HTMLDialogElement }) {
-    // this event get called when user press ESC key
+    // this event gets called when user presses ESC key
+    // We'll handle ESC via the trapFocus action instead
     if (ev.currentTarget instanceof HTMLDialogElement) {
-      oncancel?.(ev); // propagate the event to the user
-      // if user cancels the event we don't close the modal
-      if (ev.defaultPrevented || permanent) return;
+      // Stop the default ESC handling from dialog element
+      // as we're handling it in our trapFocus action
       ev.preventDefault();
-      closeModal();
+      oncancel?.(ev); // propagate the event to the user
     }
   }
 
@@ -53,10 +52,20 @@
       open = true;
     }
   });
+
+  // Handler for Escape key that respects component state
+  const handleEscape = () => {
+    if (!permanent) {
+      oncancel?.({ currentTarget: dlg } as any);
+      // If oncancel prevented default, we don't close
+      if (oncancel && event?.defaultPrevented) return;
+      closeModal();
+    }
+  };
 </script>
 
 {#if open}
-  <dialog bind:this={dlg} {...restProps} class={base({ class: clsx(className) })} tabindex="-1" oncancel={_oncancel} onclick={_onclick} transition:transition={paramsOptions as ParamsType} onintrostart={() => (modal ? dlg?.showModal() : dlg?.show())} onoutroend={() => dlg?.close()}>
+  <dialog use:trapFocus={{ onEscape: handleEscape }} bind:this={dlg} {...restProps} class={base({ class: clsx(className) })} tabindex="-1" oncancel={_oncancel} onclick={_onclick} transition:transition={paramsOptions as ParamsType} onintrostart={() => (modal ? dlg?.showModal() : dlg?.show())} onoutroend={() => dlg?.close()}>
     {#if title || header}
       <div class={headerCls({ class: headerClass })}>
         {#if title}

package/dist/sidebar/Sidebar.svelte

@@ -6,6 +6,7 @@
   import { sidebar } from ".";
   import type { SidebarProps, SidebarCtxType } from "../types";
   import clsx from "clsx";
+  import { trapFocus } from "../utils/actions.svelte";
 
   let { children, isOpen = false, closeSidebar, isSingle = true, breakpoint = "md", position = "fixed", activateClickOutside = true, backdrop = true, backdropClass, transition = fly, params, divClass, ariaLabel, nonActiveClass, activeClass, activeUrl = "", class: className, ...restProps }: SidebarProps = $props();
 
@@ -20,11 +21,7 @@
   let innerWidth: number = $state(-1);
   let isLargeScreen = $derived(innerWidth >= breakpointValues[breakpoint]);
 
-  const initialPosition = position;
-
-  $effect(() => {
-    // position = isLargeScreen ? "static" : initialPosition;
-  });
+  // const initialPosition = position;
 
   const activeUrlStore = writable("");
   setContext("activeUrl", activeUrlStore);
@@ -50,6 +47,11 @@
   let transitionParams = params ? params : { x: -320, duration: 200, easing: sineIn };
 
   setContext("sidebarContext", sidebarCtx);
+
+  // Handler for Escape key
+  const handleEscape = () => {
+    closeSidebar?.();
+  };
 </script>
 
 <svelte:window bind:innerWidth />
@@ -66,7 +68,7 @@
       <div role="presentation" class="fixed start-0 top-0 z-50 h-full w-full"></div>
     {/if}
   {/if}
-  <aside transition:transition={transitionParams} {...restProps} class={base({ class: clsx(className) })} aria-label={ariaLabel}>
+  <aside use:trapFocus={!isLargeScreen && isOpen ? { onEscape: closeSidebar ? handleEscape : undefined } : null} transition:transition={transitionParams} {...restProps} class={base({ class: clsx(className) })} aria-label={ariaLabel}>
     <div class={div({ class: divClass })}>
       {@render children()}
     </div>

package/dist/utils/Popper.svelte

@@ -99,10 +99,11 @@
     if (ev.newState === "open") {
       autoUpdateDestroy = dom.autoUpdate(referenceElement ?? invoker, popover, updatePopoverPosition);
       popover.ownerDocument.addEventListener("click", closeOnClickOutside);
+      popover.ownerDocument.addEventListener("keydown", closeOnEscape); // ✅ Add this line
     } else {
-      // When closing the popover, we destroy the autoUpdate instance
       autoUpdateDestroy();
       popover.ownerDocument.removeEventListener("click", closeOnClickOutside);
+      popover.ownerDocument.removeEventListener("keydown", closeOnEscape); // ✅ Add this line
     }
   }
 
@@ -150,6 +151,12 @@
     });
   }
 
+  function closeOnEscape(event: KeyboardEvent) {
+    if (event.key === "Escape") {
+      isOpen = false;
+    }
+  }
+
   /**
    * Close the popper when clicking outside of it.
    * This is necessary to get around a bug in Safari where clicking outside of the open popper does not close it.

package/dist/utils/actions.svelte.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Svelte action that traps focus within a DOM node and handles Escape key
+ * @param node - The DOM node to trap focus within
+ * @param options - Optional configuration object
+ * @returns An action object with destroy method
+ */
+export declare function trapFocus(node: HTMLElement, options?: {
+    onEscape?: () => void;
+    isClosing?: boolean;
+} | null): {
+    update(newOptions?: {
+        onEscape?: () => void;
+        isClosing?: boolean;
+    } | null): void;
+    destroy(): void;
+};

package/dist/utils/actions.svelte.js

@@ -0,0 +1,114 @@
+/**
+ * Svelte action that traps focus within a DOM node and handles Escape key
+ * @param node - The DOM node to trap focus within
+ * @param options - Optional configuration object
+ * @returns An action object with destroy method
+ */
+export function trapFocus(node, options = {}) {
+    // If options is null, don't trap focus at all
+    if (options === null) {
+        return {
+            update(newOptions = {}) {
+                options = newOptions;
+            },
+            destroy() { }
+        };
+    }
+    const previous = document.activeElement;
+    // Track if we're currently closing via outside click
+    let isClosingViaOutsideClick = false;
+    // Create a flag to prevent re-focusing when focus is moved outside
+    let isFocusMovedOutside = false;
+    function focusable() {
+        return Array.from(node.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'));
+    }
+    function handleKeydown(event) {
+        if (event.key === "Tab" && options !== null) {
+            const current = document.activeElement;
+            const elements = focusable();
+            const first = elements.at(0);
+            const last = elements.at(-1);
+            if (event.shiftKey && current === first) {
+                last?.focus();
+                event.preventDefault();
+            }
+            if (!event.shiftKey && current === last) {
+                first?.focus();
+                event.preventDefault();
+            }
+        }
+        else if (event.key === "Escape" && options !== null && options.onEscape) {
+            event.preventDefault();
+            // Mark as closing via escape to prevent focus restoration
+            isClosingViaOutsideClick = true;
+            options.onEscape();
+        }
+    }
+    // Handler for when focus moves outside the trapped area
+    function handleFocusOut(event) {
+        // If focus is moving outside our node and not to one of our triggers
+        if (!node.contains(event.relatedTarget) && event.relatedTarget !== previous) {
+            isFocusMovedOutside = true;
+        }
+    }
+    $effect(() => {
+        // Only add event listeners if options is not null
+        if (options !== null) {
+            // Check if we're currently in a closing state
+            isClosingViaOutsideClick = !!options.isClosing;
+            // Only auto-focus if not closing from outside click
+            if (!isClosingViaOutsideClick && !isFocusMovedOutside) {
+                const elements = focusable();
+                if (elements.length > 0) {
+                    elements[0].focus();
+                }
+            }
+            node.addEventListener("keydown", handleKeydown);
+            node.addEventListener("focusout", handleFocusOut);
+            return () => {
+                node.removeEventListener("keydown", handleKeydown);
+                node.removeEventListener("focusout", handleFocusOut);
+                // Only restore focus if not closing via outside click and focus hasn't moved outside
+                if (!isClosingViaOutsideClick && !isFocusMovedOutside && previous) {
+                    setTimeout(() => {
+                        previous.focus({ preventScroll: true });
+                    }, 0);
+                }
+            };
+        }
+    });
+    // Return the action object with destroy method
+    return {
+        update(newOptions = {}) {
+            // Update the closing state
+            if (newOptions && newOptions.isClosing !== undefined) {
+                isClosingViaOutsideClick = newOptions.isClosing;
+            }
+            options = newOptions;
+            // Clean up existing listeners if options becomes null
+            if (options === null) {
+                node.removeEventListener("keydown", handleKeydown);
+                node.removeEventListener("focusout", handleFocusOut);
+            }
+            else if (options !== null) {
+                // Add listener if it wasn't already there
+                node.removeEventListener("keydown", handleKeydown);
+                node.removeEventListener("focusout", handleFocusOut);
+                node.addEventListener("keydown", handleKeydown);
+                node.addEventListener("focusout", handleFocusOut);
+            }
+        },
+        destroy() {
+            if (options !== null) {
+                node.removeEventListener("keydown", handleKeydown);
+                node.removeEventListener("focusout", handleFocusOut);
+                // Only restore focus if not closing via outside click and focus hasn't moved outside
+                if (!isClosingViaOutsideClick && !isFocusMovedOutside && previous) {
+                    setTimeout(() => {
+                        previous.focus({ preventScroll: true });
+                    }, 0);
+                }
+            }
+        }
+    };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "1.2.3",
+  "version": "1.2.4",
   "description": "Flowbite components for Svelte",
   "main": "dist/index.js",
   "author": {

package/dist/utils/focusTrap.d.ts

@@ -1,4 +0,0 @@
-import type { Action } from "svelte/action";
-declare const focusTrap: Action<HTMLElement>;
-export default focusTrap;
-export declare function isFocusable(element: Element): boolean;

package/dist/utils/focusTrap.js

@@ -1,38 +0,0 @@
-//
-// Taken from github.com/carbon-design-system/carbon/packages/react/src/internal/keyboard/navigation.js
-//
-const selectorTabbable = `
-  a[href], area[href], input:not([disabled]):not([tabindex='-1']),
-  button:not([disabled]):not([tabindex='-1']),select:not([disabled]):not([tabindex='-1']),
-  textarea:not([disabled]):not([tabindex='-1']),
-  iframe, object, embed, *[tabindex]:not([tabindex='-1']):not([disabled]), *[contenteditable=true]
-`;
-const focusTrap = (node) => {
-    const handleFocusTrap = (e) => {
-        const isTabPressed = e.key === "Tab" || e.keyCode === 9;
-        if (!isTabPressed) {
-            return;
-        }
-        const tabbable = Array.from(node.querySelectorAll(selectorTabbable)).filter((el) => el instanceof HTMLElement && el.hidden !== true);
-        let index = tabbable.indexOf(node.ownerDocument.activeElement);
-        if (index === -1 && e.shiftKey) {
-            index = 0;
-        }
-        index += tabbable.length + (e.shiftKey ? -1 : 1);
-        index %= tabbable.length;
-        tabbable[index].focus();
-        e.preventDefault();
-    };
-    node.ownerDocument.addEventListener("keydown", handleFocusTrap, true);
-    return {
-        destroy() {
-            node.ownerDocument.removeEventListener("keydown", handleFocusTrap, true);
-        }
-    };
-};
-export default focusTrap;
-export function isFocusable(element) {
-    if (!element)
-        return false;
-    return element.matches(selectorTabbable);
-}