npm - @pie-lib/text-select - Versions diffs - 1.30.0-mui-update.0 → 1.32.0-mui-update.0 - Mend

@pie-lib/text-select 1.30.0-mui-update.0 → 1.32.0-mui-update.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (8) hide show

package/CHANGELOG.md +12 -1
package/lib/token-select/index.js +43 -37
package/lib/token-select/index.js.map +1 -1
package/lib/token-select/token.js +14 -15
package/lib/token-select/token.js.map +1 -1
package/package.json +6 -6
package/src/token-select/index.jsx +51 -51
package/src/token-select/token.jsx +16 -11

package/CHANGELOG.md CHANGED Viewed

@@ -3,7 +3,7 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
-# [1.30.0-mui-update.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/text-select@1.29.0-mui-update.0...@pie-lib/text-select@1.30.0-mui-update.0) (2025-10-31)
+# [1.32.0-mui-update.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/text-select@1.31.0-mui-update.0...@pie-lib/text-select@1.32.0-mui-update.0) (2025-11-03)
 **Note:** Version bump only for package @pie-lib/text-select
@@ -11,6 +11,17 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
+# [1.31.0-mui-update.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/text-select@1.29.0-mui-update.0...@pie-lib/text-select@1.31.0-mui-update.0) (2025-11-03)
+### Bug Fixes
+* refactor text select as renderAsString not used anymore ([9a1aea9](https://github.com/pie-framework/pie-lib/commit/9a1aea9c9cc709a803e30a8477b42ae2136a5061))
 # [1.29.0-mui-update.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/text-select@1.28.2...@pie-lib/text-select@1.29.0-mui-update.0) (2025-10-31)

package/lib/token-select/index.js CHANGED Viewed

@@ -20,7 +20,6 @@ var _styles = require("@mui/material/styles");
 var _clone = _interopRequireDefault(require("lodash/clone"));
 var _debug = _interopRequireDefault(require("debug"));
 var _styleUtils = require("@pie-lib/style-utils");
-var _server = require("react-dom/server");
 var _isEqual = _interopRequireDefault(require("lodash/isEqual"));
 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 _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)); }
@@ -34,7 +33,8 @@ var StyledTokenSelect = (0, _styles.styled)('div')(function () {
     whiteSpace: 'pre'
   }, (0, _styleUtils.noSelect)()), {}, {
     '& p': {
-      whiteSpace: 'break-spaces'
+      whiteSpace: 'break-spaces',
+      margin: 0
     }
   });
 });
@@ -53,39 +53,30 @@ var TokenSelect = exports.TokenSelect = /*#__PURE__*/function (_React$Component)
     });
     (0, _defineProperty2["default"])(_this, "canSelectMore", function (selectedCount) {
       var maxNoOfSelections = _this.props.maxNoOfSelections;
-      if (maxNoOfSelections === 1) {
-        return true;
-      }
+      if (maxNoOfSelections === 1) return true;
       log('[canSelectMore] maxNoOfSelections: ', maxNoOfSelections, 'selectedCount: ', selectedCount);
       return maxNoOfSelections <= 0 || isFinite(maxNoOfSelections) && selectedCount < maxNoOfSelections;
     });
-    /**
-     @function
-     @param { object } event
-      @description
-      each token is wrapped into a span that has Token.rootClassName class and indexkey attribute (represents the index of the token)
-      tokens are updated with the targeted token having the correct value set for 'selected' property
-     */
     (0, _defineProperty2["default"])(_this, "toggleToken", function (event) {
+      var _target$closest, _targetSpanWrapper$da;
       var target = event.target;
       var _this$props = _this.props,
         tokens = _this$props.tokens,
         animationsDisabled = _this$props.animationsDisabled;
       var tokensCloned = (0, _clone["default"])(tokens);
-      var targetSpanWrapper = target.closest(".".concat(_token["default"].rootClassName));
-      var targetedTokenIndex = targetSpanWrapper && targetSpanWrapper.dataset && targetSpanWrapper.dataset.indexkey;
-      var t = targetedTokenIndex && tokensCloned[targetedTokenIndex];
+      var targetSpanWrapper = (_target$closest = target.closest) === null || _target$closest === void 0 ? void 0 : _target$closest.call(target, ".".concat(_token["default"].rootClassName));
+      var targetedTokenIndex = targetSpanWrapper === null || targetSpanWrapper === void 0 || (_targetSpanWrapper$da = targetSpanWrapper.dataset) === null || _targetSpanWrapper$da === void 0 ? void 0 : _targetSpanWrapper$da.indexkey;
+      var t = targetedTokenIndex !== undefined ? tokensCloned[targetedTokenIndex] : undefined;
-      // don't toggle if we are in print mode, token correctness is defined or if it's missing
-      // (missing means that it was evaluated as correct and not selected)
+      // don't toggle if in print mode, correctness is defined, or is missing
       if (t && t.correct === undefined && !animationsDisabled && !t.isMissing) {
         var _this$props2 = _this.props,
           onChange = _this$props2.onChange,
           maxNoOfSelections = _this$props2.maxNoOfSelections;
         var selected = !t.selected;
         if (maxNoOfSelections === 1 && _this.selectedCount() === 1) {
-          var selectedToken = (tokens || []).filter(function (t) {
-            return t.selected;
+          var selectedToken = (tokens || []).filter(function (tk) {
+            return tk.selected;
           });
           var updatedTokens = tokensCloned.map(function (token) {
             if ((0, _isEqual["default"])(token, selectedToken[0])) {
@@ -98,7 +89,7 @@ var TokenSelect = exports.TokenSelect = /*#__PURE__*/function (_React$Component)
             });
           });
           var update = _objectSpread(_objectSpread({}, t), {}, {
-            selected: !t.selected
+            selected: selected
           });
           updatedTokens.splice(targetedTokenIndex, 1, update);
           onChange(updatedTokens);
@@ -108,14 +99,15 @@ var TokenSelect = exports.TokenSelect = /*#__PURE__*/function (_React$Component)
             return;
           }
           var _update = _objectSpread(_objectSpread({}, t), {}, {
-            selected: !t.selected
+            selected: selected
           });
           tokensCloned.splice(targetedTokenIndex, 1, _update);
           onChange(tokensCloned);
         }
       }
     });
