@pie-element/number-line 11.3.4-next.3 → 12.0.0-beta.0

package/lib/number-line/transitions/fade.js

@@ -1,67 +1,88 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
-
+exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
-var _reactJss = _interopRequireDefault(require("react-jss"));
-
-var _react = _interopRequireDefault(require("react"));
-
+var _react = _interopRequireWildcard(require("react"));
 var _reactTransitionGroup = require("react-transition-group");
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var duration = 200;
-var fade = {
-  appear: {
-    opacity: 0
-  },
-  appearActive: {
-    opacity: 1,
-    transition: "opacity ".concat(duration, "ms ease-in")
-  },
-  enter: {
-    opacity: 0
-  },
-  enterActive: {
-    opacity: 1,
-    transition: "opacity ".concat(duration, "ms ease-in")
-  },
-  exit: {
-    opacity: 1
-  },
-  exitActive: {
-    opacity: 0,
-    transition: "opacity ".concat(duration, "ms ease-in")
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (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 (const 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); }
+const duration = 200;
+const classPrefix = 'fade-transition';
+const fadeStyles = `
+  .${classPrefix}-appear {
+    opacity: 0;
   }
-};
-
-var FadeTransition = function FadeTransition(props) {
-  var classes = props.classes;
-  return /*#__PURE__*/_react["default"].createElement(_reactTransitionGroup.CSSTransition, (0, _extends2["default"])({}, props, {
+  .${classPrefix}-appear-active {
+    opacity: 1;
+    transition: opacity ${duration}ms ease-in;
+  }
+  .${classPrefix}-enter {
+    opacity: 0;
+  }
+  .${classPrefix}-enter-active {
+    opacity: 1;
+    transition: opacity ${duration}ms ease-in;
+  }
+  .${classPrefix}-exit {
+    opacity: 1;
+  }
+  .${classPrefix}-exit-active {
+    opacity: 0;
+    transition: opacity ${duration}ms ease-in;
+  }
+`;
+const FadeTransition = props => {
+  const nodeRef = (0, _react.useRef)(null);
+  const child = _react.default.Children.only(props.children);
+  (0, _react.useEffect)(() => {
+    // Inject styles if not already present
+    if (!document.getElementById(`${classPrefix}-styles`)) {
+      const style = document.createElement('style');
+      style.id = `${classPrefix}-styles`;
+      style.textContent = fadeStyles;
+      document.head.appendChild(style);
+    }
+  }, []);
+  return /*#__PURE__*/_react.default.createElement(_reactTransitionGroup.CSSTransition, (0, _extends2.default)({}, props, {
+    nodeRef: nodeRef,
     appear: true,
     classNames: {
-      enter: classes.enter,
-      enterActive: classes.enterActive,
-      exit: classes.exit,
-      exitActive: classes.exitActive,
-      appear: classes.appear,
-      appearActive: classes.appearActive
+      enter: `${classPrefix}-enter`,
+      enterActive: `${classPrefix}-enter-active`,
+      exit: `${classPrefix}-exit`,
+      exitActive: `${classPrefix}-exit-active`,
+      appear: `${classPrefix}-appear`,
+      appearActive: `${classPrefix}-appear-active`
     },
     timeout: duration
+  }), /*#__PURE__*/_react.default.cloneElement(child, {
+    ref: nodeRef
   }));
 };
-
 FadeTransition.propTypes = {
-  classes: _propTypes["default"].object.isRequired
+  // CSSTransition props
+  children: _propTypes.default.node,
+  in: _propTypes.default.bool,
+  mountOnEnter: _propTypes.default.bool,
+  unmountOnExit: _propTypes.default.bool,
+  appear: _propTypes.default.bool,
+  enter: _propTypes.default.bool,
+  exit: _propTypes.default.bool,
+  timeout: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.shape({
+    enter: _propTypes.default.number,
+    exit: _propTypes.default.number
+  })]),
+  addEndListener: _propTypes.default.func,
+  onEnter: _propTypes.default.func,
+  onEntering: _propTypes.default.func,
+  onEntered: _propTypes.default.func,
+  onExit: _propTypes.default.func,
+  onExiting: _propTypes.default.func,
+  onExited: _propTypes.default.func
 };
