@pie-lib/mask-markup 3.0.4-next.33 → 3.0.4-next.36

package/LICENSE.md

@@ -0,0 +1,5 @@
+Copyright 2019 CoreSpring Inc
+
+Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted, provided that the above copyright notice and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.

package/lib/choices/choice.js

@@ -0,0 +1,116 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DRAG_TYPE = void 0;
+exports["default"] = Choice;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _core = require("@dnd-kit/core");
+var _styles = require("@mui/material/styles");
+var _Chip = _interopRequireDefault(require("@mui/material/Chip"));
+var _mathRendering = require("@pie-lib/math-rendering");
+var _renderUi = require("@pie-lib/render-ui");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var DRAG_TYPE = exports.DRAG_TYPE = 'MaskBlank';
+var StyledChoice = (0, _styles.styled)('span')(function (_ref) {
+  var theme = _ref.theme,
+    disabled = _ref.disabled;
+  return _objectSpread({
+    border: "solid 0px ".concat(theme.palette.primary.main),
+    borderRadius: theme.spacing(2),
+    margin: theme.spacing(0.5),
+    transform: 'translate(0, 0)',
+    display: 'inline-flex'
+  }, disabled && {});
+});
+var StyledChip = (0, _styles.styled)(_Chip["default"])(function () {
+  return {
+    backgroundColor: _renderUi.color.white(),
+    border: "1px solid ".concat(_renderUi.color.text()),
+    color: _renderUi.color.text(),
+    alignItems: 'center',
+    display: 'inline-flex',
+    height: 'initial',
+    minHeight: '32px',
+    fontSize: 'inherit',
+    whiteSpace: 'pre-wrap',
+    maxWidth: '374px',
+    // Added for touch devices, for image content.
+    // This will prevent the context menu from appearing and not allowing other interactions with the image.
+    // If interactions with the image in the token will be requested we should handle only the context Menu.
+    pointerEvents: 'none',
+    borderRadius: '3px',
+    paddingTop: '12px',
+    paddingBottom: '12px',
+    '&.Mui-disabled': {
+      opacity: 1
+    }
+  };
+});
+var StyledChipLabel = (0, _styles.styled)('span')(function () {
+  return {
+    whiteSpace: 'normal',
+    '& img': {
+      display: 'block',
+      padding: '2px 0'
+    },
+    '& mjx-frac': {
+      fontSize: '120% !important'
+    }
+  };
+});
+function Choice(_ref2) {
+  var _rootRef$current, _rootRef$current2;
+  var choice = _ref2.choice,
+    disabled = _ref2.disabled,
+    instanceId = _ref2.instanceId;
+  var rootRef = (0, _react.useRef)(null);
+  var _useDraggable = (0, _core.useDraggable)({
+      id: "choice-".concat(choice.id),
+      data: {
+        choice: choice,
+        instanceId: instanceId,
+        fromChoice: true,
+        type: DRAG_TYPE
+      },
+      disabled: disabled
+    }),
+    attributes = _useDraggable.attributes,
+    listeners = _useDraggable.listeners,
+    setNodeRef = _useDraggable.setNodeRef,
+    isDragging = _useDraggable.isDragging;
+  (0, _react.useEffect)(function () {
+    (0, _mathRendering.renderMath)(rootRef.current);
+  }, [choice.value]);
+  return /*#__PURE__*/_react["default"].createElement(StyledChoice, (0, _extends2["default"])({
+    ref: setNodeRef,
+    style: isDragging ? {
+      width: (_rootRef$current = rootRef.current) === null || _rootRef$current === void 0 ? void 0 : _rootRef$current.offsetWidth,
+      height: (_rootRef$current2 = rootRef.current) === null || _rootRef$current2 === void 0 ? void 0 : _rootRef$current2.offsetHeight
+    } : {},
+    disabled: disabled
+  }, listeners, attributes), /*#__PURE__*/_react["default"].createElement(StyledChip, {
+    clickable: false,
+    disabled: disabled,
+    ref: rootRef,
+    label: /*#__PURE__*/_react["default"].createElement(StyledChipLabel, {
+      dangerouslySetInnerHTML: {
+        __html: choice.value
+      }
+    })
+  }));
+}
+Choice.propTypes = {
+  choice: _propTypes["default"].object.isRequired,
+  disabled: _propTypes["default"].bool,
+  instanceId: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number])
+};
+//# sourceMappingURL=choice.js.map

