@pie-lib/mask-markup 2.2.0-next.4 → 2.2.0-next.6

package/CHANGELOG.md

@@ -3,6 +3,16 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.2.0-next.6](https://github.com/pie-framework/pie-lib/compare/@pie-lib/mask-markup@2.2.0-next.5...@pie-lib/mask-markup@2.2.0-next.6) (2026-02-25)
+
+**Note:** Version bump only for package @pie-lib/mask-markup
+
+# [2.2.0-next.5](https://github.com/pie-framework/pie-lib/compare/@pie-lib/mask-markup@2.2.0-next.4...@pie-lib/mask-markup@2.2.0-next.5) (2026-02-25)
+
+### Bug Fixes
+
+- **mask-markup:** enable snap back preview only for invalid drop zone PD-5495 ([c15ec83](https://github.com/pie-framework/pie-lib/commit/c15ec83c4d5e1076fc8a252418dc9c32f3216d97))
+
 # [2.2.0-next.4](https://github.com/pie-framework/pie-lib/compare/@pie-lib/mask-markup@2.2.0-next.3...@pie-lib/mask-markup@2.2.0-next.4) (2026-02-24)
 
 **Note:** Version bump only for package @pie-lib/mask-markup

package/lib/drag-in-the-blank.js

@@ -77,7 +77,8 @@ var DragInTheBlank = exports["default"] = /*#__PURE__*/function (_React$Componen
       var active = event.active;
       if (active !== null && active !== void 0 && (_active$data = active.data) !== null && _active$data !== void 0 && _active$data.current) {
         _this.setState({
-          activeDragItem: active.data.current
+          activeDragItem: active.data.current,
+          dropAnimation: undefined // default during drag
         });
       }
     });
@@ -94,43 +95,41 @@ var DragInTheBlank = exports["default"] = /*#__PURE__*/function (_React$Componen
       return null;
     });
     (0, _defineProperty2["default"])(_this, "handleDragEnd", function (event) {
-      var _dropData$accepts;
+      var _active$data2, _over$data, _dropData$accepts;
       var active = event.active,
         over = event.over;
       var _this$props = _this.props,
         onChange = _this$props.onChange,
         value = _this$props.value;
+      var draggedData = active === null || active === void 0 || (_active$data2 = active.data) === null || _active$data2 === void 0 ? void 0 : _active$data2.current;
+      var dropData = over === null || over === void 0 || (_over$data = over.data) === null || _over$data === void 0 ? void 0 : _over$data.current;
+      var isValidDrop = !!active && !!over && (draggedData === null || draggedData === void 0 ? void 0 : draggedData.type) === 'MaskBlank' && (dropData === null || dropData === void 0 || (_dropData$accepts = dropData.accepts) === null || _dropData$accepts === void 0 ? void 0 : _dropData$accepts.includes('MaskBlank'));
 
-      // Always reset the active drag item state, even if drop is invalid
+      // Only animate back when drop is invalid
       _this.setState({
-        activeDragItem: null
+        activeDragItem: null,
+        dropAnimation: isValidDrop ? null : undefined
       });
-      if (!over || !active || !onChange) {
-        return;
-      }
-      var draggedData = active.data.current;
-      var dropData = over.data.current;
-      if ((draggedData === null || draggedData === void 0 ? void 0 : draggedData.type) === 'MaskBlank' && dropData !== null && dropData !== void 0 && (_dropData$accepts = dropData.accepts) !== null && _dropData$accepts !== void 0 && _dropData$accepts.includes('MaskBlank')) {
-        var draggedItem = draggedData;
-        var targetId = dropData.id;
-        if (dropData.toChoiceBoard === true) {
-          if (!draggedItem.fromChoice && draggedItem.id) {
-            var newValue = _objectSpread({}, value);
-            delete newValue[draggedItem.id];
-            onChange(newValue);
-          }
-        } else if (draggedItem.fromChoice === true) {
-          if (targetId && targetId !== 'drag-in-the-blank-droppable') {
-            var _newValue = _objectSpread({}, value);
-            _newValue[targetId] = draggedItem.choice.id;
-            onChange(_newValue);
-          }
-        } else if (draggedItem.id && draggedItem.id !== targetId) {
-          var _newValue2 = _objectSpread({}, value);
-          _newValue2[targetId] = draggedItem.choice.id;
-          delete _newValue2[draggedItem.id];
-          onChange(_newValue2);
+      if (!isValidDrop || !onChange) return;
+      var draggedItem = draggedData;
+      var targetId = dropData.id;
+      if (dropData.toChoiceBoard === true) {
+        if (!draggedItem.fromChoice && draggedItem.id) {
+          var newValue = _objectSpread({}, value);
+          delete newValue[draggedItem.id];
+          onChange(newValue);
         }
+      } else if (draggedItem.fromChoice === true) {
+        if (targetId && targetId !== 'drag-in-the-blank-droppable') {
+          var _newValue = _objectSpread({}, value);
+          _newValue[targetId] = draggedItem.choice.id;
+          onChange(_newValue);
+        }
+      } else if (draggedItem.id && draggedItem.id !== targetId) {
+        var _newValue2 = _objectSpread({}, value);
+        _newValue2[targetId] = draggedItem.choice.id;
+        delete _newValue2[draggedItem.id];
+        onChange(_newValue2);
       }
     });
     (0, _defineProperty2["default"])(_this, "getPositionDirection", function (choicePosition) {
@@ -162,7 +161,8 @@ var DragInTheBlank = exports["default"] = /*#__PURE__*/function (_React$Componen
       };
     });
     _this.state = {
-      activeDragItem: null
+      activeDragItem: null,
+      dropAnimation: undefined
     };
     return _this;
   }
@@ -226,7 +226,8 @@ var DragInTheBlank = exports["default"] = /*#__PURE__*/function (_React$Componen
       }), /*#__PURE__*/_react["default"].createElement(_core.DragOverlay, {
         style: {
           pointerEvents: 'none'
-        }
+        },
+        dropAnimation: this.state.dropAnimation
       }, this.renderDragOverlay())));
     }
   }]);

