@pie-lib/drag 4.0.3-next.38 → 4.0.3-next.61

package/src/__tests__/uid-context.test.jsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { Provider as UidProvider, withUid } from '../uid-context';
+
+describe('uid-context', () => {
+  describe('withUid', () => {
+    it('provides uid to wrapped component', () => {
+      const TestComponent = ({ uid }) => <div data-testid="test-uid">{uid}</div>;
+      const WrappedComponent = withUid(TestComponent);
+
+      render(
+        <UidProvider value="test-uid-123">
+          <WrappedComponent />
+        </UidProvider>,
+      );
+
+      expect(screen.getByTestId('test-uid')).toHaveTextContent('test-uid-123');
+    });
+
+    it('passes through other props to wrapped component', () => {
+      const TestComponent = ({ uid, customProp }) => (
+        <div>
+          <span data-testid="uid">{uid}</span>
+          <span data-testid="custom">{customProp}</span>
+        </div>
+      );
+      const WrappedComponent = withUid(TestComponent);
+
+      render(
+        <UidProvider value="test-uid">
+          <WrappedComponent customProp="custom-value" />
+        </UidProvider>,
+      );
+
+      expect(screen.getByTestId('uid')).toHaveTextContent('test-uid');
+      expect(screen.getByTestId('custom')).toHaveTextContent('custom-value');
+    });
+  });
+
+  describe('UidProvider', () => {
+    it('provides uid context to children', () => {
+      const TestComponent = ({ uid }) => <div data-testid="uid-value">{uid}</div>;
+      const WrappedComponent = withUid(TestComponent);
+
+      render(
+        <UidProvider value="provider-uid">
+          <WrappedComponent />
+        </UidProvider>,
+      );
+
+      expect(screen.getByTestId('uid-value')).toHaveTextContent('provider-uid');
+    });
+  });
+});

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

@@ -0,0 +1,65 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import PlaceHolder from './placeholder';
+import { useDroppable } from '@dnd-kit/core';
+import { styled } from '@mui/material/styles';
+
+// With @dnd-kit, the drop logic is handled in the DragProvider's onDragEnd callback
+// This component now just wraps DroppablePlaceholder with drag-in-the-blank specific logic
+
+const DroppablePlaceholderContainer = styled('div')({
+  minHeight: '100px',
+});
+
+export function DragInTheBlankDroppable({
+  children,
+  disabled,
+  classes,
+  isVerticalPool,
+  minHeight,
+  instanceId,
+  ...rest
+}) {
+  // 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',
+    data: {
+      type: 'MaskBlank',
+      accepts: ['MaskBlank'],
+      id: 'drag-in-the-blank-droppable',
+      toChoiceBoard: true,
+      instanceId,
+    },
+  });
+
+  return (
+    <div ref={setNodeRef}>
+      <DroppablePlaceholderContainer>
+        <PlaceHolder
+          isOver={isOver}
+          choiceBoard={true}
+          className={classes}
+          isVerticalPool={isVerticalPool}
+          extraStyles={{
+            width: '100%',
+            minHeight: minHeight || 100,
+            height: 'auto',
+          }}
+        >
+          {children}
+        </PlaceHolder>
+      </DroppablePlaceholderContainer>
+    </div>
+  );
+}
+
+DragInTheBlankDroppable.propTypes = {
+  id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+  children: PropTypes.node,
+  disabled: PropTypes.bool,
+  onDrop: PropTypes.func,
+  instanceId: PropTypes.string,
+};
+
+export default DragInTheBlankDroppable;

package/src/drag-provider.jsx

