@communitiesuk/svelte-component-library 0.1.19-beta.10 → 0.1.19-beta.11

package/dist/components/ui/Button.svelte

@@ -28,6 +28,7 @@
   {#if buttonType === "moreInfo"}
     <div>
       <button
+        type={formButton ? "submit" : "button"}
         aria-label={textContent}
         aria-expanded={ariaExpanded}
         class="more-info-button"
@@ -60,7 +61,7 @@
     </a>
   {:else if buttonType === "disabled"}
     <button
-      type="submit"
+      type={formButton ? "submit" : "button"}
       disabled
       aria-disabled="true"
       class="govuk-button"
@@ -70,7 +71,11 @@
       {textContent}
     </button>
   {:else if buttonType === "table header"}
-    <button type="button" class="text-header" onclick={onClickFunction}>
+    <button
+      type={formButton ? "submit" : "button"}
+      class="text-header"
+      onclick={onClickFunction}
+    >
       {textContent}
       <svg
         width="22"
@@ -96,7 +101,7 @@
     </button>
   {:else}
     <button
-      type="submit"
+      type={formButton ? "submit" : "button"}
       class={buttonClass}
       data-module="govuk-button"
       onclick={onClickFunction}
@@ -109,6 +114,7 @@
     {#if buttonType === "moreInfo"}
       <div>
         <button
+          type={formButton ? "submit" : "button"}
           aria-label={textContent}
           aria-expanded={ariaExpanded}
           class="more-info-button"
@@ -141,7 +147,7 @@
       </a>
     {:else if buttonType === "disabled"}
       <button
-        type="submit"
+        type={formButton ? "submit" : "button"}
         disabled
         aria-disabled="true"
         class="govuk-button"

package/dist/components/ui/CheckBox.svelte

@@ -139,6 +139,7 @@
     >
       {#if selectAllButton}
         <Button
+          formButton={false}
           buttonType={allSelected ? "warning" : "secondary"}
           textContent={allSelected ? "De-select all" : "Select all"}
           onClickFunction={toggleSelectAll}

package/dist/components/ui/MultiSelectSearchAutocomplete.svelte

@@ -13,6 +13,7 @@
   type ExtendedSelectGroup = SelectGroup & { choices: ExtendedSelectItem[] };
 
   let {
+    onChangeFunction,
     hoveredArea = $bindable(),
     // Core attributes - pass through to Select component
     id,
@@ -261,27 +262,43 @@
     next: string[];
   }> = [];
   let __seq = 0;
+  let suppressInitialChangeEvents = true;
+  let suppressCounter = 0;
+
+  let debounceTimerX: any = null;
+  let hasInitialized = false;
+
   $inspect(value).with((type: string, current: unknown) => {
     const next = Array.isArray(current)
       ? current.map((x) => String(x))
       : current == null
         ? []
         : [String(current as any)];
-    const prev = __lastSnapshot;
-    __seq += 1;
-    __history.push({ seq: __seq, type, prev, next });
-    // Keep history bounded
-    if (__history.length > 50) __history.shift();
-    /*console.log("🧭 [inspect:value]", {
-      seq: __seq,
-      type,
-      prev,
-      next,
-      historyLen: __history.length,
-    });*/
-    __lastSnapshot = next.slice();
-  });
 
+    clearTimeout(debounceTimerX);
+    debounceTimerX = setTimeout(() => {
+      const prev = __lastSnapshot;
+
+      // ✅ Skip first diff to avoid triggering on initial load
+      if (!hasInitialized) {
+        __lastSnapshot = next.slice();
+        hasInitialized = true;
+        return;
+      }
+
+      const added = next.filter((x) => !prev.includes(x));
+      const removed = prev.filter((x) => !next.includes(x));
+
+      for (const val of added) {
+        onChangeFunction("added", val);
+      }
+      for (const val of removed) {
+        onChangeFunction("removed", val);
+      }
+
+      __lastSnapshot = next.slice();
+    }, 50);
+  });
   // Helper function for getting group text
   function getGroupText(item: any): string | undefined {
     if (!groupKey || !item || typeof item !== "object") return undefined;
@@ -1297,7 +1314,6 @@
               if (typeof pillOnMouseLeaveFunction === "function") {
                 pill.addEventListener("mouseleave", () => {
                   pillOnMouseLeaveFunction();
-                  console.log("hello");
                 });
               }
 
@@ -1305,7 +1321,6 @@
               if (removeButton) {
                 removeButton.addEventListener("mousedown", () => {
                   hoveredArea = null;
-                  console.log("hello");
                 });
               }
 

package/dist/components/ui/Tabs.svelte

@@ -46,7 +46,6 @@
   // Handle tab selection - integrate focus and hash logic directly
   function selectTab(tabId: string, shouldFocus = false): void {
     // Skip if component isn't ready, or tab is already selected
-    console.log(isSupported, isInitialized, selectedTabId, tabId);
 
     if (!isSupported || !isInitialized || selectedTabId === tabId) return;
 
@@ -143,7 +142,6 @@
 
     // Check URL hash for deep linking AFTER initial prop value is set
     const hash = window.location.hash.substring(1);
-    console.log(hash, "hash");
     if (hash) {
       const tabFromHash = tabs.find((tab) => tab.id === hash);
       if (tabFromHash.id && tabFromHash.id !== selectedTabId) {
@@ -225,9 +223,9 @@
       !tabs.some((tab) => tab.id === selectedTabId)
     ) {
       // If selected tab ID is no longer valid, default to the first available tab
-      console.log(
+      /*console.log(
         `Effect: selectedTabId '${selectedTabId}' no longer valid. Resetting.`,
-      ); // Optional Debug
+      ); // Optional Debug*/
       selectedTabId = tabs[0]?.id ?? null; // Use optional chaining and nullish coalescing
     }
   });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@communitiesuk/svelte-component-library",
-  "version": "0.1.19-beta.10",
+  "version": "0.1.19-beta.11",
   "repository": {
     "type": "git",
     "url": "https://github.com/communitiesuk/mhclg_svelte_component_library.git"