@pie-lib/text-select 1.39.1-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
  1. package/CHANGELOG.md +13 -0
  2. package/lib/legend.js +26 -29
  3. package/lib/legend.js.map +1 -1
  4. package/lib/token-select/token.js +29 -40
  5. package/lib/token-select/token.js.map +1 -1
  6. package/package.json +6 -6
  7. package/src/legend.js +11 -14
  8. package/src/token-select/token.jsx +16 -23
package/CHANGELOG.md CHANGED
@@ -3,6 +3,19 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ # [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)
7
+
8
+
9
+ ### Bug Fixes
10
+
11
+ * diaable toggling selection in view mode ([c0e47f0](https://github.com/pie-framework/pie-lib/commit/c0e47f0f5beaced697d6cdf3c418b92ec29679ab))
12
+ * parsefloat to correctly compute tokens line height ([282c464](https://github.com/pie-framework/pie-lib/commit/282c464b860dc72e08d8692a7c2236c5475e49e0))
13
+ * **text-select:** refactor icon token wrappers,delete unused container ([fdc6066](https://github.com/pie-framework/pie-lib/commit/fdc60661dd3bbda8c936a5e495be75ac4a2ac2ea))
14
+
15
+
16
+
17
+
18
+
6
19
  ## [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)
7
20
 
8
21
 
package/lib/legend.js CHANGED
@@ -5,12 +5,15 @@ Object.defineProperty(exports, "__esModule", {
5
5
  value: true
6
6
  });
7
7
  exports.Legend = void 0;
8
+ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
8
9
  var _react = _interopRequireDefault(require("react"));
9
10
  var _styles = require("@mui/material/styles");
10
11
  var _Check = _interopRequireDefault(require("@mui/icons-material/Check"));
11
12
  var _Close = _interopRequireDefault(require("@mui/icons-material/Close"));
12
13
  var _renderUi = require("@pie-lib/render-ui");
13
14
  var _translator = _interopRequireDefault(require("@pie-lib/translator"));
15
+ 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; }
16
+ 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; }
14
17
  var translator = _translator["default"].translator;
15
18
  var StyledFlexContainer = (0, _styles.styled)('div')(function (_ref) {
16
19
  var theme = _ref.theme;
@@ -58,51 +61,46 @@ var StyledMissingContainer = (0, _styles.styled)(StyledContainer)(function () {
58
61
  border: "".concat(_renderUi.color.incorrectWithIcon(), " dashed 2px")
59
62
  };
60
63
  });
61
- var StyledIcon = (0, _styles.styled)('div')(function () {
62
- return {
63
- color: _renderUi.color.white(),
64
- position: 'absolute',
65
- top: '-8px',
66
- left: '-8px',
67
- borderRadius: '50%',
68
- fontSize: '12px',
69
- padding: '2px'
70
- };
71
- });
72
- var StyledCorrectIcon = (0, _styles.styled)(StyledIcon)(function () {
73
- return {
64
+ var baseIconStyles = {
65
+ color: _renderUi.color.white(),
66
+ position: 'absolute',
67
+ top: '-8px',
68
+ left: '-8px',
69
+ borderRadius: '50%',
70
+ fontSize: '12px',
71
+ padding: '2px'
72
+ };
73
+ var StyledCorrectCheckIcon = (0, _styles.styled)(_Check["default"])(function () {
74
+ return _objectSpread(_objectSpread({}, baseIconStyles), {}, {
74
75
  backgroundColor: _renderUi.color.correctTertiary()
75
- };
76
+ });
76
77
  });
77
- var StyledIncorrectIcon = (0, _styles.styled)(StyledIcon)(function () {
78
- return {
78
+ var StyledIncorrectCloseIcon = (0, _styles.styled)(_Close["default"])(function () {
79
+ return _objectSpread(_objectSpread({}, baseIconStyles), {}, {
79
80
  backgroundColor: _renderUi.color.incorrectWithIcon()
80
- };
81
+ });
81
82
  });
82
83
  var Legend = exports.Legend = function Legend(_ref3) {
83
84
  var language = _ref3.language,
84
85
  showOnlyCorrect = _ref3.showOnlyCorrect;
85
86
  var legendItems = [{
86
- Icon: _Check["default"],
87
+ Icon: StyledCorrectCheckIcon,
87
88
  label: translator.t('selectText.correctAnswerSelected', {
88
89
  lng: language
89
90
  }),
90
- Container: StyledCorrectContainer,
91
- IconComponent: StyledCorrectIcon
91
+ Container: StyledCorrectContainer
92
92
  }, {
93
- Icon: _Close["default"],
93
+ Icon: StyledIncorrectCloseIcon,
94
94
  label: translator.t('selectText.incorrectSelection', {
95
95
  lng: language
96
96
  }),
97
- Container: StyledIncorrectContainer,
98
- IconComponent: StyledIncorrectIcon
97
+ Container: StyledIncorrectContainer
99
98
  }, {
100
- Icon: _Close["default"],
99
+ Icon: StyledIncorrectCloseIcon,
101
100
  label: translator.t('selectText.correctAnswerNotSelected', {
102
101
  lng: language
103
102
  }),
104
- Container: StyledMissingContainer,
105
- IconComponent: StyledIncorrectIcon
103
+ Container: StyledMissingContainer
106
104
  }];
107
105
  if (showOnlyCorrect) {
108
106
  legendItems.splice(1, 2);
@@ -112,11 +110,10 @@ var Legend = exports.Legend = function Legend(_ref3) {
112
110
  })), legendItems.map(function (_ref4, idx) {
113
111
  var Icon = _ref4.Icon,
114
112
  label = _ref4.label,
115
- Container = _ref4.Container,
116
- IconComponent = _ref4.IconComponent;
113
+ Container = _ref4.Container;
117
114
  return /*#__PURE__*/_react["default"].createElement(Container, {
118
115
  key: idx
119
- }, /*#__PURE__*/_react["default"].createElement(IconComponent, null, /*#__PURE__*/_react["default"].createElement(Icon, null)), /*#__PURE__*/_react["default"].createElement("span", null, label));
116
+ }, /*#__PURE__*/_react["default"].createElement(Icon, null), /*#__PURE__*/_react["default"].createElement("span", null, label));
120
117
  }));
121
118
  };
122
119
  //# sourceMappingURL=legend.js.map
package/lib/legend.js.map CHANGED
@@ -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":"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","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
@@ -18,10 +18,10 @@ var _classnames = _interopRequireDefault(require("classnames"));
18
18
  var _Check = _interopRequireDefault(require("@mui/icons-material/Check"));
19
19
  var _Close = _interopRequireDefault(require("@mui/icons-material/Close"));
20
20
  var _renderUi = require("@pie-lib/render-ui");
21
- 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; }
22
- 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; }
23
21
  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)); }
