@pie-element/categorize 13.1.11 → 13.2.0-next.9

package/dist/controller/index.d.ts

@@ -0,0 +1,62 @@
+/**
+ * @synced-from pie-elements/packages/categorize/controller/src/index.js
+ * @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 { score } from '@pie-lib/categorize';
+export { score };
+export declare const getPartialScore: (correctResponse: any, builtCategories: any) => number;
+export declare const getTotalScore: (question: any, session: any, env: any) => number;
+export declare const getCorrectness: (question: any, session: any, env: any) => Promise<unknown>;
+export declare const createDefaultModel: (model?: {}) => Promise<unknown>;
+export declare const normalize: (question: any) => any;
+/**
+ *
+ * @param {*} question
+ * @param {*} session
+ * @param {*} env
+ * @param {*} updateSession - optional - a function that will set the properties passed into it on the session.
+ */
+export declare const model: (question: any, session: any, env: any, updateSession: any) => Promise<{
+    allowMultiplePlacementsEnabled?: any;
+    categories: any;
+    categoriesPerRow: any;
+    maxChoicesPerCategory: any;
+    correctness: unknown;
+    choices: any;
+    choicesLabel: any;
+    choicesPosition: any;
+    disabled: boolean;
+    feedback: string | undefined;
+    lockChoiceOrder: boolean;
+    prompt: any;
+    rowLabels: any;
+    note: any;
+    env: any;
+    showNote: any;
+    correctResponse: any;
+    language: any;
+    extraCSSRules: any;
+    fontSizeFactor: any;
+    minRowHeight: any;
+    autoplayAudioEnabled: any;
+    completeAudioEnabled: any;
+    customAudioButton: any;
+    possibleResponses: any[];
+    responseAreasToBeFilled: any;
+    hasUnplacedChoices: boolean;
+}>;
+/**
+* Generates detailed trace log for scoring evaluation
+* @param {Object} model - the question model
+* @param {Object} session - the student session
+* @param {Object} env - the environment
+* @returns {Array} traceLog - array of trace messages
+*/
+export declare const getLogTrace: (model: any, session: any, env: any) => string[];
+export declare const outcome: (question: any, session: any, env: any) => Promise<unknown>;
+export declare const createCorrectResponseSession: (question: any, env: any) => Promise<unknown>;
+export declare const validate: (model?: {}, config?: {}) => {};

package/dist/controller/index.js

