@pie-lib/drag 2.22.3-next.2 → 2.22.4-next.0

package/src/ica-dp.jsx

@@ -1,23 +1,25 @@
-import { DropTarget } from 'react-dnd';
+import React from 'react';
+import PropTypes from 'prop-types';
 import { DroppablePlaceholder } from './droppable-placeholder';
-import dragType from './drag-type';
 
-export const spec = {
-  canDrop: (props) => {
-    return !props.disabled;
-  },
-  drop: (props, monitor) => {
-    const item = monitor.getItem();
+// With @dnd-kit, the drop logic is handled in the DragProvider's onDragEnd callback
+// This component now just wraps DroppablePlaceholder with ICA specific logic
 
-    if (props.onRemoveAnswer) {
-      props.onRemoveAnswer(item);
-    }
-  },
-};
+export function ICADroppable({ id, children, disabled, ...rest }) {
+  // The actual drop handling will be managed by the parent component
+  // through the DragProvider's onDragEnd callback
+
+  return (
+    <DroppablePlaceholder id={id} disabled={disabled} {...rest}>
+      {children}
+    </DroppablePlaceholder>
+  );
+}
 
-const WithTarget = DropTarget(dragType.types.ica, spec, (connect, monitor) => ({
-  connectDropTarget: connect.dropTarget(),
-  isOver: monitor.isOver(),
-}))(DroppablePlaceholder);
+ICADroppable.propTypes = {
+  id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+  children: PropTypes.node,
+  disabled: PropTypes.bool,
+};
 
-export default WithTarget;
+export default ICADroppable;

package/src/index.js

@@ -1,8 +1,6 @@
-import { DragSource, DropTarget } from 'react-dnd';
-
 import PlaceHolder from './placeholder';
-import Choice from './choice';
-import withDragContext from './with-drag-context';
+import DraggableChoice   from './draggable-choice';
+import DragProvider from './drag-provider';
 import swap from './swap';
 import * as uid from './uid-context';
 import MatchDroppablePlaceholder from './match-list-dp';
@@ -14,10 +12,8 @@ export {
   MatchDroppablePlaceholder,
   DragDroppablePlaceholder,
   ICADroppablePlaceholder,
-  withDragContext,
-  Choice,
+  DragProvider,
+  DraggableChoice,
   swap,
   uid,
-  DragSource,
-  DropTarget,
 };

package/src/match-list-dp.jsx

@@ -1,23 +1,46 @@
-import { DropTarget } from 'react-dnd';
+import React from 'react';
+import PropTypes from 'prop-types';
 import { DroppablePlaceholder } from './droppable-placeholder';
-import dragType from './drag-type';
 
-export const spec = {
-  canDrop: (props) => {
-    return !props.disabled;
-  },
-  drop: (props, monitor) => {
-    const item = monitor.getItem();
+// 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
 
-    if (props.onRemoveAnswer) {
-      props.onRemoveAnswer(item.promptId);
-    }
-  },
-};
+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;
+  //     if (onRemoveAnswer) {
+  //       onRemoveAnswer(item.promptId);
+  //     }
+  //   }
+  // };
+  
+  return (
+    <DroppablePlaceholder
+      id={id}
+      disabled={disabled}
+      {...rest}
+    >
+      {children}
+    </DroppablePlaceholder>
+  );
+}
 
-const WithTarget = DropTarget(dragType.types.ml, spec, (connect, monitor) => ({
-  connectDropTarget: connect.dropTarget(),
-  isOver: monitor.isOver(),
-}))(DroppablePlaceholder);
+MatchListDroppable.propTypes = {
+  id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+  children: PropTypes.node,
+  disabled: PropTypes.bool,
+  onRemoveAnswer: PropTypes.func,
+};
 
-export default WithTarget;
+export default MatchListDroppable;

package/src/placeholder.jsx

@@ -1,14 +1,68 @@
 import React from 'react';
-import { withStyles } from '@material-ui/core/styles';
+import { styled } from '@mui/material/styles';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
-import grey from '@material-ui/core/colors/grey';
 import { color } from '@pie-lib/render-ui';
