@godxjp/ui 28.10.0 → 28.13.0

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

@@ -6,7 +6,6 @@ import { useTranslation } from "../../i18n/use-translation.js";
 import { formatBytes } from "../../lib/format.js";
 import { cn } from "../../lib/utils.js";
 import { Button } from "../general/button.js";
-import { Text } from "../general/typography.js";
 import { Progress } from "../data-display/progress.js";
 import { createUploadItem } from "./upload-types.js";
 import { readDroppedFiles } from "./upload-files.js";
@@ -30,6 +29,10 @@ function resolvePlaceholder(placeholder, type) {
   if (!placeholder) return {};
   return typeof placeholder === "function" ? placeholder(type) : placeholder;
 }
+function splitFileName(name) {
+  const match = /^(.*)\.[^.]+$/.exec(name ?? "");
+  return match ? [match[1], (name ?? "").slice(match[1].length)] : [name ?? "", ""];
+}
 function fileMatchesAccept(file, accept) {
   if (!accept) return true;
   return accept.split(",").some((rule) => {
@@ -60,6 +63,7 @@ function PlaceholderUploader({
       className: cn("ui-attachments-placeholder", className),
       style,
       "data-drag-active": dragActive ? "true" : void 0,
+      "data-disabled": disabled ? "true" : void 0,
       "aria-hidden": disabled ? true : void 0,
       onDragEnter: (event) => {
         event.preventDefault();
@@ -71,6 +75,7 @@ function PlaceholderUploader({
       },
       onDrop: async (event) => {
         event.preventDefault();
+        event.stopPropagation();
         setDragActive(false);
         if (disabled) return;
         const files = await readDroppedFiles(event.dataTransfer, false);
@@ -107,27 +112,55 @@ function AttachmentCard({
   const { t } = useTranslation();
   const { disabled } = React.useContext(AttachmentContext);
   const preview = item.thumbUrl ?? item.url;
+  const [namePrefix, nameSuffix] = splitFileName(item.name);
   const desc = description ?? item.description ?? (item.status === "uploading" ? `${item.percent ?? 0}%` : item.status === "error" ? typeof item.response === "string" ? item.response : t("dataEntry.attachments.error") : item.size ? formatBytes(item.size) : "");
-  return /* @__PURE__ */ jsxs("li", { className: cn("ui-attachments-card", classNames?.card, classNames?.file), children: [
-    preview ? /* @__PURE__ */ jsx("img", { src: preview, alt: "", className: "ui-attachments-card-preview", "aria-hidden": "true" }) : /* @__PURE__ */ jsx("span", { className: "ui-attachments-card-placeholder", "aria-hidden": "true", children: /* @__PURE__ */ jsx(FileIcon, {}) }),
-    (item.status === "uploading" || item.status === "error") && /* @__PURE__ */ jsx("div", { className: "ui-attachments-card-overlay", children: item.status === "uploading" && item.percent != null ? /* @__PURE__ */ jsx(Progress, { value: item.percent, "aria-label": t("dataEntry.attachments.uploading") }) : /* @__PURE__ */ jsx(Text, { size: "xs", children: String(desc) }) }),
-    desc && item.status !== "uploading" && item.status !== "error" ? /* @__PURE__ */ jsx("div", { className: "ui-attachments-card-meta", children: desc }) : null,
-    !disabled && onRemove ? /* @__PURE__ */ jsx(
-      Button,
-      {
-        type: "button",
-        variant: "ghost",
-        size: "icon-xs",
-        className: "ui-attachments-card-remove",
-        "aria-label": t("dataEntry.attachments.remove", { name: item.name }),
-        onClick: (event) => {
-          event.stopPropagation();
-          onRemove();
-        },
-        children: /* @__PURE__ */ jsx(X, { "aria-hidden": "true" })
-      }
-    ) : null
-  ] });
+  return /* @__PURE__ */ jsxs(
+    "li",
+    {
+      className: cn("ui-attachments-card", classNames?.card, classNames?.file),
+      "data-status": item.status,
+      children: [
+        preview ? /* @__PURE__ */ jsx("img", { src: preview, alt: "", className: "ui-attachments-card-preview", "aria-hidden": "true" }) : /* @__PURE__ */ jsx("span", { className: "ui-attachments-card-placeholder", "aria-hidden": "true", children: /* @__PURE__ */ jsx(FileIcon, {}) }),
+        /* @__PURE__ */ jsxs("span", { className: "ui-attachments-card-content", children: [
+          /* @__PURE__ */ jsxs("span", { className: "ui-attachments-card-name", title: item.name, children: [
+            /* @__PURE__ */ jsx("span", { className: "ui-attachments-card-name-prefix", children: namePrefix }),
+            /* @__PURE__ */ jsx("span", { className: "ui-attachments-card-name-suffix", children: nameSuffix })
+          ] }),
+          desc ? /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "ui-attachments-card-meta",
+              title: typeof desc === "string" ? desc : void 0,
+              children: desc
+            }
+          ) : null
+        ] }),
+        item.status === "uploading" && item.percent != null ? /* @__PURE__ */ jsx("span", { className: "ui-attachments-card-progress", children: /* @__PURE__ */ jsx(
+          Progress,
+          {
+            size: "sm",
+            value: item.percent,
+            "aria-label": t("dataEntry.attachments.uploading")
+          }
+        ) }) : null,
+        !disabled && onRemove ? /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "button",
+            variant: "ghost",
+            size: "icon-xs",
+            className: "ui-attachments-card-remove",
+            "aria-label": t("dataEntry.attachments.remove", { name: item.name }),
+            onClick: (event) => {
+              event.stopPropagation();
+              onRemove();
+            },
+            children: /* @__PURE__ */ jsx(X, { "aria-hidden": "true" })
+          }
+        ) : null
+      ]
+    }
+  );
 }
 const Attachments = React.forwardRef(
   ({
@@ -151,6 +184,7 @@ const Attachments = React.forwardRef(
     const containerRef = React.useRef(null);
     const inputRef = React.useRef(null);
     const [internalItems, setInternalItems] = React.useState([]);
+    const [dropActive, setDropActive] = React.useState(false);
     const items = controlledItems ?? internalItems;
     const setItems = React.useCallback(
       (next, file) => {
@@ -207,7 +241,7 @@ const Attachments = React.forwardRef(
       {
         ref: inputRef,
         type: "file",
-        className: "ui-attachments-input",
+        className: cn("ui-attachments-input", "sr-only"),
         accept,
         multiple: multiple ?? (maxCount == null || maxCount > 1),
         disabled,
@@ -244,7 +278,7 @@ const Attachments = React.forwardRef(
         )
       ] });
     }
-    const dropHost = getDropContainer?.() ?? containerRef.current;
+    const dropScope = getDropContainer?.() ? "viewport" : "control";
     return /* @__PURE__ */ jsx(AttachmentContext.Provider, { value: { disabled }, children: /* @__PURE__ */ jsxs(
       "div",
       {
@@ -252,6 +286,21 @@ const Attachments = React.forwardRef(
         className: cn("ui-attachments", className, rootClassName, classNames.root),
         style: styles.root,
         dir: "auto",
+        onDragEnter: (event) => {
+          event.preventDefault();
+          if (!disabled) setDropActive(true);
+        },
+        onDragOver: (event) => event.preventDefault(),
+        onDragLeave: (event) => {
+          if (!event.currentTarget.contains(event.relatedTarget)) setDropActive(false);
+        },
+        onDrop: async (event) => {
+          event.preventDefault();
+          setDropActive(false);
+          if (disabled) return;
+          const files = await readDroppedFiles(event.dataTransfer, false);
+          if (files.length) dispatchFiles(files);
+        },
         children: [
           fileInput,
           hasFiles ? /* @__PURE__ */ jsxs(
@@ -297,20 +346,15 @@ const Attachments = React.forwardRef(
               hidden: hasFiles
             }
           ),
-          dropHost ? /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx(
             "div",
             {
               className: "ui-attachments-drop-layer",
-              "data-active": void 0,
-              "aria-hidden": "true",
-              onDragOver: (event) => event.preventDefault(),
-              onDrop: async (event) => {
-                event.preventDefault();
-                const files = await readDroppedFiles(event.dataTransfer, false);
-                dispatchFiles(files);
-              }
+              "data-scope": dropScope,
+              "data-active": dropActive ? "true" : void 0,
+              "aria-hidden": "true"
             }
-          ) : null
+          )
         ]
       }
     ) });

package/dist/components/ui/avatar.d.ts

@@ -1,22 +1,6 @@
 import * as React from "react";
+import { type ImageLoadingStatus } from "../../lib/image-loading-status.js";
 import type { AvatarProp } from "../../props/components/data-display.prop.js";
-/**
- * Trạng thái tải của ảnh trong avatar — chia sẻ giữa `AvatarImage` và
- * `AvatarFallback` qua context, đúng như Radix làm.
- *
- * React Aria KHÔNG có avatar, nên đây là việc TỰ DỰNG. Nhưng phần cần dựng lại
- * không phải cái vỏ `<span>` — mà là logic thật mà `@radix-ui/react-avatar` cầm:
- * ảnh chỉ được vẽ khi đã tải XONG, fallback chỉ được vẽ khi ảnh CHƯA xong hoặc
- * HỎNG, và `delayMs` giữ fallback im lặng đủ lâu để mạng nhanh không kịp nháy
- * một khung initials trước khi ảnh về.
- *
- * Phép dò là một `new Image()` RỜI, không phải `onLoad`/`onError` trên chính
- * thẻ được vẽ: thẻ chỉ tồn tại khi đã `loaded`, nên handler trên nó không bao
- * giờ có cơ hội báo "đang tải" hay "hỏng". Đây cũng là lý do một `<img>` hỏng
- * không bao giờ nằm trong DOM để trình duyệt vẽ biểu tượng ảnh vỡ lên trên
- * fallback.
- */
-type ImageLoadingStatus = "idle" | "loading" | "loaded" | "error";
 export declare const Avatar: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
     asChild?: boolean;
 } & Pick<AvatarProp, "appearance" | "presence" | "presenceLabel" | "shape" | "size"> & React.RefAttributes<HTMLSpanElement>>;
@@ -28,4 +12,3 @@ export declare const AvatarFallback: React.ForwardRefExoticComponent<Omit<React.
     asChild?: boolean;
     delayMs?: number;
 } & React.RefAttributes<HTMLSpanElement>>;
-export {};

package/dist/components/ui/avatar.js

@@ -3,6 +3,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffectEvent, useLayoutEffect } from "@react-aria/utils";
 import * as React from "react";
 import { useTranslation } from "../../i18n/use-translation.js";
+import { useImageLoadingStatus } from "../../lib/image-loading-status.js";
 import { Slot } from "../../lib/slot.js";
 import { cn } from "../../lib/utils.js";
 const AvatarContext = React.createContext(null);
@@ -13,42 +14,6 @@ function useAvatarContext(part) {
   }
   return context;
 }
-function getImageLoadingStatus(image) {
-  if (!image.complete) {
-    return "loading";
-  }
-  return image.naturalWidth > 0 ? "loaded" : "error";
-}
-function useImageLoadingStatus(src, {
-  loadingStatus,
-  setLoadingStatus,
-  referrerPolicy,
-  crossOrigin
-}) {
-  useLayoutEffect(() => {
-    if (!src) {
-      setLoadingStatus("error");
-      return;
-    }
-    const image = new window.Image();
-    const handleLoad = (event) => setLoadingStatus(getImageLoadingStatus(event.currentTarget));
-    const handleError = () => setLoadingStatus("error");
-    image.addEventListener("load", handleLoad);
-    image.addEventListener("error", handleError);
-    if (referrerPolicy) {
-      image.referrerPolicy = referrerPolicy;
-    }
-    image.crossOrigin = crossOrigin ?? null;
-    image.src = src;
-    setLoadingStatus(getImageLoadingStatus(image));
-    return () => {
-      image.removeEventListener("load", handleLoad);
-      image.removeEventListener("error", handleError);
-      setLoadingStatus("idle");
-    };
-  }, [src, crossOrigin, referrerPolicy, setLoadingStatus]);
-  return loadingStatus;
-}
 const Avatar = React.forwardRef(
   ({
     className,

package/dist/contracts/measurement.json

@@ -1,6 +1,6 @@
 {
   "$comment": "AUTO-GENERATED by scripts/gen-measurement-contract.mjs — do not edit. Read this instead of guessing: docs/MEASUREMENT-CONTRACT.md.",
-  "version": "28.10.0",
+  "version": "28.13.0",
   "targetSize": {
     "standard": "WCAG 2.2 SC 2.5.8 Target Size (Minimum), level AA — 24×24 CSS px",
     "min": 24,