@@ -0,0 +1,168 @@
+import e from "./defaults.js";
+import { getCompleteResponseDetails as t, isAlternateDuplicated as n, isCorrectResponseDuplicated as r, multiplePlacements as i } from "./utils.js";
+import { buildState as a, score as o } from "@pie-lib/categorize";
+import s from "@pie-lib/translator";
+import { isEmpty as c } from "@pie-element/shared-lodash";
+import { getFeedbackForCorrectness as l } from "@pie-element/shared-feedback";
+import { getShuffledChoices as u, lockChoices as d, partialScoring as f } from "@pie-element/shared-controller-utils";
+//#region src/controller/index.ts
+var { translator: p } = s, m = (e, t) => {
+	let { placements: n, score: r } = t.reduce((e, { choices: t = [] }) => ({
+		placements: e.placements + t.length,
+		score: e.score + t.filter((e) => e.correct).length
+	}), {
+		placements: 0,
+		score: 0
+	}), { maxScore: i } = e.reduce((e, { choices: t }) => ({ maxScore: e.maxScore + t.length }), { maxScore: 0 }), a = (r - (n > i ? n - i : 0)) / i;
+	return a < 0 ? 0 : parseFloat(a.toFixed(2));
+}, h = (e) => e.map((e) => e.alternateResponses).filter((e) => e), g = (e, t, n) => {
+	if (!t || Object.keys(t).length === 0) return 0;
+	let { categories: r, choices: i } = e || {}, { correctResponse: o } = e || {}, { answers: s } = t || {};
+	s ||= [], o ||= [];
+	let { categories: c, correct: l } = a(r, i, s, o), u = h(o);
+	return f.enabled(e, n) && !u.length ? m(o, c) : +!!l;
+}, _ = (e, t, n) => new Promise((r) => {
+	if (n.mode === "evaluate") {
+		let i = g(e, t, n);
+		r(i === 1 ? "correct" : i === 0 ? "incorrect" : "partially-correct");
+	} else r(void 0);
+}), v = (t = {}) => new Promise((n) => {
+	n({
+		...e,
+		...t
+	});
+}), y = (t) => ({
+	...e,
+	...t
+}), b = async (e, n, r, a) => {
+	let o = y(e), s = await _(o, n, r), { mode: c, role: f } = r || {}, { categories: m, categoriesPerRow: g, choicesLabel: v, choicesPosition: b, correctResponse: x, feedback: S, feedbackEnabled: C, promptEnabled: w, prompt: T, rowLabels: E, rationaleEnabled: D, rationale: O, teacherInstructionsEnabled: k, teacherInstructions: A, language: j, maxChoicesPerCategory: M, extraCSSRules: N, minRowHeight: P, fontSizeFactor: F, autoplayAudioEnabled: I, completeAudioEnabled: L, customAudioButton: R } = o, { choices: z, note: B } = o, V, H = d(o, n, r), U = x.map((e) => {
+		let t = (e.choices || []).filter((e) => e !== "null");
+		return {
+			...e,
+			choices: t
+		};
+	});
+	c === "evaluate" && C && (V = await l(s, S)), H || (z = await u(z, n, a, "id"));
+	let W = (() => {
+		if (e.allowMultiplePlacementsEnabled != null) return e.allowMultiplePlacementsEnabled;
+		let t = (x || []).flatMap((e) => e.choices || []);
+		return t.length === new Set(t).size ? i.disabled : i.enabled;
+	})();
+	z = (z || []).map((e) => {
+		let t;
+		return t = W === i.enabled ? 0 : W === i.disabled ? 1 : e.categoryCount || 0, {
+			...e,
+			categoryCount: t
+		};
+	}), B ||= p.t("common:commonCorrectAnswerWithAlternates", { lng: j });
+	let G = h(U), { responseAreasToBeFilled: K, possibleResponses: q, hasUnplacedChoices: J } = t(U, o.allowAlternateEnabled ? G : [], o.choices), Y = {
+		categories: m || [],
+		categoriesPerRow: g || 2,
+		maxChoicesPerCategory: M,
+		correctness: s,
+		choices: z || [],
+		choicesLabel: v || "",
+		choicesPosition: b,
+		disabled: c !== "gather",
+		feedback: V,
+		lockChoiceOrder: H,
+		prompt: w ? T : null,
+		rowLabels: E,
+		note: B,
+		env: r,
+		showNote: G && G.length > 0,
+		correctResponse: c === "evaluate" ? U : void 0,
+		language: j,
+		extraCSSRules: N,
+		fontSizeFactor: F,
+		minRowHeight: P,
+		autoplayAudioEnabled: I,
+		completeAudioEnabled: L,
+		customAudioButton: R,
+		possibleResponses: q,
+		responseAreasToBeFilled: K,
+		hasUnplacedChoices: J,
+		...e.allowMultiplePlacementsEnabled == null && { allowMultiplePlacementsEnabled: W }
+	};
+	return f === "instructor" && (c === "view" || c === "evaluate") ? (Y.rationale = D ? O : null, Y.teacherInstructions = k ? A : null) : (Y.rationale = null, Y.teacherInstructions = null), Y;
+}, x = (e, t, n) => {
+	let r = [], { answers: i } = t || {}, { categories: o, choices: s, correctResponse: c } = e || {}, l = i.reduce((e, t) => e + (t.choices?.length || 0), 0), u = h(c).length > 0, d = f.enabled(e, n), p = (l > 0 ? a(o, s, i, c) : null)?.categories || [];
+	if (l > 0 ? (r.push(`Student placed ${l} choice(s) into categories.`), (o || []).forEach((e) => {
+		let t = e.id, n = p.find((e) => e.id === t), i = n && n.choices || [], a = (c || []).find((e) => e.category === t), o = a && a.choices || [];
+		if (o.length > 0) if (i.length === 0) r.push(`Category ${t}: student left empty (should contain ${o.length} choice(s)).`);
+		else {
+			let e = i.filter((e) => e.correct).length, n = i.length - e;
+			e > 0 && n === 0 ? r.push(`Category ${t}: student placed ${e} correct choice(s).`) : e === 0 && n > 0 ? r.push(`Category ${t}: student placed ${n} incorrect choice(s).`) : r.push(`Category ${t}: student placed ${e} correct and ${n} incorrect choice(s).`);
+		}
+	})) : r.push("Student did not place any choices into categories."), u && r.push("Alternate response combinations are accepted for this question."), u) r.push("Score calculated using all-or-nothing scoring (alternate responses disable partial scoring)."), r.push("Student must get all categories completely correct to receive full credit.");
+	else if (d) {
+		if (r.push("Score calculated using partial scoring."), r.push("Student receives credit for each correct placement, with deductions for incorrect placements beyond required amount."), l > 0) {
+			let e = p.reduce((e, t) => e + (t.choices || []).filter((e) => e.correct).length, 0), t = l - e, n = (c || []).reduce((e, t) => e + (t.choices || []).length, 0);
+			if (r.push(`Partial scoring calculation: ${e} correct placements, ${t} incorrect placements.`), l > n) {
+				let e = l - n;
+				r.push(`${e} extra placement(s) beyond required amount will be deducted from score.`);
+			}
+		}
+	} else r.push("Score calculated using all-or-nothing scoring."), r.push("Student must get all categories completely correct to receive full credit.");
+	let m = g(e, t, n);
+	return r.push(`Final score: ${m}.`), r;
+}, S = (e, t, n) => n.mode === "evaluate" ? new Promise((r) => {
+	if (!t || c(t)) r({
+		score: 0,
+		empty: !0,
+		traceLog: ["Student did not place any choices into categories. Score is 0."]
+	});
+	else {
+		let i = x(e, t, n);
+		r({
+			score: g(e, t, n),
+			empty: !1,
+			traceLog: i
+		});
+	}
+}) : Promise.reject(/* @__PURE__ */ Error("Can not call outcome when mode is not evaluate")), C = (e, t) => new Promise((n) => {
+	let { mode: r, role: i } = t || {};
+	if (r !== "evaluate" && i === "instructor") {
+		let { correctResponse: t } = e;
+		n({
+			answers: t,
+			id: 1
+		});
+	} else return n(null);
+}), w = (e) => (e || "").replaceAll(/<[^>]*>/g, ""), T = (e) => (e || "").replace(/(<(?!img|iframe|source)([^>]+)>)/gi, ""), E = (e = {}, t = {}) => {
+	let { categories: i, choices: a, correctResponse: o, maxAnswerChoices: s } = e, { minChoices: l = 1, minCategories: u = 1, maxCategories: d = 12, maxLengthPerChoice: f = 300, maxLengthPerCategory: p = 150 } = t, m = [...a || []].reverse(), h = {}, g = {}, _ = {};
+	[
+		"teacherInstructions",
+		"prompt",
+		"rationale"
+	].forEach((n) => {
+		t[n]?.required && !T(e[n]) && (h[n] = "This field is required.");
+	}), (i || []).forEach((e) => {
+		let { id: t, label: n } = e;
+		w(n).length > p && (_[t] = `Category labels should be no more than ${p} characters long.`);
+	}), (m || []).forEach((e, t) => {
+		let { id: n, content: r } = e;
+		w(r).length > f && (g[n] = `Tokens should be no more than ${f} characters long.`), T(r) ? m.slice(t + 1).some((e) => e.content === r) && (g[n] = "Tokens content should be unique.") : g[n] = "Tokens should not be empty.";
+	});
+	let v = (i || []).length, y = (a || []).length;
+	if (v > d ? h.categoriesError = `No more than ${d} categories should be defined.` : v < u && (h.categoriesError = `There should be at least ${u} category defined.`), y < l ? h.choicesError = `There should be at least ${l} choices defined.` : y > s && (h.choicesError = `No more than ${s} choices should be defined.`), y && v) {
+		let e = !1;
+		(o || []).forEach((t) => {
+			let { choices: n = [], alternateResponses: r = [] } = t;
+			n.length ? e = !0 : r.forEach((t) => {
+				(t || []).length && (e = !0);
+			});
+		});
+		let t = -1, i = "";
+		(o || []).forEach((e) => {
+			let { choices: a = [], alternateResponses: o = [], category: s } = e;
+			t === -1 && (t = r(a, o), t === -1 && (t = n(o)), i = s);
+		}), t > -1 && (h.duplicateAlternate = {
+			index: t,
+			category: i
+		}), e || (h.associationError = "At least one token should be assigned to at least one category.");
+	}
+	return c(g) || (h.choicesErrors = g), c(_) || (h.categoriesErrors = _), h;
+};
+//#endregion
+export { C as createCorrectResponseSession, v as createDefaultModel, _ as getCorrectness, x as getLogTrace, m as getPartialScore, g as getTotalScore, b as model, y as normalize, S as outcome, o as score, E as validate };

