@pie-element/multiple-choice 13.0.1 → 13.1.1-next.0

package/dist/print/index.js

@@ -0,0 +1,44 @@
+import e from "../delivery/main.js";
+import t from "../node_modules/.bun/lodash-es@4.17.23/node_modules/lodash-es/cloneDeep.js";
+import n from "../node_modules/.bun/lodash-es@4.17.23/node_modules/lodash-es/debounce.js";
+import r from "react";
+import { createRoot as i } from "react-dom/client";
+import a from "debug";
+import { renderMath as o } from "@pie-element/shared-math-rendering-mathjax";
+//#region src/print/index.tsx
+var s = a("pie-element:multiple-choice:print"), c = (e, n) => {
+	let r = n.role === "instructor";
+	return e.prompt = e.promptEnabled === !1 ? void 0 : e.prompt, e.teacherInstructions = r && e.teacherInstructionsEnabled !== !1 ? e.teacherInstructions : void 0, e.showTeacherInstructions = r, e.alwaysShowCorrect = r, e.mode = r ? "evaluate" : e.mode, e.disabled = !0, e.animationsDisabled = !0, e.lockChoiceOrder = !0, e.choicesLayout = e.choicesLayout || "vertical", e.choices = t(e.choices).map((t) => (t.rationale = r && e.rationaleEnabled !== !1 ? t.rationale : void 0, t.hideTick = r, t.feedback = void 0, t)), e.keyMode = e.choicePrefix || "letters", e;
+}, l = class extends HTMLElement {
+	constructor() {
+		super(), this._options = null, this._model = null, this._session = [], this._root = null, this._rerender = n(() => {
+			if (this._model && this._session) {
+				let t = c(this._model, this._options), n = this._options && r.createElement(e, {
+					model: t,
+					session: {},
+					options: this._options
+				});
+				this._root ||= i(this), this._root.render(n), requestAnimationFrame(() => {
+					requestAnimationFrame(() => {
+						s("render complete - render math"), o(this);
+					});
+				});
+			} else s("skip");
+		}, 50, {
+			leading: !1,
+			trailing: !0
+		});
+	}
+	set options(e) {
+		this._options = e;
+	}
+	set model(e) {
+		this._model = e, this._rerender();
+	}
+	connectedCallback() {}
+	disconnectedCallback() {
+		this._root && this._root.unmount();
+	}
+};
+//#endregion
+export { l as default };

package/package.json