-var Fade = (0, _reactJss["default"])(fade)(FadeTransition);
-var _default = Fade;
-exports["default"] = _default;
+var _default = exports.default = FadeTransition;
 //# sourceMappingURL=fade.js.map

package/lib/number-line/transitions/fade.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/number-line/transitions/fade.jsx"],"names":["duration","fade","appear","opacity","appearActive","transition","enter","enterActive","exit","exitActive","FadeTransition","props","classes","propTypes","PropTypes","object","isRequired","Fade"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AAEA,IAAMA,QAAQ,GAAG,GAAjB;AACA,IAAMC,IAAI,GAAG;AACXC,EAAAA,MAAM,EAAE;AACNC,IAAAA,OAAO,EAAE;AADH,GADG;AAIXC,EAAAA,YAAY,EAAE;AACZD,IAAAA,OAAO,EAAE,CADG;AAEZE,IAAAA,UAAU,oBAAaL,QAAb;AAFE,GAJH;AAQXM,EAAAA,KAAK,EAAE;AACLH,IAAAA,OAAO,EAAE;AADJ,GARI;AAWXI,EAAAA,WAAW,EAAE;AACXJ,IAAAA,OAAO,EAAE,CADE;AAEXE,IAAAA,UAAU,oBAAaL,QAAb;AAFC,GAXF;AAeXQ,EAAAA,IAAI,EAAE;AACJL,IAAAA,OAAO,EAAE;AADL,GAfK;AAkBXM,EAAAA,UAAU,EAAE;AACVN,IAAAA,OAAO,EAAE,CADC;AAEVE,IAAAA,UAAU,oBAAaL,QAAb;AAFA;AAlBD,CAAb;;AAwBA,IAAMU,cAAc,GAAG,SAAjBA,cAAiB,CAACC,KAAD,EAAW;AAChC,MAAQC,OAAR,GAAoBD,KAApB,CAAQC,OAAR;AACA,sBACE,gCAAC,mCAAD,gCACMD,KADN;AAEE,IAAA,MAAM,EAAE,IAFV;AAGE,IAAA,UAAU,EAAE;AACVL,MAAAA,KAAK,EAAEM,OAAO,CAACN,KADL;AAEVC,MAAAA,WAAW,EAAEK,OAAO,CAACL,WAFX;AAGVC,MAAAA,IAAI,EAAEI,OAAO,CAACJ,IAHJ;AAIVC,MAAAA,UAAU,EAAEG,OAAO,CAACH,UAJV;AAKVP,MAAAA,MAAM,EAAEU,OAAO,CAACV,MALN;AAMVE,MAAAA,YAAY,EAAEQ,OAAO,CAACR;AANZ,KAHd;AAWE,IAAA,OAAO,EAAEJ;AAXX,KADF;AAeD,CAjBD;;AAmBAU,cAAc,CAACG,SAAf,GAA2B;AACzBD,EAAAA,OAAO,EAAEE,sBAAUC,MAAV,CAAiBC;AADD,CAA3B;AAIA,IAAMC,IAAI,GAAG,0BAAYhB,IAAZ,EAAkBS,cAAlB,CAAb;eAEeO,I","sourcesContent":["import injectSheet from 'react-jss';\nimport React from 'react';\nimport { CSSTransition } from 'react-transition-group';\nimport PropTypes from 'prop-types';\n\nconst duration = 200;\nconst fade = {\n  appear: {\n    opacity: 0,\n  },\n  appearActive: {\n    opacity: 1,\n    transition: `opacity ${duration}ms ease-in`,\n  },\n  enter: {\n    opacity: 0,\n  },\n  enterActive: {\n    opacity: 1,\n    transition: `opacity ${duration}ms ease-in`,\n  },\n  exit: {\n    opacity: 1,\n  },\n  exitActive: {\n    opacity: 0,\n    transition: `opacity ${duration}ms ease-in`,\n  },\n};\n\nconst FadeTransition = (props) => {\n  const { classes } = props;\n  return (\n    <CSSTransition\n      {...props}\n      appear={true}\n      classNames={{\n        enter: classes.enter,\n        enterActive: classes.enterActive,\n        exit: classes.exit,\n        exitActive: classes.exitActive,\n        appear: classes.appear,\n        appearActive: classes.appearActive,\n      }}\n      timeout={duration}\n    />\n  );\n};\n\nFadeTransition.propTypes = {\n  classes: PropTypes.object.isRequired,\n};\n\nconst Fade = injectSheet(fade)(FadeTransition);\n\nexport default Fade;\n"],"file":"fade.js"}
+{"version":3,"file":"fade.js","names":["_react","_interopRequireWildcard","require","_reactTransitionGroup","_propTypes","_interopRequireDefault","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","duration","classPrefix","fadeStyles","FadeTransition","props","nodeRef","useRef","child","React","Children","only","children","useEffect","document","getElementById","style","createElement","id","textContent","head","appendChild","CSSTransition","_extends2","appear","classNames","enter","enterActive","exit","exitActive","appearActive","timeout","cloneElement","ref","propTypes","PropTypes","node","in","bool","mountOnEnter","unmountOnExit","oneOfType","number","shape","addEndListener","func","onEnter","onEntering","onEntered","onExit","onExiting","onExited","_default","exports"],"sources":["../../../src/number-line/transitions/fade.jsx"],"sourcesContent":["import React, { useEffect, useRef } from 'react';\nimport { CSSTransition } from 'react-transition-group';\nimport PropTypes from 'prop-types';\n\nconst duration = 200;\nconst classPrefix = 'fade-transition';\n\nconst fadeStyles = `\n  .${classPrefix}-appear {\n    opacity: 0;\n  }\n  .${classPrefix}-appear-active {\n    opacity: 1;\n    transition: opacity ${duration}ms ease-in;\n  }\n  .${classPrefix}-enter {\n    opacity: 0;\n  }\n  .${classPrefix}-enter-active {\n    opacity: 1;\n    transition: opacity ${duration}ms ease-in;\n  }\n  .${classPrefix}-exit {\n    opacity: 1;\n  }\n  .${classPrefix}-exit-active {\n    opacity: 0;\n    transition: opacity ${duration}ms ease-in;\n  }\n`;\n\nconst FadeTransition = (props) => {\n  const nodeRef = useRef(null);\n  const child = React.Children.only(props.children);\n\n  useEffect(() => {\n    // Inject styles if not already present\n    if (!document.getElementById(`${classPrefix}-styles`)) {\n      const style = document.createElement('style');\n      style.id = `${classPrefix}-styles`;\n      style.textContent = fadeStyles;\n      document.head.appendChild(style);\n    }\n  }, []);\n\n  return (\n    <CSSTransition\n      {...props}\n      nodeRef={nodeRef}\n      appear={true}\n      classNames={{\n        enter: `${classPrefix}-enter`,\n        enterActive: `${classPrefix}-enter-active`,\n        exit: `${classPrefix}-exit`,\n        exitActive: `${classPrefix}-exit-active`,\n        appear: `${classPrefix}-appear`,\n        appearActive: `${classPrefix}-appear-active`,\n      }}\n      timeout={duration}\n    >\n      {React.cloneElement(child, { ref: nodeRef })}\n    </CSSTransition>\n  );\n};\n\nFadeTransition.propTypes = {\n  // CSSTransition props\n  children: PropTypes.node,\n  in: PropTypes.bool,\n  mountOnEnter: PropTypes.bool,\n  unmountOnExit: PropTypes.bool,\n  appear: PropTypes.bool,\n  enter: PropTypes.bool,\n  exit: PropTypes.bool,\n  timeout: PropTypes.oneOfType([PropTypes.number, PropTypes.shape({\n    enter: PropTypes.number,\n    exit: PropTypes.number,\n  })]),\n  addEndListener: PropTypes.func,\n  onEnter: PropTypes.func,\n  onEntering: PropTypes.func,\n  onEntered: PropTypes.func,\n  onExit: PropTypes.func,\n  onExiting: PropTypes.func,\n  onExited: PropTypes.func,\n};\n\nexport default FadeTransition;\n"],"mappings":"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","ignoreList":[]}

