Selection final (#1751)

* final tuning to single selection

* coderabbit

Author: jjagielka

src/lib/tabs/TabItem.svelte

@@ -16,20 +16,21 @@
   const { active, inactive } = $derived(tabs({ tabStyle: compoTabStyle, hasDivider: true }));
 
   // Generate a unique ID for this tab button
-  const tabId = `tab-${Math.random().toString(36).substring(2)}`;
+  const tabId = $props.id();
+  const self = $state({ id: `tab-${tabId}`, snippet: children });
 
-  const updateSingleSelection = useSingleSelection<SelectedTab>((value) => (open = value.id === tabId));
+  const updateSingleSelection = useSingleSelection<SelectedTab>((value) => (open = value?.id === self.id));
 
   $effect(() => {
     // monitor if open changes out side of that component
-    updateSingleSelection?.(open, { snippet: children, id: tabId });
+    updateSingleSelection(open, self);
   });
 
   const { base, button } = $derived(tabItem({ open, disabled }));
 </script>
 
 <li {...restProps} class={base({ class: clsx(theme?.base, className) })} role="presentation">
-  <button type="button" onclick={() => (open = true)} role="tab" id={tabId} aria-controls={ctx.panelId} aria-selected={open} {disabled} class={button({ class: clsx(open ? (activeClass ?? active()) : (inactiveClass ?? inactive()), theme?.button, classes?.button) })}>
+  <button type="button" onclick={() => (open = true)} role="tab" id={self.id} aria-controls={ctx.panelId} aria-selected={open} {disabled} class={button({ class: clsx(open ? (activeClass ?? active()) : (inactiveClass ?? inactive()), theme?.button, classes?.button) })}>
     {#if titleSlot}
       {@render titleSlot()}
     {:else}

src/lib/tabs/Tabs.svelte

@@ -17,13 +17,10 @@
   const { base, content, divider: dividerClass } = $derived(tabs({ tabStyle, hasDivider: divider }));
 
   // Generate a unique ID for the tab panel
-  const panelId = `tab-panel-${Math.random().toString(36).substring(2)}`;
+  const uuid = $props.id();
+  const panelId = `tab-panel-${uuid}`;
 
-  const ctx: TabCtxType = $state({
-    tabStyle,
-    selected: undefined,
-    panelId // Add panelId to the context
-  });
+  const ctx: TabCtxType = $state({ tabStyle, panelId });
 
   let dividerBool = $derived(["full", "pill"].includes(tabStyle) ? false : divider);
 
@@ -32,7 +29,7 @@
   createSingleSelectionContext<SelectedTab>();
 
   let selected: SelectedTab = $state({});
-  useSingleSelection<SelectedTab>((v) => (selected = v));
+  useSingleSelection<SelectedTab>((v) => (selected = v ?? {}));
 </script>
 
 <ul role="tablist" {...restProps} class={base({ class: clsx(theme?.base, className ?? ulClass) })}>

src/lib/utils/singleselection.svelte.js

@@ -1,9 +1,9 @@
-import { getContext, setContext } from "svelte";
+import { getContext, setContext, untrack } from "svelte";
 
 /**
  * @template T
  * @typedef {Object} SingleSelectionContext
- * @property {T=} value
+ * @property {T|null} value
  */
 
 /** @type {symbol} */
@@ -12,11 +12,16 @@ const SINGLE_SELECTION_KEY = Symbol("singleton");
 /**
  * @template T
  * @param {boolean} [nonReactive=false] - use a non-reactive placeholder to allow multiple selection and keep context shallow
- * @returns {SingleSelectionContext<T>|null}
+ * @returns {SingleSelectionContext<T>}
  */
 export function createSingleSelectionContext(nonReactive = false) {
-  const context = $state({ value: undefined });
-  return setContext(SINGLE_SELECTION_KEY, nonReactive ? null : context);
+  if (nonReactive) {
+    const context = { value: null };
+    return setContext(SINGLE_SELECTION_KEY, context);
+  } else {
+    const context = $state({ value: null });
+    return setContext(SINGLE_SELECTION_KEY, context);
+  }
 }
 
 /**
@@ -27,22 +32,27 @@ export function createSingleSelectionContext(nonReactive = false) {
  * @returns {SingleSelectionContext<T>}
  */
 function setSelected(context, open, value) {
-  if (open) context.value = value;
-  else if (context.value === value) context.value = undefined;
+  if (open) context.value = value ?? null;
+  else if (context.value === value) context.value = null;
 
   return context;
 }
 
 /**
  * @template T
- * @param {(value: T) => void} callback
+ * @param {(value: T|null) => void} callback
  * @returns {(open: boolean, v?: T) => SingleSelectionContext<T>}
  */
 export function useSingleSelection(callback) {
   const context = getContext(SINGLE_SELECTION_KEY) ?? createSingleSelectionContext(false);
 
+  let initialized = $state(false);
   $effect(() => {
-    if (context.value !== undefined) callback(context.value);
+    if (initialized)
+      // if (context.value !== null)
+      callback(context.value);
+    initialized = true;
   });
-  return (open, v) => setSelected(context, open, v);
+
+  return (open, v) => untrack(() => setSelected(context, open, v));
 }