@mathscan/math-exercise-engine 1.2.11 → 1.2.13

package/dist/{index-C3qDr71I.js → index-CbKXPRsS.js}

@@ -17160,12 +17160,17 @@ function getTextInputs(container) {
 function canTakeInput(el) {
   return !el.readOnly && !el.disabled;
 }
+function canAdvanceTo(el) {
+  return !el.disabled && el.tabIndex >= 0;
+}
 function findNextInput(container, currentKey) {
   const inputs = getTextInputs(container);
   const currentIndex = inputs.findIndex((el) => el.id === getInputElementId(currentKey));
   if (currentIndex === -1) return null;
-  return inputs.slice(currentIndex + 1).find(canTakeInput) ?? null;
+  return inputs.slice(currentIndex + 1).find(canAdvanceTo) ?? null;
 }
+const KeypadContext = React.createContext(false);
+const useHasKeypad = () => React.useContext(KeypadContext);
 const InlineInput = ({
   widgetId,
   value,
@@ -17182,6 +17187,7 @@ const InlineInput = ({
 }) => {
   const playSound = useSound();
   const locked = useExerciseLocked();
+  const hasKeypad = useHasKeypad();
   const handleChange = React.useCallback((newValue, fromDrop = false, sourceOptionId) => {
     onChange(widgetId, newValue, fromDrop, sourceOptionId);
   }, [onChange, widgetId]);
@@ -17236,6 +17242,7 @@ const InlineInput = ({
             },
             onFocus: () => onFocus?.(widgetId),
             readOnly: locked,
+            inputMode: hasKeypad ? "none" : void 0,
             disabled,
             maxLength: expectedLength,
             style: { width: dynamicWidth },
@@ -17438,6 +17445,7 @@ const FractionInput = ({
 }) => {
   const playSound = useSound();
   const locked = useExerciseLocked();
+  const hasKeypad = useHasKeypad();
   const numKey = getFractionKey(widgetId, "num");
   const denKey = getFractionKey(widgetId, "den");
   const numValue = values[numKey] ?? "";
@@ -17491,6 +17499,7 @@ const FractionInput = ({
             },
             onFocus: () => onFocus?.(subKey),
             readOnly: locked,
+            inputMode: hasKeypad ? "none" : void 0,
             maxLength: placeholder ? Math.max(20, placeholder.length) : 4,
             size: placeholder ? placeholder.length : void 0,
             "aria-label": label,
@@ -19701,7 +19710,7 @@ function isGeometryWidget(widget) {
   return widget.type === JSON_TYPES.GEOMETRY;
 }
 const GeometryWidget = React.lazy(async () => ({
-  default: (await Promise.resolve().then(() => require("./GeometryWidget-BTPjXJz-.js"))).GeometryWidget
+  default: (await Promise.resolve().then(() => require("./GeometryWidget-CMJTNSAG.js"))).GeometryWidget
 }));
 const WidgetRenderer = ({
   widget,
@@ -22397,6 +22406,7 @@ const TOOL_ASPECT_RATIO = {
   "set-square": SET_SQUARE_ASPECT_RATIO
 };
 const FLIP_BTN_EXTRA = 44;
+const INPUT_FINISH_IDLE_MS = 1e3;
 function warnOnInvalidThemeColors(theme) {
   if (process.env.NODE_ENV === "production" || !theme) return;
   if (typeof CSS === "undefined" || typeof CSS.supports !== "function") return;
@@ -22434,6 +22444,9 @@ function hasJustFilledBox(json, key2, previous, value) {
   if (maxLength === void 0) return false;
   return String(previous ?? "").length < maxLength && String(value).length >= maxLength;
 }
+function isTypedInputKey(json, key2) {
+  return json.widgets[key2]?.type === JSON_TYPES.INLINE_INPUT || Boolean(parseFractionKey(key2));
+}
 function buildInitialValuesSignature(json) {
   return JSON.stringify({
     widgets: json.widgets,
@@ -22519,6 +22532,24 @@ const ExerciseRenderer = React.forwardRef(({
   const valuesRef = React.useRef(values);
   valuesRef.current = values;
   const touchedRef = React.useRef(/* @__PURE__ */ new Set());
+  const pendingRef = React.useRef(/* @__PURE__ */ new Map());
+  const onChangeRef = React.useRef(onChange);
+  onChangeRef.current = onChange;
+  const clearPending = (key2) => {
+    const timer = pendingRef.current.get(key2);
+    if (timer === void 0) return false;
+    clearTimeout(timer);
+    pendingRef.current.delete(key2);
+    return true;
+  };
+  const clearAllPending = () => {
+    pendingRef.current.forEach((timer) => clearTimeout(timer));
+    pendingRef.current = /* @__PURE__ */ new Map();
+  };
+  const finishPending = (key2) => {
+    if (clearPending(key2)) onChangeRef.current?.(valuesRef.current);
+  };
+  React.useEffect(() => clearAllPending, []);
   const [loadedValuesSignature, setLoadedValuesSignature] = React.useState(initialValuesSignature);
   const [droppedSources, setDroppedSources] = React.useState(/* @__PURE__ */ new Map());
   const [focusedInputId, setFocusedInputId] = React.useState(null);
@@ -22549,11 +22580,13 @@ const ExerciseRenderer = React.forwardRef(({
     setLoadedValuesSignature(initialValuesSignature);
     touchedRef.current = /* @__PURE__ */ new Set();
     setTutorialRun(null);
+    clearAllPending();
   }, [json, initialValuesSignature, loadedValuesSignature]);
   const locked = validationDetails !== null || externallyLocked;
   const lastResultRef = React.useRef(null);
   const runSubmit = () => {
     if (locked) return lastResultRef.current ?? validate(json, values);
+    clearAllPending();
     const result = validate(json, values);
     playSound(result.isCorrect ? "answer-correct" : "answer-wrong");
     const details = { ...result.details };
@@ -22591,6 +22624,11 @@ const ExerciseRenderer = React.forwardRef(({
       for (const id of answerable) {
         if (!touchedRef.current.has(id)) missingSet.add(id);
       }
+      const isAnyFilled = answerable.some((id) => !missingSet.has(id));
+      for (const key2 of pendingRef.current.keys()) {
+        const id = toBaseId(key2);
+        if (answerable.includes(id)) missingSet.add(id);
+      }
       const missing = [...missingSet];
       const filledIds = answerable.filter((id) => !missingSet.has(id));
       return {
@@ -22599,7 +22637,7 @@ const ExerciseRenderer = React.forwardRef(({
         missing,
         filledIds,
         isComplete: answerable.length > 0 && missing.length === 0,
-        isAnyFilled: filledIds.length > 0
+        isAnyFilled
       };
     },
     reset: () => {
@@ -22613,10 +22651,12 @@ const ExerciseRenderer = React.forwardRef(({
       setRevealed(false);
       setLoadedValuesSignature(initialValuesSignature);
       touchedRef.current = /* @__PURE__ */ new Set();
+      clearAllPending();
     },
     revealAnswers: () => {
       const revealedValues = buildRevealedValues(json);
       if (Object.keys(revealedValues).length === 0) return;
+      clearAllPending();
       playSound("answer-reveal");
       const details = {};
       for (const [widgetId, userValue] of Object.entries(revealedValues)) {
@@ -22645,6 +22685,7 @@ const ExerciseRenderer = React.forwardRef(({
       target?.focus();
     },
     hasTutorial: () => tutorial !== null,
+    tutorialId: () => tutorial?.id ?? null,
     startTutorial: (options = {}) => {
       if (!tutorial || !rootRef.current) return false;
       setTutorialRun((prev) => ({ options, run: (prev?.run ?? 0) + 1 }));
@@ -22675,11 +22716,28 @@ const ExerciseRenderer = React.forwardRef(({
       }
       return next2;
     });
+    if (!silent && isTypedInputKey(json, widgetId)) {
+      clearPending(widgetId);
+      const maxLength = getMaxInputLength(json, widgetId);
+      const isFull = maxLength !== void 0 && String(value).length >= maxLength;
+      if (!fromDrop && value !== "" && !isFull) {
+        pendingRef.current.set(
+          widgetId,
+          setTimeout(() => finishPending(widgetId), INPUT_FINISH_IDLE_MS)
+        );
+      }
+    }
     onChange?.(next);
     if (!fromDrop && !silent && hasJustFilledBox(json, widgetId, previous, value)) {
       focusNextInput(widgetId);
     }
   };
+  const handleInputFocus = (key2) => {
+    for (const pendingKey of [...pendingRef.current.keys()]) {
+      if (pendingKey !== key2) finishPending(pendingKey);
+    }
+    setFocusedInputId(key2);
+  };
   const handleSubmit = () => {
     runSubmit();
   };
@@ -22812,7 +22870,7 @@ const ExerciseRenderer = React.forwardRef(({
     if (setSquareWidget) add2("set-square-1", "set-square", Math.round(getSize(setSquareWidget) * 160));
     return { tools: list, toolsMinHeight: maxH };
   }, [rulerWidget, protractorWidget, setSquareWidget]);
-  return /* @__PURE__ */ jsxRuntime.jsx(SoundPlayerProvider, { play: playSound, children: /* @__PURE__ */ jsxRuntime.jsx(ExerciseLockProvider, { locked, children: /* @__PURE__ */ jsxRuntime.jsx(ExerciseDndProvider, { droppedSources, exerciseKey: loadedValuesSignature, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: rootRef, className: `math-exercise-renderer ${revealed ? "revealed" : ""} ${locked ? "locked" : ""} ${className}`, style: themeStyle, children: [
+  return /* @__PURE__ */ jsxRuntime.jsx(SoundPlayerProvider, { play: playSound, children: /* @__PURE__ */ jsxRuntime.jsx(ExerciseLockProvider, { locked, children: /* @__PURE__ */ jsxRuntime.jsx(ExerciseDndProvider, { droppedSources, exerciseKey: loadedValuesSignature, children: /* @__PURE__ */ jsxRuntime.jsx(KeypadContext.Provider, { value: Boolean(numericKeypadWidget), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: rootRef, className: `math-exercise-renderer ${revealed ? "revealed" : ""} ${locked ? "locked" : ""} ${className}`, style: themeStyle, children: [
     /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
@@ -22837,7 +22895,7 @@ const ExerciseRenderer = React.forwardRef(({
                       droppedInputs,
                       validationDetails,
                       onChange: handleChange,
-                      onInputFocus: setFocusedInputId,
+                      onInputFocus: handleInputFocus,
                       resetKey
                     },
                     item.id
@@ -22853,7 +22911,7 @@ const ExerciseRenderer = React.forwardRef(({
                       droppedInputs,
                       validationDetails,
                       onChange: handleChange,
-                      onInputFocus: setFocusedInputId,
+                      onInputFocus: handleInputFocus,
                       resetKey
                     },
                     item.id
@@ -22870,7 +22928,7 @@ const ExerciseRenderer = React.forwardRef(({
                     droppedInputs,
                     validationDetails,
                     onChange: handleChange,
-                    onInputFocus: setFocusedInputId,
+                    onInputFocus: handleInputFocus,
                     resetKey
                   },
                   item.id
@@ -22888,9 +22946,10 @@ const ExerciseRenderer = React.forwardRef(({
               onChange: () => {
               },
               onKeypadChange: (newValue) => {
-                if (focusedInputId) {
-                  handleChange(focusedInputId, newValue, false);
-                }
+                if (!focusedInputId) return;
+                const maxLength = getMaxInputLength(json, focusedInputId);
+                if (maxLength !== void 0 && newValue.length > maxLength) return;
+                handleChange(focusedInputId, newValue, false);
               }
             }
           ) }),
@@ -22923,7 +22982,7 @@ const ExerciseRenderer = React.forwardRef(({
       },
       tutorialRun.run
     )
-  ] }) }) }) });
+  ] }) }) }) }) });
 });
 ExerciseRenderer.displayName = "ExerciseRenderer";
 function renderExercise(options) {
@@ -23267,4 +23326,4 @@ exports.validateUniqueIds = validateUniqueIds;
 exports.validateVisualFractionCapacity = validateVisualFractionCapacity;
 exports.validateWidgetJSON = validateWidgetJSON;
 exports.validateWidgetJSONSafe = validateWidgetJSONSafe;
-//# sourceMappingURL=index-C3qDr71I.js.map
+//# sourceMappingURL=index-CbKXPRsS.js.map