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

@pie-lib/text-select 1.39.0-mui-update.0 → 1.40.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 +24 -0
package/lib/legend.js +26 -29
package/lib/legend.js.map +1 -1
package/lib/token-select/token.js +29 -40
package/lib/token-select/token.js.map +1 -1
package/package.json +6 -6
package/src/legend.js +11 -14
package/src/token-select/token.jsx +16 -23

package/CHANGELOG.md CHANGED Viewed

@@ -3,6 +3,30 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+# [1.40.0-mui-update.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/text-select@1.39.1-mui-update.0...@pie-lib/text-select@1.40.0-mui-update.0) (2025-11-26)
+### Bug Fixes
+* diaable toggling selection in view mode ([c0e47f0](https://github.com/pie-framework/pie-lib/commit/c0e47f0f5beaced697d6cdf3c418b92ec29679ab))
+* parsefloat to correctly compute tokens line height ([282c464](https://github.com/pie-framework/pie-lib/commit/282c464b860dc72e08d8692a7c2236c5475e49e0))
+* **text-select:** refactor icon token wrappers,delete unused container ([fdc6066](https://github.com/pie-framework/pie-lib/commit/fdc60661dd3bbda8c936a5e495be75ac4a2ac2ea))
+## [1.39.1-mui-update.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/text-select@1.39.0-mui-update.0...@pie-lib/text-select@1.39.1-mui-update.0) (2025-11-20)
+### Bug Fixes
+* remove carets from [@pie-lib](https://github.com/pie-lib) dependencies and configure lerna to use exact versions ([c9cd800](https://github.com/pie-framework/pie-lib/commit/c9cd800844abca09e7acf1fd35b2ddf51a6d86df))
 # [1.39.0-mui-update.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/text-select@1.38.0-mui-update.0...@pie-lib/text-select@1.39.0-mui-update.0) (2025-11-20)

package/lib/legend.js CHANGED Viewed

@@ -5,12 +5,15 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Legend = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
 var _styles = require("@mui/material/styles");
 var _Check = _interopRequireDefault(require("@mui/icons-material/Check"));
 var _Close = _interopRequireDefault(require("@mui/icons-material/Close"));
 var _renderUi = require("@pie-lib/render-ui");
 var _translator = _interopRequireDefault(require("@pie-lib/translator"));
+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 translator = _translator["default"].translator;
 var StyledFlexContainer = (0, _styles.styled)('div')(function (_ref) {
   var theme = _ref.theme;
@@ -58,51 +61,46 @@ var StyledMissingContainer = (0, _styles.styled)(StyledContainer)(function () {
     border: "".concat(_renderUi.color.incorrectWithIcon(), " dashed 2px")
   };
 });
-var StyledIcon = (0, _styles.styled)('div')(function () {
-  return {
-    color: _renderUi.color.white(),
-    position: 'absolute',
-    top: '-8px',
-    left: '-8px',
-    borderRadius: '50%',
-    fontSize: '12px',
-    padding: '2px'
-  };
-});
-var StyledCorrectIcon = (0, _styles.styled)(StyledIcon)(function () {
-  return {
+var baseIconStyles = {
+  color: _renderUi.color.white(),
+  position: 'absolute',
+  top: '-8px',
+  left: '-8px',
+  borderRadius: '50%',
+  fontSize: '12px',
+  padding: '2px'
+};
+var StyledCorrectCheckIcon = (0, _styles.styled)(_Check["default"])(function () {
+  return _objectSpread(_objectSpread({}, baseIconStyles), {}, {
     backgroundColor: _renderUi.color.correctTertiary()
-  };
+  });
 });
-var StyledIncorrectIcon = (0, _styles.styled)(StyledIcon)(function () {
-  return {
+var StyledIncorrectCloseIcon = (0, _styles.styled)(_Close["default"])(function () {
+  return _objectSpread(_objectSpread({}, baseIconStyles), {}, {
     backgroundColor: _renderUi.color.incorrectWithIcon()
-  };
+  });
 });
 var Legend = exports.Legend = function Legend(_ref3) {
   var language = _ref3.language,
     showOnlyCorrect = _ref3.showOnlyCorrect;
   var legendItems = [{
-    Icon: _Check["default"],
+    Icon: StyledCorrectCheckIcon,
     label: translator.t('selectText.correctAnswerSelected', {
       lng: language
     }),
-    Container: StyledCorrectContainer,
-    IconComponent: StyledCorrectIcon
+    Container: StyledCorrectContainer
   }, {
-    Icon: _Close["default"],
+    Icon: StyledIncorrectCloseIcon,
     label: translator.t('selectText.incorrectSelection', {
       lng: language
     }),
-    Container: StyledIncorrectContainer,
-    IconComponent: StyledIncorrectIcon
+    Container: StyledIncorrectContainer
   }, {
-    Icon: _Close["default"],
+    Icon: StyledIncorrectCloseIcon,
     label: translator.t('selectText.correctAnswerNotSelected', {
       lng: language
     }),
-    Container: StyledMissingContainer,
-    IconComponent: StyledIncorrectIcon
+    Container: StyledMissingContainer
   }];
   if (showOnlyCorrect) {
     legendItems.splice(1, 2);
@@ -112,11 +110,10 @@ var Legend = exports.Legend = function Legend(_ref3) {
   })), legendItems.map(function (_ref4, idx) {
     var Icon = _ref4.Icon,
       label = _ref4.label,
-      Container = _ref4.Container,
-      IconComponent = _ref4.IconComponent;
+      Container = _ref4.Container;
     return /*#__PURE__*/_react["default"].createElement(Container, {
       key: idx
-    }, /*#__PURE__*/_react["default"].createElement(IconComponent, null, /*#__PURE__*/_react["default"].createElement(Icon, null)), /*#__PURE__*/_react["default"].createElement("span", null, label));
+    }, /*#__PURE__*/_react["default"].createElement(Icon, null), /*#__PURE__*/_react["default"].createElement("span", null, label));
   }));
 };
 //# sourceMappingURL=legend.js.map

package/lib/legend.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"legend.js","names":["_react","_interopRequireDefault","require","_styles","_Check","_Close","_renderUi","_translator","translator","Translator","StyledFlexContainer","styled","_ref","theme","display","flexDirection","alignItems","gap","spacing","borderBottom","borderTop","paddingBottom","paddingTop","marginBottom","StyledKey","_ref2","fontSize","fontWeight","color","black","marginLeft","StyledContainer","position","padding","borderRadius","StyledCorrectContainer","border","concat","correctTertiary","StyledIncorrectContainer","incorrectWithIcon","StyledMissingContainer","~~StyledIcon~~","white","top","left","~~StyledCorrectIcon~~","backgroundColor","~~StyledIncorrectIcon~~","Legend","exports","_ref3","language","showOnlyCorrect","legendItems","Icon","~~Check","~~label","~~t","~~lng","Container","~~IconComponent","Close","~~splice","createElement","map","_ref4","idx","key"],"sources":["../src/legend.js"],"sourcesContent":["import React from 'react';\nimport { styled } from '@mui/material/styles';\nimport Check from '@mui/icons-material/Check';\nimport Close from '@mui/icons-material/Close';\nimport { color } from '@pie-lib/render-ui';\nimport Translator from '@pie-lib/translator';\n\nconst { translator } = Translator;\n\nconst StyledFlexContainer = styled('div')(({ theme }) => ({\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'center',\n gap: theme.spacing(2),\n borderBottom: '1px solid lightgrey',\n borderTop: '1px solid lightgrey',\n paddingBottom: theme.spacing(1),\n paddingTop: theme.spacing(1),\n marginBottom: theme.spacing(1),\n}));\n\nconst StyledKey = styled('span')(({ theme }) => ({\n fontSize: '14px',\n fontWeight: 'bold',\n color: color.black(),\n marginLeft: theme.spacing(1),\n}));\n\nconst StyledContainer = styled('div')(() => ({\n position: 'relative',\n padding: '4px',\n fontSize: '14px',\n borderRadius: '4px',\n}));\n\nconst StyledCorrectContainer = styled(StyledContainer)(() => ({\n border: `${color.correctTertiary()} solid 2px`,\n}));\n\nconst StyledIncorrectContainer = styled(StyledContainer)(() => ({\n border: `${color.incorrectWithIcon()} solid 2px`,\n}));\n\nconst StyledMissingContainer = styled(StyledContainer)(() => ({\n border: `${color.incorrectWithIcon()} dashed 2px`,\n}));\n\nconst ~~StyledIcon~~ = ~~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(~~StyledIcon~~)(() => ({\n backgroundColor: color.correctTertiary(),\n}));\n\nconst ~~StyledIncorrectIcon~~ = styled(~~StyledIcon~~)(() => ({\n backgroundColor: color.incorrectWithIcon(),\n}));\n\nexport const Legend = ({ language, showOnlyCorrect }) => {\n const legendItems = [\n {\n Icon: ~~Check~~,\n label: translator.t('selectText.correctAnswerSelected', { lng: language }),\n Container: StyledCorrectContainer,\n ~~IconComponent: StyledCorrectIcon,\n~~ },\n {\n Icon: ~~Close~~,\n label: translator.t('selectText.incorrectSelection', { lng: language }),\n Container: StyledIncorrectContainer,\n ~~IconComponent: StyledIncorrectIcon,\n~~ },\n {\n Icon: ~~Close~~,\n label: translator.t('selectText.correctAnswerNotSelected', { lng: language }),\n Container: StyledMissingContainer,\n ~~IconComponent: StyledIncorrectIcon,\n~~ },\n ];\n\n if (showOnlyCorrect) {\n legendItems.splice(1, 2);\n }\n\n return (\n <StyledFlexContainer>\n <StyledKey>{translator.t('selectText.key', { lng: language })}</StyledKey>\n {legendItems.map(({ Icon, label, Container, ~~IconComponent~~ }, idx) => (\n <Container key={idx}>\n <~~IconComponent>\n <~~Icon />\n ~~</IconComponent>\n~~ <span>{label}</span>\n </Container>\n ))}\n </StyledFlexContainer>\n );\n};\n"],"mappings":"~~;;;;;;;~~AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,OAAA,GAAAD,OAAA;AACA,IAAAE,MAAA,GAAAH,sBAAA,CAAAC,OAAA;AACA,IAAAG,MAAA,GAAAJ,sBAAA,CAAAC,OAAA;AACA,IAAAI,SAAA,GAAAJ,OAAA;AACA,IAAAK,WAAA,GAAAN,sBAAA,CAAAC,OAAA;~~AAEA~~,~~IAAQM~~,UAAU,GAAKC,sBAAU,CAAzBD,UAAU;AAElB,IAAME,mBAAmB,GAAG,IAAAC,cAAM,EAAC,KAAK,CAAC,CAAC,UAAAC,IAAA;EAAA,IAAGC,KAAK,GAAAD,IAAA,CAALC,KAAK;EAAA,OAAQ;IACxDC,OAAO,EAAE,MAAM;IACfC,aAAa,EAAE,KAAK;IACpBC,UAAU,EAAE,QAAQ;IACpBC,GAAG,EAAEJ,KAAK,CAACK,OAAO,CAAC,CAAC,CAAC;IACrBC,YAAY,EAAE,qBAAqB;IACnCC,SAAS,EAAE,qBAAqB;IAChCC,aAAa,EAAER,KAAK,CAACK,OAAO,CAAC,CAAC,CAAC;IAC/BI,UAAU,EAAET,KAAK,CAACK,OAAO,CAAC,CAAC,CAAC;IAC5BK,YAAY,EAAEV,KAAK,CAACK,OAAO,CAAC,CAAC;EAC/B,CAAC;AAAA,CAAC,CAAC;AAEH,IAAMM,SAAS,GAAG,IAAAb,cAAM,EAAC,MAAM,CAAC,CAAC,UAAAc,KAAA;EAAA,IAAGZ,KAAK,GAAAY,KAAA,CAALZ,KAAK;EAAA,OAAQ;IAC/Ca,QAAQ,EAAE,MAAM;IAChBC,UAAU,EAAE,MAAM;IAClBC,KAAK,EAAEA,eAAK,CAACC,KAAK,CAAC,CAAC;IACpBC,UAAU,EAAEjB,KAAK,CAACK,OAAO,CAAC,CAAC;EAC7B,CAAC;AAAA,CAAC,CAAC;AAEH,IAAMa,eAAe,GAAG,IAAApB,cAAM,EAAC,KAAK,CAAC,CAAC;EAAA,OAAO;IAC3CqB,QAAQ,EAAE,UAAU;IACpBC,OAAO,EAAE,KAAK;IACdP,QAAQ,EAAE,MAAM;IAChBQ,YAAY,EAAE;EAChB,CAAC;AAAA,CAAC,CAAC;AAEH,IAAMC,sBAAsB,GAAG,IAAAxB,cAAM,EAACoB,eAAe,CAAC,CAAC;EAAA,OAAO;IAC5DK,MAAM,KAAAC,MAAA,CAAKT,eAAK,CAACU,eAAe,CAAC,CAAC;EACpC,CAAC;AAAA,CAAC,CAAC;AAEH,IAAMC,wBAAwB,GAAG,IAAA5B,cAAM,EAACoB,eAAe,CAAC,CAAC;EAAA,OAAO;IAC9DK,MAAM,KAAAC,MAAA,CAAKT,eAAK,CAACY,iBAAiB,CAAC,CAAC;EACtC,CAAC;AAAA,CAAC,CAAC;AAEH,IAAMC,sBAAsB,GAAG,IAAA9B,cAAM,EAACoB,eAAe,CAAC,CAAC;EAAA,OAAO;IAC5DK,MAAM,KAAAC,MAAA,CAAKT,eAAK,CAACY,iBAAiB,CAAC,CAAC;EACtC,CAAC;AAAA,CAAC,CAAC;AAEH,IAAME,~~UAAU~~,GAAG~~,IAAA/B,cAAM,EAAC,KAAK,CAAC,CAAC~~;~~EAAA~~,~~OAAO;IACtCiB,~~KAAK,EAAEA,eAAK,CAACe,KAAK,CAAC,CAAC;~~IACpBX~~,QAAQ,EAAE,UAAU;~~IACpBY~~,GAAG,EAAE,MAAM;~~IACXC~~,IAAI,EAAE,MAAM;~~IACZX~~,YAAY,EAAE,KAAK;~~IACnBR~~,QAAQ,EAAE,MAAM;~~IAChBO~~,OAAO,EAAE;~~EACX~~,CAAC;~~AAAA~~,~~CAAC,CAAC;AAEH,~~IAAMa,~~iBAAiB~~,GAAG,IAAAnC,cAAM,~~EAAC+B~~,~~UAAU~~,CAAC,CAAC;EAAA,~~OAAO~~;~~IAClDK~~,eAAe,~~EAAEnB~~,eAAK,CAACU,eAAe,CAAC;~~EACzC,CAAC~~;AAAA,~~CAAC~~,CAAC;AAEH,~~IAAMU~~,~~mBAAmB~~,GAAG,~~IAAArC~~,cAAM,~~EAAC+B~~,~~UAAU~~,CAAC,CAAC;EAAA,~~OAAO~~;~~IACpDK~~,eAAe,~~EAAEnB~~,eAAK,CAACY,iBAAiB,CAAC;~~EAC3C,CAAC~~;AAAA,~~CAAC~~,CAAC;AAEI,~~IAAMS~~,MAAM,GAAAC,OAAA,CAAAD,MAAA,GAAG,SAATA,MAAMA,CAAAE,KAAA,EAAsC;EAAA,IAAhCC,QAAQ,GAAAD,KAAA,CAARC,QAAQ;IAAEC,eAAe,GAAAF,KAAA,CAAfE,eAAe;EAChD,IAAMC,WAAW,GAAG,CAClB;IACEC,IAAI,~~EAAEC~~,~~iBAAK~~;~~IACXC~~,KAAK,~~EAAEjD~~,UAAU,~~CAACkD~~,CAAC,CAAC,kCAAkC,EAAE;~~MAAEC~~,GAAG,~~EAAEP~~;IAAS,CAAC,CAAC;~~IAC1EQ~~,SAAS,EAAEzB~~,sBAAsB~~;~~IACjC0B~~,~~aAAa,EAAEf;EACjB,~~CAAC,EACD;~~IACES~~,IAAI,~~EAAEO~~,~~iBAAK~~;~~IACXL~~,KAAK,~~EAAEjD~~,UAAU,~~CAACkD~~,CAAC,CAAC,+BAA+B,EAAE;~~MAAEC~~,GAAG,~~EAAEP~~;IAAS,CAAC,CAAC;~~IACvEQ~~,SAAS,EAAErB~~,wBAAwB~~;~~IACnCsB~~,~~aAAa,EAAEb;EACjB,~~CAAC,EACD;~~IACEO~~,IAAI,~~EAAEO~~,~~iBAAK~~;~~IACXL~~,KAAK,~~EAAEjD~~,UAAU,~~CAACkD~~,CAAC,CAAC,qCAAqC,EAAE;~~MAAEC~~,GAAG,~~EAAEP~~;IAAS,CAAC,CAAC;~~IAC7EQ~~,SAAS,EAAEnB~~,sBAAsB~~;~~IACjCoB~~,~~aAAa,EAAEb;EACjB,~~CAAC,CACF;EAED,~~IAAIK~~,eAAe,EAAE;IACnBC,WAAW,~~CAACS~~,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC;EAC1B;EAEA,~~oBACE/D~~,MAAA,~~YAAAgE~~,aAAA,~~CAACtD~~,mBAAmB,~~qBAClBV~~,MAAA,~~YAAAgE~~,aAAA,~~CAACxC~~,SAAS,QAAEhB,UAAU,~~CAACkD~~,CAAC,CAAC,gBAAgB,EAAE;~~IAAEC~~,GAAG,~~EAAEP~~;EAAS,CAAC,CAAa,CAAC,EACzEE,WAAW,~~CAACW~~,GAAG,CAAC,UAAAC,KAAA,~~EAA4CC~~,GAAG;IAAA,~~IAA5CZ~~,IAAI,~~GAAAW~~,KAAA,~~CAAJX~~,IAAI;~~MAAEE~~,KAAK,~~GAAAS~~,KAAA,~~CAALT~~,KAAK;~~MAAEG~~,SAAS,~~GAAAM~~,KAAA,~~CAATN~~,SAAS;~~MAAEC,aAAa,GAAAK,KAAA,CAAbL,aAAa;~~IAAA,~~oBACvD7D~~,MAAA,~~YAAAgE~~,aAAA,~~CAACJ~~,SAAS;~~MAACQ~~,GAAG,EAAED;IAAI,~~gBAClBnE~~,MAAA,~~YAAAgE~~,aAAA,~~CAACH~~,~~aAAa,qBACZ7D,MAAA,YAAAgE,aAAA,CAACT,~~IAAI,MAAE,~~CACM,~~CAAC,~~eAChBvD~~,MAAA,~~YAAAgE~~,aAAA,~~eAAOP~~,KAAY,CACV,CAAC;EAAA,CACb,CACkB,CAAC;AAE1B,CAAC","ignoreList":[]}
1	+ {"version":3,"file":"legend.js","names":["_react","_interopRequireDefault","require","_styles","_Check","_Close","_renderUi","_translator","ownKeys","e","r","t","Object","keys","getOwnPropertySymbols","o","filter","getOwnPropertyDescriptor","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","defineProperty","translator","Translator","StyledFlexContainer","styled","_ref","theme","display","flexDirection","alignItems","gap","spacing","borderBottom","borderTop","paddingBottom","paddingTop","marginBottom","StyledKey","_ref2","fontSize","fontWeight","color","black","marginLeft","StyledContainer","position","padding","borderRadius","StyledCorrectContainer","border","concat","correctTertiary","StyledIncorrectContainer","incorrectWithIcon","StyledMissingContainer","baseIconStyles","white","top","left","StyledCorrectCheckIcon","Check","backgroundColor","StyledIncorrectCloseIcon","Close","Legend","exports","_ref3","language","showOnlyCorrect","legendItems","Icon","label","lng","Container","splice","createElement","map","_ref4","idx","key"],"sources":["../src/legend.js"],"sourcesContent":["import React from 'react';\nimport { styled } from '@mui/material/styles';\nimport Check from '@mui/icons-material/Check';\nimport Close from '@mui/icons-material/Close';\nimport { color } from '@pie-lib/render-ui';\nimport Translator from '@pie-lib/translator';\n\nconst { translator } = Translator;\n\nconst StyledFlexContainer = styled('div')(({ theme }) => ({\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'center',\n gap: theme.spacing(2),\n borderBottom: '1px solid lightgrey',\n borderTop: '1px solid lightgrey',\n paddingBottom: theme.spacing(1),\n paddingTop: theme.spacing(1),\n marginBottom: theme.spacing(1),\n}));\n\nconst StyledKey = styled('span')(({ theme }) => ({\n fontSize: '14px',\n fontWeight: 'bold',\n color: color.black(),\n marginLeft: theme.spacing(1),\n}));\n\nconst StyledContainer = styled('div')(() => ({\n position: 'relative',\n padding: '4px',\n fontSize: '14px',\n borderRadius: '4px',\n}));\n\nconst StyledCorrectContainer = styled(StyledContainer)(() => ({\n border: `${color.correctTertiary()} solid 2px`,\n}));\n\nconst StyledIncorrectContainer = styled(StyledContainer)(() => ({\n border: `${color.incorrectWithIcon()} solid 2px`,\n}));\n\nconst StyledMissingContainer = styled(StyledContainer)(() => ({\n border: `${color.incorrectWithIcon()} dashed 2px`,\n}));\n\nconst baseIconStyles = {\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 StyledCorrectCheckIcon = styled(Check)(() => ({\n ...baseIconStyles,\n backgroundColor: color.correctTertiary(),\n}));\n\nconst StyledIncorrectCloseIcon = styled(Close)(() => ({\n ...baseIconStyles,\n backgroundColor: color.incorrectWithIcon(),\n}));\n\nexport const Legend = ({ language, showOnlyCorrect }) => {\n const legendItems = [\n {\n Icon: StyledCorrectCheckIcon,\n label: translator.t('selectText.correctAnswerSelected', { lng: language }),\n Container: StyledCorrectContainer,\n },\n {\n Icon: StyledIncorrectCloseIcon,\n label: translator.t('selectText.incorrectSelection', { lng: language }),\n Container: StyledIncorrectContainer,\n },\n {\n Icon: StyledIncorrectCloseIcon,\n label: translator.t('selectText.correctAnswerNotSelected', { lng: language }),\n Container: StyledMissingContainer,\n },\n ];\n\n if (showOnlyCorrect) {\n legendItems.splice(1, 2);\n }\n\n return (\n <StyledFlexContainer>\n <StyledKey>{translator.t('selectText.key', { lng: language })}</StyledKey>\n {legendItems.map(({ Icon, label, Container }, idx) => (\n <Container key={idx}>\n <Icon />\n <span>{label}</span>\n </Container>\n ))}\n </StyledFlexContainer>\n );\n};\n"],"mappings":"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","ignoreList":[]}

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

@@ -18,10 +18,10 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _Check = _interopRequireDefault(require("@mui/icons-material/Check"));
 var _Close = _interopRequireDefault(require("@mui/icons-material/Close"));
 var _renderUi = require("@pie-lib/render-ui");
-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; })(); }
+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; }
 // we need to use a larger line height for the token to be more readable
 var LINE_HEIGHT_MULTIPLIER = 3.2;
 // we need a bit more space for correctness indicators
@@ -39,7 +39,8 @@ var StyledToken = (0, _styles.styled)('span')(function (_ref) {
       color: _renderUi.color.disabled()
     },
     '&.disabledBlack': {
-      cursor: 'inherit'
+      cursor: 'inherit',
+      pointerEvents: 'none'
     },
     '&.disabledAndSelected': {
       backgroundColor: _renderUi.color.blueGrey100()
@@ -55,7 +56,7 @@ var StyledToken = (0, _styles.styled)('span')(function (_ref) {
   }), '&.selected', {
     backgroundColor: _renderUi.color.blueGrey100(),
     color: theme.palette.common.black,
-    lineHeight: "".concat(theme.spacing(1) * LINE_HEIGHT_MULTIPLIER, "px"),
+    lineHeight: "".concat(parseFloat(theme.spacing(1)) * LINE_HEIGHT_MULTIPLIER, "px"),
     border: "solid 2px ".concat(_renderUi.color.blueGrey900()),
     borderRadius: '4px',
     '& > *': {
@@ -64,11 +65,11 @@ var StyledToken = (0, _styles.styled)('span')(function (_ref) {
   }), '&.highlight', {
     border: "dashed 2px ".concat(_renderUi.color.blueGrey600()),
     borderRadius: '4px',
-    lineHeight: "".concat(theme.spacing(1) * LINE_HEIGHT_MULTIPLIER, "px")
+    lineHeight: "".concat(parseFloat(theme.spacing(1)) * LINE_HEIGHT_MULTIPLIER, "px")
   }), '&.print', {
     border: "dashed 2px ".concat(_renderUi.color.blueGrey600()),
     borderRadius: '4px',
-    lineHeight: "".concat(theme.spacing(1) * LINE_HEIGHT_MULTIPLIER, "px"),
+    lineHeight: "".concat(parseFloat(theme.spacing(1)) * LINE_HEIGHT_MULTIPLIER, "px"),
     color: _renderUi.color.text()
   }), '&.custom', {
     display: 'initial'
@@ -80,7 +81,7 @@ var StyledCommonTokenStyle = (0, _styles.styled)('span')(function (_ref3) {
     position: 'relative',
     borderRadius: '4px',
     color: theme.palette.common.black,
-    lineHeight: "".concat(theme.spacing(1) * CORRECTNESS_LINE_HEIGHT_MULTIPLIER + CORRECTNESS_PADDING, "px"),
+    lineHeight: "".concat(parseFloat(theme.spacing(1)) * CORRECTNESS_LINE_HEIGHT_MULTIPLIER + CORRECTNESS_PADDING, "px"),
     padding: "".concat(CORRECTNESS_PADDING, "px")
   };
 });
@@ -99,42 +100,36 @@ var StyledMissingContainer = (0, _styles.styled)(StyledCommonTokenStyle)(functio
     border: "".concat(_renderUi.color.incorrectWithIcon(), " dashed 2px")
   };
 });
-var StyledCorrectnessIcon = (0, _styles.styled)('span')(function () {
-  return {
-    color: _renderUi.color.white(),
-    position: 'absolute',
-    top: '-8px',
-    left: '-8px',
-    borderRadius: '50%',
-    fontSize: '12px',
-    padding: '2px',
-    display: 'inline-block'
-  };
-});
-var StyledCorrectIcon = (0, _styles.styled)(StyledCorrectnessIcon)(function () {
-  return {
+var baseIconStyles = {
+  color: _renderUi.color.white(),
+  position: 'absolute',
+  top: '-8px',
+  left: '-8px',
+  borderRadius: '50%',
+  fontSize: '12px',
+  padding: '2px',
+  display: 'inline-block'
+};
+var StyledCorrectCheckIcon = (0, _styles.styled)(_Check["default"])(function () {
+  return _objectSpread(_objectSpread({}, baseIconStyles), {}, {
     backgroundColor: _renderUi.color.correctTertiary()
-  };
+  });
 });
-var StyledIncorrectIcon = (0, _styles.styled)(StyledCorrectnessIcon)(function () {
-  return {
+var StyledIncorrectCloseIcon = (0, _styles.styled)(_Close["default"])(function () {
+  return _objectSpread(_objectSpread({}, baseIconStyles), {}, {
     backgroundColor: _renderUi.color.incorrectWithIcon()
-  };
+  });
 });
 var Wrapper = function Wrapper(_ref4) {
   var useWrapper = _ref4.useWrapper,
     children = _ref4.children,
     Container = _ref4.Container,
-    IconComponent = _ref4.IconComponent,
     Icon = _ref4.Icon;
-  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;
+  return useWrapper ? /*#__PURE__*/_react["default"].createElement(Container, null, children, Icon ? /*#__PURE__*/_react["default"].createElement(Icon, null) : null) : children;
 };
 Wrapper.propTypes = {
   useWrapper: _propTypes["default"].bool,
   Container: _propTypes["default"].elementType,
-  IconComponent: _propTypes["default"].elementType,
   Icon: _propTypes["default"].elementType,
   children: _propTypes["default"].node
 };
@@ -164,7 +159,6 @@ var Token = exports.Token = /*#__PURE__*/function (_React$Component) {
       var baseClassName = Token.rootClassName;
       var Container;
       var Icon;
-      var IconComponent;
       if (correct === undefined && selected && disabled) {
         return {
           className: (0, _classnames["default"])(baseClassName, 'selected', 'disabledBlack', classNameProp),
@@ -177,8 +171,7 @@ var Token = exports.Token = /*#__PURE__*/function (_React$Component) {
           className: (0, _classnames["default"])(baseClassName, 'custom', classNameProp),
           Component: StyledToken,
           Container: isCorrect ? StyledCorrectContainer : StyledIncorrectContainer,
-          Icon: isCorrect ? _Check["default"] : _Close["default"],
-          IconComponent: isCorrect ? StyledCorrectIcon : StyledIncorrectIcon
+          Icon: isCorrect ? StyledCorrectCheckIcon : StyledIncorrectCloseIcon
         };
       }
       if (isMissing) {
@@ -186,16 +179,14 @@ var Token = exports.Token = /*#__PURE__*/function (_React$Component) {
           className: (0, _classnames["default"])(baseClassName, 'custom', 'missing', classNameProp),
           Component: StyledToken,
           Container: StyledMissingContainer,
-          Icon: _Close["default"],
-          IconComponent: StyledIncorrectIcon
+          Icon: StyledIncorrectCloseIcon
         };
       }
       return {
         className: (0, _classnames["default"])(baseClassName, disabled && 'disabled', selectable && !disabled && !isTouchEnabled && 'selectable', selected && !disabled && 'selected', selected && disabled && 'disabledAndSelected', highlight && selectable && !disabled && !selected && 'highlight', animationsDisabled && 'print', classNameProp),
         Component: StyledToken,
         Container: Container,
-        Icon: Icon,
-        IconComponent: IconComponent
+        Icon: Icon
       };
     });
     return _this;
@@ -213,13 +204,11 @@ var Token = exports.Token = /*#__PURE__*/function (_React$Component) {
         className = _this$getClassAndIcon.className,
         Component = _this$getClassAndIcon.Component,
         Container = _this$getClassAndIcon.Container,
-        Icon = _this$getClassAndIcon.Icon,
-        IconComponent = _this$getClassAndIcon.IconComponent;
+        Icon = _this$getClassAndIcon.Icon;
       var TokenComponent = Component || StyledToken;
       return /*#__PURE__*/_react["default"].createElement(Wrapper, {
         useWrapper: correct !== undefined || isMissing,
         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","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":[]}
1	+ {"version":3,"file":"token.js","names":["_react","_interopRequireDefault","require","_propTypes","_styles","_classnames","_Check","_Close","_renderUi","_callSuper","t","o","e","_getPrototypeOf2","_possibleConstructorReturn2","_isNativeReflectConstruct","Reflect","construct","constructor","apply","Boolean","prototype","valueOf","call","ownKeys","r","Object","keys","getOwnPropertySymbols","filter","getOwnPropertyDescriptor","enumerable","push","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","defineProperty","LINE_HEIGHT_MULTIPLIER","CORRECTNESS_LINE_HEIGHT_MULTIPLIER","CORRECTNESS_PADDING","StyledToken","styled","_ref","theme","cursor","textIndent","color","disabled","pointerEvents","backgroundColor","blueGrey100","concat","breakpoints","values","md","blueGrey300","palette","common","black","lineHeight","parseFloat","spacing","border","blueGrey900","borderRadius","blueGrey600","text","display","StyledCommonTokenStyle","_ref3","position","padding","StyledCorrectContainer","correctTertiary","StyledIncorrectContainer","incorrectWithIcon","StyledMissingContainer","baseIconStyles","white","top","left","fontSize","StyledCorrectCheckIcon","Check","StyledIncorrectCloseIcon","Close","Wrapper","_ref4","useWrapper","children","Container","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","_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 pointerEvents: 'none',\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: `${parseFloat(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: `${parseFloat(theme.spacing(1)) LINE_HEIGHT_MULTIPLIER}px`,\n },\n '&.print': {\n border: `dashed 2px ${color.blueGrey600()}`,\n borderRadius: '4px',\n lineHeight: `${parseFloat(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: `${parseFloat(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 baseIconStyles = {\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 StyledCorrectCheckIcon = styled(Check)(() => ({\n ...baseIconStyles,\n backgroundColor: color.correctTertiary(),\n}));\n\nconst StyledIncorrectCloseIcon = styled(Close)(() => ({\n ...baseIconStyles,\n backgroundColor: color.incorrectWithIcon(),\n}));\n\nconst Wrapper = ({ useWrapper, children, Container, Icon }) =>\n useWrapper ? (\n <Container>\n {children}\n {Icon ? <Icon /> : null}\n </Container>\n ) : (\n children\n );\n\nWrapper.propTypes = {\n useWrapper: PropTypes.bool,\n Container: 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\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 ? StyledCorrectCheckIcon : StyledIncorrectCloseIcon,\n };\n }\n\n if (isMissing) {\n return {\n className: classNames(baseClassName, 'custom', 'missing', classNameProp),\n Component: StyledToken,\n Container: StyledMissingContainer,\n Icon: StyledIncorrectCloseIcon,\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 };\n };\n\n render() {\n const { text, index, correct, isMissing } = this.props;\n const { className, Component, Container, Icon } = this.getClassAndIconConfig();\n\n const TokenComponent = Component \|\| StyledToken;\n\n return (\n <Wrapper\n useWrapper={correct !== undefined \|\| isMissing}\n Container={Container}\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.39.0-mui-update.0",
+  "version": "1.40.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.42.0-mui-update.0",
-    "@pie-lib/style-utils": "^0.28.0-mui-update.0",
-    "@pie-lib/translator": "^2.31.0-mui-update.0",
+    "@pie-lib/render-ui": "4.43.0-mui-update.0",
+    "@pie-lib/style-utils": "0.29.0-mui-update.0",
+    "@pie-lib/translator": "2.32.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.29.0-mui-update.0",
+    "@pie-lib/test-utils": "0.30.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": "58f88b0f6effe31eba4cc6a6b51c9d18acec1450",
+  "gitHead": "094026045c44d3d7e558beb7e6986f2652661f75",
   "scripts": {}
 }

package/src/legend.js CHANGED Viewed

@@ -45,7 +45,7 @@ const StyledMissingContainer = styled(StyledContainer)(() => ({
   border: `${color.incorrectWithIcon()} dashed 2px`,
 }));
-const StyledIcon = styled('div')(() => ({
+const baseIconStyles = {
   color: color.white(),
   position: 'absolute',
   top: '-8px',
@@ -53,35 +53,34 @@ const StyledIcon = styled('div')(() => ({
   borderRadius: '50%',
   fontSize: '12px',
   padding: '2px',
-}));
+};
-const StyledCorrectIcon = styled(StyledIcon)(() => ({
+const StyledCorrectCheckIcon = styled(Check)(() => ({
+  ...baseIconStyles,
   backgroundColor: color.correctTertiary(),
 }));
-const StyledIncorrectIcon = styled(StyledIcon)(() => ({
+const StyledIncorrectCloseIcon = styled(Close)(() => ({
+  ...baseIconStyles,
   backgroundColor: color.incorrectWithIcon(),
 }));
 export const Legend = ({ language, showOnlyCorrect }) => {
   const legendItems = [
     {
-      Icon: Check,
+      Icon: StyledCorrectCheckIcon,
       label: translator.t('selectText.correctAnswerSelected', { lng: language }),
       Container: StyledCorrectContainer,
-      IconComponent: StyledCorrectIcon,
     },
     {
-      Icon: Close,
+      Icon: StyledIncorrectCloseIcon,
       label: translator.t('selectText.incorrectSelection', { lng: language }),
       Container: StyledIncorrectContainer,
-      IconComponent: StyledIncorrectIcon,
     },
     {
-      Icon: Close,
+      Icon: StyledIncorrectCloseIcon,
       label: translator.t('selectText.correctAnswerNotSelected', { lng: language }),
       Container: StyledMissingContainer,
-      IconComponent: StyledIncorrectIcon,
     },
   ];
@@ -92,11 +91,9 @@ export const Legend = ({ language, showOnlyCorrect }) => {
   return (
     <StyledFlexContainer>
       <StyledKey>{translator.t('selectText.key', { lng: language })}</StyledKey>
-      {legendItems.map(({ Icon, label, Container, IconComponent }, idx) => (
+      {legendItems.map(({ Icon, label, Container }, idx) => (
         <Container key={idx}>
-          <IconComponent>
-            <Icon />
-          </IconComponent>
+          <Icon />
           <span>{label}</span>
         </Container>
       ))}

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

@@ -23,6 +23,7 @@ const StyledToken = styled('span')(({ theme }) => ({
   },
   '&.disabledBlack': {
     cursor: 'inherit',
+    pointerEvents: 'none',
   },
   '&.disabledAndSelected': {
     backgroundColor: color.blueGrey100(),
@@ -39,7 +40,7 @@ const StyledToken = styled('span')(({ theme }) => ({
   '&.selected': {
     backgroundColor: color.blueGrey100(),
     color: theme.palette.common.black,
-    lineHeight: `${theme.spacing(1) * LINE_HEIGHT_MULTIPLIER}px`,
+    lineHeight: `${parseFloat(theme.spacing(1)) * LINE_HEIGHT_MULTIPLIER}px`,
     border: `solid 2px ${color.blueGrey900()}`,
     borderRadius: '4px',
     '& > *': {
@@ -49,12 +50,12 @@ const StyledToken = styled('span')(({ theme }) => ({
   '&.highlight': {
     border: `dashed 2px ${color.blueGrey600()}`,
     borderRadius: '4px',
-    lineHeight: `${theme.spacing(1) * LINE_HEIGHT_MULTIPLIER}px`,
+    lineHeight: `${parseFloat(theme.spacing(1)) * LINE_HEIGHT_MULTIPLIER}px`,
   },
   '&.print': {
     border: `dashed 2px ${color.blueGrey600()}`,
     borderRadius: '4px',
-    lineHeight: `${theme.spacing(1) * LINE_HEIGHT_MULTIPLIER}px`,
+    lineHeight: `${parseFloat(theme.spacing(1)) * LINE_HEIGHT_MULTIPLIER}px`,
     color: color.text(),
   },
   '&.custom': {
@@ -66,7 +67,7 @@ const StyledCommonTokenStyle = styled('span')(({ theme }) => ({
   position: 'relative',
   borderRadius: '4px',
   color: theme.palette.common.black,
-  lineHeight: `${theme.spacing(1) * CORRECTNESS_LINE_HEIGHT_MULTIPLIER + CORRECTNESS_PADDING}px`,
+  lineHeight: `${parseFloat(theme.spacing(1)) * CORRECTNESS_LINE_HEIGHT_MULTIPLIER + CORRECTNESS_PADDING}px`,
   padding: `${CORRECTNESS_PADDING}px`,
 }));
@@ -82,7 +83,7 @@ const StyledMissingContainer = styled(StyledCommonTokenStyle)(() => ({
   border: `${color.incorrectWithIcon()} dashed 2px`,
 }));
-const StyledCorrectnessIcon = styled('span')(() => ({
+const baseIconStyles = {
   color: color.white(),
   position: 'absolute',
   top: '-8px',
@@ -91,25 +92,23 @@ const StyledCorrectnessIcon = styled('span')(() => ({
   fontSize: '12px',
   padding: '2px',
   display: 'inline-block',
-}));
+};
-const StyledCorrectIcon = styled(StyledCorrectnessIcon)(() => ({
+const StyledCorrectCheckIcon = styled(Check)(() => ({
+  ...baseIconStyles,
   backgroundColor: color.correctTertiary(),
 }));
-const StyledIncorrectIcon = styled(StyledCorrectnessIcon)(() => ({
+const StyledIncorrectCloseIcon = styled(Close)(() => ({
+  ...baseIconStyles,
   backgroundColor: color.incorrectWithIcon(),
 }));
-const Wrapper = ({ useWrapper, children, Container, IconComponent, Icon }) =>
+const Wrapper = ({ useWrapper, children, Container, Icon }) =>
   useWrapper ? (
     <Container>
       {children}
-      {Icon && IconComponent ? (
-        <IconComponent>
-          <Icon fontSize="inherit" />
-        </IconComponent>
-      ) : null}
+      {Icon ? <Icon /> : null}
     </Container>
   ) : (
     children
@@ -118,7 +117,6 @@ const Wrapper = ({ useWrapper, children, Container, IconComponent, Icon }) =>
 Wrapper.propTypes = {
   useWrapper: PropTypes.bool,
   Container: PropTypes.elementType,
-  IconComponent: PropTypes.elementType,
   Icon: PropTypes.elementType,
   children: PropTypes.node,
 };
@@ -160,7 +158,6 @@ export class Token extends React.Component {
     const baseClassName = Token.rootClassName;
     let Container;
     let Icon;
-    let IconComponent;
     if (correct === undefined && selected && disabled) {
       return {
@@ -175,8 +172,7 @@ export class Token extends React.Component {
         className: classNames(baseClassName, 'custom', classNameProp),
         Component: StyledToken,
         Container: isCorrect ? StyledCorrectContainer : StyledIncorrectContainer,
-        Icon: isCorrect ? Check : Close,
-        IconComponent: isCorrect ? StyledCorrectIcon : StyledIncorrectIcon,
+        Icon: isCorrect ? StyledCorrectCheckIcon : StyledIncorrectCloseIcon,
       };
     }
@@ -185,8 +181,7 @@ export class Token extends React.Component {
         className: classNames(baseClassName, 'custom', 'missing', classNameProp),
         Component: StyledToken,
         Container: StyledMissingContainer,
-        Icon: Close,
-        IconComponent: StyledIncorrectIcon,
+        Icon: StyledIncorrectCloseIcon,
       };
     }
@@ -204,13 +199,12 @@ export class Token extends React.Component {
       Component: StyledToken,
       Container,
       Icon,
-      IconComponent,
     };
   };
   render() {
     const { text, index, correct, isMissing } = this.props;
-    const { className, Component, Container, Icon, IconComponent } = this.getClassAndIconConfig();
+    const { className, Component, Container, Icon } = this.getClassAndIconConfig();
     const TokenComponent = Component || StyledToken;
@@ -218,7 +212,6 @@ export class Token extends React.Component {
       <Wrapper
         useWrapper={correct !== undefined || isMissing}
         Container={Container}
-        IconComponent={IconComponent}
         Icon={Icon}
       >
         <TokenComponent