package/dist/controller/utils.d.ts

@@ -0,0 +1,20 @@
+/**
+ * @synced-from pie-elements/packages/categorize/controller/src/utils.js
+ * @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.
+ */
+export declare const multiplePlacements: {
+    enabled: string;
+    disabled: string;
+    perChoice: string;
+};
+export declare const isCorrectResponseDuplicated: (choices: any, alternate: any) => any;
+export declare const isAlternateDuplicated: (alternate: any) => number;
+export declare const getCompleteResponseDetails: (correctResponse: any, alternates: any, allChoices: any) => {
+    responseAreasToBeFilled: any;
+    possibleResponses: any[];
+    hasUnplacedChoices: boolean;
+};

package/dist/controller/utils.js

@@ -0,0 +1,35 @@
+//#region src/controller/utils.ts
+var e = {
+	enabled: "Yes",
+	disabled: "No",
+	perChoice: "Set Per Choice"
+}, t = (e, t) => {
+	if (e.length < 1 || t.length < 1) return -1;
+	let n = JSON.stringify(e.sort());
+	return t.reduce((e, t) => t.length > 0 ? [...e, JSON.stringify(t.sort())] : e, []).findIndex((e) => e.length && e === n);
+}, n = (e) => {
+	if (e.length <= 1) return -1;
+	let t = /* @__PURE__ */ new Set(), n = e.reduce((e, t) => t.length > 0 ? [...e, JSON.stringify(t.sort())] : e, []);
+	for (let e = 0; e < n.length; e++) {
+		if (t.has(n[e]) && n[e]) return e;
+		t.add(n[e]);
+	}
+	return -1;
+}, r = (e, t, n) => {
+	let r = e.map((e) => e.choices), i = [r.flat()], a = r.filter((e) => e.length).length;
+	if (t.length) {
+		let e = t[0]?.length || 0;
+		[...Array(e).keys()].forEach((e) => {
+			let n = t.map((t) => t[e]), r = n.filter((e) => e?.length).length;
+			i.push(n.flat()), r < a && (a = r);
+		});
+	}
+	let o = i.some((e) => !n.every((t) => e.includes(t?.id)));
+	return {
+		responseAreasToBeFilled: a,
+		possibleResponses: i,
+		hasUnplacedChoices: o
+	};
+};
+//#endregion
+export { r as getCompleteResponseDetails, n as isAlternateDuplicated, t as isCorrectResponseDuplicated, e as multiplePlacements };