package/lib/choices/choice.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"choice.js","names":["_react","_interopRequireWildcard","require","_propTypes","_interopRequireDefault","_core","_styles","_Chip","_mathRendering","_renderUi","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","_typeof","has","get","set","_t","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","ownKeys","keys","getOwnPropertySymbols","filter","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","DRAG_TYPE","exports","StyledChoice","styled","_ref","theme","disabled","border","concat","palette","primary","main","borderRadius","spacing","margin","transform","display","StyledChip","Chip","backgroundColor","color","white","text","alignItems","height","minHeight","fontSize","whiteSpace","maxWidth","pointerEvents","paddingTop","paddingBottom","opacity","StyledChipLabel","padding","Choice","_ref2","_rootRef$current","_rootRef$current2","choice","instanceId","rootRef","useRef","_useDraggable","useDraggable","id","data","fromChoice","type","attributes","listeners","setNodeRef","isDragging","useEffect","renderMath","current","value","createElement","_extends2","ref","style","width","offsetWidth","offsetHeight","clickable","label","dangerouslySetInnerHTML","__html","propTypes","PropTypes","object","isRequired","bool","oneOfType","string","number"],"sources":["../../src/choices/choice.jsx"],"sourcesContent":["import React, { useEffect, useRef } from 'react';\nimport PropTypes from 'prop-types';\nimport { useDraggable } from '@dnd-kit/core';\nimport { styled } from '@mui/material/styles';\nimport Chip from '@mui/material/Chip';\nimport { renderMath } from '@pie-lib/math-rendering';\nimport { color } from '@pie-lib/render-ui';\n\nexport const DRAG_TYPE = 'MaskBlank';\n\nconst StyledChoice = styled('span')(({ theme, disabled }) => ({\n  border: `solid 0px ${theme.palette.primary.main}`,\n  borderRadius: theme.spacing(2),\n  margin: theme.spacing(0.5),\n  transform: 'translate(0, 0)',\n  display: 'inline-flex',\n  ...(disabled && {}),\n}));\n\nconst StyledChip = styled(Chip)(() => ({\n  backgroundColor: color.white(),\n  border: `1px solid ${color.text()}`,\n  color: color.text(),\n  alignItems: 'center',\n  display: 'inline-flex',\n  height: 'initial',\n  minHeight: '32px',\n  fontSize: 'inherit',\n  whiteSpace: 'pre-wrap',\n  maxWidth: '374px',\n  // Added for touch devices, for image content.\n  // This will prevent the context menu from appearing and not allowing other interactions with the image.\n  // If interactions with the image in the token will be requested we should handle only the context Menu.\n  pointerEvents: 'none',\n  borderRadius: '3px',\n  paddingTop: '12px',\n  paddingBottom: '12px',\n\n  '&.Mui-disabled': {\n    opacity: 1,\n  },\n}));\n\nconst StyledChipLabel = styled('span')(() => ({\n  whiteSpace: 'normal',\n  '& img': {\n    display: 'block',\n    padding: '2px 0',\n  },\n  '& mjx-frac': {\n    fontSize: '120% !important',\n  },\n}));\n\nexport default function Choice({ choice, disabled, instanceId }) {\n  const rootRef = useRef(null);\n\n  const { attributes, listeners, setNodeRef, isDragging } = useDraggable({\n    id: `choice-${choice.id}`,\n    data: { choice, instanceId, fromChoice: true, type: DRAG_TYPE },\n    disabled,\n  });\n\n  useEffect(() => {\n    renderMath(rootRef.current);\n  }, [choice.value]);\n\n  return (\n    <StyledChoice\n      ref={setNodeRef}\n      style={\n        isDragging\n          ? {\n              width: rootRef.current?.offsetWidth,\n              height: rootRef.current?.offsetHeight,\n            }\n          : {}\n      }\n      disabled={disabled}\n      {...listeners}\n      {...attributes}\n    >\n      <StyledChip\n        clickable={false}\n        disabled={disabled}\n        ref={rootRef}\n        label={<StyledChipLabel dangerouslySetInnerHTML={{ __html: choice.value }} />}\n      />\n    </StyledChoice>\n  );\n}\n\nChoice.propTypes = {\n  choice: PropTypes.object.isRequired,\n  disabled: PropTypes.bool,\n  instanceId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n};\n"],"mappings":"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","ignoreList":[]}

package/lib/choices/index.js

