eat-js-sdk 2.0.42 → 2.0.44

package/dist/interaction-builder.mjs

@@ -5114,6 +5114,15 @@ const CATEGORISE = {
   CONTAINER_WORD_BIN_ID: "container-word-bin",
   DASH: "@eat-dash@"
 };
+const DROPDOWN_POSITION = {
+  MIN_WIDTH: 240,
+  MAX_WIDTH: 500,
+  VIEWPORT_PADDING: 16
+};
+const DROPDOWN_INTERACTION = {
+  KEY_PRESS_TIMEOUT: 1e3,
+  PAGE_NAVIGATION_STEP: 10
+};
 const INTERACTION_TYPE_MAP = {
   [INTERACTION_TYPES.MCQ]: "mcq",
   [INTERACTION_TYPES.CATEGORISE]: "categorise",
@@ -5853,7 +5862,7 @@ function FeedbackAlert($$anchor, $$props) {
           }
         };
         if_block(node_1, ($$render) => {
-          if (showIcon() && type() !== "skipped") $$render(consequent);
+          if (showIcon()) $$render(consequent);
         });
       }
       var div_1 = sibling(node_1, 2);
@@ -5884,7 +5893,7 @@ function FeedbackAlert($$anchor, $$props) {
       append($$anchor2, div);
     };
     if_block(node, ($$render) => {
-      if (message()) $$render(consequent_2);
+      if (message() && type() !== "skipped") $$render(consequent_2);
     });
   }
   append($$anchor, fragment);