package/lib/drag-in-the-blank.js.map

@@ -1 +1 @@
-{"version":3,"file":"drag-in-the-blank.js","names":["_react","_interopRequireDefault","require","_propTypes","_drag","_core","_choices","_choice","_blank","_withMask","_callSuper","t","o","e","_getPrototypeOf2","_possibleConstructorReturn2","_isNativeReflectConstruct","Reflect","construct","constructor","apply","Boolean","prototype","valueOf","call","ownKeys","r","Object","keys","getOwnPropertySymbols","filter","getOwnPropertyDescriptor","enumerable","push","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","defineProperty","Masked","withMask","props","node","data","onChange","_node$data","dataset","component","disabled","duplicates","correctResponse","feedback","showCorrectAnswer","emptyResponseAreaWidth","emptyResponseAreaHeight","instanceId","isDragging","choiceId","id","choice","choices","find","c","createElement","key","concat","type","correct","newData","undefined","DragInTheBlank","exports","_React$Component","_this","_classCallCheck2","event","_active$data","active","current","setState","activeDragItem","state","_dropData$accepts","over","_this$props","value","draggedData","dropData","accepts","includes","draggedItem","targetId","toChoiceBoard","fromChoice","newValue","choicePosition","flexDirection","justifyContent","alignItems","_inherits2","_createClass2","render","_this2","_this$props2","markup","choicesPosition","layout","style","display","minWidth","getPositionDirection","DragProvider","onDragStart","handleDragStart","onDragEnd","handleDragEnd","collisionDetection","rectIntersection","ref","rootRef","elementType","DragOverlay","pointerEvents","renderDragOverlay","React","Component","PropTypes","string","object","array","func","bool","oneOfType","number"],"sources":["../src/drag-in-the-blank.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { DragProvider } from '@pie-lib/drag';\nimport { DragOverlay, rectIntersection } from '@dnd-kit/core';\nimport Choices from './choices';\nimport Choice from './choices/choice';\nimport Blank from './components/blank';\nimport { withMask } from './with-mask';\n\nconst Masked = withMask('blank', (props) => (node, data, onChange) => {\n  const dataset = node.data?.dataset || {};\n  if (dataset.component === 'blank') {\n    // eslint-disable-next-line react/prop-types\n    const {\n      disabled,\n      duplicates,\n      correctResponse,\n      feedback,\n      showCorrectAnswer,\n      emptyResponseAreaWidth,\n      emptyResponseAreaHeight,\n      instanceId,\n      isDragging,\n    } = props;\n    const choiceId = showCorrectAnswer ? correctResponse[dataset.id] : data[dataset.id];\n    // eslint-disable-next-line react/prop-types\n    const choice = choiceId && props.choices.find((c) => c.id === choiceId);\n\n    return (\n      <Blank\n        key={`${node.type}-${dataset.id}`}\n        correct={showCorrectAnswer || (feedback && feedback[dataset.id])}\n        disabled={disabled}\n        duplicates={duplicates}\n        choice={choice}\n        id={dataset.id}\n        emptyResponseAreaWidth={emptyResponseAreaWidth}\n        emptyResponseAreaHeight={emptyResponseAreaHeight}\n        onChange={(id, choiceId) => {\n          const newData = { ...data };\n          if (choiceId === undefined) {\n            delete newData[id];\n          } else {\n            newData[id] = choiceId;\n          }\n          onChange(newData);\n        }}\n        instanceId={instanceId}\n        isDragging={isDragging}\n      />\n    );\n  }\n});\n\nexport default class DragInTheBlank extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      activeDragItem: null,\n    };\n  }\n\n  static propTypes = {\n    markup: PropTypes.string,\n    layout: PropTypes.object,\n    choicesPosition: PropTypes.string,\n    choices: PropTypes.array,\n    value: PropTypes.object,\n    onChange: PropTypes.func,\n    duplicates: PropTypes.bool,\n    disabled: PropTypes.bool,\n    feedback: PropTypes.object,\n    correctResponse: PropTypes.object,\n    showCorrectAnswer: PropTypes.bool,\n    emptyResponseAreaWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n    emptyResponseAreaHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n    instanceId: PropTypes.string,\n  };\n\n  static defaultProps = {\n    instanceId: 'drag-in-the-blank',\n  };\n\n  handleDragStart = (event) => {\n    const { active } = event;\n\n    if (active?.data?.current) {\n      this.setState({\n        activeDragItem: active.data.current,\n      });\n    }\n  };\n\n  renderDragOverlay = () => {\n    const { activeDragItem } = this.state;\n    if (!activeDragItem) return null;\n\n    if (activeDragItem.type === 'MaskBlank') {\n      return (\n        <Choice\n          disabled={activeDragItem.disabled}\n          choice={activeDragItem.choice}\n          instanceId={activeDragItem.instanceId}\n        />\n      );\n    }\n\n    return null;\n  };\n\n  handleDragEnd = (event) => {\n    const { active, over } = event;\n    const { onChange, value } = this.props;\n\n    // Always reset the active drag item state, even if drop is invalid\n    this.setState({ activeDragItem: null });\n\n    if (!over || !active || !onChange) {\n      return;\n    }\n\n    const draggedData = active.data.current;\n    const dropData = over.data.current;\n\n    if (draggedData?.type === 'MaskBlank' && dropData?.accepts?.includes('MaskBlank')) {\n      const draggedItem = draggedData;\n      const targetId = dropData.id;\n\n      if (dropData.toChoiceBoard === true) {\n        if (!draggedItem.fromChoice && draggedItem.id) {\n          const newValue = { ...value };\n          delete newValue[draggedItem.id];\n          onChange(newValue);\n        }\n      } else if (draggedItem.fromChoice === true) {\n        if (targetId && targetId !== 'drag-in-the-blank-droppable') {\n          const newValue = { ...value };\n          newValue[targetId] = draggedItem.choice.id;\n          onChange(newValue);\n        }\n      } else if (draggedItem.id && draggedItem.id !== targetId) {\n        const newValue = { ...value };\n        newValue[targetId] = draggedItem.choice.id;\n        delete newValue[draggedItem.id];\n        onChange(newValue);\n      }\n    }\n  };\n\n  getPositionDirection = (choicePosition) => {\n    let flexDirection;\n    let justifyContent;\n    let alignItems;\n\n    switch (choicePosition) {\n      case 'left':\n        flexDirection = 'row';\n        alignItems = 'center';\n        break;\n      case 'right':\n        flexDirection = 'row-reverse';\n        justifyContent = 'flex-end';\n        alignItems = 'center';\n        break;\n      case 'below':\n        flexDirection = 'column-reverse';\n        break;\n      default:\n        // above\n        flexDirection = 'column';\n        break;\n    }\n\n    return { flexDirection, justifyContent, alignItems };\n  };\n\n  render() {\n    const {\n      markup,\n      duplicates,\n      value,\n      onChange,\n      choicesPosition,\n      choices,\n      correctResponse,\n      disabled,\n      feedback,\n      showCorrectAnswer,\n      emptyResponseAreaWidth,\n      emptyResponseAreaHeight,\n      layout,\n      instanceId,\n    } = this.props;\n\n    const choicePosition = choicesPosition || 'below';\n    const style = { display: 'flex', minWidth: '100px', ...this.getPositionDirection(choicePosition) };\n\n    return (\n      <DragProvider\n        onDragStart={this.handleDragStart}\n        onDragEnd={this.handleDragEnd}\n        collisionDetection={rectIntersection}\n      >\n        <div ref={(ref) => (this.rootRef = ref)} style={style}>\n          <Choices\n            choicePosition={choicePosition}\n            choices={choices}\n            value={value}\n            duplicates={duplicates}\n            disabled={disabled}\n            instanceId={instanceId}\n          />\n          <Masked\n            elementType=\"drag-in-the-blank\"\n            markup={markup}\n            layout={layout}\n            value={value}\n            choices={choices}\n            onChange={onChange}\n            disabled={disabled}\n            duplicates={duplicates}\n            feedback={feedback}\n            correctResponse={correctResponse}\n            showCorrectAnswer={showCorrectAnswer}\n            emptyResponseAreaWidth={emptyResponseAreaWidth}\n            emptyResponseAreaHeight={emptyResponseAreaHeight}\n            instanceId={instanceId}\n            isDragging={!!this.state.activeDragItem}\n          />\n          <DragOverlay style={{ pointerEvents: 'none' }}>{this.renderDragOverlay()}</DragOverlay>\n        </div>\n      </DragProvider>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"drag-in-the-blank.js","names":["_react","_interopRequireDefault","require","_propTypes","_drag","_core","_choices","_choice","_blank","_withMask","_callSuper","t","o","e","_getPrototypeOf2","_possibleConstructorReturn2","_isNativeReflectConstruct","Reflect","construct","constructor","apply","Boolean","prototype","valueOf","call","ownKeys","r","Object","keys","getOwnPropertySymbols","filter","getOwnPropertyDescriptor","enumerable","push","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","defineProperty","Masked","withMask","props","node","data","onChange","_node$data","dataset","component","disabled","duplicates","correctResponse","feedback","showCorrectAnswer","emptyResponseAreaWidth","emptyResponseAreaHeight","instanceId","isDragging","choiceId","id","choice","choices","find","c","createElement","key","concat","type","correct","newData","undefined","DragInTheBlank","exports","_React$Component","_this","_classCallCheck2","event","_active$data","active","current","setState","activeDragItem","dropAnimation","state","_active$data2","_over$data","_dropData$accepts","over","_this$props","value","draggedData","dropData","isValidDrop","accepts","includes","draggedItem","targetId","toChoiceBoard","fromChoice","newValue","choicePosition","flexDirection","justifyContent","alignItems","_inherits2","_createClass2","render","_this2","_this$props2","markup","choicesPosition","layout","style","display","minWidth","getPositionDirection","DragProvider","onDragStart","handleDragStart","onDragEnd","handleDragEnd","collisionDetection","rectIntersection","ref","rootRef","elementType","DragOverlay","pointerEvents","renderDragOverlay","React","Component","PropTypes","string","object","array","func","bool","oneOfType","number"],"sources":["../src/drag-in-the-blank.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { DragProvider } from '@pie-lib/drag';\nimport { DragOverlay, rectIntersection } from '@dnd-kit/core';\nimport Choices from './choices';\nimport Choice from './choices/choice';\nimport Blank from './components/blank';\nimport { withMask } from './with-mask';\n\nconst Masked = withMask('blank', (props) => (node, data, onChange) => {\n  const dataset = node.data?.dataset || {};\n  if (dataset.component === 'blank') {\n    // eslint-disable-next-line react/prop-types\n    const {\n      disabled,\n      duplicates,\n      correctResponse,\n      feedback,\n      showCorrectAnswer,\n      emptyResponseAreaWidth,\n      emptyResponseAreaHeight,\n      instanceId,\n      isDragging,\n    } = props;\n    const choiceId = showCorrectAnswer ? correctResponse[dataset.id] : data[dataset.id];\n    // eslint-disable-next-line react/prop-types\n    const choice = choiceId && props.choices.find((c) => c.id === choiceId);\n\n    return (\n      <Blank\n        key={`${node.type}-${dataset.id}`}\n        correct={showCorrectAnswer || (feedback && feedback[dataset.id])}\n        disabled={disabled}\n        duplicates={duplicates}\n        choice={choice}\n        id={dataset.id}\n        emptyResponseAreaWidth={emptyResponseAreaWidth}\n        emptyResponseAreaHeight={emptyResponseAreaHeight}\n        onChange={(id, choiceId) => {\n          const newData = { ...data };\n          if (choiceId === undefined) {\n            delete newData[id];\n          } else {\n            newData[id] = choiceId;\n          }\n          onChange(newData);\n        }}\n        instanceId={instanceId}\n        isDragging={isDragging}\n      />\n    );\n  }\n});\n\nexport default class DragInTheBlank extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      activeDragItem: null,\n      dropAnimation: undefined,\n    };\n  }\n\n  static propTypes = {\n    markup: PropTypes.string,\n    layout: PropTypes.object,\n    choicesPosition: PropTypes.string,\n    choices: PropTypes.array,\n    value: PropTypes.object,\n    onChange: PropTypes.func,\n    duplicates: PropTypes.bool,\n    disabled: PropTypes.bool,\n    feedback: PropTypes.object,\n    correctResponse: PropTypes.object,\n    showCorrectAnswer: PropTypes.bool,\n    emptyResponseAreaWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n    emptyResponseAreaHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n    instanceId: PropTypes.string,\n  };\n\n  static defaultProps = {\n    instanceId: 'drag-in-the-blank',\n  };\n\n  handleDragStart = (event) => {\n    const { active } = event;\n\n    if (active?.data?.current) {\n      this.setState({\n        activeDragItem: active.data.current,\n        dropAnimation: undefined, // default during drag\n      });\n    }\n  };\n\n  renderDragOverlay = () => {\n    const { activeDragItem } = this.state;\n    if (!activeDragItem) return null;\n\n    if (activeDragItem.type === 'MaskBlank') {\n      return (\n        <Choice\n          disabled={activeDragItem.disabled}\n          choice={activeDragItem.choice}\n          instanceId={activeDragItem.instanceId}\n        />\n      );\n    }\n\n    return null;\n  };\n\n  handleDragEnd = (event) => {\n    const { active, over } = event;\n    const { onChange, value } = this.props;\n\n    const draggedData = active?.data?.current;\n    const dropData = over?.data?.current;\n\n    const isValidDrop =\n      !!active && !!over && draggedData?.type === 'MaskBlank' && dropData?.accepts?.includes('MaskBlank');\n\n    // Only animate back when drop is invalid\n    this.setState({\n      activeDragItem: null,\n      dropAnimation: isValidDrop ? null : undefined,\n    });\n\n    if (!isValidDrop || !onChange) return;\n\n    const draggedItem = draggedData;\n    const targetId = dropData.id;\n\n    if (dropData.toChoiceBoard === true) {\n      if (!draggedItem.fromChoice && draggedItem.id) {\n        const newValue = { ...value };\n        delete newValue[draggedItem.id];\n        onChange(newValue);\n      }\n    } else if (draggedItem.fromChoice === true) {\n      if (targetId && targetId !== 'drag-in-the-blank-droppable') {\n        const newValue = { ...value };\n        newValue[targetId] = draggedItem.choice.id;\n        onChange(newValue);\n      }\n    } else if (draggedItem.id && draggedItem.id !== targetId) {\n      const newValue = { ...value };\n      newValue[targetId] = draggedItem.choice.id;\n      delete newValue[draggedItem.id];\n      onChange(newValue);\n    }\n  };\n\n  getPositionDirection = (choicePosition) => {\n    let flexDirection;\n    let justifyContent;\n    let alignItems;\n\n    switch (choicePosition) {\n      case 'left':\n        flexDirection = 'row';\n        alignItems = 'center';\n        break;\n      case 'right':\n        flexDirection = 'row-reverse';\n        justifyContent = 'flex-end';\n        alignItems = 'center';\n        break;\n      case 'below':\n        flexDirection = 'column-reverse';\n        break;\n      default:\n        // above\n        flexDirection = 'column';\n        break;\n    }\n\n    return { flexDirection, justifyContent, alignItems };\n  };\n\n  render() {\n    const {\n      markup,\n      duplicates,\n      value,\n      onChange,\n      choicesPosition,\n      choices,\n      correctResponse,\n      disabled,\n      feedback,\n      showCorrectAnswer,\n      emptyResponseAreaWidth,\n      emptyResponseAreaHeight,\n      layout,\n      instanceId,\n    } = this.props;\n\n    const choicePosition = choicesPosition || 'below';\n    const style = { display: 'flex', minWidth: '100px', ...this.getPositionDirection(choicePosition) };\n\n    return (\n      <DragProvider\n        onDragStart={this.handleDragStart}\n        onDragEnd={this.handleDragEnd}\n        collisionDetection={rectIntersection}\n      >\n        <div ref={(ref) => (this.rootRef = ref)} style={style}>\n          <Choices\n            choicePosition={choicePosition}\n            choices={choices}\n            value={value}\n            duplicates={duplicates}\n            disabled={disabled}\n            instanceId={instanceId}\n          />\n          <Masked\n            elementType=\"drag-in-the-blank\"\n            markup={markup}\n            layout={layout}\n            value={value}\n            choices={choices}\n            onChange={onChange}\n            disabled={disabled}\n            duplicates={duplicates}\n            feedback={feedback}\n            correctResponse={correctResponse}\n            showCorrectAnswer={showCorrectAnswer}\n            emptyResponseAreaWidth={emptyResponseAreaWidth}\n            emptyResponseAreaHeight={emptyResponseAreaHeight}\n            instanceId={instanceId}\n            isDragging={!!this.state.activeDragItem}\n          />\n          <DragOverlay style={{ pointerEvents: 'none' }} dropAnimation={this.state.dropAnimation}>\n            {this.renderDragOverlay()}\n          </DragOverlay>\n        </div>\n      </DragProvider>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pie-lib/mask-markup",
-  "version": "2.2.0-next.4",
+  "version": "2.2.0-next.6",
   "description": "",
   "main": "lib/index.js",
   "module": "src/index.js",
@@ -14,7 +14,7 @@
     "@mui/icons-material": "^7.3.4",
     "@mui/material": "^7.3.4",
     "@pie-lib/drag": "^3.2.0-next.1",
-    "@pie-lib/editable-html-tip-tap": "^1.2.0-next.4",
+    "@pie-lib/editable-html-tip-tap": "^1.2.0-next.6",
     "@pie-lib/math-rendering": "^4.2.0-next.1",
     "@pie-lib/render-ui": "^5.2.0-next.1",
     "classnames": "^2.2.6",
@@ -28,5 +28,5 @@
   "keywords": [],
   "author": "",
   "license": "ISC",
-  "gitHead": "d42e2b81c672bd7847240d831747a5931953acff"
+  "gitHead": "be3f842524cc0aa3421fc0577c89063ea665a3be"
 }

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

@@ -57,6 +57,7 @@ export default class DragInTheBlank extends React.Component {
     super(props);
     this.state = {
       activeDragItem: null,
+      dropAnimation: undefined,
     };
   }
 
@@ -87,6 +88,7 @@ export default class DragInTheBlank extends React.Component {
     if (active?.data?.current) {
       this.setState({
         activeDragItem: active.data.current,
+        dropAnimation: undefined, // default during drag
       });
     }
   };
@@ -112,38 +114,40 @@ export default class DragInTheBlank extends React.Component {
     const { active, over } = event;
     const { onChange, value } = this.props;
 
-    // Always reset the active drag item state, even if drop is invalid
-    this.setState({ activeDragItem: null });
+    const draggedData = active?.data?.current;
+    const dropData = over?.data?.current;
 
-    if (!over || !active || !onChange) {
-      return;
-    }
+    const isValidDrop =
+      !!active && !!over && draggedData?.type === 'MaskBlank' && dropData?.accepts?.includes('MaskBlank');
+
+    // Only animate back when drop is invalid
+    this.setState({
+      activeDragItem: null,
+      dropAnimation: isValidDrop ? null : undefined,
+    });
+
+    if (!isValidDrop || !onChange) return;
+
+    const draggedItem = draggedData;
+    const targetId = dropData.id;
 
-    const draggedData = active.data.current;
-    const dropData = over.data.current;
-
-    if (draggedData?.type === 'MaskBlank' && dropData?.accepts?.includes('MaskBlank')) {
-      const draggedItem = draggedData;
-      const targetId = dropData.id;
-
-      if (dropData.toChoiceBoard === true) {
-        if (!draggedItem.fromChoice && draggedItem.id) {
-          const newValue = { ...value };
-          delete newValue[draggedItem.id];
-          onChange(newValue);
-        }
-      } else if (draggedItem.fromChoice === true) {
-        if (targetId && targetId !== 'drag-in-the-blank-droppable') {
-          const newValue = { ...value };
-          newValue[targetId] = draggedItem.choice.id;
-          onChange(newValue);
-        }
-      } else if (draggedItem.id && draggedItem.id !== targetId) {
+    if (dropData.toChoiceBoard === true) {
+      if (!draggedItem.fromChoice && draggedItem.id) {
         const newValue = { ...value };
-        newValue[targetId] = draggedItem.choice.id;
         delete newValue[draggedItem.id];
         onChange(newValue);
       }
+    } else if (draggedItem.fromChoice === true) {
+      if (targetId && targetId !== 'drag-in-the-blank-droppable') {
+        const newValue = { ...value };
+        newValue[targetId] = draggedItem.choice.id;
+        onChange(newValue);
+      }
+    } else if (draggedItem.id && draggedItem.id !== targetId) {
+      const newValue = { ...value };
+      newValue[targetId] = draggedItem.choice.id;
+      delete newValue[draggedItem.id];
+      onChange(newValue);
     }
   };
 
@@ -227,7 +231,9 @@ export default class DragInTheBlank extends React.Component {
             instanceId={instanceId}
             isDragging={!!this.state.activeDragItem}
           />
-          <DragOverlay style={{ pointerEvents: 'none' }}>{this.renderDragOverlay()}</DragOverlay>
+          <DragOverlay style={{ pointerEvents: 'none' }} dropAnimation={this.state.dropAnimation}>
+            {this.renderDragOverlay()}
+          </DragOverlay>
         </div>
       </DragProvider>
     );