fuma 2.6.0 → 2.6.2

package/dist/command/useCommand.svelte.js

@@ -82,8 +82,13 @@ export function useCommand({ onSelect, onFocus, isEnable = () => true, hotKey }
             [createAttachmentKey()]: (node) => {
                 if (!items.includes(node))
                     items.splice(index, 0, node);
-                const cleanup = on(node, 'click', () => {
+                const cleanup = on(node, 'click', (event) => {
                     focusIndex = selectedIndex = items.indexOf(node);
+                    // Un lien navigue par son `href`, modificateurs compris (cmd+clic, nouvel
+                    // onglet): le clic ne fait que poser le curseur. `onSelect` reste la voie du
+                    // clavier, et celle d'un clic dont le lien a été annulé.
+                    if (node instanceof HTMLAnchorElement && node.href && !event.defaultPrevented)
+                        return;
                     onSelect?.(selectedIndex);
                 });
                 return () => {

package/dist/ui/drawer/Drawer.svelte

@@ -24,6 +24,7 @@
 		classBody = '',
 		duration = 180,
 		noOverlay = false,
+		autofocus = true,
 		zIndex = 50,
 		inertSkip = '[data-sonner-toaster], :has(> [data-sonner-toaster])',
 		children
@@ -36,6 +37,8 @@
 		classBody?: ClassValue
 		duration?: number
 		noOverlay?: boolean
+		/** Poser le focus sur le premier champ du corps à l'ouverture, s'il y en a un. */
+		autofocus?: boolean
 		zIndex?: number
 		/** Sélecteur des éléments d'arrière-plan qui restent interactifs quand le tiroir est ouvert. */
 		inertSkip?: string
@@ -102,7 +105,7 @@
 		aria-modal={!noOverlay}
 		aria-label={title}
 		tabindex={-1}
-		{@attach noOverlay ? () => {} : inertBackground({ key, skip: inertSkip })}
+		{@attach noOverlay ? () => {} : inertBackground({ key, skip: inertSkip, autofocus })}
 		bind:clientWidth
 		transition:drawerFly|local={{
 			x: clientWidth,
@@ -138,7 +141,7 @@
 			</button>
 		</div>
 
-		<div class={['grow px-4', classBody]}>
+		<div data-drawer-body class={['grow px-4', classBody]}>
 			{@render children({ open, close })}
 		</div>
 	</div>

package/dist/ui/drawer/Drawer.svelte.d.ts

@@ -13,6 +13,8 @@ declare const Drawer: import("svelte").Component<{
     classBody?: ClassValue;
     duration?: number;
     noOverlay?: boolean;
+    /** Poser le focus sur le premier champ du corps à l'ouverture, s'il y en a un. */
+    autofocus?: boolean;
     zIndex?: number;
     /** Sélecteur des éléments d'arrière-plan qui restent interactifs quand le tiroir est ouvert. */
     inertSkip?: string;

package/dist/ui/drawer/focusTarget.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Le premier champ de saisie du corps du tiroir, ou le panneau lui-même à défaut — un tiroir sans
+ * formulaire garde le focus sur son conteneur.
+ */
+export declare function drawerFocusTarget(node: HTMLElement): HTMLElement;

package/dist/ui/drawer/focusTarget.js

@@ -0,0 +1,36 @@
+/** Champs de saisie: le focus s'y pose sans effet de bord. */
+const ENTRY = 'input:not([type="hidden"], [type="submit"], [type="button"], [type="reset"], [type="image"]), textarea, select';
+/**
+ * Tout ce qui compte comme premier champ. Les déclencheurs d'`InputSelect` et d'`InputMultiSelect`
+ * en font partie sans être focalisables ici: ils comptent pour décider qu'on ne descend pas, sans
+ * quoi le focus sauterait par-dessus le premier champ pour atterrir au milieu du formulaire.
+ */
+const FIELD = `${ENTRY}, .input, [role="combobox"]`;
+function isEligible(element) {
+    if (element.matches('[disabled], [aria-disabled="true"], [readonly], [tabindex="-1"]')) {
+        return false;
+    }
+    // Écarte ce que le CSS cache: l'`input[type=file]` d'un sélecteur d'image, et les champs d'un
+    // `<dialog>` fermé rendu à l'intérieur du tiroir.
+    return element.checkVisibility();
+}
+/**
+ * Le premier champ de saisie du corps du tiroir, ou le panneau lui-même à défaut — un tiroir sans
+ * formulaire garde le focus sur son conteneur.
+ */
+export function drawerFocusTarget(node) {
+    // Le clavier virtuel recouvrirait la moitié du tiroir à peine ouvert.
+    if (window.matchMedia('(pointer: coarse)').matches)
+        return node;
+    const body = node.querySelector('[data-drawer-body]') ?? node;
+    for (const field of body.querySelectorAll(FIELD)) {
+        if (!isEligible(field))
+            continue;
+        // Le premier champ n'est pas une saisie: on s'arrête sur le panneau plutôt que de chercher
+        // plus bas.
+        if (!field.matches(ENTRY))
+            return node;
+        return field;
+    }
+    return node;
+}

package/dist/ui/drawer/inertBackground.d.ts

@@ -4,10 +4,12 @@ export type InertBackgroundOptions = {
     key: string;
     /** Sélecteur des frères à laisser interactifs, par ex. le conteneur des toasts. */
     skip?: string;
+    /** Descendre au premier champ du corps, plutôt que de s'arrêter sur le panneau. */
+    autofocus?: boolean;
 };
 /**
  * Rend inerte tout le document sauf la branche qui mène au nœud attaché: à chaque niveau on marque
  * les frères, jusqu'à `<body>`. Aucun nœud n'est déplacé — poser `inert` sur un conteneur racine
  * serait impossible ici, le tiroir étant rendu à l'intérieur de ce conteneur.
  */
-export declare function inertBackground({ key, skip }: InertBackgroundOptions): Attachment<HTMLElement>;
+export declare function inertBackground({ key, skip, autofocus }: InertBackgroundOptions): Attachment<HTMLElement>;

package/dist/ui/drawer/inertBackground.js

@@ -1,3 +1,4 @@
+import { drawerFocusTarget } from './focusTarget.js';
 // Compteur par élément: deux tiroirs empilés marquent les mêmes frères, et le second à se fermer
 // ne doit lever `inert` que si le premier l'a déjà relâché. Un `WeakMap` évite de retenir les
 // nœuds détachés entre-temps.
@@ -7,7 +8,7 @@ const marks = new WeakMap();
  * les frères, jusqu'à `<body>`. Aucun nœud n'est déplacé — poser `inert` sur un conteneur racine
  * serait impossible ici, le tiroir étant rendu à l'intérieur de ce conteneur.
  */
-export function inertBackground({ key, skip }) {
+export function inertBackground({ key, skip, autofocus = true }) {
     return (node) => {
         const marked = [];
         for (let el = node; el && el !== document.body; el = el.parentElement) {
@@ -25,18 +26,20 @@ export function inertBackground({ key, skip }) {
                 marked.push(sibling);
             }
         }
+        const focus = () => (autofocus ? drawerFocusTarget(node) : node).focus({ preventScroll: true });
         // Relevé avant la mise en `inert`: le focus courant est souvent sur le déclencheur, qui
         // appartient à l'arrière-plan et perdrait le focus au profit de `<body>`.
         const previous = document.activeElement;
-        node.focus({ preventScroll: true });
+        focus();
         // SvelteKit remet le focus sur `<body>` à la fin de la navigation qui ouvre le tiroir. Les
         // `goto` de `open()`/`close()` passent `keepFocus`, mais un tiroir ouvert par un simple
         // `<a href>` n'en profite pas: on repasse après coup, et seulement si personne d'autre n'a
-        // pris le focus entre-temps.
+        // pris le focus entre-temps. Le panneau ne compte pas comme quelqu'un: le corps peut n'avoir
+        // été monté qu'après l'attachement, et le champ visé n'existait alors pas encore.
         const timer = setTimeout(() => {
             const active = document.activeElement;
-            if (!active || active === document.body)
-                node.focus({ preventScroll: true });
+            if (!active || active === document.body || active === node)
+                focus();
         });
         return () => {
             clearTimeout(timer);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "fuma",
-	"version": "2.6.0",
+	"version": "2.6.2",
 	"description": "My fullstack material build with sveltekit, daisyui, zod, prisma, lucia",
 	"author": {
 		"name": "Jonas Voisard",