@@ -7870,6 +7879,7 @@ const DEFAULT_TWO_COLUMN_ORDER = [
   "divider",
   "feedback",
   "interaction",
+  "divider-bottom",
   "desktop-column"
 ];
 const DEFAULT_SINGLE_COLUMN_ORDER = [
@@ -7880,6 +7890,7 @@ const DEFAULT_SINGLE_COLUMN_ORDER = [
   "prompt",
   "divider",
   "feedback",
+  "divider-bottom",
   "interaction"
 ];
 const FEEDBACK_LAST_TWO_COLUMN_ORDER = [
@@ -7893,6 +7904,7 @@ const FEEDBACK_LAST_TWO_COLUMN_ORDER = [
   "stimulus-mobile-text-second",
   "divider",
   "interaction",
+  "divider-bottom",
   "feedback",
   "desktop-column"
 ];
@@ -7904,6 +7916,7 @@ const FEEDBACK_LAST_SINGLE_COLUMN_ORDER = [
   "prompt",
   "divider",
   "interaction",
+  "divider-bottom",
   "feedback"
 ];
 const FEEDBACK_LAST_INTERACTIONS = [INTERACTION_TYPES.TYPEIN, INTERACTION_TYPES.DROPDOWN];
@@ -7963,6 +7976,7 @@ const twoColumnTemplate = {
       },
       { name: "divider", component: "divider", condition: context.hasDivider },
       { name: "interaction", component: "slot", slot: "interaction" },
+      { name: "divider-bottom", component: "divider-bottom", condition: context.hasDividerBottom },
       { name: "feedback", component: "slot", slot: "feedback" },
       {
         name: "desktop-column",
@@ -8005,6 +8019,7 @@ const singleColumnTemplate = {
       { name: "prompt", component: "prompt" },
       { name: "divider", component: "divider", condition: context.hasDivider },
       { name: "interaction", component: "slot", slot: "interaction" },
+      { name: "divider-bottom", component: "divider-bottom", condition: context.hasDividerBottom },
       { name: "feedback", component: "slot", slot: "feedback" }
     ];
     const order = getSingleColumnOrder(context.interactionType);
@@ -8042,6 +8057,7 @@ const fullWidthStimulusTextTemplate = {
       { name: "prompt", component: "prompt", classes: ["lg:max-w-[50%]"] },
       { name: "divider", component: "divider", condition: context.hasDivider, classes: ["lg:max-w-[50%]"] },
       { name: "interaction", component: "slot", slot: "interaction", classes: ["lg:max-w-[50%]"] },
+      { name: "divider-bottom", component: "divider-bottom", condition: context.hasDividerBottom, classes: ["lg:max-w-[50%]"] },
       { name: "feedback", component: "slot", slot: "feedback", classes: ["lg:max-w-[50%]"] }
     ];
     const order = getSingleColumnOrder(context.interactionType);
@@ -8496,13 +8512,14 @@ create_custom_element(
   true
 );
 var root_8$3 = /* @__PURE__ */ from_html(`<div class="divider my-6"></div>`);
-var root_13$1 = /* @__PURE__ */ from_html(`<div aria-live="polite"><!></div>`);
+var root_13$1 = /* @__PURE__ */ from_html(`<div class="divider my-6"></div>`);
+var root_15$1 = /* @__PURE__ */ from_html(`<div aria-live="polite"><!></div>`);
 var root_1$h = /* @__PURE__ */ from_html(`<div><!></div>`);
-var root_14 = /* @__PURE__ */ from_html(`<div><!></div>`);
+var root_16 = /* @__PURE__ */ from_html(`<div><!></div>`);
 var root$e = /* @__PURE__ */ from_html(`<div class="prompt-container"><div><div></div> <!></div></div> <!>`, 1);
 function PromptContainer($$anchor, $$props) {
   push($$props, true);
-  let rubric = prop($$props, "rubric", 7, ""), prompt = prop($$props, "prompt", 7, ""), interactionType = prop($$props, "interactionType", 7), hasDivider = prop($$props, "hasDivider", 7, true), stimulus = prop($$props, "stimulus", 7, null), optionHasMedia = prop($$props, "optionHasMedia", 7, false), interaction = prop($$props, "interaction", 7), feedback = prop($$props, "feedback", 7);
+  let rubric = prop($$props, "rubric", 7, ""), prompt = prop($$props, "prompt", 7, ""), interactionType = prop($$props, "interactionType", 7), hasDivider = prop($$props, "hasDivider", 7, true), hasDividerBottom = prop($$props, "hasDividerBottom", 7, false), stimulus = prop($$props, "stimulus", 7, null), optionHasMedia = prop($$props, "optionHasMedia", 7, false), interaction = prop($$props, "interaction", 7), feedback = prop($$props, "feedback", 7);
   let stimulusData = /* @__PURE__ */ user_derived(() => useStimulusData(stimulus()));
   const windowWidth = getReactiveWindowWidth();
   let interactionWidthValue = /* @__PURE__ */ user_derived(() => getInteractionWidth(interactionType(), get$1(stimulusData), windowWidth.value));
@@ -8513,6 +8530,7 @@ function PromptContainer($$anchor, $$props) {
     rubric: rubric(),
     prompt: prompt(),
     hasDivider: hasDivider(),
+    hasDividerBottom: hasDividerBottom(),
     interactionWidthValue: get$1(interactionWidthValue),
     windowWidth: windowWidth.value
   }));
@@ -8577,6 +8595,13 @@ function PromptContainer($$anchor, $$props) {
       hasDivider($$value);
       flushSync();
     },
+    get hasDividerBottom() {
+      return hasDividerBottom();
+    },
+    set hasDividerBottom($$value = false) {
+      hasDividerBottom($$value);
+      flushSync();
+    },
     get stimulus() {
       return stimulus();
     },
@@ -8621,7 +8646,7 @@ function PromptContainer($$anchor, $$props) {
           }
         });
       };
-      var alternate_4 = ($$anchor3) => {
+      var alternate_5 = ($$anchor3) => {
         var fragment_2 = comment();
         var node_1 = first_child(fragment_2);
         {
@@ -8632,7 +8657,7 @@ function PromptContainer($$anchor, $$props) {
               }
             });
           };
-          var alternate_3 = ($$anchor4) => {
+          var alternate_4 = ($$anchor4) => {
             var fragment_4 = comment();
             var node_2 = first_child(fragment_4);
             {
@@ -8653,7 +8678,7 @@ function PromptContainer($$anchor, $$props) {
                   });
                 }
               };
