uikit-react-public 0.45.5 → 0.47.1

package/lib/hooks/useDropZone.ts

@@ -0,0 +1,418 @@
+import {
+  DragEvent,
+  HTMLAttributes,
+  KeyboardEvent,
+  Ref,
+  RefCallback,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+
+export const UIKIT_DND_DATA_TYPE = 'application/x-ucl-uikit-dnd';
+
+export type DropZoneAcceptedTypes = string | readonly string[];
+
+export type DropZoneRejectionReason = 'invalid-type' | 'cannot-drop';
+
+export interface DragData<TData = unknown> {
+  data: TData;
+  rawData?: string;
+  type: string;
+}
+
+export interface KeyboardDragData<TData = unknown> extends DragData<TData> {
+  id: string;
+  rawData: string;
+}
+
+export interface DropZoneDrop<TData = unknown> extends DragData<TData> {
+  dataTransfer: DataTransfer | null;
+  files: File[];
+  rawData: string;
+}
+
+export interface DropZoneRejection<TData = unknown> {
+  drop: DropZoneDrop<TData> | null;
+  reason: DropZoneRejectionReason;
+}
+
+export interface UseDropZoneOptions<TData = unknown> {
+  acceptedTypes?: DropZoneAcceptedTypes;
+  canDrop?: (drop: DropZoneDrop<TData>) => boolean;
+  disabled?: boolean;
+  dropEffect?: DataTransfer['dropEffect'];
+  keyboardDrop?: boolean;
+  onDrop?: (drop: DropZoneDrop<TData>, event: DropZoneEvent) => void;
+  onReject?: (
+    rejection: DropZoneRejection<TData>,
+    event: DropZoneEvent
+  ) => void;
+  parseData?: (rawData: string, type: string) => TData;
+}
+
+export type DropZoneEvent = DragEvent<HTMLElement> | KeyboardEvent<HTMLElement>;
+
+export interface DropZoneRootProps<
+  TElement extends HTMLElement,
+> extends HTMLAttributes<TElement> {
+  ref: RefCallback<TElement>;
+  'aria-disabled'?: boolean;
+  'data-drag-active': boolean;
+  'data-drag-accept': boolean;
+  'data-drag-reject': boolean;
+}
+
+export interface UseDropZoneReturn<TData = unknown> {
+  activeTypes: string[];
+  getRootProps: <TElement extends HTMLElement = HTMLDivElement>(
+    props?: HTMLAttributes<TElement> & { ref?: Ref<TElement> }
+  ) => DropZoneRootProps<TElement>;
+  isDragAccept: boolean;
+  isDragActive: boolean;
+  isDragReject: boolean;
+  lastDrop: DropZoneDrop<TData> | null;
+  lastRejection: DropZoneRejection<TData> | null;
+}
+
+const normalizeAcceptedTypes = (acceptedTypes?: DropZoneAcceptedTypes) => {
+  if (!acceptedTypes) return [];
+
+  const values =
+    typeof acceptedTypes === 'string'
+      ? acceptedTypes.split(',')
+      : Array.from(acceptedTypes);
+
+  return values.map((value) => value.trim()).filter(Boolean);
+};
+
+const getDataTransferTypes = (dataTransfer: DataTransfer) =>
+  Array.from(dataTransfer.types ?? []);
+
+const findDropType = (types: string[], acceptedTypes: string[]) => {
+  if (acceptedTypes.length === 0) {
+    return types[0] ?? null;
+  }
+
+  return acceptedTypes.find((type) => types.includes(type)) ?? null;
+};
+
+const parseDefaultData = (rawData: string) => {
+  if (!rawData) return rawData;
+
+  try {
+    return JSON.parse(rawData);
+  } catch {
+    return rawData;
+  }
+};
+
+const getDrop = <TData>(
+  dataTransfer: DataTransfer,
+  acceptedTypes: string[],
+  parseData?: (rawData: string, type: string) => TData
+): DropZoneDrop<TData> | null => {
+  const types = getDataTransferTypes(dataTransfer);
+  const type = findDropType(types, acceptedTypes);
+
+  if (!type) return null;
+
+  const rawData = type === 'Files' ? '' : dataTransfer.getData(type);
+  const data = parseData
+    ? parseData(rawData, type)
+    : (parseDefaultData(rawData) as TData);
+
+  return {
+    data,
+    dataTransfer,
+    files: Array.from(dataTransfer.files ?? []),
+    rawData,
+    type,
+  };
+};
+
+let activeKeyboardDrag: KeyboardDragData<unknown> | null = null;
+const keyboardDragListeners = new Set<() => void>();
+
+export const getActiveKeyboardDrag = () => activeKeyboardDrag;
+
+export const setActiveKeyboardDrag = (dragData: KeyboardDragData<unknown>) => {
+  activeKeyboardDrag = dragData;
+  keyboardDragListeners.forEach((listener) => listener());
+};
+
+export const clearActiveKeyboardDrag = () => {
+  activeKeyboardDrag = null;
+  keyboardDragListeners.forEach((listener) => listener());
+};
+
+export const subscribeToKeyboardDrag = (listener: () => void) => {
+  keyboardDragListeners.add(listener);
+
+  return () => {
+    keyboardDragListeners.delete(listener);
+  };
+};
+
+const setRef = <TValue>(ref: Ref<TValue> | undefined, value: TValue) => {
+  if (!ref) return;
+
+  if (typeof ref === 'function') {
+    ref(value);
+    return;
+  }
+
+  ref.current = value;
+};
+
+const useDropZone = <TData = unknown>({
+  acceptedTypes,
+  canDrop,
+  disabled = false,
+  dropEffect = 'move',
+  keyboardDrop = true,
+  onDrop: onDropCallback,
+  onReject,
+  parseData,
+}: UseDropZoneOptions<TData> = {}): UseDropZoneReturn<TData> => {
+  const rootRef = useRef<HTMLElement | null>(null);
+  const dragTargetsRef = useRef<EventTarget[]>([]);
+  const [activeTypes, setActiveTypes] = useState<string[]>([]);
+  const [isDragActive, setIsDragActive] = useState(false);
+  const [isDragAccept, setIsDragAccept] = useState(false);
+  const [isDragReject, setIsDragReject] = useState(false);
+  const [lastDrop, setLastDrop] = useState<DropZoneDrop<TData> | null>(null);
+  const [lastRejection, setLastRejection] =
+    useState<DropZoneRejection<TData> | null>(null);
+  const normalizedAcceptedTypes = useMemo(
+    () => normalizeAcceptedTypes(acceptedTypes),
+    [acceptedTypes]
+  );
+
+  const resetDragState = useCallback(() => {
+    dragTargetsRef.current = [];
+    setActiveTypes([]);
+    setIsDragActive(false);
+    setIsDragAccept(false);
+    setIsDragReject(false);
+  }, []);
+
+  useEffect(() => {
+    const syncKeyboardDragState = () => {
+      const keyboardDrag = getActiveKeyboardDrag();
+
+      if (!keyboardDrag || disabled || !keyboardDrop) {
+        resetDragState();
+        return;
+      }
+
+      const nextActiveTypes = [keyboardDrag.type];
+      const hasAcceptedType =
+        findDropType(nextActiveTypes, normalizedAcceptedTypes) !== null;
+
+      setActiveTypes(nextActiveTypes);
+      setIsDragActive(true);
+      setIsDragAccept(hasAcceptedType);
+      setIsDragReject(!hasAcceptedType);
+    };
+
+    syncKeyboardDragState();
+
+    return subscribeToKeyboardDrag(syncKeyboardDragState);
+  }, [disabled, keyboardDrop, normalizedAcceptedTypes, resetDragState]);
+
+  const processDrop = useCallback(
+    (drop: DropZoneDrop<TData> | null, event: DropZoneEvent) => {
+      if (!drop) {
+        const rejection = {
+          drop,
+          reason: 'invalid-type' as const,
+        };
+
+        setLastDrop(null);
+        setLastRejection(rejection);
+        onReject?.(rejection, event);
+        return;
+      }
+
+      if (canDrop && !canDrop(drop)) {
+        const rejection = {
+          drop,
+          reason: 'cannot-drop' as const,
+        };
+
+        setLastDrop(null);
+        setLastRejection(rejection);
+        onReject?.(rejection, event);
+        return;
+      }
+
+      setLastDrop(drop);
+      setLastRejection(null);
+      onDropCallback?.(drop, event);
+    },
+    [canDrop, onDropCallback, onReject]
+  );
+
+  const getRootProps = useCallback(
+    <TElement extends HTMLElement = HTMLDivElement>({
+      onDragEnter: userOnDragEnter,
+      onDragLeave: userOnDragLeave,
+      onDragOver: userOnDragOver,
+      onDrop: userOnDrop,
+      onKeyDown: userOnKeyDown,
+      ref: userRef,
+      tabIndex,
+      ...props
+    }: HTMLAttributes<TElement> & { ref?: Ref<TElement> } = {}) => {
+      const ref: RefCallback<TElement> = (element) => {
+        rootRef.current = element;
+        setRef(userRef, element);
+      };
+
+      const onDragEnter = (event: DragEvent<TElement>) => {
+        userOnDragEnter?.(event);
+        if (disabled || event.defaultPrevented) return;
+
+        event.preventDefault();
+
+        const nextActiveTypes = getDataTransferTypes(event.dataTransfer);
+        const hasAcceptedType =
+          findDropType(nextActiveTypes, normalizedAcceptedTypes) !== null;
+
+        dragTargetsRef.current = [...dragTargetsRef.current, event.target];
+        setActiveTypes(nextActiveTypes);
+        setIsDragActive(true);
+        setIsDragAccept(hasAcceptedType);
+        setIsDragReject(!hasAcceptedType);
+      };
+
+      const onDragOver = (event: DragEvent<TElement>) => {
+        userOnDragOver?.(event);
+        if (disabled || event.defaultPrevented) return;
+
+        event.preventDefault();
+        event.dataTransfer.dropEffect = dropEffect;
+      };
+
+      const onDragLeave = (event: DragEvent<TElement>) => {
+        userOnDragLeave?.(event);
+        if (disabled || event.defaultPrevented) return;
+
+        event.preventDefault();
+
+        dragTargetsRef.current = dragTargetsRef.current.filter(
+          (target) => target !== event.target
+        );
+
+        if (dragTargetsRef.current.length === 0) {
+          resetDragState();
+        }
+      };
+
+      const onDrop = (event: DragEvent<TElement>) => {
+        userOnDrop?.(event);
+        if (disabled || event.defaultPrevented) return;
+
+        event.preventDefault();
+        resetDragState();
+
+        processDrop(
+          getDrop(event.dataTransfer, normalizedAcceptedTypes, parseData),
+          event
+        );
+      };
+
+      const onKeyDown = (event: KeyboardEvent<TElement>) => {
+        const keyboardDrag = getActiveKeyboardDrag();
+
+        userOnKeyDown?.(event);
+        if (
+          disabled ||
+          !keyboardDrop ||
+          event.defaultPrevented ||
+          (event.key !== 'Enter' && event.key !== ' ')
+        ) {
+          return;
+        }
+
+        if (event.target !== event.currentTarget) return;
+
+        if (!keyboardDrag || getActiveKeyboardDrag()?.id !== keyboardDrag.id) {
+          return;
+        }
+
+        event.preventDefault();
+
+        const matchingType = findDropType(
+          [keyboardDrag.type],
+          normalizedAcceptedTypes
+        );
+
+        if (!matchingType) {
+          processDrop(null, event);
+          return;
+        }
+
+        const rawData = keyboardDrag.rawData ?? '';
+        const data = parseData
+          ? parseData(rawData, matchingType)
+          : (keyboardDrag.data as TData);
+
+        processDrop(
+          {
+            data,
+            dataTransfer: null,
+            files: [],
+            rawData,
+            type: matchingType,
+          },
+          event
+        );
+        clearActiveKeyboardDrag();
+        resetDragState();
+      };
+
+      return {
+        ...props,
+        ref,
+        tabIndex: disabled ? -1 : keyboardDrop ? (tabIndex ?? 0) : tabIndex,
+        'aria-disabled': disabled || undefined,
+        'data-drag-active': isDragActive,
+        'data-drag-accept': isDragAccept,
+        'data-drag-reject': isDragReject,
+        onDragEnter,
+        onDragLeave,
+        onDragOver,
+        onDrop,
+        onKeyDown,
+      };
+    },
+    [
+      disabled,
+      dropEffect,
+      isDragAccept,
+      isDragActive,
+      isDragReject,
+      keyboardDrop,
+      normalizedAcceptedTypes,
+      parseData,
+      processDrop,
+      resetDragState,
+    ]
+  );
+
+  return {
+    activeTypes,
+    getRootProps,
+    isDragAccept,
+    isDragActive,
+    isDragReject,
+    lastDrop,
+    lastRejection,
+  };
+};
+
+export default useDropZone;

package/package.json

@@ -2,7 +2,7 @@
   "name": "uikit-react-public",
   "private": false,
   "license": "UNLICENSED",
-  "version": "0.45.5",
+  "version": "0.47.1",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",