$api?. => $api. when possible

Now that this stuff has all been cleaned up with useXContext functions

src/lib/components/dialog/Dialog.svelte

@@ -142,7 +142,7 @@
     if (containers.size !== 1) return;
     if (contains(containers, target)) return;
 
-    $api?.close();
+    $api.close();
     await tick();
     target?.focus();
   }
@@ -154,7 +154,7 @@
     if (containers.size > 1) return; // 1 is myself, otherwise other elements in the Stack
     event.preventDefault();
     event.stopPropagation();
-    $api?.close();
+    $api.close();
   }
 
   let mounted = false;
@@ -202,7 +202,7 @@
           entry.boundingClientRect.width === 0 &&
           entry.boundingClientRect.height === 0
         ) {
-          $api?.close();
+          $api.close();
         }
       }
     });

src/lib/components/dialog/DialogOverlay.svelte

@@ -7,7 +7,7 @@
     if (event.target !== event.currentTarget) return;
     event.preventDefault();
     event.stopPropagation();
-    $api?.close();
+    $api.close();
   }
   $: propsWeControl = {
     id,
@@ -16,5 +16,5 @@
 </script>
 
 <div {...{ ...$$restProps, ...propsWeControl }} on:click={handleClick}>
-  <slot open={$api?.dialogState === DialogStates.Open} />
+  <slot open={$api.dialogState === DialogStates.Open} />
 </div>

src/lib/components/disclosure/Disclosure.svelte

@@ -103,5 +103,5 @@
 </script>
 
 <div {...$$restProps}>
-  <slot open={disclosureState === DisclosureStates.Open} close={$api?.close} />
+  <slot open={disclosureState === DisclosureStates.Open} close={$api.close} />
 </div>

src/lib/components/disclosure/DisclosureButton.svelte

@@ -8,11 +8,11 @@
   const panelContext = usePanelContext();
   const id = `headlessui-disclosure-button-${useId()}`;
 
-  $: buttonStore = $api?.buttonStore;
+  $: buttonStore = $api.buttonStore;
-  $: panelStore = $api?.panelStore;
+  $: panelStore = $api.panelStore;
 
   $: isWithinPanel =
-    panelContext === null ? false : panelContext === $api?.panelId;
+    panelContext === null ? false : panelContext === $api.panelId;
 
   function handleClick() {
     if (disabled) return;
@@ -68,7 +68,7 @@
         "aria-expanded": disabled
           ? undefined
           : $api.disclosureState === DisclosureStates.Open,
-        "aria-controls": $panelStore ? $api?.panelId : undefined,
+        "aria-controls": $panelStore ? $api.panelId : undefined,
         disabled: disabled ? true : undefined,
       };
 </script>
@@ -80,8 +80,8 @@
     on:keydown={handleKeyDown}
   >
     <slot
-      open={$api?.disclosureState === DisclosureStates.Open}
+      open={$api.disclosureState === DisclosureStates.Open}
-      close={$api?.close}
+      close={$api.close}
     />
   </button>
 {:else}
@@ -93,8 +93,8 @@
     on:keyup={handleKeyUp}
   >
     <slot
-      open={$api?.disclosureState === DisclosureStates.Open}
+      open={$api.disclosureState === DisclosureStates.Open}
-      close={$api?.close}
+      close={$api.close}
     />
   </button>
 {/if}

src/lib/components/disclosure/DisclosurePanel.svelte

@@ -11,17 +11,17 @@
   import { useDisclosureContext, DisclosureStates } from "./Disclosure.svelte";
   import { State, useOpenClosed } from "$lib/internal/open-closed";
   const api = useDisclosureContext("DisclosureButton");
-  $: id = $api?.panelId;
+  $: id = $api.panelId;
   let openClosedState = useOpenClosed();
 
   setContext(DISCLOSURE_PANEL_CONTEXT_NAME, id);
 
-  $: panelStore = $api?.panelStore;
+  $: panelStore = $api.panelStore;
 
   $: visible =
     $openClosedState !== null
       ? $openClosedState === State.Open
-      : $api?.disclosureState === DisclosureStates.Open;
+      : $api.disclosureState === DisclosureStates.Open;
 
   $: propsWeControl = { id };
 </script>
@@ -29,8 +29,8 @@
 {#if visible}
   <div {...{ ...$$restProps, ...propsWeControl }} bind:this={$panelStore}>
     <slot
-      open={$api?.disclosureState === DisclosureStates.Open}
+      open={$api.disclosureState === DisclosureStates.Open}
-      close={$api?.close}
+      close={$api.close}
     />
   </div>
 {/if}

src/lib/components/listbox/ListboxButton.svelte

@@ -65,9 +65,9 @@
     "aria-controls": $optionsRef?.id,
     "aria-expanded": $api.disabled
       ? undefined
-      : $api?.listboxState === ListboxStates.Open,
+      : $api.listboxState === ListboxStates.Open,
     "aria-labelledby": $labelRef ? [$labelRef?.id, id].join(" ") : undefined,
-    disabled: $api?.disabled === true ? true : undefined,
+    disabled: $api.disabled === true ? true : undefined,
   };
 </script>
 

src/lib/components/listbox/ListboxOption.svelte

@@ -11,11 +11,11 @@
   let buttonRef = $api.buttonRef;
 
   $: active =
-    $api?.activeOptionIndex !== null
+    $api.activeOptionIndex !== null
-      ? $api?.options[$api.activeOptionIndex].id === id
+      ? $api.options[$api.activeOptionIndex].id === id
       : false;
 
-  $: selected = $api?.value === value;
+  $: selected = $api.value === value;
   $: dataRef = {
     disabled,
     value,
@@ -33,7 +33,7 @@
   onMount(() => $api.registerOption(id, dataRef));
   onDestroy(() => $api.unregisterOption(id));
 
-  let oldState = $api?.listboxState;
+  let oldState = $api.listboxState;
   let oldSelected = selected;
   let oldActive = active;
   async function updateFocus(
@@ -45,7 +45,7 @@
     await tick();
     if (newState !== oldState || newSelected !== oldSelected) {
       if (newState === ListboxStates.Open && newSelected) {
-        $api?.goToOption(Focus.Specific, id);
+        $api.goToOption(Focus.Specific, id);
       }
     }
     if (newState !== oldState || newActive !== oldActive) {
@@ -57,7 +57,7 @@
     oldSelected = newSelected;
     oldActive = newActive;
   }
-  $: updateFocus($api?.listboxState, selected, active);
+  $: updateFocus($api.listboxState, selected, active);
 
   async function handleClick(event: MouseEvent) {
     if (disabled) return event.preventDefault();

src/lib/components/listbox/ListboxOptions.svelte

@@ -91,11 +91,11 @@
 
   $: propsWeControl = {
     "aria-activedescendant":
-      $api?.activeOptionIndex === null
+      $api.activeOptionIndex === null
         ? undefined
-        : $api?.options[$api.activeOptionIndex]?.id,
+        : $api.options[$api.activeOptionIndex]?.id,
     "aria-labelledby": $labelRef?.id ?? $buttonRef?.id,
-    "aria-orientation": $api?.orientation,
+    "aria-orientation": $api.orientation,
     id,
     role: "listbox",
     tabIndex: 0,
@@ -115,6 +115,6 @@
     {...$$restProps}
     {...propsWeControl}
   >
-    <slot open={$api?.listboxState === ListboxStates.Open} />
+    <slot open={$api.listboxState === ListboxStates.Open} />
   </ul>
 {/if}

src/lib/components/menu/MenuButton.svelte

@@ -10,8 +10,8 @@
   const api = useMenuContext("MenuButton");
   const id = `headlessui-menu-button-${useId()}`;
 
-  $: buttonStore = $api?.buttonStore;
+  $: buttonStore = $api.buttonStore;
-  $: itemsStore = $api?.itemsStore;
+  $: itemsStore = $api.itemsStore;
   async function handleKeyDown(event: KeyboardEvent) {
     switch (event.key) {
       // Ref: https://www.w3.org/TR/wai-aria-practices-1.2/#keyboard-interaction-13
@@ -80,5 +80,5 @@
   on:keydown={handleKeyDown}
   on:keyup={handleKeyUp}
 >
-  <slot open={$api?.menuState === MenuStates.Open} />
+  <slot open={$api.menuState === MenuStates.Open} />
 </button>

src/lib/components/menu/MenuItem.svelte

@@ -10,11 +10,11 @@
   const id = `headlessui-menu-item-${useId()}`;
 
   $: active =
-    $api?.activeItemIndex !== null
+    $api.activeItemIndex !== null
-      ? $api?.items[$api?.activeItemIndex].id === id
+      ? $api.items[$api.activeItemIndex].id === id
       : false;
 
-  $: buttonStore = $api?.buttonStore;
+  $: buttonStore = $api.buttonStore;
 
   let elementRef: HTMLDivElement | undefined;
   $: textValue = elementRef?.textContent?.toLowerCase().trim();
@@ -22,7 +22,7 @@
 
   onMount(async () => {
     await tick();
-    $api?.registerItem(id, data);
+    $api.registerItem(id, data);
   });
 
   onDestroy(() => {

src/lib/components/menu/MenuItems.svelte

@@ -12,8 +12,8 @@
   const id = `headlessui-menu-items-${useId()}`;
   let searchDebounce: ReturnType<typeof setTimeout> | null = null;
 
-  $: buttonStore = $api?.buttonStore;
+  $: buttonStore = $api.buttonStore;
-  $: itemsStore = $api?.itemsStore;
+  $: itemsStore = $api.itemsStore;
 
   let openClosedState = useOpenClosed();
 
@@ -24,7 +24,7 @@
 
   $: treeWalker({
     container: $itemsStore,
-    enabled: $api?.menuState === MenuStates.Open,
+    enabled: $api.menuState === MenuStates.Open,
     accept(node) {
       if (node.getAttribute("role") === "menuitem")
         return NodeFilter.FILTER_REJECT;

src/lib/components/radio-group/RadioGroupOption.svelte

@@ -20,15 +20,15 @@
   let state = OptionState.Empty;
 
   function updateOption(option: Option) {
-    $api?.unregisterOption(option.id);
+    $api.unregisterOption(option.id);
-    $api?.registerOption(option);
+    $api.registerOption(option);
   }
   $: updateOption({ id, element: optionRef, propsRef });
-  onDestroy(() => $api?.unregisterOption(id));
+  onDestroy(() => $api.unregisterOption(id));
 
-  $: isFirstOption = $api?.firstOption?.id === id;
+  $: isFirstOption = $api.firstOption?.id === id;
-  $: isDisabled = $api?.disabled || disabled;
+  $: isDisabled = $api.disabled || disabled;
-  $: checked = $api?.value === value;
+  $: checked = $api.value === value;
 
   $: tabIndex = (() => {
     if (isDisabled) return -1;

src/lib/components/tabs/Tab.svelte

@@ -22,13 +22,13 @@
   $: selected = myIndex === $api.selectedIndex;
 
   function handleKeyDown(event: KeyboardEvent) {
-    let list = $api?.tabs.filter(Boolean) as HTMLElement[];
+    let list = $api.tabs.filter(Boolean) as HTMLElement[];
 
     if (event.key === Keys.Space || event.key === Keys.Enter) {
       event.preventDefault();
       event.stopPropagation();
 
-      $api?.setSelectedIndex(myIndex);
+      $api.setSelectedIndex(myIndex);
       return;
     }
 
@@ -74,7 +74,7 @@
     if (disabled) return;
 
     tabRef?.focus();
-    $api?.setSelectedIndex(myIndex);
+    $api.setSelectedIndex(myIndex);
   }
 
   $: propsWeControl = {