@abhishekzambare/react-grid-dnd 0.0.6 → 0.0.8

package/dist/react-grid-dnd.d.ts

@@ -0,0 +1,85 @@
+import { Context } from 'react';
+import { JSX } from 'react/jsx-runtime';
+import * as React_2 from 'react';
+import { ReactNode } from 'react';
+
+declare interface Bounds {
+    left: number;
+    height: number;
+    top: number;
+    right: number;
+    bottom: number;
+    width: number;
+}
+
+export declare const GridContext: Context<GridContextType>;
+
+export declare function GridContextProvider({ children, onChange, }: GridContextProviderProps): JSX.Element;
+
+declare interface GridContextProviderProps {
+    children: ReactNode;
+    onChange: (sourceId: string, sourceIndex: number, targetIndex: number, targetId?: string) => void;
+}
+
+declare 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 function GridDropZone({ id, boxesPerRow, children, style, disableDrag, disableDrop, rowHeight, ...other }: GridDropZoneProps): JSX.Element;
+
+export declare interface GridDropZoneProps extends React_2.HTMLAttributes<HTMLDivElement> {
+    boxesPerRow: number;
+    rowHeight: number;
+    id: string;
+    children: React_2.ReactNode[];
+    disableDrag?: boolean;
+    disableDrop?: boolean;
+    style?: React_2.CSSProperties;
+}
+
+export declare function GridItem({ children, style, className, ...other }: any): JSX.Element;
+
+declare interface GridSettings {
+    boxesPerRow: number;
+    rowHeight: number;
+    columnWidth: number;
+}
+
+export declare function move<T>(source: T[], destination: T[], droppableSource: number, droppableDestination: number): T[][];
+
+declare 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;
+}
+
+export declare function swap<T>(array: T[], moveIndex: number, toIndex: number): T[];
+
+/**
+ * A traverse captures information about dragging a grid item
+ * from one list to another.
+ */
+declare interface TraverseType {
+    sourceId: string;
+    targetId: string;
+    rx: number;
+    ry: number;
+    tx: number;
+    ty: number;
+    sourceIndex: number;
+    targetIndex: number;
+    execute?: boolean;
+}
+
+export { }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@abhishekzambare/react-grid-dnd",
   "description": "grid style drag and drop for react",
-  "version": "0.0.6",
+  "version": "0.0.8",
   "author": "Abhishek Zambare",
   "license": "MIT",
   "private": false,
@@ -39,30 +39,34 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "motion": "^12.38.0",
+    "motion": "^12.40.0",
     "resize-observer-polyfill": "^1.5.1",
     "uuid": "^14.0.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.29.0",
+    "@babel/core": "^7.29.7",
     "@eslint/js": "^10.0.1",
+    "@microsoft/api-extractor": "^7.58.7",
     "@rolldown/plugin-babel": "^0.2.3",
     "@types/babel__core": "^7.20.5",
-    "@types/node": "^25.6.0",
-    "@types/react": "^19.2.14",
+    "@types/node": "^25.9.2",
+    "@types/react": "^19.2.17",
     "@types/react-dom": "^19.2.3",
-    "@vitejs/plugin-react": "^6.0.1",
+    "@vitejs/plugin-react": "^6.0.2",
     "babel-plugin-react-compiler": "^1.0.0",
-    "eslint": "^10.3.0",
+    "eslint": "^10.4.1",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-prettier": "^5.5.6",
     "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",
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7",
     "typescript": "~6.0.3",
-    "typescript-eslint": "^8.59.1",
-    "vite": "^8.0.10",
-    "vite-plugin-dts": "^5.0.0"
+    "typescript-eslint": "^8.60.1",
+    "unplugin-dts": "^1.0.2",
+    "vite": "^8.0.16",
+    "vite-plugin-checker": "^0.14.1"
   },
   "peerDependencies": {
     "react": "^19",

package/dist/lib/GridContext.d.ts

@@ -1,29 +0,0 @@
-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

@@ -1,11 +0,0 @@
-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

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

package/dist/lib/GridItemContext.d.ts

@@ -1,17 +0,0 @@
-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

@@ -1,85 +0,0 @@
-/**
- * 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

@@ -1,26 +0,0 @@
-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

@@ -1,39 +0,0 @@
-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

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

package/dist/lib/move.d.ts

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

package/dist/lib/swap.d.ts

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

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

@@ -1,13 +0,0 @@
-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

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