@godxjp/ui 20.0.0 → 20.1.0

package/dist/components/data-entry/tree-select.js

@@ -1,15 +1,22 @@
 "use client";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import { ChevronDown, ChevronRight, ChevronsUpDown, X } from "lucide-react";
+import { ChevronDown, ChevronRight, ChevronsUpDown, Loader2, X } from "lucide-react";
 import { useTranslation } from "../../i18n/use-translation.js";
 import { cn } from "../../lib/utils.js";
 import { pickFieldA11y, useFieldIdentity } from "../../lib/field-a11y.js";
-import { controlTriggerClass } from "../../lib/control-styles.js";
+import { controlSurfaceTriggerClass } from "../../lib/control-styles.js";
+import {
+  applyMaxTagCount,
+  controlSurfaceAttrs,
+  resolveAllowClear,
+  resolveAriaInvalid
+} from "./control-surface.js";
 import { Popover, PopoverContent, PopoverTrigger } from "../data-display/popover.js";
 import { ScrollArea } from "../data-display/scroll-area.js";
 import { Checkbox } from "./checkbox.js";
-import { Command, CommandInput } from "./command.js";
+import { SearchInput } from "./search-input.js";
+import { Separator } from "../layout/separator.js";
 import {
   collectAllExpandableKeys,
   filterVisibleTree,
@@ -54,15 +61,33 @@ function TreeSelectRoot({
   treeDefaultExpandAll,
   placeholder,
   disabled,
-  allowClear = true,
+  readOnly,
+  name,
+  allowClear,
   className,
   id,
   fieldNames,
+  size,
+  status,
+  variant,
+  loading = false,
+  open: openProp,
+  defaultOpen = false,
+  onOpenChange,
+  loadData,
+  treeTitleRender,
+  maxTagCount,
+  maxTagPlaceholder,
+  notFoundContent,
+  autoClearSearchValue = true,
+  search: searchProp,
+  onSearchChange,
   ...ariaProps
 }) {
   const { t } = useTranslation();
   const fieldA11y = pickFieldA11y(ariaProps);
-  const identity = useFieldIdentity({ id, "data-field": fieldA11y["data-field"] });
+  const identity = useFieldIdentity({ id, name, "data-field": fieldA11y["data-field"] });
+  const resolvedName = name ?? identity.name;
   const reactId = React.useId();
   const treeId = `${id ?? reactId}-tree`;
   const options = React.useMemo(
@@ -70,8 +95,28 @@ function TreeSelectRoot({
     [treeDataProp, fieldNames]
   );
   const checkable = treeCheckable ?? multiple;
-  const [open, setOpen] = React.useState(false);
-  const [search, setSearch] = React.useState("");
+  const [internalSearch, setInternalSearch] = React.useState("");
+  const isSearchControlled = searchProp !== void 0;
+  const search = isSearchControlled ? searchProp : internalSearch;
+  const setSearch = React.useCallback(
+    (next) => {
+      if (!isSearchControlled) setInternalSearch(next);
+      onSearchChange?.(next);
+    },
+    [isSearchControlled, onSearchChange]
+  );
+  const [internalOpen, setInternalOpen] = React.useState(defaultOpen);
+  const isOpenControlled = openProp !== void 0;
+  const open = isOpenControlled ? openProp : internalOpen;
+  const setOpen = React.useCallback(
+    (next) => {
+      if (readOnly && next) return;
+      if (!isOpenControlled) setInternalOpen(next);
+      onOpenChange?.(next);
+      if (!next && autoClearSearchValue) setSearch("");
+    },
+    [isOpenControlled, onOpenChange, autoClearSearchValue, setSearch, readOnly]
+  );
   const [expandedKeys, setExpandedKeys] = React.useState(
     () => new Set(treeDefaultExpandAll ? collectAllExpandableKeys(options) : [])
   );
@@ -89,7 +134,16 @@ function TreeSelectRoot({
     if (!isControlled) setInternal(next);
     onValueChange?.(checkable || multiple ? next : next[0] ?? void 0);
   };
-  const toggleExpand = (key) => {
+  const requestedLoads = React.useRef(/* @__PURE__ */ new Set());
+  const toggleExpand = (node) => {
+    const key = node.value;
+    const willExpand = !expandedKeys.has(key);
+    if (willExpand && loadData && !(node.children?.length ?? 0) && node.isLeaf !== true) {
+      if (!requestedLoads.current.has(key)) {
+        requestedLoads.current.add(key);
+        void loadData(node);
+      }
+    }
     setExpandedKeys((prev) => {
       const next = new Set(prev);
       if (next.has(key)) next.delete(key);
@@ -116,10 +170,20 @@ function TreeSelectRoot({
     commit(next);
   };
   const displayKeys = displayValues(selected, options, showCheckedStrategy, treeCheckStrictly);
-  const displayLabel = displayKeys.map((v) => {
+  const displayItems = displayKeys.map((v) => {
     const label = findNodeByValue(options, v)?.label;
-    return label ? reactNodeText(label) : v;
-  }).join(", ");
+    return { value: v, label: label ? reactNodeText(label) : v };
+  });
+  const {
+    visible: visibleItems,
+    omitted: omittedItems,
+    overflow
+  } = applyMaxTagCount(displayItems, maxTagCount, maxTagPlaceholder);
+  const displayLabel = omittedItems.length === 0 ? visibleItems.map((item) => item.label).join(", ") : /* @__PURE__ */ jsxs(Fragment, { children: [
+    visibleItems.map((item) => item.label).join(", "),
+    ", ",
+    /* @__PURE__ */ jsx("span", { "data-slot": "tree-select-overflow", children: overflow ?? t("dataEntry.selection.overflow", { count: omittedItems.length }) })
+  ] });
   const clearValue = (e) => {
     e.stopPropagation();
     commit([]);
@@ -150,7 +214,7 @@ function TreeSelectRoot({
       case "ArrowRight": {
         event.preventDefault();
         if (hasChildren && !expanded) {
-          toggleExpand(node.value);
+          toggleExpand(node);
         } else if (hasChildren && expanded) {
           focusByOffset(node.value, 1);
         }
@@ -159,7 +223,7 @@ function TreeSelectRoot({
       case "ArrowLeft": {
         event.preventDefault();
         if (hasChildren && expanded) {
-          toggleExpand(node.value);
+          toggleExpand(node);
         }
         break;
       }
@@ -173,6 +237,9 @@ function TreeSelectRoot({
         break;
     }
   };
+  const clearControl = resolveAllowClear(allowClear, true, t("dataEntry.treeSelect.clear"));
+  const showClear = clearControl.enabled && displayKeys.length > 0 && !disabled && !readOnly && !loading;
+  const surface = controlSurfaceAttrs({ variant, status, size });
   return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
     /* @__PURE__ */ jsxs("div", { className: "relative", children: [
       /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
@@ -186,125 +253,146 @@ function TreeSelectRoot({
           "aria-haspopup": "tree",
           "aria-controls": open ? treeId : void 0,
           ...fieldA11y,
+          ...surface,
+          "aria-invalid": resolveAriaInvalid(fieldA11y["aria-invalid"], status),
+          "aria-busy": loading || void 0,
+          "aria-readonly": readOnly || void 0,
           disabled,
           className: cn(
-            controlTriggerClass,
+            controlSurfaceTriggerClass,
             "w-full justify-between",
-            allowClear && displayKeys.length > 0 && !disabled && "ui-tree-select-trigger-affixed",
+            showClear && "ui-tree-select-trigger-affixed",
             !displayKeys.length && "text-muted-foreground",
             className
           ),
           children: [
             /* @__PURE__ */ jsx("span", { className: "truncate", children: displayKeys.length ? displayLabel : resolvedPlaceholder }),
-            /* @__PURE__ */ jsx("span", { className: "ms-2 flex shrink-0 items-center", children: !(allowClear && displayKeys.length > 0 && !disabled) && /* @__PURE__ */ jsx(ChevronsUpDown, { className: "ui-tree-select-chevron", "aria-hidden": "true" }) })
+            /* @__PURE__ */ jsx("span", { className: "ms-2 flex shrink-0 items-center", children: loading ? /* @__PURE__ */ jsx(
+              Loader2,
+              {
+                "data-slot": "tree-select-loading",
+                className: "ui-tree-select-chevron animate-spin",
+                "aria-hidden": "true"
+              }
+            ) : showClear ? null : /* @__PURE__ */ jsx(ChevronsUpDown, { className: "ui-tree-select-chevron", "aria-hidden": "true" }) })
           ]
         }
       ) }),
-      allowClear && displayKeys.length > 0 && !disabled && /* @__PURE__ */ jsx(
+      showClear && /* @__PURE__ */ jsx(
         "button",
         {
           type: "button",
-          "aria-label": t("dataEntry.treeSelect.clear"),
+          "aria-label": clearControl.label,
           className: "ui-tree-select-clear",
           onClick: clearValue,
-          children: /* @__PURE__ */ jsx(X, { className: "ui-control-affix-icon", "aria-hidden": "true" })
+          children: clearControl.clearIcon ?? /* @__PURE__ */ jsx(X, { className: "ui-control-affix-icon", "aria-hidden": "true" })
         }
-      )
+      ),
+      resolvedName ? selected.map((entry) => /* @__PURE__ */ jsx("input", { type: "hidden", name: resolvedName, value: entry, readOnly: true }, entry)) : null
     ] }),
     /* @__PURE__ */ jsxs(PopoverContent, { className: "ui-tree-select-popover", align: "start", children: [
-      showSearch && /* @__PURE__ */ jsx(Command, { shouldFilter: false, children: /* @__PURE__ */ jsx(
-        CommandInput,
-        {
-          placeholder: t("dataEntry.treeSelect.searchPlaceholder"),
-          value: search,
-          onValueChange: setSearch
-        }
-      ) }),
-      /* @__PURE__ */ jsx(ScrollArea, { className: "ui-tree-select-list", children: /* @__PURE__ */ jsx(
-        "div",
-        {
-          id: treeId,
-          role: "tree",
-          "aria-multiselectable": Boolean(checkable) || Boolean(multiple),
-          className: "ui-tree-select-panel",
-          children: visible.length === 0 ? /* @__PURE__ */ jsx("p", { className: "ui-tree-select-empty", children: t("dataEntry.treeSelect.empty") }) : visible.map(({ node, depth, hasChildren }) => {
-            const expanded = expandedKeys.has(node.value);
-            const isSelected = selected.includes(node.value);
-            return /* @__PURE__ */ jsxs(
-              "div",
-              {
-                ref: (el) => {
-                  treeItemRefs.current.set(node.value, el);
+      showSearch && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          SearchInput,
+          {
+            variant: "borderless",
+            ariaLabel: t("dataEntry.treeSelect.searchPlaceholder"),
+            placeholder: t("dataEntry.treeSelect.searchPlaceholder"),
+            value: search,
+            onValueChange: setSearch
+          }
+        ),
+        /* @__PURE__ */ jsx(Separator, {})
+      ] }),
+      /* @__PURE__ */ jsxs(ScrollArea, { className: "ui-tree-select-list", children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            id: treeId,
+            role: "tree",
+            "aria-multiselectable": Boolean(checkable) || Boolean(multiple),
+            className: "ui-tree-select-panel",
+            children: visible.map(({ node, depth, hasChildren }) => {
+              const expanded = showSearch && search.trim() ? hasChildren : expandedKeys.has(node.value);
+              const isSelected = selected.includes(node.value);
+              const expandable = hasChildren || Boolean(loadData && node.isLeaf === false && !node.children?.length);
+              return /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  ref: (el) => {
+                    treeItemRefs.current.set(node.value, el);
+                  },
+                  role: "treeitem",
+                  tabIndex: node.disabled ? -1 : rovingKey === node.value ? 0 : -1,
+                  "aria-expanded": expandable ? expanded : void 0,
+                  "aria-selected": isSelected,
+                  onFocus: () => setActiveKey(node.value),
+                  onKeyDown: (event) => onTreeItemKeyDown(event, node, expandable, expanded),
+                  "data-selected": isSelected ? "true" : "false",
+                  "data-disabled": node.disabled ? "" : void 0,
+                  className: "ui-tree-select-row ui-focus-ring",
+                  style: { "--tree-select-depth": depth },
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        type: "button",
+                        tabIndex: -1,
+                        "aria-label": expanded ? t("dataEntry.treeSelect.collapse") : t("dataEntry.treeSelect.expand"),
+                        "data-leaf": expandable ? void 0 : "",
+                        className: "ui-tree-select-toggle",
+                        onClick: () => toggleExpand(node),
+                        children: expanded ? /* @__PURE__ */ jsx(ChevronDown, { className: "ui-tree-select-toggle-icon", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "ui-tree-select-toggle-icon", "aria-hidden": "true" })
+                      }
+                    ),
+                    checkable ? (
+                      // The row must NOT WRAP the Checkbox in a `<label>`: the Checkbox is itself a
+                      // `<label>` around a real `<input>`, and a label nested in a label is
+                      // invalid HTML — the browser resolves neither, so the box loses its
+                      // accessible name. The node text sits BESIDE the box as a `for=`-associated
+                      // label instead, which both names it and keeps the text clickable.
+                      /* @__PURE__ */ jsxs("div", { className: "ui-tree-select-label", children: [
+                        /* @__PURE__ */ jsx(
+                          Checkbox,
+                          {
+                            id: `${treeId}-${node.value}-box`,
+                            checked: isSelected,
+                            tabIndex: -1,
+                            disabled: Boolean(node.disabled) || Boolean(node.disableCheckbox),
+                            onCheckedChange: () => toggleSelect(node),
+                            "aria-labelledby": `${treeId}-${node.value}-label`
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          "label",
+                          {
+                            className: "truncate",
+                            id: `${treeId}-${node.value}-label`,
+                            htmlFor: `${treeId}-${node.value}-box`,
+                            children: treeTitleRender ? treeTitleRender(node) : node.label
+                          }
+                        )
+                      ] })
+                    ) : /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        type: "button",
+                        tabIndex: -1,
+                        className: "flex-1 truncate text-start",
+                        disabled: node.disabled,
+                        onClick: () => toggleSelect(node),
+                        children: treeTitleRender ? treeTitleRender(node) : node.label
+                      }
+                    )
+                  ]
                 },
-                role: "treeitem",
-                tabIndex: node.disabled ? -1 : rovingKey === node.value ? 0 : -1,
-                "aria-expanded": hasChildren ? expanded : void 0,
-                "aria-selected": isSelected,
-                onFocus: () => setActiveKey(node.value),
-                onKeyDown: (event) => onTreeItemKeyDown(event, node, hasChildren, expanded),
-                "data-selected": isSelected ? "true" : "false",
-                "data-disabled": node.disabled ? "" : void 0,
-                className: "ui-tree-select-row ui-focus-ring",
-                style: { "--tree-select-depth": depth },
-                children: [
-                  /* @__PURE__ */ jsx(
-                    "button",
-                    {
-                      type: "button",
-                      tabIndex: -1,
-                      "aria-label": expanded ? t("dataEntry.treeSelect.collapse") : t("dataEntry.treeSelect.expand"),
-                      "data-leaf": hasChildren ? void 0 : "",
-                      className: "ui-tree-select-toggle",
-                      onClick: () => toggleExpand(node.value),
-                      children: expanded ? /* @__PURE__ */ jsx(ChevronDown, { className: "ui-tree-select-toggle-icon", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "ui-tree-select-toggle-icon", "aria-hidden": "true" })
-                    }
-                  ),
-                  checkable ? (
-                    // The row must NOT WRAP the Checkbox in a `<label>`: the Checkbox is itself a
-                    // `<label>` around a real `<input>`, and a label nested in a label is
-                    // invalid HTML — the browser resolves neither, so the box loses its
-                    // accessible name. The node text sits BESIDE the box as a `for=`-associated
-                    // label instead, which both names it and keeps the text clickable.
-                    /* @__PURE__ */ jsxs("div", { className: "ui-tree-select-label", children: [
-                      /* @__PURE__ */ jsx(
-                        Checkbox,
-                        {
-                          id: `${treeId}-${node.value}-box`,
-                          checked: isSelected,
-                          tabIndex: -1,
-                          disabled: Boolean(node.disabled) || Boolean(node.disableCheckbox),
-                          onCheckedChange: () => toggleSelect(node),
-                          "aria-labelledby": `${treeId}-${node.value}-label`
-                        }
-                      ),
-                      /* @__PURE__ */ jsx(
-                        "label",
-                        {
-                          className: "truncate",
-                          id: `${treeId}-${node.value}-label`,
-                          htmlFor: `${treeId}-${node.value}-box`,
-                          children: node.label
-                        }
-                      )
-                    ] })
-                  ) : /* @__PURE__ */ jsx(
-                    "button",
-                    {
-                      type: "button",
-                      tabIndex: -1,
-                      className: "flex-1 truncate text-start",
-                      disabled: node.disabled,
-                      onClick: () => toggleSelect(node),
-                      children: node.label
-                    }
-                  )
-                ]
-              },
-              node.value
-            );
-          })
-        }
-      ) })
+                node.value
+              );
+            })
+          }
+        ),
+        visible.length === 0 && /* @__PURE__ */ jsx("p", { role: "status", className: "ui-tree-select-empty", children: notFoundContent ?? t("dataEntry.treeSelect.empty") })
+      ] })
     ] })
   ] });
 }

