@pie-element/categorize 13.2.0-beta.0 → 13.2.0-next.9

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

@@ -0,0 +1,42 @@
+/**
+ * @synced-from pie-elements/packages/categorize/src/categorize/choices.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 { ChoiceType } from './choice.js';
+export { ChoiceType };
+export declare class Choices extends React.Component {
+    static propTypes: {
+        choices: PropTypes.Requireable<(NonNullable<PropTypes.InferProps<{
+            content: PropTypes.Validator<string>;
+            id: PropTypes.Requireable<string>;
+        }> | PropTypes.InferProps<{
+            empty: PropTypes.Requireable<boolean>;
+        }> | null | undefined> | null | undefined)[]>;
+        model: PropTypes.Requireable<PropTypes.InferProps<{
+            categoriesPerRow: PropTypes.Requireable<number>;
+            choicesLabel: PropTypes.Requireable<string>;
+        }>>;
+        disabled: PropTypes.Requireable<boolean>;
+        choicePosition: PropTypes.Requireable<string>;
+        onDropChoice: PropTypes.Requireable<(...args: any[]) => any>;
+        onRemoveChoice: PropTypes.Requireable<(...args: any[]) => any>;
+        correct: any;
+        selectedItem: PropTypes.Requireable<object>;
+        onSelectClick: PropTypes.Requireable<(...args: any[]) => any>;
+        onPlacementClick: PropTypes.Requireable<(...args: any[]) => any>;
+    };
+    static defaultProps: {
+        model: {
+            categoriesPerRow: number;
+            choicesLabel: string;
+        };
+    };
+    render(): React.JSX.Element;
+}
+export default Choices;

package/dist/delivery/categorize/choices.js

@@ -0,0 +1,58 @@
+import e, { ChoiceType as t } from "./choice.js";
+import n from "./droppable-placeholder.js";
+import r from "react";
+import i from "prop-types";
+import { styled as a } from "@mui/material/styles";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+//#region src/delivery/categorize/choices.tsx
+var c = a("div")({
+	flex: 1,
+	touchAction: "none"
+}), l = a("div")(({ theme: e }) => ({
+	margin: "0 auto",
+	textAlign: "center",
+	paddingTop: e.spacing(1)
+})), u = class extends r.Component {
+	static propTypes = {
+		choices: i.arrayOf(i.oneOfType([i.shape(t), i.shape({ empty: i.bool })])),
+		model: i.shape({
+			categoriesPerRow: i.number,
+			choicesLabel: i.string
+		}),
+		disabled: i.bool,
+		choicePosition: i.string,
+		onDropChoice: i.func,
+		onRemoveChoice: i.func,
+		correct: i.boolean,
+		selectedItem: i.object,
+		onSelectClick: i.func,
+		onPlacementClick: i.func
+	};
+	static defaultProps = { model: {
+		categoriesPerRow: 1,
+		choicesLabel: ""
+	} };
+	render() {
+		let { choices: t = [], model: r, disabled: i, onDropChoice: a, onRemoveChoice: u, choicePosition: d, correct: f, selectedItem: p, onSelectClick: m, onPlacementClick: h } = this.props, g = { textAlign: "center" };
+		return d === "left" && (g.direction = "rtl"), /* @__PURE__ */ o(c, { children: /* @__PURE__ */ s(n, {
+			id: "choices-board",
+			onDropChoice: a,
+			onRemoveChoice: u,
+			disabled: i,
+			style: { background: "none" },
+			choiceBoard: !0,
+			correct: f,
+			selectedItem: p,
+			onPlacementClick: h,
+			children: [r.choicesLabel && r.choicesLabel !== "" && /* @__PURE__ */ o(l, { dangerouslySetInnerHTML: { __html: r.choicesLabel } }), t.map((t, n) => t.empty ? /* @__PURE__ */ o("div", {}, n) : /* @__PURE__ */ o(e, {
+				disabled: i,
+				extraStyle: { maxWidth: `${95 / r.categoriesPerRow}%` },
+				selectedItem: p,
+				onSelectClick: m,
+				...t
+			}, n))]
+		}) });
+	}
+};
+//#endregion
+export { t as ChoiceType, u as Choices, u as default };

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