-              var alternate_2 = ($$anchor5) => {
+              var alternate_3 = ($$anchor5) => {
                 var fragment_6 = comment();
                 var node_3 = first_child(fragment_6);
                 {
@@ -8661,7 +8686,7 @@ function PromptContainer($$anchor, $$props) {
                     var div_4 = root_8$3();
                     append($$anchor6, div_4);
                   };
-                  var alternate_1 = ($$anchor6) => {
+                  var alternate_2 = ($$anchor6) => {
                     var fragment_7 = comment();
                     var node_4 = first_child(fragment_7);
                     {
@@ -8676,21 +8701,40 @@ function PromptContainer($$anchor, $$props) {
                           $$slots: { default: true }
                         });
                       };
-                      var alternate = ($$anchor7) => {
+                      var alternate_1 = ($$anchor7) => {
                         var fragment_10 = comment();
                         var node_6 = first_child(fragment_10);
                         {
                           var consequent_5 = ($$anchor8) => {
                             var div_5 = root_13$1();
-                            var node_7 = child(div_5);
-                            snippet(node_7, () => feedback() ?? noop);
-                            reset(div_5);
                             append($$anchor8, div_5);
                           };
+                          var alternate = ($$anchor8) => {
+                            var fragment_11 = comment();
+                            var node_7 = first_child(fragment_11);
+                            {
+                              var consequent_6 = ($$anchor9) => {
+                                var div_6 = root_15$1();
+                                var node_8 = child(div_6);
+                                snippet(node_8, () => feedback() ?? noop);
+                                reset(div_6);
+                                append($$anchor9, div_6);
+                              };
+                              if_block(
+                                node_7,
+                                ($$render) => {
+                                  if (get$1(section).component === "slot" && get$1(section).slot === "feedback") $$render(consequent_6);
+                                },
+                                true
+                              );
+                            }
+                            append($$anchor8, fragment_11);
+                          };
                           if_block(
                             node_6,
                             ($$render) => {
-                              if (get$1(section).component === "slot" && get$1(section).slot === "feedback") $$render(consequent_5);
+                              if (get$1(section).component === "divider-bottom") $$render(consequent_5);
+                              else $$render(alternate, false);
                             },
                             true
                           );
@@ -8701,7 +8745,7 @@ function PromptContainer($$anchor, $$props) {
                         node_4,
                         ($$render) => {
                           if (get$1(section).component === "slot" && get$1(section).slot === "interaction") $$render(consequent_4);
-                          else $$render(alternate, false);
+                          else $$render(alternate_1, false);
                         },
                         true
                       );
@@ -8712,7 +8756,7 @@ function PromptContainer($$anchor, $$props) {
                     node_3,
                     ($$render) => {
                       if (get$1(section).component === "divider") $$render(consequent_3);
-                      else $$render(alternate_1, false);
+                      else $$render(alternate_2, false);
                     },
                     true
                   );
@@ -8723,7 +8767,7 @@ function PromptContainer($$anchor, $$props) {
                 node_2,
                 ($$render) => {
                   if (get$1(section).component === "stimulus-text" || get$1(section).component === "stimulus-media") $$render(consequent_2);
-                  else $$render(alternate_2, false);
+                  else $$render(alternate_3, false);
                 },
                 true
               );
@@ -8734,7 +8778,7 @@ function PromptContainer($$anchor, $$props) {
             node_1,
             ($$render) => {
               if (get$1(section).component === "prompt") $$render(consequent_1);
-              else $$render(alternate_3, false);
+              else $$render(alternate_4, false);
             },
             true
           );
@@ -8743,7 +8787,7 @@ function PromptContainer($$anchor, $$props) {
       };
       if_block(node, ($$render) => {
         if (get$1(section).component === "rubric") $$render(consequent);
-        else $$render(alternate_4, false);
+        else $$render(alternate_5, false);
       });
     }
     reset(div_3);
@@ -8760,12 +8804,12 @@ function PromptContainer($$anchor, $$props) {
     append($$anchor2, div_3);
   });
   reset(div_2);
-  var node_8 = sibling(div_2, 2);
+  var node_9 = sibling(div_2, 2);
   {
-    var consequent_6 = ($$anchor2) => {
-      var div_6 = root_14();
-      var node_9 = child(div_6);
-      StimulusSection(node_9, {
+    var consequent_7 = ($$anchor2) => {
+      var div_7 = root_16();
+      var node_10 = child(div_7);
+      StimulusSection(node_10, {
         get stimulusData() {
           return get$1(stimulusData);
         },
@@ -8774,29 +8818,29 @@ function PromptContainer($$anchor, $$props) {
         },
         onexpandImage: openStimulusModal
       });
-      reset(div_6);
-      bind_this(div_6, ($$value) => set(containerElement, $$value), () => get$1(containerElement));
+      reset(div_7);
+      bind_this(div_7, ($$value) => set(containerElement, $$value), () => get$1(containerElement));
       template_effect(
         ($0, $1) => {
-          set_class(div_6, 1, $0);
-          set_style(div_6, `${$1 ?? ""}; ${get$1(dynamicMarginTop) ?? ""}`);
+          set_class(div_7, 1, $0);
+          set_style(div_7, `${$1 ?? ""}; ${get$1(dynamicMarginTop) ?? ""}`);
         },
         [
           () => clsx(getClassString(get$1(desktopColumnSection).classes)),
           () => getStyleString(get$1(desktopColumnSection).styles)
         ]
       );
-      append($$anchor2, div_6);
+      append($$anchor2, div_7);
     };
-    if_block(node_8, ($$render) => {
-      if (get$1(desktopColumnSection)) $$render(consequent_6);
+    if_block(node_9, ($$render) => {
+      if (get$1(desktopColumnSection)) $$render(consequent_7);
     });
   }
   reset(div_1);
   reset(div);
-  var node_10 = sibling(div, 2);
+  var node_11 = sibling(div, 2);
   {
-    var consequent_7 = ($$anchor2) => {
+    var consequent_8 = ($$anchor2) => {
       PromptStimulusImageModal($$anchor2, {
         get isOpen() {
           return get$1(isStimulusModalOpen);
@@ -8813,8 +8857,8 @@ function PromptContainer($$anchor, $$props) {
         onclose: closeStimulusModal
       });
     };
-    if_block(node_10, ($$render) => {
-      if (get$1(isStimulusModalOpen)) $$render(consequent_7);
+    if_block(node_11, ($$render) => {
+      if (get$1(isStimulusModalOpen)) $$render(consequent_8);
     });
   }
   template_effect(
@@ -8838,6 +8882,7 @@ create_custom_element(
     prompt: {},
     interactionType: {},
     hasDivider: {},
+    hasDividerBottom: {},
     stimulus: {},
     optionHasMedia: {},
     interaction: {},
@@ -11672,6 +11717,138 @@ const useFilterUniqueObject = (data, identifier = "id") => {
   const uniqueMap = new Map(data.map((obj) => [obj[identifier], obj]));
   return Array.from(uniqueMap.values());
 };
+const stripStatus = (itemId) => {
+  return itemId.includes(CATEGORISE.DASH) ? itemId.split(CATEGORISE.DASH)[0] : itemId;
+};
+function useCategoriseFeedback(interactionState, config, api) {
+  const totalRemainingItems = interactionState.data.wordBinItems.filter((id) => {
+    const status = id.split(CATEGORISE.DASH)[1];
+    return status !== "missed";
+  }).length;
+  let isFeedbackShown = false;
+  let allAnswersCorrect = false;
+  let isItemSkipped = false;
+  let resultFeedback = "";
+  if (config.isFinished && config.mode !== "preview") {
+    const { answerList } = config.scoringMetadata || {};
+    if (!answerList) {
+      return {
+        isFeedbackShown,
+        allAnswersCorrect,
+        isItemSkipped,
+        resultFeedback
+      };
+    }
+    const { correct: correctFeedback, incorrect: incorrectFeedback } = config.feedback || {};
+    let hasIncorrect = false;
+    let hasCorrect = false;
+    const hasWordBinItems = totalRemainingItems > 0;
+    config.category_groups.forEach((category) => {
+      const categoryAnswerList = answerList[category.id] || [];
+      const categoryItems = api.getCategoryItems(interactionState, category.id);
+      categoryItems.forEach((item) => {
+        const itemIdNoStatus = stripStatus(item);
+        if (categoryAnswerList.includes(itemIdNoStatus)) {
+          hasCorrect = true;
+        } else {
+          hasIncorrect = true;
+        }
+      });
+    });
+    allAnswersCorrect = hasCorrect && !hasIncorrect && !hasWordBinItems;
+    isItemSkipped = totalRemainingItems === config.totalCategoryItems;
+    resultFeedback = allAnswersCorrect ? correctFeedback : incorrectFeedback;
+    isFeedbackShown = !allAnswersCorrect;
+  } else if (config.mode === "interactive") {
+    const allItemsPlaced = totalRemainingItems === 0;
+    if (allItemsPlaced) {
+      const { answerList } = config.scoringMetadata || {};
+      if (answerList) {
+        let hasIncorrect = false;
+        let hasCorrect = false;
+        config.category_groups.forEach((category) => {
+          const categoryAnswerList = answerList[category.id] || [];
+          const categoryItems = api.getCategoryItems(interactionState, category.id);
+          categoryItems.forEach((item) => {
+            const itemIdNoStatus = stripStatus(item);
+            if (categoryAnswerList.includes(itemIdNoStatus)) {
+              hasCorrect = true;
+            } else {
+              hasIncorrect = true;
+            }
+          });
+        });
+        allAnswersCorrect = hasCorrect && !hasIncorrect;
+        resultFeedback = allAnswersCorrect ? config.feedback?.correct : config.feedback?.incorrect;
+        isFeedbackShown = true;
+      }
+    } else {
+      isFeedbackShown = false;
+    }
+  } else {
+    isFeedbackShown = false;
+  }
+  return {
+    isFeedbackShown,
+    allAnswersCorrect,
+    isItemSkipped,
+    resultFeedback
+  };
+}
+function CategoriseFeedback($$anchor, $$props) {
+  push($$props, true);
+  let feedbackState = prop($$props, "feedbackState", 7), isInteractiveMode2 = prop($$props, "isInteractiveMode", 7, false);
+  const feedbackType = /* @__PURE__ */ user_derived(() => {
+    if (feedbackState().isItemSkipped) return "skipped";
+    if (feedbackState().allAnswersCorrect) return "correct";
+    return "incorrect";
+  });
+  var $$exports = {
+    get feedbackState() {
+      return feedbackState();
+    },
+    set feedbackState($$value) {
+      feedbackState($$value);
+      flushSync();
+    },
+    get isInteractiveMode() {
+      return isInteractiveMode2();
+    },
+    set isInteractiveMode($$value = false) {
+      isInteractiveMode2($$value);
+      flushSync();
+    }
+  };
+  var fragment = comment();
+  var node = first_child(fragment);
+  {
+    var consequent = ($$anchor2) => {
+      {
+        let $0 = /* @__PURE__ */ user_derived(() => !isInteractiveMode2());
+        FeedbackAlert($$anchor2, {
+          get type() {
+            return get$1(feedbackType);
+          },
+          get message() {
+            return feedbackState().resultFeedback;
+          },
+          showIcon: true,
+          get isAlert() {
+            return get$1($0);
+          },
+          iconProps: "h-6 w-6 flex items-center pt-0.5 mr-2",
+          iconType: "info"
+        });
+      }
+    };
+    if_block(node, ($$render) => {
+      if (feedbackState().isFeedbackShown) $$render(consequent);
+    });
+  }
+  append($$anchor, fragment);
+  return pop($$exports);
+}
+create_custom_element(CategoriseFeedback, { feedbackState: {}, isInteractiveMode: {} }, [], [], true);
 function ownKeys(object, enumerableOnly) {
   var keys = Object.keys(object);
   if (Object.getOwnPropertySymbols) {
@@ -15407,71 +15584,7 @@ function CategoriseComponent($$anchor, $$props) {
     return status !== "missed";
   }).length);
   const totalPlacedItems = /* @__PURE__ */ user_derived(() => config().totalCategoryItems - get$1(totalRemainingItems));
-  let isFeedbackShown = /* @__PURE__ */ state(false);
-  let allAnswersCorrect = /* @__PURE__ */ state(false);
-  let isItemSkipped = /* @__PURE__ */ state(false);
-  let resultFeedback = /* @__PURE__ */ state("");
-  const stripStatus = (itemId) => {
-    return itemId.includes(CATEGORISE.DASH) ? itemId.split(CATEGORISE.DASH)[0] : itemId;
-  };
-  user_effect(() => {
-    if (config().isFinished && config().mode !== "preview") {
-      const { answerList } = config().scoringMetadata || {};
-      if (!answerList) return;
-      const { correct: correctFeedback, incorrect: incorrectFeedback } = config().feedback || {};
-      let hasIncorrect = false;
-      let hasCorrect = false;
-      const hasWordBinItems = get$1(totalRemainingItems) > 0;
-      config().category_groups.forEach((category) => {
-        const categoryAnswerList = answerList[category.id] || [];
-        const categoryItems = api().getCategoryItems(get$1(interactionState), category.id);
-        categoryItems.forEach((item) => {
-          const itemIdNoStatus = stripStatus(item);
-          if (categoryAnswerList.includes(itemIdNoStatus)) {
-            hasCorrect = true;
-          } else {
-            hasIncorrect = true;
-          }
-        });
-      });
-      set(allAnswersCorrect, hasCorrect && !hasIncorrect && !hasWordBinItems, true);
-      set(isItemSkipped, get$1(totalRemainingItems) === config().totalCategoryItems);
-      set(resultFeedback, get$1(allAnswersCorrect) ? correctFeedback : incorrectFeedback, true);
-      set(isFeedbackShown, !get$1(allAnswersCorrect));
-    } else if (config().mode === "interactive") {
-      const allItemsPlaced = get$1(totalRemainingItems) === 0;
-      if (allItemsPlaced) {
-        const { answerList } = config().scoringMetadata || {};
-        if (answerList) {
-          let hasIncorrect = false;
-          let hasCorrect = false;
-          config().category_groups.forEach((category) => {
-            const categoryAnswerList = answerList[category.id] || [];
-            const categoryItems = api().getCategoryItems(get$1(interactionState), category.id);
-            categoryItems.forEach((item) => {
-              const itemIdNoStatus = stripStatus(item);
-              if (categoryAnswerList.includes(itemIdNoStatus)) {
-                hasCorrect = true;
-              } else {
-                hasIncorrect = true;
-              }
-            });
-          });
-          set(allAnswersCorrect, hasCorrect && !hasIncorrect, true);
-          set(
-            resultFeedback,
-            get$1(allAnswersCorrect) ? config().feedback?.correct : config().feedback?.incorrect,
-            true
-          );
-          set(isFeedbackShown, true);
-        }
-      } else {
-        set(isFeedbackShown, false);
-      }
-    } else {
-      set(isFeedbackShown, false);
-    }
-  });
+  const feedbackState = /* @__PURE__ */ user_derived(() => useCategoriseFeedback(get$1(interactionState), config(), api()));
   const dropContainerId = /* @__PURE__ */ user_derived(() => get$1(interactionState).data.dropContainerId);
   const hasAddItemAnimation = /* @__PURE__ */ user_derived(() => get$1(interactionState).data.hasAddItemAnimation);
   const wordBinItems = /* @__PURE__ */ user_derived(() => get$1(interactionState).data.wordBinItems.map((id) => ({
@@ -15628,6 +15741,8 @@ function CategoriseComponent($$anchor, $$props) {
           }
         }
       }
+    } else {
+      set(dragSourceContainerId, null);
     }
   });
   user_effect(() => {
@@ -15844,6 +15959,7 @@ function CategoriseComponent($$anchor, $$props) {
     set(interactionState, api().reset(get$1(interactionState)), true);
     dispatchStateChange();
     set(currentMobileIndex, 0);
+    set(dragSourceContainerId, null);
     set(isModalOpen, false);
   };
   var $$exports = {
@@ -16083,34 +16199,17 @@ function CategoriseComponent($$anchor, $$props) {
       append($$anchor2, fragment_1);
     };
     const feedback = ($$anchor2) => {
-      var fragment_4 = comment();
-      var node_7 = first_child(fragment_4);
       {
-        var consequent_1 = ($$anchor3) => {
-          {
-            let $02 = /* @__PURE__ */ user_derived(() => get$1(allAnswersCorrect) ? "correct" : get$1(isItemSkipped) ? "skipped" : "incorrect");
-            let $12 = /* @__PURE__ */ user_derived(() => config().mode !== "interactive");
-            FeedbackAlert($$anchor3, {
-              get type() {
-                return get$1($02);
-              },
-              get message() {
-                return get$1(resultFeedback);
-              },
-              showIcon: true,
-              get isAlert() {
-                return get$1($12);
-              },
-              iconProps: "h-6 w-6 flex items-center pt-0.5 mr-2",
-              iconType: "info"
-            });
+        let $02 = /* @__PURE__ */ user_derived(() => config().mode === "interactive");
+        CategoriseFeedback($$anchor2, {
+          get feedbackState() {
+            return get$1(feedbackState);
+          },
+          get isInteractiveMode() {
+            return get$1($02);
           }
-        };
-        if_block(node_7, ($$render) => {
-          if (get$1(isFeedbackShown)) $$render(consequent_1);
         });
       }
-      append($$anchor2, fragment_4);
     };
     let $0 = /* @__PURE__ */ user_derived(() => config().rubric?.text || "");
     let $1 = /* @__PURE__ */ user_derived(() => config().prompt || "");
@@ -16686,7 +16785,6 @@ function useDropdown(prompt, options) {
     parseText
   };
 }
-const KEY_PRESS_TIMEOUT = 1e3;
 function useDropdownState() {
   const scrollToActive = async (listElement, activeIndex) => {
     if (!listElement || activeIndex === null || activeIndex < 0) return;
@@ -16702,7 +16800,7 @@ function useDropdownState() {
   };
   const handleTypeAhead = (char, state2, options) => {
     const now2 = Date.now();
-    let searchString = now2 - state2.lastKeyPressTime > KEY_PRESS_TIMEOUT ? "" : state2.searchString;
+    let searchString = now2 - state2.lastKeyPressTime > DROPDOWN_INTERACTION.KEY_PRESS_TIMEOUT ? "" : state2.searchString;
     searchString += char.toLowerCase();
     const matchIndex = options.findIndex((option) => {
       const cleanOption = option.replace(/<[^>]*>/g, "").toLowerCase();
@@ -16812,7 +16910,7 @@ function useDropdownState() {
         if (state2.activeIndex === null) {
           newState.activeIndex = 0;
         } else {
-          const newIndex = state2.activeIndex - 10;
+          const newIndex = state2.activeIndex - DROPDOWN_INTERACTION.PAGE_NAVIGATION_STEP;
           newState.activeIndex = newIndex < 0 ? 0 : newIndex;
         }
         return newState;
@@ -16821,7 +16919,7 @@ function useDropdownState() {
         if (state2.activeIndex === null) {
           newState.activeIndex = 0;
         } else {
-          const newIndex = state2.activeIndex + 10;
+          const newIndex = state2.activeIndex + DROPDOWN_INTERACTION.PAGE_NAVIGATION_STEP;
           newState.activeIndex = newIndex >= options.length ? options.length - 1 : newIndex;
         }
         return newState;
@@ -16954,6 +17052,29 @@ function calculateDropdownFeedback(state2, config, validateFn) {
     sessionAnswer
   };
 }
+function useDropdownPosition(config) {
+  const minWidth = DROPDOWN_POSITION.MIN_WIDTH;
+  const maxWidth = DROPDOWN_POSITION.MAX_WIDTH;
+  const viewportPadding = DROPDOWN_POSITION.VIEWPORT_PADDING;
+  const adjustDropdownWidth = async (containerRef, listRef) => {
+    if (!containerRef || !listRef) return;
+    const containerRect = containerRef.getBoundingClientRect();
+    const viewportWidth = window.innerWidth;
+    listRef.style.left = "0";
+    listRef.style.right = "auto";
+    const availableWidth = viewportWidth - containerRect.left - viewportPadding;
+    if (availableWidth >= maxWidth) {
+      listRef.style.maxWidth = `${maxWidth}px`;
+    } else if (availableWidth >= minWidth) {
+      listRef.style.maxWidth = `${availableWidth}px`;
+    } else {
+      listRef.style.maxWidth = `${minWidth}px`;
+    }
+  };
+  return {
+    adjustDropdownWidth
+  };
+}
 var root_1$3 = /* @__PURE__ */ from_html(`<div class="absolute inset-0 bg-transparent z-10"></div>`);
 var root_2 = /* @__PURE__ */ from_html(`<span class="text-green-900 mr-2"><span aria-hidden="true"><!></span> <span class="sr-only">Correct</span></span>`);
 var root_5$1 = /* @__PURE__ */ from_html(`<span class="text-green-900 mr-2"><span aria-hidden="true"><!></span> <span class="sr-only">Correct</span></span>`);
@@ -16970,6 +17091,7 @@ function DropdownContainer($$anchor, $$props) {
   push($$props, true);
   let dropdownId = prop($$props, "dropdownId", 7), dropdownNumber = prop($$props, "dropdownNumber", 7), options = prop($$props, "options", 7), selected = prop($$props, "selected", 7), correctAnswers = prop($$props, "correctAnswers", 23, () => []), isCorrect = prop($$props, "isCorrect", 7, false), isFinished = prop($$props, "isFinished", 7, false), isLocked = prop($$props, "isLocked", 7, false), isDataSaving = prop($$props, "isDataSaving", 7, false), mode = prop($$props, "mode", 7), showFeedback = prop($$props, "showFeedback", 7, false), onselect = prop($$props, "onselect", 7), viewportBuffer = prop($$props, "viewportBuffer", 7, 60);
   const dropdownActions = useDropdownState();
+  const dropdownPosition = useDropdownPosition();
   let initializedOptions = /* @__PURE__ */ user_derived(() => {
     if (options().length === 0) return [];
     return [...options()];
@@ -16982,6 +17104,7 @@ function DropdownContainer($$anchor, $$props) {
   let hoveredIndex = /* @__PURE__ */ state(null);
   let isFirstNavigation = /* @__PURE__ */ state(false);
   let pageExtensionElement = /* @__PURE__ */ state(null);
+  let resizeTimeout = null;
   user_effect(() => {
     get$1(state$1).selected = selected();
   });
@@ -17005,6 +17128,7 @@ function DropdownContainer($$anchor, $$props) {
   const ensureDropdownVisibility = async () => {
     if (!get$1(containerRef) || !get$1(listRef)) return;
     await tick();
+    await dropdownPosition.adjustDropdownWidth(get$1(containerRef), get$1(listRef));
     const listRect = get$1(listRef).getBoundingClientRect();
     const viewportHeight = window.innerHeight;
     const documentHeight = document.documentElement.scrollHeight;
@@ -17154,11 +17278,32 @@ function DropdownContainer($$anchor, $$props) {
     }
     handleCloseMenu();
   };
+  const handleResize = () => {
+    if (!get$1(state$1).isOpen || !get$1(containerRef) || !get$1(listRef)) return;
+    if (resizeTimeout) {
+      clearTimeout(resizeTimeout);
+    }
+    resizeTimeout = setTimeout(
+      () => {
+        if (get$1(state$1).isOpen && get$1(containerRef) && get$1(listRef)) {
+          dropdownPosition.adjustDropdownWidth(get$1(containerRef), get$1(listRef));
+        }
+        resizeTimeout = null;
+      },
+      150
+    );
+  };
   onMount(() => {
     document.addEventListener("mousedown", handleClickOutside);
+    window.addEventListener("resize", handleResize);
   });
   onDestroy(() => {
     document.removeEventListener("mousedown", handleClickOutside);
+    window.removeEventListener("resize", handleResize);
+    if (resizeTimeout) {
+      clearTimeout(resizeTimeout);
+      resizeTimeout = null;
+    }
     removePageExtension();
   });
   const buttonId = `dropdown-button-${dropdownId()}`;
@@ -18049,7 +18194,8 @@ function DropdownComponent($$anchor, $$props) {
         return config().stimulus;
       },
       optionHasMedia: false,
-      hasDivider: true,
+      hasDivider: false,
+      hasDividerBottom: true,
       interaction,
       feedback,
       $$slots: { interaction: true, feedback: true }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eat-js-sdk",
-  "version": "2.0.42",
+  "version": "2.0.44",
   "change version": "2.0.0",
   "description": "Authoring tool frontend SDK",
   "contributors": [