@warkypublic/svelix 0.1.20 → 0.1.22

package/dist/components/Boxer/Boxer.svelte

@@ -91,6 +91,8 @@
   let backdropZ = $state(1090);
   let dropdownZ = $state(1100);
   let pointerInteractingWithDropdown = $state(false);
+  let insideDialog = $state(false);
+  const effectiveDisablePortal = $derived(disablePortal || insideDialog);
   // Plain variable — NOT $state to avoid deep proxy on the complex virtualizer object.
   let rawVirtualizer: SvelteVirtualizer<
     HTMLDivElement,
@@ -342,6 +344,24 @@
     }, 0);
   }
 
+  function onBackdropPointerDown(e: PointerEvent) {
+    // Consume the pointer sequence so it cannot activate elements behind the backdrop.
+    e.preventDefault();
+    e.stopPropagation();
+    store.setOpened(false);
+  }
+
+  function onOptionPointerDown(e: PointerEvent, index: number) {
+    // Commit selection before blur/focusout closes the popover on some browsers.
+    e.preventDefault();
+    e.stopPropagation();
+    onOptionSubmit(index);
+  }
+
+  function syncInsideDialogFlag() {
+    insideDialog = !!anchorEl?.closest('dialog, [role="dialog"]');
+  }
+
   // Public API via bind:this
   export function clear() {
     onClear();
@@ -364,7 +384,7 @@
   }
 
   $effect(() => {
-    if (!$store.opened || disablePortal || disabled) {
+    if (!$store.opened || effectiveDisablePortal || disabled) {
       return;
     }
 
@@ -394,7 +414,7 @@
 
     const overlay = registerOverlay({
       kind: "popover",
-      mount: disablePortal ? "inline" : "portal",
+      mount: effectiveDisablePortal ? "inline" : "portal",
     });
     backdropZ = overlay.layer.backdrop;
     dropdownZ = overlay.layer.content;
@@ -405,6 +425,32 @@
       dropdownZ = 1100;
     };
   });
+
+  $effect(() => {
+    anchorEl;
+    storeOpened;
+    syncInsideDialogFlag();
+  });
+
+  $effect(() => {
+    if (!$store.opened || !effectiveDisablePortal || disabled || typeof window === "undefined") {
+      return;
+    }
+
+    const onDocumentPointerDown = (event: PointerEvent) => {
+      const target = event.target as Node | null;
+      if (!target) return;
+
+      const insideAnchor = !!anchorEl?.contains(target);
+      const insideDropdown = !!dropdownEl?.contains(target);
+      if (!insideAnchor && !insideDropdown) {
+        store.setOpened(false);
+      }
+    };
+
+    window.addEventListener("pointerdown", onDocumentPointerDown, true);
+    return () => window.removeEventListener("pointerdown", onDocumentPointerDown, true);
+  });
 </script>
 
 <div
@@ -444,28 +490,30 @@
     }}
   />
 
-  <Portal disabled={disablePortal}>
+  <Portal disabled={effectiveDisablePortal}>
     {#if $store.opened}
-      <!-- svelte-ignore a11y_click_events_have_key_events -->
-      <!-- svelte-ignore a11y_no_static_element_interactions -->
-      <div
-        class="fixed inset-0"
-        onclick={() => store.setOpened(false)}
-        style:z-index={backdropZ}
-      ></div>
+      {#if !effectiveDisablePortal}
+        <!-- svelte-ignore a11y_click_events_have_key_events -->
+        <!-- svelte-ignore a11y_no_static_element_interactions -->
+        <div
+          class="fixed inset-0"
+          onpointerdown={onBackdropPointerDown}
+          style:z-index={backdropZ}
+        ></div>
+      {/if}
 
       <div
         bind:this={dropdownEl}
-        class={`${disablePortal
+        class={`${effectiveDisablePortal
           ? "absolute left-0 right-0 top-full mt-1"
           : "fixed"} card bg-surface-50-950 shadow-lg border border-surface-300-700 overflow-hidden`}
         role="listbox"
         aria-label={label ?? "Options"}
         onpointerdown={markDropdownPointerInteraction}
         style:z-index={dropdownZ}
-        style:top={!disablePortal ? `${popupTop}px` : undefined}
-        style:left={!disablePortal ? `${popupLeft}px` : undefined}
-        style:width={!disablePortal ? `${popupWidth}px` : undefined}
+        style:top={!effectiveDisablePortal ? `${popupTop}px` : undefined}
+        style:left={!effectiveDisablePortal ? `${popupLeft}px` : undefined}
+        style:width={!effectiveDisablePortal ? `${popupWidth}px` : undefined}
       >
         {#if $store.boxerData.length > 0}
           <div
@@ -496,7 +544,7 @@
                     role="option"
                     aria-selected={isSelected}
                     tabindex="-1"
-                    onclick={() => onOptionSubmit(vRow.index)}
+                    onpointerdown={(e) => onOptionPointerDown(e, vRow.index)}
                     onkeydown={(e) => onDropdownItemKeydown(e, vRow.index)}
                   >
                     {#if multiSelect}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@warkypublic/svelix",
-  "version": "0.1.20",
+  "version": "0.1.22",
   "description": "Svelte 5 component library with Skeleton UI and Tailwind CSS",
   "license": "Apache-2.0",
   "exports": {
@@ -83,7 +83,7 @@
   },
   "scripts": {
     "dev": "vite dev",
-    "build": "vite build",
+    "build": "vite build && pnpm run package",
     "preview": "vite preview",
     "package": "svelte-kit sync && svelte-package && mkdir -p dist/css && cp src/lib/css/tailwind-source.css dist/css/tailwind-source.css && publint",
     "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",