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

package/lib/swap.js

@@ -1,25 +1,19 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-
 var _cloneDeep = _interopRequireDefault(require("lodash/cloneDeep"));
-
-var _default = function _default(arr, fromIndex, toIndex) {
+var _default = exports["default"] = function _default(arr, fromIndex, toIndex) {
   if (!arr || arr.length <= 1 || fromIndex === undefined || toIndex === undefined) {
     throw new Error("swap requires a non-empty array, fromIndex, toIndex: ".concat(arr, ", ").concat(fromIndex, " ").concat(toIndex));
   }
-
   var update = (0, _cloneDeep["default"])(arr);
   var tmp = arr[toIndex];
   update[toIndex] = update[fromIndex];
   update[fromIndex] = tmp;
   return update;
 };
-
-exports["default"] = _default;
-//# sourceMappingURL=swap.js.map
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJuYW1lcyI6WyJfY2xvbmVEZWVwIiwiX2ludGVyb3BSZXF1aXJlRGVmYXVsdCIsInJlcXVpcmUiLCJfZGVmYXVsdCIsImV4cG9ydHMiLCJhcnIiLCJmcm9tSW5kZXgiLCJ0b0luZGV4IiwibGVuZ3RoIiwidW5kZWZpbmVkIiwiRXJyb3IiLCJjb25jYXQiLCJ1cGRhdGUiLCJjbG9uZURlZXAiLCJ0bXAiXSwic291cmNlcyI6WyIuLi9zcmMvc3dhcC5qcyJdLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgY2xvbmVEZWVwIGZyb20gJ2xvZGFzaC9jbG9uZURlZXAnO1xuXG5leHBvcnQgZGVmYXVsdCAoYXJyLCBmcm9tSW5kZXgsIHRvSW5kZXgpID0+IHtcbiAgaWYgKCFhcnIgfHwgYXJyLmxlbmd0aCA8PSAxIHx8IGZyb21JbmRleCA9PT0gdW5kZWZpbmVkIHx8IHRvSW5kZXggPT09IHVuZGVmaW5lZCkge1xuICAgIHRocm93IG5ldyBFcnJvcihgc3dhcCByZXF1aXJlcyBhIG5vbi1lbXB0eSBhcnJheSwgZnJvbUluZGV4LCB0b0luZGV4OiAke2Fycn0sICR7ZnJvbUluZGV4fSAke3RvSW5kZXh9YCk7XG4gIH1cblxuICBjb25zdCB1cGRhdGUgPSBjbG9uZURlZXAoYXJyKTtcbiAgY29uc3QgdG1wID0gYXJyW3RvSW5kZXhdO1xuICB1cGRhdGVbdG9JbmRleF0gPSB1cGRhdGVbZnJvbUluZGV4XTtcbiAgdXBkYXRlW2Zyb21JbmRleF0gPSB0bXA7XG5cbiAgcmV0dXJuIHVwZGF0ZTtcbn07XG4iXSwibWFwcGluZ3MiOiI7Ozs7Ozs7QUFBQSxJQUFBQSxVQUFBLEdBQUFDLHNCQUFBLENBQUFDLE9BQUE7QUFBeUMsSUFBQUMsUUFBQSxHQUFBQyxPQUFBLGNBRTFCLFNBQUFELFNBQUNFLEdBQUcsRUFBRUMsU0FBUyxFQUFFQyxPQUFPLEVBQUs7RUFDMUMsSUFBSSxDQUFDRixHQUFHLElBQUlBLEdBQUcsQ0FBQ0csTUFBTSxJQUFJLENBQUMsSUFBSUYsU0FBUyxLQUFLRyxTQUFTLElBQUlGLE9BQU8sS0FBS0UsU0FBUyxFQUFFO0lBQy9FLE1BQU0sSUFBSUMsS0FBSyx5REFBQUMsTUFBQSxDQUF5RE4sR0FBRyxRQUFBTSxNQUFBLENBQUtMLFNBQVMsT0FBQUssTUFBQSxDQUFJSixPQUFPLENBQUUsQ0FBQztFQUN6RztFQUVBLElBQU1LLE1BQU0sR0FBRyxJQUFBQyxxQkFBUyxFQUFDUixHQUFHLENBQUM7RUFDN0IsSUFBTVMsR0FBRyxHQUFHVCxHQUFHLENBQUNFLE9BQU8sQ0FBQztFQUN4QkssTUFBTSxDQUFDTCxPQUFPLENBQUMsR0FBR0ssTUFBTSxDQUFDTixTQUFTLENBQUM7RUFDbkNNLE1BQU0sQ0FBQ04sU0FBUyxDQUFDLEdBQUdRLEdBQUc7RUFFdkIsT0FBT0YsTUFBTTtBQUNmLENBQUMiLCJpZ25vcmVMaXN0IjpbXX0=

package/lib/swap.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/swap.js"],"names":["arr","fromIndex","toIndex","length","undefined","Error","update","tmp"],"mappings":";;;;;;;;;AAAA;;eAEe,kBAACA,GAAD,EAAMC,SAAN,EAAiBC,OAAjB,EAA6B;AAC1C,MAAI,CAACF,GAAD,IAAQA,GAAG,CAACG,MAAJ,IAAc,CAAtB,IAA2BF,SAAS,KAAKG,SAAzC,IAAsDF,OAAO,KAAKE,SAAtE,EAAiF;AAC/E,UAAM,IAAIC,KAAJ,gEAAkEL,GAAlE,eAA0EC,SAA1E,cAAuFC,OAAvF,EAAN;AACD;;AAED,MAAMI,MAAM,GAAG,2BAAUN,GAAV,CAAf;AACA,MAAMO,GAAG,GAAGP,GAAG,CAACE,OAAD,CAAf;AACAI,EAAAA,MAAM,CAACJ,OAAD,CAAN,GAAkBI,MAAM,CAACL,SAAD,CAAxB;AACAK,EAAAA,MAAM,CAACL,SAAD,CAAN,GAAoBM,GAApB;AAEA,SAAOD,MAAP;AACD,C","sourcesContent":["import cloneDeep from 'lodash/cloneDeep';\n\nexport default (arr, fromIndex, toIndex) => {\n  if (!arr || arr.length <= 1 || fromIndex === undefined || toIndex === undefined) {\n    throw new Error(`swap requires a non-empty array, fromIndex, toIndex: ${arr}, ${fromIndex} ${toIndex}`);\n  }\n\n  const update = cloneDeep(arr);\n  const tmp = arr[toIndex];\n  update[toIndex] = update[fromIndex];\n  update[fromIndex] = tmp;\n\n  return update;\n};\n"],"file":"swap.js"}
+{"version":3,"file":"swap.js","names":["_cloneDeep","_interopRequireDefault","require","_default","exports","arr","fromIndex","toIndex","length","undefined","Error","concat","update","cloneDeep","tmp"],"sources":["../src/swap.js"],"sourcesContent":["import cloneDeep from 'lodash/cloneDeep';\n\nexport default (arr, fromIndex, toIndex) => {\n  if (!arr || arr.length <= 1 || fromIndex === undefined || toIndex === undefined) {\n    throw new Error(`swap requires a non-empty array, fromIndex, toIndex: ${arr}, ${fromIndex} ${toIndex}`);\n  }\n\n  const update = cloneDeep(arr);\n  const tmp = arr[toIndex];\n  update[toIndex] = update[fromIndex];\n  update[fromIndex] = tmp;\n\n  return update;\n};\n"],"mappings":";;;;;;;AAAA,IAAAA,UAAA,GAAAC,sBAAA,CAAAC,OAAA;AAAyC,IAAAC,QAAA,GAAAC,OAAA,cAE1B,SAAAD,SAACE,GAAG,EAAEC,SAAS,EAAEC,OAAO,EAAK;EAC1C,IAAI,CAACF,GAAG,IAAIA,GAAG,CAACG,MAAM,IAAI,CAAC,IAAIF,SAAS,KAAKG,SAAS,IAAIF,OAAO,KAAKE,SAAS,EAAE;IAC/E,MAAM,IAAIC,KAAK,yDAAAC,MAAA,CAAyDN,GAAG,QAAAM,MAAA,CAAKL,SAAS,OAAAK,MAAA,CAAIJ,OAAO,CAAE,CAAC;EACzG;EAEA,IAAMK,MAAM,GAAG,IAAAC,qBAAS,EAACR,GAAG,CAAC;EAC7B,IAAMS,GAAG,GAAGT,GAAG,CAACE,OAAO,CAAC;EACxBK,MAAM,CAACL,OAAO,CAAC,GAAGK,MAAM,CAACN,SAAS,CAAC;EACnCM,MAAM,CAACN,SAAS,CAAC,GAAGQ,GAAG;EAEvB,OAAOF,MAAM;AACf,CAAC","ignoreList":[]}

package/lib/uid-context.js

@@ -1,30 +1,19 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.withUid = exports.generateId = exports.Provider = exports.Consumer = void 0;
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _react = _interopRequireDefault(require("react"));
-
 var _React$createContext = /*#__PURE__*/_react["default"].createContext(-1),
-    Consumer = _React$createContext.Consumer,
-    Provider = _React$createContext.Provider;
-
-exports.Provider = Provider;
-exports.Consumer = Consumer;
-
-var generateId = function generateId() {
+  Consumer = exports.Consumer = _React$createContext.Consumer,
+  Provider = exports.Provider = _React$createContext.Provider;
+var generateId = exports.generateId = function generateId() {
   return (Math.random() * 1000001).toFixed(0);
 };
-
-exports.generateId = generateId;
-
-var withUid = function withUid(Component) {
+var withUid = exports.withUid = function withUid(Component) {
   var Wrapped = function Wrapped(props) {
     return /*#__PURE__*/_react["default"].createElement(Consumer, null, function (uid) {
       return /*#__PURE__*/_react["default"].createElement(Component, (0, _extends2["default"])({}, props, {
@@ -32,9 +21,6 @@ var withUid = function withUid(Component) {
       }));
     });
   };
-
   return Wrapped;
 };
-
-exports.withUid = withUid;
-//# sourceMappingURL=uid-context.js.map
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJuYW1lcyI6WyJfcmVhY3QiLCJfaW50ZXJvcFJlcXVpcmVEZWZhdWx0IiwicmVxdWlyZSIsIl9SZWFjdCRjcmVhdGVDb250ZXh0IiwiUmVhY3QiLCJjcmVhdGVDb250ZXh0IiwiQ29uc3VtZXIiLCJleHBvcnRzIiwiUHJvdmlkZXIiLCJnZW5lcmF0ZUlkIiwiTWF0aCIsInJhbmRvbSIsInRvRml4ZWQiLCJ3aXRoVWlkIiwiQ29tcG9uZW50IiwiV3JhcHBlZCIsInByb3BzIiwiY3JlYXRlRWxlbWVudCIsInVpZCIsIl9leHRlbmRzMiJdLCJzb3VyY2VzIjpbIi4uL3NyYy91aWQtY29udGV4dC5qcyJdLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgUmVhY3QgZnJvbSAncmVhY3QnO1xuXG5jb25zdCB7IENvbnN1bWVyLCBQcm92aWRlciB9ID0gUmVhY3QuY3JlYXRlQ29udGV4dCgtMSk7XG5cbmV4cG9ydCB7IFByb3ZpZGVyLCBDb25zdW1lciB9O1xuXG5leHBvcnQgY29uc3QgZ2VuZXJhdGVJZCA9ICgpID0+IChNYXRoLnJhbmRvbSgpICogMTAwMDAwMSkudG9GaXhlZCgwKTtcblxuZXhwb3J0IGNvbnN0IHdpdGhVaWQgPSAoQ29tcG9uZW50KSA9PiB7XG4gIGNvbnN0IFdyYXBwZWQgPSAocHJvcHMpID0+IDxDb25zdW1lcj57KHVpZCkgPT4gPENvbXBvbmVudCB7Li4ucHJvcHN9IHVpZD17dWlkfSAvPn08L0NvbnN1bWVyPjtcblxuICByZXR1cm4gV3JhcHBlZDtcbn07XG4iXSwibWFwcGluZ3MiOiI7Ozs7Ozs7O0FBQUEsSUFBQUEsTUFBQSxHQUFBQyxzQkFBQSxDQUFBQyxPQUFBO0FBRUEsSUFBQUMsb0JBQUEsZ0JBQStCQyxpQkFBSyxDQUFDQyxhQUFhLENBQUMsQ0FBQyxDQUFDLENBQUM7RUFBOUNDLFFBQVEsR0FBQUMsT0FBQSxDQUFBRCxRQUFBLEdBQUFILG9CQUFBLENBQVJHLFFBQVE7RUFBRUUsUUFBUSxHQUFBRCxPQUFBLENBQUFDLFFBQUEsR0FBQUwsb0JBQUEsQ0FBUkssUUFBUTtBQUluQixJQUFNQyxVQUFVLEdBQUFGLE9BQUEsQ0FBQUUsVUFBQSxHQUFHLFNBQWJBLFVBQVVBLENBQUE7RUFBQSxPQUFTLENBQUNDLElBQUksQ0FBQ0MsTUFBTSxDQUFDLENBQUMsR0FBRyxPQUFPLEVBQUVDLE9BQU8sQ0FBQyxDQUFDLENBQUM7QUFBQTtBQUU3RCxJQUFNQyxPQUFPLEdBQUFOLE9BQUEsQ0FBQU0sT0FBQSxHQUFHLFNBQVZBLE9BQU9BLENBQUlDLFNBQVMsRUFBSztFQUNwQyxJQUFNQyxPQUFPLEdBQUcsU0FBVkEsT0FBT0EsQ0FBSUMsS0FBSztJQUFBLG9CQUFLaEIsTUFBQSxZQUFBaUIsYUFBQSxDQUFDWCxRQUFRLFFBQUUsVUFBQ1ksR0FBRztNQUFBLG9CQUFLbEIsTUFBQSxZQUFBaUIsYUFBQSxDQUFDSCxTQUFTLE1BQUFLLFNBQUEsaUJBQUtILEtBQUs7UUFBRUUsR0FBRyxFQUFFQTtNQUFJLEVBQUUsQ0FBQztJQUFBLENBQVcsQ0FBQztFQUFBO0VBRTdGLE9BQU9ILE9BQU87QUFDaEIsQ0FBQyIsImlnbm9yZUxpc3QiOltdfQ==

package/lib/uid-context.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/uid-context.js"],"names":["React","createContext","Consumer","Provider","generateId","Math","random","toFixed","withUid","Component","Wrapped","props","uid"],"mappings":";;;;;;;;;;;AAAA;;AAEA,wCAA+BA,kBAAMC,aAAN,CAAoB,CAAC,CAArB,CAA/B;AAAA,IAAQC,QAAR,wBAAQA,QAAR;AAAA,IAAkBC,QAAlB,wBAAkBA,QAAlB;;;;;AAIO,IAAMC,UAAU,GAAG,SAAbA,UAAa;AAAA,SAAM,CAACC,IAAI,CAACC,MAAL,KAAgB,OAAjB,EAA0BC,OAA1B,CAAkC,CAAlC,CAAN;AAAA,CAAnB;;;;AAEA,IAAMC,OAAO,GAAG,SAAVA,OAAU,CAACC,SAAD,EAAe;AACpC,MAAMC,OAAO,GAAG,SAAVA,OAAU,CAACC,KAAD;AAAA,wBAAW,gCAAC,QAAD,QAAW,UAACC,GAAD;AAAA,0BAAS,gCAAC,SAAD,gCAAeD,KAAf;AAAsB,QAAA,GAAG,EAAEC;AAA3B,SAAT;AAAA,KAAX,CAAX;AAAA,GAAhB;;AAEA,SAAOF,OAAP;AACD,CAJM","sourcesContent":["import React from 'react';\n\nconst { Consumer, Provider } = React.createContext(-1);\n\nexport { Provider, Consumer };\n\nexport const generateId = () => (Math.random() * 1000001).toFixed(0);\n\nexport const withUid = (Component) => {\n  const Wrapped = (props) => <Consumer>{(uid) => <Component {...props} uid={uid} />}</Consumer>;\n\n  return Wrapped;\n};\n"],"file":"uid-context.js"}
+{"version":3,"file":"uid-context.js","names":["_react","_interopRequireDefault","require","_React$createContext","React","createContext","Consumer","exports","Provider","generateId","Math","random","toFixed","withUid","Component","Wrapped","props","createElement","uid","_extends2"],"sources":["../src/uid-context.js"],"sourcesContent":["import React from 'react';\n\nconst { Consumer, Provider } = React.createContext(-1);\n\nexport { Provider, Consumer };\n\nexport const generateId = () => (Math.random() * 1000001).toFixed(0);\n\nexport const withUid = (Component) => {\n  const Wrapped = (props) => <Consumer>{(uid) => <Component {...props} uid={uid} />}</Consumer>;\n\n  return Wrapped;\n};\n"],"mappings":";;;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AAEA,IAAAC,oBAAA,gBAA+BC,iBAAK,CAACC,aAAa,CAAC,CAAC,CAAC,CAAC;EAA9CC,QAAQ,GAAAC,OAAA,CAAAD,QAAA,GAAAH,oBAAA,CAARG,QAAQ;EAAEE,QAAQ,GAAAD,OAAA,CAAAC,QAAA,GAAAL,oBAAA,CAARK,QAAQ;AAInB,IAAMC,UAAU,GAAAF,OAAA,CAAAE,UAAA,GAAG,SAAbA,UAAUA,CAAA;EAAA,OAAS,CAACC,IAAI,CAACC,MAAM,CAAC,CAAC,GAAG,OAAO,EAAEC,OAAO,CAAC,CAAC,CAAC;AAAA;AAE7D,IAAMC,OAAO,GAAAN,OAAA,CAAAM,OAAA,GAAG,SAAVA,OAAOA,CAAIC,SAAS,EAAK;EACpC,IAAMC,OAAO,GAAG,SAAVA,OAAOA,CAAIC,KAAK;IAAA,oBAAKhB,MAAA,YAAAiB,aAAA,CAACX,QAAQ,QAAE,UAACY,GAAG;MAAA,oBAAKlB,MAAA,YAAAiB,aAAA,CAACH,SAAS,MAAAK,SAAA,iBAAKH,KAAK;QAAEE,GAAG,EAAEA;MAAI,EAAE,CAAC;IAAA,CAAW,CAAC;EAAA;EAE7F,OAAOH,OAAO;AAChB,CAAC","ignoreList":[]}

package/package.json

@@ -1,21 +1,23 @@
 {
   "name": "@pie-lib/drag",
-  "version": "2.22.3-next.2+9ae1017d",
+  "version": "2.22.4-next.0",
   "description": "",
   "main": "lib/index.js",
   "module": "src/index.js",
   "dependencies": {
-    "@material-ui/core": "^3.8.3",
-    "@pie-lib/math-rendering": "^3.22.2-next.11+9ae1017d",
-    "@pie-lib/render-ui": "^4.35.3-next.2+9ae1017d",
+    "@dnd-kit/core": "6.1.0",
+    "@dnd-kit/sortable": "8.0.0",
+    "@dnd-kit/utilities": "3.2.2",
+    "@emotion/react": "^11.14.0",
+    "@emotion/style": "^0.8.0",
+    "@mui/icons-material": "^7.3.4",
+    "@mui/material": "^7.3.4",
+    "@pie-lib/math-rendering": "3.22.3-next.0",
+    "@pie-lib/render-ui": "4.35.4-next.0",
     "classnames": "^2.2.6",
     "lodash": "^4.17.11",
     "prop-types": "^15.7.2",
-    "react": "^16.8.1",
-    "react-dnd": "^14.0.5",
-    "react-dnd-html5-backend": "^14.0.2",
-    "react-dnd-multi-backend": "^6.0.2",
-    "react-dnd-touch-backend": "^12.0.0"
+    "react": "^18.2.0"
   },
   "publishConfig": {
     "access": "public"
@@ -23,13 +25,5 @@
   "scripts": {},
   "author": "",
   "license": "ISC",
-  "gitHead": "9ae1017d80207591d7570de6d6153fa476f3b18b",
-  "exports": {
-    ".": {
-      "require": "./lib/index.js",
-      "import": "./src/index.js",
-      "default": "./lib/index.js"
-    },
-    "./esm": "./esm/index.js"
-  }
+  "gitHead": "ad47e833acbaecca94eab8df2aee2a1ee9d90516"
 }

package/src/__tests__/placeholder.test.jsx

@@ -1,48 +1,107 @@
-import { shallow } from 'enzyme';
+import { render, screen } from '@testing-library/react';
 import React from 'react';
 import { PlaceHolder } from '../placeholder';
 
 describe('placeholder', () => {
-  const wrapper = (extras) => {
-    const defaults = {
-      classes: {
-        placeholder: 'placeholder',
-        disabled: 'disabled',
-        over: 'over',
-        number: 'number',
-      },
-    };
-    const props = { ...defaults, ...extras };
-    return shallow(<PlaceHolder {...props}> Foo </PlaceHolder>);
+  const renderComponent = (extras = {}) => {
+    const props = { ...extras };
+    return render(<PlaceHolder {...props}>Foo</PlaceHolder>);
   };
 
-  describe('snapshot', () => {
-    it('reqular', () => {
-      const w = wrapper();
-      expect(w).toMatchSnapshot();
+  describe('rendering', () => {
+    it('renders children content', () => {
+      renderComponent();
+      expect(screen.getByText('Foo')).toBeInTheDocument();
     });
 
-    it('isOver: true', () => {
-      expect(wrapper({ isOver: true })).toMatchSnapshot();
+    it('renders with regular placeholder class', () => {
+      const { container } = renderComponent();
+      const placeholder = container.firstChild;
+      expect(placeholder).toHaveClass('placeholder');
     });
 
-    it('disabled: true', () => {
-      expect(wrapper({ disabled: true })).toMatchSnapshot();
+    it('applies over class when isOver is true', () => {
+      const { container } = renderComponent({ isOver: true });
+      const placeholder = container.firstChild;
+      expect(placeholder).toHaveClass('over');
     });
 
-    it('className', () => {
-      expect(wrapper({ className: 'bar' })).toMatchSnapshot();
+    it('applies disabled class when disabled is true', () => {
+      const { container } = renderComponent({ disabled: true });
+      const placeholder = container.firstChild;
+      expect(placeholder).toHaveClass('disabled');
     });
 
-    it('specific grid rowsRepeatValue', () => {
-      const w = wrapper({
+    it('applies custom className', () => {
+      const { container } = renderComponent({ className: 'bar' });
+      const placeholder = container.firstChild;
+      expect(placeholder).toHaveClass('bar');
+      expect(placeholder).toHaveClass('placeholder');
+    });
+
+    it('applies choice type class', () => {
+      const { container } = renderComponent({ type: 'choice' });
+      const placeholder = container.firstChild;
+      expect(placeholder).toHaveClass('choice');
+    });
+
+    it('applies board class when choiceBoard is true', () => {
+      const { container } = renderComponent({ choiceBoard: true });
+      const placeholder = container.firstChild;
+      expect(placeholder).toHaveClass('board');
+    });
+
+    it('applies categorizeBoard class when choiceBoard and isCategorize are true', () => {
+      const { container } = renderComponent({ choiceBoard: true, isCategorize: true });
+      const placeholder = container.firstChild;
+      expect(placeholder).toHaveClass('categorizeBoard');
+    });
+
+    it('applies verticalPool class when isVerticalPool is true', () => {
+      const { container } = renderComponent({ isVerticalPool: true });
+      const placeholder = container.firstChild;
+      expect(placeholder).toHaveClass('verticalPool');
+    });
+  });
+
+  describe('grid styles', () => {
+    it('applies grid column styles', () => {
+      const { container } = renderComponent({
+        grid: { columns: 3 },
+      });
+      const placeholder = container.firstChild;
+      expect(placeholder).toHaveStyle({ gridTemplateColumns: 'repeat(3, 1fr)' });
+    });
+
+    it('applies grid row styles with default value', () => {
+      const { container } = renderComponent({
+        grid: { rows: 2 },
+      });
+      const placeholder = container.firstChild;
+      expect(placeholder).toHaveStyle({ gridTemplateRows: 'repeat(2, 1fr)' });
+    });
+
+    it('applies grid row styles with custom rowsRepeatValue', () => {
+      const { container } = renderComponent({
         grid: {
           rows: 2,
           columns: 1,
           rowsRepeatValue: 'min-content',
         },
       });
-      expect(w).toMatchSnapshot();
+      const placeholder = container.firstChild;
+      expect(placeholder).toHaveStyle({
+        gridTemplateRows: 'repeat(2, min-content)',
+        gridTemplateColumns: 'repeat(1, 1fr)',
+      });
+    });
+  });
+
+  describe('min height', () => {
+    it('applies minHeight style when provided', () => {
+      const { container } = renderComponent({ minHeight: 200 });
+      const placeholder = container.firstChild;
+      expect(placeholder).toHaveStyle({ minHeight: '200px' });
     });
   });
 });

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

@@ -1,21 +1,54 @@
-import { createContext, createElement } from 'react';
-import { withUid } from '../uid-context';
-
-jest.mock('react', () => ({
-  createElement: jest.fn((c) => c),
-  createContext: jest.fn().mockReturnValue({
-    Consumer: jest.fn((fn) => fn),
-    Provider: jest.fn(),
-  }),
-}));
-
-describe('id-context', () => {
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { withUid, Provider as UidProvider } from '../uid-context';
+
+describe('uid-context', () => {
   describe('withUid', () => {
-    it('calls createElement', () => {
-      const Wrapped = 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>,
+      );
 
-      const Consumer = Wrapped({});
-      expect(createElement).toBeCalledWith(expect.any(Function), null, expect.anything());
+      expect(screen.getByTestId('uid-value')).toHaveTextContent('provider-uid');
     });
   });
 });

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

@@ -1,19 +1,65 @@
-import { DropTarget } from 'react-dnd';
-import { DroppablePlaceholder } from './droppable-placeholder';
-import dragType from './drag-type';
+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';
 
-export const spec = {
-  canDrop: (props) => {
-    return !props.disabled;
-  },
-  drop: () => ({
-    dropped: true,
-  }),
-};
+// 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
+    }
+  });
 
-const WithTarget = DropTarget(dragType.types.db, spec, (connect, monitor) => ({
-  connectDropTarget: connect.dropTarget(),
-  isOver: monitor.isOver(),
-}))(DroppablePlaceholder);
+  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 WithTarget;
+export default DragInTheBlankDroppable;

package/src/drag-provider.jsx

@@ -0,0 +1,50 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { DndContext, PointerSensor, KeyboardSensor, 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

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

package/src/draggable-choice.jsx

@@ -0,0 +1,88 @@
+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',
+  '&: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,38 +1,48 @@
 import React from 'react';
 import PlaceHolder from './placeholder';
 import PropTypes from 'prop-types';
+import { useDroppable } from '@dnd-kit/core';
 
 const preventInteractionStyle = {
   flex: 1,
 };
 
-export class DroppablePlaceholder extends React.Component {
-  static propTypes = {
-    classes: PropTypes.object,
-    connectDropTarget: PropTypes.func.isRequired,
-    isOver: PropTypes.bool,
-    children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
-    disabled: PropTypes.bool,
-    isVerticalPool: PropTypes.bool,
-    minHeight: PropTypes.number,
-  };
+export function DroppablePlaceholder({ 
+  id,
+  children, 
+  disabled, 
+  classes, 
+  isVerticalPool, 
+  minHeight 
+}) {
+  const { setNodeRef, isOver } = useDroppable({ 
+    id,
+    disabled 
+  });
 
-  render() {
-    const { children, connectDropTarget, isOver, disabled, classes, isVerticalPool, minHeight } = this.props;
-
-    return connectDropTarget(
-      <div style={preventInteractionStyle}>
-        <PlaceHolder
-          disabled={disabled}
-          isOver={isOver}
-          choiceBoard={true}
-          className={classes}
-          isVerticalPool={isVerticalPool}
-          minHeight={minHeight}
-        >
-          {children}
-        </PlaceHolder>
-      </div>,
-    );
-  }
+  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;