fuma 2.5.4 → 2.6.2

package/dist/command/useCommand.svelte.d.ts

@@ -11,7 +11,11 @@ export declare function useCommand({ onSelect, onFocus, isEnable, hotKey }?: Com
         [x: symbol]: (node: HTMLElement) => () => void;
     };
     focusTrigger: () => void;
-    item: (index: number, scrollMargin?: string) => {
+    /**
+     * Le dégagement du défilement appartient à l'appelant: `scroll-mt-*` / `scroll-mb-*`
+     * sur l'item, puisque lui seul connaît la hauteur de son en-tête collant.
+     */
+    item: (index: number) => {
         [x: symbol]: (node: HTMLElement) => () => void;
     };
 };

package/dist/command/useCommand.svelte.js

@@ -74,13 +74,21 @@ export function useCommand({ onSelect, onFocus, isEnable = () => true, hotKey }
             }
         },
         focusTrigger,
-        item: (index, scrollMargin = '8px') => ({
+        /**
+         * Le dégagement du défilement appartient à l'appelant: `scroll-mt-*` / `scroll-mb-*`
+         * sur l'item, puisque lui seul connaît la hauteur de son en-tête collant.
+         */
+        item: (index) => ({
             [createAttachmentKey()]: (node) => {
-                node.style.scrollMargin = scrollMargin;
                 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/input/InputMultiSelect.svelte

@@ -293,7 +293,7 @@
 				{@const isFocus = index === command.focusIndex}
 				<li>
 					<button
-						{...command.item(index, '')}
+						{...command.item(index)}
 						class={[isSelected && 'border', isFocus && 'menu-focus', 'scroll-mt-13 scroll-mb-2']}
 						type="button"
 						tabindex="-1"

package/dist/input/InputMultiSelect.svelte.d.ts

@@ -62,7 +62,7 @@ declare function $$render<Item>(): {
                 [x: symbol]: (node: HTMLElement) => () => void;
             };
             focusTrigger: () => void;
-            item: (index: number, scrollMargin?: string) => {
+            item: (index: number) => {
                 [x: symbol]: (node: HTMLElement) => () => void;
             };
         };
@@ -96,7 +96,7 @@ declare class __sveltets_Render<Item> {
                 [x: symbol]: (node: HTMLElement) => () => void;
             };
             focusTrigger: () => void;
-            item: (index: number, scrollMargin?: string) => {
+            item: (index: number) => {
                 [x: symbol]: (node: HTMLElement) => () => void;
             };
         };

package/dist/input/InputSelect.svelte

@@ -252,7 +252,7 @@
 				{@const isFocus = index === command.focusIndex}
 				<li {...propsLi}>
 					<button
-						{...command.item(index, '')}
+						{...command.item(index)}
 						class={[
 							isSelected && 'border-hard border',
 							isFocus && 'menu-focus',

package/dist/input/InputSelect.svelte.d.ts

@@ -70,7 +70,7 @@ declare function $$render<Item>(): {
                 [x: symbol]: (node: HTMLElement) => () => void;
             };
             focusTrigger: () => void;
-            item: (index: number, scrollMargin?: string) => {
+            item: (index: number) => {
                 [x: symbol]: (node: HTMLElement) => () => void;
             };
         };
@@ -104,7 +104,7 @@ declare class __sveltets_Render<Item> {
                 [x: symbol]: (node: HTMLElement) => () => void;
             };
             focusTrigger: () => void;
-            item: (index: number, scrollMargin?: string) => {
+            item: (index: number) => {
                 [x: symbol]: (node: HTMLElement) => () => void;
             };
         };

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.5.4",
+	"version": "2.6.2",
 	"description": "My fullstack material build with sveltekit, daisyui, zod, prisma, lucia",
 	"author": {
 		"name": "Jonas Voisard",