24
22
  function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
23
+ 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; }
24
+ 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; }
25
25
  // we need to use a larger line height for the token to be more readable
26
26
  var LINE_HEIGHT_MULTIPLIER = 3.2;
27
27
  // we need a bit more space for correctness indicators
@@ -39,7 +39,8 @@ var StyledToken = (0, _styles.styled)('span')(function (_ref) {
39
39
  color: _renderUi.color.disabled()
40
40
  },
41
41
  '&.disabledBlack': {
42
- cursor: 'inherit'
42
+ cursor: 'inherit',
43
+ pointerEvents: 'none'
43
44
  },
44
45
  '&.disabledAndSelected': {
45
46
  backgroundColor: _renderUi.color.blueGrey100()
@@ -55,7 +56,7 @@ var StyledToken = (0, _styles.styled)('span')(function (_ref) {
55
56
  }), '&.selected', {
56
57
  backgroundColor: _renderUi.color.blueGrey100(),
57
58
  color: theme.palette.common.black,
58
- lineHeight: "".concat(theme.spacing(1) * LINE_HEIGHT_MULTIPLIER, "px"),
59
+ lineHeight: "".concat(parseFloat(theme.spacing(1)) * LINE_HEIGHT_MULTIPLIER, "px"),
59
60
  border: "solid 2px ".concat(_renderUi.color.blueGrey900()),
60
61
  borderRadius: '4px',
61
62
  '& > *': {
@@ -64,11 +65,11 @@ var StyledToken = (0, _styles.styled)('span')(function (_ref) {
64
65
  }), '&.highlight', {
65
66
  border: "dashed 2px ".concat(_renderUi.color.blueGrey600()),
66
67
  borderRadius: '4px',
67
- lineHeight: "".concat(theme.spacing(1) * LINE_HEIGHT_MULTIPLIER, "px")
68
+ lineHeight: "".concat(parseFloat(theme.spacing(1)) * LINE_HEIGHT_MULTIPLIER, "px")
68
69
  }), '&.print', {
69
70
  border: "dashed 2px ".concat(_renderUi.color.blueGrey600()),
70
71
  borderRadius: '4px',
71
- lineHeight: "".concat(theme.spacing(1) * LINE_HEIGHT_MULTIPLIER, "px"),
72
+ lineHeight: "".concat(parseFloat(theme.spacing(1)) * LINE_HEIGHT_MULTIPLIER, "px"),
72
73
  color: _renderUi.color.text()
73
74
  }), '&.custom', {
74
75
  display: 'initial'
@@ -80,7 +81,7 @@ var StyledCommonTokenStyle = (0, _styles.styled)('span')(function (_ref3) {
80
81
  position: 'relative',
81
82
  borderRadius: '4px',
82
83
  color: theme.palette.common.black,
83
- lineHeight: "".concat(theme.spacing(1) * CORRECTNESS_LINE_HEIGHT_MULTIPLIER + CORRECTNESS_PADDING, "px"),
84
+ lineHeight: "".concat(parseFloat(theme.spacing(1)) * CORRECTNESS_LINE_HEIGHT_MULTIPLIER + CORRECTNESS_PADDING, "px"),
84
85
  padding: "".concat(CORRECTNESS_PADDING, "px")
85
86
  };
86
87
  });
@@ -99,42 +100,36 @@ var StyledMissingContainer = (0, _styles.styled)(StyledCommonTokenStyle)(functio
99
100
  border: "".concat(_renderUi.color.incorrectWithIcon(), " dashed 2px")
100
101
  };
101
102
  });
