Merge pull request #213 from Saifullah-dev/feat/178-onSelectionChange-callback

feat: add onSelectionChange callback for select and deselect events

Author: Saifullah-dev

README.md

@@ -0,0 +1,23 @@
+# [1.27.0](https://github.com/Saifullah-dev/react-file-manager/compare/v1.26.3...v1.27.0) (2025-09-12)
+
+### ✨ Features
+
+- **component:** add `onSelectionChange` callback to handle both select and deselect events
+  ([#213](https://github.com/Saifullah-dev/react-file-manager/pull/213))
+  - This callback now triggers for **both selecting and deselecting** files, providing a unified way
+    to react to any selection state change.
+
+### ⚠️ Deprecations
+
+- `onSelect` is now deprecated and will be removed in the next major release (`3.0.0`).
+
+  - Please migrate to `onSelectionChange`.
+  - Example:
+
+    ```tsx
+    // Before
+    <FileManager onSelect={(files) => console.log(files)} />
+
+    // After
+    <FileManager onSelectionChange={(files) => console.log(files)} />
+    ```

frontend/CHANGELOG.md

@@ -131,7 +131,7 @@ function App() {
     console.log("Copied Files", files);
   };
 
-  const handleSelect = (files) => {
+  const handleSelectionChange = (files) => {
     console.log("Selected Files", files);
   };
 
@@ -154,7 +154,7 @@ function App() {
           onLayoutChange={handleLayoutChange}
           onRefresh={handleRefresh}
           onFileOpen={handleFileOpen}
-          onSelect={handleSelect}
+          onSelectionChange={handleSelectionChange}
           onError={handleError}
           layout="grid"
           enableFilePreview

frontend/README.md

@@ -36,6 +36,7 @@ const FileManager = ({
   onFileOpen = () => {},
   onFolderChange = () => {},
   onSelect,
+  onSelectionChange,
   onError = () => {},
   layout = "grid",
   enableFilePreview = true,
@@ -75,7 +76,11 @@ const FileManager = ({
       <TranslationProvider language={language}>
         <FilesProvider filesData={files} onError={onError}>
           <FileNavigationProvider initialPath={initialPath} onFolderChange={onFolderChange}>
-            <SelectionProvider onDownload={onDownload} onSelect={onSelect}>
+            <SelectionProvider
+              onDownload={onDownload}
+              onSelect={onSelect}
+              onSelectionChange={onSelectionChange}
+            >
               <ClipBoardProvider onPaste={onPaste} onCut={onCut} onCopy={onCopy}>
                 <LayoutProvider layout={layout}>
                   <Toolbar
@@ -179,6 +184,7 @@ FileManager.propTypes = {
   onFileOpen: PropTypes.func,
   onFolderChange: PropTypes.func,
   onSelect: PropTypes.func,
+  onSelectionChange: PropTypes.func,
   onError: PropTypes.func,
   layout: PropTypes.oneOf(["grid", "list"]),
   maxFileSize: PropTypes.number,

frontend/src/App.jsx

@@ -3,13 +3,12 @@ import { validateApiCallback } from "../utils/validateApiCallback";
 
 const SelectionContext = createContext();
 
-export const SelectionProvider = ({ children, onDownload, onSelect }) => {
+export const SelectionProvider = ({ children, onDownload, onSelect, onSelectionChange }) => {
   const [selectedFiles, setSelectedFiles] = useState([]);
 
   useEffect(() => {
-    if (selectedFiles.length && onSelect) {
-      onSelect(selectedFiles);
-    }
+    onSelect?.(selectedFiles);
+    onSelectionChange?.(selectedFiles);
   }, [selectedFiles]);
 
   const handleDownload = () => {