@hgdc/ui 0.66.1 → 0.66.2

package/dist/destructive-dialog.js

@@ -38,6 +38,7 @@ export function DestructiveDialog({ open, onOpenChange, title, question, consequ
     const view = shown.current;
     const [typed, setTyped] = useState("");
     const [pending, setPending] = useState(false);
+    const confirmButton = useRef(null);
     const ready = !pending && (view.name === undefined || matchesConfirmation(typed, view.name));
     const [wasOpen, setWasOpen] = useState(open);
     if (open !== wasOpen) {
@@ -55,6 +56,11 @@ export function DestructiveDialog({ open, onOpenChange, title, question, consequ
         }
         catch (error) {
             toast.error(formatError(error));
+            // Le bouton se désactive pendant l'envoi et le focus part sur `body`, hors de la boîte restée ouverte.
+            requestAnimationFrame(() => {
+                if (document.activeElement === document.body)
+                    confirmButton.current?.focus();
+            });
         }
         finally {
             setPending(false);
@@ -69,5 +75,5 @@ export function DestructiveDialog({ open, onOpenChange, title, question, consequ
             }, children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: view.title }), _jsxs(DialogDescription, { render: _jsx("div", {}), className: "grid gap-1 text-[15px]", children: [_jsx("p", { children: view.question }), view.consequence ? _jsx("p", { children: view.consequence }) : null, _jsx("p", { className: "font-semibold text-destructive", children: "Impossible de revenir en arri\u00E8re." })] })] }), view.name !== undefined ? (_jsxs("form", { className: "grid gap-3", onSubmit: (event) => {
                         event.preventDefault();
                         void confirm();
-                    }, children: [_jsxs("p", { className: "text-[15px] leading-7 text-muted-foreground", children: ["Tape ", _jsx(NameChip, { name: view.name }), " pour confirmer."] }), _jsx(Input, { "aria-label": `Tape ${view.name} pour confirmer`, autoFocus: true, autoComplete: "off", autoCapitalize: "off", spellCheck: false, value: typed, onChange: (event) => setTyped(event.target.value), placeholder: view.name, "aria-invalid": typed.length > 0 && !view.name.startsWith(typed) ? true : undefined })] })) : null, _jsxs(DialogFooter, { className: "sm:justify-start", children: [_jsxs(Button, { variant: "destructive", isLoading: pending, disabled: !ready, onClick: () => void confirm(), children: [view.confirmLabel ?? view.title, _jsx(Kbd, { "aria-hidden": true, className: "ml-1 hidden bg-current/10 text-current lg:inline-flex", children: mod }), _jsx(Kbd, { "aria-hidden": true, className: "hidden bg-current/10 text-current lg:inline-flex", children: "\u21B5" })] }), _jsxs(Button, { variant: "outline", disabled: pending, onClick: () => onOpenChange(false), children: ["Annuler", _jsx(Kbd, { "aria-hidden": true, className: "ml-1 hidden lg:inline-flex", children: "\u00C9chap" })] })] })] }) }));
+                    }, children: [_jsxs("p", { className: "text-[15px] leading-7 text-muted-foreground", children: ["Tape ", _jsx(NameChip, { name: view.name }), " pour confirmer."] }), _jsx(Input, { "aria-label": `Tape ${view.name} pour confirmer`, autoFocus: true, autoComplete: "off", autoCapitalize: "off", spellCheck: false, value: typed, onChange: (event) => setTyped(event.target.value), placeholder: view.name, "aria-invalid": typed.length > 0 && !view.name.startsWith(typed) ? true : undefined })] })) : null, _jsxs(DialogFooter, { className: "sm:justify-start", children: [_jsxs(Button, { ref: confirmButton, variant: "destructive", isLoading: pending, disabled: !ready, onClick: () => void confirm(), children: [view.confirmLabel ?? view.title, _jsx(Kbd, { "aria-hidden": true, className: "ml-1 hidden bg-current/10 text-current lg:inline-flex", children: mod }), _jsx(Kbd, { "aria-hidden": true, className: "hidden bg-current/10 text-current lg:inline-flex", children: "\u21B5" })] }), _jsxs(Button, { variant: "outline", disabled: pending, onClick: () => onOpenChange(false), children: ["Annuler", _jsx(Kbd, { "aria-hidden": true, className: "ml-1 hidden lg:inline-flex", children: "\u00C9chap" })] })] })] }) }));
 }

