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

package/{lib/index.js → src/delivery/index.ts}

@@ -1,26 +1,55 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.isComplete = exports.default = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _main = _interopRequireDefault(require("./main"));
-var _react = _interopRequireDefault(require("react"));
-var _client = require("react-dom/client");
-var _lodashEs = require("lodash-es");
-var _debug = _interopRequireDefault(require("debug"));
-var _piePlayerEvents = require("@pie-framework/pie-player-events");
-var _mathRendering = require("@pie-lib/math-rendering");
-var _renderUi = require("@pie-lib/render-ui");
-var _sessionUpdater = require("./session-updater");
-const log = (0, _debug.default)('pie-ui:multiple-choice');
-const isComplete = (session, model, audioComplete, elementContext) => {
-  const {
-    autoplayAudioEnabled,
-    completeAudioEnabled
-  } = model || {};
+// @ts-nocheck
+/**
+ * @synced-from pie-elements/packages/multiple-choice/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 Main from './main.js';
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import { debounce } from 'lodash-es';
+import debug from 'debug';
+import { ModelSetEvent, SessionChangedEvent } from '@pie-element/shared-player-events';
+import { renderMath } from '@pie-element/shared-math-rendering-mathjax';
+import { EnableAudioAutoplayImage as EnableAudioAutoplayImageImport } from '@pie-lib/render-ui';
+
+function isRenderableReactInteropType(value: any) {
+  return (
+    typeof value === 'function' ||
+    (typeof value === 'object' && value !== null && typeof value.$$typeof === 'symbol')
+  );
+}
+
+function unwrapReactInteropSymbol(maybeSymbol: any, namedExport?: string) {
+  if (!maybeSymbol) return maybeSymbol;
+  if (isRenderableReactInteropType(maybeSymbol)) return maybeSymbol;
+  if (isRenderableReactInteropType(maybeSymbol.default)) return maybeSymbol.default;
+  if (namedExport && isRenderableReactInteropType(maybeSymbol[namedExport])) {
+    return maybeSymbol[namedExport];
+  }
+  if (namedExport && isRenderableReactInteropType(maybeSymbol[namedExport]?.default)) {
+    return maybeSymbol[namedExport].default;
+  }
+  return maybeSymbol;
+}
+const EnableAudioAutoplayImage = unwrapReactInteropSymbol(EnableAudioAutoplayImageImport, 'EnableAudioAutoplayImage') || unwrapReactInteropSymbol(renderUi.EnableAudioAutoplayImage, 'EnableAudioAutoplayImage');
+import * as RenderUiNamespace from '@pie-lib/render-ui';
+const renderUiNamespaceAny = RenderUiNamespace as any;
+const renderUiDefaultMaybe = renderUiNamespaceAny['default'];
+const renderUi =
+  renderUiDefaultMaybe && typeof renderUiDefaultMaybe === 'object'
+    ? renderUiDefaultMaybe
+    : renderUiNamespaceAny;
+import { updateSessionValue, updateSessionMetadata } from './session-updater.js';
+
+const log = debug('pie-ui:multiple-choice');
+
+export const isComplete = (session, model, audioComplete, elementContext) => {
+  const { autoplayAudioEnabled, completeAudioEnabled } = model || {};
 
   // check audio completion if audio settings are enabled and audio actually exists
   if (autoplayAudioEnabled && completeAudioEnabled && !audioComplete) {
@@ -34,89 +63,73 @@ const isComplete = (session, model, audioComplete, elementContext) => {
       }
     }
   }
+
   if (!session || !session.value) {
     return false;
   }
-  const {
-    choiceMode,
-    minSelections = 1,
-    maxSelections
-  } = model || {};
+
+  const { choiceMode, minSelections = 1, maxSelections } = model || {};
   const selections = session.value.length || 0;
+
   if (choiceMode === 'radio') {
     return !!selections;
   }
+
   if (selections < minSelections || selections > maxSelections) {
     return false;
   }
+
   return true;
 };
-exports.isComplete = isComplete;
+
 function getPlayerAttributes(element) {
-  const player = element.closest('pie-player') || element.closest('pie-item-player');
+  const player =
+    element.closest('pie-player') ||
+    element.closest('pie-item-player');
+
   if (!player) {
-    return {
-      baseHeadingLevel: undefined,
-      includeSrHeading: true
-    };
+    return { baseHeadingLevel: undefined, includeSrHeading: true };
   }
+
   const getRaw = (camelCaseName, hyphenatedName, allLowerName) => {
     let raw = player[camelCaseName];
 
     // fallback in case someone sets via HTML attribute manually
     if (raw == null) {
-      raw = player.getAttribute(hyphenatedName) ?? player.getAttribute(allLowerName);
+      raw =
+        player.getAttribute(hyphenatedName) ??
+        player.getAttribute(allLowerName);
     }
+
     return raw;
   };
+
   const levelRaw = getRaw('baseHeadingLevel', 'base-heading-level', 'baseheadinglevel');
   const level = parseInt(levelRaw, 10);
   const baseHeadingLevel = Number.isFinite(level) && level >= 1 && level <= 6 ? level : undefined;
+
   const srRaw = getRaw('includeSrHeading', 'include-sr-heading', 'includesrheading');
   const includeSrHeading = srRaw == null ? true : srRaw !== false && srRaw !== 'false';
-  console.log('getPlayerAttributes', {
-    baseHeadingLevel,
-    includeSrHeading
-  });
-  return {
-    baseHeadingLevel,
-    includeSrHeading
-  };
+
+  console.log('getPlayerAttributes', { baseHeadingLevel, includeSrHeading });
+  return { baseHeadingLevel, includeSrHeading };
 }
 
 // Resolves heading attributes for a custom element, preferring explicit instance
 // properties (set by a parent element such as EBSR) over player-level attributes.
 function resolveHeadingProps(element) {
   const fromPlayer = getPlayerAttributes(element);
+
   console.log('element._baseHeadingLevel', element._baseHeadingLevel, 'element._includeSrHeading', element._includeSrHeading);
   return {
     baseHeadingLevel: element._baseHeadingLevel !== undefined ? element._baseHeadingLevel : fromPlayer.baseHeadingLevel,
-    includeSrHeading: element._includeSrHeading !== undefined ? element._includeSrHeading : fromPlayer.includeSrHeading
+    includeSrHeading: element._includeSrHeading !== undefined ? element._includeSrHeading : fromPlayer.includeSrHeading,
   };
 }
-class MultipleChoice extends HTMLElement {
+
+export default class MultipleChoice extends HTMLElement {
   constructor() {
     super();
-    (0, _defineProperty2.default)(this, "_scheduleMathRender", () => {
-      if (this._mathRenderPending) return;
-      this._mathRenderPending = true;
-      requestAnimationFrame(() => {
-        if (this._mathObserver) {
-          this._mathObserver.disconnect();
-        }
-        log('render complete - render math');
-        (0, _mathRendering.renderMath)(this);
-        this._mathRenderPending = false;
-        setTimeout(() => {
-          if (this._mathObserver) {
-            this._mathObserver.observe(this, {
-              childList: true,
-              subtree: true
-            });
-          }
-        }, 50);
-      });
-    });
     this._model = null;
     this._session = null;
     this._options = null; // added for ebsr print mode detection
@@ -127,68 +140,111 @@ class MultipleChoice extends HTMLElement {
     this._root = null;
     this._mathObserver = null;
     this._mathRenderPending = false;
-    this._rerender = (0, _lodashEs.debounce)(() => {
-      if (this._model && this._session) {
-        var element = /*#__PURE__*/_react.default.createElement(_main.default, {
-          model: this._model,
-          session: this._session,
-          options: this._options,
-          onChoiceChanged: this._onChange.bind(this),
-          onShowCorrectToggle: this.onShowCorrectToggle.bind(this),
-          ...resolveHeadingProps(this)
-        });
-
-        //TODO: aria-label is set in the _rerender because we need to change it when the model.choiceMode is updated. Consider revisiting the placement of the aria-label setting in the _rerender
-        this.setAttribute('aria-label', this._model.choiceMode === 'radio' ? 'Multiple Choice Question' : 'Multiple Correct Answer Question');
-        this.setAttribute('role', 'region');
-        this.setLangAttribute();
-        this._initMathObserver();
-        if (!this._root) {
-          this._root = (0, _client.createRoot)(this);
-        }
-        this._root.render(element);
-        if (this._model.keyboardEventsEnabled === true && !this._keyboardEventsEnabled) {
-          this.enableKeyboardEvents();
+
+    this._rerender = debounce(
+      () => {
+        if (this._model && this._session) {
+          var element = React.createElement(Main, {
+            model: this._model,
+            session: this._session,
+            options: this._options,
+            onChoiceChanged: this._onChange.bind(this),
+            onShowCorrectToggle: this.onShowCorrectToggle.bind(this),
+            ...resolveHeadingProps(this),
+          });
+
+          //TODO: aria-label is set in the _rerender because we need to change it when the model.choiceMode is updated. Consider revisiting the placement of the aria-label setting in the _rerender
+          this.setAttribute(
+            'aria-label',
+            this._model.choiceMode === 'radio' ? 'Multiple Choice Question' : 'Multiple Correct Answer Question',
+          );
+          this.setAttribute('role', 'region');
+          this.setLangAttribute();
+
+          this._initMathObserver();
+
+          if (!this._root) {
+            this._root = createRoot(this);
+          }
+          this._root.render(element);
+
+          if (this._model.keyboardEventsEnabled === true && !this._keyboardEventsEnabled) {
+            this.enableKeyboardEvents();
+          }
+        } else {
+          log('skip');
         }
-      } else {
-        log('skip');
-      }
-    }, 50, {
-      leading: false,
-      trailing: true
-    });
-    this._dispatchResponseChanged = (0, _lodashEs.debounce)(() => {
-      this.dispatchEvent(new _piePlayerEvents.SessionChangedEvent(this.tagName.toLowerCase(), isComplete(this._session, this._model, this.audioComplete, this)));
-    });
-    this._dispatchModelSet = (0, _lodashEs.debounce)(() => {
-      this.dispatchEvent(new _piePlayerEvents.ModelSetEvent(this.tagName.toLowerCase(), isComplete(this._session, this._model, this.audioComplete, this), this._model !== undefined));
-    }, 50, {
-      leading: false,
-      trailing: true
+      },
+      50,
+      { leading: false, trailing: true },
+    );
+
+    this._dispatchResponseChanged = debounce(() => {
+      this.dispatchEvent(
+        new SessionChangedEvent(
+          this.tagName.toLowerCase(),
+          isComplete(this._session, this._model, this.audioComplete, this),
+        ),
+      );
     });
+
+    this._dispatchModelSet = debounce(
+      () => {
+        this.dispatchEvent(
+          new ModelSetEvent(
+            this.tagName.toLowerCase(),
+            isComplete(this._session, this._model, this.audioComplete, this),
+            this._model !== undefined,
+          ),
+        );
+      },
+      50,
+      { leading: false, trailing: true },
+    );
   }