@@ -0,0 +1,50 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+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),
+  );
+
+  const handleDragStart = (event) => {
+    setActiveId(event.active.id);
+    if (onDragStart) {
+      onDragStart(event);
+    }
+  };
+
+  const handleDragEnd = (event) => {
+    setActiveId(null);
+    if (onDragEnd) {
+      onDragEnd(event);
+    }
+  };
+
+  return (
+    <DndContext
+      sensors={sensors}
+      onDragStart={handleDragStart}
+      onDragEnd={handleDragEnd}
+      collisionDetection={collisionDetection}
+      modifiers={modifiers}
+      autoScroll={autoScroll}
+    >
+      {children}
+    </DndContext>
+  );
+}
+
+DragProvider.propTypes = {
+  children: PropTypes.node.isRequired,
+  onDragEnd: PropTypes.func,
+  onDragStart: PropTypes.func,
+  collisionDetection: PropTypes.func,
+  modifiers: PropTypes.arrayOf(PropTypes.func),
+  autoScroll: PropTypes.object,
+};
+
+export default DragProvider;

package/src/drag-type.js

@@ -0,0 +1,7 @@
+export default {
+  types: {
+    ica: 'dnd-kit-response',
+    ml: 'Answer',
+    db: 'MaskBlank',
+  },
+};

package/src/draggable-choice.jsx

@@ -0,0 +1,83 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { styled } from '@mui/material/styles';
+import { useDraggable } from '@dnd-kit/core';
+import { grey } from '@mui/material/colors';
+
+export const DRAG_TYPE = 'CHOICE';
+
+const StyledChoice = styled('div')(({ theme }) => ({
+  backgroundColor: theme.palette.background.paper,
+  border: `solid 1px ${grey[400]}`,
+  padding: theme.spacing(1),
+  minHeight: '30px',
+  minWidth: theme.spacing(20),
+  maxWidth: theme.spacing(75),
+  cursor: 'grab',
+  '& p': {
+    margin: 0,
+  },
+  '& p *': {
+    margin: 0,
+  },
+  '&:active': {
+    cursor: 'grabbing',
+  },
+}));
+
+export function DraggableChoice({
+  choice,
+  children,
+  className,
+  disabled,
+  category,
+  alternateResponseIndex,
+  choiceIndex,
+  onRemoveChoice,
+  type,
+  id,
+}) {
+  const { attributes, listeners, setNodeRef, isDragging } = useDraggable({
+    id: id || choice.id, // id to be used for dnd-kit
+    disabled: disabled,
+    categoryId: category?.id,
+    alternateResponseIndex,
+    data: {
+      id: choice.id,
+      value: choice.value,
+      choiceId: choice.id,
+      from: category?.id,
+      categoryId: category?.id,
+      alternateResponseIndex,
+      choiceIndex,
+      onRemoveChoice,
+      type,
+    },
+  });
+
+  return (
+    <StyledChoice ref={setNodeRef} className={className} isDragging={isDragging} {...attributes} {...listeners}>
+      {children}
+    </StyledChoice>
+  );
+}
+
+DraggableChoice.propTypes = {
+  choice: PropTypes.shape({
+    id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+    value: PropTypes.any,
+  }).isRequired,
+  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
+  className: PropTypes.string,
+  disabled: PropTypes.bool,
+  category: PropTypes.shape({
+    id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  }),
+  alternateResponseIndex: PropTypes.number,
+  choiceIndex: PropTypes.number,
+  onRemoveChoice: PropTypes.func,
+  type: PropTypes.string,
+  id: PropTypes.string,
+};
+
+export default DraggableChoice;

package/src/droppable-placeholder.jsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import PlaceHolder from './placeholder';
+import PropTypes from 'prop-types';
+import { useDroppable } from '@dnd-kit/core';
+
+const preventInteractionStyle = {
+  flex: 1,
+};
+
+export function DroppablePlaceholder({ id, children, disabled, classes, isVerticalPool, minHeight }) {
+  const { setNodeRef, isOver } = useDroppable({
+    id,
+    disabled,
+  });
+
+  return (
+    <div ref={setNodeRef} style={preventInteractionStyle}>
+      <PlaceHolder
+        disabled={disabled}
+        isOver={isOver}
+        choiceBoard={true}
+        className={classes}
+        isVerticalPool={isVerticalPool}
+        minHeight={minHeight}
+      >
+        {children}
+      </PlaceHolder>
+    </div>
+  );
+}
+
+DroppablePlaceholder.propTypes = {
+  id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
+  disabled: PropTypes.bool,
+  classes: PropTypes.object,
+  isVerticalPool: PropTypes.bool,
+  minHeight: PropTypes.number,
+};
+
+export default DroppablePlaceholder;

