@abhishekzambare/react-grid-dnd 0.0.4 → 0.0.6

package/dist/lib/GridContext.d.ts

@@ -0,0 +1,29 @@
+import { Bounds } from './use-measure';
+import { GridSettings, TraverseType } from './grid-types';
+import { ReactNode } from 'react';
+interface RegisterOptions extends Bounds {
+    /** The number of documents in each grid */
+    count: number;
+    /** grid info (boxes per row) */
+    grid: GridSettings;
+    /** whether the dropzone is disabled for dropping */
+    disableDrop: boolean;
+    remeasure: () => void;
+}
+interface GridContextType {
+    register: (id: string, options: RegisterOptions) => void;
+    remove: (id: string) => void;
+    measureAll: () => void;
+    getActiveDropId: (sourceId: string, x: number, y: number) => string | null;
+    startTraverse: (sourceId: string, targetId: string, x: number, y: number, sourceIndex: number) => void;
+    traverse: TraverseType | null;
+    endTraverse: () => void;
+    onChange: (sourceId: string, sourceIndex: number, targetIndex: number, targetId?: string) => void;
+}
+export declare const GridContext: import('react').Context<GridContextType>;
+interface GridContextProviderProps {
+    children: ReactNode;
+    onChange: (sourceId: string, sourceIndex: number, targetIndex: number, targetId?: string) => void;
+}
+export declare function GridContextProvider({ children, onChange, }: GridContextProviderProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/lib/GridDropZone.d.ts

@@ -0,0 +1,11 @@
+import * as React from "react";
+export interface GridDropZoneProps extends React.HTMLAttributes<HTMLDivElement> {
+    boxesPerRow: number;
+    rowHeight: number;
+    id: string;
+    children: React.ReactNode[];
+    disableDrag?: boolean;
+    disableDrop?: boolean;
+    style?: React.CSSProperties;
+}
+export declare function GridDropZone({ id, boxesPerRow, children, style, disableDrag, disableDrop, rowHeight, ...other }: GridDropZoneProps): import("react/jsx-runtime").JSX.Element;

package/dist/lib/GridItem.d.ts

@@ -0,0 +1 @@
+export declare function GridItem({ children, style, className, ...other }: any): import("react/jsx-runtime").JSX.Element;

package/dist/lib/GridItemContext.d.ts

@@ -0,0 +1,17 @@
+import { StateType } from './gesture-responder';
+import { GridSettings } from './grid-types';
+import * as React from "react";
+export interface GridItemContextType {
+    top: number;
+    disableDrag: boolean;
+    endTraverse: () => void;
+    mountWithTraverseTarget?: [number, number];
+    left: number;
+    i: number;
+    onMove: (state: StateType, x: number, y: number) => void;
+    onEnd: (state: StateType, x: number, y: number) => void;
+    onStart: () => void;
+    grid: GridSettings;
+    dragging: boolean;
+}
+export declare const GridItemContext: React.Context<GridItemContextType | null>;

package/dist/lib/gesture-responder.d.ts

@@ -0,0 +1,85 @@
+/**
+ * The responder takes its inspiration from react-native's
+ * pan-responder. Learn more about react-native's
+ * system here:
+ *
+ * https://facebook.github.io/react-native/docs/gesture-responder-system.html
+ *
+ * Basic usage:
+ *
+ * const bind = useGestureResponder({
+ *  onStartShouldSet: () => true,
+ *  onGrant: () => highlight(),
+ *  onMove: () => updatePosition(),
+ *  onRelease: () => unhighlight(),
+ *  onTerminate: () => unhighlight()
+ * })
+ *
+ * The main benefit this provides is the ability to reconcile
+ * multiple gestures, and give priority to one.
+ *
+ * You can use a combination of useStartShouldSet, useStartShouldSetCapture,
+ * onMoveShouldSetCapture, and onMoveShouldSet to dictate
+ * which gets priority.
+ *
+ * Typically you'd want to avoid capture since it's generally
+ * preferable to have child elements gain touch access.
+ */
+export type ResponderEvent = TouchEvent | MouseEvent | Event;
+export type CallbackQueryType = (state: StateType, e: ResponderEvent) => boolean;
+export type CallbackType = (state: StateType, e: ResponderEvent) => void;
+export interface Callbacks {
+    onStartShouldSetCapture?: CallbackQueryType;
+    onStartShouldSet?: CallbackQueryType;
+    onMoveShouldSetCapture?: CallbackQueryType;
+    onMoveShouldSet?: CallbackQueryType;
+    onGrant?: CallbackType;
+    onMove?: CallbackType;
+    onRelease?: CallbackType;
+    onTerminate?: (state: StateType, e?: ResponderEvent) => void;
+    onTerminationRequest?: (state: StateType, e?: ResponderEvent) => boolean;
+}
+export interface StateType {
+    time: number;
+    xy: [number, number];
+    delta: [number, number];
+    initial: [number, number];
+    previous: [number, number];
+    direction: [number, number];
+    initialDirection: [number, number];
+    local: [number, number];
+    lastLocal: [number, number];
+    velocity: number;
+    distance: number;
+}
+interface Config {
+    uid?: string;
+    enableMouse?: boolean;
+}
+export interface GrantedTouch {
+    id: string | number;
+    onTerminationRequest: (e?: ResponderEvent) => boolean;
+    onTerminate: (e?: ResponderEvent) => void;
+}
+export declare function useGestureResponder(options?: Callbacks, config?: Config): {
+    bind: {
+        onMouseDown: (e: MouseEvent) => void;
+        onMouseDownCapture: (e: MouseEvent) => void;
+        onTouchStart: (e: ResponderEvent) => void;
+        onTouchEnd: (e: ResponderEvent) => void;
+        onTouchMove: (e: ResponderEvent) => void;
+        onTouchStartCapture: (e: ResponderEvent) => void;
+        onTouchMoveCapture: (e: ResponderEvent) => void;
+    } | {
+        onMouseDown?: undefined;
+        onMouseDownCapture?: undefined;
+        onTouchStart: (e: ResponderEvent) => void;
+        onTouchEnd: (e: ResponderEvent) => void;
+        onTouchMove: (e: ResponderEvent) => void;
+        onTouchStartCapture: (e: ResponderEvent) => void;
+        onTouchMoveCapture: (e: ResponderEvent) => void;
+    };
+    terminateCurrentResponder: () => void;
+    getCurrentResponder: () => GrantedTouch | null;
+};
+export {};

package/dist/lib/grid-types.d.ts

@@ -0,0 +1,26 @@
+export interface GridSettings {
+    boxesPerRow: number;
+    rowHeight: number;
+    columnWidth: number;
+}
+export type ChildRender = (component: any, props: any, state: {
+    dragging: boolean;
+    disabled: boolean;
+    i: number;
+    grid: GridSettings;
+}) => React.ReactNode;
+/**
+ * A traverse captures information about dragging a grid item
+ * from one list to another.
+ */
+export interface TraverseType {
+    sourceId: string;
+    targetId: string;
+    rx: number;
+    ry: number;
+    tx: number;
+    ty: number;
+    sourceIndex: number;
+    targetIndex: number;
+    execute?: boolean;
+}

package/dist/lib/helpers.d.ts

@@ -0,0 +1,39 @@
+import { GridSettings } from './grid-types';
+/**
+ * Get the relative top, left position for a particular
+ * index in a grid
+ * @param i
+ * @param grid
+ * @param traverseIndex (destination for traverse)
+ */
+export declare function getPositionForIndex(i: number, { boxesPerRow, rowHeight, columnWidth }: GridSettings, traverseIndex?: number | false | null): {
+    xy: number[];
+};
+/**
+ * Get the active drag position given its initial
+ * coordinates and grid meta
+ * @param index
+ * @param grid
+ * @param dx
+ * @param dy
+ */
+export declare function getDragPosition(index: number, grid: GridSettings, dx: number, dy: number, center?: boolean): {
+    xy: number[];
+};
+/**
+ * Given relative coordinates, determine which index
+ * we are currently in
+ * @param x
+ * @param y
+ * @param param2
+ */
+export declare function getIndexFromCoordinates(x: number, y: number, { rowHeight, boxesPerRow, columnWidth }: GridSettings, count: number): number;
+/**
+ * Get the target index during a drag
+ * @param startIndex
+ * @param grid
+ * @param count
+ * @param dx
+ * @param dy
+ */
+export declare function getTargetIndex(startIndex: number, grid: GridSettings, count: number, dx: number, dy: number): number;

package/dist/lib/index.d.ts

@@ -0,0 +1,5 @@
+export * from './GridContext';
+export * from './GridDropZone';
+export * from './move';
+export * from './swap';
+export * from './GridItem';

package/dist/lib/move.d.ts

@@ -0,0 +1 @@
+export declare function move<T>(source: T[], destination: T[], droppableSource: number, droppableDestination: number): T[][];

package/dist/lib/swap.d.ts

@@ -0,0 +1 @@
+export declare function swap<T>(array: T[], moveIndex: number, toIndex: number): T[];

package/dist/lib/use-measure.d.ts

@@ -0,0 +1,13 @@
+import * as React from "react";
+export interface Bounds {
+    left: number;
+    height: number;
+    top: number;
+    right: number;
+    bottom: number;
+    width: number;
+}
+export declare function useMeasure(ref: React.RefObject<HTMLDivElement | null>): {
+    bounds: Bounds;
+    remeasure: () => void;
+};

package/dist/src/App.d.ts

@@ -0,0 +1,2 @@
+declare function App(): import("react/jsx-runtime").JSX.Element;
+export default App;

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@abhishekzambare/react-grid-dnd",
   "description": "grid style drag and drop for react",
+  "version": "0.0.6",
   "author": "Abhishek Zambare",
   "license": "MIT",
   "private": false,
@@ -23,7 +24,6 @@
       "require": "./dist/react-grid-dnd.umd.cjs"
     }
   },