@@ -0,0 +1,103 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _lodashEs = require("lodash-es");
+var _choice = _interopRequireDefault(require("./choice"));
+var _drag = require("@pie-lib/drag");
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+var Choices = exports["default"] = /*#__PURE__*/function (_React$Component) {
+  function Choices() {
+    var _this;
+    (0, _classCallCheck2["default"])(this, Choices);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _callSuper(this, Choices, [].concat(args));
+    (0, _defineProperty2["default"])(_this, "getStyleForWrapper", function () {
+      var choicePosition = _this.props.choicePosition;
+      switch (choicePosition) {
+        case 'above':
+          return {
+            margin: '0 0 40px 0'
+          };
+        case 'below':
+          return {
+            margin: '40px 0 0 0'
+          };
+        case 'right':
+          return {
+            margin: '0 0 0 40px'
+          };
+        default:
+          return {
+            margin: '0 40px 0 0'
+          };
+      }
+    });
+    return _this;
+  }
+  (0, _inherits2["default"])(Choices, _React$Component);
+  return (0, _createClass2["default"])(Choices, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+        disabled = _this$props.disabled,
+        duplicates = _this$props.duplicates,
+        choices = _this$props.choices,
+        value = _this$props.value,
+        instanceId = _this$props.instanceId;
+      var filteredChoices = choices.filter(function (c) {
+        if (duplicates === true) {
+          return true;
+        }
+        var foundChoice = (0, _lodashEs.findKey)(value, function (v) {
+          return v === c.id;
+        });
+        return foundChoice === undefined;
+      });
+      var elementStyle = _objectSpread(_objectSpread({}, this.getStyleForWrapper()), {}, {
+        minWidth: '100px'
+      });
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        style: elementStyle
+      }, /*#__PURE__*/_react["default"].createElement(_drag.DragDroppablePlaceholder, {
+        disabled: disabled,
+        instanceId: instanceId
+      }, filteredChoices.map(function (c, index) {
+        return /*#__PURE__*/_react["default"].createElement(_choice["default"], {
+          key: "".concat(c.value, "-").concat(index),
+          disabled: disabled,
+          choice: c,
+          instanceId: instanceId
+        });
+      })));
+    }
+  }]);
+}(_react["default"].Component);
+(0, _defineProperty2["default"])(Choices, "propTypes", {
+  disabled: _propTypes["default"].bool,
+  duplicates: _propTypes["default"].bool,
+  choices: _propTypes["default"].arrayOf(_propTypes["default"].shape({
+    label: _propTypes["default"].string,
+    value: _propTypes["default"].string
+  })),
+  value: _propTypes["default"].object,
+  choicePosition: _propTypes["default"].string.isRequired,
+  instanceId: _propTypes["default"].string // Added for drag isolation
+});
+//# sourceMappingURL=index.js.map

