@oslokommune/punkt-elements 15.4.5 → 16.0.2

package/src/components/combobox/combobox-handlers.ts

@@ -0,0 +1,419 @@
+import { findOptionByValue, findTypeaheadMatches } from 'shared-utils/combobox/option-utils'
+import {
+  getInputKeyAction,
+  getInputValueAction,
+  checkForMatches,
+  getSingleValueForInput,
+} from 'shared-utils/combobox/input-utils'
+import { ComboboxValue } from './combobox-value'
+import type { PktTag } from '../tag'
+
+/**
+ * Event handler layer for PktCombobox.
+ * Handles user interactions: input, focus, keyboard, clicks, tags.
+ */
+export class ComboboxHandlers extends ComboboxValue {
+  protected handleInput(e: InputEvent): void {
+    e.stopPropagation()
+    e.stopImmediatePropagation()
+
+    if (this.disabled) return
+
+    this.touched = true
+    const input = e.target as HTMLInputElement
+    this._search = input.value
+    this.checkForMatches()
+
+    if (this.typeahead) {
+      if (this._search) {
+        const { filtered, suggestion } = findTypeaheadMatches(this.options, this._search)
+        this._options = filtered
+
+        if (
+          e.inputType !== 'deleteContentBackward' &&
+          suggestion?.label &&
+          this.inputRef.value &&
+          this.inputRef.value.type !== 'hidden'
+        ) {
+          input.value = suggestion.label
+          window.setTimeout(
+            () => input.setSelectionRange(this._search.length, input.value.length),
+            0,
+          )
+          input.selectionDirection = 'backward'
+        }
+      } else {
+        this._options = [...this.options]
+      }
+    }
+  }
+
+  protected handleFocus(): void {
+    if (this.disabled) return
+
+    // After selecting a value in single+typeahead, focus returns to the input.
+    // Skip reopening the dropdown so screen readers announce the selected value.
+    if (this._suppressNextOpen) {
+      this._suppressNextOpen = false
+      this._inputFocus = true
+      this.requestUpdate()
+      return
+    }
+
+    if (
+      !this.multiple &&
+      this._value[0] &&
+      this.inputRef.value &&
+      this.inputRef.value.type !== 'hidden'
+    ) {
+      this.inputRef.value.value = getSingleValueForInput(
+        this._value[0],
+        this.options,
+        this.displayValueAs,
+      )
+    }
+    this._inputFocus = true
+    this._search = ''
+    this._options = [...this.options]
+    this._isOptionsOpen = true
+    this.onFocus()
+
+    this.requestUpdate()
+  }
+
+  protected handleFocusOut(e: FocusEvent): void {
+    if (this.disabled || !this._isOptionsOpen) return
+
+    const related = e.relatedTarget as Element | null
+    const isFocusInsideCombobox =
+      related?.closest('pkt-combobox')?.id === this.id ||
+      (e.target as Element)?.getAttribute('data-focusfix') === this.id ||
+      related === this.inputRef.value ||
+      related === this.triggerRef.value
+
+    if (!isFocusInsideCombobox) {
+      this.closeAndProcessInput()
+    }
+  }
+
+  /**
+   * Shared close logic used by both focusout and outside-click handlers.
+   * Processes any pending input value, then closes the dropdown.
+   */
+  protected closeAndProcessInput(): void {
+    this._inputFocus = false
+    this._addValueText = null
+    this._userInfoMessage = ''
+    this._search = ''
+
+    if (this.inputRef.value && this.inputRef.value.type !== 'hidden') {
+      const inputText = this.inputRef.value.value
+
+      if (!this.multiple) {
+        if (!inputText) {
+          // Empty input — clear the selection
+          if (this._value[0]) this.removeSelected(this._value[0])
+        } else {
+          // Try to match input text to an option (by value or label)
+          const match = findOptionByValue(this.options, inputText)
+          if (match && match.value !== this._value[0]) {
+            // Input matches a different option — select it
+            this._value[0] && this.removeSelected(this._value[0])
+            this.setSelected(match.value)
+          } else if (!match && this.allowUserInput) {
+            // No match + allowUserInput — set as user value
+            this._value[0] && this.removeSelected(this._value[0])
+            this.addNewUserValue(inputText)
+          }
+          // No match, no allowUserInput — discard, keep previous selection
+        }
+      } else if (inputText !== '') {
+        // Multi: process typed text (add/select/remove)
+        const { action, value } = getInputValueAction(
+          inputText,
+          this._value,
+          this.options,
+          this.allowUserInput,
+          this.multiple,
+        )
+        switch (action) {
+          case 'addUserValue':
+            this.addNewUserValue(value)
+            break
+          case 'selectOption':
+            this.setSelected(value)
+            break
+          case 'removeValue':
+            this.removeValue(value)
+            break
+        }
+      }
+
+      // Restore input to display text of current selection (or clear)
+      if (!this.multiple && this._value[0]) {
+        this.inputRef.value.value = getSingleValueForInput(
+          this._value[0],
+          this.options,
+          this.displayValueAs,
+        )
+      } else {
+        this.inputRef.value.value = ''
+      }
+    }
+    this._isOptionsOpen = false
+    this.onBlur()
+  }
+
+  protected handleBlur(): void {
+    this._inputFocus = false
+    this.onBlur()
+  }
+
+  protected handleInputClick(e: MouseEvent): void {
+    if (this.disabled) {
+      e.preventDefault()
+      e.stopImmediatePropagation()
+      return
+    }
+    if (this._hasTextInput) {
+      this.inputRef.value?.focus()
+      this.requestUpdate()
+    } else {
+      // Select-only: toggle the listbox
+      e.stopImmediatePropagation()
+      e.preventDefault()
+      this._isOptionsOpen = !this._isOptionsOpen
+      if (this._isOptionsOpen) {
+        this.listboxRef.value?.focusFirstOrSelectedOption()
+      }
+    }
+  }
+
+  protected handlePlaceholderClick(e: MouseEvent): void {
+    if (this.disabled) return
+    e.stopPropagation()
+    if (this._hasTextInput && this.inputRef.value) {
+      this.inputRef.value.focus()
+      this._inputFocus = true
+      this.requestUpdate()
+    } else {
+      this._isOptionsOpen = !this._isOptionsOpen
+      this.requestUpdate()
+    }
+  }
+
+  protected handleSelectOnlyKeydown(e: KeyboardEvent): void {
+    if (this.disabled) return
+
+    switch (e.key) {
+      case 'Enter':
+      case ' ':
+      case 'ArrowDown':
+      case 'ArrowUp':
+        e.preventDefault()
+        if (!this._isOptionsOpen) {
+          this._isOptionsOpen = true
+          this.listboxRef.value?.focusFirstOrSelectedOption()
+        } else {
+          this._isOptionsOpen = false
+        }
+        break
+      case 'Escape':
+        if (this._isOptionsOpen) {
+          e.preventDefault()
+          this._isOptionsOpen = false
+        }
+        break
+      case 'Home':
+      case 'End':
+        e.preventDefault()
+        if (!this._isOptionsOpen) {
+          this._isOptionsOpen = true
+        }
+        this.listboxRef.value?.focusFirstOrSelectedOption()
+        break
+      case 'ArrowLeft':
+        if (this.multiple && this._value.length > 0) {
+          e.preventDefault()
+          this.focusTag(this._value.length - 1)
+        }
+        break
+      case 'Backspace':
+      case 'Delete':
+        if (this.multiple && this._value.length > 0) {
+          e.preventDefault()
+          this.removeSelected(this._value[this._value.length - 1])
+        }
+        break
+    }
+  }
+
+  protected handleOptionToggled(e: CustomEvent) {
+    this.toggleValue(e.detail)
+  }
+
+  protected handleSearch(e: CustomEvent) {
+    e.stopPropagation()
+    this._search = e.detail.toLowerCase()
+    this.checkForMatches()
+  }
+
+  protected handleInputKeydown(e: KeyboardEvent): void {
+    // Backspace has special DOM-dependent conditions
+    if (e.key === 'Backspace') {
+      const inputEmpty = !this.inputRef.value?.value
+      if (!this._search && inputEmpty && this.multiple && this._value.length > 0)
+        this.removeLastValue(e)
+      return
+    }
+
+    if (e.key === 'ArrowLeft' && this.multiple && this._value.length > 0) {
+      const input = this.inputRef.value
+      if (input && input.selectionStart === 0 && !input.value) {
+        e.preventDefault()
+        this.focusTag(this._value.length - 1)
+        return
+      }
+    }
+
+    const action = getInputKeyAction(e.key, e.shiftKey, this.multiple)
+    if (!action) return
+
+    // When the dropdown is closed, let Tab move focus naturally.
+    if (e.key === 'Tab' && !this._isOptionsOpen) return
+
+    // For Tab/'focusListbox': only focus the listbox if it has focusable options.
+    // If the listbox is empty (no matches), close and let Tab move focus naturally.
+    if (action === 'focusListbox' && e.key === 'Tab') {
+      const hasFocusable = this.listboxRef.value?.querySelector(
+        '[role="option"]:not([data-disabled]), [data-type="new-option"]',
+      )
+      if (!hasFocusable) {
+        this.closeAndProcessInput()
+        return
+      }
+    }
+
+    e.preventDefault()
+    switch (action) {
+      case 'addValue':
+        this.addValue()
+        break
+      case 'focusListbox':
+        this.listboxRef.value?.focusFirstOrSelectedOption()
+        break
+      case 'closeOptions':
+        this._isOptionsOpen = false
+        // Don't refocus — the text input already has focus, and focusing
+        // it again would trigger handleFocus which reopens the dropdown
+        break
+    }
+  }
+
+  protected handleTagRemove(value: string | null): void {
+    this.removeSelected(value)
+    if (this._hasTextInput && this.inputRef.value) {
+      this._inputFocus = true
+      this.inputRef.value.focus()
+      this.requestUpdate()
+    }
+  }
+
+  protected getInsideTags(): HTMLElement[] {
+    return Array.from(
+      this.querySelectorAll<HTMLElement>('.pkt-combobox__input .pkt-combobox__tag-list pkt-tag'),
+    )
+  }
+
+  protected focusTag(index: number): void {
+    const tags = this.getInsideTags()
+    tags.forEach((tag, i) => {
+      ;(tag as PktTag).buttonTabindex = i === index ? 0 : -1
+    })
+    // Focus the button inside the target pkt-tag
+    const btn = tags[index]?.querySelector('button')
+    btn?.focus()
+  }
+
+  protected resetTagTabindices(): void {
+    const tags = this.getInsideTags()
+    tags.forEach((tag) => {
+      ;(tag as PktTag).buttonTabindex = -1
+    })
+  }
+
+  protected handleTagKeydown(e: KeyboardEvent, index: number): void {
+    e.stopPropagation()
+    const returnFocusToTrigger = () => {
+      this.resetTagTabindices()
+      if (this._hasTextInput && this.inputRef.value) {
+        this.inputRef.value.focus()
+      } else {
+        this.triggerRef.value?.focus()
+      }
+    }
+
+    switch (e.key) {
+      case 'ArrowLeft':
+        e.preventDefault()
+        if (index > 0) {
+          this.focusTag(index - 1)
+        }
+        break
+      case 'ArrowRight':
+        e.preventDefault()
+        if (index < this._value.length - 1) {
+          this.focusTag(index + 1)
+        } else {
+          returnFocusToTrigger()
+        }
+        break
+      case 'Backspace':
+      case 'Delete':
+        e.preventDefault()
+        {
+          const val = this._value[index]
+          const nextIndex = index >= this._value.length - 1 ? index - 1 : index
+          this.removeSelected(val)
+          if (nextIndex >= 0) {
+            this.requestUpdate()
+            this.updateComplete.then(() => this.focusTag(nextIndex))
+          } else {
+            returnFocusToTrigger()
+          }
+        }
+        break
+      case 'Tab':
+        // Let Tab move focus naturally, but reset roving tabindex
+        // so the next Tab into the combobox lands on the trigger, not a tag
+        this.resetTagTabindices()
+        break
+      case 'Escape':
+        e.preventDefault()
+        returnFocusToTrigger()
+        break
+    }
+  }
+
+  protected checkForMatches() {
+    const inputValue = this.inputRef.value?.value || this._search || ''
+    const result = checkForMatches(
+      inputValue,
+      this._value,
+      this.options,
+      this.allowUserInput,
+      this.multiple,
+    )
+
+    if (result.shouldRemoveValue) {
+      this.removeValue(this._value[0])
+    }
+    if (result.shouldResetInput) {
+      this.resetComboboxInput(false)
+      return
+    }
+
+    this._addValueText = result.addValueText
+    this._userInfoMessage = result.userInfoMessage
+  }
+}

