npm - @pie-lib/correct-answer-toggle - Versions diffs - 2.25.2 → 2.25.3-next.155 - Mend

@pie-lib/correct-answer-toggle 2.25.2 → 2.25.3-next.155

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 (13) hide show

package/CHANGELOG.md +6 -76
package/esm/package.json +3 -0
package/lib/expander.js +43 -52
package/lib/expander.js.map +1 -1
package/lib/index.js +100 -78
package/lib/index.js.map +1 -1
package/package.json +24 -13
package/src/__tests__/index.test.jsx +58 -66
package/src/expander.jsx +45 -33
package/src/index.jsx +98 -20
package/lib/styles.js +0 -65
package/lib/styles.js.map +0 -1
package/src/styles.js +0 -60

package/CHANGELOG.md CHANGED Viewed

@@ -7,153 +7,83 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 **Note:** Version bump only for package @pie-lib/correct-answer-toggle
 ## [2.25.1](https://github.com/pie-framework/pie-lib/compare/@pie-lib/correct-answer-toggle@2.21.2...@pie-lib/correct-answer-toggle@2.25.1) (2025-10-22)
 **Note:** Version bump only for package @pie-lib/correct-answer-toggle
 # [2.25.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/correct-answer-toggle@2.24.0...@pie-lib/correct-answer-toggle@2.25.0) (2025-10-16)
 **Note:** Version bump only for package @pie-lib/correct-answer-toggle
 # [2.24.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/correct-answer-toggle@2.21.0...@pie-lib/correct-answer-toggle@2.24.0) (2025-10-16)
 **Note:** Version bump only for package @pie-lib/correct-answer-toggle
 # [2.23.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/correct-answer-toggle@2.21.0...@pie-lib/correct-answer-toggle@2.23.0) (2025-10-16)
 **Note:** Version bump only for package @pie-lib/correct-answer-toggle
 # [2.22.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/correct-answer-toggle@2.21.0...@pie-lib/correct-answer-toggle@2.22.0) (2025-10-16)
 **Note:** Version bump only for package @pie-lib/correct-answer-toggle
 ## [2.21.2](https://github.com/pie-framework/pie-lib/compare/@pie-lib/correct-answer-toggle@2.21.1...@pie-lib/correct-answer-toggle@2.21.2) (2025-10-14)
 **Note:** Version bump only for package @pie-lib/correct-answer-toggle
 ## [2.21.1](https://github.com/pie-framework/pie-lib/compare/@pie-lib/correct-answer-toggle@2.21.0...@pie-lib/correct-answer-toggle@2.21.1) (2025-10-09)
 **Note:** Version bump only for package @pie-lib/correct-answer-toggle
 # [2.21.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/correct-answer-toggle@2.5.11...@pie-lib/correct-answer-toggle@2.21.0) (2025-09-25)
 ### Bug Fixes
