@pie-lib/drag 3.1.1-next.0 → 3.1.1-next.1

package/src/drag-in-the-blank-dp.jsx

@@ -23,18 +23,18 @@ export function DragInTheBlankDroppable({
   // The actual drop handling will be managed by the parent component
   // through the DragProvider's onDragEnd callback
   const { setNodeRef, isOver } = useDroppable({
-     id: 'drag-in-the-blank-droppable',
+    id: 'drag-in-the-blank-droppable',
     data: {
       type: 'MaskBlank',
       accepts: ['MaskBlank'],
       id: 'drag-in-the-blank-droppable',
       toChoiceBoard: true,
-      instanceId
-    }
+      instanceId,
+    },
   });
 
   return (
-    <div ref={setNodeRef} >
+    <div ref={setNodeRef}>
       <DroppablePlaceholderContainer>
         <PlaceHolder
           isOver={isOver}

package/src/drag-provider.jsx

@@ -1,13 +1,13 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-import { DndContext, PointerSensor, KeyboardSensor, useSensor, useSensors } from '@dnd-kit/core';
+import { DndContext, KeyboardSensor, PointerSensor, useSensor, useSensors } from '@dnd-kit/core';
 
 export function DragProvider({ children, onDragEnd, onDragStart, collisionDetection, modifiers, autoScroll }) {
   const [activeId, setActiveId] = useState(null);
-  
+
   const sensors = useSensors(
-    useSensor(PointerSensor, { activationConstraint: { distance: 8 }}),
-    useSensor(KeyboardSensor)
+    useSensor(PointerSensor, { activationConstraint: { distance: 8 } }),
+    useSensor(KeyboardSensor),
   );
 
   const handleDragStart = (event) => {
@@ -25,8 +25,8 @@ export function DragProvider({ children, onDragEnd, onDragStart, collisionDetect
   };
 
   return (
-    <DndContext 
-      sensors={sensors} 
+    <DndContext
+      sensors={sensors}
       onDragStart={handleDragStart}
       onDragEnd={handleDragEnd}
       collisionDetection={collisionDetection}
@@ -47,4 +47,4 @@ DragProvider.propTypes = {
   autoScroll: PropTypes.object,
 };
 
-export default DragProvider;
+export default DragProvider;

package/src/draggable-choice.jsx

@@ -29,14 +29,9 @@ export function DraggableChoice({
   choiceIndex,
   onRemoveChoice,
   type,
-  id
+  id,
 }) {
-  const {
-    attributes,
-    listeners,
-    setNodeRef,
-    isDragging
-  } = useDraggable({
+  const { attributes, listeners, setNodeRef, isDragging } = useDraggable({
     id: id || choice.id, // id to be used for dnd-kit
     disabled: disabled,
     categoryId: category?.id,
@@ -50,18 +45,12 @@ export function DraggableChoice({
       alternateResponseIndex,
       choiceIndex,
       onRemoveChoice,
-      type
-    }
+      type,
+    },
   });
 
   return (
-    <StyledChoice
-      ref={setNodeRef}
-      className={className}
-      isDragging={isDragging}
-      {...attributes}
-      {...listeners}
-    >
+    <StyledChoice ref={setNodeRef} className={className} isDragging={isDragging} {...attributes} {...listeners}>
       {children}
     </StyledChoice>
   );

package/src/droppable-placeholder.jsx

@@ -7,17 +7,10 @@ const preventInteractionStyle = {
   flex: 1,
 };
 
-export function DroppablePlaceholder({ 
-  id,
-  children, 
-  disabled, 
-  classes, 
-  isVerticalPool, 
-  minHeight 
-}) {
-  const { setNodeRef, isOver } = useDroppable({ 
+export function DroppablePlaceholder({ id, children, disabled, classes, isVerticalPool, minHeight }) {
+  const { setNodeRef, isOver } = useDroppable({
     id,
-    disabled 
+    disabled,
   });
 
   return (

package/src/index.js

@@ -1,5 +1,5 @@
 import PlaceHolder from './placeholder';
-import DraggableChoice   from './draggable-choice';
+import DraggableChoice from './draggable-choice';
 import DragProvider from './drag-provider';
 import swap from './swap';
 import * as uid from './uid-context';

package/src/match-list-dp.jsx

@@ -5,17 +5,11 @@ import { DroppablePlaceholder } from './droppable-placeholder';
 // With @dnd-kit, the drop logic is handled in the DragProvider's onDragEnd callback
 // This component now just wraps DroppablePlaceholder with match-list specific logic
 
-export function MatchListDroppable({ 
-  id, 
-  children, 
-  disabled, 
-  onRemoveAnswer,
-  ...rest 
-}) {
+export function MatchListDroppable({ id, children, disabled, onRemoveAnswer, ...rest }) {
   // The actual drop handling will be managed by the parent component
   // through the DragProvider's onDragEnd callback
   // The onRemoveAnswer logic should be handled in the parent's onDragEnd:
-  // 
+  //
   // const handleDragEnd = (event) => {
   //   if (event.over && event.active) {
   //     const item = event.active.data.current;
@@ -24,13 +18,9 @@ export function MatchListDroppable({
   //     }
   //   }
   // };
-  
+
   return (
-    <DroppablePlaceholder
-      id={id}
-      disabled={disabled}
-      {...rest}
-    >
+    <DroppablePlaceholder id={id} disabled={disabled} {...rest}>
       {children}
     </DroppablePlaceholder>
   );

package/src/placeholder.jsx

@@ -72,16 +72,10 @@ export const PlaceHolder = (props) => {
     isCategorize,
     isVerticalPool,
     minHeight,
-    extraStyles
+    extraStyles,
   } = props;
 
-  const names = classNames(
-    'placeholder',
-    disabled && 'disabled',
-    isOver && 'over',
-    type,
-    className,
-  );
+  const names = classNames('placeholder', disabled && 'disabled', isOver && 'over', type, className);
 
   const style = {};
 
@@ -109,10 +103,7 @@ export const PlaceHolder = (props) => {
   return (
     <StyledPlaceholder
       style={{ ...style, minHeight: minHeight, ...extraStyles }}
-      className={classNames(
-        choiceBoard ? boardStyle : names,
-        isVerticalPool && 'verticalPool',
-      )}
+      className={classNames(choiceBoard ? boardStyle : names, isVerticalPool && 'verticalPool')}
     >
       {children}
     </StyledPlaceholder>

package/src/preview-component.jsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { DragOverlay, useDndContext } from '@dnd-kit/core';
-import { PreviewPrompt, color } from '@pie-lib/render-ui';
+import { color, PreviewPrompt } from '@pie-lib/render-ui';
 import { renderMath } from '@pie-lib/math-rendering';
 
 const styles = {

package/src/swap.js

@@ -1,4 +1,4 @@
-import cloneDeep from 'lodash/cloneDeep';
+import { cloneDeep } from 'lodash-es';
 
 export default (arr, fromIndex, toIndex) => {
   if (!arr || arr.length <= 1 || fromIndex === undefined || toIndex === undefined) {