package/src/components/combobox/combobox-types.ts

@@ -0,0 +1,10 @@
+/**
+ * Type definitions for the combobox component family.
+ * Re-exports from shared-types for backward compatibility.
+ */
+export type {
+  IPktComboboxOption,
+  TPktComboboxTagSkin,
+  TPktComboboxDisplayValue,
+  TPktComboboxTagPlacement,
+} from 'shared-types/combobox'

package/src/components/combobox/combobox-utils.ts

@@ -0,0 +1,135 @@
+import type { IPktComboboxOption } from 'shared-types/combobox'
+import type { TTagSkin } from '../tag'
+import { buildFulltext } from 'shared-utils/combobox/option-utils'
+
+/**
+ * Lit-specific utility functions for PktCombobox component.
+ *
+ * Framework-agnostic functions live in shared-utils/combobox/.
+ * Only Lit-specific functions (using Ref, in-place mutation, PktSlotController) stay here.
+ */
+
+// Selection state helpers (mutating, Lit-specific)
+
+/**
+ * In-place option mutation helpers that preserve referential identity
+ * between this._options and this.options in the Lit component.
+ */
+export const selectionMutators = {
+  markOptionSelected(options: IPktComboboxOption[], value: string | null): void {
+    if (!value) return
+    for (const option of options) {
+      if (option.value === value) {
+        option.selected = true
+        break
+      }
+    }
+  },
+
+  markOptionDeselected(options: IPktComboboxOption[], value: string | null): void {
+    if (!value) return
+    for (const option of options) {
+      if (option.value === value) {
+        option.selected = false
+        break
+      }
+    }
+  },
+
+  markAllSelected(options: IPktComboboxOption[]): void {
+    for (const option of options) {
+      option.selected = true
+    }
+  },
+
+  markAllDeselected(options: IPktComboboxOption[]): void {
+    for (const option of options) {
+      option.selected = false
+    }
+  },
+
+  removeUserAddedOptions(options: IPktComboboxOption[]): IPktComboboxOption[] {
+    return options.filter((option) => !option.userAdded)
+  },
+}
+
+// Slot parsing (Lit-specific)
+
+/**
+ * Parses option elements from slot controller nodes into IPktComboboxOption[].
+ */
+export const slotUtils = {
+  parseOptionsFromSlot(nodes: Element[]): IPktComboboxOption[] {
+    const options: IPktComboboxOption[] = []
+
+    nodes.forEach((node: Element) => {
+      if (!node.textContent && !node.getAttribute('value')) return
+
+      const option: IPktComboboxOption = {
+        value: node.getAttribute('value') || node.textContent || '',
+        label: node.textContent || node.getAttribute('value') || '',
+      }
+
+      if (node.getAttribute('data-prefix')) {
+        option.prefix = node.getAttribute('data-prefix') || undefined
+      }
+      if (node.getAttribute('tagskincolor')) {
+        option.tagSkinColor = node.getAttribute('tagskincolor') as TTagSkin
+      }
+      if (node.getAttribute('description')) {
+        option.description = node.getAttribute('description') || undefined
+      }
+
+      option.fulltext = buildFulltext(option)
+      options.push(option)
+    })
+
+    return options
+  },
+}
+
+// Options state synchronization (Lit-specific, in-place mutation)
+
+export const optionStateUtils = {
+  /**
+   * Ensures options have labels and fulltext set.
+   * Also syncs selected state with current values.
+   *
+   * IMPORTANT: Mutates options in place to preserve referential identity
+   * between this._options and this.options in the Lit component.
+   */
+  syncOptionsWithValues(
+    options: IPktComboboxOption[],
+    values: string[],
+  ): { options: IPktComboboxOption[]; newValues: string[] } {
+    const newValues = [...values]
+
+    options.forEach((option) => {
+      if (option.value && !option.label) {
+        option.label = option.value
+      }
+      if (option.selected && !newValues.includes(option.value)) {
+        newValues.push(option.value)
+      }
+      option.fulltext = buildFulltext(option)
+      option.selected = option.selected || newValues.includes(option.value)
+    })
+
+    return { options, newValues }
+  },
+
+  /**
+   * Merges user-added options with new options, preserving user additions.
+   */
+  mergeWithUserAdded(
+    newOptions: IPktComboboxOption[],
+    previousOptions: IPktComboboxOption[],
+  ): IPktComboboxOption[] {
+    const userAddedValues = previousOptions.filter((option) => option?.userAdded && option.selected)
+    const filteredUserAdded = userAddedValues.filter(
+      (userOpt) =>
+        !(Array.isArray(newOptions) ? newOptions : []).some((opt) => opt.value === userOpt.value),
+    )
+    return [...filteredUserAdded, ...newOptions]
+  },
+}