package/lib/choices/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["_react","_interopRequireDefault","require","_propTypes","_lodashEs","_choice","_drag","ownKeys","e","r","t","Object","keys","getOwnPropertySymbols","o","filter","getOwnPropertyDescriptor","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","defineProperty","_callSuper","_getPrototypeOf2","_possibleConstructorReturn2","_isNativeReflectConstruct","Reflect","construct","constructor","Boolean","prototype","valueOf","call","Choices","exports","_React$Component","_this","_classCallCheck2","_len","args","Array","_key","concat","choicePosition","props","margin","_inherits2","_createClass2","key","value","render","_this$props","disabled","duplicates","choices","instanceId","filteredChoices","c","foundChoice","findKey","v","id","undefined","elementStyle","getStyleForWrapper","minWidth","createElement","style","DragDroppablePlaceholder","map","index","choice","React","Component","PropTypes","bool","arrayOf","shape","label","string","object","isRequired"],"sources":["../../src/choices/index.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { findKey } from 'lodash-es';\nimport Choice from './choice';\nimport { DragDroppablePlaceholder } from '@pie-lib/drag';\n\nexport default class Choices extends React.Component {\n  static propTypes = {\n    disabled: PropTypes.bool,\n    duplicates: PropTypes.bool,\n    choices: PropTypes.arrayOf(PropTypes.shape({ label: PropTypes.string, value: PropTypes.string })),\n    value: PropTypes.object,\n    choicePosition: PropTypes.string.isRequired,\n    instanceId: PropTypes.string, // Added for drag isolation\n  };\n\n  getStyleForWrapper = () => {\n    const { choicePosition } = this.props;\n\n    switch (choicePosition) {\n      case 'above':\n        return {\n          margin: '0 0 40px 0',\n        };\n\n      case 'below':\n        return {\n          margin: '40px 0 0 0',\n        };\n\n      case 'right':\n        return {\n          margin: '0 0 0 40px',\n        };\n\n      default:\n        return {\n          margin: '0 40px 0 0',\n        };\n    }\n  };\n\n  render() {\n    const { disabled, duplicates, choices, value, instanceId } = this.props;\n    const filteredChoices = choices.filter((c) => {\n      if (duplicates === true) {\n        return true;\n      }\n      const foundChoice = findKey(value, (v) => v === c.id);\n      return foundChoice === undefined;\n    });\n    const elementStyle = { ...this.getStyleForWrapper(), minWidth: '100px' };\n\n    return (\n      <div style={elementStyle}>\n        <DragDroppablePlaceholder disabled={disabled} instanceId={instanceId}>\n          {filteredChoices.map((c, index) => (\n            <Choice key={`${c.value}-${index}`} disabled={disabled} choice={c} instanceId={instanceId} />\n          ))}\n        </DragDroppablePlaceholder>\n      </div>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/lib/componentize.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var REGEX = /\{\{(\d+)\}\}/g;
+var _default = exports["default"] = function _default(s, t) {
+  if (!s) {
+    return {
+      markup: ''
+    };
+  }
+  var markup = s.replace(REGEX, function (match, g) {
+    return "<span data-component=\"".concat(t, "\" data-id=\"").concat(g, "\"></span>");
+  });
+  return {
+    markup: markup
+  };
+};
+//# sourceMappingURL=componentize.js.map

package/lib/componentize.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"componentize.js","names":["REGEX","_default","exports","s","t","markup","replace","match","g","concat"],"sources":["../src/componentize.js"],"sourcesContent":["const REGEX = /\\{\\{(\\d+)\\}\\}/g;\n\nexport default (s, t) => {\n  if (!s) {\n    return { markup: '' };\n  }\n\n  const markup = s.replace(REGEX, (match, g) => {\n    return `<span data-component=\"${t}\" data-id=\"${g}\"></span>`;\n  });\n\n  return { markup };\n};\n"],"mappings":";;;;;;AAAA,IAAMA,KAAK,GAAG,gBAAgB;AAAC,IAAAC,QAAA,GAAAC,OAAA,cAEhB,SAAAD,SAACE,CAAC,EAAEC,CAAC,EAAK;EACvB,IAAI,CAACD,CAAC,EAAE;IACN,OAAO;MAAEE,MAAM,EAAE;IAAG,CAAC;EACvB;EAEA,IAAMA,MAAM,GAAGF,CAAC,CAACG,OAAO,CAACN,KAAK,EAAE,UAACO,KAAK,EAAEC,CAAC,EAAK;IAC5C,iCAAAC,MAAA,CAAgCL,CAAC,mBAAAK,MAAA,CAAcD,CAAC;EAClD,CAAC,CAAC;EAEF,OAAO;IAAEH,MAAM,EAANA;EAAO,CAAC;AACnB,CAAC","ignoreList":[]}

package/lib/components/blank.js

