@pie-lib/correct-answer-toggle 4.0.2-next.2 → 4.0.3-next.0

package/dist/expander.d.ts

@@ -0,0 +1,19 @@
+/**
+ * @synced-from pie-lib/packages/correct-answer-toggle/src/expander.jsx
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+import React from 'react';
+import PropTypes from 'prop-types';
+declare const Expander: {
+    (props: any): React.JSX.Element;
+    propTypes: {
+        show: PropTypes.Validator<boolean>;
+        className: PropTypes.Requireable<string>;
+        children: PropTypes.Validator<NonNullable<NonNullable<PropTypes.ReactNodeLike>>>;
+    };
+};
+export default Expander;

package/dist/expander.js

@@ -0,0 +1,68 @@
+import { styled as e } from "@mui/material/styles";
+import { CSSTransition as t } from "react-transition-group";
+import { jsx as n } from "react/jsx-runtime";
+import { useRef as r } from "react";
+import i from "prop-types";
+//#region src/expander.tsx
+var a = "height ease-in 300ms, opacity ease-in 300ms", o = e("div")(() => ({
+	position: "relative",
+	height: 0,
+	overflow: "hidden",
+	display: "flex",
+	visibility: "hidden",
+	width: 0,
+	"&.enter": {
+		transition: a,
+		opacity: 1,
+		height: "auto",
+		width: "auto",
+		visibility: "visible",
+		minHeight: "25px"
+	},
+	"&.enter-done": {
+		height: "auto",
+		visibility: "visible",
+		width: "auto",
+		minHeight: "25px"
+	},
+	"&.exit": {
+		transition: a,
+		opacity: 0,
+		height: 0,
+		visibility: "visible",
+		width: 0
+	},
+	"&.exit-done": {
+		opacity: 0,
+		visibility: "hidden",
+		height: 0,
+		width: 0
+	}
+})), s = (e) => {
+	let { show: i, children: a, className: s } = e, c = r(null);
+	return /* @__PURE__ */ n(t, {
+		nodeRef: c,
+		in: i,
+		appear: !0,
+		mountOnEnter: !1,
+		timeout: 300,
+		classNames: {
+			enter: "enter",
+			enterDone: "enter-done",
+			exit: "exit",
+			exitDone: "exit-done"
+		},
+		children: /* @__PURE__ */ n(o, {
+			ref: c,
+			className: s,
+			children: a
+		})
+	});
+};
+s.propTypes = {
+	show: i.bool.isRequired,
+	className: i.string,
+	children: i.oneOfType([i.arrayOf(i.node), i.node]).isRequired
+};
+//#endregion
+export { s as default };

package/dist/index.d.ts

@@ -0,0 +1,36 @@
+/**
+ * @synced-from pie-lib/packages/correct-answer-toggle/src/index.jsx
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+import React from 'react';
+import PropTypes from 'prop-types';
+/**
+ * We export the raw unstyled class for testability. For public use please use the default export.
+ */
+export declare class CorrectAnswerToggle extends React.Component {
+    static propTypes: {
+        onToggle: PropTypes.Requireable<(...args: any[]) => any>;
+        toggled: PropTypes.Requireable<boolean>;
+        show: PropTypes.Requireable<boolean>;
+        hideMessage: PropTypes.Requireable<string>;
+        showMessage: PropTypes.Requireable<string>;
+        className: PropTypes.Requireable<string>;
+        language: PropTypes.Requireable<string>;
+    };
+    static defaultProps: {
+        showMessage: string;
+        hideMessage: string;
+        show: boolean;
+        toggled: boolean;
+    };
+    constructor(props: any);
+    onClick(): void;
+    onTouch(event: any): void;
+    UNSAFE_componentWillReceiveProps(nextProps: any): void;
+    render(): React.JSX.Element;
+}
+export default CorrectAnswerToggle;

package/dist/index.js

