@godxjp/ui 19.6.0 → 20.1.0

package/dist/components/feedback/dialog.js

@@ -1,83 +1,160 @@
 "use client";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import * as DialogPrimitive from "@radix-ui/react-dialog";
-import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
+import { chain, mergeRefs } from "@react-aria/utils";
+import { Dialog as RacDialog, Modal, ModalOverlay } from "react-aria-components";
 import { X } from "lucide-react";
 import { cn } from "../../lib/utils.js";
+import { Slot } from "../../lib/slot.js";
 import { overlayHeaderToneClass } from "./overlay-header-tone.js";
+import { useOverlayCloseFocus } from "./overlay-close-focus.js";
 import { buttonVariants } from "../general/button.js";
 import { useTranslation } from "../../i18n/use-translation.js";
 import { Button } from "../general/button.js";
 import { Input } from "../data-entry/input.js";
-import { Label } from "../data-entry/label.js";
-function DialogRoot(props) {
-  return /* @__PURE__ */ jsx(DialogPrimitive.Root, { "data-slot": "dialog", ...props });
-}
-function DialogTrigger(props) {
-  return /* @__PURE__ */ jsx(DialogPrimitive.Trigger, { "data-slot": "dialog-trigger", ...props });
-}
-function DialogPortal(props) {
-  return /* @__PURE__ */ jsx(DialogPrimitive.Portal, { "data-slot": "dialog-portal", ...props });
-}
-function DialogClose(props) {
-  return /* @__PURE__ */ jsx(DialogPrimitive.Close, { "data-slot": "dialog-close", ...props });
+import { FormField } from "../data-entry/form-field.js";
+function useOverlayOpenState({ open, defaultOpen, onOpenChange }) {
+  const [uncontrolled, setUncontrolled] = React.useState(defaultOpen ?? false);
+  const isOpen = open ?? uncontrolled;
+  const setOpen = React.useCallback(
+    (next) => {
+      if (next === isOpen) {
+        return;
+      }
+      if (open === void 0) {
+        setUncontrolled(next);
+      }
+      onOpenChange?.(next);
+    },
+    [isOpen, open, onOpenChange]
+  );
+  return React.useMemo(() => ({ isOpen, setOpen }), [isOpen, setOpen]);
 }
-const DialogOverlay = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  DialogPrimitive.Overlay,
-  {
-    ref,
-    "data-slot": "dialog-overlay",
-    className: cn(
-      "ui-dialog-overlay data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0",
-      className
-    ),
-    ...props
+const DialogOpenContext = React.createContext(null);
+function useDialogOpenState(component) {
+  const state = React.useContext(DialogOpenContext);
+  if (!state) {
+    throw new Error(`\`${component}\` ph\u1EA3i n\u1EB1m trong \`Dialog\` ho\u1EB7c \`AlertDialogRoot\`.`);
   }
-));
-DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
-const DialogContent = React.forwardRef(
-  ({
-    className,
-    children,
-    showClose,
-    showCloseButton: showCloseButtonProp,
-    overlayClassName,
-    ...props
-  }, ref) => {
-    const { t } = useTranslation();
-    const showCloseButton = showCloseButtonProp ?? showClose ?? true;
-    return /* @__PURE__ */ jsxs(DialogPortal, { children: [
-      /* @__PURE__ */ jsx(DialogOverlay, { className: overlayClassName }),
-      /* @__PURE__ */ jsxs(
-        DialogPrimitive.Content,
+  return state;
+}
+const DialogLabelContext = React.createContext(null);
+const OVERLAY_CLASS = "ui-dialog-overlay data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0";
+const CONTENT_CLASS = "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 duration-200 outline-none";
+function DialogShell({
+  role = "dialog",
+  className,
+  overlayClassName,
+  isDismissable,
+  onCloseAutoFocus,
+  children,
+  style,
+  ref,
+  ...props
+}) {
+  const state = useDialogOpenState("DialogContent");
+  const titleId = React.useId();
+  const descriptionId = React.useId();
+  const labels = React.useMemo(() => ({ titleId, descriptionId }), [titleId, descriptionId]);
+  const dataState = state.isOpen ? "open" : "closed";
+  useOverlayCloseFocus(state.isOpen, onCloseAutoFocus);
+  return /* @__PURE__ */ jsx(
+    ModalOverlay,
+    {
+      isOpen: state.isOpen,
+      onOpenChange: state.setOpen,
+      isDismissable,
+      "data-slot": "dialog-overlay",
+      "data-state": dataState,
+      className: cn(OVERLAY_CLASS, overlayClassName),
+      children: /* @__PURE__ */ jsx(Modal, { className: "contents", children: /* @__PURE__ */ jsx(
+        RacDialog,
         {
-          ref,
+          role,
+          "aria-labelledby": props["aria-labelledby"] ?? titleId,
+          "aria-describedby": props["aria-describedby"] ?? descriptionId,
           "data-slot": "dialog-content",
-          className: cn(
-            "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 duration-200 outline-none",
-            className
-          ),
-          ...props,
-          children: [
-            children,
-            showCloseButton ? /* @__PURE__ */ jsxs(
-              DialogPrimitive.Close,
-              {
-                "data-slot": "dialog-close",
-                className: "ui-focus-ring transition-opacity focus:outline-hidden disabled:pointer-events-none",
-                children: [
-                  /* @__PURE__ */ jsx(X, { className: "ui-dialog-close-icon", "aria-hidden": "true" }),
-                  /* @__PURE__ */ jsx("span", { className: "sr-only", children: t("feedback.alert.dismiss") })
-                ]
-              }
-            ) : null
-          ]
+          "data-state": dataState,
+          className: cn(CONTENT_CLASS, className),
+          render: (racProps) => {
+            const { "data-rac": _rac, ref: racRef, ...rest } = racProps;
+            return /* @__PURE__ */ jsx("section", { ...rest, ...props, style, ref: mergeRefs(ref, racRef) });
+          },
+          children: /* @__PURE__ */ jsx(DialogLabelContext.Provider, { value: labels, children })
         }
-      )
-    ] });
-  }
-);
+      ) })
+    }
+  );
+}
+function DialogRoot({ children, modal: _modal, ...openProps }) {
+  const state = useOverlayOpenState(openProps);
+  return /* @__PURE__ */ jsx(DialogOpenContext.Provider, { value: state, children });
+}
+function DialogTrigger({ asChild, onClick, ...props }) {
+  const state = useDialogOpenState("DialogTrigger");
+  const Comp = asChild ? Slot : "button";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      type: "button",
+      "data-slot": "dialog-trigger",
+      "aria-haspopup": "dialog",
+      "aria-expanded": state.isOpen,
+      "data-state": state.isOpen ? "open" : "closed",
+      ...props,
+      onClick: chain(onClick, () => {
+        state.setOpen(!state.isOpen);
+      })
+    }
+  );
+}
+function DialogPortal({ children }) {
+  return /* @__PURE__ */ jsx(Fragment, { children });
+}
+function DialogClose({ asChild, onClick, ...props }) {
+  const state = useDialogOpenState("DialogClose");
+  const Comp = asChild ? Slot : "button";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      type: "button",
+      "data-slot": "dialog-close",
+      ...props,
+      onClick: chain(onClick, () => {
+        state.setOpen(false);
+      })
+    }
+  );
+}
+function DialogOverlay(_props) {
+  return null;
+}
+DialogOverlay.displayName = "DialogOverlay";
+function DialogContent({
+  className,
+  children,
+  showClose,
+  showCloseButton: showCloseButtonProp,
+  overlayClassName,
+  forceMount: _forceMount,
+  ...props
+}) {
+  const { t } = useTranslation();
+  const showCloseButton = showCloseButtonProp ?? showClose ?? true;
+  return /* @__PURE__ */ jsxs(DialogShell, { isDismissable: true, className, overlayClassName, ...props, children: [
+    children,
+    showCloseButton ? /* @__PURE__ */ jsxs(
+      DialogClose,
+      {
+        className: "ui-focus-ring transition-opacity focus:outline-hidden disabled:pointer-events-none",
+        children: [
+          /* @__PURE__ */ jsx(X, { className: "ui-dialog-close-icon", "aria-hidden": "true" }),
+          /* @__PURE__ */ jsx("span", { className: "sr-only", children: t("feedback.alert.dismiss") })
+        ]
+      }
+    ) : null
+  ] });
+}
 DialogContent.displayName = "DialogContent";
 const DialogHeader = ({
   className,
@@ -116,17 +193,22 @@ const DialogFooter = ({ className, ...props }) => (
   /* @__PURE__ */ jsx("div", { "data-slot": "dialog-footer", className, ...props })
 );
 DialogFooter.displayName = "DialogFooter";
-const DialogTitle = React.forwardRef(({ className, ...props }, ref) => {
-  const cls = cn(className);
-  return /* @__PURE__ */ jsx(DialogPrimitive.Title, { ref, "data-slot": "dialog-title", className: cls, ...props });
-});
+const DialogTitle = React.forwardRef(
+  ({ className, ...props }, ref) => {
+    const labels = React.useContext(DialogLabelContext);
+    const cls = cn(className);
+    return /* @__PURE__ */ jsx("h2", { ref, id: labels?.titleId, "data-slot": "dialog-title", className: cls, ...props });
+  }
+);
 DialogTitle.displayName = "DialogTitle";
 const DialogDescription = React.forwardRef(({ className, ...props }, ref) => {
+  const labels = React.useContext(DialogLabelContext);
   const cls = cn(className);
   return /* @__PURE__ */ jsx(
-    DialogPrimitive.Description,
+    "p",
     {
       ref,
+      id: labels?.descriptionId,
       "data-slot": "dialog-description",
       className: cls,
       ...props
@@ -134,53 +216,62 @@ const DialogDescription = React.forwardRef(({ className, ...props }, ref) => {
   );
 });
 DialogDescription.displayName = "DialogDescription";
-function AlertDialogRoot(props) {
-  return /* @__PURE__ */ jsx(AlertDialogPrimitive.Root, { "data-slot": "dialog", ...props });
+function AlertDialogRoot({ children, ...openProps }) {
+  const state = useOverlayOpenState(openProps);
+  return /* @__PURE__ */ jsx(DialogOpenContext.Provider, { value: state, children });
 }
-const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
-const AlertDialogPortal = AlertDialogPrimitive.Portal;
-const AlertDialogOverlay = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  AlertDialogPrimitive.Overlay,
-  {
-    ref,
-    "data-slot": "dialog-overlay",
-    className: cn(
-      "ui-dialog-overlay data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0",
-      className
-    ),
-    ...props
-  }
-));
-AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
-const AlertDialogContent = React.forwardRef(({ className, children, showClose, showCloseButton: showCloseButtonProp, ...props }, ref) => {
-  const { t } = useTranslation();
-  const showCloseButton = showCloseButtonProp ?? showClose ?? false;
-  return /* @__PURE__ */ jsxs(
-    AlertDialogPrimitive.Content,
+function AlertDialogTrigger({ asChild, onClick, ...props }) {
+  const state = useDialogOpenState("AlertDialogTrigger");
+  const Comp = asChild ? Slot : "button";
+  return /* @__PURE__ */ jsx(
+    Comp,
     {
-      ref,
-      "data-slot": "dialog-content",
-      className: cn(
-        "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 duration-200 outline-none",
-        className
-      ),
+      type: "button",
+      "aria-haspopup": "dialog",
+      "aria-expanded": state.isOpen,
+      "data-state": state.isOpen ? "open" : "closed",
       ...props,
-      children: [
-        children,
-        showCloseButton ? /* @__PURE__ */ jsx(AlertDialogPrimitive.Cancel, { asChild: true, children: /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            "data-slot": "dialog-close",
-            className: "ui-focus-ring transition-opacity focus:outline-hidden disabled:pointer-events-none",
-            "aria-label": t("feedback.alert.dismiss"),
-            children: /* @__PURE__ */ jsx(X, { className: "ui-dialog-close-icon", "aria-hidden": "true" })
-          }
-        ) }) : null
-      ]
+      onClick: chain(onClick, () => {
+        state.setOpen(!state.isOpen);
+      })
     }
   );
-});
+}
+function AlertDialogPortal({ children }) {
+  return /* @__PURE__ */ jsx(Fragment, { children });
+}
+function AlertDialogOverlay(_props) {
+  return null;
+}
+AlertDialogOverlay.displayName = "AlertDialogOverlay";
+function AlertDialogContent({
+  className,
+  children,
+  showClose,
+  showCloseButton: showCloseButtonProp,
+  forceMount: _forceMount,
+  ...props
+}) {
+  const { t } = useTranslation();
+  const state = useDialogOpenState("AlertDialogContent");
+  const showCloseButton = showCloseButtonProp ?? showClose ?? false;
+  return /* @__PURE__ */ jsxs(DialogShell, { role: "alertdialog", isDismissable: false, className, ...props, children: [
+    children,
+    showCloseButton ? /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        "data-slot": "dialog-close",
+        className: "ui-focus-ring transition-opacity focus:outline-hidden disabled:pointer-events-none",
+        "aria-label": t("feedback.alert.dismiss"),
+        onClick: () => {
+          state.setOpen(false);
+        },
+        children: /* @__PURE__ */ jsx(X, { className: "ui-dialog-close-icon", "aria-hidden": "true" })
+      }
+    ) : null
+  ] });
+}
 AlertDialogContent.displayName = "AlertDialogContent";
 const AlertDialogHeader = ({
   className,
@@ -214,36 +305,39 @@ const AlertDialogFooter = ({ className, ...props }) => (
   /* @__PURE__ */ jsx("div", { "data-slot": "dialog-footer", className: cn(className), ...props })
 );
 AlertDialogFooter.displayName = "AlertDialogFooter";
-const AlertDialogTitle = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  AlertDialogPrimitive.Title,
-  {
-    ref,
-    "data-slot": "dialog-title",
-    className: cn(className),
-    ...props
-  }
-));
-AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
-const AlertDialogDescription = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  AlertDialogPrimitive.Description,
-  {
-    ref,
-    "data-slot": "dialog-description",
-    className: cn(className),
-    ...props
-  }
-));
-AlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName;
-const DialogAction = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(AlertDialogPrimitive.Action, { ref, className: cn(buttonVariants(), className), ...props }));
+const AlertDialogTitle = DialogTitle;
+const AlertDialogDescription = DialogDescription;
+function DialogAction({ asChild, className, onClick, ...props }) {
+  const state = useDialogOpenState("DialogAction");
+  const Comp = asChild ? Slot : "button";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      type: "button",
+      className: cn(buttonVariants(), className),
+      ...props,
+      onClick: chain(onClick, () => {
+        state.setOpen(false);
+      })
+    }
+  );
+}
 DialogAction.displayName = "DialogAction";
