@dbcdk/react-components 0.0.169 → 0.0.171

package/dist/components/forms/typeahead/Typeahead.js

@@ -0,0 +1,800 @@
+'use client';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import * as React from 'react';
+import { useRef, useId, useMemo, useState, useLayoutEffect, useEffect } from 'react';
+import { Chip } from '../../../components/chip/Chip';
+import { Input } from '../../../components/forms/input/Input';
+import { Menu } from '../../../components/menu/Menu';
+import { Popover } from '../../../components/popover/Popover';
+import styles from './Typeahead.module.css';
+
+function parseLengthToPx(value, referenceFontSize = 16) {
+  if (!value) return 0;
+  const trimmed = value.trim();
+  if (!trimmed) return 0;
+  if (trimmed.endsWith("px")) {
+    const n2 = Number.parseFloat(trimmed);
+    return Number.isFinite(n2) ? n2 : 0;
+  }
+  if (trimmed.endsWith("rem")) {
+    const n2 = Number.parseFloat(trimmed);
+    if (!Number.isFinite(n2)) return 0;
+    const rootFont = Number.parseFloat(getComputedStyle(document.documentElement).fontSize || "16");
+    return n2 * (Number.isFinite(rootFont) ? rootFont : 16);
+  }
+  if (trimmed.endsWith("em")) {
+    const n2 = Number.parseFloat(trimmed);
+    return Number.isFinite(n2) ? n2 * referenceFontSize : 0;
+  }
+  const n = Number.parseFloat(trimmed);
+  return Number.isFinite(n) ? n : 0;
+}
+function getOuterWidthWithMargins(element) {
+  if (!(element instanceof HTMLElement)) return 0;
+  const rect = element.getBoundingClientRect();
+  const styles2 = window.getComputedStyle(element);
+  const marginLeft = Number.parseFloat(styles2.marginLeft || "0");
+  const marginRight = Number.parseFloat(styles2.marginRight || "0");
+  return Math.ceil(rect.width + marginLeft + marginRight);
+}
+function getInputFontShorthand(inputStyles) {
+  return inputStyles.font || [
+    inputStyles.fontStyle,
+    inputStyles.fontVariant,
+    inputStyles.fontWeight,
+    inputStyles.fontStretch,
+    inputStyles.fontSize,
+    inputStyles.lineHeight !== "normal" ? `/${inputStyles.lineHeight}` : "",
+    inputStyles.fontFamily
+  ].filter(Boolean).join(" ");
+}
+function measureFitContentWidth(input, text, minWidth) {
+  const field = input.closest('[data-forminput="field"]');
+  if (!field) return null;
+  const inputStyles = window.getComputedStyle(input);
+  const fieldStyles = window.getComputedStyle(field);
+  const canvas = document.createElement("canvas");
+  const ctx = canvas.getContext("2d");
+  if (!ctx) return null;
+  ctx.font = getInputFontShorthand(inputStyles);
+  const textWidth = Math.ceil(ctx.measureText(text).width);
+  const inputFontSize = Number.parseFloat(inputStyles.fontSize || "16");
+  const inputPaddingLeft = Number.parseFloat(inputStyles.paddingLeft || "0");
+  const inputPaddingRight = Number.parseFloat(inputStyles.paddingRight || "0");
+  const borderLeft = Number.parseFloat(fieldStyles.borderLeftWidth || "0");
+  const borderRight = Number.parseFloat(fieldStyles.borderRightWidth || "0");
+  const startAdornmentWidth = getOuterWidthWithMargins(
+    field.querySelector('[data-input-role="start-adornment"]')
+  );
+  const endAdornmentWidth = getOuterWidthWithMargins(
+    field.querySelector('[data-input-role="end-adornment"]')
+  );
+  const iconWidth = getOuterWidthWithMargins(field.querySelector('[data-input-role="icon"]'));
+  const breathingRoom = 6;
+  const nextWidth = Math.ceil(
+    borderLeft + borderRight + iconWidth + startAdornmentWidth + inputPaddingLeft + textWidth + breathingRoom + inputPaddingRight + endAdornmentWidth
+  );
+  return Math.max(parseLengthToPx(minWidth, inputFontSize) || 120, nextWidth);
+}
+function Typeahead({
+  options,
+  mode = "single",
+  multiValueDisplayMode = "chips",
+  multiSelectedValuesDisplayMode = "hidden",
+  multiSelectedValueChipContent = "label",
+  selectedValue = null,
+  onChange,
+  placeholder,
+  variant = "outlined",
+  disabled = false,
+  fullWidth = false,
+  onClear,
+  emptyMessage = "Ingen resultater",
+  filterOptions,
+  maxVisibleOptions,
+  allowCustomValue = false,
+  inputProps,
+  inputSize,
+  width,
+  minWidth,
+  popoverWidth,
+  autoComplete,
+  autoCorrect,
+  autoCapitalize,
+  spellCheck,
+  popoverAnchorRef,
+  fitContent = false,
+  enableHotkey = false
+}) {
+  var _a;
+  const rootRef = useRef(null);
+  const triggerWrapperRef = useRef(null);
+  const inputRef = useRef(null);
+  const popoverContentRef = useRef(null);
+  const interactingWithOptionsRef = useRef(false);
+  const justClearedRef = useRef(false);
+  const locallyClearedRef = useRef(false);
+  const listboxId = useId();
+  const {
+    onFocus: inputPropsOnFocus,
+    onBlur: inputPropsOnBlur,
+    onKeyDown: inputPropsOnKeyDown,
+    onMouseDown: inputPropsOnMouseDown,
+    onClear: inputPropsOnClear,
+    startAdornment: inputPropsStartAdornment,
+    endAdornment: inputPropsEndAdornment,
+    ...passthroughInputProps
+  } = inputProps != null ? inputProps : {};
+  const selectedOption = useMemo(() => {
+    var _a2;
+    if (mode === "multi") return null;
+    return (_a2 = options.find((option) => option.value === selectedValue)) != null ? _a2 : null;
+  }, [options, selectedValue, mode]);
+  const selectedOptions = useMemo(() => {
+    if (mode !== "multi" || !Array.isArray(selectedValue)) return [];
+    return options.filter((option) => selectedValue.includes(option.value));
+  }, [options, selectedValue, mode]);
+  const selectedSingleText = useMemo(() => {
+    if (mode !== "single") return "";
+    if (selectedOption) return selectedOption.label;
+    if (allowCustomValue && selectedValue != null) return String(selectedValue);
+    return "";
+  }, [mode, selectedOption, allowCustomValue, selectedValue]);
+  const [open, setOpen] = useState(false);
+  const [inputValue, setInputValue] = useState(mode === "multi" ? "" : selectedSingleText);
+  const [query, setQuery] = useState("");
+  const [activeIndex, setActiveIndex] = useState(-1);
+  const [hideSelectedHighlight, setHideSelectedHighlight] = useState(false);
+  const clearJustClearedAfterEventCycle = React.useCallback(() => {
+    requestAnimationFrame(() => {
+      justClearedRef.current = false;
+    });
+  }, []);
+  const getSelectedValueChipLabel = React.useCallback(
+    (option) => {
+      switch (multiSelectedValueChipContent) {
+        case "value":
+          return String(option.value);
+        case "value-label":
+          return `${String(option.value)} - ${option.label}`;
+        case "label":
+        default:
+          return option.label;
+      }
+    },
+    [multiSelectedValueChipContent]
+  );
+  let filteredOptions;
+  if (filterOptions) {
+    filteredOptions = filterOptions(options, query);
+  } else {
+    const normalizedQuery = query.trim().toLocaleLowerCase();
+    if (!normalizedQuery) {
+      filteredOptions = options;
+    } else {
+      filteredOptions = options.filter(
+        (option) => option.label.toLocaleLowerCase().includes(normalizedQuery)
+      );
+    }
+  }
+  if (typeof maxVisibleOptions === "number" && Number.isFinite(maxVisibleOptions)) {
+    filteredOptions = filteredOptions.slice(0, Math.max(0, maxVisibleOptions));
+  }
+  const commitSelection = React.useCallback(
+    (option) => {
+      var _a2, _b;
+      locallyClearedRef.current = false;
+      setHideSelectedHighlight(false);
+      if (mode === "multi") {
+        if (!option) return;
+        const nextValues = Array.isArray(selectedValue) ? [...selectedValue] : [];
+        const idx = nextValues.indexOf(option.value);
+        if (idx > -1) {
+          nextValues.splice(idx, 1);
+        } else {
+          nextValues.push(option.value);
+        }
+        onChange(nextValues);
+        if (filteredOptions.length > 1) {
+          return;
+        }
+        setInputValue("");
+        setQuery("");
+        return;
+      }
+      onChange((_a2 = option == null ? void 0 : option.value) != null ? _a2 : null);
+      setInputValue((_b = option == null ? void 0 : option.label) != null ? _b : "");
+      setQuery("");
+      setOpen(false);
+      setActiveIndex(-1);
+    },
+    [mode, selectedValue, onChange, filteredOptions.length]
+  );
+  const multiSelectionAdornment = mode === "multi" && selectedOptions.length > 0 ? multiValueDisplayMode === "count" ? /* @__PURE__ */ jsxs("span", { className: `dbc-muted-text dbc-sm-text ${styles.countAdornment}`, children: [
+    "(",
+    selectedOptions.length,
+    ")"
+  ] }) : (() => {
+    const MAX_CHIPS = 2;
+    const chipsToShow = selectedOptions.slice(0, MAX_CHIPS);
+    const extraCount = selectedOptions.length - MAX_CHIPS;
+    return /* @__PURE__ */ jsxs("div", { className: styles.chipRow, children: [
+      chipsToShow.map((option) => /* @__PURE__ */ jsx(
+        Chip,
+        {
+          size: "sm",
+          type: "rounded",
+          onClose: () => commitSelection(option),
+          children: option.label
+        },
+        option.value
+      )),
+      extraCount > 0 && /* @__PURE__ */ jsxs("span", { className: "dbc-muted-text dbc-sm-text dbc-px-xxs", children: [
+        "+",
+        extraCount
+      ] })
+    ] });
+  })() : void 0;
+  const usesCountAdornment = mode === "multi" && multiValueDisplayMode === "count" && selectedOptions.length > 0;
+  const resolvedInputSize = (_a = inputSize != null ? inputSize : inputProps == null ? void 0 : inputProps.inputSize) != null ? _a : "md";
+  const shouldFitContent = fitContent && mode === "single";
+  const [fittedWidthPx, setFittedWidthPx] = useState(null);
+  const visibleSingleValueText = useMemo(() => {
+    if (!shouldFitContent) return "";
+    return inputValue || selectedSingleText || placeholder || "";
+  }, [shouldFitContent, inputValue, selectedSingleText, placeholder]);
+  useLayoutEffect(() => {
+    if (!shouldFitContent) return;
+    const input = inputRef.current;
+    if (!input) return;
+    let cancelled = false;
+    const frameId = requestAnimationFrame(() => {
+      const nextWidth = measureFitContentWidth(input, visibleSingleValueText, minWidth);
+      if (!cancelled && nextWidth != null) {
+        setFittedWidthPx((current) => current !== nextWidth ? nextWidth : current);
+      }
+    });
+    const fonts = document.fonts;
+    if (fonts == null ? void 0 : fonts.ready) {
+      void fonts.ready.then(() => {
+        if (cancelled) return;
+        const liveInput = inputRef.current;
+        if (!liveInput) return;
+        const nextWidth = measureFitContentWidth(liveInput, visibleSingleValueText, minWidth);
+        if (nextWidth != null) {
+          setFittedWidthPx((current) => current !== nextWidth ? nextWidth : current);
+        }
+      });
+    }
+    return () => {
+      cancelled = true;
+      cancelAnimationFrame(frameId);
+    };
+  }, [
+    shouldFitContent,
+    visibleSingleValueText,
+    minWidth,
+    inputPropsStartAdornment,
+    inputPropsEndAdornment
+  ]);
+  const measuredRootWidth = useMemo(() => {
+    if (!shouldFitContent) return void 0;
+    if (fittedWidthPx == null) return minWidth != null ? minWidth : "120px";
+    return `${fittedWidthPx}px`;
+  }, [shouldFitContent, fittedWidthPx, minWidth]);
+  const shouldStretchInput = !width && (fullWidth || shouldFitContent);
+  useEffect(() => {
+    if (!enableHotkey) return;
+    function handleKeyDown2(event) {
+      var _a2;
+      if (event.key === "k" && (event.metaKey || event.ctrlKey)) {
+        event.preventDefault();
+        (_a2 = inputRef.current) == null ? void 0 : _a2.focus();
+      }
+    }
+    window.addEventListener("keydown", handleKeyDown2);
+    return () => window.removeEventListener("keydown", handleKeyDown2);
+  }, [enableHotkey]);
+  useEffect(() => {
+    if (selectedOption) {
+      locallyClearedRef.current = false;
+      setHideSelectedHighlight(false);
+    }
+    if (justClearedRef.current || locallyClearedRef.current) return;
+    if (mode === "multi") {
+      setInputValue("");
+      setQuery("");
+    } else {
+      setInputValue(selectedSingleText);
+    }
+  }, [selectedOption, selectedSingleText, mode]);
+  const getSelectedIndex = React.useCallback(
+    (items) => {
+      if (items.length === 0) return -1;
+      if (locallyClearedRef.current) return 0;
+      if (mode === "multi") {
+        if (!Array.isArray(selectedValue) || selectedValue.length === 0) return 0;
+        const firstSelectedIndex = items.findIndex((option) => selectedValue.includes(option.value));
+        return firstSelectedIndex >= 0 ? firstSelectedIndex : 0;
+      }
+      const singleSelectedIndex = items.findIndex((option) => option.value === selectedValue);
+      return singleSelectedIndex >= 0 ? singleSelectedIndex : 0;
+    },
+    [mode, selectedValue]
+  );
+  useEffect(() => {
+    setActiveIndex((current) => {
+      if (filteredOptions.length === 0) return -1;
+      if (locallyClearedRef.current) return 0;
+      if (current < 0) return getSelectedIndex(filteredOptions);
+      return Math.min(current, filteredOptions.length - 1);
+    });
+  }, [filteredOptions, getSelectedIndex]);
+  useEffect(() => {
+    var _a2, _b;
+    if (!open || activeIndex < 0) return;
+    const activeEl = (_a2 = document.getElementById(listboxId)) == null ? void 0 : _a2.querySelector(`#${CSS.escape(`${listboxId}-option-${activeIndex}`)}`);
+    (_b = activeEl == null ? void 0 : activeEl.scrollIntoView) == null ? void 0 : _b.call(activeEl, { block: "nearest" });
+  }, [open, activeIndex, filteredOptions, listboxId]);
+  const getFocusableElements = React.useCallback(() => {
+    const selector = [
+      "a[href]",
+      "button:not([disabled])",
+      "input:not([disabled])",
+      "select:not([disabled])",
+      "textarea:not([disabled])",
+      '[tabindex]:not([tabindex="-1"])'
+    ].join(",");
+    const seen = /* @__PURE__ */ new Set();
+    const focusables = [];
+    for (const container of [rootRef.current, popoverContentRef.current]) {
+      if (!container) continue;
+      const elements = container.matches(selector) ? [container] : Array.from(container.querySelectorAll(selector));
+      for (const element of elements) {
+        if (seen.has(element) || element.getAttribute("aria-hidden") === "true" || element.tabIndex < 0) {
+          continue;
+        }
+        seen.add(element);
+        focusables.push(element);
+      }
+    }
+    return focusables;
+  }, []);
+  const isFocusWithinTypeahead = React.useCallback((target) => {
+    var _a2, _b;
+    if (!(target instanceof Node)) return false;
+    return Boolean(((_a2 = rootRef.current) == null ? void 0 : _a2.contains(target)) || ((_b = popoverContentRef.current) == null ? void 0 : _b.contains(target)));
+  }, []);
+  const handleTabKeyDown = React.useCallback(
+    (event) => {
+      var _a2, _b, _c;
+      if (event.key !== "Tab" || !open) return;
+      const focusables = getFocusableElements();
+      if (focusables.length === 0) return;
+      const eventTarget = event.target instanceof HTMLElement ? event.target : document.activeElement;
+      const activeElement = eventTarget && focusables.includes(eventTarget) ? eventTarget : (_a2 = document.activeElement) != null ? _a2 : null;
+      const activeIndexInScope = activeElement ? focusables.indexOf(activeElement) : -1;
+      if (mode === "multi") {
+        if (activeIndexInScope === -1) {
+          event.preventDefault();
+          (_b = focusables[0]) == null ? void 0 : _b.focus();
+          return;
+        }
+        event.preventDefault();
+        const nextIndex = event.shiftKey ? (activeIndexInScope - 1 + focusables.length) % focusables.length : (activeIndexInScope + 1) % focusables.length;
+        (_c = focusables[nextIndex]) == null ? void 0 : _c.focus();
+        return;
+      }
+      setOpen(false);
+      setActiveIndex(-1);
+    },
+    [open, getFocusableElements, mode]
+  );
+  const handleInputChange = (nextValue) => {
+    if (justClearedRef.current) return;
+    locallyClearedRef.current = false;
+    setHideSelectedHighlight(false);
+    setInputValue(nextValue);
+    setQuery(nextValue);
+    if (!open) setOpen(true);
+    if (mode === "multi") return;
+    if (allowCustomValue) return;
+    const exactMatch = options.find((option) => option.label === nextValue);
+    if (!exactMatch && selectedValue !== null) {
+      onChange(null);
+    }
+  };
+  const handleBlur = (nextFocusedTarget) => {
+    if (justClearedRef.current || locallyClearedRef.current) {
+      setInputValue("");
+      setQuery("");
+      setOpen(false);
+      setActiveIndex(-1);
+      return;
+    }
+    if (isFocusWithinTypeahead(nextFocusedTarget)) return;
+    if (mode === "multi") {
+      if (interactingWithOptionsRef.current) {
+        interactingWithOptionsRef.current = false;
+        setInputValue("");
+        setQuery("");
+        return;
+      }
+      setInputValue("");
+      setQuery("");
+      setOpen(false);
+      setActiveIndex(-1);
+      return;
+    }
+    const exactLabelMatch = options.find((option) => option.label === inputValue);
+    if (exactLabelMatch) {
+      commitSelection(exactLabelMatch);
+      return;
+    }
+    if (allowCustomValue) {
+      const customValue = inputValue.trim();
+      if (customValue) {
+        onChange(customValue);
+        setInputValue(customValue);
+      } else {
+        if (selectedValue !== null) {
+          onChange(null);
+        }
+        setInputValue("");
+      }
+      setQuery("");
+      setOpen(false);
+      setActiveIndex(-1);
+      return;
+    }
+    if (selectedOption) {
+      setInputValue(selectedOption.label);
+    } else {
+      setInputValue("");
+    }
+    setQuery("");
+    setOpen(false);
+    setActiveIndex(-1);
+  };
+  const openWithAllOptions = React.useCallback(() => {
+    if (justClearedRef.current) return;
+    setQuery("");
+    setOpen(true);
+    setActiveIndex(getSelectedIndex(options));
+  }, [getSelectedIndex, options]);
+  const openWithCurrentFilter = React.useCallback(() => {
+    if (justClearedRef.current) return;
+    setOpen(true);
+    setActiveIndex(getSelectedIndex(filteredOptions));
+  }, [getSelectedIndex, filteredOptions]);
+  const prepareSingleSearchInput = React.useCallback(() => {
+    if (mode !== "single" || !selectedOption || justClearedRef.current) return;
+    setInputValue("");
+    setQuery("");
+  }, [mode, selectedOption]);
+  const handleOpen = React.useCallback(() => {
+    if (justClearedRef.current) return;
+    if (mode === "single" && selectedOption && !locallyClearedRef.current) {
+      prepareSingleSearchInput();
+      openWithAllOptions();
+      return;
+    }
+    openWithCurrentFilter();
+  }, [mode, selectedOption, prepareSingleSearchInput, openWithAllOptions, openWithCurrentFilter]);
+  const handleTriggerMouseDown = React.useCallback(
+    (e) => {
+      inputPropsOnMouseDown == null ? void 0 : inputPropsOnMouseDown(e);
+      if (e.defaultPrevented) return;
+      if (justClearedRef.current) {
+        e.preventDefault();
+        e.stopPropagation();
+        return;
+      }
+      const isAlreadyFocused = document.activeElement === inputRef.current;
+      if (isAlreadyFocused && open) {
+        e.preventDefault();
+        setOpen(false);
+        setActiveIndex(-1);
+        setQuery("");
+        setInputValue(mode === "single" && !locallyClearedRef.current ? selectedSingleText : "");
+        return;
+      }
+      if (isAlreadyFocused && mode === "single" && selectedOption && !locallyClearedRef.current) {
+        prepareSingleSearchInput();
+        setOpen(true);
+        setActiveIndex(getSelectedIndex(options));
+      } else if (isAlreadyFocused && !open) {
+        setOpen(true);
+        setActiveIndex(getSelectedIndex(filteredOptions));
+      }
+    },
+    [
+      inputPropsOnMouseDown,
+      open,
+      mode,
+      selectedOption,
+      selectedSingleText,
+      prepareSingleSearchInput,
+      getSelectedIndex,
+      options,
+      filteredOptions
+    ]
+  );
+  const handleChevronMouseDown = React.useCallback(
+    (e) => {
+      var _a2;
+      e.preventDefault();
+      e.stopPropagation();
+      if (justClearedRef.current) return;
+      (_a2 = inputRef.current) == null ? void 0 : _a2.focus();
+      if (open) {
+        setOpen(false);
+        setActiveIndex(-1);
+        setQuery("");
+        setInputValue(mode === "single" && !locallyClearedRef.current ? selectedSingleText : "");
+        return;
+      }
+      handleOpen();
+    },
+    [open, mode, selectedSingleText, handleOpen]
+  );
+  const handleKeyDown = (e) => {
+    switch (e.key) {
+      case "ArrowDown":
+        e.preventDefault();
+        if (!open) {
+          handleOpen();
+          return;
+        }
+        setActiveIndex((index) => {
+          if (filteredOptions.length === 0) return -1;
+          if (index < 0) return getSelectedIndex(filteredOptions);
+          return Math.min(index + 1, filteredOptions.length - 1);
+        });
+        return;
+      case "ArrowUp":
+        e.preventDefault();
+        if (!open) {
+          handleOpen();
+          return;
+        }
+        setActiveIndex((index) => {
+          if (filteredOptions.length === 0) return -1;
+          if (index < 0) return filteredOptions.length - 1;
+          return Math.max(index - 1, 0);
+        });
+        return;
+      case "Home":
+        if (!open || filteredOptions.length === 0) return;
+        e.preventDefault();
+        setActiveIndex(0);
+        return;
+      case "End":
+        if (!open || filteredOptions.length === 0) return;
+        e.preventDefault();
+        setActiveIndex(filteredOptions.length - 1);
+        return;
+      case "Enter":
+        if (!open) return;
+        e.preventDefault();
+        if (activeIndex >= 0 && filteredOptions[activeIndex]) {
+          commitSelection(filteredOptions[activeIndex]);
+        }
+        return;
+      case "Escape":
+        e.preventDefault();
+        e.stopPropagation();
+        setOpen(false);
+        setActiveIndex(-1);
+        setQuery("");
+        setInputValue(mode === "single" && !locallyClearedRef.current ? selectedSingleText : "");
+        return;
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: rootRef,
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: mode === "multi" && multiSelectedValuesDisplayMode === "below-input" && selectedOptions.length > 0 ? "flex-start" : "center",
+        gap: mode === "multi" && multiSelectedValuesDisplayMode === "below-input" && selectedOptions.length > 0 ? 8 : 0,
+        height: "100%",
+        width: width != null ? width : fullWidth ? "100%" : shouldFitContent ? measuredRootWidth : void 0,
+        flex: width ? "0 0 auto" : fullWidth || shouldFitContent ? "1 1 auto" : void 0,
+        minWidth: width ? void 0 : shouldFitContent ? measuredRootWidth : 0,
+        maxWidth: width ? void 0 : shouldFitContent ? "100%" : void 0
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          Popover,
+          {
+            open,
+            minWidth: popoverWidth != null ? popoverWidth : minWidth,
+            matchTriggerWidth: true,
+            fillTrigger: true,
+            anchorRef: popoverAnchorRef != null ? popoverAnchorRef : triggerWrapperRef,
+            onOpenChange: (nextOpen) => {
+              if (justClearedRef.current) {
+                setOpen(false);
+                setActiveIndex(-1);
+                return;
+              }
+              setOpen(nextOpen);
+              if (nextOpen) {
+                if (mode === "single" && selectedOption && !locallyClearedRef.current) {
+                  setQuery("");
+                  setActiveIndex(getSelectedIndex(options));
+                } else {
+                  setActiveIndex(getSelectedIndex(filteredOptions));
+                }
+              } else {
+                setActiveIndex(-1);
+              }
+            },
+            fullWidth,
+            autoFocusContent: false,
+            returnFocus: false,
+            overlayRef: popoverContentRef,
+            trigger: (openPopover, icon) => {
+              var _a2, _b, _c, _d;
+              return /* @__PURE__ */ jsx(
+                "div",
+                {
+                  ref: triggerWrapperRef,
+                  style: {
+                    display: "flex",
+                    alignItems: "stretch",
+                    minWidth: 0,
+                    width: "100%",
+                    height: "100%"
+                  },
+                  onMouseDown: (e) => {
+                    const target = e.target;
+                    if (justClearedRef.current) {
+                      e.preventDefault();
+                      e.stopPropagation();
+                      return;
+                    }
+                    if (target.closest('input, button, [data-input-role="clear"]')) return;
+                    handleChevronMouseDown(e);
+                  },
+                  children: /* @__PURE__ */ jsx(
+                    Input,
+                    {
+                      ...passthroughInputProps,
+                      ref: inputRef,
+                      value: inputValue,
+                      startAdornment: multiSelectionAdornment || inputPropsStartAdornment ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                        multiSelectionAdornment,
+                        inputPropsStartAdornment
+                      ] }) : void 0,
+                      endAdornment: inputPropsEndAdornment || icon ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                        inputPropsEndAdornment,
+                        icon ? /* @__PURE__ */ jsx("span", { className: styles.chevronButton, onMouseDown: handleChevronMouseDown, children: icon }) : null
+                      ] }) : void 0,
+                      onFocus: (e) => {
+                        inputPropsOnFocus == null ? void 0 : inputPropsOnFocus(e);
+                        if (e.defaultPrevented) return;
+                        if (justClearedRef.current) return;
+                        handleOpen();
+                        openPopover(e);
+                      },
+                      onMouseDown: handleTriggerMouseDown,
+                      onChange: (e) => handleInputChange(e.currentTarget.value),
+                      onBlur: (e) => {
+                        inputPropsOnBlur == null ? void 0 : inputPropsOnBlur(e);
+                        if (e.defaultPrevented) return;
+                        handleBlur(e.relatedTarget);
+                      },
+                      onKeyDown: (e) => {
+                        inputPropsOnKeyDown == null ? void 0 : inputPropsOnKeyDown(e);
+                        if (e.defaultPrevented) return;
+                        handleTabKeyDown(e);
+                        if (e.defaultPrevented) return;
+                        handleKeyDown(e);
+                      },
+                      placeholder,
+                      variant,
+                      inputSize: resolvedInputSize,
+                      width: width != null ? width : shouldFitContent ? void 0 : inputProps == null ? void 0 : inputProps.width,
+                      autoComplete: (_a2 = autoComplete != null ? autoComplete : inputProps == null ? void 0 : inputProps.autoComplete) != null ? _a2 : "off",
+                      autoCorrect: (_b = autoCorrect != null ? autoCorrect : inputProps == null ? void 0 : inputProps.autoCorrect) != null ? _b : "off",
+                      autoCapitalize: (_c = autoCapitalize != null ? autoCapitalize : inputProps == null ? void 0 : inputProps.autoCapitalize) != null ? _c : "none",
+                      spellCheck: (_d = spellCheck != null ? spellCheck : inputProps == null ? void 0 : inputProps.spellCheck) != null ? _d : false,
+                      disabled,
+                      fullWidth: shouldStretchInput,
+                      inputClassName: [
+                        inputProps == null ? void 0 : inputProps.inputClassName,
+                        styles.typeaheadInput,
+                        usesCountAdornment ? styles.inputWithoutStartPadding : ""
+                      ].filter(Boolean).join(" "),
+                      onClear: (event) => {
+                        var _a3, _b2;
+                        (_a3 = event == null ? void 0 : event.preventDefault) == null ? void 0 : _a3.call(event);
+                        (_b2 = event == null ? void 0 : event.stopPropagation) == null ? void 0 : _b2.call(event);
+                        justClearedRef.current = true;
+                        locallyClearedRef.current = true;
+                        setHideSelectedHighlight(true);
+                        setOpen(false);
+                        setInputValue("");
+                        setQuery("");
+                        setActiveIndex(-1);
+                        inputPropsOnClear == null ? void 0 : inputPropsOnClear();
+                        if (onClear) {
+                          onClear();
+                        } else {
+                          onChange(mode === "multi" ? [] : null);
+                        }
+                        clearJustClearedAfterEventCycle();
+                      },
+                      role: "combobox",
+                      "aria-expanded": open,
+                      "aria-controls": listboxId,
+                      "aria-autocomplete": "list",
+                      "aria-activedescendant": open && activeIndex >= 0 ? `${listboxId}-option-${activeIndex}` : void 0
+                    }
+                  )
+                }
+              );
+            },
+            children: /* @__PURE__ */ jsx(Menu, { role: "listbox", id: listboxId, children: filteredOptions.length > 0 ? filteredOptions.map((option, index) => {
+              const isActive = index === activeIndex;
+              const isSelected = mode === "multi" ? Array.isArray(selectedValue) && selectedValue.includes(option.value) : option.value === selectedValue && !hideSelectedHighlight;
+              const optionId = `${listboxId}-option-${index}`;
+              return mode === "multi" ? /* @__PURE__ */ jsx(
+                Menu.CheckItem,
+                {
+                  checked: isSelected,
+                  active: isActive,
+                  interactiveProps: {
+                    id: optionId,
+                    role: "option",
+                    onMouseEnter: () => setActiveIndex(index),
+                    onMouseDown: (e) => {
+                      interactingWithOptionsRef.current = true;
+                      e.preventDefault();
+                    },
+                    onKeyDown: (e) => handleTabKeyDown(e)
+                  },
+                  label: /* @__PURE__ */ jsx("span", { children: option.label }),
+                  onCheckedChange: () => commitSelection(option)
+                },
+                option.value
+              ) : /* @__PURE__ */ jsx(Menu.Item, { active: isActive, selected: isSelected, children: /* @__PURE__ */ jsx(
+                "button",
+                {
+                  id: optionId,
+                  type: "button",
+                  role: "option",
+                  "aria-selected": isSelected,
+                  onMouseEnter: () => setActiveIndex(index),
+                  onMouseDown: (e) => {
+                    e.preventDefault();
+                  },
+                  onKeyDown: (e) => handleTabKeyDown(e),
+                  onClick: () => commitSelection(option),
+                  children: /* @__PURE__ */ jsx("span", { children: option.label })
+                }
+              ) }, option.value);
+            }) : /* @__PURE__ */ jsx(Menu.Item, { disabled: true, children: emptyMessage }) })
+          }
+        ),
+        mode === "multi" && multiSelectedValuesDisplayMode === "below-input" && selectedOptions.length > 0 && /* @__PURE__ */ jsx("div", { className: styles.selectedValues, children: selectedOptions.map((option) => /* @__PURE__ */ jsx(
+          Chip,
+          {
+            size: "sm",
+            type: "default",
+            severity: "neutral",
+            onClose: () => commitSelection(option),
+            children: getSelectedValueChipLabel(option)
+          },
+          option.value
+        )) })
+      ]
+    }
+  );
+}
+
+export { Typeahead };