-    (0, _defineProperty2["default"])(_this, "generateTokensInHtml", function () {
+    /** Build a React tree instead of an HTML string so Emotion can inject CSS */
+    (0, _defineProperty2["default"])(_this, "generateTokensNodes", function () {
       var _this$props3 = _this.props,
         tokens = _this$props3.tokens,
         disabled = _this$props3.disabled,
@@ -128,19 +120,31 @@ var TokenSelect = exports.TokenSelect = /*#__PURE__*/function (_React$Component)
       var isNewParagraph = function isNewParagraph(text) {
         return text === '\n\n';
       };
-      var reducer = function reducer(accumulator, t, index) {
+      var paragraphs = [];
+      var currentChildren = [];
+      var flushParagraph = function flushParagraph() {
+        // Always push a <p>, even if empty, to mirror previous behavior
+        paragraphs.push(/*#__PURE__*/_react["default"].createElement("p", {
+          key: "p-".concat(paragraphs.length)
+        }, currentChildren));
+        currentChildren = [];
+      };
+      (tokens || []).forEach(function (t, index) {
         var selectable = t.selected || t.selectable && _this.canSelectMore(selectedCount);
         var showCorrectAnswer = t.correct !== undefined && (t.selectable || t.selected);
-        var finalAcc = accumulator;
         if (isNewParagraph(t.text)) {
-          return finalAcc + '</p><p>';
+          flushParagraph();
+          return;
         }
         if (isLineBreak(t.text)) {
-          return finalAcc + '<br>';
+          currentChildren.push(/*#__PURE__*/_react["default"].createElement("br", {
+            key: "br-".concat(index)
+          }));
+          return;
         }
-        if (selectable && !disabled || showCorrectAnswer || t.selected || t.isMissing || animationsDisabled && t.predefined // if we are in print mode
+        if (selectable && !disabled || showCorrectAnswer || t.selected || t.isMissing || animationsDisabled && t.predefined // print mode
         ) {
-          return finalAcc + (0, _server.renderToString)(/*#__PURE__*/_react["default"].createElement(_token["default"], (0, _extends2["default"])({
+          currentChildren.push(/*#__PURE__*/_react["default"].createElement(_token["default"], (0, _extends2["default"])({
             key: index,
             disabled: disabled,
             index: index
@@ -150,11 +154,16 @@ var TokenSelect = exports.TokenSelect = /*#__PURE__*/function (_React$Component)
             animationsDisabled: animationsDisabled
           })));
         } else {
-          return accumulator + t.text;
+          // raw text node – React will escape as needed
+          currentChildren.push(/*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, {
+            key: index
+          }, t.text));
         }
-      };
-      var reduceResult = (tokens || []).reduce(reducer, '<p>');
-      return reduceResult + '</p>';
+      });
+      // flush last paragraph
+      flushParagraph();
+      return paragraphs;
     });
     return _this;
   }
@@ -163,14 +172,11 @@ var TokenSelect = exports.TokenSelect = /*#__PURE__*/function (_React$Component)
     key: "render",
     value: function render() {
       var classNameProp = this.props.className;
-      var html = this.generateTokensInHtml();
+      var nodes = this.generateTokensNodes();
       return /*#__PURE__*/_react["default"].createElement(StyledTokenSelect, {
         className: classNameProp,
-        dangerouslySetInnerHTML: {
-          __html: html
-        },
         onClick: this.toggleToken
-      });
+      }, nodes);
     }
   }]);
 }(_react["default"].Component);

package/lib/token-select/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","names":["_react","_interopRequireDefault","require","_propTypes","_token","_interopRequireWildcard","_styles","_clone","_debug","_styleUtils","_server","_isEqual","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","_typeof","has","get","set","_t","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","_callSuper","_getPrototypeOf2","_possibleConstructorReturn2","_isNativeReflectConstruct","Reflect","construct","constructor","apply","Boolean","prototype","valueOf","ownKeys","keys","getOwnPropertySymbols","filter","enumerable","push","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","log","debug","StyledTokenSelect","styled","backgroundColor","whiteSpace","noSelect","TokenSelect","exports","_React$Component","_this","_classCallCheck2","_len","args","Array","_key","concat","props","tokens","selected","selectedCount","maxNoOfSelections","isFinite","event","target","_this$props","animationsDisabled","tokensCloned","clone","targetSpanWrapper","closest","Token","rootClassName","targetedTokenIndex","dataset","indexkey","correct","undefined","isMissing","_this$props2","onChange","selectedToken","updatedTokens","map","token","isEqual","selectable","update","splice","_this$props3","disabled","highlightChoices","isLineBreak","text","isNewParagraph","reducer","accumulator","index","canSelectMore","showCorrectAnswer","finalAcc","predefined","renderToString","createElement","_extends2","key","highlight","reduceResult","reduce","_inherits2","_createClass2","value","render","classNameProp","className","html","generateTokensInHtml","dangerouslySetInnerHTML","__html","onClick","toggleToken","React","Component","PropTypes","arrayOf","shape","TokenTypes","isRequired","string","func","bool","number","_default"],"sources":["../../src/token-select/index.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport Token, { TokenTypes } from './token';\nimport { styled } from '@mui/material/styles';\nimport clone from 'lodash/clone';\nimport debug from 'debug';\nimport { noSelect } from '@pie-lib/style-utils';\nimport { renderToString } from 'react-dom/server';\nimport isEqual from 'lodash/isEqual';\n\nconst log = debug('@pie-lib:text-select:token-select');\n\nconst StyledTokenSelect = styled('div')(() => ({\n backgroundColor: 'none',\n whiteSpace: 'pre',\n ...noSelect(),\n '& p': {\n whiteSpace: 'break-spaces',\n },\n}));\n\nexport class TokenSelect extends React.Component {\n static propTypes = {\n tokens: PropTypes.arrayOf(PropTypes.shape(TokenTypes)).isRequired,\n className: PropTypes.string,\n onChange: PropTypes.func.isRequired,\n disabled: PropTypes.bool,\n highlightChoices: PropTypes.bool,\n animationsDisabled: PropTypes.bool,\n maxNoOfSelections: PropTypes.number,\n };\n\n static defaultProps = {\n highlightChoices: false,\n maxNoOfSelections: 0,\n tokens: [],\n };\n\n selectedCount = () => this.props.tokens.filter((t) => t.selected).length;\n\n canSelectMore = (selectedCount) => {\n const { maxNoOfSelections } = this.props;\n\n if (maxNoOfSelections === 1) {\n return true;\n }\n\n log('[canSelectMore] maxNoOfSelections: ', maxNoOfSelections, 'selectedCount: ', selectedCount);\n return maxNoOfSelections <= 0 \|\| (isFinite(maxNoOfSelections) && selectedCount < maxNoOfSelections);\n };\n\n /*\n @function\n @param { object } event\n\n @description\n each token is wrapped into a span that has Token.rootClassName class and indexkey attribute (represents the index of the token)\n tokens are updated with the targeted token having the correct value set for 'selected' property\n /\n toggleToken = (event) => {\n const { target } = event;\n const { tokens, animationsDisabled } = this.props;\n const tokensCloned = clone(tokens);\n const targetSpanWrapper = target.closest(`.${Token.rootClassName}`);\n const targetedTokenIndex = targetSpanWrapper && targetSpanWrapper.dataset && targetSpanWrapper.dataset.indexkey;\n const t = targetedTokenIndex && tokensCloned[targetedTokenIndex];\n\n // don't toggle if we are in print mode, token correctness is defined or if it's missing\n // (missing means that it was evaluated as correct and not selected)\n if (t && t.correct === undefined && !animationsDisabled && !t.isMissing) {\n const { onChange, maxNoOfSelections } = this.props;\n const selected = !t.selected;\n\n if (maxNoOfSelections === 1 && this.selectedCount() === 1) {\n const selectedToken = (tokens \|\| []).filter((t) => t.selected);\n\n const updatedTokens = tokensCloned.map((token) => {\n if (isEqual(token, selectedToken[0])) {\n return { ...token, selected: false };\n }\n\n return { ...token, selectable: true };\n });\n\n const update = { ...t, selected: !t.selected };\n\n updatedTokens.splice(targetedTokenIndex, 1, update);\n onChange(updatedTokens);\n } else {\n if (selected && maxNoOfSelections > 0 && this.selectedCount() >= maxNoOfSelections) {\n log('skip toggle max reached');\n return;\n }\n\n const update = { ...t, selected: !t.selected };\n\n tokensCloned.splice(targetedTokenIndex, 1, update);\n onChange(tokensCloned);\n }\n }\n };\n\n generateTokensInHtml = () => {\n const { tokens, disabled, highlightChoices, animationsDisabled } = this.props;\n const selectedCount = this.selectedCount();\n const isLineBreak = (text) => text === '\\n';\n const isNewParagraph = (text) => text === '\\n\\n';\n\n const reducer = (accumulator, t, index) => {\n const selectable = t.selected \|\| (t.selectable && this.canSelectMore(selectedCount));\n const showCorrectAnswer = t.correct !== undefined && (t.selectable \|\| t.selected);\n let finalAcc = accumulator;\n\n if (isNewParagraph(t.text)) {\n return finalAcc + '</p><p>';\n }\n\n if (isLineBreak(t.text)) {\n return finalAcc + '<br>';\n }\n\n if (\n (selectable && !disabled) \|\|\n showCorrectAnswer \|\|\n t.selected \|\|\n t.isMissing \|\|\n (animationsDisabled && t.predefined) // if we are in print mode\n ) {\n return (\n finalAcc +\n renderToString(\n <Token\n key={index}\n disabled={disabled}\n index={index}\n {...t}\n selectable={selectable}\n highlight={highlightChoices}\n animationsDisabled={animationsDisabled}\n />,\n )\n );\n } else {\n return accumulator + t.text;\n }\n };\n\n const reduceResult = (tokens \|\| []).reduce(reducer, '<p>');\n\n return reduceResult + '</p>';\n };\n\n render() {\n const { className: classNameProp } = this.props;\n const html = this.generateTokensInHtml();\n\n return <StyledTokenSelect className={classNameProp} dangerouslySetInnerHTML={{ __html: html }} onClick={this.toggleToken} />;\n }\n}\n\nexport default TokenSelect;\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"file":"index.js","names":["_react","_interopRequireDefault","require","_propTypes","_token","_interopRequireWildcard","_styles","_clone","_debug","_styleUtils","_isEqual","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","_typeof","has","get","set","_t","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","_callSuper","_getPrototypeOf2","_possibleConstructorReturn2","_isNativeReflectConstruct","Reflect","construct","constructor","apply","Boolean","prototype","valueOf","ownKeys","keys","getOwnPropertySymbols","filter","enumerable","push","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","log","debug","StyledTokenSelect","styled","backgroundColor","whiteSpace","noSelect","margin","TokenSelect","exports","_React$Component","_this","_classCallCheck2","_len","args","Array","_key","concat","props","tokens","selected","selectedCount","maxNoOfSelections","isFinite","event","_target$closest","_targetSpanWrapper$da","target","_this$props","animationsDisabled","tokensCloned","clone","targetSpanWrapper","closest","Token","rootClassName","targetedTokenIndex","dataset","indexkey","undefined","correct","isMissing","_this$props2","onChange","selectedToken","tk","updatedTokens","map","token","isEqual","selectable","update","splice","_this$props3","disabled","highlightChoices","isLineBreak","text","isNewParagraph","paragraphs","currentChildren","flushParagraph","createElement","key","index","canSelectMore","showCorrectAnswer","predefined","_extends2","highlight","Fragment","_inherits2","_createClass2","value","render","classNameProp","className","nodes","generateTokensNodes","onClick","toggleToken","React","Component","PropTypes","arrayOf","shape","TokenTypes","isRequired","string","func","bool","number","_default"],"sources":["../../src/token-select/index.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport Token, { TokenTypes } from './token';\nimport { styled } from '@mui/material/styles';\nimport clone from 'lodash/clone';\nimport debug from 'debug';\nimport { noSelect } from '@pie-lib/style-utils';\nimport isEqual from 'lodash/isEqual';\n\nconst log = debug('@pie-lib:text-select:token-select');\n\nconst StyledTokenSelect = styled('div')(() => ({\n backgroundColor: 'none',\n whiteSpace: 'pre',\n ...noSelect(),\n '& p': {\n whiteSpace: 'break-spaces',\n margin: 0,\n },\n}));\n\nexport class TokenSelect extends React.Component {\n static propTypes = {\n tokens: PropTypes.arrayOf(PropTypes.shape(TokenTypes)).isRequired,\n className: PropTypes.string,\n onChange: PropTypes.func.isRequired,\n disabled: PropTypes.bool,\n highlightChoices: PropTypes.bool,\n animationsDisabled: PropTypes.bool,\n maxNoOfSelections: PropTypes.number,\n };\n\n static defaultProps = {\n highlightChoices: false,\n maxNoOfSelections: 0,\n tokens: [],\n };\n\n selectedCount = () => this.props.tokens.filter((t) => t.selected).length;\n\n canSelectMore = (selectedCount) => {\n const { maxNoOfSelections } = this.props;\n\n if (maxNoOfSelections === 1) return true;\n\n log('[canSelectMore] maxNoOfSelections: ', maxNoOfSelections, 'selectedCount: ', selectedCount);\n return maxNoOfSelections <= 0 \|\| (isFinite(maxNoOfSelections) && selectedCount < maxNoOfSelections);\n };\n\n toggleToken = (event) => {\n const { target } = event;\n const { tokens, animationsDisabled } = this.props;\n const tokensCloned = clone(tokens);\n\n const targetSpanWrapper = target.closest?.(`.${Token.rootClassName}`);\n const targetedTokenIndex = targetSpanWrapper?.dataset?.indexkey;\n const t = targetedTokenIndex !== undefined ? tokensCloned[targetedTokenIndex] : undefined;\n\n // don't toggle if in print mode, correctness is defined, or is missing\n if (t && t.correct === undefined && !animationsDisabled && !t.isMissing) {\n const { onChange, maxNoOfSelections } = this.props;\n const selected = !t.selected;\n\n if (maxNoOfSelections === 1 && this.selectedCount() === 1) {\n const selectedToken = (tokens \|\| []).filter((tk) => tk.selected);\n const updatedTokens = tokensCloned.map((token) => {\n if (isEqual(token, selectedToken[0])) {\n return { ...token, selected: false };\n }\n return { ...token, selectable: true };\n });\n\n const update = { ...t, selected };\n updatedTokens.splice(targetedTokenIndex, 1, update);\n onChange(updatedTokens);\n } else {\n if (selected && maxNoOfSelections > 0 && this.selectedCount() >= maxNoOfSelections) {\n log('skip toggle max reached');\n return;\n }\n const update = { ...t, selected };\n tokensCloned.splice(targetedTokenIndex, 1, update);\n onChange(tokensCloned);\n }\n }\n };\n\n /** Build a React tree instead of an HTML string so Emotion can inject CSS */\n generateTokensNodes = () => {\n const { tokens, disabled, highlightChoices, animationsDisabled } = this.props;\n const selectedCount = this.selectedCount();\n\n const isLineBreak = (text) => text === '\\n';\n const isNewParagraph = (text) => text === '\\n\\n';\n\n const paragraphs = [];\n let currentChildren = [];\n\n const flushParagraph = () => {\n // Always push a <p>, even if empty, to mirror previous behavior\n paragraphs.push(<p key={`p-${paragraphs.length}`}>{currentChildren}</p>);\n currentChildren = [];\n };\n\n (tokens \|\| []).forEach((t, index) => {\n const selectable = t.selected \|\| (t.selectable && this.canSelectMore(selectedCount));\n const showCorrectAnswer = t.correct !== undefined && (t.selectable \|\| t.selected);\n\n if (isNewParagraph(t.text)) {\n flushParagraph();\n return;\n }\n\n if (isLineBreak(t.text)) {\n currentChildren.push(<br key={`br-${index}`} />);\n return;\n }\n\n if (\n (selectable && !disabled) \|\|\n showCorrectAnswer \|\|\n t.selected \|\|\n t.isMissing \|\|\n (animationsDisabled && t.predefined) // print mode\n ) {\n currentChildren.push(\n <Token\n key={index}\n disabled={disabled}\n index={index}\n {...t}\n selectable={selectable}\n highlight={highlightChoices}\n animationsDisabled={animationsDisabled}\n />\n );\n } else {\n // raw text node – React will escape as needed\n currentChildren.push(<React.Fragment key={index}>{t.text}</React.Fragment>);\n }\n });\n\n // flush last paragraph\n flushParagraph();\n\n return paragraphs;\n };\n\n render() {\n const { className: classNameProp } = this.props;\n const nodes = this.generateTokensNodes();\n\n return (\n <StyledTokenSelect className={classNameProp} onClick={this.toggleToken}>\n {nodes}\n </StyledTokenSelect>\n );\n }\n}\n\nexport default TokenSelect;"],"mappings":"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","ignoreList":[]}

package/lib/token-select/token.js CHANGED Viewed

@@ -99,7 +99,7 @@ var StyledMissingContainer = (0, _styles.styled)(StyledCommonTokenStyle)(functio
     border: "".concat(_renderUi.color.incorrectWithIcon(), " dashed 2px")
   };
 });
-var StyledCorrectnessIcon = (0, _styles.styled)('div')(function () {
+var StyledCorrectnessIcon = (0, _styles.styled)('span')(function () {
   return {
     color: _renderUi.color.white(),
     position: 'absolute',
@@ -107,7 +107,8 @@ var StyledCorrectnessIcon = (0, _styles.styled)('div')(function () {
     left: '-8px',
     borderRadius: '50%',
     fontSize: '12px',
-    padding: '2px'
+    padding: '2px',
+    display: 'inline-block'
   };
 });
 var StyledCorrectIcon = (0, _styles.styled)(StyledCorrectnessIcon)(function () {
@@ -123,21 +124,19 @@ var StyledIncorrectIcon = (0, _styles.styled)(StyledCorrectnessIcon)(function ()
 var Wrapper = function Wrapper(_ref4) {
   var useWrapper = _ref4.useWrapper,
     children = _ref4.children,
-    classNameContainer = _ref4.classNameContainer,
-    iconClass = _ref4.iconClass,
+    Container = _ref4.Container,
+    IconComponent = _ref4.IconComponent,
     Icon = _ref4.Icon;
-  return useWrapper ? /*#__PURE__*/_react["default"].createElement("span", {
-    className: classNameContainer
-  }, children, /*#__PURE__*/_react["default"].createElement(Icon, {
-    className: iconClass
-  })) : children;
+  return useWrapper ? /*#__PURE__*/_react["default"].createElement(Container, null, children, Icon && IconComponent ? /*#__PURE__*/_react["default"].createElement(IconComponent, null, /*#__PURE__*/_react["default"].createElement(Icon, {
+    fontSize: "inherit"
+  })) : null) : children;
 };
 Wrapper.propTypes = {
   useWrapper: _propTypes["default"].bool,
-  classNameContainer: _propTypes["default"].string,
-  iconClass: _propTypes["default"].string,
-  Icon: _propTypes["default"].func,
-  children: _propTypes["default"].element
+  Container: _propTypes["default"].elementType,
+  IconComponent: _propTypes["default"].elementType,
+  Icon: _propTypes["default"].elementType,
+  children: _propTypes["default"].node
 };
 var TokenTypes = exports.TokenTypes = {
   text: _propTypes["default"].string,
@@ -219,8 +218,8 @@ var Token = exports.Token = /*#__PURE__*/function (_React$Component) {
       var TokenComponent = Component || StyledToken;
       return /*#__PURE__*/_react["default"].createElement(Wrapper, {
         useWrapper: correct !== undefined || isMissing,
-        classNameContainer: Container,
-        iconClass: IconComponent,
+        Container: Container,
+        IconComponent: IconComponent,
         Icon: Icon
       }, /*#__PURE__*/_react["default"].createElement(TokenComponent, {
         className: className,

package/lib/token-select/token.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"token.js","names":["_react","_interopRequireDefault","require","_propTypes","_styles","_classnames","_Check","_Close","_renderUi","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","LINE_HEIGHT_MULTIPLIER","CORRECTNESS_LINE_HEIGHT_MULTIPLIER","CORRECTNESS_PADDING","StyledToken","styled","_ref","theme","cursor","textIndent","color","disabled","backgroundColor","blueGrey100","concat","breakpoints","values","md","blueGrey300","palette","common","black","lineHeight","spacing","border","blueGrey900","borderRadius","blueGrey600","text","display","StyledCommonTokenStyle","_ref3","position","padding","StyledCorrectContainer","correctTertiary","StyledIncorrectContainer","incorrectWithIcon","StyledMissingContainer","StyledCorrectnessIcon","white","top","left","fontSize","StyledCorrectIcon","StyledIncorrectIcon","Wrapper","_ref4","useWrapper","children","classNameContainer","iconClass","Icon","createElement","className","propTypes","PropTypes","bool","string","func","element","TokenTypes","exports","selectable","Token","_React$Component","_this","_classCallCheck2","_len","args","Array","_key","_this$props","props","selected","classNameProp","highlight","correct","animationsDisabled","isMissing","isTouchEnabled","window","navigator","maxTouchPoints","msMaxTouchPoints","baseClassName","rootClassName","Container","IconComponent","undefined","classNames","Component","isCorrect","Check","Close","_inherits2","_createClass2","key","value","render","_this$props2","index","_this$getClassAndIcon","getClassAndIconConfig","TokenComponent","dangerouslySetInnerHTML","__html","replace","React","isRequired","_default"],"sources":["../../src/token-select/token.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { styled } from '@mui/material/styles';\nimport classNames from 'classnames';\nimport Check from '@mui/icons-material/Check';\nimport Close from '@mui/icons-material/Close';\n\nimport { color } from '@pie-lib/render-ui';\n\n// we need to use a larger line height for the token to be more readable\nconst LINE_HEIGHT_MULTIPLIER = 3.2;\n// we need a bit more space for correctness indicators\nconst CORRECTNESS_LINE_HEIGHT_MULTIPLIER = 3.4;\nconst CORRECTNESS_PADDING = 2;\n\n// Styled components for different token states\nconst StyledToken = styled('span')(({ theme }) => ({\n cursor: 'pointer',\n textIndent: 0,\n '&.disabled': {\n cursor: 'inherit',\n color: color.disabled(),\n },\n '&.disabledBlack': {\n cursor: 'inherit',\n },\n '&.disabledAndSelected': {\n backgroundColor: color.blueGrey100(),\n },\n [`@media (min-width: ${theme.breakpoints.values.md}px)`]: {\n '&.selectable:hover': {\n backgroundColor: color.blueGrey300(),\n color: theme.palette.common.black,\n '& > ': {\n backgroundColor: color.blueGrey300(),\n },\n },\n },\n '&.selected': {\n backgroundColor: color.blueGrey100(),\n color: theme.palette.common.black,\n lineHeight: `${theme.spacing(1) LINE_HEIGHT_MULTIPLIER}px`,\n border: `solid 2px ${color.blueGrey900()}`,\n borderRadius: '4px',\n '& > ': {\n backgroundColor: color.blueGrey100(),\n },\n },\n '&.highlight': {\n border: `dashed 2px ${color.blueGrey600()}`,\n borderRadius: '4px',\n lineHeight: `${theme.spacing(1) LINE_HEIGHT_MULTIPLIER}px`,\n },\n '&.print': {\n border: `dashed 2px ${color.blueGrey600()}`,\n borderRadius: '4px',\n lineHeight: `${theme.spacing(1) * LINE_HEIGHT_MULTIPLIER}px`,\n color: color.text(),\n },\n '&.custom': {\n display: 'initial',\n },\n}));\n\nconst StyledCommonTokenStyle = styled('span')(({ theme }) => ({\n position: 'relative',\n borderRadius: '4px',\n color: theme.palette.common.black,\n lineHeight: `${theme.spacing(1) * CORRECTNESS_LINE_HEIGHT_MULTIPLIER + CORRECTNESS_PADDING}px`,\n padding: `${CORRECTNESS_PADDING}px`,\n}));\n\nconst StyledCorrectContainer = styled(StyledCommonTokenStyle)(() => ({\n border: `${color.correctTertiary()} solid 2px`,\n}));\n\nconst StyledIncorrectContainer = styled(StyledCommonTokenStyle)(() => ({\n border: `${color.incorrectWithIcon()} solid 2px`,\n}));\n\nconst StyledMissingContainer = styled(StyledCommonTokenStyle)(() => ({\n border: `${color.incorrectWithIcon()} dashed 2px`,\n}));\n\nconst StyledCorrectnessIcon = styled('div')(() => ({\n color: color.white(),\n position: 'absolute',\n top: '-8px',\n left: '-8px',\n borderRadius: '50%',\n fontSize: '12px',\n padding: '2px',\n}));\n\nconst StyledCorrectIcon = styled(StyledCorrectnessIcon)(() => ({\n backgroundColor: color.correctTertiary(),\n}));\n\nconst StyledIncorrectIcon = styled(StyledCorrectnessIcon)(() => ({\n backgroundColor: color.incorrectWithIcon(),\n}));\n\nconst Wrapper = ({ useWrapper, children, classNameContainer, iconClass, Icon }) =>\n useWrapper ? (\n <span className={classNameContainer}>\n {children}\n <Icon className={iconClass} />\n </span>\n ) : (\n children\n );\n\nWrapper.propTypes = {\n useWrapper: PropTypes.bool,\n classNameContainer: PropTypes.string,\n iconClass: PropTypes.string,\n Icon: PropTypes.func,\n children: PropTypes.element,\n};\n\nexport const TokenTypes = {\n text: PropTypes.string,\n selectable: PropTypes.bool,\n};\n\nexport class Token extends React.Component {\n static rootClassName = 'tokenRootClass';\n\n static propTypes = {\n ...TokenTypes,\n text: PropTypes.string.isRequired,\n className: PropTypes.string,\n disabled: PropTypes.bool,\n highlight: PropTypes.bool,\n correct: PropTypes.bool,\n };\n\n static defaultProps = {\n selectable: false,\n text: '',\n };\n\n getClassAndIconConfig = () => {\n const {\n selectable,\n selected,\n className: classNameProp,\n disabled,\n highlight,\n correct,\n animationsDisabled,\n isMissing,\n } = this.props;\n const isTouchEnabled = 'ontouchstart' in window \|\| navigator.maxTouchPoints > 0 \|\| navigator.msMaxTouchPoints > 0;\n const baseClassName = Token.rootClassName;\n let Container;\n let Icon;\n let IconComponent;\n\n if (correct === undefined && selected && disabled) {\n return {\n className: classNames(baseClassName, 'selected', 'disabledBlack', classNameProp),\n Component: StyledToken,\n };\n }\n\n if (correct !== undefined) {\n const isCorrect = correct === true;\n return {\n className: classNames(baseClassName, 'custom', classNameProp),\n Component: StyledToken,\n Container: isCorrect ? StyledCorrectContainer : StyledIncorrectContainer,\n Icon: isCorrect ? Check : Close,\n IconComponent: isCorrect ? StyledCorrectIcon : StyledIncorrectIcon,\n };\n }\n\n if (isMissing) {\n return {\n className: classNames(baseClassName, 'custom', 'missing', classNameProp),\n Component: StyledToken,\n Container: StyledMissingContainer,\n Icon: Close,\n IconComponent: StyledIncorrectIcon,\n };\n }\n\n return {\n className: classNames(\n baseClassName,\n disabled && 'disabled',\n selectable && !disabled && !isTouchEnabled && 'selectable',\n selected && !disabled && 'selected',\n selected && disabled && 'disabledAndSelected',\n highlight && selectable && !disabled && !selected && 'highlight',\n animationsDisabled && 'print',\n classNameProp,\n ),\n Component: StyledToken,\n Container,\n Icon,\n IconComponent,\n };\n };\n\n render() {\n const { text, index, correct, isMissing } = this.props;\n const { className, Component, Container, Icon, IconComponent } = this.getClassAndIconConfig();\n\n const TokenComponent = Component \|\| StyledToken;\n\n return (\n <Wrapper\n useWrapper={correct !== undefined \|\| isMissing}\n classNameContainer={Container}\n iconClass={IconComponent}\n Icon={Icon}\n >\n <TokenComponent\n className={className}\n dangerouslySetInnerHTML={{ __html: (text \|\| '').replace(/\\n/g, '<br>') }}\n data-indexkey={index}\n />\n </Wrapper>\n );\n }\n}\n\nexport default Token;\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"file":"token.js","names":["_react","_interopRequireDefault","require","_propTypes","_styles","_classnames","_Check","_Close","_renderUi","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","LINE_HEIGHT_MULTIPLIER","CORRECTNESS_LINE_HEIGHT_MULTIPLIER","CORRECTNESS_PADDING","StyledToken","styled","_ref","theme","cursor","textIndent","color","disabled","backgroundColor","blueGrey100","concat","breakpoints","values","md","blueGrey300","palette","common","black","lineHeight","spacing","border","blueGrey900","borderRadius","blueGrey600","text","display","StyledCommonTokenStyle","_ref3","position","padding","StyledCorrectContainer","correctTertiary","StyledIncorrectContainer","incorrectWithIcon","StyledMissingContainer","StyledCorrectnessIcon","white","top","left","fontSize","StyledCorrectIcon","StyledIncorrectIcon","Wrapper","_ref4","useWrapper","children","Container","IconComponent","Icon","createElement","propTypes","PropTypes","bool","elementType","node","TokenTypes","exports","string","selectable","Token","_React$Component","_this","_classCallCheck2","_len","args","Array","_key","_this$props","props","selected","classNameProp","className","highlight","correct","animationsDisabled","isMissing","isTouchEnabled","window","navigator","maxTouchPoints","msMaxTouchPoints","baseClassName","rootClassName","undefined","classNames","Component","isCorrect","Check","Close","_inherits2","_createClass2","key","value","render","_this$props2","index","_this$getClassAndIcon","getClassAndIconConfig","TokenComponent","dangerouslySetInnerHTML","__html","replace","React","isRequired","_default"],"sources":["../../src/token-select/token.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { styled } from '@mui/material/styles';\nimport classNames from 'classnames';\nimport Check from '@mui/icons-material/Check';\nimport Close from '@mui/icons-material/Close';\n\nimport { color } from '@pie-lib/render-ui';\n\n// we need to use a larger line height for the token to be more readable\nconst LINE_HEIGHT_MULTIPLIER = 3.2;\n// we need a bit more space for correctness indicators\nconst CORRECTNESS_LINE_HEIGHT_MULTIPLIER = 3.4;\nconst CORRECTNESS_PADDING = 2;\n\n// Styled components for different token states\nconst StyledToken = styled('span')(({ theme }) => ({\n cursor: 'pointer',\n textIndent: 0,\n '&.disabled': {\n cursor: 'inherit',\n color: color.disabled(),\n },\n '&.disabledBlack': {\n cursor: 'inherit',\n },\n '&.disabledAndSelected': {\n backgroundColor: color.blueGrey100(),\n },\n [`@media (min-width: ${theme.breakpoints.values.md}px)`]: {\n '&.selectable:hover': {\n backgroundColor: color.blueGrey300(),\n color: theme.palette.common.black,\n '& > ': {\n backgroundColor: color.blueGrey300(),\n },\n },\n },\n '&.selected': {\n backgroundColor: color.blueGrey100(),\n color: theme.palette.common.black,\n lineHeight: `${theme.spacing(1) LINE_HEIGHT_MULTIPLIER}px`,\n border: `solid 2px ${color.blueGrey900()}`,\n borderRadius: '4px',\n '& > ': {\n backgroundColor: color.blueGrey100(),\n },\n },\n '&.highlight': {\n border: `dashed 2px ${color.blueGrey600()}`,\n borderRadius: '4px',\n lineHeight: `${theme.spacing(1) LINE_HEIGHT_MULTIPLIER}px`,\n },\n '&.print': {\n border: `dashed 2px ${color.blueGrey600()}`,\n borderRadius: '4px',\n lineHeight: `${theme.spacing(1) * LINE_HEIGHT_MULTIPLIER}px`,\n color: color.text(),\n },\n '&.custom': {\n display: 'initial',\n },\n}));\n\nconst StyledCommonTokenStyle = styled('span')(({ theme }) => ({\n position: 'relative',\n borderRadius: '4px',\n color: theme.palette.common.black,\n lineHeight: `${theme.spacing(1) * CORRECTNESS_LINE_HEIGHT_MULTIPLIER + CORRECTNESS_PADDING}px`,\n padding: `${CORRECTNESS_PADDING}px`,\n}));\n\nconst StyledCorrectContainer = styled(StyledCommonTokenStyle)(() => ({\n border: `${color.correctTertiary()} solid 2px`,\n}));\n\nconst StyledIncorrectContainer = styled(StyledCommonTokenStyle)(() => ({\n border: `${color.incorrectWithIcon()} solid 2px`,\n}));\n\nconst StyledMissingContainer = styled(StyledCommonTokenStyle)(() => ({\n border: `${color.incorrectWithIcon()} dashed 2px`,\n}));\n\nconst StyledCorrectnessIcon = styled('span')(() => ({\n color: color.white(),\n position: 'absolute',\n top: '-8px',\n left: '-8px',\n borderRadius: '50%',\n fontSize: '12px',\n padding: '2px',\n display: 'inline-block',\n}));\n\nconst StyledCorrectIcon = styled(StyledCorrectnessIcon)(() => ({\n backgroundColor: color.correctTertiary(),\n}));\n\nconst StyledIncorrectIcon = styled(StyledCorrectnessIcon)(() => ({\n backgroundColor: color.incorrectWithIcon(),\n}));\n\nconst Wrapper = ({ useWrapper, children, Container, IconComponent, Icon }) =>\n useWrapper ? (\n <Container>\n {children}\n {Icon && IconComponent ? (\n <IconComponent>\n <Icon fontSize=\"inherit\" />\n </IconComponent>\n ) : null}\n </Container>\n ) : (\n children\n );\n\nWrapper.propTypes = {\n useWrapper: PropTypes.bool,\n Container: PropTypes.elementType,\n IconComponent: PropTypes.elementType,\n Icon: PropTypes.elementType,\n children: PropTypes.node,\n};\n\nexport const TokenTypes = {\n text: PropTypes.string,\n selectable: PropTypes.bool,\n};\n\nexport class Token extends React.Component {\n static rootClassName = 'tokenRootClass';\n\n static propTypes = {\n ...TokenTypes,\n text: PropTypes.string.isRequired,\n className: PropTypes.string,\n disabled: PropTypes.bool,\n highlight: PropTypes.bool,\n correct: PropTypes.bool,\n };\n\n static defaultProps = {\n selectable: false,\n text: '',\n };\n\n getClassAndIconConfig = () => {\n const {\n selectable,\n selected,\n className: classNameProp,\n disabled,\n highlight,\n correct,\n animationsDisabled,\n isMissing,\n } = this.props;\n const isTouchEnabled = 'ontouchstart' in window \|\| navigator.maxTouchPoints > 0 \|\| navigator.msMaxTouchPoints > 0;\n const baseClassName = Token.rootClassName;\n let Container;\n let Icon;\n let IconComponent;\n\n if (correct === undefined && selected && disabled) {\n return {\n className: classNames(baseClassName, 'selected', 'disabledBlack', classNameProp),\n Component: StyledToken,\n };\n }\n\n if (correct !== undefined) {\n const isCorrect = correct === true;\n return {\n className: classNames(baseClassName, 'custom', classNameProp),\n Component: StyledToken,\n Container: isCorrect ? StyledCorrectContainer : StyledIncorrectContainer,\n Icon: isCorrect ? Check : Close,\n IconComponent: isCorrect ? StyledCorrectIcon : StyledIncorrectIcon,\n };\n }\n\n if (isMissing) {\n return {\n className: classNames(baseClassName, 'custom', 'missing', classNameProp),\n Component: StyledToken,\n Container: StyledMissingContainer,\n Icon: Close,\n IconComponent: StyledIncorrectIcon,\n };\n }\n\n return {\n className: classNames(\n baseClassName,\n disabled && 'disabled',\n selectable && !disabled && !isTouchEnabled && 'selectable',\n selected && !disabled && 'selected',\n selected && disabled && 'disabledAndSelected',\n highlight && selectable && !disabled && !selected && 'highlight',\n animationsDisabled && 'print',\n classNameProp,\n ),\n Component: StyledToken,\n Container,\n Icon,\n IconComponent,\n };\n };\n\n render() {\n const { text, index, correct, isMissing } = this.props;\n const { className, Component, Container, Icon, IconComponent } = this.getClassAndIconConfig();\n\n const TokenComponent = Component \|\| StyledToken;\n\n return (\n <Wrapper\n useWrapper={correct !== undefined \|\| isMissing}\n Container={Container}\n IconComponent={IconComponent}\n Icon={Icon}\n >\n <TokenComponent\n className={className}\n dangerouslySetInnerHTML={{ __html: (text \|\| '').replace(/\\n/g, '<br>') }}\n data-indexkey={index}\n />\n </Wrapper>\n );\n }\n}\n\nexport default Token;\n"],"mappings":"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","ignoreList":[]}

package/package.json CHANGED Viewed

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "1.30.0-mui-update.0",
+  "version": "1.32.0-mui-update.0",
   "description": "Some react components for text selection",
   "keywords": [
     "react",
@@ -22,9 +22,9 @@
     "@mui/icons-material": "^7.3.4",
     "@mui/material": "^7.3.4",
     "@pie-framework/parse-english": "^1.0.0",
-    "@pie-lib/render-ui": "^4.33.0-mui-update.0",
-    "@pie-lib/style-utils": "^0.19.0-mui-update.0",
-    "@pie-lib/translator": "^2.23.0-mui-update.0",
+    "@pie-lib/render-ui": "^4.35.0-mui-update.0",
+    "@pie-lib/style-utils": "^0.21.0-mui-update.0",
+    "@pie-lib/translator": "^2.24.0-mui-update.0",
     "classnames": "^2.2.6",
     "debug": "^4.1.1",
     "invariant": "^2.2.4",
@@ -34,7 +34,7 @@
   },
   "devDependencies": {
     "@pie-framework/parse-english": "^1.0.0",
-    "@pie-lib/test-utils": "^0.20.0-mui-update.0",
+    "@pie-lib/test-utils": "^0.22.0-mui-update.0",
     "natural": "^0.6.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
@@ -42,6 +42,6 @@
   "peerDependencies": {
     "react": "^18.2.0"
   },
-  "gitHead": "4b009262d3ab5bb833be81c23fc612fca3cb82f5",
+  "gitHead": "622d5627dc85e393cdf13e3362970299cc485cc5",
   "scripts": {}
 }

package/src/token-select/index.jsx CHANGED Viewed

@@ -5,7 +5,6 @@ import { styled } from '@mui/material/styles';
 import clone from 'lodash/clone';
 import debug from 'debug';
 import { noSelect } from '@pie-lib/style-utils';
-import { renderToString } from 'react-dom/server';
 import isEqual from 'lodash/isEqual';
 const log = debug('@pie-lib:text-select:token-select');
@@ -16,6 +15,7 @@ const StyledTokenSelect = styled('div')(() => ({
   ...noSelect(),
   '& p': {
     whiteSpace: 'break-spaces',
+    margin: 0,
   },
 }));
@@ -41,49 +41,36 @@ export class TokenSelect extends React.Component {
   canSelectMore = (selectedCount) => {
     const { maxNoOfSelections } = this.props;
-    if (maxNoOfSelections === 1) {
-      return true;
-    }
+    if (maxNoOfSelections === 1) return true;
     log('[canSelectMore] maxNoOfSelections: ', maxNoOfSelections, 'selectedCount: ', selectedCount);
     return maxNoOfSelections <= 0 || (isFinite(maxNoOfSelections) && selectedCount < maxNoOfSelections);
   };
-  /**
-   @function
-   @param { object } event
-   @description
-    each token is wrapped into a span that has Token.rootClassName class and indexkey attribute (represents the index of the token)
-    tokens are updated with the targeted token having the correct value set for 'selected' property
-   */
   toggleToken = (event) => {
     const { target } = event;
     const { tokens, animationsDisabled } = this.props;
     const tokensCloned = clone(tokens);
-    const targetSpanWrapper = target.closest(`.${Token.rootClassName}`);
-    const targetedTokenIndex = targetSpanWrapper && targetSpanWrapper.dataset && targetSpanWrapper.dataset.indexkey;
-    const t = targetedTokenIndex && tokensCloned[targetedTokenIndex];
-    // don't toggle if we are in print mode, token correctness is defined or if it's missing
-    // (missing means that it was evaluated as correct and not selected)
+    const targetSpanWrapper = target.closest?.(`.${Token.rootClassName}`);
+    const targetedTokenIndex = targetSpanWrapper?.dataset?.indexkey;
+    const t = targetedTokenIndex !== undefined ? tokensCloned[targetedTokenIndex] : undefined;
+    // don't toggle if in print mode, correctness is defined, or is missing
     if (t && t.correct === undefined && !animationsDisabled && !t.isMissing) {
       const { onChange, maxNoOfSelections } = this.props;
       const selected = !t.selected;
       if (maxNoOfSelections === 1 && this.selectedCount() === 1) {
-        const selectedToken = (tokens || []).filter((t) => t.selected);
+        const selectedToken = (tokens || []).filter((tk) => tk.selected);
         const updatedTokens = tokensCloned.map((token) => {
           if (isEqual(token, selectedToken[0])) {
             return { ...token, selected: false };
           }
           return { ...token, selectable: true };
         });
-        const update = { ...t, selected: !t.selected };
+        const update = { ...t, selected };
         updatedTokens.splice(targetedTokenIndex, 1, update);
         onChange(updatedTokens);
       } else {
@@ -91,32 +78,42 @@ export class TokenSelect extends React.Component {
           log('skip toggle max reached');
           return;
         }
-        const update = { ...t, selected: !t.selected };
+        const update = { ...t, selected };
         tokensCloned.splice(targetedTokenIndex, 1, update);
         onChange(tokensCloned);
       }
     }
   };
-  generateTokensInHtml = () => {
+  /** Build a React tree instead of an HTML string so Emotion can inject CSS */
+  generateTokensNodes = () => {
     const { tokens, disabled, highlightChoices, animationsDisabled } = this.props;
     const selectedCount = this.selectedCount();
     const isLineBreak = (text) => text === '\n';
     const isNewParagraph = (text) => text === '\n\n';
-    const reducer = (accumulator, t, index) => {
+    const paragraphs = [];
+    let currentChildren = [];
+    const flushParagraph = () => {
+      // Always push a <p>, even if empty, to mirror previous behavior
+      paragraphs.push(<p key={`p-${paragraphs.length}`}>{currentChildren}</p>);
+      currentChildren = [];
+    };
+    (tokens || []).forEach((t, index) => {
       const selectable = t.selected || (t.selectable && this.canSelectMore(selectedCount));
       const showCorrectAnswer = t.correct !== undefined && (t.selectable || t.selected);
-      let finalAcc = accumulator;
       if (isNewParagraph(t.text)) {
-        return finalAcc + '</p><p>';
+        flushParagraph();
+        return;
       }
       if (isLineBreak(t.text)) {
-        return finalAcc + '<br>';
+        currentChildren.push(<br key={`br-${index}`} />);
+        return;
       }
       if (
@@ -124,38 +121,41 @@ export class TokenSelect extends React.Component {
         showCorrectAnswer ||
         t.selected ||
         t.isMissing ||
-        (animationsDisabled && t.predefined) // if we are in print mode
+        (animationsDisabled && t.predefined) // print mode
       ) {
-        return (
-          finalAcc +
-          renderToString(
-            <Token
-              key={index}
-              disabled={disabled}
-              index={index}
-              {...t}
-              selectable={selectable}
-              highlight={highlightChoices}
-              animationsDisabled={animationsDisabled}
-            />,
-          )
+        currentChildren.push(
+          <Token
+            key={index}
+            disabled={disabled}
+            index={index}
+            {...t}
+            selectable={selectable}
+            highlight={highlightChoices}
+            animationsDisabled={animationsDisabled}
+          />
         );
       } else {
-        return accumulator + t.text;
+        // raw text node – React will escape as needed
+        currentChildren.push(<React.Fragment key={index}>{t.text}</React.Fragment>);
       }
-    };
+    });
-    const reduceResult = (tokens || []).reduce(reducer, '<p>');
+    // flush last paragraph
+    flushParagraph();
-    return reduceResult + '</p>';
+    return paragraphs;
   };
   render() {
     const { className: classNameProp } = this.props;
-    const html = this.generateTokensInHtml();
+    const nodes = this.generateTokensNodes();
-    return <StyledTokenSelect className={classNameProp} dangerouslySetInnerHTML={{ __html: html }} onClick={this.toggleToken} />;
+    return (
+      <StyledTokenSelect className={classNameProp} onClick={this.toggleToken}>
+        {nodes}
+      </StyledTokenSelect>
+    );
   }
 }
-export default TokenSelect;
+export default TokenSelect;

package/src/token-select/token.jsx CHANGED Viewed

@@ -82,7 +82,7 @@ const StyledMissingContainer = styled(StyledCommonTokenStyle)(() => ({
   border: `${color.incorrectWithIcon()} dashed 2px`,
 }));
-const StyledCorrectnessIcon = styled('div')(() => ({
+const StyledCorrectnessIcon = styled('span')(() => ({
   color: color.white(),
   position: 'absolute',
   top: '-8px',
@@ -90,6 +90,7 @@ const StyledCorrectnessIcon = styled('div')(() => ({
   borderRadius: '50%',
   fontSize: '12px',
   padding: '2px',
+  display: 'inline-block',
 }));
 const StyledCorrectIcon = styled(StyledCorrectnessIcon)(() => ({
@@ -100,22 +101,26 @@ const StyledIncorrectIcon = styled(StyledCorrectnessIcon)(() => ({
   backgroundColor: color.incorrectWithIcon(),
 }));
-const Wrapper = ({ useWrapper, children, classNameContainer, iconClass, Icon }) =>
+const Wrapper = ({ useWrapper, children, Container, IconComponent, Icon }) =>
   useWrapper ? (
-    <span className={classNameContainer}>
+    <Container>
       {children}
-      <Icon className={iconClass} />
-    </span>
+      {Icon && IconComponent ? (
+        <IconComponent>
+          <Icon fontSize="inherit" />
+        </IconComponent>
+      ) : null}
+    </Container>
   ) : (
     children
   );
 Wrapper.propTypes = {
   useWrapper: PropTypes.bool,
-  classNameContainer: PropTypes.string,
-  iconClass: PropTypes.string,
-  Icon: PropTypes.func,
-  children: PropTypes.element,
+  Container: PropTypes.elementType,
+  IconComponent: PropTypes.elementType,
+  Icon: PropTypes.elementType,
+  children: PropTypes.node,
 };
 export const TokenTypes = {
@@ -212,8 +217,8 @@ export class Token extends React.Component {
     return (
       <Wrapper
         useWrapper={correct !== undefined || isMissing}
-        classNameContainer={Container}
-        iconClass={IconComponent}
+        Container={Container}
+        IconComponent={IconComponent}
         Icon={Icon}
       >
         <TokenComponent