carbon-components-svelte 0.94.0 → 0.94.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-components-svelte",
-  "version": "0.94.0",
+  "version": "0.94.2",
   "license": "Apache-2.0",
   "description": "Svelte implementation of the Carbon Design System",
   "type": "module",

package/src/DataTable/Toolbar.svelte

@@ -15,6 +15,11 @@
    */
   const overflowVisible = writable(false);
 
+  /**
+   * @type {import("svelte/store").Writable<boolean>}
+   */
+  const batchActionsActive = writable(false);
+
   /**
    * @type {(visible: boolean) => void}
    */
@@ -26,6 +31,7 @@
   setContext("Toolbar", {
     overflowVisible,
     setOverflowVisible,
+    batchActionsActive,
   });
 </script>
 

package/src/DataTable/ToolbarBatchActions.svelte

@@ -82,6 +82,10 @@
     });
   }
 
+  $: if (ctxToolbar?.batchActionsActive) {
+    ctxToolbar.batchActionsActive.set(showActions);
+  }
+
   onMount(() => {
     return () => {
       unsubscribe?.();

package/src/DataTable/ToolbarContent.svelte

@@ -1,18 +1,17 @@
 <script>
   import { getContext } from "svelte";
 
-  const ctx = getContext("DataTable") ?? {};
+  const ctx = getContext("Toolbar") ?? {};
 
-  let batchSelectedIds = [];
+  let batchActionsActive = false;
 
-  if (ctx?.batchSelectedIds) {
-    ctx.batchSelectedIds.subscribe((value) => {
-      batchSelectedIds = value;
+  if (ctx?.batchActionsActive) {
+    ctx.batchActionsActive.subscribe((value) => {
+      batchActionsActive = value;
     });
   }
 
-  $: hasBatchSelection = batchSelectedIds.length > 0;
-  $: inertProps = hasBatchSelection ? { inert: true } : {};
+  $: inertProps = batchActionsActive ? { inert: true } : {};
 </script>
 
 <div class:bx--toolbar-content={true} {...inertProps}>

package/src/Tabs/TabContent.svelte

@@ -16,8 +16,8 @@
   });
 
   $: selected = $selectedContent === id;
-  $: index = $contentById[id].index;
-  $: tabId = $tabs[index].id;
+  $: index = $contentById[id]?.index ?? 0;
+  $: tabId = $tabs[index]?.id;
 </script>
 
 <div

package/src/Tabs/Tabs.svelte

@@ -69,44 +69,40 @@
   let refTabList = null;
   let refRoot = null;
 
+  // Flag to trigger DOM reordering only when tabs change.
+  // This is necessary to avoid infinite loops in Svelte 5.
+  let needsDomSync = false;
+
   /**
    * @type {(data: { id: string; label: string; disabled: boolean }) => void}
    */
   const add = (data) => {
-    tabs.update((_) => {
-      const newTabs = [..._, { ...data, index: _.length }];
-      return newTabs.map((tab, index) => ({ ...tab, index }));
-    });
+    needsDomSync = true;
+    tabs.update((_) => [..._, { ...data, index: _.length }]);
   };
 
   /**
    * @type {(id: string) => void}
    */
   const remove = (id) => {
-    tabs.update((_) => {
-      const filtered = _.filter((tab) => tab.id !== id);
-      return filtered.map((tab, index) => ({ ...tab, index }));
-    });
+    needsDomSync = true;
+    tabs.update((_) => _.filter((tab) => tab.id !== id));
   };
 
   /**
    * @type {(data: { id: string }) => void}
    */
   const addContent = (data) => {
-    content.update((_) => {
-      const newContent = [..._, { ...data, index: _.length }];
-      return newContent.map((item, index) => ({ ...item, index }));
-    });
+    needsDomSync = true;
+    content.update((_) => [..._, { ...data, index: _.length }]);
   };
 
   /**
    * @type {(id: string) => void}
    */
   const removeContent = (id) => {
-    content.update((_) => {
-      const filtered = _.filter((item) => item.id !== id);
-      return filtered.map((item, index) => ({ ...item, index }));
-    });
+    needsDomSync = true;
+    content.update((_) => _.filter((item) => item.id !== id));
   };
 
   /**
@@ -165,44 +161,41 @@
   });
 
   afterUpdate(() => {
-    // We need to use the DOM order of the tabs to update
-    // the indices of the tabs in the store. This is because
-    // the current implementation uses an implicit index approach
-    // where order matters. A more robust solution would be to
-    // require explicit keys specified by the consumer.
-    if (refTabList) {
+    // Sync DOM order with stores only when tabs are added/removed.
+    // This avoids infinite loops in Svelte 5 by not running on every update.
+    if (needsDomSync && refTabList) {
+      needsDomSync = false;
+
       const domTabs = Array.from(refTabList.querySelectorAll("[role='tab']"));
-      const domIds = domTabs.map((el) => el.id);
+      const domTabIds = domTabs.map((el) => el.id);
 
       tabs.update((currentTabs) => {
         const tabsMap = new Map(currentTabs.map((tab) => [tab.id, tab]));
-        const reorderedTabs = domIds
+        return domTabIds
           .map((id, index) => {
             const tab = tabsMap.get(id);
             return tab ? { ...tab, index } : undefined;
           })
           .filter(Boolean);
-
-        return reorderedTabs;
       });
-    }
-
-    const contentElements = refRoot?.parentElement
-      ? Array.from(refRoot.parentElement.querySelectorAll("[role='tabpanel']"))
-      : [];
-    const contentIds = contentElements.map((el) => el.id);
 
-    content.update((currentContent) => {
-      const contentMap = new Map(currentContent.map((c) => [c.id, c]));
-      const reorderedContent = contentIds
-        .map((id, index) => {
-          const c = contentMap.get(id);
-          return c ? { ...c, index } : undefined;
-        })
-        .filter(Boolean);
+      const contentElements = refRoot?.parentElement
+        ? Array.from(
+            refRoot.parentElement.querySelectorAll("[role='tabpanel']"),
+          )
+        : [];
+      const contentIds = contentElements.map((el) => el.id);
 
-      return reorderedContent;
-    });
+      content.update((currentContent) => {
+        const contentMap = new Map(currentContent.map((c) => [c.id, c]));
+        return contentIds
+          .map((id, index) => {
+            const c = contentMap.get(id);
+            return c ? { ...c, index } : undefined;
+          })
+          .filter(Boolean);
+      });
+    }
 
     if (selected !== currentIndex) {
       selected = currentIndex;
@@ -280,4 +273,4 @@
     <slot />
   </ul>
 </div>
-<slot name="content" />
+<slot name="content" />

package/types/DataTable/Toolbar.svelte.d.ts

@@ -4,6 +4,7 @@ import type { SvelteHTMLElements } from "svelte/elements";
 export type ToolbarContext = {
   overflowVisible: import("svelte/store").Writable<boolean>;
   setOverflowVisible: (visible: boolean) => void;
+  batchActionsActive: import("svelte/store").Writable<boolean>;
 };
 
 type $RestProps = SvelteHTMLElements["section"];