fluid-dnd 1.1.2-beta.0 → 1.2.1-beta.0

package/README.md

@@ -16,7 +16,7 @@
 </div>
 
 Fluid DnD is a [**fluid**, **agnostic** and **versatil** drag and drop
-library for lists with support for Vue 3 and Svelte](https://fluid-dnd.netlify.app/). It's a**lightweight** tool ~7 Kb (gzip) with no depenencies.
+library for lists with support for Vue, react and Svelte](https://fluid-dnd.netlify.app/). It's a **lightweight** tool ~7 Kb (gzip) with no depenencies.
 
 <img src="https://github.com/user-attachments/assets/b350f9a4-7dd7-40ca-ae3f-ecca166a9081" width="100%"/>
 
@@ -56,6 +56,11 @@ library for lists with support for Vue 3 and Svelte](https://fluid-dnd.netlify.a
 - 🛠️ Edit the previous [here](https://codesandbox.io/s/nifty-hooks-5plkpl).
 - 📘 See others examples [here](https://fluid-dnd.netlify.app/example/vertical-list/single-vertical-list/).
 
+## 📚 Libraries Support
+- Vue >=3.0.0
+- React >= 18.0.0
+- Svelte >= 5.0.0
+
 ## 🤝 Contributing
 
 If you're interested in contributing to [fluid-dnd](https://github.com/carlosjorger/fluid-dnd), please read our contributing docs before submitting a pull request [CONTRIBUTING](./CONTRIBUTING.md).

package/dist/{HandlerPublisher-CAhfY7Ch.js → HandlerPublisher-CIc7wXW-.js}

@@ -1,7 +1,7 @@
 var d = Object.defineProperty;
 var e = (a, s, l) => s in a ? d(a, s, { enumerable: !0, configurable: !0, writable: !0, value: l }) : a[s] = l;
 var r = (a, s, l) => e(a, typeof s != "symbol" ? s + "" : s, l);
-import { a as h, t as n, G as t } from "./index-BnYdI35p.js";
+import { a as h, t as n, G as t } from "./index-BDu6-Hq8.js";
 class c {
   constructor() {
     r(this, "handlers");

package/dist/{HandlerPublisher-BttKXTeA.cjs → HandlerPublisher-DiGO5iOY.cjs}

@@ -1 +1 @@
-"use strict";var d=Object.defineProperty;var n=(e,s,l)=>s in e?d(e,s,{enumerable:!0,configurable:!0,writable:!0,value:l}):e[s]=l;var a=(e,s,l)=>n(e,typeof s!="symbol"?s+"":s,l);const r=require("./index-LwQqhkeh.cjs");class h{constructor(){a(this,"handlers");this.handlers=[]}addSubscriber(s){this.handlers.includes(s)||(this.handlers.push(s),r.addClass(s,r.GRAB_CLASS))}toggleGrabClass(s){for(const l of this.handlers)r.toggleClass(l,r.GRAB_CLASS,s)}}exports.HandlerPublisher=h;
+"use strict";var d=Object.defineProperty;var n=(e,s,l)=>s in e?d(e,s,{enumerable:!0,configurable:!0,writable:!0,value:l}):e[s]=l;var a=(e,s,l)=>n(e,typeof s!="symbol"?s+"":s,l);const r=require("./index-Tde6DOzb.cjs");class h{constructor(){a(this,"handlers");this.handlers=[]}addSubscriber(s){this.handlers.includes(s)||(this.handlers.push(s),r.addClass(s,r.GRAB_CLASS))}toggleGrabClass(s){for(const l of this.handlers)r.toggleClass(l,r.GRAB_CLASS,s)}}exports.HandlerPublisher=h;

package/dist/core/configHandler.d.ts

@@ -1,5 +1,6 @@
-import { ElementScroll } from "../../index";
-import { CoreConfig } from ".";
+import { ElementScroll } from '../../index';
+import { CoreConfig } from '.';
+
 export type DroppableConfig<T> = {
     droppable: HTMLElement;
     config: CoreConfig<T>;

package/dist/core/dragAndDrop.d.ts

@@ -1,4 +1,4 @@
-import { ListCondig } from ".";
-import { Config } from ".";
-import HandlerPublisher from "@/core/HandlerPublisher";
-export default function dragAndDrop<T>(listCondig: ListCondig<T>, handlerPublisher: HandlerPublisher, config?: Config<T>, indexAttr?: string): readonly [(index: number) => void, (index: number, value: T) => void, (parent: HTMLElement | undefined) => void];
+import { ListCondig, Config } from '.';
+import { default as HandlerPublisher } from './HandlerPublisher';
+
+export default function dragAndDrop<T>(listCondig: ListCondig<T>, handlerPublisher: HandlerPublisher, config?: Config<T>, indexAttr?: string, reactChildrenChanges?: Boolean): readonly [(index: number) => void, (index: number, value: T) => void, (parent: HTMLElement | null | undefined) => void];

package/dist/core/index.d.ts

@@ -4,13 +4,13 @@ export type DraggableElement = {
 } | {
     index: number;
 };
-export interface ListCondig<T> {
-    removeAtEvent: (index: number) => T | undefined;
-    insertEvent: (index: number, value: T) => void;
+export type ListCondig<T> = {
+    removeAtEvent: (index: number, sync?: boolean) => T | undefined;
+    insertEvent: (index: number, value: T, sync?: boolean) => void;
     getLength: () => number;
     getValue: (index: number) => T;
     insertToListEmpty: (config: CoreConfig<T>, index: number, value: T) => void;
-}
+};
 export type MapFrom<T> = (object: T, droppable: Element) => unknown;
 export interface DragStartEventData<T> {
     index: number;
@@ -95,8 +95,8 @@ export interface Config<T> {
  * @public
  */
 export type OnDropEvent = (source: DraggableElement, destination: DraggableElement) => void;
-export type OnRemoveAtEvent<T> = (index: number) => T | undefined;
-export type OnInsertEvent<T> = (index: number, value: T) => void;
+export type OnRemoveAtEvent<T> = (index: number, sync?: boolean) => T | undefined;
+export type OnInsertEvent<T> = (index: number, value: T, sync?: boolean) => void;
 export type OnGetLength = () => number;
 export type OnGetValue<T> = (index: number) => T;
 export type CoreConfig<T> = {

package/dist/core/useDraggable.d.ts

@@ -1,3 +1,4 @@
-import { CoreConfig } from ".";
-import HandlerPublisher from "./HandlerPublisher";
+import { CoreConfig } from '.';
+import { default as HandlerPublisher } from './HandlerPublisher';
+
 export default function useDraggable<T>(draggableElement: HTMLElement, index: number, config: CoreConfig<T>, parent: HTMLElement, handlerPublisher: HandlerPublisher): readonly [(targetIndex: number) => void, (targetIndex: number, value: T) => void];

package/dist/core/useDroppable.d.ts

@@ -1,3 +1,4 @@
-import { CoreConfig } from ".";
-import HandlerPublisher from "./HandlerPublisher";
+import { CoreConfig } from '.';
+import { default as HandlerPublisher } from './HandlerPublisher';
+
 export default function useDroppable<T>(coreConfig: CoreConfig<T>, handlerPublisher: HandlerPublisher, droppable?: HTMLElement, indexAttr?: string): readonly [((targetIndex: number) => void)[], ((targetIndex: number, value: T) => void)[]];

package/dist/core/utils/GetStyles.d.ts

@@ -1,5 +1,6 @@
-import { Direction } from "..";
-import { BeforeMargin, AfterMargin, BorderWidth, PaddingBefore, Before } from "../../../index";
+import { Direction } from '..';
+import { BeforeMargin, AfterMargin, BorderWidth, PaddingBefore, Before } from '../../../index';
+
 export declare const getWindowScroll: () => {
     scrollX: number;
     scrollY: number;

package/dist/core/utils/ParseStyles.d.ts

@@ -1,5 +1,6 @@
-import { GapStyle } from "../../../index";
-import { Direction } from "..";
+import { GapStyle } from '../../../index';
+import { Direction } from '..';
+
 export declare const getNumberFromPixels: (pixels: string | undefined) => number;
 export declare const computeGapPixels: (element: Element, gapType: GapStyle) => number;
 export declare const gapAndDisplayInformation: (element: Element | null, gapStyle: GapStyle) => [number, boolean];

package/dist/core/utils/SetStyles.d.ts

@@ -1,4 +1,5 @@
-import { DragMouseTouchEvent, fixedSize } from "../../../index";
+import { DragMouseTouchEvent, fixedSize } from '../../../index';
+
 type onTouchEvent = "ontouchstart" | "ontouchmove" | "ontouchend";
 declare const onMouseEvents: readonly ["onmouseup", "onmousedown", "onmousemove"];
 type onMouseEvent = (typeof onMouseEvents)[number];

package/dist/core/utils/SetTransform.d.ts

@@ -1,5 +1,6 @@
-import { DragMouseTouchEvent, TransformEvent } from "../../../index";
-import { Direction } from "..";
+import { DragMouseTouchEvent, TransformEvent } from '../../../index';
+import { Direction } from '..';
+
 export declare const useTransform: (draggedElement: HTMLElement) => readonly [(element: HTMLElement, parent: HTMLElement, pagePosition: {
     pageX: number;
     pageY: number;

package/dist/core/utils/config.d.ts

@@ -1,5 +1,5 @@
-import { ListCondig, MapFrom } from "..";
-import { Config, CoreConfig } from "..";
-import { DroppableConfig } from "../configHandler";
+import { ListCondig, MapFrom, Config, CoreConfig } from '..';
+import { DroppableConfig } from '../configHandler';
+
 export declare const getConfig: <T>(listCondig: ListCondig<T>, config?: Config<T>) => CoreConfig<T>;
 export declare const MapConfig: <T>(coreConfig: DroppableConfig<any>, mapFrom: MapFrom<T>) => CoreConfig<any>;

package/dist/core/utils/droppableConfigurator.d.ts

@@ -1,6 +1,7 @@
-import { DroppableConfig } from "../configHandler";
-import { DragMouseTouchEvent } from "../../../index";
-import { MapFrom } from "..";
+import { DroppableConfig } from '../configHandler';
+import { DragMouseTouchEvent } from '../../../index';
+import { MapFrom } from '..';
+
 export declare class DroppableConfigurator<T> {
     initial: DroppableConfig<any> | undefined;
     current: DroppableConfig<T> | undefined;

package/dist/core/utils/events/emitEvents.d.ts

@@ -1,11 +1,12 @@
-import { WindowScroll } from "../../../../index";
-import { CoreConfig } from "../..";
-import { DRAG_EVENT, START_DRAG_EVENT, START_DROP_EVENT } from "..";
-import { DroppableConfig } from "../../configHandler";
-import HandlerPublisher from '../../HandlerPublisher';
+import { WindowScroll } from '../../../../index';
+import { CoreConfig } from '../..';
+import { DRAG_EVENT, START_DRAG_EVENT, START_DROP_EVENT } from '..';
+import { DroppableConfig } from '../../configHandler';
+import { default as HandlerPublisher } from '../../HandlerPublisher';
+
 type DraggingEvent = typeof DRAG_EVENT | typeof START_DRAG_EVENT;
 type DragAndDropEvent = DraggingEvent | DropEvent;
 type DropEvent = "drop" | typeof START_DROP_EVENT;
 export default function useEmitEvents<T>(currentConfig: CoreConfig<T>, index: number, parent: HTMLElement, droppableGroupClass: string | null, handlerPublisher: HandlerPublisher, endDraggingAction: () => void): readonly [(draggedElement: HTMLElement, event: DragAndDropEvent, initialWindowScroll: WindowScroll, droppableConfig: DroppableConfig<T> | undefined, positionOnSourceDroppable?: number) => void, (targetIndex: number, draggedElement: HTMLElement, droppableConfig: DroppableConfig<T>, onFinishRemoveEvent: (element: HTMLElement) => void) => void, (targetIndex: number, draggedElement: HTMLElement, droppable: HTMLElement, value: T, startInserting: () => void) => void, (draggedElement: HTMLElement) => void, (element: Element, force: boolean) => void];
-export declare const insertToListEmpty: <T>(config: CoreConfig<T>, droppable: HTMLElement | undefined, targetIndex: number, value: T) => void;
+export declare const insertToListEmpty: <T>(config: CoreConfig<T>, droppable: HTMLElement | undefined | null, targetIndex: number, value: T) => void;
 export {};

package/dist/core/utils/scroll.d.ts

@@ -1,4 +1,5 @@
-import { ElementScroll } from "index";
-import { Direction } from "..";
+import { ElementScroll } from 'index';
+import { Direction } from '..';
+
 export declare const scrollByDirection: (element: HTMLElement, direction: Direction, scrollAmount: number) => void;
 export declare const scrollPercent: (direction: Direction, droppable: HTMLElement, droppableScroll: ElementScroll) => number;

package/dist/core/utils/tempChildren.d.ts

@@ -1,4 +1,5 @@
-import { DroppableConfig } from "../configHandler";
+import { DroppableConfig } from '../configHandler';
+
 export declare const isTempElement: (element: Node) => boolean;
 export declare const addTempChild: <T>(draggedElement: HTMLElement | undefined, parent: Element, ifStartDragging: boolean, droppableConfig?: DroppableConfig<T>, addingAnimationDuration?: number) => void;
 export declare const addTempChildOnInsert: <T>(draggedElement: HTMLElement | undefined, ifStartDragging: boolean, droppableConfig?: DroppableConfig<T>) => void;

package/dist/core/utils/translate/GetTranslateBeforeDropping.d.ts

@@ -1,5 +1,6 @@
-import { Direction } from "../..";
-import { Translate, WindowScroll } from "../../../../index";
+import { Direction } from '../..';
+import { Translate, WindowScroll } from '../../../../index';
+
 export default function getTranslateBeforeDropping(direction: Direction, siblings: Element[], sourceIndex: number, targetIndex: number, scroll: WindowScroll, previousScroll: {
     scrollLeft: number;
     scrollTop: number;

package/dist/core/utils/translate/GetTranslationByDraggingAndEvent.d.ts

@@ -1,5 +1,6 @@
-import { Direction } from "../..";
-import { DragAndDropEvent } from "..";
+import { Direction } from '../..';
+import { DragAndDropEvent } from '..';
+
 export default function getTranslationByDraggingAndEvent(current: HTMLElement, event: DragAndDropEvent, direction: Direction, droppable: HTMLElement, previousElement?: Element | null, nextElement?: Element | null): {
     height: number;
     width: number;

package/dist/index/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../index-LwQqhkeh.cjs");exports.dragAndDrop=e.dragAndDrop;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../index-Tde6DOzb.cjs");exports.dragAndDrop=e.dragAndDrop;

package/dist/index/index.mjs

@@ -1,4 +1,4 @@
-import { d as o } from "../index-BnYdI35p.js";
+import { d as o } from "../index-BDu6-Hq8.js";
 export {
   o as dragAndDrop
 };