@spark-ui/components 11.6.0 → 11.6.1

package/dist/docgen.json

@@ -32253,6 +32253,16 @@
       }
     }
   },
+  "findFocusableElement": {
+    "tags": {
+      "param": "candidates - Array of candidate elements to check\ninputRef - Input element to use as last resort",
+      "returns": "The first focusable element, or null if none found"
+    },
+    "description": "Finds the first focusable element from a list of candidates\nFalls back to inputRef if no other element is focusable",
+    "displayName": "findFocusableElement",
+    "methods": [],
+    "props": {}
+  },
   "FormField": {
     "tags": {},
     "description": "",

package/dist/file-upload/index.js

@@ -159,6 +159,29 @@ function getFileIcon(file) {
   }
   return (0, import_react.createElement)(import_CvOutline.CvOutline);
 }
+function isFocusable(element) {
+  if (!element) {
+    return false;
+  }
+  const tabIndex = element.tabIndex;
+  if (tabIndex >= 0) {
+    return true;
+  }
+  const isContentEditable = String(element.contentEditable) === "true";
+  const naturallyFocusable = element instanceof HTMLInputElement || element instanceof HTMLButtonElement || element instanceof HTMLSelectElement || element instanceof HTMLTextAreaElement || element instanceof HTMLAnchorElement && Boolean(element.href) || isContentEditable;
+  return naturallyFocusable;
+}
+function findFocusableElement(candidates, inputRef) {
+  for (const candidate of candidates) {
+    if (isFocusable(candidate)) {
+      return candidate;
+    }
+  }
+  if (inputRef.current) {
+    return inputRef.current;
+  }
+  return null;
+}
 
 // src/file-upload/useFileUploadState.tsx
 function useFileUploadState({
@@ -371,6 +394,7 @@ var FileUpload = ({
   const triggerRef = (0, import_react3.useRef)(null);
   const dropzoneRef = (0, import_react3.useRef)(null);
   const deleteButtonRefs = (0, import_react3.useRef)([]);
+  const rejectedFileDeleteButtonRefs = (0, import_react3.useRef)([]);
   const disabled = field.disabled ?? disabledProp;
   const readOnly = field.readOnly ?? readOnlyProp;
   const {
@@ -401,6 +425,10 @@ var FileUpload = ({
     clearFilesFromHook();
     deleteButtonRefs.current = [];
   };
+  const clearRejectedFilesWithRefs = () => {
+    clearRejectedFiles();
+    rejectedFileDeleteButtonRefs.current = [];
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     FileUploadContext.Provider,
     {
@@ -412,10 +440,11 @@ var FileUpload = ({
         removeFile,
         removeRejectedFile,
         clearFiles,
-        clearRejectedFiles,
+        clearRejectedFiles: clearRejectedFilesWithRefs,
         triggerRef,
         dropzoneRef,
         deleteButtonRefs,
+        rejectedFileDeleteButtonRefs,
         multiple,
         maxFiles,
         maxFilesReached,
@@ -1706,7 +1735,16 @@ var ItemDeleteTrigger = ({
   onClick,
   ...props
 }) => {
-  const { removeFile, triggerRef, dropzoneRef, deleteButtonRefs, disabled, readOnly, files } = useFileUploadContext();
+  const {
+    removeFile,
+    triggerRef,
+    dropzoneRef,
+    deleteButtonRefs,
+    inputRef,
+    disabled,
+    readOnly,
+    files
+  } = useFileUploadContext();
   const buttonRef = (0, import_react10.useRef)(null);
   const fileIndex = files.findIndex((f) => f.name === file.name && f.size === file.size);
   const handleClick = (e) => {
@@ -1723,7 +1761,10 @@ var ItemDeleteTrigger = ({
           nextButton.focus();
         }
       } else {
-        const focusTarget = triggerRef.current || dropzoneRef.current;
+        const focusTarget = findFocusableElement(
+          [triggerRef.current, dropzoneRef.current],
+          inputRef
+        );
         if (focusTarget) {
           focusTarget.focus();
         }
@@ -1996,7 +2037,16 @@ var RejectedFileDeleteTrigger = ({
   onClick,
   ...props
 }) => {
-  const { removeRejectedFile, triggerRef, dropzoneRef, disabled, readOnly, rejectedFiles } = useFileUploadContext();
+  const {
+    removeRejectedFile,
+    triggerRef,
+    dropzoneRef,
+    rejectedFileDeleteButtonRefs,
+    inputRef,
+    disabled,
+    readOnly,
+    rejectedFiles
+  } = useFileUploadContext();
   const buttonRef = (0, import_react14.useRef)(null);
   const rejectedFileIndex = rejectedFiles.findIndex(
     (rf) => rf.file.name === rejectedFile.file.name && rf.file.size === rejectedFile.file.size
@@ -2006,18 +2056,43 @@ var RejectedFileDeleteTrigger = ({
       return;
     }
     removeRejectedFile(rejectedFileIndex);
-    setTimeout(() => {
-      const focusTarget = triggerRef.current || dropzoneRef.current;
-      if (focusTarget) {
-        focusTarget.focus();
+    requestAnimationFrame(() => {
+      const remainingButtons = rejectedFileDeleteButtonRefs.current.filter(Boolean);
+      if (remainingButtons.length > 0) {
+        const targetIndex = Math.min(rejectedFileIndex, remainingButtons.length - 1);
+        const nextButton = remainingButtons[targetIndex];
+        if (nextButton) {
+          nextButton.focus();
+        }
+      } else {
+        const focusTarget = findFocusableElement(
+          [triggerRef.current, dropzoneRef.current],
+          inputRef
+        );
+        if (focusTarget) {
+          focusTarget.focus();
+        }
       }
-    }, 0);
+    });
     onClick?.(e);
   };
+  const setRef = (node) => {
+    buttonRef.current = node;
+    if (node) {
+      while (rejectedFileDeleteButtonRefs.current.length <= rejectedFileIndex) {
+        rejectedFileDeleteButtonRefs.current.push(null);
+      }
+      rejectedFileDeleteButtonRefs.current[rejectedFileIndex] = node;
+    } else {
+      if (rejectedFileDeleteButtonRefs.current[rejectedFileIndex]) {
+        rejectedFileDeleteButtonRefs.current[rejectedFileIndex] = null;
+      }
+    }
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
     IconButton,
     {
-      ref: buttonRef,
+      ref: setRef,
       "data-spark-component": "file-upload-rejected-file-delete-trigger",
       className: (0, import_class_variance_authority13.cx)(className),
       onClick: handleClick,