+
+  _scheduleMathRender: any = () => {
+    if (this._mathRenderPending) return;
+    this._mathRenderPending = true;
+
+    requestAnimationFrame(() => {
+      if (this._mathObserver) {
+        this._mathObserver.disconnect();
+      }
+      log('render complete - render math');
+      renderMath(this);
+      this._mathRenderPending = false;
+      setTimeout(() => {
+        if (this._mathObserver) {
+          this._mathObserver.observe(this, { childList: true, subtree: true });
+        }
+      }, 50);
+    });
+  };
+
   _initMathObserver() {
     if (this._mathObserver) return;
     this._mathObserver = new MutationObserver(this._scheduleMathRender);
-    this._mathObserver.observe(this, {
-      childList: true,
-      subtree: true
-    });
+    this._mathObserver.observe(this, { childList: true, subtree: true });
   }
+
   _disconnectMathObserver() {
     if (this._mathObserver) {
       this._mathObserver.disconnect();
       this._mathObserver = null;
     }
   }
+
   onShowCorrectToggle() {
-    (0, _mathRendering.renderMath)(this);
+    renderMath(this);
   }
+
   setLangAttribute() {
     const language = this._model && typeof this._model.language ? this._model.language : '';
     const lang = language ? language.slice(0, 2) : 'en';
     this.setAttribute('lang', lang);
   }