@@ -0,0 +1,146 @@
+import e from "./expander.js";
+import { styled as t } from "@mui/material/styles";
+import { CSSTransition as n } from "react-transition-group";
+import { CorrectResponse as r } from "@pie-lib/icons";
+import * as i from "@pie-lib/render-ui";
+import { Readable as a, color as o } from "@pie-lib/render-ui";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import l from "react";
+import u from "prop-types";
+import d from "@pie-lib/translator";
+//#region src/index.tsx
+function f(e) {
+	return typeof e == "function" || typeof e == "object" && !!e && typeof e.$$typeof == "symbol";
+}
+function p(e, t) {
+	return !e || f(e) ? e : f(e.default) ? e.default : t && f(e[t]) ? e[t] : t && f(e[t]?.default) ? e[t].default : e;
+}
+var m = p(a, "Readable") || p(_.Readable, "Readable"), h = i, g = h.default, _ = g && typeof g == "object" ? g : h, { translator: v } = d, y = {
+	WebkitTouchCallout: "none",
+	WebkitUserSelect: "none",
+	KhtmlUserSelect: "none",
+	MozUserSelect: "none",
+	msUserSelect: "none",
+	userSelect: "none"
+}, b = t("div")(() => ({
+	width: "100%",
+	cursor: "pointer"
+})), x = t("div")(() => ({
+	margin: "0 auto",
+	textAlign: "center",
+	display: "flex"
+})), S = t("div")(() => ({
+	width: "fit-content",
+	minWidth: "140px",
+	alignSelf: "center",
+	verticalAlign: "middle",
+	color: `var(--correct-answer-toggle-label-color, ${o.text()})`,
+	fontWeight: "normal",
+	...y
+})), C = t("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"
+	}
+})), w = t("div")(() => ({
+	width: "25px",
+	marginRight: "5px",
+	display: "flex",
+	alignItems: "center"
+})), T = class t extends l.Component {
+	static propTypes = {
+		onToggle: u.func,
+		toggled: u.bool,
+		show: u.bool,
+		hideMessage: u.string,
+		showMessage: u.string,
+		className: u.string,
+		language: u.string
+	};
+	static defaultProps = {
+		showMessage: "Show correct answer",
+		hideMessage: "Hide correct answer",
+		show: !1,
+		toggled: !1
+	};
+	constructor(e) {
+		super(e), this.state = { show: e.show }, this.openIconRef = l.createRef(), this.closedIconRef = l.createRef(), t.defaultProps = {
+			...t.defaultProps,
+			showMessage: v.t("common:showCorrectAnswer", { lng: e.language }),
+			hideMessage: v.t("common:hideCorrectAnswer", { lng: e.language })
+		};
+	}
+	onClick() {
+		this.props.onToggle(!this.props.toggled);
+	}
+	onTouch(e) {
+		e.preventDefault(), this.props.onToggle(!this.props.toggled);
+	}
+	UNSAFE_componentWillReceiveProps(e) {
+		this.setState({ show: e.show }), e.language !== this.props?.language && (t.defaultProps = {
+			...t.defaultProps,
+			showMessage: v.t("common:showCorrectAnswer", { lng: e.language }),
+			hideMessage: v.t("common:hideCorrectAnswer", { lng: e.language })
+		});
+	}
+	render() {
+		let { className: t, toggled: i, hideMessage: a, showMessage: o } = this.props;
+		return /* @__PURE__ */ s(b, {
+			className: t,
+			children: /* @__PURE__ */ s(e, {
+				show: this.state.show,
+				children: /* @__PURE__ */ c(x, {
+					onClick: this.onClick.bind(this),
+					onTouchEnd: this.onTouch.bind(this),
+					children: [/* @__PURE__ */ c(w, { children: [/* @__PURE__ */ s(n, {
+						nodeRef: this.openIconRef,
+						timeout: 400,
+						in: i,
+						exit: !i,
+						classNames: {
+							enter: "enter",
+							enterActive: "enter-active",
+							exit: "exit",
+							exitActive: "exit-active"
+						},
+						children: /* @__PURE__ */ s(C, {
+							ref: this.openIconRef,
+							children: /* @__PURE__ */ s(r, { open: i }, "correct-open")
+						})
+					}), /* @__PURE__ */ s(n, {
+						nodeRef: this.closedIconRef,
+						timeout: 5e3,
+						in: !i,
+						exit: i,
+						classNames: {
+							enter: "enter",
+							enterActive: "enter-active",
+							exit: "exit",
+							exitActive: "exit-active"
+						},
+						children: /* @__PURE__ */ s(C, {
+							ref: this.closedIconRef,
+							children: /* @__PURE__ */ s(r, { open: i }, "correct-closed")
+						})
+					})] }), /* @__PURE__ */ s(m, {
+						false: !0,
+						children: /* @__PURE__ */ s(S, {
+							"aria-hidden": !this.state.show,
+							children: i ? a : o
+						})
+					})]
+				})
+			})
+		});
+	}
+};
+//#endregion
+export { T as CorrectAnswerToggle, T as default };

package/package.json

@@ -1,40 +1,43 @@
 {
   "name": "@pie-lib/correct-answer-toggle",
+  "version": "4.0.3-next.0",
   "description": "A react based toggle component",
-  "license": "ISC",
-  "keywords": [
-    "react",
-    "pie",
-    "mui",
-    "@mui/material"
-  ],
-  "publishConfig": {
-    "access": "public"
-  },
-  "version": "4.0.2-next.2",
-  "main": "lib/index.js",
-  "module": "src/index.jsx",
-  "repository": "pie-framework/pie-lib",
-  "scripts": {},
   "dependencies": {
     "@emotion/react": "^11.14.0",
     "@emotion/style": "^0.8.0",
     "@mui/icons-material": "^7.3.4",
     "@mui/material": "^7.3.4",
-    "@pie-lib/icons": "^4.0.2-next.1",
-    "@pie-lib/render-ui": "^6.1.0-next.2",
-    "@pie-lib/translator": "^4.0.2-next.1",
+    "@pie-lib/icons": "4.0.3-next.0",
+    "@pie-lib/render-ui": "6.1.1-next.0",
+    "@pie-lib/translator": "4.0.3-next.0",
     "lodash-es": "^4.17.23",
     "prop-types": "^15.6.2",
-    "react-transition-group": "^4.4.5"
+    "react-transition-group": "^4.4.5",
+    "react": "^18.2.0"
   },
-  "devDependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
   },
-  "peerDependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+  "files": [
+    "dist"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "build": "bun x vite build && bun x tsc --emitDeclarationOnly",
+    "dev": "bun x vite",
+    "test": "bun x vitest run"
   },
-  "gitHead": "abac0350cad300ce7a38fd54141b281b48a1461a"
+  "devDependencies": {
+    "vite": "^8.0.1",
+    "typescript": "^5.9.3",
+    "@vitejs/plugin-react": "^6.0.1",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0"
+  }
 }

package/CHANGELOG.json

@@ -1 +0,0 @@
-[]