@@ -0,0 +1,36 @@
+/**
+ * @synced-from pie-elements/packages/categorize/src/categorize/droppable-placeholder.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 DroppablePlaceholder: {
+    ({ children, grid, disabled, choiceBoard, minRowHeight, id, correct, selectedItem, onPlacementClick, }: {
+        children: any;
+        grid: any;
+        disabled: any;
+        choiceBoard: any;
+        minRowHeight: any;
+        id: any;
+        correct: any;
+        selectedItem: any;
+        onPlacementClick: any;
+    }): React.JSX.Element;
+    propTypes: {
+        choiceBoard: PropTypes.Requireable<boolean>;
+        children: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
+        grid: PropTypes.Requireable<object>;
+        disabled: PropTypes.Requireable<boolean>;
+        minRowHeight: PropTypes.Requireable<string>;
+        onDropChoice: PropTypes.Requireable<(...args: any[]) => any>;
+        id: PropTypes.Validator<string>;
+        correct: PropTypes.Requireable<boolean>;
+        selectedItem: PropTypes.Requireable<object>;
+        onPlacementClick: PropTypes.Requireable<(...args: any[]) => any>;
+    };
+};
+export default DroppablePlaceholder;

package/dist/delivery/categorize/droppable-placeholder.js

@@ -0,0 +1,77 @@
+import { useState as e } from "react";
+import { color as t } from "@pie-lib/render-ui";
+import n from "prop-types";
+import r from "debug";
+import { useTheme as i } from "@mui/material/styles";
+import { useDroppable as a } from "@dnd-kit/core";
+import { PlaceHolder as o } from "@pie-lib/drag";
+import { jsx as s } from "react/jsx-runtime";
+//#region src/delivery/categorize/droppable-placeholder.tsx
+r("@pie-ui:categorize:droppable-placeholder");
+var c = ({ children: n, grid: r, disabled: c, choiceBoard: l, minRowHeight: u, id: d, correct: f, selectedItem: p, onPlacementClick: m }) => {
+	let h = i(), [g, _] = e(!1), { setNodeRef: v, isOver: y } = a({
+		id: d,
+		data: {
+			itemType: "categorize",
+			categoryId: d
+		},
+		disabled: c
+	}), b = !!p, x = y || b && g && !c, S = !c, C = () => {
+		c || !p || m?.(d);
+	}, w = (e) => {
+		e.target === e.currentTarget && (e.code === "Space" || e.code === "Enter") && (e.preventDefault(), C());
+	}, T = {
+		padding: h.spacing(.5),
+		borderRadius: h.spacing(.5),
+		gridColumnGap: 0,
+		gridRowGap: 0,
+		display: "flex",
+		flexWrap: "wrap",
+		justifyContent: "center",
+		alignItems: "center",
+		alignContent: "flex-start",
+		width: "100%",
+		height: "100%",
+		...f === !1 && !l && { border: `solid 2px ${t.incorrect()}` },
+		...f === !0 && !l && { border: `solid 2px ${t.correct()}` }
+	};
+	return /* @__PURE__ */ s("div", {
+		ref: v,
+		role: S ? "button" : void 0,
+		tabIndex: S ? 0 : -1,
+		onClick: C,
+		onKeyDown: S ? w : void 0,
+		onMouseEnter: () => _(!0),
+		onMouseLeave: () => _(!1),
+		style: {
+			flex: 1,
+			minHeight: u || "80px",
+			position: "relative",
+			touchAction: "none",
+			...b && !c && { cursor: "pointer" }
+		},
+		children: /* @__PURE__ */ s(o, {
+			isOver: x,
+			grid: r,
+			disabled: c,
+			choiceBoard: l,
+			isCategorize: !0,
+			extraStyles: T,
+			children: n
+		})
+	});
+};
+c.propTypes = {
+	choiceBoard: n.bool,
+	children: n.node.isRequired,
+	grid: n.object,
+	disabled: n.bool,
+	minRowHeight: n.string,
+	onDropChoice: n.func,
+	id: n.string.isRequired,
+	correct: n.bool,
+	selectedItem: n.object,
+	onPlacementClick: n.func
+};
+//#endregion
+export { c as default };

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