@@ -1,45 +1,77 @@
 {
   "name": "@pie-element/multiple-choice",
-  "repository": "pie-framework/pie-elements",
-  "version": "13.0.1",
-  "publishConfig": {
-    "access": "public"
-  },
+  "version": "13.1.1-next.0",
+  "description": "React implementation of multiple-choice element synced from pie-elements",
   "dependencies": {
     "@emotion/react": "^11.14.0",
     "@emotion/style": "^0.8.0",
     "@mui/icons-material": "^7.3.4",
     "@mui/material": "^7.3.4",
-    "@pie-framework/pie-player-events": "^0.1.0",
-    "@pie-lib/correct-answer-toggle": "4.0.0",
-    "@pie-lib/math-rendering": "5.0.0",
-    "@pie-lib/render-ui": "6.0.0",
-    "@pie-lib/translator": "4.0.0",
+    "@pie-lib/correct-answer-toggle": "4.0.1",
+    "@pie-lib/render-ui": "6.0.1",
+    "@pie-lib/translator": "4.0.1",
     "classnames": "^2.2.5",
     "debug": "^4.1.1",
     "lodash-es": "^4.17.23",
     "prop-types": "^15.8.1",
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
-    "react-transition-group": "^4.4.5"
+    "react-transition-group": "^4.4.5",
+    "@pie-element/shared-configure-events": "0.1.0",
+    "@pie-lib/config-ui": "13.0.1",
+    "@pie-lib/editable-html-tip-tap": "2.0.1",
+    "@pie-element/shared-controller-utils": "0.1.0",
+    "@pie-element/shared-player-events": "0.1.0",
+    "@pie-element/shared-math-rendering-mathjax": "0.1.0"
   },
-  "gitHead": "70b44575d7ea20d6e4640d9c51c1593a23232be3",
-  "scripts": {
-    "postpublish": "../../scripts/postpublish"
+  "peerDependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
   },
-  "main": "lib/index.js",
-  "module": "src/index.js",
   "exports": {
     ".": {
-      "import": "./lib/index.js",
-      "require": "./lib/index.js",
-      "default": "./lib/index.js"
+      "development": "./src/index.ts",
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./delivery": {
+      "development": "./src/delivery/index.ts",
+      "types": "./dist/delivery/index.d.ts",
+      "default": "./dist/delivery/index.js"
+    },
+    "./author": {
+      "development": "./src/author/index.ts",
+      "types": "./dist/author/index.d.ts",
+      "default": "./dist/author/index.js"
     },
-    "./print": "./src/print.js",
-    "./configure/lib": {
-      "import": "./configure/lib/index.js",
-      "require": "./configure/lib/index.js",
-      "default": "./configure/lib/index.js"
+    "./controller": {
+      "development": "./src/controller/index.ts",
+      "types": "./dist/controller/index.d.ts",
+      "default": "./dist/controller/index.js"
+    },
+    "./print": {
+      "development": "./src/print/index.tsx",
+      "types": "./dist/print/index.d.ts",
+      "default": "./dist/print/index.js"
     }
+  },
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "sideEffects": false,
+  "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"
+  },
+  "scripts": {
+    "build": "bun x vite build && bun x vite build --config vite.config.iife.ts && bun x tsc --emitDeclarationOnly",
+    "dev": "bun x vite",
+    "demo": "bun x vite --mode demo",
+    "test": "bun x vitest run"
   }
 }

package/{configure/lib/defaults.js → src/author/defaults.ts}

@@ -1,14 +1,18 @@
-"use strict";
+// @ts-nocheck
+/**
+ * @synced-from pie-elements/packages/multiple-choice/configure/src/defaults.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.
+ */
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
 /** NOTE: teacherInstructions, studentInstructions, rationale & scoringType
  * functionalities are not defined yet - the value for those can belong to
  * model or to configure
  */