package/lib/number-line/transitions/index.js

@@ -1,16 +1,14 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 Object.defineProperty(exports, "Fade", {
   enumerable: true,
-  get: function get() {
-    return _fade["default"];
+  get: function () {
+    return _fade.default;
   }
 });
-
 var _fade = _interopRequireDefault(require("./fade"));
 //# sourceMappingURL=index.js.map

package/lib/number-line/transitions/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/number-line/transitions/index.js"],"names":[],"mappings":";;;;;;;;;;;;;;AAAA","sourcesContent":["import Fade from './fade';\nexport { Fade };\n"],"file":"index.js"}
+{"version":3,"file":"index.js","names":["_fade","_interopRequireDefault","require"],"sources":["../../../src/number-line/transitions/index.js"],"sourcesContent":["import Fade from './fade';\nexport { Fade };\n"],"mappings":";;;;;;;;;;;;AAAA,IAAAA,KAAA,GAAAC,sBAAA,CAAAC,OAAA","ignoreList":[]}

package/package.json

@@ -1,33 +1,36 @@
 {
   "name": "@pie-element/number-line",
-  "version": "11.3.4-next.3+1f5df43bb",
+  "version": "12.0.0-beta.0",
   "repository": "pie-framework/pie-elements",
   "description": "",
   "publishConfig": {
     "access": "public"
   },
   "dependencies": {
-    "@material-ui/core": "^3.9.2",
-    "@pie-lib/correct-answer-toggle": "2.25.2",
-    "@pie-lib/icons": "2.24.1",
-    "@pie-lib/math-rendering": "3.22.1",
-    "@pie-lib/render-ui": "4.35.2",
-    "@pie-lib/translator": "2.23.1",
+    "@dnd-kit/core": "6.1.0",
+    "@emotion/react": "^11.14.0",
+    "@emotion/style": "^0.8.0",
+    "@mui/icons-material": "^7.3.4",
+    "@mui/material": "^7.3.4",
+    "@pie-lib/correct-answer-toggle": "2.25.4-next.0",
+    "@pie-lib/icons": "2.24.3-next.0",
+    "@pie-lib/math-rendering": "3.22.3-next.0",
+    "@pie-lib/render-ui": "4.35.4-next.0",
+    "@pie-lib/translator": "2.23.3-next.0",
     "classnames": "^2.2.5",
     "d3-scale": "^3.2.1",
     "d3-selection": "^1.4.1",
     "lodash": "^4.17.10",
     "mathjs": "^7.5.1",
     "prop-types": "^15.6.1",
-    "react": "^16.8.1",
-    "react-dom": "^16.8.1",
-    "react-draggable": "^3.3.0",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
     "react-jss": "^8.4.0",
     "react-transition-group": "^2.3.1"
   },
   "author": "pie framework developers",
   "license": "ISC",
-  "gitHead": "1f5df43bb21a7e04dbae9de66831b3d64d3ff5a8",
+  "gitHead": "7879a67078db250e4b7e8fdc869638024600411d",
   "scripts": {
     "postpublish": "../../scripts/postpublish"
   },