@@ -0,0 +1,25 @@
+/**
+ * @synced-from pie-elements/packages/categorize/src/categorize/grid-content.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 class GridContent extends React.Component {
+    static propTypes: {
+        className: PropTypes.Requireable<string>;
+        children: PropTypes.Validator<NonNullable<NonNullable<PropTypes.ReactNodeLike>>>;
+        columns: PropTypes.Requireable<number>;
+        rows: PropTypes.Requireable<number>;
+        extraStyle: PropTypes.Requireable<object>;
+    };
+    static defaultProps: {
+        columns: number;
+        rows: number;
+    };
+    render(): React.JSX.Element;
+}
+export default GridContent;

package/dist/delivery/categorize/grid-content.js

@@ -0,0 +1,39 @@
+import e from "react";
+import t from "prop-types";
+import { styled as n } from "@mui/material/styles";
+import { jsx as r } from "react/jsx-runtime";
+//#region src/delivery/categorize/grid-content.tsx
+var i = class extends e.Component {
+	static propTypes = {
+		className: t.string,
+		children: t.oneOfType([t.arrayOf(t.node), t.node]).isRequired,
+		columns: t.number,
+		rows: t.number,
+		extraStyle: t.object
+	};
+	static defaultProps = {
+		columns: 2,
+		rows: 2
+	};
+	render() {
+		let { className: e, children: t, columns: n, extraStyle: i, rows: o } = this.props;
+		return /* @__PURE__ */ r(a, {
+			style: {
+				gridTemplateColumns: `repeat(${n}, 1fr)`,
+				gridTemplateRows: o === 2 ? "auto 1fr" : `repeat(${o}, auto)`,
+				...i
+			},
+			className: e,
+			children: t
+		});
+	}
+}, a = n("div")(({ theme: e }) => ({
+	display: "grid",
+	columnGap: e.spacing(1),
+	gridColumnGap: e.spacing(1),
+	rowGap: e.spacing(1),
+	gridRowGap: e.spacing(1),
+	gridAutoRows: "1fr"
+}));
+//#endregion
+export { i as GridContent, i as default };

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