-var _default = exports.default = {
+export default {
   model: {
     choiceMode: 'checkbox',
     choicePrefix: 'letters',
@@ -28,144 +32,106 @@ var _default = exports.default = {
     teacherInstructionsEnabled: true,
     toolbarEditorPosition: 'bottom',
     selectedAnswerBackgroundColor: 'initial',
-    keyboardEventsEnabled: false
+    keyboardEventsEnabled: false,
   },
   configuration: {
     baseInputConfiguration: {
-      h3: {
-        disabled: true
-      },
-      audio: {
-        disabled: false
-      },
-      video: {
-        disabled: false
-      },
-      image: {
-        disabled: false
-      },
-      textAlign: {
-        disabled: true
-      },
-      showParagraphs: {
-        disabled: false
-      },
-      separateParagraphs: {
-        disabled: true
-      }
+      h3: { disabled: true },
+      audio: { disabled: false },
+      video: { disabled: false },
+      image: { disabled: false },
+      textAlign: { disabled: true },
+      showParagraphs: { disabled: false },
+      separateParagraphs: { disabled: true },
     },
     choices: {
       inputConfiguration: {
-        audio: {
-          disabled: false
-        },
-        video: {
-          disabled: false
-        },
-        image: {
-          disabled: false
-        }
-      }
+        audio: { disabled: false },
+        video: { disabled: false },
+        image: { disabled: false },
+      },
     },
     spellCheck: {
       label: 'Spellcheck',
       settings: false,
-      enabled: true
+      enabled: true,
     },
     choicesLayout: {
       settings: false,
-      label: 'Choices Layout'
+      label: 'Choices Layout',
     },
     gridColumns: {
-      label: 'Grid columns'
+      label: 'Grid columns',
     },
     answerChoiceCount: 0,
     addChoiceButton: {
       settings: true,
-      label: 'Add a Choice'
+      label: 'Add a Choice',
     },
     choiceMode: {
       settings: true,
-      label: 'Response Type'
+      label: 'Response Type',
     },
     choicePrefix: {
       settings: true,
-      label: 'Choice Labels'
+      label: 'Choice Labels',
     },
     deleteChoice: {
-      settings: true
+      settings: true,
     },
     feedback: {
       settings: true,
-      label: 'Feedback'
+      label: 'Feedback',
     },
     prompt: {
       settings: true,
       label: 'Prompt',
       inputConfiguration: {
-        audio: {
-          disabled: false
-        },
-        video: {
-          disabled: false
-        },
-        image: {
-          disabled: false
-        }
+        audio: { disabled: false },
+        video: { disabled: false },
+        image: { disabled: false },
       },
-      required: false
+      required: false,
     },
     lockChoiceOrder: {
       settings: true,
-      label: 'Lock Choice Order'
+      label: 'Lock Choice Order',
     },
     partialScoring: {
       settings: false,
-      label: 'Allow Partial Scoring'
+      label: 'Allow Partial Scoring',
     },
     rationale: {
       settings: true,
       label: 'Rationale',
       inputConfiguration: {
-        audio: {
-          disabled: true
-        },
-        video: {
-          disabled: true
-        },
-        image: {
-          disabled: false
-        }
+        audio: { disabled: true },
+        video: { disabled: true },
+        image: { disabled: false },
       },
-      required: false
+      required: false,
     },
     scoringType: {
       settings: false,
-      label: 'Scoring Type'
+      label: 'Scoring Type',
     },
     studentInstructions: {
       settings: false,
-      label: 'Student Instructions'
+      label: 'Student Instructions',
     },
     teacherInstructions: {
       settings: true,
       label: 'Teacher Instructions',
       inputConfiguration: {
-        audio: {
-          disabled: false
-        },
-        video: {
-          disabled: false
-        },
-        image: {
-          disabled: false
-        }
+        audio: { disabled: false },
+        video: { disabled: false },
+        image: { disabled: false },
       },
-      required: false
+      required: false,
     },
     toolbarEditorPosition: {
       settings: false,
-      label: 'Toolbar Editor Position'
+      label: 'Toolbar Editor Position',
     },
     minAnswerChoices: 2,
     maxAnswerChoices: 5,
@@ -173,31 +139,30 @@ var _default = exports.default = {
       teacherInstructions: 300,
       prompt: 300,
       rationale: 636,
-      choices: 900
+      choices: 900,
     },
     maxImageHeight: {
       teacherInstructions: 300,
       prompt: 300,
       rationale: 300,
-      choices: 300
+      choices: 300,
     },
     withRubric: {
       settings: false,
-      label: 'Add Rubric'
+      label: 'Add Rubric',
     },
     mathMlOptions: {
       mmlOutput: false,
-      mmlEditing: false
+      mmlEditing: false,
     },
     language: {
       settings: false,
       label: 'Specify Language',
-      enabled: false
+      enabled: false,
     },
     languageChoices: {
       label: 'Language Choices',
-      options: []
-    }
-  }
+      options: [],
+    },
+  },
 };
-//# sourceMappingURL=defaults.js.map

package/{configure/lib/index.js → src/author/index.ts}