package/src/ica-dp.jsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+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 ICA specific logic
+
+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>
+  );
+}
+
+ICADroppable.propTypes = {
+  id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+  children: PropTypes.node,
+  disabled: PropTypes.bool,
+};
+
+export default ICADroppable;

package/src/index.js

@@ -0,0 +1,19 @@
+import PlaceHolder from './placeholder';
+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';
+import DragDroppablePlaceholder from './drag-in-the-blank-dp';
+import ICADroppablePlaceholder from './ica-dp';
+
+export {
+  PlaceHolder,
+  MatchDroppablePlaceholder,
+  DragDroppablePlaceholder,
+  ICADroppablePlaceholder,
+  DragProvider,
+  DraggableChoice,
+  swap,
+  uid,
+};

package/src/match-list-dp.jsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+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 }) {
+  // 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>
+  );
+}
+
+MatchListDroppable.propTypes = {
+  id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+  children: PropTypes.node,
+  disabled: PropTypes.bool,
+  onRemoveAnswer: PropTypes.func,
+};
+
+export default MatchListDroppable;

package/src/placeholder.jsx

@@ -0,0 +1,138 @@
+import React from 'react';
+import { styled } from '@mui/material/styles';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+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),
+    gridColumnGap: theme.spacing(1),
+    padding: theme.spacing(1),
+    border: `2px dashed ${color.black()}`,
+  },
+  '&.placeholderDisabled': {
+    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,
+    className,
+    isOver,
+    type,
+    grid,
+    disabled,
+    choiceBoard,
+    isCategorize,
+    isVerticalPool,
+    minHeight,
+    extraStyles,
+  } = props;
+
+  const names = classNames(
+    'placeholder',
+    disabled && 'placeholderDisabled',
+    isOver && 'over',
+    type,
+    className,
+  );
+
+  const style = {};
+
+  if (grid && grid.columns) {
+    style.gridTemplateColumns = `repeat(${grid.columns}, 1fr)`;
+  }
+
+  if (grid && grid.rows) {
+    const repeatValue = grid.rowsRepeatValue || '1fr';
+
+    style.gridTemplateRows = `repeat(${grid.rows}, ${repeatValue})`;
+  }
+
+  // The "type" is only sent through placement-ordering / placeholder
+  // It can be "choice" or "target"
+  // We apply a different style for the "choice" type
+  // For any other type, use a dashed black border and a white fill
+  if (type === 'choice') {
+    style.border = `1px solid ${color.borderLight()}`;
+    style.background = color.backgroundDark();
+  }
+
+  const boardStyle = isCategorize ? 'categorizeBoard' : 'board';
+
+  return (
+    <StyledPlaceholder
+      style={{ ...style, minHeight: minHeight, ...extraStyles }}
+      className={classNames(choiceBoard ? boardStyle : names, isVerticalPool && 'verticalPool')}
+    >
+      {children}
+    </StyledPlaceholder>
+  );
+};
+
+PlaceHolder.propTypes = {
+  choiceBoard: PropTypes.bool,
+  grid: PropTypes.shape({
+    columns: PropTypes.number,
+    rows: PropTypes.number,
+    // if a different value then 1fr is wanted
+    rowsRepeatValue: PropTypes.string,
+  }),
+  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
+  className: PropTypes.string,
+  isOver: PropTypes.bool,
+  index: PropTypes.number,
+  type: PropTypes.string,
+  disabled: PropTypes.bool,
+  isCategorize: PropTypes.bool,
+  isVerticalPool: PropTypes.bool,
+  minHeight: PropTypes.number,
+};
+
+export default PlaceHolder;