-  "version": "0.0.4",
   "homepage": "https://github.com/Macintosh98/react-grid-dnd",
   "bugs": {
     "url": "https://github.com/Macintosh98/react-grid-dnd/issues"
@@ -41,12 +41,9 @@
   "dependencies": {
     "motion": "^12.38.0",
     "resize-observer-polyfill": "^1.5.1",
-    "uuid": "^14.0.0",
-    "vite-tsconfig-paths": "^6.1.1"
+    "uuid": "^14.0.0"
   },
   "devDependencies": {
-    "react": "^19.2.5",
-    "react-dom": "^19.2.5",
     "@babel/core": "^7.29.0",
     "@eslint/js": "^10.0.1",
     "@rolldown/plugin-babel": "^0.2.3",
@@ -60,9 +57,12 @@
     "eslint-plugin-react-hooks": "^7.1.1",
     "eslint-plugin-react-refresh": "^0.5.2",
     "globals": "^17.6.0",
+    "react": "^19.2.5",
+    "react-dom": "^19.2.5",
     "typescript": "~6.0.3",
     "typescript-eslint": "^8.59.1",
-    "vite": "^8.0.10"
+    "vite": "^8.0.10",
+    "vite-plugin-dts": "^5.0.0"
   },
   "peerDependencies": {
     "react": "^19",