@@ -0,0 +1,371 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _mathRendering = require("@pie-lib/math-rendering");
+var _debug = _interopRequireDefault(require("debug"));
+var _core = require("@dnd-kit/core");
+var _utilities = require("@dnd-kit/utilities");
+var _styles = require("@mui/material/styles");
+var _Chip = _interopRequireDefault(require("@mui/material/Chip"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _renderUi = require("@pie-lib/render-ui");
+var _colors = require("@mui/material/colors");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var log = (0, _debug["default"])('pie-lib:mask-markup:blank');
+var StyledContent = (0, _styles.styled)('span')(function (_ref) {
+  var dragged = _ref.dragged,
+    over = _ref.over;
+  return _objectSpread(_objectSpread({
+    border: "solid 0px ".concat(_renderUi.color.primary()),
+    minWidth: '200px',
+    touchAction: 'none',
+    overflow: 'hidden',
+    whiteSpace: 'nowrap',
+    opacity: 1
+  }, over && {
+    whiteSpace: 'nowrap',
+    overflow: 'hidden'
+  }), dragged && {
+    opacity: 0.5
+  });
+});
+var StyledChip = (0, _styles.styled)(_Chip["default"])(function () {
+  return {
+    backgroundColor: _renderUi.color.background(),
+    border: "2px dashed ".concat(_renderUi.color.text()),
+    touchAction: 'none',
+    color: _renderUi.color.text(),
+    fontSize: 'inherit',
+    maxWidth: '374px',
+    position: 'relative',
+    borderRadius: '3px',
+    '&.over': {
+      whiteSpace: 'nowrap',
+      overflow: 'hidden'
+    },
+    '&.parentOver': {
+      border: "1px solid ".concat(_colors.grey[500]),
+      backgroundColor: "".concat(_colors.grey[300])
+    },
+    '&.correct': {
+      border: "solid 1px ".concat(_renderUi.color.correct())
+    },
+    '&.incorrect': {
+      border: "solid 1px ".concat(_renderUi.color.incorrect())
+    },
+    '&.Mui-disabled': {
+      opacity: 1
+    }
+  };
+});
+var StyledChipLabel = (0, _styles.styled)('span')(function () {
+  return {
+    whiteSpace: 'normal',
+    // Added for touch devices, for image content.
+    // This will prevent the context menu from appearing and not allowing other interactions with the image.
+    // If interactions with the image in the token will be requested we should handle only the context Menu.
+    pointerEvents: 'none',
+    '& img': {
+      display: 'block',
+      padding: '2px 0'
+    },
+    // Remove default <p> margins to ensure consistent spacing across all wrapped content (p, span, div, math)
+    // Padding for top and bottom will instead be controlled by the container for consistent layout
+    // Ensures consistent behavior with pie-api-browser, where marginTop is already removed by a Bootstrap stylesheet
+    '& p': {
+      marginTop: '0',
+      marginBottom: '0'
+    },
+    '& mjx-frac': {
+      fontSize: '120% !important'
+    },
+    '&.over': {
+      whiteSpace: 'nowrap',
+      overflow: 'hidden'
+    },
+    '&.hidden': {
+      color: 'transparent',
+      opacity: 0
+    },
+    '&.dragged': {
+      position: 'absolute',
+      left: 16,
+      maxWidth: '60px',
+      top: '50%',
+      transform: 'translateY(-50%)'
+    }
+  };
+});
+function BlankContent(_ref2) {
+  var _dragItem$choice, _frozenRef$current, _frozenRef$current2;
+  var disabled = _ref2.disabled,
+    choice = _ref2.choice,
+    isOver = _ref2.isOver,
+    isDragging = _ref2.isDragging,
+    dragItem = _ref2.dragItem,
+    correct = _ref2.correct,
+    emptyResponseAreaWidth = _ref2.emptyResponseAreaWidth,
+    emptyResponseAreaHeight = _ref2.emptyResponseAreaHeight;
+  var rootRef = (0, _react.useRef)(null);
+  var spanRef = (0, _react.useRef)(null);
+  var frozenRef = (0, _react.useRef)(null); // to use during dragging to prevent flickering
+  var _useState = (0, _react.useState)({
+      height: 0,
+      width: 0
+    }),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    dimensions = _useState2[0],
+    setDimensions = _useState2[1];
+  var handleImageLoad = function handleImageLoad() {
+    updateDimensions();
+  };
+  var handleElements = function handleElements() {
+    var _spanRef$current;
+    var imageElement = (_spanRef$current = spanRef.current) === null || _spanRef$current === void 0 ? void 0 : _spanRef$current.querySelector('img');
+    if (imageElement) {
+      imageElement.onload = handleImageLoad;
+    } else {
+      setTimeout(function () {
+        updateDimensions();
+      }, 300);
+    }
+  };
+  var getMeasureNode = function getMeasureNode() {
+    if (!spanRef.current) return null;
+    var mjx = spanRef.current.querySelector('mjx-container');
+    if (mjx && spanRef.current.parentElement) return spanRef.current.parentElement;
+    var img = spanRef.current.querySelector('img');
+    if (img) return img;
+    return spanRef.current;
+  };
+  var updateDimensions = function updateDimensions() {
+    if (spanRef.current && rootRef.current) {
+      // Temporarily set rootRef width to 'auto' for natural measurement
+      rootRef.current.style.width = 'auto';
+      rootRef.current.style.height = 'auto';
+      rootRef.current.offsetHeight;
+      var measureNode = getMeasureNode();
+      var node = measureNode || spanRef.current;
+      var rect = node.getBoundingClientRect();
+      var width = rect.width || node.offsetWidth || 0;
+      var height = Math.max(rect.height || 0, node.offsetHeight || 0, node.scrollHeight || 0, spanRef.current.scrollHeight || 0);
+      var widthWithPadding = width + 24; // 12px padding on each side
+      var heightWithPadding = height + 24; // 12px padding on top and bottom
+
+      var responseAreaWidth = parseFloat(emptyResponseAreaWidth) || 0;
+      var responseAreaHeight = parseFloat(emptyResponseAreaHeight) || 0;
+      var adjustedWidth = widthWithPadding <= responseAreaWidth ? responseAreaWidth : widthWithPadding;
+      var adjustedHeight = heightWithPadding <= responseAreaHeight ? responseAreaHeight : heightWithPadding;
+      setDimensions(function (prevState) {
+        return {
+          width: adjustedWidth > responseAreaWidth ? adjustedWidth : prevState.width,
+          height: adjustedHeight > responseAreaHeight ? adjustedHeight : prevState.height
+        };
+      });
+      rootRef.current.style.width = "".concat(adjustedWidth, "px");
+      rootRef.current.style.height = "".concat(adjustedHeight, "px");
+    }
+  };
+  var getRootDimensions = function getRootDimensions() {
+    // Handle potential non-numeric values
+    var responseAreaWidth = !isNaN(parseFloat(emptyResponseAreaWidth)) ? parseFloat(emptyResponseAreaWidth) : 0;
+    var responseAreaHeight = !isNaN(parseFloat(emptyResponseAreaHeight)) ? parseFloat(emptyResponseAreaHeight) : 0;
+    var rootStyle = {
+      height: dimensions.height || responseAreaHeight,
+      width: dimensions.width || responseAreaWidth
+    };
+
+    // add minWidth, minHeight if width and height are not defined
+    return _objectSpread(_objectSpread(_objectSpread({}, rootStyle), responseAreaWidth ? {} : {
+      minWidth: 90
+    }), responseAreaHeight ? {} : {
+      minHeight: 32
+    });
+  };
+  (0, _react.useEffect)(function () {
+    handleElements();
+  }, []);
+
+  // Render math for the placeholder/preview when dragging over
+  (0, _react.useEffect)(function () {
+    if (rootRef.current) {
+      (0, _mathRendering.renderMath)(rootRef.current);
+    }
+  }, [correct, isOver, dragItem === null || dragItem === void 0 || (_dragItem$choice = dragItem.choice) === null || _dragItem$choice === void 0 ? void 0 : _dragItem$choice.value]);
+  (0, _react.useEffect)(function () {
+    if (!choice) {
+      setDimensions({
+        height: 0,
+        width: 0
+      });
+      return;
+    }
+    handleElements();
+  }, [choice]);
+  (0, _react.useEffect)(function () {
+    if (!isOver && !isDragging) {
+      frozenRef.current = {
+        width: rootRef.current.offsetWidth,
+        height: rootRef.current.offsetHeight
+      };
+    }
+  }, [choice, isOver, isDragging]);
+  var draggedLabel = dragItem && isOver && dragItem.choice && dragItem.choice.value;
+  var label = choice && choice.value;
+  var style = isOver || isDragging ? {
+    width: (_frozenRef$current = frozenRef.current) === null || _frozenRef$current === void 0 ? void 0 : _frozenRef$current.width,
+    height: (_frozenRef$current2 = frozenRef.current) === null || _frozenRef$current2 === void 0 ? void 0 : _frozenRef$current2.height
+  } : getRootDimensions();
+  return /*#__PURE__*/_react["default"].createElement(StyledChip, {
+    clickable: false,
+    disabled: disabled,
+    ref: rootRef,
+    component: "span",
+    label: /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(StyledChipLabel, {
+      ref: spanRef,
+      draggable: true,
+      className: (0, _classnames["default"])({
+        over: isOver,
+        hidden: draggedLabel
+      }),
+      dangerouslySetInnerHTML: {
+        __html: label || ''
+      }
+    }), draggedLabel && /*#__PURE__*/_react["default"].createElement(StyledChipLabel, {
+      draggable: true,
+      className: (0, _classnames["default"])({
+        over: isOver,
+        dragged: true
+      }),
+      dangerouslySetInnerHTML: {
+        __html: draggedLabel || ''
+      }
+    })),
+    className: (0, _classnames["default"])({
+      over: isOver,
+      parentOver: isOver,
+      correct: correct !== undefined && correct,
+      incorrect: correct !== undefined && !correct
+    }),
+    variant: disabled ? 'outlined' : undefined,
+    style: style
+  });
+}
+BlankContent.defaultProps = {
+  emptyResponseAreaWidth: 0,
+  emptyResponseAreaHeight: 0
+};
+BlankContent.propTypes = {
+  id: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
+  disabled: _propTypes["default"].bool,
+  duplicates: _propTypes["default"].bool,
+  choice: _propTypes["default"].object,
+  isOver: _propTypes["default"].bool,
+  dragItem: _propTypes["default"].object,
+  correct: _propTypes["default"].bool,
+  onChange: _propTypes["default"].func,
+  emptyResponseAreaWidth: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
+  emptyResponseAreaHeight: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
+  instanceId: _propTypes["default"].string
+};
+
+// New functional component using @dnd-kit hooks
+function DragDropBlank(_ref3) {
+  var _dragItem$data;
+  var id = _ref3.id,
+    disabled = _ref3.disabled,
+    duplicates = _ref3.duplicates,
+    choice = _ref3.choice,
+    correct = _ref3.correct,
+    onChange = _ref3.onChange,
+    emptyResponseAreaWidth = _ref3.emptyResponseAreaWidth,
+    emptyResponseAreaHeight = _ref3.emptyResponseAreaHeight,
+    instanceId = _ref3.instanceId;
+  // Setup draggable functionality
+  var _useDraggable = (0, _core.useDraggable)({
+      id: "mask-blank-drag-".concat(id),
+      disabled: disabled || !choice,
+      data: {
+        id: id,
+        choice: choice,
+        instanceId: instanceId,
+        fromChoice: false,
+        // This is from a blank, not from choices
+        type: 'MaskBlank'
+      }
+    }),
+    dragAttributes = _useDraggable.attributes,
+    dragListeners = _useDraggable.listeners,
+    setDragNodeRef = _useDraggable.setNodeRef,
+    transform = _useDraggable.transform,
+    isDragging = _useDraggable.isDragging;
+
+  // Setup droppable functionality
+  var _useDroppable = (0, _core.useDroppable)({
+      id: "mask-blank-drop-".concat(id),
+      data: {
+        id: id,
+        accepts: ['MaskBlank'],
+        instanceId: instanceId
+      }
+    }),
+    setDropNodeRef = _useDroppable.setNodeRef,
+    isOver = _useDroppable.isOver,
+    dragItem = _useDroppable.active;
+
+  // Combine refs for both drag and drop
+  var setNodeRef = function setNodeRef(node) {
+    setDragNodeRef(node);
+    setDropNodeRef(node);
+  };
+  var style = {
+    transform: _utilities.CSS.Translate.toString(transform)
+  };
+  return /*#__PURE__*/_react["default"].createElement(StyledContent, (0, _extends2["default"])({
+    ref: setNodeRef,
+    style: style,
+    dragged: isDragging,
+    over: isOver
+  }, dragAttributes, dragListeners), /*#__PURE__*/_react["default"].createElement(BlankContent, {
+    id: id,
+    disabled: disabled,
+    duplicates: duplicates,
+    choice: choice,
+    isOver: isOver,
+    dragItem: dragItem === null || dragItem === void 0 || (_dragItem$data = dragItem.data) === null || _dragItem$data === void 0 ? void 0 : _dragItem$data.current,
+    correct: correct,
+    onChange: onChange,
+    emptyResponseAreaWidth: emptyResponseAreaWidth,
+    emptyResponseAreaHeight: emptyResponseAreaHeight,
+    instanceId: instanceId
+  }));
+}
+DragDropBlank.defaultProps = {
+  emptyResponseAreaWidth: 0,
+  emptyResponseAreaHeight: 0
+};
+DragDropBlank.propTypes = {
+  id: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
+  disabled: _propTypes["default"].bool,
+  duplicates: _propTypes["default"].bool,
+  choice: _propTypes["default"].object,
+  correct: _propTypes["default"].bool,
+  onChange: _propTypes["default"].func,
+  emptyResponseAreaWidth: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
+  emptyResponseAreaHeight: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
+  instanceId: _propTypes["default"].string
+};
+var _default = exports["default"] = DragDropBlank;
+//# sourceMappingURL=blank.js.map