package/dist/delivery/categorize/__tests__/categories.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/delivery/categorize/__tests__/category.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/delivery/categorize/__tests__/choice.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/delivery/categorize/__tests__/choices.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/delivery/categorize/__tests__/droppable-placeholder.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/delivery/categorize/__tests__/grid-content.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/delivery/categorize/__tests__/index.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/delivery/categorize/__tests__/keyboard-coordinates.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/delivery/categorize/categories.d.ts

@@ -0,0 +1,37 @@
+/**
+ * @synced-from pie-elements/packages/categorize/src/categorize/categories.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';
+import { CategoryType } from './category.js';
+export { CategoryType };
+export declare class Categories extends React.Component {
+    static propTypes: {
+        categories: PropTypes.Requireable<(PropTypes.InferProps<{
+            id: PropTypes.Validator<string>;
+            categoryId: PropTypes.Requireable<string>;
+        }> | null | undefined)[]>;
+        model: PropTypes.Requireable<PropTypes.InferProps<{
+            categoriesPerRow: PropTypes.Requireable<number>;
+        }>>;
+        disabled: PropTypes.Requireable<boolean>;
+        onDropChoice: PropTypes.Validator<(...args: any[]) => any>;
+        onRemoveChoice: PropTypes.Validator<(...args: any[]) => any>;
+        rowLabels: PropTypes.Requireable<any[]>;
+        selectedItem: PropTypes.Requireable<object>;
+        onSelectClick: PropTypes.Requireable<(...args: any[]) => any>;
+        onPlacementClick: PropTypes.Requireable<(...args: any[]) => any>;
+    };
+    static defaultProps: {
+        model: {
+            categoriesPerRow: number;
+        };
+    };
+    render(): React.JSX.Element;
+}
+export default Categories;

package/dist/delivery/categorize/categories.js

@@ -0,0 +1,72 @@
+import { GridContent as e } from "./grid-content.js";
+import { Category as t, CategoryType as n } from "./category.js";
+import r from "react";
+import { color as i } from "@pie-lib/render-ui";
+import a from "prop-types";
+import { styled as o } from "@mui/material/styles";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+//#region src/delivery/categorize/categories.tsx
+var l = class extends r.Component {
+	static propTypes = {
+		categories: a.arrayOf(a.shape(n)),
+		model: a.shape({ categoriesPerRow: a.number }),
+		disabled: a.bool,
+		onDropChoice: a.func.isRequired,
+		onRemoveChoice: a.func.isRequired,
+		rowLabels: a.array,
+		selectedItem: a.object,
+		onSelectClick: a.func,
+		onPlacementClick: a.func
+	};
+	static defaultProps = { model: { categoriesPerRow: 1 } };
+	render() {
+		let { categories: n, model: r, disabled: i, onDropChoice: a, onRemoveChoice: o, rowLabels: l, selectedItem: p, onSelectClick: m, onPlacementClick: h } = this.props, { categoriesPerRow: g, minRowHeight: _ } = r, v = [], y = n || [];
+		for (let e = 0; e < y.length; e += g) v.push(y.slice(e, e + g));
+		let b = (e) => {
+			let t = !1;
+			return (e || []).forEach((e) => {
+				typeof e == "string" && e.trim() !== "" && e.trim() !== "<div></div>" && (t = !0);
+			}), t;
+		};
+		return /* @__PURE__ */ s(e, {
+			columns: g,
+			rows: Math.ceil(n.length / g) * 2,
+			extraStyle: { flex: 1 },
+			children: v.map((e, n) => {
+				let r = [];
+				return e.forEach((e, g) => {
+					r.push(/* @__PURE__ */ c("div", {
+						style: { display: "flex" },
+						children: [g === 0 && b(l) ? /* @__PURE__ */ s(d, { dangerouslySetInnerHTML: { __html: l[n] || "" } }, n) : null, /* @__PURE__ */ c(f, { children: [/* @__PURE__ */ s(u, { dangerouslySetInnerHTML: { __html: e.label } }, `category-label-${n}-${g}`), /* @__PURE__ */ s(t, {
+							minRowHeight: _,
+							onDropChoice: (t) => a(e.id, t),
+							onRemoveChoice: o,
+							disabled: i,
+							selectedItem: p,
+							onSelectClick: m,
+							onPlacementClick: h,
+							...e
+						}, `category-element-${n}-${g}`)] })]
+					}));
+				}), r = r.concat(Array(g - e.length).fill(/* @__PURE__ */ s("div", {})).map((e, t) => /* @__PURE__ */ s("div", {}, `fill-space-final-${t}`))), r;
+			})
+		});
+	}
+}, u = o("div")(({ theme: e }) => ({
+	color: i.text(),
+	backgroundColor: i.background(),
+	textAlign: "center",
+	paddingTop: e.spacing(1)
+})), d = o("div")({
+	alignItems: "center",
+	display: "flex",
+	justifyContent: "center",
+	flex: .5,
+	marginRight: "12px"
+}), f = o("div")({
+	display: "flex",
+	flex: "2",
+	flexDirection: "column"
+});
+//#endregion
+export { l as Categories, l as default, n as CategoryType };

