# All files / form useSelectCombobox.ts

100% Statements 138/138
96% Branches 24/25
100% Functions 5/5
100% Lines 138/138

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    1391x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    27x
    27x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    87x
    87x
    87x
    87x
    87x
    87x
    87x
    87x
    87x
    87x
    87x
    87x
    87x
    87x
    87x
    87x
    19x
    19x
    13x
    13x
    6x
    6x
    19x
    19x
    19x
    3x
    3x
    3x
    3x
    3x
    19x
    19x
    87x
    87x
    87x
    87x
    87x
    87x
    87x
    87x
    348x
    18x
    18x
    18x
    18x
    1x
    1x
    17x
    17x
    17x
    17x
    17x
    17x
    17x
    17x
    18x
    1x
    18x
    16x
    16x
    16x
    16x
    16x
    17x
    17x
    17x
    17x
    17x
    18x
    1x
    1x
    16x
    18x
    18x
    87x
    87x
    261x
    12x
    12x
    12x
    11x
    11x
    11x
    11x
    11x
    11x
    12x
    87x
    87x
     "use client";
    import { TRANSITION_CONFIG } from "../transition/config.js";
    import {
      type TransitionEnterHandler,
      type TransitionExitHandler,
    } from "../transition/types.js";
    import {
      getNonDisabledOptions,
      useCombobox,
      type ComboboxImplementation,
      type ComboboxOptions,
    } from "./useCombobox.js";

    const noop = (): void => {
      // do nothing
    };

    /**
     * @remarks \@since 6.0.0
     */
    export interface SelectComboboxOptions<
      ComboboxEl extends HTMLElement = HTMLInputElement,
      PopupEl extends HTMLElement = HTMLElement,
    > extends ComboboxOptions<ComboboxEl, PopupEl> {
      value: string;
      values: readonly string[];
    }

    /**
     * @remarks \@since 6.0.0
     */
    export interface SelectComboboxImplementation<
      ComboboxEl extends HTMLElement = HTMLInputElement,
      PopupEl extends HTMLElement = HTMLElement,
    > extends ComboboxImplementation<ComboboxEl, PopupEl> {
      handleMounting(
        callback: TransitionEnterHandler | undefined,
        skipped: boolean
      ): TransitionEnterHandler;
      handleUnmounting(
        callback: TransitionExitHandler | undefined,
        skipped: boolean
      ): TransitionExitHandler;
    }

    /**
     * @remarks \@since 6.0.0
     */
    export function useSelectCombobox<
      ComboboxEl extends HTMLElement = HTMLInputElement,
      PopupEl extends HTMLElement = HTMLElement,
    >(
      options: SelectComboboxOptions<ComboboxEl, PopupEl>
    ): SelectComboboxImplementation<ComboboxEl, PopupEl> {
      const {
        getFocusableElements = getNonDisabledOptions,
        value,
        values,
        ...comboboxOptions
      } = options;

      const combobox = useCombobox({
        ...comboboxOptions,
        searchable: true,
        extendKeyDown(movementData) {
          const { event, show, focusLast, visible } = movementData;
          if (visible) {
            return;
          }

          switch (event.key) {
            case " ":
            case "Home":
            case "End":
              event.preventDefault();
              event.stopPropagation();
              focusLast.current = event.key === "End";
              show();
              break;
          }
        },
      });
      const { popupRef, focusLast, currentFocusIndex, setActiveDescendantId } =
        combobox;

      return {
        ...combobox,
        handleMounting:
          (callback = noop, skipped) =>
          (appearing) => {
            callback(appearing);

            const popup = popupRef.current;
            if (!popup || (skipped && !TRANSITION_CONFIG.disabled)) {
              return;
            }

            // Since the keyboard movement behavior is tied to the
            // `TextFieldContainer` or `input` element instead of the menu for this
            // widget, the focus index and active descendant must manually be updated
            // whenever the menu becomes visible. Without this, no items will be
            // focused until the first keyboard event that would move focus
            const focusables = getFocusableElements(popup, true);
            let index: number;
            if (focusLast.current && !value) {
              index = values.length - 1;
            } else {
              index = Math.max(
                0,
                values.findIndex((option) => option === value)
              );
            }
            focusLast.current = false;
            currentFocusIndex.current = index;

            const option = focusables[index];
            // this should only be possible if no valid children were provided
            if (!option) {
              return;
            }
            option.scrollIntoView({ block: "nearest" });
            setActiveDescendantId(option.id || "");
          },
        handleUnmounting:
          (callback = noop, skipped) =>
          () => {
            callback();

            if (!skipped || TRANSITION_CONFIG.disabled) {
              // since the menu is unmounted or set to hidden while not visible, need
              // to clear the aria-activedescendant and current focus index when
              // hiding
              currentFocusIndex.current = -1;
              setActiveDescendantId("");
            }
          },
      };
    }