@pie-lib/mask-markup 3.1.0-beta.6 → 3.1.1

package/CHANGELOG.md

@@ -3,6 +3,93 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.1.1](https://github.com/pie-framework/pie-lib/compare/@pie-lib/mask-markup@3.1.0...@pie-lib/mask-markup@3.1.1) (2026-09-02)
+
+**Note:** Version bump only for package @pie-lib/mask-markup
+
+# [3.1.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/mask-markup@3.0.17...@pie-lib/mask-markup@3.1.0) (2026-08-26)
+
+### Bug Fixes
+
+- **mask-markup:** scope dropdown menu to Paper slot PIE-853 ([c714042](https://github.com/pie-framework/pie-lib/commit/c714042b9c41dc72103fcc9b2a54cf8fe0365555))
+
+### Features
+
+- **mask-markup:** add additional keyboard navigation (Tab/Shift+Tab placement) PIE-803 and click-to-select/click-to-place functionality PIE-796 for drag-in-the-blank ([e30b166](https://github.com/pie-framework/pie-lib/commit/e30b1667f0cee547ecbd0dcd1d02a969d98afeb4))
+
+## [3.0.17](https://github.com/pie-framework/pie-lib/compare/@pie-lib/mask-markup@3.0.16...@pie-lib/mask-markup@3.0.17) (2026-08-22)
+
+### Bug Fixes
+
+- made sure template field renders all marks [PIE-518] ([ad97d4f](https://github.com/pie-framework/pie-lib/commit/ad97d4ff98821544ca944741643601eeaefbffc5))
+
+## [3.0.16](https://github.com/pie-framework/pie-lib/compare/@pie-lib/mask-markup@3.0.15...@pie-lib/mask-markup@3.0.16) (2026-08-21)
+
+**Note:** Version bump only for package @pie-lib/mask-markup
+
+## [3.0.15](https://github.com/pie-framework/pie-lib/compare/@pie-lib/mask-markup@3.0.14...@pie-lib/mask-markup@3.0.15) (2026-08-18)
+
+**Note:** Version bump only for package @pie-lib/mask-markup
+
+## [3.0.14](https://github.com/pie-framework/pie-lib/compare/@pie-lib/mask-markup@3.0.13...@pie-lib/mask-markup@3.0.14) (2026-08-13)
+
+**Note:** Version bump only for package @pie-lib/mask-markup
+
+## [3.0.13](https://github.com/pie-framework/pie-lib/compare/@pie-lib/mask-markup@3.0.12...@pie-lib/mask-markup@3.0.13) (2026-07-31)
+
+### Bug Fixes
+
+- made sure the numbers near the fraction have the same font size as the fraction [PIE-755] ([1c6d035](https://github.com/pie-framework/pie-lib/commit/1c6d03581470303e750cb14e5edcd08ba2eaf617))
+- **mask-markup:** handle measurment of choices with text and images PIE-679 ([48d9d69](https://github.com/pie-framework/pie-lib/commit/48d9d693ca2fceed6a6213106dbc541e4f29d01d))
+
+## [3.0.12](https://github.com/pie-framework/pie-lib/compare/@pie-lib/mask-markup@3.0.11...@pie-lib/mask-markup@3.0.12) (2026-07-08)
+
+### Bug Fixes
+
+- **mask-markup:** update width and height calculations to include padding and border adjustments PIE-679 ([7142a76](https://github.com/pie-framework/pie-lib/commit/7142a7629da6db7fea621809a38d2cb280bc063f))
+
+## [3.0.11](https://github.com/pie-framework/pie-lib/compare/@pie-lib/mask-markup@3.0.10...@pie-lib/mask-markup@3.0.11) (2026-07-01)
+
+**Note:** Version bump only for package @pie-lib/mask-markup
+
+## [3.0.10](https://github.com/pie-framework/pie-lib/compare/@pie-lib/mask-markup@3.0.9...@pie-lib/mask-markup@3.0.10) (2026-06-25)
+
+### Bug Fixes
+
+- **blank:** prevent ResizeObserver feedback loops and re-measure dimensions on visibility ([009cf1d](https://github.com/pie-framework/pie-lib/commit/009cf1d56af3f5f436d2f09b33e4d6d0bfad8609))
+
+## [3.0.9](https://github.com/pie-framework/pie-lib/compare/@pie-lib/mask-markup@3.0.8...@pie-lib/mask-markup@3.0.9) (2026-06-19)
+
+### Bug Fixes
+
+- **mask-markup/choice:** add fallback dimensions for dragging state in Choice component PIE-693 ([87b7782](https://github.com/pie-framework/pie-lib/commit/87b77824785bf7485b1b3e986749fc877224d154))
+
+## [3.0.8](https://github.com/pie-framework/pie-lib/compare/@pie-lib/mask-markup@3.0.7...@pie-lib/mask-markup@3.0.8) (2026-06-17)
+
+**Note:** Version bump only for package @pie-lib/mask-markup
+
+## [3.0.7](https://github.com/pie-framework/pie-lib/compare/@pie-lib/mask-markup@3.0.6...@pie-lib/mask-markup@3.0.7) (2026-06-12)
+
+### Bug Fixes
+
+- correct @emotion/style typo to @emotion/styled in package deps PIE-678 ([d529ac7](https://github.com/pie-framework/pie-lib/commit/d529ac7bc3dfa94d8037688452d4c70c66f2590b))
+
+## [3.0.6](https://github.com/pie-framework/pie-lib/compare/@pie-lib/mask-markup@3.0.5...@pie-lib/mask-markup@3.0.6) (2026-06-03)
+
+### Bug Fixes
+
+- render math when the correct value changes [PIE-600] ([38a0024](https://github.com/pie-framework/pie-lib/commit/38a002426ae495e98c2fd1355f7cb83069a7dcdc))
+
+## [3.0.5](https://github.com/pie-framework/pie-lib/compare/@pie-lib/mask-markup@3.0.4...@pie-lib/mask-markup@3.0.5) (2026-06-01)
+
+### Bug Fixes
+
+- made sure selected item in dropdown is focused first when the menu is opened [PIE-438] ([a1cdc68](https://github.com/pie-framework/pie-lib/commit/a1cdc686deec2991e543393b17b98181b074d324))
+
+## [3.0.4](https://github.com/pie-framework/pie-lib/compare/@pie-lib/mask-markup@3.0.3...@pie-lib/mask-markup@3.0.4) (2026-05-21)
+
+**Note:** Version bump only for package @pie-lib/mask-markup
+
 ## [3.0.3](https://github.com/pie-framework/pie-lib/compare/@pie-lib/mask-markup@3.0.2...@pie-lib/mask-markup@3.0.3) (2026-05-15)
 
 ### Bug Fixes

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

@@ -22,13 +22,14 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 var DRAG_TYPE = exports.DRAG_TYPE = 'MaskBlank';
 var StyledChoice = (0, _styles.styled)('span')(function (_ref) {
   var theme = _ref.theme,
-    disabled = _ref.disabled;
+    disabled = _ref.disabled,
+    selected = _ref.selected;
   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'
+    display: 'inline-flex',
+    opacity: selected ? 0.7 : 1
   }, disabled && {});
 });
 var StyledChip = (0, _styles.styled)(_Chip["default"])(function () {
@@ -74,7 +75,9 @@ function Choice(_ref2) {
   var _rootRef$current, _rootRef$current2;
   var choice = _ref2.choice,
     disabled = _ref2.disabled,
-    instanceId = _ref2.instanceId;
+    instanceId = _ref2.instanceId,
+    selectedItem = _ref2.selectedItem,
+    onSelectClick = _ref2.onSelectClick;
   var rootRef = (0, _react.useRef)(null);
   var _useDraggable = (0, _core.useDraggable)({
       id: "choice-".concat(choice.id),
@@ -93,6 +96,17 @@ function Choice(_ref2) {
   (0, _react.useEffect)(function () {
     (0, _mathRendering.renderMath)(rootRef.current);
   }, [choice.value]);
+  var isSelected = !!selectedItem && selectedItem.fromChoice === true && selectedItem.choice.id === choice.id;
+  var handleClick = function handleClick(e) {
+    if (disabled) return;
+    e.stopPropagation();
+    onSelectClick === null || onSelectClick === void 0 || onSelectClick({
+      choice: choice,
+      instanceId: instanceId,
+      fromChoice: true,
+      type: DRAG_TYPE
+    });
+  };
   return /*#__PURE__*/_react["default"].createElement(StyledChoice, (0, _extends2["default"])({
     ref: setNodeRef,
     style: isDragging ? {
@@ -100,7 +114,9 @@ function Choice(_ref2) {
       // min-width of chip is 90px, so if we don't have the width, we can use 90px as a fallback
       height: ((_rootRef$current2 = rootRef.current) === null || _rootRef$current2 === void 0 ? void 0 : _rootRef$current2.offsetHeight) || 32 // min-height of chip is 32px, so if we don't have the height, we can use 32px as a fallback
     } : {},
-    disabled: disabled
+    disabled: disabled,
+    selected: isSelected,
+    onClick: handleClick
   }, listeners, attributes), /*#__PURE__*/_react["default"].createElement(StyledChip, {
     clickable: false,
     disabled: disabled,
@@ -115,6 +131,8 @@ function Choice(_ref2) {
 Choice.propTypes = {
   choice: _propTypes["default"].object.isRequired,
   disabled: _propTypes["default"].bool,
-  instanceId: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number])
+  instanceId: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
+  selectedItem: _propTypes["default"].object,
+  onSelectClick: _propTypes["default"].func
 };
 //# sourceMappingURL=choice.js.map

package/lib/choices/choice.js.map

@@ -1 +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  '& mjx-mn:has(~ mjx-mfrac), mjx-mfrac ~ mjx-mn': {\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 || 90, // min-width of chip is 90px, so if we don't have the width, we can use 90px as a fallback\n              height: rootRef.current?.offsetHeight || 32, // min-height of chip is 32px, so if we don't have the height, we can use 32px as a fallback\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":[]}
+{"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","selected","border","concat","palette","primary","main","margin","spacing","transform","display","opacity","StyledChip","Chip","backgroundColor","color","white","text","alignItems","height","minHeight","fontSize","whiteSpace","maxWidth","pointerEvents","borderRadius","paddingTop","paddingBottom","StyledChipLabel","padding","Choice","_ref2","_rootRef$current","_rootRef$current2","choice","instanceId","selectedItem","onSelectClick","rootRef","useRef","_useDraggable","useDraggable","id","data","fromChoice","type","attributes","listeners","setNodeRef","isDragging","useEffect","renderMath","current","value","isSelected","handleClick","stopPropagation","createElement","_extends2","ref","style","width","offsetWidth","offsetHeight","onClick","clickable","label","dangerouslySetInnerHTML","__html","propTypes","PropTypes","object","isRequired","bool","oneOfType","string","number","func"],"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, selected }) => ({\n  border: `solid 0px ${theme.palette.primary.main}`,\n  margin: theme.spacing(0.5),\n  transform: 'translate(0, 0)',\n  display: 'inline-flex',\n  opacity: selected ? 0.7 : 1,\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  '& mjx-mn:has(~ mjx-mfrac), mjx-mfrac ~ mjx-mn': {\n    fontSize: '120% !important',\n  },\n}));\n\nexport default function Choice({ choice, disabled, instanceId, selectedItem, onSelectClick }) {\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  const isSelected = !!selectedItem && selectedItem.fromChoice === true && selectedItem.choice.id === choice.id;\n\n  const handleClick = (e) => {\n    if (disabled) return;\n\n    e.stopPropagation();\n    onSelectClick?.({ choice, instanceId, fromChoice: true, type: DRAG_TYPE });\n  };\n\n  return (\n    <StyledChoice\n      ref={setNodeRef}\n      style={\n        isDragging\n          ? {\n              width: rootRef.current?.offsetWidth || 90, // min-width of chip is 90px, so if we don't have the width, we can use 90px as a fallback\n              height: rootRef.current?.offsetHeight || 32, // min-height of chip is 32px, so if we don't have the height, we can use 32px as a fallback\n            }\n          : {}\n      }\n      disabled={disabled}\n      selected={isSelected}\n      onClick={handleClick}\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  selectedItem: PropTypes.object,\n  onSelectClick: PropTypes.func,\n};\n"],"mappings":"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","ignoreList":[]}

package/lib/choices/index.js

@@ -49,18 +49,34 @@ var Choices = exports["default"] = /*#__PURE__*/function (_React$Component) {
           };
       }
     });
+    (0, _defineProperty2["default"])(_this, "handlePoolClick", function () {
+      var _this$props = _this.props,
+        disabled = _this$props.disabled,
+        selectedItem = _this$props.selectedItem,
+        onPlacementClick = _this$props.onPlacementClick;
+      if (disabled) return;
+      if (selectedItem) {
+        // `undefined` targetId means "the choice board" — drag-in-the-blank.jsx's
+        // commitPlacement routes it to removing the item from wherever it currently is.
+        onPlacementClick === null || onPlacementClick === void 0 || onPlacementClick(undefined);
+      }
+
+      // Pool background clicked with nothing selected: nothing to place.
+    });
     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 _this$props2 = this.props,
+        disabled = _this$props2.disabled,
+        duplicates = _this$props2.duplicates,
+        choices = _this$props2.choices,
+        value = _this$props2.value,
+        instanceId = _this$props2.instanceId,
+        selectedItem = _this$props2.selectedItem,
+        onSelectClick = _this$props2.onSelectClick;
       var filteredChoices = choices.filter(function (c) {
         if (duplicates === true) {
           return true;
@@ -74,7 +90,8 @@ var Choices = exports["default"] = /*#__PURE__*/function (_React$Component) {
         minWidth: '100px'
       });
       return /*#__PURE__*/_react["default"].createElement("div", {
-        style: elementStyle
+        style: elementStyle,
+        onClick: this.handlePoolClick
       }, /*#__PURE__*/_react["default"].createElement(_drag.DragDroppablePlaceholder, {
         disabled: disabled,
         instanceId: instanceId
@@ -83,7 +100,9 @@ var Choices = exports["default"] = /*#__PURE__*/function (_React$Component) {
           key: "".concat(c.value, "-").concat(index),
           disabled: disabled,
           choice: c,
-          instanceId: instanceId
+          instanceId: instanceId,
+          selectedItem: selectedItem,
+          onSelectClick: onSelectClick
         });
       })));
     }
@@ -98,6 +117,10 @@ var Choices = exports["default"] = /*#__PURE__*/function (_React$Component) {
   })),
   value: _propTypes["default"].object,
   choicePosition: _propTypes["default"].string.isRequired,
-  instanceId: _propTypes["default"].string // Added for drag isolation
+  instanceId: _propTypes["default"].string,
+  // Added for drag isolation
+  selectedItem: _propTypes["default"].object,
+  onSelectClick: _propTypes["default"].func,
+  onPlacementClick: _propTypes["default"].func
 });
 //# sourceMappingURL=index.js.map

package/lib/choices/index.js.map

@@ -1 +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":[]}
+{"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","_this$props","disabled","selectedItem","onPlacementClick","undefined","_inherits2","_createClass2","key","value","render","_this$props2","duplicates","choices","instanceId","onSelectClick","filteredChoices","c","foundChoice","findKey","v","id","elementStyle","getStyleForWrapper","minWidth","createElement","style","onClick","handlePoolClick","DragDroppablePlaceholder","map","index","choice","React","Component","PropTypes","bool","arrayOf","shape","label","string","object","isRequired","func"],"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    selectedItem: PropTypes.object,\n    onSelectClick: PropTypes.func,\n    onPlacementClick: PropTypes.func,\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  handlePoolClick = () => {\n    const { disabled, selectedItem, onPlacementClick } = this.props;\n\n    if (disabled) return;\n\n    if (selectedItem) {\n      // `undefined` targetId means \"the choice board\" — drag-in-the-blank.jsx's\n      // commitPlacement routes it to removing the item from wherever it currently is.\n      onPlacementClick?.(undefined);\n    }\n\n    // Pool background clicked with nothing selected: nothing to place.\n  };\n\n  render() {\n    const { disabled, duplicates, choices, value, instanceId, selectedItem, onSelectClick } = 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} onClick={this.handlePoolClick}>\n        <DragDroppablePlaceholder disabled={disabled} instanceId={instanceId}>\n          {filteredChoices.map((c, index) => (\n            <Choice\n              key={`${c.value}-${index}`}\n              disabled={disabled}\n              choice={c}\n              instanceId={instanceId}\n              selectedItem={selectedItem}\n              onSelectClick={onSelectClick}\n            />\n          ))}\n        </DragDroppablePlaceholder>\n      </div>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/lib/components/blank.js

@@ -14,7 +14,6 @@ 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"));
@@ -26,21 +25,31 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 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({
+    over = _ref.over,
+    selected = _ref.selected,
+    showsPointerCursor = _ref.showsPointerCursor;
+  return _objectSpread(_objectSpread(_objectSpread({
     border: "solid 0px ".concat(_renderUi.color.primary()),
     minWidth: '200px',
-    touchAction: 'none',
     overflow: 'hidden',
     whiteSpace: 'nowrap',
-    opacity: 1
+    opacity: 1,
+    cursor: 'default'
   }, over && {
     whiteSpace: 'nowrap',
     overflow: 'hidden'
-  }), dragged && {
+  }), (dragged || selected) && {
     opacity: 0.5
+  }), showsPointerCursor && {
+    '&:hover': {
+      cursor: 'pointer'
+    }
   });
 });
+var StyledDragHandle = (0, _styles.styled)('span')({
+  display: 'inline-flex',
+  touchAction: 'none'
+});
 var StyledChip = (0, _styles.styled)(_Chip["default"])(function () {
   return {
     backgroundColor: _renderUi.color.background(),
@@ -333,24 +342,43 @@ function DragDropBlank(_ref3) {
     onChange = _ref3.onChange,
     emptyResponseAreaWidth = _ref3.emptyResponseAreaWidth,
     emptyResponseAreaHeight = _ref3.emptyResponseAreaHeight,
-    instanceId = _ref3.instanceId;
+    instanceId = _ref3.instanceId,
+    selectedItem = _ref3.selectedItem,
+    onSelectClick = _ref3.onSelectClick,
+    onPlacementClick = _ref3.onPlacementClick;
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    isHovered = _useState4[0],
+    setIsHovered = _useState4[1];
+  var dragData = {
+    id: id,
+    choice: choice,
+    instanceId: instanceId,
+    fromChoice: false,
+    // This is from a blank, not from choices
+    type: 'MaskBlank'
+  };
+
   // 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'
+      data: dragData,
+      // dnd-kit's own `attributes` default tabIndex to 0 unconditionally, even when
+      // `disabled` — so a non-draggable (empty) blank stays a native Tab stop of its own.
+      // For a drop-zone (droppable blank), that duplicates the outer wrapper's own tab stop
+      // (see isNativeTabStop below) at the exact same position, so Tab/Shift+Tab has to
+      // pass through both to move anywhere visibly, making every other press look like a
+      // no-op. Drop it out of the tab order here whenever it isn't independently
+      // reachable/interactive, leaving the outer wrapper (for an empty blank) or
+      // nothing (for a disabled blank) as the sole stop.
+      attributes: {
+        tabIndex: choice && !disabled ? 0 : -1
       }
     }),
     dragAttributes = _useDraggable.attributes,
     dragListeners = _useDraggable.listeners,
     setDragNodeRef = _useDraggable.setNodeRef,
-    transform = _useDraggable.transform,
     isDragging = _useDraggable.isDragging;
 
   // Setup droppable functionality
@@ -365,33 +393,79 @@ function DragDropBlank(_ref3) {
     setDropNodeRef = _useDroppable.setNodeRef,
     isOver = _useDroppable.isOver,
     dragItem = _useDroppable.active;
+  var isSelected = !!selectedItem && selectedItem.fromChoice === false && selectedItem.id === id;
+  var handleClick = function handleClick() {
+    if (disabled) return;
+    if (isSelected) {
+      // Clicking this blank's already-selected content again deselects it.
+      onSelectClick === null || onSelectClick === void 0 || onSelectClick(dragData);
+    } else if (selectedItem) {
+      // Something else is selected — place it here, whether this blank is currently
+      // empty or already filled (the same commitPlacement logic drag-and-drop uses).
+      onPlacementClick === null || onPlacementClick === void 0 || onPlacementClick(id);
+    } else if (choice) {
+      // Nothing selected yet, and this blank holds an answer — select it for moving
+      // elsewhere, the same way Tab+Space/Enter does.
+      onSelectClick === null || onSelectClick === void 0 || onSelectClick(dragData);
+    }
 
-  // Combine refs for both drag and drop
-  var setNodeRef = function setNodeRef(node) {
-    setDragNodeRef(node);
-    setDropNodeRef(node);
+    // Empty blank clicked with nothing selected: nothing to place or select.
   };
-  var style = {
-    transform: _utilities.CSS.Translate.toString(transform)
+
+  // An empty blank isn't draggable, so dnd-kit's own attributes (only applied to the
+  // inner node, and only when draggable) never make it tabbable — this outer wrapper
+  // needs its own focus/activation handling so "select a choice, then Tab to a blank
+  // and press Space/Enter" works even when the blank is empty. This is independent of,
+  // and doesn't change, the existing in-drag Tab-cycling (that's driven by an active
+  // dnd-kit drag, not native focus).
+  //
+  // Only made a native Tab stop when NOT draggable (i.e. empty): when the blank is
+  // filled, the inner node is already independently tabbable via dnd-kit's own
+  // attributes for the existing pick-up-to-move gesture, and adding a second, outer Tab
+  // stop for the same visual chip would add an extra stop to the existing Tab order —
+  // the same double-tab-stop bug already found and fixed once in match-list/image-
+  // cloze-association's equivalent code.
+  var isNativeTabStop = !choice && !disabled;
+  var isInnerDraggable = !!choice && !disabled;
+  var handleKeyDown = function handleKeyDown(e) {
+    if (e.code === 'Space' || e.code === 'Enter') {
+      e.preventDefault();
+      handleClick();
+    }
   };
-  return /*#__PURE__*/_react["default"].createElement(StyledContent, (0, _extends2["default"])({
-    ref: setNodeRef,
-    style: style,
+  var hasSelection = !!selectedItem;
+  var showsHoverEffect = isOver || hasSelection && isHovered && !disabled;
+  return /*#__PURE__*/_react["default"].createElement(StyledContent, {
+    ref: setDropNodeRef,
+    role: isNativeTabStop ? 'button' : undefined,
+    tabIndex: isNativeTabStop ? 0 : -1,
+    onClick: handleClick,
+    onKeyDown: isNativeTabStop ? handleKeyDown : undefined,
+    onMouseEnter: function onMouseEnter() {
+      return setIsHovered(true);
+    },
+    onMouseLeave: function onMouseLeave() {
+      return setIsHovered(false);
+    },
     dragged: isDragging,
-    over: isOver
-  }, dragAttributes, dragListeners), /*#__PURE__*/_react["default"].createElement(BlankContent, {
+    over: showsHoverEffect,
+    selected: isSelected,
+    showsPointerCursor: hasSelection && !disabled
+  }, /*#__PURE__*/_react["default"].createElement(StyledDragHandle, (0, _extends2["default"])({
+    ref: setDragNodeRef
+  }, isInnerDraggable ? dragAttributes : {}, dragListeners), /*#__PURE__*/_react["default"].createElement(BlankContent, {
     id: id,
     disabled: disabled,
     duplicates: duplicates,
     choice: choice,
-    isOver: isOver,
+    isOver: showsHoverEffect,
     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,
@@ -406,7 +480,10 @@ DragDropBlank.propTypes = {
   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
+  instanceId: _propTypes["default"].string,
+  selectedItem: _propTypes["default"].object,
+  onSelectClick: _propTypes["default"].func,
+  onPlacementClick: _propTypes["default"].func
 };
 var _default = exports["default"] = DragDropBlank;
 //# sourceMappingURL=blank.js.map