@pie-lib/drag 4.0.7-next.58 → 4.1.0-next.40

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

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

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

@@ -1,90 +0,0 @@
-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,
-  onDragCancel,
-  collisionDetection,
-  modifiers,
-  autoScroll,
-  keyboardCoordinateGetter,
-  keyboardCodes,
-  accessibility,
-}) {
-  const [activeId, setActiveId] = useState(null);
-
-  // Only build a keyboard sensor options object when a consumer actually customizes
-  // it, so consumers that don't pass these props get dnd-kit's own defaults exactly
-  // as before (arrow-key nudging, Tab ends the drag, etc.).
-  const keyboardSensorOptions =
-    keyboardCoordinateGetter || keyboardCodes ? { coordinateGetter: keyboardCoordinateGetter, keyboardCodes } : undefined;
-
-  const sensors = useSensors(
-    useSensor(PointerSensor, { activationConstraint: { distance: 8 } }),
-    useSensor(KeyboardSensor, keyboardSensorOptions),
-  );
-
-  const handleDragStart = (event) => {
-    setActiveId(event.active.id);
-    if (onDragStart) {
-      onDragStart(event);
-    }
-  };
-
-  const handleDragEnd = (event) => {
-    setActiveId(null);
-    if (onDragEnd) {
-      onDragEnd(event);
-    }
-  };
-
-  const handleDragCancel = (event) => {
-    setActiveId(null);
-    if (onDragCancel) {
-      onDragCancel(event);
-    }
-  };
-
-  return (
-    <DndContext
-      sensors={sensors}
-      onDragStart={handleDragStart}
-      onDragEnd={handleDragEnd}
-      onDragCancel={handleDragCancel}
-      collisionDetection={collisionDetection}
-      modifiers={modifiers}
-      autoScroll={autoScroll}
-      accessibility={accessibility}
-    >
-      {children}
-    </DndContext>
-  );
-}
-
-DragProvider.propTypes = {
-  children: PropTypes.node.isRequired,
-  onDragEnd: PropTypes.func,
-  onDragStart: PropTypes.func,
-  onDragCancel: PropTypes.func,
-  collisionDetection: PropTypes.func,
-  modifiers: PropTypes.arrayOf(PropTypes.func),
-  autoScroll: PropTypes.object,
-  // Custom dnd-kit KeyboardSensor coordinateGetter (e.g. for Tab/Shift+Tab-based placement).
-  // Omit to keep dnd-kit's default keyboard-dragging behavior.
-  keyboardCoordinateGetter: PropTypes.func,
-  // Overrides for dnd-kit's KeyboardSensor keyboardCodes (start/cancel/end).
-  // Omit to keep dnd-kit's defaults.
-  keyboardCodes: PropTypes.shape({
-    start: PropTypes.arrayOf(PropTypes.string),
-    cancel: PropTypes.arrayOf(PropTypes.string),
-    end: PropTypes.arrayOf(PropTypes.string),
-  }),
-  // Passed straight through to dnd-kit's DndContext (screenReaderInstructions,
-  // announcements, container). Omit to keep dnd-kit's defaults.
-  accessibility: PropTypes.object,
-};
-
-export default DragProvider;

package/src/drag-type.js

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

package/src/draggable-choice.jsx

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

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

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

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

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

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