package/dist/delivery/categorize/category.d.ts

@@ -0,0 +1,31 @@
+/**
+ * @synced-from pie-elements/packages/categorize/src/categorize/category.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';
+export declare const CategoryType: {
+    id: PropTypes.Validator<string>;
+    categoryId: PropTypes.Requireable<string>;
+};
+export declare class Category extends React.Component {
+    static propTypes: {
+        className: PropTypes.Requireable<string>;
+        disabled: PropTypes.Requireable<boolean>;
+        onDropChoice: PropTypes.Requireable<(...args: any[]) => any>;
+        onRemoveChoice: PropTypes.Requireable<(...args: any[]) => any>;
+        minRowHeight: PropTypes.Requireable<string>;
+        selectedItem: PropTypes.Requireable<object>;
+        onSelectClick: PropTypes.Requireable<(...args: any[]) => any>;
+        onPlacementClick: PropTypes.Requireable<(...args: any[]) => any>;
+        id: PropTypes.Validator<string>;
+        categoryId: PropTypes.Requireable<string>;
+    };
+    static defaultProps: {};
+    render(): React.JSX.Element;
+}
+export default Category;

package/dist/delivery/categorize/category.js

@@ -0,0 +1,55 @@
+import e from "./choice.js";
+import t from "./droppable-placeholder.js";
+import n from "react";
+import r from "prop-types";
+import { styled as i } from "@mui/material/styles";
+import { jsx as a } from "react/jsx-runtime";
+//#region src/delivery/categorize/category.tsx
+var o = {
+	id: r.string.isRequired,
+	categoryId: r.string
+}, s = class extends n.Component {
+	static propTypes = {
+		...o,
+		className: r.string,
+		disabled: r.bool,
+		onDropChoice: r.func,
+		onRemoveChoice: r.func,
+		minRowHeight: r.string,
+		selectedItem: r.object,
+		onSelectClick: r.func,
+		onPlacementClick: r.func
+	};
+	static defaultProps = {};
+	render() {
+		let { className: n, choices: r = [], disabled: i, onDropChoice: o, onRemoveChoice: s, id: l, correct: u, minRowHeight: d, selectedItem: f, onSelectClick: p, onPlacementClick: m } = this.props;
+		return /* @__PURE__ */ a(c, {
+			className: n,
+			id: l,
+			children: /* @__PURE__ */ a(t, {
+				id: l,
+				onDropChoice: o,
+				disabled: i,
+				correct: u,
+				minRowHeight: d,
+				selectedItem: f,
+				onPlacementClick: m,
+				children: r.map((t, n) => /* @__PURE__ */ a(e, {
+					onRemoveChoice: s,
+					disabled: i,
+					choiceIndex: n,
+					categoryId: l,
+					selectedItem: f,
+					onSelectClick: p,
+					...t
+				}, n))
+			})
+		});
+	}
+}, c = i("div")(({ theme: e }) => ({
+	display: "flex",
+	flexDirection: "column",
+	flex: 2
+}));
+//#endregion
+export { s as Category, s as default, o as CategoryType };

