@godxjp/ui 19.5.0 → 20.0.0

package/dist/components/data-entry/upload.js

@@ -93,7 +93,11 @@ function Upload({
   ...ariaProps
 }) {
   const { t } = useTranslation();
-  const inputA11y = resolveFieldA11y(ariaProps, t("dataEntry.upload.inputLabel"));
+  const triggerOwnsAriaLabel = variant === "button";
+  const inputA11y = resolveFieldA11y(
+    triggerOwnsAriaLabel ? { ...ariaProps, "aria-label": void 0 } : ariaProps,
+    t("dataEntry.upload.inputLabel")
+  );
   const accept = acceptProp ?? defaultAcceptForVariant(variant);
   const maxCount = maxCountProp ?? defaultMaxCount(variant);
   const multiple = multipleProp ?? (maxCount === 1 ? false : true);
@@ -214,6 +218,7 @@ function Upload({
   if (variant === "button") {
     const iconOnly = typeof triggerSize === "string" && triggerSize.startsWith("icon");
     const label = children ?? t("dataEntry.upload.buttonLabel");
+    const triggerAriaLabel = ariaProps["aria-label"] ?? (iconOnly ? typeof label === "string" ? label : t("dataEntry.upload.buttonLabel") : void 0);
     return /* @__PURE__ */ jsxs("div", { className: cn("ui-stack-sm", className), children: [
       hiddenInput,
       liveRegion,
@@ -225,7 +230,7 @@ function Upload({
           size: triggerSize,
           disabled,
           onClick: openPicker,
-          "aria-label": iconOnly ? typeof label === "string" ? label : void 0 : void 0,
+          "aria-label": triggerAriaLabel,
           children: [
             /* @__PURE__ */ jsx(
               UploadIcon,

package/dist/components/feedback/dialog.d.ts

@@ -1,20 +1,66 @@
 import * as React from "react";
-import * as DialogPrimitive from "@radix-ui/react-dialog";
-import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
 import type { ToneProp } from "../../props/vocabulary/index.js";
 import type { AlertDialogProp } from "../../props/components/feedback.prop.js";
 export type { AlertDialogProp, AlertDialogProp as AlertDialogProps, } from "../../props/components/feedback.prop.js";
-type DialogRootProps = React.ComponentProps<typeof DialogPrimitive.Root> & {};
-declare function DialogRoot(props: DialogRootProps): React.JSX.Element;
-declare function DialogTrigger(props: React.ComponentProps<typeof DialogPrimitive.Trigger>): React.JSX.Element;
-declare function DialogPortal(props: React.ComponentProps<typeof DialogPrimitive.Portal>): React.JSX.Element;
-declare function DialogClose(props: React.ComponentProps<typeof DialogPrimitive.Close>): React.JSX.Element;
-declare const DialogOverlay: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-declare const DialogContent: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+interface OverlayOpenProps {
+    /** Trạng thái mở, có kiểm soát. */
+    open?: boolean;
+    /** Trạng thái mở ban đầu khi không kiểm soát. */
+    defaultOpen?: boolean;
+    /** Gọi khi trạng thái mở đổi. */
+    onOpenChange?: (open: boolean) => void;
+}
+interface DialogRootProps extends OverlayOpenProps {
+    /**
+     * Giữ tên prop của Radix. RAC không có kiểu overlay không-modal: `Modal` LUÔN khoá cuộn và ẩn
+     * nền khỏi trình đọc màn hình, nên `modal={false}` không còn tắt được điều đó.
+     */
+    modal?: boolean;
+    children?: React.ReactNode;
+}
+/** `data-slot="dialog"` cũ nằm trên Root của Radix, thứ không dựng thẻ nào — nó chưa từng ra DOM. */
+declare function DialogRoot({ children, modal: _modal, ...openProps }: DialogRootProps): React.JSX.Element;
+interface DialogTriggerProps extends React.ComponentPropsWithRef<"button"> {
+    /** Mượn thẻ của con thay vì dựng `<button>` riêng. */
+    asChild?: boolean;
+}
+declare function DialogTrigger({ asChild, onClick, ...props }: DialogTriggerProps): React.JSX.Element;
+interface DialogPortalProps {
+    /** Giữ tên prop của Radix; RAC tự portal ra `document.body` từ `ModalOverlay`. */
+    forceMount?: true;
+    children?: React.ReactNode;
+}
+declare function DialogPortal({ children }: DialogPortalProps): React.JSX.Element;
+interface DialogCloseProps extends React.ComponentPropsWithRef<"button"> {
+    /** Mượn thẻ của con thay vì dựng `<button>` riêng. */
+    asChild?: boolean;
+}
+declare function DialogClose({ asChild, onClick, ...props }: DialogCloseProps): React.JSX.Element;
+interface DialogOverlayProps extends React.ComponentPropsWithRef<"div"> {
+    /** Giữ tên prop của Radix. */
+    forceMount?: true;
+}
+/**
+ * Không dựng gì — xem đầu tệp. Màn nền là `ModalOverlay` bên trong `DialogContent`, và nó vẫn mang
+ * `data-slot="dialog-overlay"` + `.ui-dialog-overlay` như trước.
+ */
+declare function DialogOverlay(_props: DialogOverlayProps): null;
+declare namespace DialogOverlay {
+    var displayName: string;
+}
+interface DialogContentProps extends Omit<React.ComponentPropsWithRef<"section">, "role"> {
     showClose?: boolean;
     showCloseButton?: boolean;
     overlayClassName?: string;
-} & React.RefAttributes<HTMLDivElement>>;
+    /** Giữ tên prop của Radix. */
+    forceMount?: true;
+    /** Giữ tên prop của Radix — xem `useCloseAutoFocus`. */
+    onCloseAutoFocus?: (event: Event) => void;
+}
+declare function DialogContent({ className, children, showClose, showCloseButton: showCloseButtonProp, overlayClassName, forceMount: _forceMount, ...props }: DialogContentProps): React.JSX.Element;
+declare namespace DialogContent {
+    var displayName: string;
+}
 interface DialogHeaderProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
     title?: React.ReactNode;
     subtitle?: React.ReactNode;
@@ -33,23 +79,38 @@ declare function DialogFooter({ className, ...props }: React.HTMLAttributes<HTML
 declare namespace DialogFooter {
     var displayName: string;
 }
-declare const DialogTitle: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
-declare const DialogDescription: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
-type AlertDialogRootProps = React.ComponentProps<typeof AlertDialogPrimitive.Root> & {};
+declare const DialogTitle: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+declare const DialogDescription: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+type AlertDialogRootProps = OverlayOpenProps & {
+    children?: React.ReactNode;
+};
 /**
  * Compound alert-dialog Root — the `role="alertdialog"` mirror of {@link DialogRoot}. It supplies
- * the Radix AlertDialog context that `AlertDialogTitle`, `AlertDialogDescription`,
- * `AlertDialogAction` and `AlertDialogCancel` read, so the compound parts are assemblable from the
- * public API alone (no direct `@radix-ui/react-alert-dialog` import).
+ * the open-state context that `AlertDialogTitle`, `AlertDialogDescription`, `AlertDialogAction` and
+ * `AlertDialogCancel` read, so the compound parts are assemblable from the public API alone (no
+ * direct `react-aria-components` import).
  */
-declare function AlertDialogRoot(props: AlertDialogRootProps): React.JSX.Element;
-declare const AlertDialogTrigger: React.ForwardRefExoticComponent<AlertDialogPrimitive.AlertDialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
-declare const AlertDialogPortal: React.FC<AlertDialogPrimitive.AlertDialogPortalProps>;
-declare const AlertDialogOverlay: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-declare const AlertDialogContent: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+declare function AlertDialogRoot({ children, ...openProps }: AlertDialogRootProps): React.JSX.Element;
+/** Radix's alert-dialog trigger carries no `data-slot`; keeping it that way keeps the DOM identical. */
+declare function AlertDialogTrigger({ asChild, onClick, ...props }: DialogTriggerProps): React.JSX.Element;
+declare function AlertDialogPortal({ children }: DialogPortalProps): React.JSX.Element;
+/** Không dựng gì — màn nền do `AlertDialogContent` phát ra. Xem đầu tệp. */
+declare function AlertDialogOverlay(_props: DialogOverlayProps): null;
+declare namespace AlertDialogOverlay {
+    var displayName: string;
+}
+interface AlertDialogContentProps extends Omit<React.ComponentPropsWithRef<"section">, "role"> {
     showClose?: boolean;
     showCloseButton?: boolean;
-} & React.RefAttributes<HTMLDivElement>>;
+    /** Giữ tên prop của Radix. */
+    forceMount?: true;
+    /** Giữ tên prop của Radix — xem `useCloseAutoFocus`. */
+    onCloseAutoFocus?: (event: Event) => void;
+}
+declare function AlertDialogContent({ className, children, showClose, showCloseButton: showCloseButtonProp, forceMount: _forceMount, ...props }: AlertDialogContentProps): React.JSX.Element;
+declare namespace AlertDialogContent {
+    var displayName: string;
+}
 declare function AlertDialogHeader({ className, title, subtitle, extra, tone, children, ...props }: DialogHeaderProps): React.JSX.Element;
 declare namespace AlertDialogHeader {
     var displayName: string;
@@ -58,14 +119,24 @@ declare function AlertDialogFooter({ className, ...props }: React.HTMLAttributes
 declare namespace AlertDialogFooter {
     var displayName: string;
 }
-declare const AlertDialogTitle: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
-declare const AlertDialogDescription: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+declare const AlertDialogTitle: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+declare const AlertDialogDescription: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+interface DialogActionProps extends React.ComponentPropsWithRef<"button"> {
+    /** Mượn thẻ của con thay vì dựng `<button>` riêng. */
+    asChild?: boolean;
+}
 /** Confirm mode — primary action (maps to Radix AlertDialogAction). */
-declare const DialogAction: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogActionProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare function DialogAction({ asChild, className, onClick, ...props }: DialogActionProps): React.JSX.Element;
+declare namespace DialogAction {
+    var displayName: string;
+}
 /** Confirm mode — dismiss without action (maps to Radix AlertDialogCancel). */
-declare const DialogCancel: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogCancelProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
-declare const AlertDialogAction: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogActionProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
-declare const AlertDialogCancel: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogCancelProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare function DialogCancel({ asChild, className, onClick, ...props }: DialogActionProps): React.JSX.Element;
+declare namespace DialogCancel {
+    var displayName: string;
+}
+declare const AlertDialogAction: typeof DialogAction;
+declare const AlertDialogCancel: typeof DialogCancel;
 /**
  * Preset: confirm / destructive / typed-challenge / step-up without compound markup. Both flows
  * force the destructive tone (button + soft header band).
@@ -74,19 +145,15 @@ declare function AlertDialog({ open, onOpenChange, title, description, confirmLa
 export declare const Dialog: typeof DialogRoot & {
     Trigger: typeof DialogTrigger;
     Portal: typeof DialogPortal;
-    Overlay: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-    Content: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
-        showClose?: boolean;
-        showCloseButton?: boolean;
-        overlayClassName?: string;
-    } & React.RefAttributes<HTMLDivElement>>;
+    Overlay: typeof DialogOverlay;
+    Content: typeof DialogContent;
     Header: typeof DialogHeader;
     Body: typeof DialogBody;
     Footer: typeof DialogFooter;
-    Title: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
-    Description: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+    Title: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+    Description: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
     Close: typeof DialogClose;
-    Action: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogActionProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
-    Cancel: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogCancelProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+    Action: typeof DialogAction;
+    Cancel: typeof DialogCancel;
 };
 export { DialogRoot, DialogTrigger, DialogPortal, DialogOverlay, DialogContent, DialogHeader, DialogBody, DialogFooter, DialogTitle, DialogDescription, DialogClose, DialogAction, DialogCancel, AlertDialogRoot, AlertDialogTrigger, AlertDialogPortal, AlertDialogOverlay, AlertDialogContent, AlertDialogHeader, AlertDialogFooter, AlertDialogTitle, AlertDialogDescription, AlertDialogAction, AlertDialogCancel, AlertDialog, };