-* fixed pie-lib/icons import [PD-5126] ([dcb506c](https://github.com/pie-framework/pie-lib/commit/dcb506c914a177f6d88bf73247a023bfe71dac1f))
+- fixed pie-lib/icons import [PD-5126](<[dcb506c](https://github.com/pie-framework/pie-lib/commit/dcb506c914a177f6d88bf73247a023bfe71dac1f)>)
 ### Features
-* split pie-toolbox into multiple packages [PD-5126] ([7d55a25](https://github.com/pie-framework/pie-lib/commit/7d55a2552d084cd3d0d5c00dc77411b2ced2f5e2))
+- split pie-toolbox into multiple packages [PD-5126](<[7d55a25](https://github.com/pie-framework/pie-lib/commit/7d55a2552d084cd3d0d5c00dc77411b2ced2f5e2)>)
 # [2.20.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/correct-answer-toggle@2.19.0...@pie-lib/correct-answer-toggle@2.20.0) (2025-09-18)
 **Note:** Version bump only for package @pie-lib/correct-answer-toggle
 # [2.19.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/correct-answer-toggle@2.18.0...@pie-lib/correct-answer-toggle@2.19.0) (2025-09-18)
 **Note:** Version bump only for package @pie-lib/correct-answer-toggle
 # [2.18.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/correct-answer-toggle@2.5.11...@pie-lib/correct-answer-toggle@2.18.0) (2025-09-18)
 ### Bug Fixes
-* fixed pie-lib/icons import [PD-5126] ([dcb506c](https://github.com/pie-framework/pie-lib/commit/dcb506c914a177f6d88bf73247a023bfe71dac1f))
+- fixed pie-lib/icons import [PD-5126](<[dcb506c](https://github.com/pie-framework/pie-lib/commit/dcb506c914a177f6d88bf73247a023bfe71dac1f)>)
 ### Features
-* split pie-toolbox into multiple packages [PD-5126] ([7d55a25](https://github.com/pie-framework/pie-lib/commit/7d55a2552d084cd3d0d5c00dc77411b2ced2f5e2))
+- split pie-toolbox into multiple packages [PD-5126](<[7d55a25](https://github.com/pie-framework/pie-lib/commit/7d55a2552d084cd3d0d5c00dc77411b2ced2f5e2)>)
 # [2.17.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/correct-answer-toggle@2.16.0...@pie-lib/correct-answer-toggle@2.17.0) (2025-09-17)
 **Note:** Version bump only for package @pie-lib/correct-answer-toggle
 # [2.16.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/correct-answer-toggle@2.15.0...@pie-lib/correct-answer-toggle@2.16.0) (2025-09-17)
 **Note:** Version bump only for package @pie-lib/correct-answer-toggle
 # [2.15.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/correct-answer-toggle@2.14.1...@pie-lib/correct-answer-toggle@2.15.0) (2025-09-17)
 **Note:** Version bump only for package @pie-lib/correct-answer-toggle
 ## [2.14.1](https://github.com/pie-framework/pie-lib/compare/@pie-lib/correct-answer-toggle@2.5.11...@pie-lib/correct-answer-toggle@2.14.1) (2025-08-11)
 ### Bug Fixes
-* fixed pie-lib/icons import [PD-5126] ([dcb506c](https://github.com/pie-framework/pie-lib/commit/dcb506c914a177f6d88bf73247a023bfe71dac1f))
+- fixed pie-lib/icons import [PD-5126](<[dcb506c](https://github.com/pie-framework/pie-lib/commit/dcb506c914a177f6d88bf73247a023bfe71dac1f)>)
 ### Features
-* split pie-toolbox into multiple packages [PD-5126] ([7d55a25](https://github.com/pie-framework/pie-lib/commit/7d55a2552d084cd3d0d5c00dc77411b2ced2f5e2))
+- split pie-toolbox into multiple packages [PD-5126](<[7d55a25](https://github.com/pie-framework/pie-lib/commit/7d55a2552d084cd3d0d5c00dc77411b2ced2f5e2)>)
 # [2.14.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/correct-answer-toggle@2.5.11...@pie-lib/correct-answer-toggle@2.14.0) (2025-08-07)

package/esm/package.json ADDED Viewed

@@ -0,0 +1,3 @@
+{
+  "type": "module"
+}

package/lib/expander.js CHANGED Viewed

@@ -1,60 +1,26 @@
 "use strict";
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _styles = require("@material-ui/core/styles");
+var _styles = require("@mui/material/styles");
 var _reactTransitionGroup = require("react-transition-group");
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-var Expander = function Expander(props) {
-  var classes = props.classes,
-      show = props.show,
-      children = props.children;
-  return /*#__PURE__*/_react["default"].createElement(_reactTransitionGroup.CSSTransition, {
-    "in": show,
-    appear: true,
-    mountOnEnter: false,
-    timeout: 300,
-    classNames: _objectSpread({}, classes)
-  }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: classes.expander
-  }, children));
-};
-Expander.propTypes = {
-  show: _propTypes["default"].bool.isRequired,
-  className: _propTypes["default"].string,
-  classes: _propTypes["default"].object,
-  children: _propTypes["default"].oneOfType([_propTypes["default"].arrayOf(_propTypes["default"].node), _propTypes["default"].node]).isRequired
-};
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var transition = 'height ease-in 300ms, opacity ease-in 300ms';
-var _default = (0, _styles.withStyles)(function () {
+var StyledExpander = (0, _styles.styled)('div')(function () {
   return {
-    expander: {
-      position: 'relative',
-      height: 0,
-      overflow: 'hidden',
-      display: 'flex',
-      visibility: 'hidden',
-      width: 0
-    },
-    enter: {
+    position: 'relative',
+    height: 0,
+    overflow: 'hidden',
+    display: 'flex',
+    visibility: 'hidden',
+    width: 0,
+    '&.enter': {
       transition: transition,
       opacity: 1,
       height: 'auto',
@@ -62,27 +28,52 @@ var _default = (0, _styles.withStyles)(function () {
       visibility: 'visible',
       minHeight: '25px'
     },
-    enterDone: {
+    '&.enter-done': {
       height: 'auto',
       visibility: 'visible',
       width: 'auto',
       minHeight: '25px'
     },
-    exit: {
+    '&.exit': {
       transition: transition,
       opacity: 0,
       height: 0,
       visibility: 'visible',
       width: 0
     },
-    exitDone: {
+    '&.exit-done': {
       opacity: 0,
       visibility: 'hidden',
       height: 0,
       width: 0
     }
   };
-})(Expander);
-exports["default"] = _default;
+});
+var Expander = function Expander(props) {
+  var show = props.show,
+    children = props.children,
+    className = props.className;
+  var nodeRef = (0, _react.useRef)(null);
+  return /*#__PURE__*/_react["default"].createElement(_reactTransitionGroup.CSSTransition, {
+    nodeRef: nodeRef,
+    "in": show,
+    appear: true,
+    mountOnEnter: false,
+    timeout: 300,
+    classNames: {
+      enter: 'enter',
+      enterDone: 'enter-done',
+      exit: 'exit',
+      exitDone: 'exit-done'
+    }
+  }, /*#__PURE__*/_react["default"].createElement(StyledExpander, {
+    className: className
+  }, children));
+};
+Expander.propTypes = {
+  show: _propTypes["default"].bool.isRequired,
+  className: _propTypes["default"].string,
+  children: _propTypes["default"].oneOfType([_propTypes["default"].arrayOf(_propTypes["default"].node), _propTypes["default"].node]).isRequired
+};
+var _default = exports["default"] = Expander;
 //# sourceMappingURL=expander.js.map

package/lib/expander.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"~~sources~~":["~~../src/~~expander.~~jsx~~"],"names":["~~Expander~~","~~props~~","~~classes~~","~~show~~","~~children~~","~~expander~~","~~propTypes~~","~~PropTypes~~","~~bool~~","~~isRequired~~","~~className~~","~~string~~","~~object~~","~~oneOfType~~","~~arrayOf~~","~~node~~","~~transition~~","~~position~~","~~height~~","~~overflow~~","~~display~~","~~visibility~~","~~width~~","~~enter~~","~~opacity~~","~~minHeight~~","~~enterDone~~","~~exit~~","~~exitDone~~"],"~~mappings~~":"~~;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;;;;;AAEA~~,~~IAAMA~~,~~QAAQ~~,~~GAAG~~,~~SAAXA~~,~~QAAW~~,~~CAACC~~,~~KAAD~~,~~EAAW;AAC1B~~,~~MAAQC~~,~~OAAR~~,~~GAAoCD~~,~~KAApC~~,~~CAAQC~~,~~OAAR;AAAA~~,~~MAAiBC~~,~~IAAjB~~,~~GAAoCF~~,~~KAApC~~,~~CAAiBE~~,~~IAAjB;AAAA~~,~~MAAuBC~~,~~QAAvB~~,~~GAAoCH~~,~~KAApC~~,~~CAAuBG~~,~~QAAvB;AAEA~~,~~sBACE~~,~~gCAAC~~,~~mCAAD;AAAe~~,~~UAAID~~,~~IAAnB;AAAyB~~,~~IAAA~~,~~MAAM~~,~~EAAE~~,IAAjC;AAAuC,IAAA,YAAY,EAAE,KAArD;AAA4D,IAAA,OAAO,EAAE,GAArE;AAA0E,IAAA,UAAU,oBAAOD,OAAP;AAApF,kBACE;AAAK,IAAA,SAAS,EAAEA,OAAO,CAACG;AAAxB,KAAmCD,QAAnC,CADF,CADF;AAKD,CARD;;AAUAJ,QAAQ,CAACM,SAAT,GAAqB;AACnBH,EAAAA,IAAI,EAAEI,sBAAUC,IAAV,CAAeC,UADF;AAEnBC,EAAAA,SAAS,EAAEH,sBAAUI,MAFF;AAGnBT,EAAAA,OAAO,EAAEK,sBAAUK,MAHA;AAInBR,EAAAA,QAAQ,EAAEG,sBAAUM,SAAV,CAAoB,CAACN,sBAAUO,OAAV,CAAkBP,sBAAUQ,IAA5B,CAAD,EAAoCR,sBAAUQ,IAA9C,CAApB,EAAyEN;AAJhE,CAArB;AAOA,IAAMO,UAAU,GAAG,6CAAnB;;eAEe,wBAAW;AAAA,SAAO;AAC/BX,IAAAA,QAAQ,EAAE;AACRY,MAAAA,QAAQ,EAAE,UADF;AAERC,MAAAA,MAAM,EAAE,CAFA;AAGRC,MAAAA,QAAQ,EAAE,QAHF;AAIRC,MAAAA,OAAO,EAAE,MAJD;AAKRC,MAAAA,UAAU,EAAE,QALJ;AAMRC,MAAAA,KAAK,EAAE;AANC,KADqB;AAS/BC,IAAAA,KAAK,EAAE;AACLP,MAAAA,UAAU,EAAVA,UADK;AAELQ,MAAAA,OAAO,EAAE,CAFJ;AAGLN,MAAAA,MAAM,EAAE,MAHH;AAILI,MAAAA,KAAK,EAAE,MAJF;AAKLD,MAAAA,UAAU,EAAE,SALP;AAMLI,MAAAA,SAAS,EAAE;AANN,KATwB;AAiB/BC,IAAAA,SAAS,EAAE;AACTR,MAAAA,MAAM,EAAE,MADC;AAETG,MAAAA,UAAU,EAAE,SAFH;AAGTC,MAAAA,KAAK,EAAE,MAHE;AAITG,MAAAA,SAAS,EAAE;AAJF,KAjBoB;AAuB/BE,IAAAA,IAAI,EAAE;AACJX,MAAAA,UAAU,EAAVA,UADI;AAEJQ,MAAAA,OAAO,EAAE,CAFL;AAGJN,MAAAA,MAAM,EAAE,CAHJ;AAIJG,MAAAA,UAAU,EAAE,SAJR;AAKJC,MAAAA,KAAK,EAAE;AALH,KAvByB;AA8B/BM,IAAAA,QAAQ,EAAE;AACRJ,MAAAA,OAAO,EAAE,CADD;AAERH,MAAAA,UAAU,EAAE,QAFJ;AAGRH,MAAAA,MAAM,EAAE,CAHA;AAIRI,MAAAA,KAAK,EAAE;AAJC;AA9BqB,GAAP;AAAA,CAAX,EAoCXtB,QApCW,C","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { ~~withStyles~~ } from '@material~~-ui~~/~~core/~~styles';\nimport { CSSTransition } from 'react-transition-group';\n\nconst Expander = (props) => {\n const { classes, show, children } = props;\n\n return (\n <CSSTransition in={show} appear={true} mountOnEnter={false} timeout={300} classNames={{ ...classes }}>\n <div className={classes.expander}>{children}</div>\n </CSSTransition>\n );\n};\n\nExpander.propTypes = {\n show: PropTypes.bool.isRequired,\n className: PropTypes.string,\n classes: PropTypes.object,\n children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,\n};\n\nconst transition = 'height ease-in 300ms, opacity ease-in 300ms';\n\~~nexport~~ ~~default~~ ~~withStyles~~(() => ({\n ~~expander: {\n~~ position: 'relative',\n height: 0,\n overflow: 'hidden',\n display: 'flex',\n visibility: 'hidden',\n width: 0,\n ~~},\n~~ enter: {\n transition,\n opacity: 1,\n height: 'auto',\n width: 'auto',\n visibility: 'visible',\n minHeight: '25px',\n },\n ~~enterDone~~: {\n height: 'auto',\n visibility: 'visible',\n width: 'auto',\n minHeight: '25px',\n },\n exit: {\n transition,\n opacity: 0,\n height: 0,\n visibility: 'visible',\n width: 0,\n },\n ~~exitDone~~: {\n opacity: 0,\n visibility: 'hidden',\n height: 0,\n width: 0,\n },\n}))(~~Expander~~);\n"],"~~file~~":"~~expander.js~~"}
1	+ {"version":3,"file":"expander.js","names":["_react","_interopRequireWildcard","require","_propTypes","_interopRequireDefault","_styles","_reactTransitionGroup","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","_typeof","has","get","set","_t","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","transition","StyledExpander","styled","position","height","overflow","display","visibility","width","opacity","minHeight","Expander","props","show","children","className","nodeRef","useRef","createElement","CSSTransition","appear","mountOnEnter","timeout","classNames","enter","enterDone","exit","exitDone","propTypes","PropTypes","bool","isRequired","string","oneOfType","arrayOf","node","_default","exports"],"sources":["../src/expander.jsx"],"sourcesContent":["import React, { useRef } from 'react';\nimport PropTypes from 'prop-types';\nimport { styled } from '@mui/material/styles';\nimport { CSSTransition } from 'react-transition-group';\n\nconst transition = 'height ease-in 300ms, opacity ease-in 300ms';\n\nconst StyledExpander = styled('div')(() => ({\n position: 'relative',\n height: 0,\n overflow: 'hidden',\n display: 'flex',\n visibility: 'hidden',\n width: 0,\n '&.enter': {\n transition,\n opacity: 1,\n height: 'auto',\n width: 'auto',\n visibility: 'visible',\n minHeight: '25px',\n },\n '&.enter-done': {\n height: 'auto',\n visibility: 'visible',\n width: 'auto',\n minHeight: '25px',\n },\n '&.exit': {\n transition,\n opacity: 0,\n height: 0,\n visibility: 'visible',\n width: 0,\n },\n '&.exit-done': {\n opacity: 0,\n visibility: 'hidden',\n height: 0,\n width: 0,\n },\n}));\n\nconst Expander = (props) => {\n const { show, children, className } = props;\n const nodeRef = useRef(null);\n\n return (\n <CSSTransition\n nodeRef={nodeRef}\n in={show}\n appear={true}\n mountOnEnter={false}\n timeout={300}\n classNames={{\n enter: 'enter',\n enterDone: 'enter-done',\n exit: 'exit',\n exitDone: 'exit-done'\n }}\n >\n <StyledExpander className={className}>{children}</StyledExpander>\n </CSSTransition>\n );\n};\n\nExpander.propTypes = {\n show: PropTypes.bool.isRequired,\n className: PropTypes.string,\n children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,\n};\n\nexport default Expander;\n"],"mappings":"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","ignoreList":[]}

package/lib/index.js CHANGED Viewed

@@ -1,67 +1,97 @@
 "use strict";
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = exports.CorrectAnswerToggle = void 0;
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _styles = _interopRequireDefault(require("./styles"));
-var _styles2 = require("@material-ui/core/styles");
-var _CSSTransition = _interopRequireDefault(require("react-transition-group/CSSTransition"));
+var _styles = require("@mui/material/styles");
+var _reactTransitionGroup = require("react-transition-group");
 var _icons = require("@pie-lib/icons");
 var _renderUi = require("@pie-lib/render-ui");
 var _expander = _interopRequireDefault(require("./expander"));
 var _react = _interopRequireDefault(require("react"));
-var _classnames = _interopRequireDefault(require("classnames"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _translator = _interopRequireDefault(require("@pie-lib/translator"));
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+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; }
 var translator = _translator["default"].translator;
+var noTouch = {
+  '-webkit-touchCcallout': 'none',
+  '-webkit-user-select': 'none',
+  '-khtml-user-select': 'none',
+  '-moz-user-select': 'none',
+  '-ms-user-select': 'none',
+  'user-select': 'none'
+};
+var StyledRoot = (0, _styles.styled)('div')(function () {
+  return {
+    width: '100%',
+    cursor: 'pointer'
+  };
+});
+var StyledContent = (0, _styles.styled)('div')(function () {
+  return {
+    margin: '0 auto',
+    textAlign: 'center',
+    display: 'flex'
+  };
+});
+var StyledLabel = (0, _styles.styled)('div')(function () {
+  return _objectSpread({
+    width: 'fit-content',
+    minWidth: '140px',
+    alignSelf: 'center',
+    verticalAlign: 'middle',
+    color: "var(--correct-answer-toggle-label-color, ".concat(_renderUi.color.text(), ")"),
+    fontWeight: 'normal'
+  }, noTouch);
+});
+var StyledIcon = (0, _styles.styled)('div')(function () {
+  return {
+    position: 'absolute',
+    width: '25px',
+    '&.enter': {
+      opacity: '0'
+    },
+    '&.enter-active': {
+      opacity: '1',
+      transition: 'opacity 0.3s ease-in'
+    },
+    '&.exit': {
+      opacity: '1'
+    },
+    '&.exit-active': {
+      opacity: '0',
+      transition: 'opacity 0.3s ease-in'
+    }
+  };
+});
+var StyledIconHolder = (0, _styles.styled)('div')(function () {
+  return {
+    width: '25px',
+    marginRight: '5px',
+    display: 'flex',
+    alignItems: 'center'
+  };
+});
 /**
  * We export the raw unstyled class for testability. For public use please use the default export.
  */
-var CorrectAnswerToggle = /*#__PURE__*/function (_React$Component) {
-  (0, _inherits2["default"])(CorrectAnswerToggle, _React$Component);
-  var _super = _createSuper(CorrectAnswerToggle);
+var CorrectAnswerToggle = exports.CorrectAnswerToggle = /*#__PURE__*/function (_React$Component) {
   function CorrectAnswerToggle(props) {
     var _this;
     (0, _classCallCheck2["default"])(this, CorrectAnswerToggle);
-    _this = _super.call(this, props);
+    _this = _callSuper(this, CorrectAnswerToggle, [props]);
     _this.state = {
       show: props.show
     };
@@ -75,8 +105,8 @@ var CorrectAnswerToggle = /*#__PURE__*/function (_React$Component) {
     });
     return _this;
   }
-  (0, _createClass2["default"])(CorrectAnswerToggle, [{
+  (0, _inherits2["default"])(CorrectAnswerToggle, _React$Component);
+  return (0, _createClass2["default"])(CorrectAnswerToggle, [{
     key: "onClick",
     value: function onClick() {
       this.props.onToggle(!this.props.toggled);
@@ -85,18 +115,15 @@ var CorrectAnswerToggle = /*#__PURE__*/function (_React$Component) {
     key: "onTouch",
     value: function onTouch(event) {
       event.preventDefault(); // Prevents the default action (click event)
       this.props.onToggle(!this.props.toggled);
     }
   }, {
     key: "UNSAFE_componentWillReceiveProps",
     value: function UNSAFE_componentWillReceiveProps(nextProps) {
       var _this$props;
       this.setState({
         show: nextProps.show
       });
       if (nextProps.language !== ((_this$props = this.props) === null || _this$props === void 0 ? void 0 : _this$props.language)) {
         CorrectAnswerToggle.defaultProps = _objectSpread(_objectSpread({}, CorrectAnswerToggle.defaultProps), {}, {
           showMessage: translator.t('common:showCorrectAnswer', {
@@ -112,59 +139,57 @@ var CorrectAnswerToggle = /*#__PURE__*/function (_React$Component) {
     key: "render",
     value: function render() {
       var _this$props2 = this.props,
-          classes = _this$props2.classes,
-          className = _this$props2.className,
-          toggled = _this$props2.toggled,
-          hideMessage = _this$props2.hideMessage,
-          showMessage = _this$props2.showMessage;
-      return /*#__PURE__*/_react["default"].createElement("div", {
-        className: (0, _classnames["default"])(classes.root, className)
+        className = _this$props2.className,
+        toggled = _this$props2.toggled,
+        hideMessage = _this$props2.hideMessage,
+        showMessage = _this$props2.showMessage;
+      return /*#__PURE__*/_react["default"].createElement(StyledRoot, {
+        className: className
       }, /*#__PURE__*/_react["default"].createElement(_expander["default"], {
-        show: this.state.show,
-        className: classes.expander
-      }, /*#__PURE__*/_react["default"].createElement("div", {
-        className: classes.content,
+        show: this.state.show
+      }, /*#__PURE__*/_react["default"].createElement(StyledContent, {
         onClick: this.onClick.bind(this),
         onTouchEnd: this.onTouch.bind(this)
-      }, /*#__PURE__*/_react["default"].createElement("div", {
-        className: classes.iconHolder
-      }, /*#__PURE__*/_react["default"].createElement(_CSSTransition["default"], {
+      }, /*#__PURE__*/_react["default"].createElement(StyledIconHolder, null, /*#__PURE__*/_react["default"].createElement(_reactTransitionGroup.CSSTransition, {
         timeout: 400,
         "in": toggled,
         exit: !toggled,
-        classNames: classes
-      }, /*#__PURE__*/_react["default"].createElement(_icons.CorrectResponse, {
+        classNames: {
+          enter: 'enter',
+          enterActive: 'enter-active',
+          exit: 'exit',
+          exitActive: 'exit-active'
+        }
+      }, /*#__PURE__*/_react["default"].createElement(StyledIcon, null, /*#__PURE__*/_react["default"].createElement(_icons.CorrectResponse, {
         open: toggled,
-        key: "correct-open",
-        className: classes.icon
-      })), /*#__PURE__*/_react["default"].createElement(_CSSTransition["default"], {
+        key: "correct-open"
+      }))), /*#__PURE__*/_react["default"].createElement(_reactTransitionGroup.CSSTransition, {
         timeout: 5000,
         "in": !toggled,
         exit: toggled,
-        classNames: classes
-      }, /*#__PURE__*/_react["default"].createElement(_icons.CorrectResponse, {
+        classNames: {
+          enter: 'enter',
+          enterActive: 'enter-active',
+          exit: 'exit',
+          exitActive: 'exit-active'
+        }
+      }, /*#__PURE__*/_react["default"].createElement(StyledIcon, null, /*#__PURE__*/_react["default"].createElement(_icons.CorrectResponse, {
         open: toggled,
-        key: "correct-closed",
-        className: classes.icon
-      }))), /*#__PURE__*/_react["default"].createElement(_renderUi.Readable, {
+        key: "correct-closed"
+      })))), /*#__PURE__*/_react["default"].createElement(_renderUi.Readable, {
         "false": true
-      }, /*#__PURE__*/_react["default"].createElement("div", {
-        className: classes.label,
+      }, /*#__PURE__*/_react["default"].createElement(StyledLabel, {
         "aria-hidden": !this.state.show
       }, toggled ? hideMessage : showMessage)))));
     }
   }]);
-  return CorrectAnswerToggle;
 }(_react["default"].Component);
-exports.CorrectAnswerToggle = CorrectAnswerToggle;
 (0, _defineProperty2["default"])(CorrectAnswerToggle, "propTypes", {
   onToggle: _propTypes["default"].func,
   toggled: _propTypes["default"].bool,
   show: _propTypes["default"].bool,
   hideMessage: _propTypes["default"].string,
   showMessage: _propTypes["default"].string,
-  classes: _propTypes["default"].object.isRequired,
   className: _propTypes["default"].string,
   language: _propTypes["default"].string
 });
@@ -174,8 +199,5 @@ exports.CorrectAnswerToggle = CorrectAnswerToggle;
   show: false,
   toggled: false
 });
-var _default = (0, _styles2.withStyles)(_styles["default"])(CorrectAnswerToggle);
-exports["default"] = _default;
+var _default = exports["default"] = CorrectAnswerToggle;
 //# sourceMappingURL=index.js.map

package/lib/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/index.jsx"],"names":["translator","Translator","CorrectAnswerToggle","props","state","show","defaultProps","showMessage","t","lng","language","hideMessage","onToggle","toggled","event","preventDefault","nextProps","setState","classes","className","root","expander","content","onClick","bind","onTouch","iconHolder","icon","label","React","Component","PropTypes","func","bool","string","object","isRequired","styles"],"mappings":"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","sourcesContent":["import styles from './styles';\nimport { withStyles } from '@material-ui/core/styles';\nimport CSSTransition from 'react-transition-group/CSSTransition';\nimport { CorrectResponse } from '@pie-lib/icons';\nimport { Readable } from '@pie-lib/render-ui';\nimport Expander from './expander';\nimport React from 'react';\nimport classNames from 'classnames';\nimport PropTypes from 'prop-types';\nimport Translator from '@pie-lib/translator';\n\nconst { translator } = Translator;\n\n/*\n We export the raw unstyled class for testability. For public use please use the default export.\n */\nexport class CorrectAnswerToggle extends React.Component {\n static propTypes = {\n onToggle: PropTypes.func,\n toggled: PropTypes.bool,\n show: PropTypes.bool,\n hideMessage: PropTypes.string,\n showMessage: PropTypes.string,\n classes: PropTypes.object.isRequired,\n className: PropTypes.string,\n language: PropTypes.string,\n };\n\n static defaultProps = {\n showMessage: 'Show correct answer',\n hideMessage: 'Hide correct answer',\n show: false,\n toggled: false,\n };\n\n constructor(props) {\n super(props);\n this.state = {\n show: props.show,\n };\n\n CorrectAnswerToggle.defaultProps = {\n ...CorrectAnswerToggle.defaultProps,\n showMessage: translator.t('common:showCorrectAnswer', { lng: props.language }),\n hideMessage: translator.t('common:hideCorrectAnswer', { lng: props.language }),\n };\n }\n\n onClick() {\n this.props.onToggle(!this.props.toggled);\n }\n onTouch(event) {\n event.preventDefault(); // Prevents the default action (click event)\n this.props.onToggle(!this.props.toggled);\n }\n\n UNSAFE_componentWillReceiveProps(nextProps) {\n this.setState({\n show: nextProps.show,\n });\n\n if (nextProps.language !== this.props?.language) {\n CorrectAnswerToggle.defaultProps = {\n ...CorrectAnswerToggle.defaultProps,\n showMessage: translator.t('common:showCorrectAnswer', { lng: nextProps.language }),\n hideMessage: translator.t('common:hideCorrectAnswer', { lng: nextProps.language }),\n };\n }\n }\n\n render() {\n const { classes, className, toggled, hideMessage, showMessage } = this.props;\n\n return (\n <div className={classNames(classes.root, className)}>\n <Expander show={this.state.show} className={classes.expander}>\n <div className={classes.content} onClick={this.onClick.bind(this)} onTouchEnd={this.onTouch.bind(this)}>\n <div className={classes.iconHolder}>\n <CSSTransition timeout={400} in={toggled} exit={!toggled} classNames={classes}>\n <CorrectResponse open={toggled} key=\"correct-open\" className={classes.icon} />\n </CSSTransition>\n <CSSTransition timeout={5000} in={!toggled} exit={toggled} classNames={classes}>\n <CorrectResponse open={toggled} key=\"correct-closed\" className={classes.icon} />\n </CSSTransition>\n </div>\n <Readable false>\n <div className={classes.label} aria-hidden={!this.state.show}>\n {toggled ? hideMessage : showMessage}\n </div>\n </Readable>\n </div>\n </Expander>\n </div>\n );\n }\n}\n\nexport default withStyles(styles)(CorrectAnswerToggle);\n"],"file":"index.js"}
1	+ {"version":3,"file":"index.js","names":["_styles","require","_reactTransitionGroup","_icons","_renderUi","_expander","_interopRequireDefault","_react","_propTypes","_translator","_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","translator","Translator","noTouch","StyledRoot","styled","width","cursor","StyledContent","margin","textAlign","display","StyledLabel","minWidth","alignSelf","verticalAlign","color","concat","text","fontWeight","StyledIcon","position","opacity","transition","StyledIconHolder","marginRight","alignItems","CorrectAnswerToggle","exports","_React$Component","props","_this","_classCallCheck2","state","show","defaultProps","showMessage","lng","language","hideMessage","_inherits2","_createClass2","key","value","onClick","onToggle","toggled","onTouch","event","preventDefault","UNSAFE_componentWillReceiveProps","nextProps","_this$props","setState","render","_this$props2","className","createElement","bind","onTouchEnd","CSSTransition","timeout","exit","classNames","enter","enterActive","exitActive","CorrectResponse","open","Readable","React","Component","PropTypes","func","bool","string","_default"],"sources":["../src/index.jsx"],"sourcesContent":["import { styled } from '@mui/material/styles';\nimport { CSSTransition } from 'react-transition-group';\nimport { CorrectResponse } from '@pie-lib/icons';\nimport { Readable } from '@pie-lib/render-ui';\nimport Expander from './expander';\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport Translator from '@pie-lib/translator';\nimport { color } from '@pie-lib/render-ui';\n\nconst { translator } = Translator;\n\nconst noTouch = {\n '-webkit-touchCcallout': 'none',\n '-webkit-user-select': 'none',\n '-khtml-user-select': 'none',\n '-moz-user-select': 'none',\n '-ms-user-select': 'none',\n 'user-select': 'none',\n};\n\nconst StyledRoot = styled('div')(() => ({\n width: '100%',\n cursor: 'pointer',\n}));\n\nconst StyledContent = styled('div')(() => ({\n margin: '0 auto',\n textAlign: 'center',\n display: 'flex',\n}));\n\nconst StyledLabel = styled('div')(() => ({\n width: 'fit-content',\n minWidth: '140px',\n alignSelf: 'center',\n verticalAlign: 'middle',\n color: `var(--correct-answer-toggle-label-color, ${color.text()})`,\n fontWeight: 'normal',\n ...noTouch,\n}));\n\nconst StyledIcon = styled('div')(() => ({\n position: 'absolute',\n width: '25px',\n '&.enter': {\n opacity: '0',\n },\n '&.enter-active': {\n opacity: '1',\n transition: 'opacity 0.3s ease-in',\n },\n '&.exit': {\n opacity: '1',\n },\n '&.exit-active': {\n opacity: '0',\n transition: 'opacity 0.3s ease-in',\n },\n}));\n\nconst StyledIconHolder = styled('div')(() => ({\n width: '25px',\n marginRight: '5px',\n display: 'flex',\n alignItems: 'center',\n}));\n\n/*\n We export the raw unstyled class for testability. For public use please use the default export.\n */\nexport class CorrectAnswerToggle extends React.Component {\n static propTypes = {\n onToggle: PropTypes.func,\n toggled: PropTypes.bool,\n show: PropTypes.bool,\n hideMessage: PropTypes.string,\n showMessage: PropTypes.string,\n className: PropTypes.string,\n language: PropTypes.string,\n };\n\n static defaultProps = {\n showMessage: 'Show correct answer',\n hideMessage: 'Hide correct answer',\n show: false,\n toggled: false,\n };\n\n constructor(props) {\n super(props);\n this.state = {\n show: props.show,\n };\n\n CorrectAnswerToggle.defaultProps = {\n ...CorrectAnswerToggle.defaultProps,\n showMessage: translator.t('common:showCorrectAnswer', { lng: props.language }),\n hideMessage: translator.t('common:hideCorrectAnswer', { lng: props.language }),\n };\n }\n\n onClick() {\n this.props.onToggle(!this.props.toggled);\n }\n onTouch(event) {\n event.preventDefault(); // Prevents the default action (click event)\n this.props.onToggle(!this.props.toggled);\n }\n\n UNSAFE_componentWillReceiveProps(nextProps) {\n this.setState({\n show: nextProps.show,\n });\n\n if (nextProps.language !== this.props?.language) {\n CorrectAnswerToggle.defaultProps = {\n ...CorrectAnswerToggle.defaultProps,\n showMessage: translator.t('common:showCorrectAnswer', { lng: nextProps.language }),\n hideMessage: translator.t('common:hideCorrectAnswer', { lng: nextProps.language }),\n };\n }\n }\n\n render() {\n const { className, toggled, hideMessage, showMessage } = this.props;\n\n return (\n <StyledRoot className={className}>\n <Expander show={this.state.show}>\n <StyledContent onClick={this.onClick.bind(this)} onTouchEnd={this.onTouch.bind(this)}>\n <StyledIconHolder>\n <CSSTransition \n timeout={400} \n in={toggled} \n exit={!toggled} \n classNames={{\n enter: 'enter',\n enterActive: 'enter-active',\n exit: 'exit',\n exitActive: 'exit-active'\n }}\n >\n <StyledIcon>\n <CorrectResponse open={toggled} key=\"correct-open\" />\n </StyledIcon>\n </CSSTransition>\n <CSSTransition \n timeout={5000} \n in={!toggled} \n exit={toggled} \n classNames={{\n enter: 'enter',\n enterActive: 'enter-active',\n exit: 'exit',\n exitActive: 'exit-active'\n }}\n >\n <StyledIcon>\n <CorrectResponse open={toggled} key=\"correct-closed\" />\n </StyledIcon>\n </CSSTransition>\n </StyledIconHolder>\n <Readable false>\n <StyledLabel aria-hidden={!this.state.show}>\n {toggled ? hideMessage : showMessage}\n </StyledLabel>\n </Readable>\n </StyledContent>\n </Expander>\n </StyledRoot>\n );\n }\n}\n\nexport default CorrectAnswerToggle;\n"],"mappings":"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","ignoreList":[]}

package/package.json CHANGED Viewed

@@ -6,32 +6,43 @@
   "keywords": [
     "react",
     "pie",
-    "material-ui"
+    "mui",
+    "@mui/material"
   ],
   "publishConfig": {
     "access": "public"
   },
-  "version": "2.25.2",
+  "version": "2.25.3-next.155+09821f09",
   "main": "lib/index.js",
   "module": "src/index.jsx",
   "scripts": {},
   "dependencies": {
-    "@material-ui/core": "^3.8.3",
-    "@pie-lib/icons": "^2.24.1",
-    "@pie-lib/render-ui": "^4.35.2",
-    "@pie-lib/translator": "^2.23.1",
-    "classnames": "^2.2.6",
+    "@emotion/react": "^11.14.0",
+    "@emotion/style": "^0.8.0",
+    "@mui/icons-material": "^7.3.4",
+    "@mui/material": "^7.3.4",
+    "@pie-lib/icons": "2.38.0-mui-update.0",
+    "@pie-lib/render-ui": "4.49.0-mui-update.0",
+    "@pie-lib/translator": "2.38.0-mui-update.0",
     "lodash": "^4.17.11",
     "prop-types": "^15.6.2",
-    "react-transition-group": "^2.5.2"
+    "react-transition-group": "^4.4.5"
   },
   "devDependencies": {
-    "react": "^16.8.1",
-    "react-dom": "^16.9.0"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "peerDependencies": {
-    "react": "^16.8.1",
-    "react-dom": "^16.8.1"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
-  "gitHead": "193452b38b22d6fc622490ab3194221c2c575793"
+  "gitHead": "09821f09cfcaee178971c57f4134645350be2222",
+  "exports": {
+    ".": {
+      "require": "./lib/index.js",
+      "import": "./src/index.jsx",
+      "default": "./lib/index.js"
+    },
+    "./esm": "./esm/index.js"
+  }
 }

package/src/__tests__/index.test.jsx CHANGED Viewed

@@ -1,99 +1,91 @@
-import { mount, shallow, configure } from 'enzyme';
-import Expander from '../expander';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import React from 'react';
 import { CorrectAnswerToggle } from '../index';
-import Adapter from 'enzyme-adapter-react-16';
-configure({ adapter: new Adapter() });
 describe('CorrectAnswerToggle', () => {
   let onToggle;
-  let wrapper;
-  let sheet;
-  let mkWrapper = (toggled, msgs) => {
-    toggled = toggled === false ? false : true;
-    msgs = msgs || {};
-    return shallow(
+  const renderComponent = (toggled = true, msgs = {}) => {
+    return render(
       <CorrectAnswerToggle
+        show={true}
         toggled={toggled}
-        classes={{
-          root: 'root',
-          label: 'label',
-        }}
         onToggle={onToggle}
         hideMessage={msgs.hide}
         showMessage={msgs.show}
-        sheet={sheet}
       />,
-      {
-        context: {},
-      },
     );
   };
   beforeEach(() => {
-    let iconStub = {};
-    sheet = {
-      classes: {
-        root: 'root',
-        label: 'label',
-      },
-    };
     onToggle = jest.fn();
-    wrapper = mkWrapper();
   });
-  describe('render', () => {
-    it('has the hide message', () => {
-      let holder = wrapper.find('.label');
-      expect(holder.text()).toEqual('Hide correct answer');
+  describe('rendering', () => {
+    it('shows hide message when toggled is true', () => {
+      renderComponent(true);
+      expect(screen.getByText('Hide correct answer')).toBeInTheDocument();
     });
-    it('has show message when toggled is false', () => {
-      const w = mkWrapper(false);
-      let holder = w.find(`.label`);
-      expect(holder.text()).toEqual('Show correct answer');
+    it('shows show message when toggled is false', () => {
+      renderComponent(false);
+      expect(screen.getByText('Show correct answer')).toBeInTheDocument();
     });
-    it('sets a custom hide message', () => {
-      wrapper = mkWrapper(true, { hide: 'hide!' });
-      let holder = wrapper.find('.label');
-      expect(holder.text()).toEqual('hide!');
+    it('displays custom hide message', () => {
+      renderComponent(true, { hide: 'hide!' });
+      expect(screen.getByText('hide!')).toBeInTheDocument();
     });
-    it('sets a custom show message', () => {
-      wrapper = mkWrapper(false, { show: 'show!' });
-      let holder = wrapper.find('.label');
-      expect(holder.text()).toEqual('show!');
+    it('displays custom show message', () => {
+      renderComponent(false, { show: 'show!' });
+      expect(screen.getByText('show!')).toBeInTheDocument();
     });
   });
-  describe('onClick', () => {
-    it('calls onToggle', () => {
-      wrapper
-        .find(Expander)
-        .childAt(0)
-        .simulate('click');
-      expect(onToggle.mock.calls[0][0]).toEqual(false);
+  describe('user interactions', () => {
+    it('calls onToggle with false when clicked while toggled', async () => {
+      const user = userEvent.setup();
+      renderComponent(true);
+      const button = screen.getByText('Hide correct answer');
+      await user.click(button);
+      expect(onToggle).toHaveBeenCalledWith(false);
     });
-    it('calls onToggle with update state', () => {
-      onToggle.mockReset();
-      wrapper
-        .find(Expander)
-        .childAt(0)
-        .simulate('click');
-      expect(onToggle.mock.calls[0][0]).toEqual(false);
-      //simulate updating the toggled prop
-      wrapper.setProps({ toggled: false });
-      wrapper
-        .find(Expander)
-        .childAt(0)
-        .simulate('click');
-      expect(onToggle.mock.calls[1][0]).toEqual(true);
+    it('calls onToggle with true when clicked while not toggled', async () => {
+      const user = userEvent.setup();
+      renderComponent(false);
+      const button = screen.getByText('Show correct answer');
+      await user.click(button);
+      expect(onToggle).toHaveBeenCalledWith(true);
+    });
+    it('toggles correctly after prop update', async () => {
+      const user = userEvent.setup();
+      const { rerender } = renderComponent(true);
+      // First click - toggled is true, should call with false
+      await user.click(screen.getByText('Hide correct answer'));
+      expect(onToggle).toHaveBeenCalledWith(false);
+      // Simulate prop update to toggled=false
+      onToggle.mockClear();
+      rerender(
+        <CorrectAnswerToggle
+          show={true}
+          toggled={false}
+          onToggle={onToggle}
+        />
+      );
+      // Second click - toggled is false, should call with true
+      await user.click(screen.getByText('Show correct answer'));
+      expect(onToggle).toHaveBeenCalledWith(true);
     });
   });
 });

package/src/expander.jsx CHANGED Viewed

@@ -1,37 +1,18 @@
-import React from 'react';
+import React, { useRef } from 'react';
 import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/core/styles';
+import { styled } from '@mui/material/styles';
 import { CSSTransition } from 'react-transition-group';
-const Expander = (props) => {
-  const { classes, show, children } = props;
-  return (
-    <CSSTransition in={show} appear={true} mountOnEnter={false} timeout={300} classNames={{ ...classes }}>
-      <div className={classes.expander}>{children}</div>
-    </CSSTransition>
-  );
-};
-Expander.propTypes = {
-  show: PropTypes.bool.isRequired,
-  className: PropTypes.string,
-  classes: PropTypes.object,
-  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
-};
 const transition = 'height ease-in 300ms, opacity ease-in 300ms';
-export default withStyles(() => ({
-  expander: {
-    position: 'relative',
-    height: 0,
-    overflow: 'hidden',
-    display: 'flex',
-    visibility: 'hidden',
-    width: 0,
-  },
-  enter: {
+const StyledExpander = styled('div')(() => ({
+  position: 'relative',
+  height: 0,
+  overflow: 'hidden',
+  display: 'flex',
+  visibility: 'hidden',
+  width: 0,
+  '&.enter': {
     transition,
     opacity: 1,
     height: 'auto',
@@ -39,23 +20,54 @@ export default withStyles(() => ({
     visibility: 'visible',
     minHeight: '25px',
   },
-  enterDone: {
+  '&.enter-done': {
     height: 'auto',
     visibility: 'visible',
     width: 'auto',
     minHeight: '25px',
   },
-  exit: {
+  '&.exit': {
     transition,
     opacity: 0,
     height: 0,
     visibility: 'visible',
     width: 0,
   },
-  exitDone: {
+  '&.exit-done': {
     opacity: 0,
     visibility: 'hidden',
     height: 0,
     width: 0,
   },
-}))(Expander);
+}));
+const Expander = (props) => {
+  const { show, children, className } = props;
+  const nodeRef = useRef(null);
+  return (
+    <CSSTransition
+      nodeRef={nodeRef}
+      in={show}
+      appear={true}
+      mountOnEnter={false}
+      timeout={300}
+      classNames={{
+        enter: 'enter',
+        enterDone: 'enter-done',
+        exit: 'exit',
+        exitDone: 'exit-done'
+      }}
+    >
+      <StyledExpander className={className}>{children}</StyledExpander>
+    </CSSTransition>
+  );
+};
+Expander.propTypes = {
+  show: PropTypes.bool.isRequired,
+  className: PropTypes.string,
+  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
+};
+export default Expander;

package/src/index.jsx CHANGED Viewed

@@ -1,16 +1,71 @@
-import styles from './styles';
-import { withStyles } from '@material-ui/core/styles';
-import CSSTransition from 'react-transition-group/CSSTransition';
+import { styled } from '@mui/material/styles';
+import { CSSTransition } from 'react-transition-group';
 import { CorrectResponse } from '@pie-lib/icons';
 import { Readable } from '@pie-lib/render-ui';
 import Expander from './expander';
 import React from 'react';
-import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import Translator from '@pie-lib/translator';
+import { color } from '@pie-lib/render-ui';
 const { translator } = Translator;
+const noTouch = {
+  '-webkit-touchCcallout': 'none',
+  '-webkit-user-select': 'none',
+  '-khtml-user-select': 'none',
+  '-moz-user-select': 'none',
+  '-ms-user-select': 'none',
+  'user-select': 'none',
+};
+const StyledRoot = styled('div')(() => ({
+  width: '100%',
+  cursor: 'pointer',
+}));
+const StyledContent = styled('div')(() => ({
+  margin: '0 auto',
+  textAlign: 'center',
+  display: 'flex',
+}));
+const StyledLabel = styled('div')(() => ({
+  width: 'fit-content',
+  minWidth: '140px',
+  alignSelf: 'center',
+  verticalAlign: 'middle',
+  color: `var(--correct-answer-toggle-label-color, ${color.text()})`,
+  fontWeight: 'normal',
+  ...noTouch,
+}));
+const StyledIcon = styled('div')(() => ({
+  position: 'absolute',
+  width: '25px',
+  '&.enter': {
+    opacity: '0',
+  },
+  '&.enter-active': {
+    opacity: '1',
+    transition: 'opacity 0.3s ease-in',
+  },
+  '&.exit': {
+    opacity: '1',
+  },
+  '&.exit-active': {
+    opacity: '0',
+    transition: 'opacity 0.3s ease-in',
+  },
+}));
+const StyledIconHolder = styled('div')(() => ({
+  width: '25px',
+  marginRight: '5px',
+  display: 'flex',
+  alignItems: 'center',
+}));
 /**
  * We export the raw unstyled class for testability. For public use please use the default export.
  */
@@ -21,7 +76,6 @@ export class CorrectAnswerToggle extends React.Component {
     show: PropTypes.bool,
     hideMessage: PropTypes.string,
     showMessage: PropTypes.string,
-    classes: PropTypes.object.isRequired,
     className: PropTypes.string,
     language: PropTypes.string,
   };
@@ -69,30 +123,54 @@ export class CorrectAnswerToggle extends React.Component {
   }
   render() {
-    const { classes, className, toggled, hideMessage, showMessage } = this.props;
+    const { className, toggled, hideMessage, showMessage } = this.props;
     return (
-      <div className={classNames(classes.root, className)}>
-        <Expander show={this.state.show} className={classes.expander}>
-          <div className={classes.content} onClick={this.onClick.bind(this)} onTouchEnd={this.onTouch.bind(this)}>
-            <div className={classes.iconHolder}>
-              <CSSTransition timeout={400} in={toggled} exit={!toggled} classNames={classes}>
-                <CorrectResponse open={toggled} key="correct-open" className={classes.icon} />
+      <StyledRoot className={className}>
+        <Expander show={this.state.show}>
+          <StyledContent onClick={this.onClick.bind(this)} onTouchEnd={this.onTouch.bind(this)}>
+            <StyledIconHolder>
+              <CSSTransition
+                timeout={400}
+                in={toggled}
+                exit={!toggled}
+                classNames={{
+                  enter: 'enter',
+                  enterActive: 'enter-active',
+                  exit: 'exit',
+                  exitActive: 'exit-active'
+                }}
+              >
+                <StyledIcon>
+                  <CorrectResponse open={toggled} key="correct-open" />
+                </StyledIcon>
               </CSSTransition>
-              <CSSTransition timeout={5000} in={!toggled} exit={toggled} classNames={classes}>
-                <CorrectResponse open={toggled} key="correct-closed" className={classes.icon} />
+              <CSSTransition
+                timeout={5000}
+                in={!toggled}
+                exit={toggled}
+                classNames={{
+                  enter: 'enter',
+                  enterActive: 'enter-active',
+                  exit: 'exit',
+                  exitActive: 'exit-active'
+                }}
+              >
+                <StyledIcon>
+                  <CorrectResponse open={toggled} key="correct-closed" />
+                </StyledIcon>
               </CSSTransition>
-            </div>
+            </StyledIconHolder>
             <Readable false>
-              <div className={classes.label} aria-hidden={!this.state.show}>
+              <StyledLabel aria-hidden={!this.state.show}>
                 {toggled ? hideMessage : showMessage}
-              </div>
+              </StyledLabel>
             </Readable>
-          </div>
+          </StyledContent>
         </Expander>
-      </div>
+      </StyledRoot>
     );
   }
 }
-export default withStyles(styles)(CorrectAnswerToggle);
+export default CorrectAnswerToggle;

package/lib/styles.js DELETED Viewed

@@ -1,65 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = exports.animationStyles = void 0;
-var _renderUi = require("@pie-lib/render-ui");
-var noTouch = {
-  '-webkit-touchCcallout': 'none',
-  '-webkit-user-select': 'none',
-  '-khtml-user-select': 'none',
-  '-moz-user-select': 'none',
-  '-ms-user-select': 'none',
-  'user-select': 'none'
-};
-var _default = {
-  root: {
-    width: '100%',
-    cursor: 'pointer'
-  },
-  content: {
-    margin: '0 auto',
-    textAlign: 'center',
-    display: 'flex'
-  },
-  label: Object.assign({
-    width: 'fit-content',
-    minWidth: '140px',
-    // eslint-disable-next-line
-    alignSelf: 'center',
-    verticalAlign: 'middle',
-    color: "var(--correct-answer-toggle-label-color,  ".concat(_renderUi.color.text(), ")"),
-    fontWeight: 'normal'
-  }, noTouch),
-  icon: {
-    position: 'absolute',
-    width: '25px'
-  },
-  iconHolder: {
-    width: '25px',
-    marginRight: '5px',
-    display: 'flex',
-    alignItems: 'center'
-  },
-  enter: {
-    opacity: '0'
-  },
-  enterActive: {
-    opacity: '1',
-    transition: 'opacity 0.3s ease-in'
-  },
-  exit: {
-    opacity: '1'
-  },
-  exitActive: {
-    opacity: '0',
-    transition: 'opacity 0.3s ease-in'
-  }
-};
-exports["default"] = _default;
-var animationStyles = {};
-exports.animationStyles = animationStyles;
-//# sourceMappingURL=styles.js.map

package/lib/styles.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"sources":["../src/styles.js"],"names":["noTouch","root","width","cursor","content","margin","textAlign","display","label","Object","assign","minWidth","alignSelf","verticalAlign","color","text","fontWeight","icon","position","iconHolder","marginRight","alignItems","enter","opacity","enterActive","transition","exit","exitActive","animationStyles"],"mappings":";;;;;;;AAAA;;AAEA,IAAMA,OAAO,GAAG;AACd,2BAAyB,MADX;AAEd,yBAAuB,MAFT;AAGd,wBAAsB,MAHR;AAId,sBAAoB,MAJN;AAKd,qBAAmB,MALL;AAMd,iBAAe;AAND,CAAhB;eASe;AACbC,EAAAA,IAAI,EAAE;AACJC,IAAAA,KAAK,EAAE,MADH;AAEJC,IAAAA,MAAM,EAAE;AAFJ,GADO;AAKbC,EAAAA,OAAO,EAAE;AACPC,IAAAA,MAAM,EAAE,QADD;AAEPC,IAAAA,SAAS,EAAE,QAFJ;AAGPC,IAAAA,OAAO,EAAE;AAHF,GALI;AAUbC,EAAAA,KAAK,EAAEC,MAAM,CAACC,MAAP,CACL;AACER,IAAAA,KAAK,EAAE,aADT;AAEES,IAAAA,QAAQ,EAAE,OAFZ;AAGE;AACAC,IAAAA,SAAS,EAAE,QAJb;AAKEC,IAAAA,aAAa,EAAE,QALjB;AAMEC,IAAAA,KAAK,sDAA+CA,gBAAMC,IAAN,EAA/C,MANP;AAOEC,IAAAA,UAAU,EAAE;AAPd,GADK,EAULhB,OAVK,CAVM;AAsBbiB,EAAAA,IAAI,EAAE;AACJC,IAAAA,QAAQ,EAAE,UADN;AAEJhB,IAAAA,KAAK,EAAE;AAFH,GAtBO;AA0BbiB,EAAAA,UAAU,EAAE;AACVjB,IAAAA,KAAK,EAAE,MADG;AAEVkB,IAAAA,WAAW,EAAE,KAFH;AAGVb,IAAAA,OAAO,EAAE,MAHC;AAIVc,IAAAA,UAAU,EAAE;AAJF,GA1BC;AAgCbC,EAAAA,KAAK,EAAE;AACLC,IAAAA,OAAO,EAAE;AADJ,GAhCM;AAmCbC,EAAAA,WAAW,EAAE;AACXD,IAAAA,OAAO,EAAE,GADE;AAEXE,IAAAA,UAAU,EAAE;AAFD,GAnCA;AAuCbC,EAAAA,IAAI,EAAE;AACJH,IAAAA,OAAO,EAAE;AADL,GAvCO;AA0CbI,EAAAA,UAAU,EAAE;AACVJ,IAAAA,OAAO,EAAE,GADC;AAEVE,IAAAA,UAAU,EAAE;AAFF;AA1CC,C;;AAgDR,IAAMG,eAAe,GAAG,EAAxB","sourcesContent":["import { color } from '@pie-lib/render-ui';\n\nconst noTouch = {\n '-webkit-touchCcallout': 'none',\n '-webkit-user-select': 'none',\n '-khtml-user-select': 'none',\n '-moz-user-select': 'none',\n '-ms-user-select': 'none',\n 'user-select': 'none',\n};\n\nexport default {\n root: {\n width: '100%',\n cursor: 'pointer',\n },\n content: {\n margin: '0 auto',\n textAlign: 'center',\n display: 'flex',\n },\n label: Object.assign(\n {\n width: 'fit-content',\n minWidth: '140px',\n // eslint-disable-next-line\n alignSelf: 'center',\n verticalAlign: 'middle',\n color: `var(--correct-answer-toggle-label-color, ${color.text()})`,\n fontWeight: 'normal',\n },\n noTouch,\n ),\n icon: {\n position: 'absolute',\n width: '25px',\n },\n iconHolder: {\n width: '25px',\n marginRight: '5px',\n display: 'flex',\n alignItems: 'center',\n },\n enter: {\n opacity: '0',\n },\n enterActive: {\n opacity: '1',\n transition: 'opacity 0.3s ease-in',\n },\n exit: {\n opacity: '1',\n },\n exitActive: {\n opacity: '0',\n transition: 'opacity 0.3s ease-in',\n },\n};\n\nexport const animationStyles = {};\n"],"file":"styles.js"}

package/src/styles.js DELETED Viewed

@@ -1,60 +0,0 @@
-import { color } from '@pie-lib/render-ui';
-const noTouch = {
-  '-webkit-touchCcallout': 'none',
-  '-webkit-user-select': 'none',
-  '-khtml-user-select': 'none',
-  '-moz-user-select': 'none',
-  '-ms-user-select': 'none',
-  'user-select': 'none',
-};
-export default {
-  root: {
-    width: '100%',
-    cursor: 'pointer',
-  },
-  content: {
-    margin: '0 auto',
-    textAlign: 'center',
-    display: 'flex',
-  },
-  label: Object.assign(
-    {
-      width: 'fit-content',
-      minWidth: '140px',
-      // eslint-disable-next-line
-      alignSelf: 'center',
-      verticalAlign: 'middle',
-      color: `var(--correct-answer-toggle-label-color,  ${color.text()})`,
-      fontWeight: 'normal',
-    },
-    noTouch,
-  ),
-  icon: {
-    position: 'absolute',
-    width: '25px',
-  },
-  iconHolder: {
-    width: '25px',
-    marginRight: '5px',
-    display: 'flex',
-    alignItems: 'center',
-  },
-  enter: {
-    opacity: '0',
-  },
-  enterActive: {
-    opacity: '1',
-    transition: 'opacity 0.3s ease-in',
-  },
-  exit: {
-    opacity: '1',
-  },
-  exitActive: {
-    opacity: '0',
-    transition: 'opacity 0.3s ease-in',
-  },
-};
-export const animationStyles = {};