package/dist/delivery/categorize/choice.d.ts

@@ -0,0 +1,28 @@
+/**
+ * @synced-from pie-elements/packages/categorize/src/categorize/choice.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';
+export declare const ChoiceType: {
+    content: PropTypes.Validator<string>;
+    id: PropTypes.Requireable<string>;
+};
+export declare class Layout extends React.Component {
+    static propTypes: {
+        disabled: PropTypes.Requireable<boolean>;
+        correct: PropTypes.Requireable<boolean>;
+        isDragging: PropTypes.Requireable<boolean>;
+        isSelected: PropTypes.Requireable<boolean>;
+        content: PropTypes.Validator<string>;
+        id: PropTypes.Requireable<string>;
+    };
+    static defaultProps: {};
+    render(): React.JSX.Element;
+}
+declare const _default: (props: any) => React.JSX.Element;
+export default _default;

package/dist/delivery/categorize/choice.js

@@ -0,0 +1,114 @@
+import e from "react";
+import { color as t } from "@pie-lib/render-ui";
+import n from "prop-types";
+import r from "debug";
+import { styled as i } from "@mui/material/styles";
+import { useDraggable as a } from "@dnd-kit/core";
+import { uid as o } from "@pie-lib/drag";
+import { jsx as s } from "react/jsx-runtime";
+import c from "@mui/material/Card";
+import l from "@mui/material/CardContent";
+//#region src/delivery/categorize/choice.tsx
+r("@pie-ui:categorize:choice");
+var u = {
+	content: n.string.isRequired,
+	id: n.string
+}, d = i("div", { shouldForwardProp: (e) => ![
+	"isDragging",
+	"disabled",
+	"correct",
+	"isSelected"
+].includes(e) })(({ isDragging: e, disabled: n, correct: r, isSelected: i }) => ({
+	direction: "initial",
+	cursor: n ? "not-allowed" : e ? "move" : "pointer",
+	width: "100%",
+	borderRadius: "6px",
+	...i && { border: `solid 2px ${t.buttonFocusOutline()}` },
+	...r === !0 && { border: `solid 2px ${t.correct()}` },
+	...r === !1 && { border: `solid 2px ${t.incorrect()}` }
+})), f = i(c, { shouldForwardProp: (e) => e !== "isSelected" })(({ isSelected: e }) => ({
+	color: t.text(),
+	backgroundColor: t.background(),
+	width: "100%",
+	opacity: e ? .5 : 1
+})), p = i(l)(({ theme: e }) => ({
+	color: t.text(),
+	backgroundColor: t.white(),
+	"&:last-child": { paddingBottom: e.spacing(2) },
+	borderRadius: "4px",
+	border: "1px solid",
+	"& p": { margin: "0px" }
+})), m = class extends e.Component {
+	static propTypes = {
+		...u,
+		disabled: n.bool,
+		correct: n.bool,
+		isDragging: n.bool,
+		isSelected: n.bool
+	};
+	static defaultProps = {};
+	render() {
+		let { content: e, isDragging: t, disabled: n, correct: r, isSelected: i, showsSelectionBorder: a } = this.props;
+		return /* @__PURE__ */ s(d, {
+			isDragging: t,
+			disabled: n,
+			correct: r,
+			isSelected: i,
+			children: /* @__PURE__ */ s(f, {
+				isSelected: i,
+				children: /* @__PURE__ */ s(p, { dangerouslySetInnerHTML: { __html: e } })
+			})
+		});
+	}
+}, h = ({ id: e, content: t, disabled: n, correct: r, extraStyle: i, categoryId: o, choiceIndex: c, selectedItem: l, onSelectClick: u }) => {
+	let d = o === void 0 ? `choice-${e}-board` : `choice-${e}-${o}-${c}`, f = {
+		id: e,
+		categoryId: o,
+		choiceIndex: c,
+		value: t,
+		itemType: "categorize",
+		type: "choice"
+	}, { attributes: p, listeners: h, setNodeRef: g, isDragging: _ } = a({
+		id: d,
+		data: f,
+		disabled: n
+	}), v = !!l && l.id === e && l.categoryId === o && l.choiceIndex === c, y = (e) => {
+		if (!n) {
+			if (v) {
+				e.stopPropagation(), u?.(f);
+				return;
+			}
+			l && o !== void 0 || (e.stopPropagation(), u?.(f));
+		}
+	};
+	return /* @__PURE__ */ s("div", {
+		ref: g,
+		style: {
+			margin: "4px",
+			...i
+		},
+		onClick: y,
+		...h,
+		...p,
+		children: /* @__PURE__ */ s(m, {
+			id: e,
+			content: t,
+			disabled: n,
+			correct: r,
+			isDragging: _,
+			isSelected: v
+		})
+	});
+};
+h.propTypes = {
+	...u,
+	extraStyle: n.object,
+	categoryId: n.string,
+	choiceIndex: n.number,
+	onRemoveChoice: n.func,
+	selectedItem: n.object,
+	onSelectClick: n.func
+};
+var g = o.withUid(h);
+//#endregion
+export { u as ChoiceType, m as Layout, g as default };