@@ -0,0 +1,70 @@
+/**
+ * @synced-from pie-elements/packages/categorize/src/categorize/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';
+export declare class Categorize extends React.Component {
+    static propTypes: {
+        model: PropTypes.Requireable<object>;
+        session: PropTypes.Requireable<PropTypes.InferProps<{
+            answers: PropTypes.Requireable<(PropTypes.InferProps<{
+                choice: PropTypes.Requireable<string>;
+                category: PropTypes.Requireable<string>;
+            }> | null | undefined)[]>;
+        }>>;
+        onAnswersChange: PropTypes.Validator<(...args: any[]) => any>;
+        onShowCorrectToggle: PropTypes.Validator<(...args: any[]) => any>;
+        pauseMathObserver: PropTypes.Requireable<(...args: any[]) => any>;
+        resumeMathObserver: PropTypes.Requireable<(...args: any[]) => any>;
+        selectedItem: PropTypes.Requireable<object>;
+        onSelectClick: PropTypes.Requireable<(...args: any[]) => any>;
+        onPlacementClick: PropTypes.Requireable<(...args: any[]) => any>;
+    };
+    static defaultProps: {
+        disabled: boolean;
+    };
+    constructor(props: any);
+    removeChoice: any;
+    dropChoice: any;
+    UNSAFE_componentWillReceiveProps(nextProps: any): void;
+    toggleShowCorrect: () => void;
+    getPositionDirection: any;
+    existAlternateResponse: (correctResponse: any) => any;
+    render(): React.JSX.Element;
+}
+declare class CategorizeProvider extends React.Component {
+    static propTypes: {
+        model: PropTypes.Requireable<object>;
+        session: PropTypes.Requireable<PropTypes.InferProps<{
+            answers: PropTypes.Requireable<(PropTypes.InferProps<{
+                choice: PropTypes.Requireable<string>;
+                category: PropTypes.Requireable<string>;
+            }> | null | undefined)[]>;
+        }>>;
+        onAnswersChange: PropTypes.Validator<(...args: any[]) => any>;
+        onShowCorrectToggle: PropTypes.Validator<(...args: any[]) => any>;
+        pauseMathObserver: PropTypes.Requireable<(...args: any[]) => any>;
+        resumeMathObserver: PropTypes.Requireable<(...args: any[]) => any>;
+    };
+    constructor(props: any);
+    onDragStart: any;
+    commitPlacement: any;
+    onDragEnd: any;
+    onDragCancel: any;
+    isSameItem: (a: any, b: any) => boolean;
+    toggleItemSelection: any;
+    cancelSelection: any;
+    endAnyLiveKeyboardDrag: any;
+    placeSelectedItem: any;
+    isClickSoonAfterDragEnd: () => boolean;
+    onItemClick: any;
+    onPlacementClick: any;
+    renderDragOverlay: any;
+    render(): React.JSX.Element;
+}
+export default CategorizeProvider;

package/dist/delivery/categorize/index.js

@@ -0,0 +1,317 @@
+import e from "./choice.js";
+import { Choices as t } from "./choices.js";
+import { Categories as n } from "./categories.js";
+import { closestDroppableKeyboardCoordinates as r } from "./keyboard-coordinates.js";
+import i from "react";
+import { renderMath as a } from "@pie-element/shared-math-rendering-mathjax";
+import * as o from "@pie-lib/render-ui";
+import { Collapsible as s, Feedback as c, PreviewPrompt as l, UiLayout as u, color as d, hasMedia as f, hasText as p } from "@pie-lib/render-ui";
+import m from "prop-types";
+import h from "debug";
+import { styled as g } from "@mui/material/styles";
+import { DragOverlay as _ } from "@dnd-kit/core";
+import v from "@pie-lib/correct-answer-toggle";
+import { buildState as y, moveChoiceToCategory as b, removeChoiceFromCategory as x } from "@pie-lib/categorize";
+import { DragProvider as S, uid as C } from "@pie-lib/drag";
+import { jsx as w, jsxs as T } from "react/jsx-runtime";
+import E from "@pie-lib/translator";
+import { AlertDialog as D } from "@pie-lib/config-ui";
+//#region src/delivery/categorize/index.tsx
+function O(e) {
+	return typeof e == "function" || typeof e == "object" && !!e && typeof e.$$typeof == "symbol";
+}
+function k(e, t) {
+	return !e || O(e) ? e : O(e.default) ? e.default : t && O(e[t]) ? e[t] : t && O(e[t]?.default) ? e[t].default : e;
+}
+var A = k(u, "UiLayout") || k(I.UiLayout, "UiLayout"), j = k(l, "PreviewPrompt") || k(I.PreviewPrompt, "PreviewPrompt"), M = k(s, "Collapsible") || k(I.Collapsible, "Collapsible"), N = k(c, "Feedback") || k(I.Feedback, "Feedback"), P = o, F = P.default, I = F && typeof F == "object" ? F : P, { translator: L } = E, R = h("@pie-ui:categorize"), z = "choices-board", B = 250, V = class extends i.Component {
+	static propTypes = { children: m.node };
+	containerRef = i.createRef();
+	componentDidMount() {
+		this.containerRef.current && a(this.containerRef.current);
+	}
+	render() {
+		return /* @__PURE__ */ w("div", {
+			ref: this.containerRef,
+			children: this.props.children
+		});
+	}
+}, H = class extends i.Component {
+	static propTypes = {
+		model: m.object,
+		session: m.shape({ answers: m.arrayOf(m.shape({
+			choice: m.string,
+			category: m.string
+		})) }),
+		onAnswersChange: m.func.isRequired,
+		onShowCorrectToggle: m.func.isRequired,
+		pauseMathObserver: m.func,
+		resumeMathObserver: m.func,
+		selectedItem: m.object,
+		onSelectClick: m.func,
+		onPlacementClick: m.func
+	};
+	static defaultProps = { disabled: !1 };
+	constructor(e) {
+		super(e), this.state = {
+			showCorrect: !1,
+			showMaxChoiceAlert: !1
+		};
+	}
+	removeChoice = (e) => {
+		R("[removeChoice]: ", e);
+		let { onAnswersChange: t, session: n } = this.props;
+		t(x(e.id, e.categoryId, e.choiceIndex, n.answers));
+	};
+	dropChoice = (e, t) => {
+		let { session: n, onAnswersChange: r, model: i } = this.props, { maxChoicesPerCategory: a = 0 } = i || {}, { answers: o = [] } = n || {}, s;
+		t ? R("[dropChoice] category: ", t.categoryId, "choice: ", t) : R("[dropChoice] category: ", void 0, "choice: ", void 0);
+		let c = o.find((t) => t.category === e);
+		t && a === 1 && c && c.choices && c.choices.length === 1 ? (s = b(t.id, t.categoryId, e, t.choiceIndex, o), s = x(c.choices[0], e, 0, s)) : t && a > 1 && c && c.choices && c.choices.length === a ? (s = t.categoryId ? b(t.id, t.categoryId, t.categoryId, t.choiceIndex, o) : x(t.id, t.categoryId, t.choiceIndex, o), this.setState({ showMaxChoiceAlert: !0 })) : a !== 0 && c && c.choices && c.choices.length > a ? (s = o, this.setState({ showMaxChoiceAlert: !0 })) : s = t ? b(t.id, t.categoryId, e, t.choiceIndex, o) : this.removeChoice(e), t && r(s);
+	};
+	UNSAFE_componentWillReceiveProps(e) {
+		let { model: t } = this.props, { model: n } = e;
+		t.note && t.language && t.language !== n.language && t.note === L.t("common:commonCorrectAnswerWithAlternates", { lng: t.language }) && (t.note = L.t("common:commonCorrectAnswerWithAlternates", { lng: n.language })), this.setState({ showCorrect: !1 });
+	}
+	toggleShowCorrect = () => this.setState({ showCorrect: !this.state.showCorrect }, () => {
+		this.props.onShowCorrectToggle();
+	});
+	getPositionDirection = (e) => {
+		let t;
+		switch (e) {
+			case "left":
+				t = "row-reverse";
+				break;
+			case "right":
+				t = "row";
+				break;
+			case "below":
+				t = "column";
+				break;
+			default:
+				t = "column-reverse";
+				break;
+		}
+		return t;
+	};
+	existAlternateResponse = (e) => e?.some((e) => e.alternateResponses?.length > 0);
+	render() {
+		let { model: e, session: r, selectedItem: a, onSelectClick: o, onPlacementClick: s } = this.props, { showCorrect: c, showMaxChoiceAlert: l } = this.state, { choicesPosition: u, extraCSSRules: d, note: m, showNote: h, env: g, language: _, maxChoicesPerCategory: b, autoplayAudioEnabled: x, customAudioButton: S } = e, { mode: C, role: E } = g || {}, O = u || "above", k = {
+			flexDirection: this.getPositionDirection(O),
+			gap: "8px"
+		}, { categories: A, choices: M, correct: P } = y(e.categories, e.choices, c ? e.correctResponse : r.answers, e.correctResponse);
+		R("[render] disabled: ", e.disabled);
+		let { rowLabels: F, categoriesPerRow: I, correctResponse: z, fontSizeFactor: B } = e, V = A && Math.ceil(A.length / I) || 0, H = this.existAlternateResponse(z) || !1, U = (c || C === "view" && E === "instructor") && h && m && H, J = L.t("translation:categorize:limitMaxChoicesPerCategory", {
+			lng: e.language,
+			maxChoicesPerCategory: b
+		}), Y = L.t("common:warning", { lng: e.language }), X = L.t("common:cancel", { lng: e.language }), Z = e.rationale && (p(e.rationale) || f(e.rationale));
+		return /* @__PURE__ */ T(W, {
+			extraCSSRules: d,
+			id: "main-container",
+			fontSizeFactor: B,
+			children: [
+				e.teacherInstructions && (p(e.teacherInstructions) || f(e.teacherInstructions)) && /* @__PURE__ */ w(i.Fragment, { children: /* @__PURE__ */ w(q, {
+					labels: {
+						hidden: "Show Teacher Instructions",
+						visible: "Hide Teacher Instructions"
+					},
+					children: /* @__PURE__ */ w(j, { prompt: e.teacherInstructions })
+				}) }),
+				e.prompt && /* @__PURE__ */ w(j, {
+					prompt: e.prompt,
+					autoplayAudioEnabled: x,
+					customAudioButton: S
+				}),
+				/* @__PURE__ */ w(v, {
+					show: c || P === !1,
+					toggled: c,
+					onToggle: this.toggleShowCorrect,
+					language: _
+				}),
+				/* @__PURE__ */ T(K, {
+					style: k,
+					children: [/* @__PURE__ */ w("div", {
+						style: {
+							display: "flex",
+							flex: 1
+						},
+						children: /* @__PURE__ */ w(n, {
+							model: e,
+							disabled: e.disabled,
+							categories: A,
+							onDropChoice: this.dropChoice,
+							onRemoveChoice: this.removeChoice,
+							rowLabels: (F || []).slice(0, V),
+							selectedItem: a,
+							onSelectClick: o,
+							onPlacementClick: s
+						})
+					}), /* @__PURE__ */ w(t, {
+						disabled: e.disabled,
+						model: e,
+						choices: M,
+						choicePosition: O,
+						onDropChoice: this.dropChoice,
+						onRemoveChoice: this.removeChoice,
+						correct: P,
+						selectedItem: a,
+						onSelectClick: o,
+						onPlacementClick: s
+					})]
+				}),
+				U && /* @__PURE__ */ w(G, { dangerouslySetInnerHTML: { __html: m } }),
+				Z && /* @__PURE__ */ w(q, {
+					labels: {
+						hidden: "Show Rationale",
+						visible: "Hide Rationale"
+					},
+					children: /* @__PURE__ */ w(j, { prompt: e.rationale })
+				}),
+				e.correctness && e.feedback && !c && /* @__PURE__ */ w(N, {
+					correctness: e.correctness,
+					feedback: e.feedback
+				}),
+				/* @__PURE__ */ w(D, {
+					title: Y,
+					text: J,
+					open: l,
+					onCloseText: X,
+					onClose: () => this.setState({ showMaxChoiceAlert: !1 })
+				})
+			]
+		});
+	}
+}, U = class extends i.Component {
+	static propTypes = {
+		model: m.object,
+		session: m.shape({ answers: m.arrayOf(m.shape({
+			choice: m.string,
+			category: m.string
+		})) }),
+		onAnswersChange: m.func.isRequired,
+		onShowCorrectToggle: m.func.isRequired,
+		pauseMathObserver: m.func,
+		resumeMathObserver: m.func
+	};
+	constructor(e) {
+		super(e), this.uid = C.generateId(), this.state = {
+			activeDragItem: null,
+			isValidDrop: !1,
+			selectedItem: null
+		}, this.lastDragEndAt = 0, this.isInternalDragCancel = !1;
+	}
+	onDragStart = (e) => {
+		let { active: t } = e, { pauseMathObserver: n } = this.props;
+		n && n(), t?.data?.current && this.setState({
+			activeDragItem: t.data.current,
+			isValidDrop: !1,
+			selectedItem: t.data.current
+		});
+	};
+	commitPlacement = (e, t) => {
+		if (this.categorizeRef) {
+			if (t === void 0 || t === z) {
+				e.categoryId && this.categorizeRef.removeChoice && this.categorizeRef.removeChoice(e);
+				return;
+			}
+			this.categorizeRef.dropChoice && this.categorizeRef.dropChoice(t, e);
+		}
+	};
+	onDragEnd = (e) => {
+		let { active: t, over: n } = e, { resumeMathObserver: r } = this.props, i = t?.data?.current, a = n?.data?.current, o = n && t && i && i.type === "choice" && a && a.itemType === "categorize";
+		if (this.setState({
+			activeDragItem: null,
+			isValidDrop: o,
+			selectedItem: null
+		}), r && r(), this.lastDragEndAt = Date.now(), !t || !i || i.type !== "choice") return;
+		let s = {
+			id: i.id,
+			categoryId: i.categoryId,
+			choiceIndex: i.choiceIndex,
+			value: i.value,
+			itemType: i.itemType
+		};
+		this.commitPlacement(s, n ? n.id : void 0);
+	};
+	onDragCancel = () => {
+		let { resumeMathObserver: e } = this.props;
+		this.setState({
+			activeDragItem: null,
+			isValidDrop: !1,
+			selectedItem: null
+		}), e && e(), this.isInternalDragCancel ? this.isInternalDragCancel = !1 : this.lastDragEndAt = Date.now();
+	};
+	isSameItem = (e, t) => !!e && !!t && e.id === t.id && e.categoryId === t.categoryId && e.choiceIndex === t.choiceIndex;
+	toggleItemSelection = (e) => {
+		this.setState((t) => ({ selectedItem: this.isSameItem(t.selectedItem, e) ? null : e }));
+	};
+	cancelSelection = () => {
+		this.setState({ selectedItem: null });
+	};
+	endAnyLiveKeyboardDrag = () => {
+		this.state.activeDragItem && (this.isInternalDragCancel = !0, document.dispatchEvent(new KeyboardEvent("keydown", {
+			code: "Escape",
+			bubbles: !0,
+			cancelable: !0
+		})), this.isInternalDragCancel = !1);
+	};
+	placeSelectedItem = (e) => {
+		let { selectedItem: t } = this.state;
+		t && (this.commitPlacement(t, e), this.cancelSelection(), this.endAnyLiveKeyboardDrag());
+	};
+	isClickSoonAfterDragEnd = () => Date.now() - this.lastDragEndAt < B;
+	onItemClick = (e) => {
+		this.isClickSoonAfterDragEnd() || (this.endAnyLiveKeyboardDrag(), this.toggleItemSelection(e));
+	};
+	onPlacementClick = (e) => {
+		this.isClickSoonAfterDragEnd() || this.placeSelectedItem(e);
+	};
+	renderDragOverlay = () => {
+		let { activeDragItem: t } = this.state, { model: n } = this.props;
+		if (!t) return null;
+		if (t.type === "choice") {
+			let r = n.choices?.find((e) => e.id === t.id);
+			if (r) return /* @__PURE__ */ w(e, {
+				id: r.id,
+				...r
+			}, r.id);
+		}
+		return null;
+	};
+	render() {
+		let { isValidDrop: e, selectedItem: t } = this.state, n = e ? null : void 0;
+		return /* @__PURE__ */ w(S, {
+			onDragStart: this.onDragStart,
+			onDragEnd: this.onDragEnd,
+			onDragCancel: this.onDragCancel,
+			keyboardCoordinateGetter: r,
+			keyboardCodes: {
+				start: ["Space", "Enter"],
+				cancel: ["Escape"],
+				end: ["Space", "Enter"]
+			},
+			children: /* @__PURE__ */ T(C.Provider, {
+				value: this.uid,
+				children: [/* @__PURE__ */ w(H, {
+					ref: (e) => this.categorizeRef = e,
+					...this.props,
+					selectedItem: t,
+					onSelectClick: this.onItemClick,
+					onPlacementClick: this.onPlacementClick
+				}), /* @__PURE__ */ w(_, {
+					dropAnimation: n,
+					children: /* @__PURE__ */ w(V, { children: this.renderDragOverlay() })
+				})]
+			})
+		});
+	}
+}, W = g(A)({
+	color: d.text(),
+	backgroundColor: d.background(),
+	position: "relative"
+}), G = g("div")(({ theme: e }) => ({ marginBottom: e.spacing(2) })), K = g("div")(({ theme: e }) => ({
+	marginBottom: e.spacing(1),
+	display: "flex",
+	flexDirection: "column"
+})), q = g(M)(({ theme: e }) => ({ paddingBottom: e.spacing(2) }));
+//#endregion
+export { H as Categorize, U as default };