+
   set model(s) {
     this._model = s;
     this._rerender();
@@ -196,38 +252,47 @@ class MultipleChoice extends HTMLElement {
     this._audioInitialized = false;
     this._dispatchModelSet();
   }
+
   get session() {
     return this._session;
   }
+
   get options() {
     return this._options;
   }
+
   set options(o) {
     this._options = o;
     this._rerender();
   }
+
   set baseHeadingLevel(level) {
     this._baseHeadingLevel = level;
     this._rerender();
   }
+
   set includeSrHeading(value) {
     this._includeSrHeading = value;
     this._rerender();
   }
+
   set session(s) {
     this._session = s;
     this._rerender();
     //TODO: remove this session-changed should only be emit on user change
     this._dispatchResponseChanged();
   }
+
   _onChange(data) {
-    (0, _sessionUpdater.updateSessionValue)(this._session, this._model.choiceMode, data);
+    updateSessionValue(this._session, this._model.choiceMode, data);
     this._dispatchResponseChanged();
     this._rerender();
   }
+
   _createAudioInfoToast() {
     const info = document.createElement('div');
     info.id = 'play-audio-info';
+
     Object.assign(info.style, {
       position: 'absolute',
       top: 0,
@@ -238,16 +303,19 @@ class MultipleChoice extends HTMLElement {
       alignItems: 'center',
       background: 'white',
       zIndex: '1000',
-      cursor: 'pointer'
+      cursor: 'pointer',
     });
+
     const img = document.createElement('img');
-    img.src = _renderUi.EnableAudioAutoplayImage;
+    img.src = EnableAudioAutoplayImage;
     img.alt = 'Click anywhere to enable audio autoplay';
     img.width = 500;
     img.height = 300;
+
     info.appendChild(img);
     return info;
   }
+
   connectedCallback() {
     this._initMathObserver();
     this._initPlayerObserver();
@@ -257,15 +325,18 @@ class MultipleChoice extends HTMLElement {
     // while other browsers will not have the autoplay attribute and will need a user interaction to play the audio
     // This workaround fixes the issue of audio being cached and played on any user interaction in Safari and Firefox
     const observer = new MutationObserver((mutationsList, observer) => {
-      mutationsList.forEach(mutation => {
+      mutationsList.forEach((mutation) => {
         if (mutation.type === 'childList') {
           if (this._audioInitialized) return;
+
           const audio = this.querySelector('audio');
           const isInsidePrompt = audio && audio.closest('#preview-prompt');
+
           if (!this._model) return;
           if (!this._model.autoplayAudioEnabled) return;
           if (audio && !isInsidePrompt) return;
           if (!audio) return;
+
           const info = this._createAudioInfoToast();
           const container = this.querySelector('#main-container');
           const enableAudio = () => {
@@ -273,6 +344,7 @@ class MultipleChoice extends HTMLElement {
               audio.play();
               container.removeChild(info);
             }
+
             document.removeEventListener('click', enableAudio);
           };
 
@@ -290,26 +362,26 @@ class MultipleChoice extends HTMLElement {
 
           // we need to listen for the playing event to remove the toast in case the audio plays because of re-rendering
           const handlePlaying = () => {
-            (0, _sessionUpdater.updateSessionMetadata)(this._session, {
-              audioStartTime: new Date().getTime()
-            });
+            updateSessionMetadata(this._session, { audioStartTime: new Date().getTime() });
+
             const info = this.querySelector('#play-audio-info');
             if (info) {
               container.removeChild(info);
             }
+
             audio.removeEventListener('playing', handlePlaying);
           };
+
           audio.addEventListener('playing', handlePlaying);
 
           // we need to listen for the ended event to update the isComplete state
           const handleEnded = () => {
-            (0, _sessionUpdater.updateSessionMetadata)(this._session, {
-              audioEndTime: new Date().getTime()
-            });
+            updateSessionMetadata(this._session, { audioEndTime: new Date().getTime() });
             this.audioComplete = true;
             this._dispatchResponseChanged();
             audio.removeEventListener('ended', handleEnded);
           };
+
           audio.addEventListener('ended', handleEnded);
 
           // store references to remove later
@@ -319,38 +391,42 @@ class MultipleChoice extends HTMLElement {
           this._enableAudio = enableAudio;
           // set to true to prevent multiple initializations
           this._audioInitialized = true;
+
           observer.disconnect();
         }
       });
     });
-    observer.observe(this, {
-      childList: true,
-      subtree: true
-    });
+
+    observer.observe(this, { childList: true, subtree: true });
   }
+
   enableKeyboardEvents() {
     if (!this._keyboardEventsEnabled) {
       window.addEventListener('keydown', this._boundHandleKeyDown);
       this._keyboardEventsEnabled = true;
     }
   }
+
   _initPlayerObserver() {
     const player = this.closest('pie-player') || this.closest('pie-item-player');
     if (!player) return;
+
     this._playerObserver = new MutationObserver(() => {
       this._rerender();
     });
     this._playerObserver.observe(player, {
       attributes: true,
-      attributeFilter: ['base-heading-level', 'baseheadinglevel', 'include-sr-heading', 'includesrheading']
+      attributeFilter: ['base-heading-level', 'baseheadinglevel', 'include-sr-heading', 'includesrheading'],
     });
   }
+
   _disconnectPlayerObserver() {
     if (this._playerObserver) {
       this._playerObserver.disconnect();
       this._playerObserver = null;
     }
   }
+
   disconnectedCallback() {
     this._disconnectMathObserver();
     this._disconnectPlayerObserver();
@@ -358,12 +434,15 @@ class MultipleChoice extends HTMLElement {
       window.removeEventListener('keydown', this._boundHandleKeyDown);
       this._keyboardEventsEnabled = false;
     }
+
     document.removeEventListener('click', this._enableAudio);
+
     if (this._audio) {
       this._audio.removeEventListener('playing', this._handlePlaying);
       this._audio.removeEventListener('ended', this._handleEnded);
       this._audio = null;
     }
+
     if (this._root) {
       this._root.unmount();
     }
@@ -378,30 +457,33 @@ class MultipleChoice extends HTMLElement {
     if (!this._model || !this._session) {
       return;
     }
-    const {
-      mode
-    } = this._model;
+
+    const { mode } = this._model;
     if (mode !== 'gather') {
       return;
     }
-    const keyToIndex = key => {
+
+    const keyToIndex = (key) => {
       const numOffset = key >= '1' && key <= '9' ? key - '1' : key === '0' ? 9 : -1;
       const letterOffset = /^[a-jA-J]$/.test(key) ? key.toLowerCase().charCodeAt(0) - 'a'.charCodeAt(0) : -1;
       return numOffset >= 0 ? numOffset : letterOffset;
     };
+
     const choiceIndex = keyToIndex(event.key);
+
     if (choiceIndex === undefined || choiceIndex <= -1 || choiceIndex >= this._model.choices?.length) {
       return;
     }
+
     const currentValue = this._session.value || [];
     const choiceId = this._model.choices[choiceIndex].value;
+
     const newValue = {
       value: choiceId,
       selected: !currentValue.includes(choiceId),
-      selector: 'Keyboard'
+      selector: 'Keyboard',
     };
+
     this._onChange(newValue);
   }
 }
-exports.default = MultipleChoice;
-//# sourceMappingURL=index.js.map

package/src/delivery/main.tsx

@@ -0,0 +1,85 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-elements/packages/multiple-choice/src/main.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 { PreviewLayout as PreviewLayoutImport } from '@pie-lib/render-ui';
+
+function isRenderableReactInteropType(value: any) {
+  return (
+    typeof value === 'function' ||
+    (typeof value === 'object' && value !== null && typeof value.$$typeof === 'symbol')
+  );
+}
+
+function unwrapReactInteropSymbol(maybeSymbol: any, namedExport?: string) {
+  if (!maybeSymbol) return maybeSymbol;
+  if (isRenderableReactInteropType(maybeSymbol)) return maybeSymbol;
+  if (isRenderableReactInteropType(maybeSymbol.default)) return maybeSymbol.default;
+  if (namedExport && isRenderableReactInteropType(maybeSymbol[namedExport])) {
+    return maybeSymbol[namedExport];
+  }
+  if (namedExport && isRenderableReactInteropType(maybeSymbol[namedExport]?.default)) {
+    return maybeSymbol[namedExport].default;
+  }
+  return maybeSymbol;
+}
+const PreviewLayout = unwrapReactInteropSymbol(PreviewLayoutImport, 'PreviewLayout') || unwrapReactInteropSymbol(renderUi.PreviewLayout, 'PreviewLayout');
+import * as RenderUiNamespace from '@pie-lib/render-ui';
+const renderUiNamespaceAny = RenderUiNamespace as any;
+const renderUiDefaultMaybe = renderUiNamespaceAny['default'];
+const renderUi =
+  renderUiDefaultMaybe && typeof renderUiDefaultMaybe === 'object'
+    ? renderUiDefaultMaybe
+    : renderUiNamespaceAny;
+import MultipleChoice from './multiple-choice.js';
+
+class Main extends React.Component {
+  static propTypes = {
+    model: PropTypes.object,
+    session: PropTypes.object,
+    options: PropTypes.object,
+    onChoiceChanged: PropTypes.func,
+    onShowCorrectToggle: PropTypes.func,
+    extraCSSRules: PropTypes.shape({
+      names: PropTypes.arrayOf(PropTypes.string),
+      rules: PropTypes.string,
+    }),
+    baseHeadingLevel: PropTypes.number,
+    includeSrHeading: PropTypes.bool,
+  };
+
+  static defaultProps = {
+    model: {},
+    session: {},
+  };
+
+  render() {
+    const { model, onChoiceChanged, session, onShowCorrectToggle, options, baseHeadingLevel, includeSrHeading } = this.props;
+    const { extraCSSRules, fontSizeFactor } = model;
+
+    // model.partLabel is a property used for ebsr
+    return (
+      <PreviewLayout extraCSSRules={extraCSSRules} fontSizeFactor={fontSizeFactor} classes={{}}>
+        <MultipleChoice
+          {...model}
+          options={options}
+          session={session}
+          onChoiceChanged={onChoiceChanged}
+          onShowCorrectToggle={onShowCorrectToggle}
+          baseHeadingLevel={baseHeadingLevel}
+          includeSrHeading={includeSrHeading}
+        />
+      </PreviewLayout>
+    );
+  }
+}
+
+export default Main;