@@ -1,67 +1,107 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _react = _interopRequireDefault(require("react"));
-var _client = require("react-dom/client");
-var _debug = _interopRequireDefault(require("debug"));
-var _pieConfigureEvents = require("@pie-framework/pie-configure-events");
-var _main = _interopRequireDefault(require("./main"));
-var _configUi = require("@pie-lib/config-ui");
-var _lodashEs = require("lodash-es");
-var _defaults = _interopRequireDefault(require("./defaults"));
-const log = (0, _debug.default)('multiple-choice:configure');
+// @ts-nocheck
+/**
+ * @synced-from pie-elements/packages/multiple-choice/configure/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 React from 'react';
+import { createRoot } from 'react-dom/client';
+import debug from 'debug';
+import {
+  DeleteImageEvent,
+  InsertImageEvent,
+  ModelUpdatedEvent,
+  InsertSoundEvent,
+  DeleteSoundEvent,
+} from '@pie-element/shared-configure-events';
+
+import Main from './main.js';
+import { choiceUtils as utils } from '@pie-lib/config-ui';
+import { defaults } from 'lodash-es';
+
+import sensibleDefaults from './defaults.js';
+
+const log = debug('multiple-choice:configure');
+
 const generateFormattedChoices = (choices, choiceCount = 0) => {
   if (!choices || choices.length === 0) {
     let formattedChoices = [];
+
     for (let i = 0; i < choiceCount; i++) {
       formattedChoices.push({
         value: `${i}`,
         label: '',
         feedback: {
           type: 'none',
-          value: ''
-        }
+          value: '',
+        },
       });
     }
+
     return formattedChoices;
   }
+
   return choices;
 };
+
 const prepareCustomizationObject = (config, model) => {
-  const configuration = (0, _lodashEs.defaults)(config, _defaults.default.configuration);
+  const configuration = defaults(config, sensibleDefaults.configuration);
+
   return {
     configuration,
     model: {
       ...model,
-      choices: generateFormattedChoices(model && model.choices || [], configuration && configuration.answerChoiceCount)
-    }
+      choices: generateFormattedChoices(
+        (model && model.choices) || [],
+        configuration && configuration.answerChoiceCount,
+      ),
+    },
   };
 };
-class MultipleChoice extends HTMLElement {
+
+export default class MultipleChoice extends HTMLElement {
+  static createDefaultModel = (model = {}) => {
+    const normalizedModel = utils.normalizeChoices({
+      ...sensibleDefaults.model,
+      ...model,
+      choices: generateFormattedChoices((model && model.choices) || []),
+    });
+
+    // This is used for offering support for old models which have the property "verticalMode"
+    normalizedModel.choicesLayout =
+      model.choicesLayout || (model.verticalMode === false && 'horizontal') || sensibleDefaults.model.choicesLayout;
+
+    return normalizedModel;
+  };
+
   constructor() {
     super();
     this._root = null;
     this._reactContainer = null;
     this._model = MultipleChoice.createDefaultModel();
-    this._configuration = _defaults.default.configuration;
+    this._configuration = sensibleDefaults.configuration;
     this.onModelChanged = this.onModelChanged.bind(this);
     this.onConfigurationChanged = this.onConfigurationChanged.bind(this);
   }
+
   set model(s) {
     this._model = MultipleChoice.createDefaultModel(s);
+
     this._render();
   }
+
   set configuration(c) {
     const info = prepareCustomizationObject(c, this._model);
+
     this.onModelChanged(info.model);
+
     const newConfiguration = {
-      ..._defaults.default.configuration,
-      ...info.configuration
+      ...sensibleDefaults.configuration,
+      ...info.configuration,
     };
     this._configuration = newConfiguration;
 
@@ -75,64 +115,79 @@ class MultipleChoice extends HTMLElement {
       }
     } else if (newConfiguration.language.settings && this._model.language) {
       this._configuration.language.enabled = true;
+
       if (!this._configuration.languageChoices.options || !this._configuration.languageChoices.options.length) {
         this._configuration.languageChoices.options = [];
       }
 
       // check if the language is already included in the languageChoices.options array
       // and if not, then add it.
-      if (!this._configuration.languageChoices.options.find(option => option.value === this._model.language)) {
+      if (!this._configuration.languageChoices.options.find((option) => option.value === this._model.language)) {
         this._configuration.languageChoices.options.push({
           value: this._model.language,
-          label: this._model.language
+          label: this._model.language,
         });
       }
     } else {
       delete this._model.language;
     }
+
     this._render();
   }
+
   set disableSidePanel(s) {
     this._disableSidePanel = s;
     this._render();
   }
+
   dispatchModelUpdated(reset) {
     const resetValue = !!reset;
-    this.dispatchEvent(new _pieConfigureEvents.ModelUpdatedEvent(this._model, resetValue));
+
+    this.dispatchEvent(new ModelUpdatedEvent(this._model, resetValue));
   }
+
   onModelChanged(m, reset) {
     this._model = m;
     this._render();
+
     this.dispatchModelUpdated(reset);
   }
+
   onConfigurationChanged(c) {
     this._configuration = prepareCustomizationObject(c, this._model).configuration;
+
     if (this._model) {
       this.onModelChanged(this._model);
     }
+
     this._render();
   }
 
   /** @param {done, progress, file} handler */
   insertImage(handler) {
-    this.dispatchEvent(new _pieConfigureEvents.InsertImageEvent(handler));
+    this.dispatchEvent(new InsertImageEvent(handler));
   }