-const DialogCancel = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  AlertDialogPrimitive.Cancel,
-  {
-    ref,
-    className: cn(buttonVariants({ variant: "outline" }), className),
-    ...props
-  }
-));
+function DialogCancel({ asChild, className, onClick, ...props }) {
+  const state = useDialogOpenState("DialogCancel");
+  const Comp = asChild ? Slot : "button";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      type: "button",
+      className: cn(buttonVariants({ variant: "outline" }), className),
+      ...props,
+      onClick: chain(onClick, () => {
+        state.setOpen(false);
+      })
+    }
+  );
+}
 DialogCancel.displayName = "DialogCancel";
 const AlertDialogAction = DialogAction;
 const AlertDialogCancel = DialogCancel;
@@ -308,59 +402,40 @@ function AlertDialog({
       if (!keepOpenOnConfirm) onOpenChange(false);
     })();
   };
-  return /* @__PURE__ */ jsx(AlertDialogPrimitive.Root, { "data-slot": "dialog", open, onOpenChange: handleOpenChange, children: /* @__PURE__ */ jsxs(AlertDialogPrimitive.Portal, { children: [
-    /* @__PURE__ */ jsx(
-      AlertDialogPrimitive.Overlay,
+  return /* @__PURE__ */ jsx(AlertDialogRoot, { open, onOpenChange: handleOpenChange, children: /* @__PURE__ */ jsxs(AlertDialogContent, { children: [
+    /* @__PURE__ */ jsxs(DialogHeader, { tone: headerTone, children: [
+      /* @__PURE__ */ jsx(AlertDialogTitle, { children: title }),
+      description ? /* @__PURE__ */ jsx(AlertDialogDescription, { children: description }) : null
+    ] }),
+    needsPhrase && /* @__PURE__ */ jsx(FormField, { id: inputId, label: t("common.typeToConfirm", { phrase }), children: /* @__PURE__ */ jsx(
+      Input,
       {
-        "data-slot": "dialog-overlay",
-        className: "ui-dialog-overlay data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0"
+        id: inputId,
+        value: typed,
+        onChange: (e) => {
+          setTyped(e.target.value);
+        },
+        autoComplete: "off",
+        spellCheck: false,
+        placeholder: phrase,
+        "aria-required": "true",
+        disabled: busy
       }
-    ),
-    /* @__PURE__ */ jsxs(
-      AlertDialogPrimitive.Content,
-      {
-        "data-slot": "dialog-content",
-        className: "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 duration-200 outline-none",
-        children: [
-          /* @__PURE__ */ jsxs(DialogHeader, { tone: headerTone, children: [
-            /* @__PURE__ */ jsx(AlertDialogPrimitive.Title, { "data-slot": "dialog-title", children: title }),
-            description ? /* @__PURE__ */ jsx(AlertDialogPrimitive.Description, { "data-slot": "dialog-description", children: description }) : null
-          ] }),
-          needsPhrase && /* @__PURE__ */ jsxs("div", { className: "ui-stack-xs", children: [
-            /* @__PURE__ */ jsx(Label, { htmlFor: inputId, children: t("common.typeToConfirm", { phrase }) }),
-            /* @__PURE__ */ jsx(
-              Input,
-              {
-                id: inputId,
-                value: typed,
-                onChange: (e) => {
-                  setTyped(e.target.value);
-                },
-                autoComplete: "off",
-                spellCheck: false,
-                placeholder: phrase,
-                "aria-required": "true",
-                disabled: busy
-              }
-            )
-          ] }),
-          stepUpFailed && /* @__PURE__ */ jsx("p", { id: stepErrorId, role: "alert", className: "ui-dialog-step-up-error", children: t("feedback.alert.stepUpFailed") }),
-          /* @__PURE__ */ jsxs(DialogFooter, { children: [
-            /* @__PURE__ */ jsx(DialogCancel, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "ghost", disabled: busy, children: resolvedCancel }) }),
-            /* @__PURE__ */ jsx(
-              Button,
-              {
-                variant: effectiveVariant === "destructive" ? "destructive" : "default",
-                onClick: handleConfirm,
-                disabled: busy || !phraseMatches,
-                "aria-describedby": stepUpFailed ? stepErrorId : void 0,
-                children: confirmLabelText
-              }
-            )
-          ] })
-        ]
-      }
-    )
+    ) }),
+    stepUpFailed && /* @__PURE__ */ jsx("p", { id: stepErrorId, role: "alert", className: "ui-dialog-step-up-error", children: t("feedback.alert.stepUpFailed") }),
+    /* @__PURE__ */ jsxs(DialogFooter, { children: [
+      /* @__PURE__ */ jsx(DialogCancel, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "ghost", disabled: busy, children: resolvedCancel }) }),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: effectiveVariant === "destructive" ? "destructive" : "default",
+          onClick: handleConfirm,
+          disabled: busy || !phraseMatches,
+          "aria-describedby": stepUpFailed ? stepErrorId : void 0,
+          children: confirmLabelText
+        }
+      )
+    ] })
   ] }) });
 }
 const Dialog = Object.assign(DialogRoot, {

package/dist/components/feedback/overlay-close-focus.d.ts

@@ -0,0 +1,31 @@
+import * as React from "react";
+/**
+ * Trả tiêu điểm về nơi nó đứng trước khi lớp phủ mở — ĐỒNG BỘ, ngay trong lượt đóng.
+ *
+ * Radix trả tiêu điểm lúc tháo thẻ và cho phép chặn qua `onCloseAutoFocus`.
+ * `FocusScope restoreFocus` của react-aria cũng trả, nhưng trong một `requestAnimationFrame` SAU khi
+ * tháo — nên trong đúng một khung hình, mọi thứ đọc `document.activeElement` ngay sau lệnh đóng
+ * (test bàn phím, và trình đọc màn hình đang theo tiêu điểm) đều thấy `<body>`.
+ *
+ * Hook này lấp đúng khung hình đó. rAF của react-aria chạy sau, thấy tiêu điểm đã rời `<body>` nên
+ * tự bỏ qua (`if (ownerDocument.activeElement === ownerDocument.body)`), nên không có hai lệnh focus
+ * tranh nhau. Nếu lớp phủ còn treo để chạy hoạt ảnh thoát, `ariaHideOutside` vẫn đang giữ `inert`
+ * quanh trigger và `focus()` ở đây thành vô hiệu — lúc ấy rAF kia mới là thứ trả tiêu điểm, y như
+ * khi không có hook này.
+ *
+ * Nút cần trả về được ghi lại NGAY TRONG LƯỢT DỰNG mở ra, không phải trong một effect: effect của
+ * con chạy trước effect của cha, nên đến lượt cha thì `FocusScope` của react-aria đã kéo tiêu điểm
+ * vào trong tấm nội dung rồi.
+ *
+ * `contentRef` là tuỳ chọn, và chỉ lớp phủ NON-MODAL mới cần truyền. Một lớp phủ modal (Dialog,
+ * Sheet) đóng thì tiêu điểm chắc chắn đang ở trong nó hoặc đã rơi xuống `<body>`, nên trả về luôn
+ * là đúng. Popover non-modal thì có thêm một đường đóng nữa: tiêu điểm ĐI RA — Tab sang phần tử kế
+ * tiếp, hay bấm thẳng vào một ô nhập khác — và chính việc đi ra ấy đóng panel. Ở đường đó, kéo tiêu
+ * điểm về trigger là CƯỚP tiêu điểm chứ không phải trả. Truyền `contentRef` để phân biệt: còn ở
+ * trong tấm (hoặc đã rơi xuống `<body>`) thì trả, đã sang một phần tử khác còn sống thì để yên.
+ *
+ * Sự kiện `closeAutoFocus` vẫn phát ở MỌI đường đóng, kể cả khi không trả tiêu điểm: consumer dùng
+ * nó để tự đưa tiêu điểm tới chỗ người dùng cần gõ tiếp, và việc đó không được phụ thuộc vào tiêu
+ * điểm đang tình cờ ở đâu.
+ */
+export declare function useOverlayCloseFocus(isOpen: boolean, onCloseAutoFocus?: (event: Event) => void, contentRef?: React.RefObject<HTMLElement | null>): void;

package/dist/components/feedback/overlay-close-focus.js

@@ -0,0 +1,31 @@
+"use client";
+import * as React from "react";
+function useOverlayCloseFocus(isOpen, onCloseAutoFocus, contentRef) {
+  const nodeToRestore = React.useRef(null);
+  const renderedOpen = React.useRef(false);
+  const committedOpen = React.useRef(isOpen);
+  if (isOpen !== renderedOpen.current) {
+    renderedOpen.current = isOpen;
+    if (isOpen && typeof document !== "undefined") {
+      const active = document.activeElement;
+      nodeToRestore.current = active === document.body ? null : active;
+    }
+  }
+  React.useEffect(() => {
+    if (committedOpen.current && !isOpen) {
+      const event = new Event("closeAutoFocus", { cancelable: true });
+      onCloseAutoFocus?.(event);
+      const node = nodeToRestore.current;
+      nodeToRestore.current = null;
+      const active = document.activeElement;
+      const focusMovedAway = contentRef != null && active != null && active !== document.body && active.isConnected && contentRef.current?.contains(active) !== true;
+      if (!event.defaultPrevented && !focusMovedAway && node?.isConnected === true) {
+        node.focus();
+      }
+    }
+    committedOpen.current = isOpen;
+  }, [isOpen, onCloseAutoFocus, contentRef]);
+}
+export {
+  useOverlayCloseFocus
+};

package/dist/components/feedback/overlay-header-tone.d.ts

@@ -1,6 +1,6 @@
 import type { ToneProp } from "../../props/vocabulary/index.js";
 /**
- * Soft semantic background band for an overlay header (Sheet / Dialog / Drawer), Ant-Design style.
+ * Soft semantic background band for an overlay header (Sheet / Dialog / Drawer).
  * Tints ONLY the background — text stays `--foreground` (渋み: never invert the band into a loud
  * solid fill).
  */