102
- var StyledCorrectnessIcon = (0, _styles.styled)('span')(function () {
103
- return {
104
- color: _renderUi.color.white(),
105
- position: 'absolute',
106
- top: '-8px',
107
- left: '-8px',
108
- borderRadius: '50%',
109
- fontSize: '12px',
110
- padding: '2px',
111
- display: 'inline-block'
112
- };
113
- });
114
- var StyledCorrectIcon = (0, _styles.styled)(StyledCorrectnessIcon)(function () {
115
- return {
103
+ var baseIconStyles = {
104
+ color: _renderUi.color.white(),
105
+ position: 'absolute',
106
+ top: '-8px',
107
+ left: '-8px',
108
+ borderRadius: '50%',
109
+ fontSize: '12px',
110
+ padding: '2px',
111
+ display: 'inline-block'
112
+ };
113
+ var StyledCorrectCheckIcon = (0, _styles.styled)(_Check["default"])(function () {
114
+ return _objectSpread(_objectSpread({}, baseIconStyles), {}, {
116
115
  backgroundColor: _renderUi.color.correctTertiary()
117
- };
116
+ });
118
117
  });
119
- var StyledIncorrectIcon = (0, _styles.styled)(StyledCorrectnessIcon)(function () {
120
- return {
118
+ var StyledIncorrectCloseIcon = (0, _styles.styled)(_Close["default"])(function () {
119
+ return _objectSpread(_objectSpread({}, baseIconStyles), {}, {
121
120
  backgroundColor: _renderUi.color.incorrectWithIcon()
122
- };
121
+ });
123
122
  });
124
123
  var Wrapper = function Wrapper(_ref4) {
125
124
  var useWrapper = _ref4.useWrapper,
126
125
  children = _ref4.children,
127
126
  Container = _ref4.Container,
128
- IconComponent = _ref4.IconComponent,
129
127
  Icon = _ref4.Icon;
130
- return useWrapper ? /*#__PURE__*/_react["default"].createElement(Container, null, children, Icon && IconComponent ? /*#__PURE__*/_react["default"].createElement(IconComponent, null, /*#__PURE__*/_react["default"].createElement(Icon, {
131
- fontSize: "inherit"
132
- })) : null) : children;
128
+ return useWrapper ? /*#__PURE__*/_react["default"].createElement(Container, null, children, Icon ? /*#__PURE__*/_react["default"].createElement(Icon, null) : null) : children;
133
129
  };
134
130
  Wrapper.propTypes = {
135
131
  useWrapper: _propTypes["default"].bool,
136
132
  Container: _propTypes["default"].elementType,
137
- IconComponent: _propTypes["default"].elementType,
138
133
  Icon: _propTypes["default"].elementType,
139
134
  children: _propTypes["default"].node
140
135
  };
@@ -164,7 +159,6 @@ var Token = exports.Token = /*#__PURE__*/function (_React$Component) {
164
159
  var baseClassName = Token.rootClassName;
165
160
  var Container;
166
161
  var Icon;
167
- var IconComponent;
168
162
  if (correct === undefined && selected && disabled) {
169
163
  return {
170
164
  className: (0, _classnames["default"])(baseClassName, 'selected', 'disabledBlack', classNameProp),
@@ -177,8 +171,7 @@ var Token = exports.Token = /*#__PURE__*/function (_React$Component) {
177
171
  className: (0, _classnames["default"])(baseClassName, 'custom', classNameProp),
178
172
  Component: StyledToken,
179
173
  Container: isCorrect ? StyledCorrectContainer : StyledIncorrectContainer,
180
- Icon: isCorrect ? _Check["default"] : _Close["default"],
181
- IconComponent: isCorrect ? StyledCorrectIcon : StyledIncorrectIcon
174
+ Icon: isCorrect ? StyledCorrectCheckIcon : StyledIncorrectCloseIcon
182
175
  };
183
176
  }
184
177
  if (isMissing) {
@@ -186,16 +179,14 @@ var Token = exports.Token = /*#__PURE__*/function (_React$Component) {
186
179
  className: (0, _classnames["default"])(baseClassName, 'custom', 'missing', classNameProp),
187
180
  Component: StyledToken,
188
181
  Container: StyledMissingContainer,
189
- Icon: _Close["default"],
190
- IconComponent: StyledIncorrectIcon
182
+ Icon: StyledIncorrectCloseIcon
191
183
  };
192
184
  }
193
185
  return {
194
186
  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),
195
187
  Component: StyledToken,
196
188
  Container: Container,
197
- Icon: Icon,
198
- IconComponent: IconComponent
189
+ Icon: Icon
199
190
  };
200
191
  });
201
192
  return _this;
@@ -213,13 +204,11 @@ var Token = exports.Token = /*#__PURE__*/function (_React$Component) {
213
204
  className = _this$getClassAndIcon.className,
214
205
  Component = _this$getClassAndIcon.Component,
215
206
  Container = _this$getClassAndIcon.Container,
216
- Icon = _this$getClassAndIcon.Icon,
217
- IconComponent = _this$getClassAndIcon.IconComponent;
207
+ Icon = _this$getClassAndIcon.Icon;
218
208
  var TokenComponent = Component || StyledToken;
219
209
  return /*#__PURE__*/_react["default"].createElement(Wrapper, {
220
210
  useWrapper: correct !== undefined || isMissing,
221
211
  Container: Container,
222
- IconComponent: IconComponent,
223
212
  Icon: Icon
224
213
  }, /*#__PURE__*/_react["default"].createElement(TokenComponent, {
225
214
  className: className,
package/lib/token-select/token.js.map CHANGED
@@ -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":";;;;;;;;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,UAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,OAAA,GAAAF,OAAA;AACA,IAAAG,WAAA,GAAAJ,sBAAA,CAAAC,OAAA;AACA,IAAAI,MAAA,GAAAL,sBAAA,CAAAC,OAAA;AACA,IAAAK,MAAA,GAAAN,sBAAA,CAAAC,OAAA;AAEA,IAAAM,SAAA,GAAAN,OAAA;AAA2C,SAAAO,WAAAC,CAAA,EAAAC,CAAA,EAAAC,CAAA,WAAAD,CAAA,OAAAE,gBAAA,aAAAF,CAAA,OAAAG,2BAAA,aAAAJ,CAAA,EAAAK,yBAAA,KAAAC,OAAA,CAAAC,SAAA,CAAAN,CAAA,EAAAC,CAAA,YAAAC,gBAAA,aAAAH,CAAA,EAAAQ,WAAA,IAAAP,CAAA,CAAAQ,KAAA,CAAAT,CAAA,EAAAE,CAAA;AAAA,SAAAG,0BAAA,cAAAL,CAAA,IAAAU,OAAA,CAAAC,SAAA,CAAAC,OAAA,CAAAC,IAAA,CAAAP,OAAA,CAAAC,SAAA,CAAAG,OAAA,iCAAAV,CAAA,aAAAK,yBAAA,YAAAA,0BAAA,aAAAL,CAAA;AAAA,SAAAc,QAAAZ,CAAA,EAAAa,CAAA,QAAAf,CAAA,GAAAgB,MAAA,CAAAC,IAAA,CAAAf,CAAA,OAAAc,MAAA,CAAAE,qBAAA,QAAAjB,CAAA,GAAAe,MAAA,CAAAE,qBAAA,CAAAhB,CAAA,GAAAa,CAAA,KAAAd,CAAA,GAAAA,CAAA,CAAAkB,MAAA,WAAAJ,CAAA,WAAAC,MAAA,CAAAI,wBAAA,CAAAlB,CAAA,EAAAa,CAAA,EAAAM,UAAA,OAAArB,CAAA,CAAAsB,IAAA,CAAAb,KAAA,CAAAT,CAAA,EAAAC,CAAA,YAAAD,CAAA;AAAA,SAAAuB,cAAArB,CAAA,aAAAa,CAAA,MAAAA,CAAA,GAAAS,SAAA,CAAAC,MAAA,EAAAV,CAAA,UAAAf,CAAA,WAAAwB,SAAA,CAAAT,CAAA,IAAAS,SAAA,CAAAT,CAAA,QAAAA,CAAA,OAAAD,OAAA,CAAAE,MAAA,CAAAhB,CAAA,OAAA0B,OAAA,WAAAX,CAAA,QAAAY,gBAAA,aAAAzB,CAAA,EAAAa,CAAA,EAAAf,CAAA,CAAAe,CAAA,SAAAC,MAAA,CAAAY,yBAAA,GAAAZ,MAAA,CAAAa,gBAAA,CAAA3B,CAAA,EAAAc,MAAA,CAAAY,yBAAA,CAAA5B,CAAA,KAAAc,OAAA,CAAAE,MAAA,CAAAhB,CAAA,GAAA0B,OAAA,WAAAX,CAAA,IAAAC,MAAA,CAAAc,cAAA,CAAA5B,CAAA,EAAAa,CAAA,EAAAC,MAAA,CAAAI,wBAAA,CAAApB,CAAA,EAAAe,CAAA,iBAAAb,CAAA;AAE3C;AACA,IAAM6B,sBAAsB,GAAG,GAAG;AAClC;AACA,IAAMC,kCAAkC,GAAG,GAAG;AAC9C,IAAMC,mBAAmB,GAAG,CAAC;;AAE7B;AACA,IAAMC,WAAW,GAAG,IAAAC,cAAM,EAAC,MAAM,CAAC,CAAC,UAAAC,IAAA;EAAA,IAAGC,KAAK,GAAAD,IAAA,CAALC,KAAK;EAAA,WAAAV,gBAAA,iBAAAA,gBAAA,iBAAAA,gBAAA,iBAAAA,gBAAA,iBAAAA,gBAAA;IACzCW,MAAM,EAAE,SAAS;IACjBC,UAAU,EAAE,CAAC;IACb,YAAY,EAAE;MACZD,MAAM,EAAE,SAAS;MACjBE,KAAK,EAAEA,eAAK,CAACC,QAAQ,CAAC;IACxB,CAAC;IACD,iBAAiB,EAAE;MACjBH,MAAM,EAAE,SAAS;MACjBI,aAAa,EAAE;IACjB,CAAC;IACD,uBAAuB,EAAE;MACvBC,eAAe,EAAEH,eAAK,CAACI,WAAW,CAAC;IACrC;EAAC,yBAAAC,MAAA,CACsBR,KAAK,CAACS,WAAW,CAACC,MAAM,CAACC,EAAE,UAAQ;IACxD,oBAAoB,EAAE;MACpBL,eAAe,EAAEH,eAAK,CAACS,WAAW,CAAC,CAAC;MACpCT,KAAK,EAAEH,KAAK,CAACa,OAAO,CAACC,MAAM,CAACC,KAAK;MACjC,OAAO,EAAE;QACPT,eAAe,EAAEH,eAAK,CAACS,WAAW,CAAC;MACrC;IACF;EACF,CAAC,GACD,YAAY,EAAE;IACZN,eAAe,EAAEH,eAAK,CAACI,WAAW,CAAC,CAAC;IACpCJ,KAAK,EAAEH,KAAK,CAACa,OAAO,CAACC,MAAM,CAACC,KAAK;IACjCC,UAAU,KAAAR,MAAA,CAAKS,UAAU,CAACjB,KAAK,CAACkB,OAAO,CAAC,CAAC,CAAC,CAAC,GAAGxB,sBAAsB,OAAI;IACxEyB,MAAM,eAAAX,MAAA,CAAeL,eAAK,CAACiB,WAAW,CAAC,CAAC,CAAE;IAC1CC,YAAY,EAAE,KAAK;IACnB,OAAO,EAAE;MACPf,eAAe,EAAEH,eAAK,CAACI,WAAW,CAAC;IACrC;EACF,CAAC,GACD,aAAa,EAAE;IACbY,MAAM,gBAAAX,MAAA,CAAgBL,eAAK,CAACmB,WAAW,CAAC,CAAC,CAAE;IAC3CD,YAAY,EAAE,KAAK;IACnBL,UAAU,KAAAR,MAAA,CAAKS,UAAU,CAACjB,KAAK,CAACkB,OAAO,CAAC,CAAC,CAAC,CAAC,GAAGxB,sBAAsB;EACtE,CAAC,GACD,SAAS,EAAE;IACTyB,MAAM,gBAAAX,MAAA,CAAgBL,eAAK,CAACmB,WAAW,CAAC,CAAC,CAAE;IAC3CD,YAAY,EAAE,KAAK;IACnBL,UAAU,KAAAR,MAAA,CAAKS,UAAU,CAACjB,KAAK,CAACkB,OAAO,CAAC,CAAC,CAAC,CAAC,GAAGxB,sBAAsB,OAAI;IACxES,KAAK,EAAEA,eAAK,CAACoB,IAAI,CAAC;EACpB,CAAC,GACD,UAAU,EAAE;IACVC,OAAO,EAAE;EACX,CAAC;AAAA,CACD,CAAC;AAEH,IAAMC,sBAAsB,GAAG,IAAA3B,cAAM,EAAC,MAAM,CAAC,CAAC,UAAA4B,KAAA;EAAA,IAAG1B,KAAK,GAAA0B,KAAA,CAAL1B,KAAK;EAAA,OAAQ;IAC5D2B,QAAQ,EAAE,UAAU;IACpBN,YAAY,EAAE,KAAK;IACnBlB,KAAK,EAAEH,KAAK,CAACa,OAAO,CAACC,MAAM,CAACC,KAAK;IACjCC,UAAU,KAAAR,MAAA,CAAKS,UAAU,CAACjB,KAAK,CAACkB,OAAO,CAAC,CAAC,CAAC,CAAC,GAAGvB,kCAAkC,GAAGC,mBAAmB,OAAI;IAC1GgC,OAAO,KAAApB,MAAA,CAAKZ,mBAAmB;EACjC,CAAC;AAAA,CAAC,CAAC;AAEH,IAAMiC,sBAAsB,GAAG,IAAA/B,cAAM,EAAC2B,sBAAsB,CAAC,CAAC;EAAA,OAAO;IACnEN,MAAM,KAAAX,MAAA,CAAKL,eAAK,CAAC2B,eAAe,CAAC,CAAC;EACpC,CAAC;AAAA,CAAC,CAAC;AAEH,IAAMC,wBAAwB,GAAG,IAAAjC,cAAM,EAAC2B,sBAAsB,CAAC,CAAC;EAAA,OAAO;IACrEN,MAAM,KAAAX,MAAA,CAAKL,eAAK,CAAC6B,iBAAiB,CAAC,CAAC;EACtC,CAAC;AAAA,CAAC,CAAC;AAEH,IAAMC,sBAAsB,GAAG,IAAAnC,cAAM,EAAC2B,sBAAsB,CAAC,CAAC;EAAA,OAAO;IACnEN,MAAM,KAAAX,MAAA,CAAKL,eAAK,CAAC6B,iBAAiB,CAAC,CAAC;EACtC,CAAC;AAAA,CAAC,CAAC;AAEH,IAAME,cAAc,GAAG;EACrB/B,KAAK,EAAEA,eAAK,CAACgC,KAAK,CAAC,CAAC;EACpBR,QAAQ,EAAE,UAAU;EACpBS,GAAG,EAAE,MAAM;EACXC,IAAI,EAAE,MAAM;EACZhB,YAAY,EAAE,KAAK;EACnBiB,QAAQ,EAAE,MAAM;EAChBV,OAAO,EAAE,KAAK;EACdJ,OAAO,EAAE;AACX,CAAC;AAED,IAAMe,sBAAsB,GAAG,IAAAzC,cAAM,EAAC0C,iBAAK,CAAC,CAAC;EAAA,OAAAtD,aAAA,CAAAA,aAAA,KACxCgD,cAAc;IACjB5B,eAAe,EAAEH,eAAK,CAAC2B,eAAe,CAAC;EAAC;AAAA,CACxC,CAAC;AAEH,IAAMW,wBAAwB,GAAG,IAAA3C,cAAM,EAAC4C,iBAAK,CAAC,CAAC;EAAA,OAAAxD,aAAA,CAAAA,aAAA,KAC1CgD,cAAc;IACjB5B,eAAe,EAAEH,eAAK,CAAC6B,iBAAiB,CAAC;EAAC;AAAA,CAC1C,CAAC;AAEH,IAAMW,OAAO,GAAG,SAAVA,OAAOA,CAAAC,KAAA;EAAA,IAAMC,UAAU,GAAAD,KAAA,CAAVC,UAAU;IAAEC,QAAQ,GAAAF,KAAA,CAARE,QAAQ;IAAEC,SAAS,GAAAH,KAAA,CAATG,SAAS;IAAEC,IAAI,GAAAJ,KAAA,CAAJI,IAAI;EAAA,OACtDH,UAAU,gBACR5F,MAAA,YAAAgG,aAAA,CAACF,SAAS,QACPD,QAAQ,EACRE,IAAI,gBAAG/F,MAAA,YAAAgG,aAAA,CAACD,IAAI,MAAE,CAAC,GAAG,IACV,CAAC,GAEZF,QACD;AAAA;AAEHH,OAAO,CAACO,SAAS,GAAG;EAClBL,UAAU,EAAEM,qBAAS,CAACC,IAAI;EAC1BL,SAAS,EAAEI,qBAAS,CAACE,WAAW;EAChCL,IAAI,EAAEG,qBAAS,CAACE,WAAW;EAC3BP,QAAQ,EAAEK,qBAAS,CAACG;AACtB,CAAC;AAEM,IAAMC,UAAU,GAAAC,OAAA,CAAAD,UAAA,GAAG;EACxBhC,IAAI,EAAE4B,qBAAS,CAACM,MAAM;EACtBC,UAAU,EAAEP,qBAAS,CAACC;AACxB,CAAC;AAAC,IAEWO,KAAK,GAAAH,OAAA,CAAAG,KAAA,0BAAAC,gBAAA;EAAA,SAAAD,MAAA;IAAA,IAAAE,KAAA;IAAA,IAAAC,gBAAA,mBAAAH,KAAA;IAAA,SAAAI,IAAA,GAAA5E,SAAA,CAAAC,MAAA,EAAA4E,IAAA,OAAAC,KAAA,CAAAF,IAAA,GAAAG,IAAA,MAAAA,IAAA,GAAAH,IAAA,EAAAG,IAAA;MAAAF,IAAA,CAAAE,IAAA,IAAA/E,SAAA,CAAA+E,IAAA;IAAA;IAAAL,KAAA,GAAAnG,UAAA,OAAAiG,KAAA,KAAAnD,MAAA,CAAAwD,IAAA;IAAA,IAAA1E,gBAAA,aAAAuE,KAAA,2BAiBQ,YAAM;MAC5B,IAAAM,WAAA,GASIN,KAAA,CAAKO,KAAK;QARZV,UAAU,GAAAS,WAAA,CAAVT,UAAU;QACVW,QAAQ,GAAAF,WAAA,CAARE,QAAQ;QACGC,aAAa,GAAAH,WAAA,CAAxBI,SAAS;QACTnE,QAAQ,GAAA+D,WAAA,CAAR/D,QAAQ;QACRoE,SAAS,GAAAL,WAAA,CAATK,SAAS;QACTC,OAAO,GAAAN,WAAA,CAAPM,OAAO;QACPC,kBAAkB,GAAAP,WAAA,CAAlBO,kBAAkB;QAClBC,SAAS,GAAAR,WAAA,CAATQ,SAAS;MAEX,IAAMC,cAAc,GAAG,cAAc,IAAIC,MAAM,IAAIC,SAAS,CAACC,cAAc,GAAG,CAAC,IAAID,SAAS,CAACE,gBAAgB,GAAG,CAAC;MACjH,IAAMC,aAAa,GAAGtB,KAAK,CAACuB,aAAa;MACzC,IAAInC,SAAS;MACb,IAAIC,IAAI;MAER,IAAIyB,OAAO,KAAKU,SAAS,IAAId,QAAQ,IAAIjE,QAAQ,EAAE;QACjD,OAAO;UACLmE,SAAS,EAAE,IAAAa,sBAAU,EAACH,aAAa,EAAE,UAAU,EAAE,eAAe,EAAEX,aAAa,CAAC;UAChFe,SAAS,EAAExF;QACb,CAAC;MACH;MAEA,IAAI4E,OAAO,KAAKU,SAAS,EAAE;QACzB,IAAMG,SAAS,GAAGb,OAAO,KAAK,IAAI;QAClC,OAAO;UACLF,SAAS,EAAE,IAAAa,sBAAU,EAACH,aAAa,EAAE,QAAQ,EAAEX,aAAa,CAAC;UAC7De,SAAS,EAAExF,WAAW;UACtBkD,SAAS,EAAEuC,SAAS,GAAGzD,sBAAsB,GAAGE,wBAAwB;UACxEiB,IAAI,EAAEsC,SAAS,GAAG/C,sBAAsB,GAAGE;QAC7C,CAAC;MACH;MAEA,IAAIkC,SAAS,EAAE;QACb,OAAO;UACLJ,SAAS,EAAE,IAAAa,sBAAU,EAACH,aAAa,EAAE,QAAQ,EAAE,SAAS,EAAEX,aAAa,CAAC;UACxEe,SAAS,EAAExF,WAAW;UACtBkD,SAAS,EAAEd,sBAAsB;UACjCe,IAAI,EAAEP;QACR,CAAC;MACH;MAEA,OAAO;QACL8B,SAAS,EAAE,IAAAa,sBAAU,EACnBH,aAAa,EACb7E,QAAQ,IAAI,UAAU,EACtBsD,UAAU,IAAI,CAACtD,QAAQ,IAAI,CAACwE,cAAc,IAAI,YAAY,EAC1DP,QAAQ,IAAI,CAACjE,QAAQ,IAAI,UAAU,EACnCiE,QAAQ,IAAIjE,QAAQ,IAAI,qBAAqB,EAC7CoE,SAAS,IAAId,UAAU,IAAI,CAACtD,QAAQ,IAAI,CAACiE,QAAQ,IAAI,WAAW,EAChEK,kBAAkB,IAAI,OAAO,EAC7BJ,aACF,CAAC;QACDe,SAAS,EAAExF,WAAW;QACtBkD,SAAS,EAATA,SAAS;QACTC,IAAI,EAAJA;MACF,CAAC;IACH,CAAC;IAAA,OAAAa,KAAA;EAAA;EAAA,IAAA0B,UAAA,aAAA5B,KAAA,EAAAC,gBAAA;EAAA,WAAA4B,aAAA,aAAA7B,KAAA;IAAA8B,GAAA;IAAAC,KAAA,EAED,SAAAC,MAAMA,CAAA,EAAG;MACP,IAAAC,YAAA,GAA4C,IAAI,CAACxB,KAAK;QAA9C7C,IAAI,GAAAqE,YAAA,CAAJrE,IAAI;QAAEsE,KAAK,GAAAD,YAAA,CAALC,KAAK;QAAEpB,OAAO,GAAAmB,YAAA,CAAPnB,OAAO;QAAEE,SAAS,GAAAiB,YAAA,CAATjB,SAAS;MACvC,IAAAmB,qBAAA,GAAkD,IAAI,CAACC,qBAAqB,CAAC,CAAC;QAAtExB,SAAS,GAAAuB,qBAAA,CAATvB,SAAS;QAAEc,SAAS,GAAAS,qBAAA,CAATT,SAAS;QAAEtC,SAAS,GAAA+C,qBAAA,CAAT/C,SAAS;QAAEC,IAAI,GAAA8C,qBAAA,CAAJ9C,IAAI;MAE7C,IAAMgD,cAAc,GAAGX,SAAS,IAAIxF,WAAW;MAE/C,oBACE5C,MAAA,YAAAgG,aAAA,CAACN,OAAO;QACNE,UAAU,EAAE4B,OAAO,KAAKU,SAAS,IAAIR,SAAU;QAC/C5B,SAAS,EAAEA,SAAU;QACrBC,IAAI,EAAEA;MAAK,gBAEX/F,MAAA,YAAAgG,aAAA,CAAC+C,cAAc;QACbzB,SAAS,EAAEA,SAAU;QACrB0B,uBAAuB,EAAE;UAAEC,MAAM,EAAE,CAAC3E,IAAI,IAAI,EAAE,EAAE4E,OAAO,CAAC,KAAK,EAAE,MAAM;QAAE,CAAE;QACzE,iBAAeN;MAAM,CACtB,CACM,CAAC;IAEd;EAAC;AAAA,EA/FwBO,iBAAK,CAACf,SAAS;AAAA,IAAA/F,gBAAA,aAA7BqE,KAAK,mBACO,gBAAgB;AAAA,IAAArE,gBAAA,aAD5BqE,KAAK,eAAAzE,aAAA,CAAAA,aAAA,KAIXqE,UAAU;EACbhC,IAAI,EAAE4B,qBAAS,CAACM,MAAM,CAAC4C,UAAU;EACjC9B,SAAS,EAAEpB,qBAAS,CAACM,MAAM;EAC3BrD,QAAQ,EAAE+C,qBAAS,CAACC,IAAI;EACxBoB,SAAS,EAAErB,qBAAS,CAACC,IAAI;EACzBqB,OAAO,EAAEtB,qBAAS,CAACC;AAAI;AAAA,IAAA9D,gBAAA,aATdqE,KAAK,kBAYM;EACpBD,UAAU,EAAE,KAAK;EACjBnC,IAAI,EAAE;AACR,CAAC;AAAA,IAAA+E,QAAA,GAAA9C,OAAA,cAmFYG,KAAK","ignoreList":[]}
package/package.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "publishConfig": {
4
4
  "access": "public"
5
5
  },
6
- "version": "1.39.1-mui-update.0",
6
+ "version": "1.40.0-mui-update.0",
7
7
  "description": "Some react components for text selection",
8
8
  "keywords": [
9
9
  "react",
@@ -22,9 +22,9 @@
22
22
  "@mui/icons-material": "^7.3.4",
23
23
  "@mui/material": "^7.3.4",
24
24
  "@pie-framework/parse-english": "^1.0.0",
25
- "@pie-lib/render-ui": "4.42.1-mui-update.0",
26
- "@pie-lib/style-utils": "0.28.1-mui-update.0",
27
- "@pie-lib/translator": "2.31.1-mui-update.0",
25
+ "@pie-lib/render-ui": "4.43.0-mui-update.0",
26
+ "@pie-lib/style-utils": "0.29.0-mui-update.0",
27
+ "@pie-lib/translator": "2.32.0-mui-update.0",
28
28
  "classnames": "^2.2.6",
29
29
  "debug": "^4.1.1",
30
30
  "invariant": "^2.2.4",
@@ -34,7 +34,7 @@
34
34
  },
35
35
  "devDependencies": {
36
36
  "@pie-framework/parse-english": "^1.0.0",
37
- "@pie-lib/test-utils": "0.29.1-mui-update.0",
37
+ "@pie-lib/test-utils": "0.30.0-mui-update.0",
38
38
  "natural": "^0.6.3",
39
39
  "react": "^18.2.0",
40
40
  "react-dom": "^18.2.0"
@@ -42,6 +42,6 @@
42
42
  "peerDependencies": {
43
43
  "react": "^18.2.0"
44
44
  },
45
- "gitHead": "5483c45ebef918678f098167fecdde7190b291dd",
45
+ "gitHead": "094026045c44d3d7e558beb7e6986f2652661f75",
46
46
  "scripts": {}
47
47
  }
package/src/legend.js CHANGED
@@ -45,7 +45,7 @@ const StyledMissingContainer = styled(StyledContainer)(() => ({
45
45
  border: `${color.incorrectWithIcon()} dashed 2px`,
46
46
  }));
47
47
 
48
- const StyledIcon = styled('div')(() => ({
48
+ const baseIconStyles = {
49
49
  color: color.white(),
50
50
  position: 'absolute',
51
51
  top: '-8px',
@@ -53,35 +53,34 @@ const StyledIcon = styled('div')(() => ({
53
53
  borderRadius: '50%',
54
54
  fontSize: '12px',
55
55
  padding: '2px',
56
- }));
56
+ };
57
57
 
58
- const StyledCorrectIcon = styled(StyledIcon)(() => ({
58
+ const StyledCorrectCheckIcon = styled(Check)(() => ({
59
+ ...baseIconStyles,
59
60
  backgroundColor: color.correctTertiary(),
60
61
  }));
61
62
 
62
- const StyledIncorrectIcon = styled(StyledIcon)(() => ({
63
+ const StyledIncorrectCloseIcon = styled(Close)(() => ({
64
+ ...baseIconStyles,
63
65
  backgroundColor: color.incorrectWithIcon(),
64
66
  }));
65
67
 
66
68
  export const Legend = ({ language, showOnlyCorrect }) => {
67
69
  const legendItems = [
68
70
  {
69
- Icon: Check,
71
+ Icon: StyledCorrectCheckIcon,
70
72
  label: translator.t('selectText.correctAnswerSelected', { lng: language }),
71
73
  Container: StyledCorrectContainer,
72
- IconComponent: StyledCorrectIcon,
73
74
  },
74
75
  {
75
- Icon: Close,
76
+ Icon: StyledIncorrectCloseIcon,
76
77
  label: translator.t('selectText.incorrectSelection', { lng: language }),
77
78
  Container: StyledIncorrectContainer,
78
- IconComponent: StyledIncorrectIcon,
79
79
  },
80
80
  {
81
- Icon: Close,
81
+ Icon: StyledIncorrectCloseIcon,
82
82
  label: translator.t('selectText.correctAnswerNotSelected', { lng: language }),
83
83
  Container: StyledMissingContainer,
84
- IconComponent: StyledIncorrectIcon,
85
84
  },
86
85
  ];
87
86
 
@@ -92,11 +91,9 @@ export const Legend = ({ language, showOnlyCorrect }) => {
92
91
  return (
93
92
  <StyledFlexContainer>
94
93
  <StyledKey>{translator.t('selectText.key', { lng: language })}</StyledKey>
95
- {legendItems.map(({ Icon, label, Container, IconComponent }, idx) => (
94
+ {legendItems.map(({ Icon, label, Container }, idx) => (
96
95
  <Container key={idx}>
97
- <IconComponent>
98
- <Icon />
99
- </IconComponent>
96
+ <Icon />
100
97
  <span>{label}</span>
101
98
  </Container>
102
99
  ))}
package/src/token-select/token.jsx CHANGED
@@ -23,6 +23,7 @@ const StyledToken = styled('span')(({ theme }) => ({
23
23
  },
24
24
  '&.disabledBlack': {
25
25
  cursor: 'inherit',
26
+ pointerEvents: 'none',
26
27
  },
27
28
  '&.disabledAndSelected': {
28
29
  backgroundColor: color.blueGrey100(),
@@ -39,7 +40,7 @@ const StyledToken = styled('span')(({ theme }) => ({
39
40
  '&.selected': {
40
41
  backgroundColor: color.blueGrey100(),
41
42
  color: theme.palette.common.black,
42
- lineHeight: `${theme.spacing(1) * LINE_HEIGHT_MULTIPLIER}px`,
43
+ lineHeight: `${parseFloat(theme.spacing(1)) * LINE_HEIGHT_MULTIPLIER}px`,
43
44
  border: `solid 2px ${color.blueGrey900()}`,
44
45
  borderRadius: '4px',
45
46
  '& > *': {
@@ -49,12 +50,12 @@ const StyledToken = styled('span')(({ theme }) => ({
49
50
  '&.highlight': {
50
51
  border: `dashed 2px ${color.blueGrey600()}`,
51
52
  borderRadius: '4px',
52
- lineHeight: `${theme.spacing(1) * LINE_HEIGHT_MULTIPLIER}px`,
53
+ lineHeight: `${parseFloat(theme.spacing(1)) * LINE_HEIGHT_MULTIPLIER}px`,
53
54
  },
54
55
  '&.print': {
55
56
  border: `dashed 2px ${color.blueGrey600()}`,
56
57
  borderRadius: '4px',
57
- lineHeight: `${theme.spacing(1) * LINE_HEIGHT_MULTIPLIER}px`,
58
+ lineHeight: `${parseFloat(theme.spacing(1)) * LINE_HEIGHT_MULTIPLIER}px`,
58
59
  color: color.text(),
59
60
  },
60
61
  '&.custom': {
@@ -66,7 +67,7 @@ const StyledCommonTokenStyle = styled('span')(({ theme }) => ({
66
67
  position: 'relative',
67
68
  borderRadius: '4px',
68
69
  color: theme.palette.common.black,
69
- lineHeight: `${theme.spacing(1) * CORRECTNESS_LINE_HEIGHT_MULTIPLIER + CORRECTNESS_PADDING}px`,
70
+ lineHeight: `${parseFloat(theme.spacing(1)) * CORRECTNESS_LINE_HEIGHT_MULTIPLIER + CORRECTNESS_PADDING}px`,
70
71
  padding: `${CORRECTNESS_PADDING}px`,
71
72
  }));
72
73
 
@@ -82,7 +83,7 @@ const StyledMissingContainer = styled(StyledCommonTokenStyle)(() => ({
82
83
  border: `${color.incorrectWithIcon()} dashed 2px`,
83
84
  }));
84
85
 
85
- const StyledCorrectnessIcon = styled('span')(() => ({
86
+ const baseIconStyles = {
86
87
  color: color.white(),
87
88
  position: 'absolute',
88
89
  top: '-8px',
@@ -91,25 +92,23 @@ const StyledCorrectnessIcon = styled('span')(() => ({
91
92
  fontSize: '12px',
92
93
  padding: '2px',
93
94
  display: 'inline-block',
94
- }));
95
+ };
95
96
 
96
- const StyledCorrectIcon = styled(StyledCorrectnessIcon)(() => ({
97
+ const StyledCorrectCheckIcon = styled(Check)(() => ({
98
+ ...baseIconStyles,
97
99
  backgroundColor: color.correctTertiary(),
98
100
  }));
99
101
 
100
- const StyledIncorrectIcon = styled(StyledCorrectnessIcon)(() => ({
102
+ const StyledIncorrectCloseIcon = styled(Close)(() => ({
103
+ ...baseIconStyles,
101
104
  backgroundColor: color.incorrectWithIcon(),
102
105
  }));
103
106
 
104
- const Wrapper = ({ useWrapper, children, Container, IconComponent, Icon }) =>
107
+ const Wrapper = ({ useWrapper, children, Container, Icon }) =>
105
108
  useWrapper ? (
106
109
  <Container>
107
110
  {children}
108
- {Icon && IconComponent ? (
109
- <IconComponent>
110
- <Icon fontSize="inherit" />
111
- </IconComponent>
112
- ) : null}
111
+ {Icon ? <Icon /> : null}
113
112
  </Container>
114
113
  ) : (
115
114
  children
@@ -118,7 +117,6 @@ const Wrapper = ({ useWrapper, children, Container, IconComponent, Icon }) =>
118
117
  Wrapper.propTypes = {
119
118
  useWrapper: PropTypes.bool,
120
119
  Container: PropTypes.elementType,
121
- IconComponent: PropTypes.elementType,
122
120
  Icon: PropTypes.elementType,
123
121
  children: PropTypes.node,
124
122
  };
@@ -160,7 +158,6 @@ export class Token extends React.Component {
160
158
  const baseClassName = Token.rootClassName;
161
159
  let Container;
162
160
  let Icon;
163
- let IconComponent;
164
161
 
165
162
  if (correct === undefined && selected && disabled) {
166
163
  return {
@@ -175,8 +172,7 @@ export class Token extends React.Component {
175
172
  className: classNames(baseClassName, 'custom', classNameProp),
176
173
  Component: StyledToken,
177
174
  Container: isCorrect ? StyledCorrectContainer : StyledIncorrectContainer,
178
- Icon: isCorrect ? Check : Close,
179
- IconComponent: isCorrect ? StyledCorrectIcon : StyledIncorrectIcon,
175
+ Icon: isCorrect ? StyledCorrectCheckIcon : StyledIncorrectCloseIcon,
180
176
  };
181
177
  }
182
178
 
@@ -185,8 +181,7 @@ export class Token extends React.Component {
185
181
  className: classNames(baseClassName, 'custom', 'missing', classNameProp),
186
182
  Component: StyledToken,
187
183
  Container: StyledMissingContainer,
188
- Icon: Close,
189
- IconComponent: StyledIncorrectIcon,
184
+ Icon: StyledIncorrectCloseIcon,
190
185
  };
191
186
  }
192
187
 
@@ -204,13 +199,12 @@ export class Token extends React.Component {
204
199
  Component: StyledToken,
205
200
  Container,
206
201
  Icon,
207
- IconComponent,
208
202
  };
209
203
  };
210
204
 
211
205
  render() {
212
206
  const { text, index, correct, isMissing } = this.props;
213
- const { className, Component, Container, Icon, IconComponent } = this.getClassAndIconConfig();
207
+ const { className, Component, Container, Icon } = this.getClassAndIconConfig();
214
208
 
215
209
  const TokenComponent = Component || StyledToken;
216
210
 
@@ -218,7 +212,6 @@ export class Token extends React.Component {
218
212
  <Wrapper
219
213
  useWrapper={correct !== undefined || isMissing}
220
214
  Container={Container}
221
- IconComponent={IconComponent}
222
215
  Icon={Icon}
223
216
  >
224
217
  <TokenComponent