+
   onDeleteImage(src, done) {
-    this.dispatchEvent(new _pieConfigureEvents.DeleteImageEvent(src, done));
+    this.dispatchEvent(new DeleteImageEvent(src, done));
   }
+
   insertSound(handler) {
-    this.dispatchEvent(new _pieConfigureEvents.InsertSoundEvent(handler));
+    this.dispatchEvent(new InsertSoundEvent(handler));
   }
+
   onDeleteSound(src, done) {
-    this.dispatchEvent(new _pieConfigureEvents.DeleteSoundEvent(src, done));
+    this.dispatchEvent(new DeleteSoundEvent(src, done));
   }
+
   _render() {
     log('_render - Starting render');
     log('_render - Model:', this._model ? 'present' : 'missing');
     log('_render - Configuration:', this._configuration ? 'present' : 'missing');
     log('_render - Root exists:', !!this._root);
+
     try {
-      let element = /*#__PURE__*/_react.default.createElement(_main.default, {
+      let element = React.createElement(Main, {
         model: this._model,
         configuration: this._configuration,
         onModelChanged: this.onModelChanged,
@@ -140,13 +195,14 @@ class MultipleChoice extends HTMLElement {
         disableSidePanel: this._disableSidePanel,
         imageSupport: {
           add: this.insertImage.bind(this),
-          delete: this.onDeleteImage.bind(this)
+          delete: this.onDeleteImage.bind(this),
         },
         uploadSoundSupport: {
           add: this.insertSound.bind(this),
-          delete: this.onDeleteSound.bind(this)
-        }
+          delete: this.onDeleteSound.bind(this),
+        },
       });
+
       if (!this._root) {
         log('_render - Creating React container');
 
@@ -154,10 +210,12 @@ class MultipleChoice extends HTMLElement {
         this._reactContainer = document.createElement('div');
         this._reactContainer.className = 'pie-configure-wrapper';
         this.appendChild(this._reactContainer);
+
         log('_render - Creating new React root');
-        this._root = (0, _client.createRoot)(this._reactContainer);
+        this._root = createRoot(this._reactContainer);
         log('_render - React root created successfully');
       }
+
       log('_render - Calling root.render()');
       this._root.render(element);
       log('_render - Render completed successfully');
@@ -167,11 +225,13 @@ class MultipleChoice extends HTMLElement {
       throw error;
     }
   }
+
   connectedCallback() {
     log('connectedCallback - Component connected to DOM');
     log('connectedCallback - Model:', this._model ? 'present' : 'missing');
     log('connectedCallback - Configuration:', this._configuration ? 'present' : 'missing');
   }
+
   disconnectedCallback() {
     log('disconnectedCallback - Component disconnected from DOM');
     if (this._root) {
@@ -184,16 +244,3 @@ class MultipleChoice extends HTMLElement {
     }
   }
 }
-exports.default = MultipleChoice;
-(0, _defineProperty2.default)(MultipleChoice, "createDefaultModel", (model = {}) => {
-  const normalizedModel = _configUi.choiceUtils.normalizeChoices({
-    ..._defaults.default.model,
-    ...model,
-    choices: generateFormattedChoices(model && model.choices || [])
-  });
-
-  // This is used for offering support for old models which have the property "verticalMode"
-  normalizedModel.choicesLayout = model.choicesLayout || model.verticalMode === false && 'horizontal' || _defaults.default.model.choicesLayout;
-  return normalizedModel;
-});
-//# sourceMappingURL=index.js.map