package/dist/components/data-entry/tree-utils.js

@@ -108,21 +108,14 @@ function flattenVisibleTree(options, expandedKeys, depth = 0) {
 function filterVisibleTree(options, query) {
   const q = query.trim().toLowerCase();
   if (!q) return flattenVisibleTree(options, new Set(collectAllExpandableKeys(options)));
-  const expanded = /* @__PURE__ */ new Set();
-  function walk(nodes, depth) {
-    let branchMatch = false;
-    for (const node of nodes) {
-      const selfMatch = reactNodeText(node.label).toLowerCase().includes(q);
-      const childMatch = node.children?.length ? walk(node.children, depth + 1) : false;
-      if (selfMatch || childMatch) {
-        branchMatch = true;
-        if (childMatch) expanded.add(node.value);
-      }
-    }
-    return branchMatch;
+  function matches(nodes, depth) {
+    return nodes.flatMap((node) => {
+      const children = node.isLeaf ? [] : matches(node.children ?? [], depth + 1);
+      if (!reactNodeText(node.label).toLowerCase().includes(q) && children.length === 0) return [];
+      return [{ node, depth, hasChildren: children.length > 0 }, ...children];
+    });
   }
-  walk(options, 0);
-  return flattenVisibleTree(options, expanded);
+  return matches(options, 0);
 }
 function collectAllExpandableKeys(options) {
   const keys = [];

package/dist/components/data-entry/upload-files.d.ts

@@ -0,0 +1,2 @@
+/** Folder drops use entry readers because DataTransfer.files contains only the top-level items. */
+export declare function readDroppedFiles(transfer: DataTransfer, directory: boolean): Promise<File[]>;

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

@@ -0,0 +1,31 @@
+async function readDroppedFiles(transfer, directory) {
+  if (!directory || !transfer.items?.length) return Array.from(transfer.files);
+  const entries = Array.from(transfer.items).map((item) => item.webkitGetAsEntry?.()).filter((entry) => entry != null);
+  if (!entries.length) return Array.from(transfer.files);
+  const result = [];
+  const visit = async (entry, parent) => {
+    const path = parent ? `${parent}/${entry.name}` : entry.name;
+    if (entry.isFile) {
+      const file = await new Promise(
+        (resolve, reject) => entry.file(resolve, reject)
+      );
+      Object.defineProperty(file, "webkitRelativePath", { value: path, configurable: true });
+      result.push(file);
+      return;
+    }
+    if (!entry.isDirectory) return;
+    const reader = entry.createReader();
+    for (; ; ) {
+      const children = await new Promise(
+        (resolve, reject) => reader.readEntries(resolve, reject)
+      );
+      if (!children.length) break;
+      for (const child of children) await visit(child, path);
+    }
+  };
+  for (const entry of entries) await visit(entry, "");
+  return result;
+}
+export {
+  readDroppedFiles
+};

package/dist/components/data-entry/upload-request.d.ts

@@ -0,0 +1,4 @@
+import type { UploadProp } from "../../props/components/data-entry.prop.js";
+import type { UploadRequestContext, UploadResult } from "./upload-types.js";
+/** Default multipart transport. Custom storage protocols use onUpload with the same abort/progress contract. */
+export declare function uploadRequest(file: File, options: Pick<UploadProp, "action" | "method" | "headers" | "data" | "name" | "withCredentials">, context: UploadRequestContext): Promise<UploadResult>;

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

@@ -0,0 +1,53 @@
+async function uploadRequest(file, options, context) {
+  const action = typeof options.action === "function" ? await options.action(file) : options.action;
+  const data = typeof options.data === "function" ? await options.data(file) : options.data;
+  context.signal.throwIfAborted();
+  if (!action) throw new Error("Upload requires action or onUpload");
+  return new Promise((resolve, reject) => {
+    const xhr = new XMLHttpRequest();
+    const abort = () => xhr.abort();
+    const cleanup = () => context.signal.removeEventListener("abort", abort);
+    xhr.open(options.method ?? "POST", action);
+    xhr.withCredentials = options.withCredentials ?? false;
+    for (const [key, value] of Object.entries(options.headers ?? {}))
+      xhr.setRequestHeader(key, value);
+    xhr.upload.onprogress = (event) => {
+      if (event.lengthComputable) context.onProgress(event.loaded / event.total * 100);
+    };
+    xhr.onload = () => {
+      cleanup();
+      if (xhr.status < 200 || xhr.status >= 300) {
+        reject(new Error(`HTTP ${xhr.status}`));
+        return;
+      }
+      let response = xhr.responseText;
+      try {
+        response = JSON.parse(xhr.responseText);
+      } catch {
+      }
+      const result = response && typeof response === "object" ? response : {};
+      resolve({
+        response,
+        mediaId: typeof result.mediaId === "string" ? result.mediaId : void 0,
+        url: typeof result.url === "string" ? result.url : void 0,
+        previewUrl: typeof result.previewUrl === "string" ? result.previewUrl : void 0
+      });
+    };
+    xhr.onerror = () => {
+      cleanup();
+      reject(new Error("Network error"));
+    };
+    xhr.onabort = () => {
+      cleanup();
+      reject(new DOMException("Upload aborted", "AbortError"));
+    };
+    context.signal.addEventListener("abort", abort, { once: true });
+    const body = new FormData();
+    for (const [key, value] of Object.entries(data ?? {})) body.append(key, value);
+    body.append(options.name ?? "file", file, file.name);
+    xhr.send(body);
+  });
+}
+export {
+  uploadRequest
+};

package/dist/components/data-entry/upload-types.d.ts

@@ -12,6 +12,10 @@ export type UploadFileItem = {
     mediaId?: string;
     status: UploadFileStatus;
     error?: string;
+    percent?: number;
+    response?: unknown;
+    url?: string;
+    relativePath?: string;
     /** Local file before / during upload */
     file?: File;
     /** Undo clears this before save — media-service has no restore API. */
@@ -33,3 +37,27 @@ export type UploadCommitAction = {
 export declare function createUploadItem(file: File, partial?: Partial<UploadFileItem>): UploadFileItem;
 export declare function revokePreviewUrl(item: UploadFileItem | null | undefined): void;
 export declare function collectUploadCommitActions(items: UploadFileItem[]): UploadCommitAction;
+/** Returning this from beforeUpload excludes the file entirely. false keeps it staged. */
+export declare const UPLOAD_LIST_IGNORE: unique symbol;
+export type UploadRequestContext = {
+    signal: AbortSignal;
+    onProgress: (percent: number) => void;
+};
+export type UploadResult = {
+    mediaId?: string;
+    previewUrl?: string;
+    url?: string;
+    response?: unknown;
+};
+export type UploadRejection = {
+    file: File;
+    reason: "accept" | "size" | "count" | "beforeUpload";
+    error?: unknown;
+};
+export type UploadItemActions = {
+    remove: () => void;
+    preview: () => void;
+    download: () => void;
+    upload: () => void;
+    cancel: () => void;
+};

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

@@ -34,7 +34,9 @@ function collectUploadCommitActions(items) {
     promoteMediaIds: [...new Set(promoteMediaIds)]
   };
 }
+const UPLOAD_LIST_IGNORE = /* @__PURE__ */ Symbol("upload-list-ignore");
 export {
+  UPLOAD_LIST_IGNORE,
   collectUploadCommitActions,
   createUploadItem,
   revokePreviewUrl

package/dist/components/data-entry/upload.d.ts

@@ -2,6 +2,6 @@ import * as React from "react";
 import type { UploadProp } from "../../props/components/data-entry.prop.js";
 export type { UploadProp, UploadProp as UploadProps, UploadFileItemProp, UploadVariantProp, } from "../../props/components/data-entry.prop.js";
 export type { UploadFileItem, UploadVariant, UploadCommitAction } from "./upload-types.js";
-export { collectUploadCommitActions, createUploadItem } from "./upload-types.js";
+export { collectUploadCommitActions, createUploadItem, UPLOAD_LIST_IGNORE } from "./upload-types.js";
 export { useUploadDraft } from "./use-upload-draft.js";
-export declare function Upload({ variant, triggerSize, triggerVariant, value, defaultValue, onValueChange, accept: acceptProp, multiple: multipleProp, maxCount: maxCountProp, maxSizeBytes, disabled, removable, onUpload, id, className, children, ...ariaProps }: UploadProp): React.JSX.Element;
+export declare function Upload({ variant, triggerSize, triggerVariant, value, defaultValue, onValueChange, accept: acceptProp, multiple: multipleProp, maxCount: maxCountProp, maxSizeBytes, disabled: disabledProp, readOnly, directory, pastable, openFileDialogOnClick, name, action, method, headers, data, withCredentials, beforeUpload, onReject, onRemove, onPreview, onDownload, previewFile, onDrop, showUploadList, itemRender, removable, onUpload, id, className, children, ...ariaProps }: UploadProp): React.JSX.Element;