@celestia-island/hikari 0.4.4 → 0.30.0

package/src/components/HkSelect.tsx

@@ -2,13 +2,15 @@ import {
   computed,
   defineComponent,
   nextTick,
-  onBeforeUnmount,
   ref,
   watch,
   type PropType,
-  Teleport,
 } from "vue";
-import { ChevronDown, Search } from "lucide-vue-next";
+
+
+import { ChevronDown } from "lucide-vue-next";
+import { useBreakpoint } from "../runtime/useBreakpoint";
+import HkSelectPanel from "./HkSelectPanel";
 import "./HkSelect.scss";
 
 export interface HkSelectOption {
@@ -17,6 +19,12 @@ export interface HkSelectOption {
   disabled?: boolean;
 }
 
+/**
+ * Dropdown select. The opened panel — desktop popout and mobile sheet —
+ * lives in HkSelectPanel, the dropdown surface custom triggers may also
+ * invoke directly; this component owns the field chrome (label, trigger
+ * button, error) and the option model with keyboard navigation.
+ */
 export default defineComponent({
   name: "HkSelect",
   props: {
@@ -37,28 +45,14 @@ export default defineComponent({
   setup(props, { emit, slots }) {
     const isOpen = ref(false);
     const triggerRef = ref<HTMLElement>();
-    const panelRef = ref<HTMLElement>();
+    /** The panel surface (HkSelectPanel) — row queries stay scoped to it. */
+    const panelExpose = ref<{ panelEl: () => HTMLElement | null }>();
     const highlightedIndex = ref(-1);
 
-    function onDocumentClick(e: MouseEvent) {
-      if (!isOpen.value) return;
-      const target = e.target as Node;
-      if (triggerRef.value?.contains(target)) return;
-      if (panelRef.value?.contains(target)) return;
-      isOpen.value = false;
-    }
-
-    watch(isOpen, (open) => {
-      if (open) {
-        document.addEventListener("click", onDocumentClick, true);
-      } else {
-        document.removeEventListener("click", onDocumentClick, true);
-      }
-    });
-
-    onBeforeUnmount(() => {
-      document.removeEventListener("click", onDocumentClick, true);
-    });
+    // Pointer-hover highlighting only applies to the desktop popout —
+    // master's sheet rows never had it (spurious tap-highlight on touch).
+    const { isMobile } = useBreakpoint();
+    const sheetMode = computed(() => isMobile.value);
 
     const normalizedOptions = computed<HkSelectOption[]>(
       () => props.options ?? [],
@@ -132,6 +126,17 @@ export default defineComponent({
       }
     }
 
+    function scrollToHighlighted() {
+      // Scoped to OUR panel surface — a document-scoped query could hit
+      // another concurrently open panel's rows (HkPopupSelect rows carry
+      // the same data attribute).
+      const root = panelExpose.value?.panelEl();
+      const el = root?.querySelector(
+        `[data-select-index="${highlightedIndex.value}"]`,
+      );
+      el?.scrollIntoView({ block: "nearest" });
+    }
+
     watch(isOpen, (open) => {
       if (open) {
         const idx = normalizedOptions.value.findIndex(
@@ -146,30 +151,10 @@ export default defineComponent({
       }
     });
 
-    function scrollToHighlighted() {
-      const el = panelRef.value?.querySelector(
-        `[data-select-index="${highlightedIndex.value}"]`,
-      );
-      if (el) {
-        el.scrollIntoView({ block: "nearest" });
-      }
-    }
-
     watch(highlightedIndex, () => {
       scrollToHighlighted();
     });
 
-    const triggerCoords = computed(() => {
-      if (!triggerRef.value) return {};
-      const rect = triggerRef.value.getBoundingClientRect();
-      return {
-        position: "fixed" as const,
-        top: `${rect.bottom + 4}px`,
-        left: `${rect.left}px`,
-        minWidth: `${rect.width}px`,
-      };
-    });
-
     return () => (
       <div class="hk-select-wrapper">
         {props.label ? (
@@ -192,37 +177,37 @@ export default defineComponent({
           <span class="hk-select-value">{displayLabel.value || props.placeholder}</span>
           <ChevronDown size={16} class="hk-select-arrow" />
         </button>
-        {isOpen.value && (
-          <Teleport to="body">
-            <div
-              ref={panelRef}
-              class="hk-select-popout"
-              style={triggerCoords.value}
-              onKeydown={onPopoutKeydown}
-            >
-              {slots.default
-                ? slots.default()
-                : normalizedOptions.value.map((opt, i) => (
-                    <div
-                      key={opt.value}
-                      class="hk-select-option"
-                      data-highlighted={highlightedIndex.value === i || undefined}
-                      data-select-index={i}
-                      data-checked={opt.value === props.modelValue || undefined}
-                      data-disabled={opt.disabled || undefined}
-                      onClick={() => {
-                        if (!opt.disabled) select(opt.value);
-                      }}
-                      onPointerenter={() => {
-                        highlightedIndex.value = i;
-                      }}
-                    >
-                      <span>{opt.label}</span>
-                    </div>
-                  ))}
-            </div>
-          </Teleport>
-        )}
+        <HkSelectPanel
+          ref={panelExpose}
+          open={isOpen.value}
+          onUpdate:open={(v: boolean) => { isOpen.value = v; }}
+          anchorRef={triggerRef.value ?? null}
+          title={props.label ?? ""}
+          placement="bottom-start"
+          offset={4}
+          onKeydown={onPopoutKeydown}
+        >
+          {slots.default
+            ? slots.default()
+            : normalizedOptions.value.map((opt, i) => (
+                <div
+                  key={opt.value}
+                  class="hk-select-option"
+                  data-highlighted={highlightedIndex.value === i || undefined}
+                  data-select-index={i}
+                  data-checked={opt.value === props.modelValue || undefined}
+                  data-disabled={opt.disabled || undefined}
+                  onClick={() => {
+                    if (!opt.disabled) select(opt.value);
+                  }}
+                  {...(isOpen.value && !sheetMode.value
+                    ? { onPointerenter: () => { highlightedIndex.value = i; } }
+                    : {})}
+                >
+                  <span>{opt.label}</span>
+                </div>
+              ))}
+        </HkSelectPanel>
         {props.error ? <p class="hk-select-error">{props.error}</p> : null}
       </div>
     );