+import { grey } from '@mui/material/colors';
+
+const StyledPlaceholder = styled('div')(({ theme }) => ({
+  '&.placeholder': {
+    WebkitTouchCallout: 'none',
+    WebkitUserSelect: 'none',
+    KhtmlUserSelect: 'none',
+    MozUserSelect: 'none',
+    MsUserSelect: 'none',
+    userSelect: 'none',
+    width: '100%',
+    height: '100%',
+    background: color.white(),
+    transition: 'background-color 200ms linear, border-color 200ms linear',
+    boxSizing: 'border-box',
+    display: 'grid',
+    gridRowGap: `${theme.spacing(1)}px`,
+    gridColumnGap: `${theme.spacing(1)}px`,
+    padding: theme.spacing(1),
+    border: `2px dashed ${color.black()}`,
+  },
+  '&.disabled': {
+    boxShadow: 'none',
+    background: theme.palette.background.paper,
+  },
+  '&.over': {
+    border: `1px solid ${grey[500]}`,
+    backgroundColor: `${grey[300]}`,
+  },
+  '&.board': {
+    padding: theme.spacing(1),
+    display: 'flex',
+    flexWrap: 'wrap',
+    alignItems: 'center',
+    minHeight: '100px',
+    justifyContent: 'center',
+    overflow: 'hidden',
+    touchAction: 'none',
+    backgroundColor: color.backgroundDark(),
+  },
+  '&.categorizeBoard': {
+    padding: theme.spacing(0.5),
+    display: 'flex',
+    flexWrap: 'wrap',
+    alignItems: 'center',
+    minHeight: '100px',
+    justifyContent: 'center',
+    overflow: 'hidden',
+    touchAction: 'none',
+    backgroundColor: color.backgroundDark(),
+  },
+  '&.verticalPool': {
+    display: 'flex',
+    flexFlow: 'column wrap',
+  },
+}));
 
 export const PlaceHolder = (props) => {
   const {
     children,
-    classes,
     className,
     isOver,
     type,
@@ -18,13 +72,14 @@ export const PlaceHolder = (props) => {
     isCategorize,
     isVerticalPool,
     minHeight,
+    extraStyles
   } = props;
 
   const names = classNames(
-    classes.placeholder,
-    disabled && classes.disabled,
-    isOver && classes.over,
-    classes[type],
+    'placeholder',
+    disabled && 'disabled',
+    isOver && 'over',
+    type,
     className,
   );
 
@@ -49,24 +104,22 @@ export const PlaceHolder = (props) => {
     style.background = color.backgroundDark();
   }
 
-  const boardStyle = isCategorize ? classes.categorizeBoard : classes.board;
+  const boardStyle = isCategorize ? 'categorizeBoard' : 'board';
 
   return (
-    <div
-      style={{ ...style, minHeight: minHeight }}
+    <StyledPlaceholder
+      style={{ ...style, minHeight: minHeight, ...extraStyles }}
       className={classNames(
-        classes.noSelectStyles,
         choiceBoard ? boardStyle : names,
-        isVerticalPool && classes.verticalPool,
+        isVerticalPool && 'verticalPool',
       )}
     >
       {children}
-    </div>
+    </StyledPlaceholder>
   );
 };
 
 PlaceHolder.propTypes = {
-  classes: PropTypes.object.isRequired,
   choiceBoard: PropTypes.bool,
   grid: PropTypes.shape({
     columns: PropTypes.number,
@@ -85,61 +138,4 @@ PlaceHolder.propTypes = {
   minHeight: PropTypes.number,
 };
 
-const styles = (theme) => ({
-  noSelectStyles: {
-    WebkitTouchCallout: 'none',
-    WebkitUserSelect: 'none',
-    KhtmlUserSelect: 'none',
-    MozUserSelect: 'none',
-    MsUserSelect: 'none',
-    userSelect: 'none',
-  },
-  placeholder: {
-    width: '100%',
-    height: '100%',
-    background: color.white(),
-    transition: 'background-color 200ms linear, border-color 200ms linear',
-    boxSizing: 'border-box',
-    display: 'grid',
-    gridRowGap: `${theme.spacing.unit}px`,
-    gridColumnGap: `${theme.spacing.unit}px`,
-    padding: theme.spacing.unit * 1,
-    border: `2px dashed ${color.black()}`,
-  },
-  disabled: {
-    boxShadow: 'none',
-    background: theme.palette.background.paper,
-  },
-  over: {
-    border: `1px solid ${grey[500]}`,
-    backgroundColor: `${grey[300]}`,
-  },
-  board: {
-    padding: theme.spacing.unit,
-    display: 'flex',
-    flexWrap: 'wrap',
-    alignItems: 'center',
-    minHeight: '100px',
-    justifyContent: 'center',
-    overflow: 'hidden',
-    touchAction: 'none',
-    backgroundColor: color.backgroundDark(),
-  },
-  categorizeBoard: {
-    padding: theme.spacing.unit / 2,
-    display: 'flex',
-    flexWrap: 'wrap',
-    alignItems: 'center',
-    minHeight: '100px',
-    justifyContent: 'center',
-    overflow: 'hidden',
-    touchAction: 'none',
-    backgroundColor: color.backgroundDark(),
-  },
-  verticalPool: {
-    display: 'flex',
-    flexFlow: 'column wrap',
-  },
-});
-
-export default withStyles(styles)(PlaceHolder);
+export default PlaceHolder;

package/src/preview-component.jsx

@@ -1,5 +1,5 @@
-import React, { useEffect, useRef, useState, useCallback } from 'react';
-import { usePreview } from 'react-dnd-multi-backend';
+import React, { useEffect, useRef, useState } from 'react';
+import { DragOverlay, useDndContext } from '@dnd-kit/core';
 import { PreviewPrompt, color } from '@pie-lib/render-ui';
 import { renderMath } from '@pie-lib/math-rendering';
 
@@ -54,99 +54,91 @@ const styles = {
   },
 };
 
-const getPrompt = (itemType, item) => {
-  switch (itemType) {
-    // DRAG-IN-THE-BLANK
+const getPrompt = (dragData) => {
+  if (!dragData) return undefined;
+
+  // Handle different drag data structures based on the component type
+  if (dragData.choiceId) {
+    // DraggableChoice format
+    return dragData.value;
+  }
+  
+  // Legacy format support
+  switch (dragData.itemType) {
     case 'MaskBlank':
-      return item?.choice?.value;
-    // IMAGE-CLOZE-ASSOCIATION
-    case 'react-dnd-response':
-      return item?.value;
-    // MATCH-LIST
+      return dragData.choice?.value;
+    case 'dnd-kit-response':
+      return dragData.value;
     case 'Answer':
-      return item?.value;
-    // PLACEMENT-ORDERING
+      return dragData.value;
     case 'Tile':
-      return item?.value;
+      return dragData.value;
+    case 'categorize':
+      return dragData.value;
     default:
-      return item?.itemType === 'categorize' ? item?.value : undefined;
+      return dragData.value;
   }
 };
 
-const getCustomStyle = (itemType, item, touchPosition, style) => {
-  const transform = `translate(${touchPosition.x}px, ${touchPosition.y}px)`;
-  const top = style?.top || 0;
-  const left = style?.left || 0;
-  const position = style?.position || 'fixed';
+const getCustomStyle = (dragData) => {
+  if (!dragData) return {};
 
-  return {
-    position,
-    top,
-    left,
-    transform,
-    ...(itemType === 'MaskBlank' ? styles.maskBlank : {}),
-    ...(item?.itemType === 'categorize' ? styles.categorize : {}),
-    ...(itemType === 'Answer' ? styles.matchList : {}),
-    ...(itemType === 'Tile' ? styles.placementOrdering : {}),
-    ...(itemType === 'react-dnd-response' ? styles.ica : {}),
+  const baseStyle = {
+    cursor: 'grabbing',
+    opacity: 0.8,
+    transform: 'rotate(5deg)', // Slight rotation for visual feedback
   };
+
+  // Apply specific styles based on item type
+  if (dragData.itemType === 'MaskBlank') {
+    return { ...baseStyle, ...styles.maskBlank };
+  }
+  if (dragData.itemType === 'categorize') {
+    return { ...baseStyle, ...styles.categorize };
+  }
+  if (dragData.itemType === 'Answer') {
+    return { ...baseStyle, ...styles.matchList };
+  }
+  if (dragData.itemType === 'Tile') {
+    return { ...baseStyle, ...styles.placementOrdering };
+  }
+  if (dragData.itemType === 'dnd-kit-response') {
+    return { ...baseStyle, ...styles.ica };
+  }
+
+  // Default style for choice items
+  return { ...baseStyle, ...styles.categorize };
 };
 
 const PreviewComponent = () => {
-  const preview = usePreview();
-  const { itemType, item, style, display } = preview;
-  const [touchPosition, setTouchPosition] = useState({ x: 0, y: 0 });
+  const { active } = useDndContext();
   const [zoomLevel, setZoomLevel] = useState(1);
-
-  const handleTouchMove = useCallback(
-    (event) => {
-      if (event.touches.length > 0) {
-        const touch = event.touches[0];
-        const touchOffset = 1;
-        setTouchPosition({
-          x: (touch.clientX + touchOffset) / zoomLevel,
-          y: (touch.clientY + touchOffset) / zoomLevel,
-        });
-      }
-    },
-    [zoomLevel],
-  );
-
   const root = useRef(null);
 
+  const dragData = active?.data?.current;
+  const isActive = !!active;
+
   useEffect(() => {
-    if (display && root.current) {
+    if (isActive && root.current) {
       renderMath(root.current);
 
       // Adjusted for precise zoom level calculation in Online Testing, targeting the specific class pattern .asmt-zoomable.asmt-zoom-NR .asmt-question .padding
       const zoomAffectedElement = document.querySelector('.padding') || document.body;
-
       setZoomLevel(parseFloat(getComputedStyle(zoomAffectedElement).zoom) || 1);
     }
-  }, [display, item?.choice?.value, item?.value, itemType, item]);
-
-  useEffect(() => {
-    const touchMoveListener = (event) => handleTouchMove(event);
-    if (display) {
-      window.addEventListener('touchmove', touchMoveListener);
-    }
-    return () => {
-      window.removeEventListener('touchmove', touchMoveListener);
-    };
-  }, [display, handleTouchMove]);
-
-  if (!display) {
-    return null;
-  }
-
-  const customStyle = getCustomStyle(itemType, item, touchPosition, style);
+  }, [isActive, dragData]);
 
-  const prompt = getPrompt(itemType, item);
+  const customStyle = getCustomStyle(dragData);
+  const prompt = getPrompt(dragData);
 
   return (
-    <div ref={root} style={customStyle}>
-      <PreviewPrompt className="label" prompt={prompt} tagName="span" />
-    </div>
+    <DragOverlay>
+      {isActive && prompt && (
+        <div ref={root} style={customStyle}>
+          <PreviewPrompt className="label" prompt={prompt} tagName="span" />
+        </div>
+      )}
+    </DragOverlay>
   );
 };