package/dist/settings-section.js

@@ -1,5 +1,5 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useId } from "react";
+import { useId, useRef } from "react";
 import { Button } from "./button.js";
 import { cn } from "./cn.js";
 /**
@@ -26,8 +26,9 @@ import { cn } from "./cn.js";
 export function SettingsSection({ title, description, children, footer, footerNote, tone = "default", onSave, dirty = true, saving = false, saveLabel = "Enregistrer", className, }) {
     const titleId = useId();
     const descriptionId = useId();
+    const heading = useRef(null);
     const hasFooter = Boolean(footer || footerNote || onSave);
-    const body = (_jsxs(_Fragment, { children: [_jsxs("div", { className: "grid gap-4 p-5 sm:p-6", children: [_jsxs("div", { children: [_jsx("h2", { id: titleId, className: "text-base font-semibold text-balance", children: title }), description ? (_jsx("p", { id: descriptionId, className: "mt-1 max-w-prose text-sm text-pretty text-muted-foreground", children: description })) : null] }), children] }), hasFooter ? (_jsxs("div", { "data-slot": "settings-section-footer", className: "flex flex-wrap items-center justify-end gap-3 border-t border-border bg-muted/40 px-5 py-3 sm:px-6", children: [footerNote ? _jsx("p", { className: "mr-auto text-sm text-muted-foreground", children: footerNote }) : null, footer, onSave ? (_jsx(Button, { type: "submit", size: "sm", disabled: !dirty, isLoading: saving, children: saveLabel })) : null] })) : null] }));
+    const body = (_jsxs(_Fragment, { children: [_jsxs("div", { className: "grid gap-4 p-5 sm:p-6", children: [_jsxs("div", { children: [_jsx("h2", { ref: heading, id: titleId, tabIndex: -1, className: "text-base font-semibold text-balance outline-none", children: title }), description ? (_jsx("p", { id: descriptionId, className: "mt-1 max-w-prose text-sm text-pretty text-muted-foreground", children: description })) : null] }), children] }), hasFooter ? (_jsxs("div", { "data-slot": "settings-section-footer", className: "flex flex-wrap items-center justify-end gap-3 border-t border-border bg-muted/40 px-5 py-3 sm:px-6", children: [footerNote ? _jsx("p", { className: "mr-auto text-sm text-muted-foreground", children: footerNote }) : null, footer, onSave ? (_jsx(Button, { type: "submit", size: "sm", disabled: !dirty, isLoading: saving, children: saveLabel })) : null] })) : null] }));
     const shared = {
         "data-slot": "settings-section",
         "data-tone": tone,
@@ -41,7 +42,14 @@ export function SettingsSection({ title, description, children, footer, footerNo
         event.preventDefault();
         if (!dirty || saving)
             return;
-        void onSave();
+        // Le bouton se désactive pendant l'envoi et le focus part sur `body` : il revient au titre du bloc.
+        // Un focus resté dans un champ (Entrée) n'y est pas déplacé.
+        void Promise.resolve(onSave()).finally(() => {
+            requestAnimationFrame(() => {
+                if (document.activeElement === document.body)
+                    heading.current?.focus();
+            });
+        });
     };
     // Un `<form>` nommé par son titre a le rôle « form » : il apparaît dans les repères du lecteur d'écran.
     return (_jsx("form", { ...shared, onSubmit: submit, children: body }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hgdc/ui",
-  "version": "0.66.1",
+  "version": "0.66.2",
   "description": "Interface de la H Collection : jetons de la DA, thèmes, polices et composants.",
   "license": "UNLICENSED",
   "homepage": "https://github.com/hugogebel-boop/hgdc-kit/tree/main/packages/ui#readme",