package/src/preview-component.jsx

@@ -0,0 +1,145 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { DragOverlay, useDndContext } from '@dnd-kit/core';
+import { color, PreviewPrompt } from '@pie-lib/render-ui';
+import { renderMath } from '@pie-lib/math-rendering';
+
+const styles = {
+  maskBlank: {
+    // this style is applied only on small screens and for touch devices when dragging, for drag-in-the-blank.
+    // It is styled to be identical to the drag-in-the-blank chip
+    backgroundColor: color.white(),
+    border: `1px solid ${color.text()}`,
+    color: color.text(),
+    alignItems: 'center',
+    display: 'inline-flex',
+    height: 'initial',
+    minHeight: '32px',
+    fontSize: 'inherit',
+    whiteSpace: 'pre-wrap',
+    maxWidth: '374px',
+    borderRadius: '3px',
+    padding: '12px',
+  },
+  ica: {
+    backgroundColor: color.background(),
+    border: `1px solid ${color.borderDark()}`,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    minHeight: '28px',
+    padding: '0 3px',
+    marginLeft: 2,
+    marginTop: 2,
+    width: 'fit-content',
+  },
+  categorize: {
+    color: color.text(),
+    backgroundColor: color.background(),
+    padding: '16px',
+    borderRadius: '4px',
+    border: '1px solid',
+  },
+  matchList: {
+    color: color.text(),
+    backgroundColor: color.background(),
+    padding: '10px',
+    boxSizing: 'border-box',
+    border: '1px solid #D1D1D1',
+  },
+  placementOrdering: {
+    padding: '10px',
+    boxSizing: 'border-box',
+    border: '1px solid #D1D1D1',
+    backgroundColor: color.background(),
+  },
+};
+
+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 dragData.choice?.value;
+    case 'dnd-kit-response':
+      return dragData.value;
+    case 'Answer':
+      return dragData.value;
+    case 'Tile':
+      return dragData.value;
+    case 'categorize':
+      return dragData.value;
+    default:
+      return dragData.value;
+  }
+};
+
+const getCustomStyle = (dragData) => {
+  if (!dragData) return {};
+
+  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 { active } = useDndContext();
+  const [zoomLevel, setZoomLevel] = useState(1);
+  const root = useRef(null);
+
+  const dragData = active?.data?.current;
+  const isActive = !!active;
+
+  useEffect(() => {
+    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);
+    }
+  }, [isActive, dragData]);
+
+  const customStyle = getCustomStyle(dragData);
+  const prompt = getPrompt(dragData);
+
+  return (
+    <DragOverlay>
+      {isActive && prompt && (
+        <div ref={root} style={customStyle}>
+          <PreviewPrompt className="prompt-label" prompt={prompt} tagName="span" />
+        </div>
+      )}
+    </DragOverlay>
+  );
+};
+
+export default PreviewComponent;

package/src/swap.js

@@ -0,0 +1,14 @@
+import { cloneDeep } from 'lodash-es';
+
+export default (arr, fromIndex, toIndex) => {
+  if (!arr || arr.length <= 1 || fromIndex === undefined || toIndex === undefined) {
+    throw new Error(`swap requires a non-empty array, fromIndex, toIndex: ${arr}, ${fromIndex} ${toIndex}`);
+  }
+
+  const update = cloneDeep(arr);
+  const tmp = arr[toIndex];
+  update[toIndex] = update[fromIndex];
+  update[fromIndex] = tmp;
+
+  return update;
+};

package/src/uid-context.js

@@ -0,0 +1,13 @@
+import React from 'react';
+
+const { Consumer, Provider } = React.createContext(-1);
+
+export { Provider, Consumer };
+
+export const generateId = () => (Math.random() * 1000001).toFixed(0);
+
+export const withUid = (Component) => {
+  const Wrapped = (props) => <Consumer>{(uid) => <Component {...props} uid={uid} />}</Consumer>;
+
+  return Wrapped;
+};