#317 🧊 update jsdoc

Author: VLADISLAW9

packages/core/src/bundle/hooks/useDropZone/useDropZone.js

@@ -6,12 +6,46 @@ import { useRefState } from '../useRefState/useRefState';
  * @description - Hook that provides drop zone functionality
  * @category Elements
  *
+ * @overload
+ * @template Target The target element
+ * @param {Target} target The target element drop zone's
+ * @param {DataTypes} [options.dataTypes] The data types
+ * @param {boolean} [options.multiple] The multiple mode
+ * @param {(files: File[] | null, event: DragEvent) => void} [options.onDrop] The on drop callback function
+ * @param {(files: File[] | null, event: DragEvent) => void} [options.onEnter] The on enter callback function
+ * @param {(files: File[] | null, event: DragEvent) => void} [options.onLeave] The on leave callback function
+ * @param {(files: File[] | null, event: DragEvent) => void} [options.onOver] The on over callback function
+ * @returns {[boolean, File[] | null]} The object with drop zone states
  *
  * @example
- * const {ref, isOver} = useDropZone({onDrop})
+ * const {isOver, files} = useDropZone(ref, options);
+ *
+ * @overload
+ * @param {Target} target The target element drop zone's
+ * @param {(files: File[] | null, event: DragEvent) => void} [callback] The callback function to be invoked on drop
+ * @returns {[boolean, File[] | null]} The object with drop zone states
+ *
+ * @example
+ * const {isOver, files} = useDropZone(ref, () => console.log('callback'));
+ *
+ * @overload
+ * @param {DataTypes} [options.dataTypes] The data types
+ * @param {boolean} [options.multiple] The multiple mode
+ * @param {(files: File[] | null, event: DragEvent) => void} [options.onDrop] The on drop callback function
+ * @param {(files: File[] | null, event: DragEvent) => void} [options.onEnter] The on enter callback function
+ * @param {(files: File[] | null, event: DragEvent) => void} [options.onLeave] The on leave callback function
+ * @param {(files: File[] | null, event: DragEvent) => void} [options.onOver] The on over callback function
+ * @returns {[StateRef<Target>, boolean, File[] | null]} The object with drop zone states and ref
+ *
+ * @example
+ * const { ref, isOver, files } = useDropZone(options);
+ *
+ * @overload
+ * @param {(files: File[] | null, event: DragEvent) => void} [callback] The callback function to be invoked on drop
+ * @returns {[StateRef<Target>, boolean, File[] | null]} The object with drop zone states and ref
  *
  * @example
- * const { isOver } = useDropZone(ref, {onDrop});
+ * const { ref, isOver, files } = useDropZone(() => console.log('callback'));
  */
 export const useDropZone = (...params) => {
   const target = isTarget(params[0]) ? params[0] : undefined;

packages/core/src/hooks/useDropZone/useDropZone.ts

@@ -9,18 +9,27 @@ import type { StateRef } from '../useRefState/useRefState';
 import { useRefState } from '../useRefState/useRefState';
 
 type DragEventType = 'drop' | 'enter' | 'leave' | 'over';
+type DataTypes = ((types: string[]) => boolean) | string[];
 
 export interface UseDropZoneOptions {
-  dataTypes?: ((types: string[]) => boolean) | string[];
+  /** The data types for drop zone */
+  dataTypes?: DataTypes;
+  /** The multiple mode for drop zone */
   multiple?: boolean;
+  /** The on drop callback */
   onDrop?: (files: File[] | null, event: DragEvent) => void;
+  /** The on enter callback */
   onEnter?: (files: File[] | null, event: DragEvent) => void;
+  /** The on leave callback */
   onLeave?: (files: File[] | null, event: DragEvent) => void;
+  /** The on over callback */
   onOver?: (files: File[] | null, event: DragEvent) => void;
 }
 
-interface UseDropZoneReturn {
+export interface UseDropZoneReturn {
+  /** The files that was dropped in drop zone */
   files: File[] | null;
+  /** The boolean flag that indicate when drop zone is over */
   isOver: boolean;
 }
 
@@ -52,12 +61,46 @@ export interface UseDropZone {
  * @description - Hook that provides drop zone functionality
  * @category Elements
  *
+ * @overload
+ * @template Target The target element
+ * @param {Target} target The target element drop zone's
+ * @param {DataTypes} [options.dataTypes] The data types
+ * @param {boolean} [options.multiple] The multiple mode
+ * @param {(files: File[] | null, event: DragEvent) => void} [options.onDrop] The on drop callback function
+ * @param {(files: File[] | null, event: DragEvent) => void} [options.onEnter] The on enter callback function
+ * @param {(files: File[] | null, event: DragEvent) => void} [options.onLeave] The on leave callback function
+ * @param {(files: File[] | null, event: DragEvent) => void} [options.onOver] The on over callback function
+ * @returns {[boolean, File[] | null]} The object with drop zone states
  *
  * @example
- * const {ref, isOver} = useDropZone({onDrop})
+ * const {isOver, files} = useDropZone(ref, options);
+ *
+ * @overload
+ * @param {Target} target The target element drop zone's
+ * @param {(files: File[] | null, event: DragEvent) => void} [callback] The callback function to be invoked on drop
+ * @returns {[boolean, File[] | null]} The object with drop zone states
+ *
+ * @example
+ * const {isOver, files} = useDropZone(ref, () => console.log('callback'));
+ *
+ * @overload
+ * @param {DataTypes} [options.dataTypes] The data types
+ * @param {boolean} [options.multiple] The multiple mode
+ * @param {(files: File[] | null, event: DragEvent) => void} [options.onDrop] The on drop callback function
+ * @param {(files: File[] | null, event: DragEvent) => void} [options.onEnter] The on enter callback function
+ * @param {(files: File[] | null, event: DragEvent) => void} [options.onLeave] The on leave callback function
+ * @param {(files: File[] | null, event: DragEvent) => void} [options.onOver] The on over callback function
+ * @returns {[StateRef<Target>, boolean, File[] | null]} The object with drop zone states and ref
+ *
+ * @example
+ * const { ref, isOver, files } = useDropZone(options);
+ *
+ * @overload
+ * @param {(files: File[] | null, event: DragEvent) => void} [callback] The callback function to be invoked on drop
+ * @returns {[StateRef<Target>, boolean, File[] | null]} The object with drop zone states and ref
  *
  * @example
- * const { isOver } = useDropZone(ref, {onDrop});
+ * const { ref, isOver, files } = useDropZone(() => console.log('callback'));
  */
 
 export const useDropZone = ((...params: any[]) => {