eat-js-sdk 2.0.42 → 2.0.43

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",
@@ -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: {},
@@ -16686,7 +16731,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 +16746,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 +16856,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 +16865,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 +16998,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 +17037,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 +17050,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 +17074,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 +17224,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 +18140,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.43",
   "change version": "2.0.0",
   "description": "Authoring tool frontend SDK",
   "contributors": [