@dbcdk/react-components 0.0.167 → 0.0.169

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

@@ -1,792 +0,0 @@
-'use client';
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
-var Chip = require('../../../components/chip/Chip');
-var Input = require('../../../components/forms/input/Input');
-var Menu = require('../../../components/menu/Menu');
-var Popover = require('../../../components/popover/Popover');
-var styles = require('./Typeahead.module.css');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-function _interopNamespace(e) {
-  if (e && e.__esModule) return e;
-  var n = Object.create(null);
-  if (e) {
-    Object.keys(e).forEach(function (k) {
-      if (k !== 'default') {
-        var d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: function () { return e[k]; }
-        });
-      }
-    });
-  }
-  n.default = e;
-  return Object.freeze(n);
-}
-
-var React__namespace = /*#__PURE__*/_interopNamespace(React);
-var styles__default = /*#__PURE__*/_interopDefault(styles);
-
-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,
-  inputProps,
-  inputSize,
-  width,
-  minWidth,
-  popoverWidth,
-  autoComplete,
-  autoCorrect,
-  autoCapitalize,
-  spellCheck,
-  popoverAnchorRef,
-  fitContent = false,
-  enableHotkey = false
-}) {
-  var _a, _b;
-  const rootRef = React.useRef(null);
-  const triggerWrapperRef = React.useRef(null);
-  const inputRef = React.useRef(null);
-  const popoverContentRef = React.useRef(null);
-  const interactingWithOptionsRef = React.useRef(false);
-  const justClearedRef = React.useRef(false);
-  const locallyClearedRef = React.useRef(false);
-  const listboxId = React.useId();
-  const {
-    onFocus: inputPropsOnFocus,
-    onBlur: inputPropsOnBlur,
-    onKeyDown: inputPropsOnKeyDown,
-    onMouseDown: inputPropsOnMouseDown,
-    onClear: inputPropsOnClear,
-    startAdornment: inputPropsStartAdornment,
-    endAdornment: inputPropsEndAdornment,
-    ...passthroughInputProps
-  } = inputProps != null ? inputProps : {};
-  const selectedOption = React.useMemo(() => {
-    var _a2;
-    if (mode === "multi") return null;
-    return (_a2 = options.find((option) => option.value === selectedValue)) != null ? _a2 : null;
-  }, [options, selectedValue, mode]);
-  const selectedOptions = React.useMemo(() => {
-    if (mode !== "multi" || !Array.isArray(selectedValue)) return [];
-    return options.filter((option) => selectedValue.includes(option.value));
-  }, [options, selectedValue, mode]);
-  const [open, setOpen] = React.useState(false);
-  const [inputValue, setInputValue] = React.useState(
-    mode === "multi" ? "" : (_a = selectedOption == null ? void 0 : selectedOption.label) != null ? _a : ""
-  );
-  const [query, setQuery] = React.useState("");
-  const [activeIndex, setActiveIndex] = React.useState(-1);
-  const [hideSelectedHighlight, setHideSelectedHighlight] = React.useState(false);
-  const clearJustClearedAfterEventCycle = React__namespace.useCallback(() => {
-    requestAnimationFrame(() => {
-      justClearedRef.current = false;
-    });
-  }, []);
-  const getSelectedValueChipLabel = React__namespace.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)
-      );
-    }
-  }
-  const commitSelection = React__namespace.useCallback(
-    (option) => {
-      var _a2, _b2;
-      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((_b2 = option == null ? void 0 : option.label) != null ? _b2 : "");
-      setQuery("");
-      setOpen(false);
-      setActiveIndex(-1);
-    },
-    [mode, selectedValue, onChange, filteredOptions.length]
-  );
-  const multiSelectionAdornment = mode === "multi" && selectedOptions.length > 0 ? multiValueDisplayMode === "count" ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: `dbc-muted-text dbc-sm-text ${styles__default.default.countAdornment}`, children: [
-    "(",
-    selectedOptions.length,
-    ")"
-  ] }) : (() => {
-    const MAX_CHIPS = 2;
-    const chipsToShow = selectedOptions.slice(0, MAX_CHIPS);
-    const extraCount = selectedOptions.length - MAX_CHIPS;
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.chipRow, children: [
-      chipsToShow.map((option) => /* @__PURE__ */ jsxRuntime.jsx(
-        Chip.Chip,
-        {
-          size: "sm",
-          type: "rounded",
-          onClose: () => commitSelection(option),
-          children: option.label
-        },
-        option.value
-      )),
-      extraCount > 0 && /* @__PURE__ */ jsxRuntime.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 = (_b = inputSize != null ? inputSize : inputProps == null ? void 0 : inputProps.inputSize) != null ? _b : "md";
-  const shouldFitContent = fitContent && mode === "single";
-  const [fittedWidthPx, setFittedWidthPx] = React.useState(null);
-  const visibleSingleValueText = React.useMemo(() => {
-    if (!shouldFitContent) return "";
-    return inputValue || (selectedOption == null ? void 0 : selectedOption.label) || placeholder || "";
-  }, [shouldFitContent, inputValue, selectedOption, placeholder]);
-  React.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 = React.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);
-  React.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]);
-  React.useEffect(() => {
-    var _a2;
-    if (justClearedRef.current || locallyClearedRef.current) return;
-    if (mode === "multi") {
-      setInputValue("");
-      setQuery("");
-    } else {
-      setInputValue((_a2 = selectedOption == null ? void 0 : selectedOption.label) != null ? _a2 : "");
-    }
-  }, [selectedOption, mode]);
-  const getSelectedIndex = React__namespace.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]
-  );
-  React.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]);
-  React.useEffect(() => {
-    var _a2, _b2;
-    if (!open || activeIndex < 0) return;
-    const activeEl = (_a2 = document.getElementById(listboxId)) == null ? void 0 : _a2.querySelector(`#${CSS.escape(`${listboxId}-option-${activeIndex}`)}`);
-    (_b2 = activeEl == null ? void 0 : activeEl.scrollIntoView) == null ? void 0 : _b2.call(activeEl, { block: "nearest" });
-  }, [open, activeIndex, filteredOptions, listboxId]);
-  const getFocusableElements = React__namespace.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__namespace.useCallback((target) => {
-    var _a2, _b2;
-    if (!(target instanceof Node)) return false;
-    return Boolean(((_a2 = rootRef.current) == null ? void 0 : _a2.contains(target)) || ((_b2 = popoverContentRef.current) == null ? void 0 : _b2.contains(target)));
-  }, []);
-  const handleTabKeyDown = React__namespace.useCallback(
-    (event) => {
-      var _a2, _b2, _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();
-          (_b2 = focusables[0]) == null ? void 0 : _b2.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;
-    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 (selectedOption) {
-      setInputValue(selectedOption.label);
-    } else {
-      setInputValue("");
-    }
-    setQuery("");
-    setOpen(false);
-    setActiveIndex(-1);
-  };
-  const openWithAllOptions = React__namespace.useCallback(() => {
-    if (justClearedRef.current) return;
-    setQuery("");
-    setOpen(true);
-    setActiveIndex(getSelectedIndex(options));
-  }, [getSelectedIndex, options]);
-  const openWithCurrentFilter = React__namespace.useCallback(() => {
-    if (justClearedRef.current) return;
-    setOpen(true);
-    setActiveIndex(getSelectedIndex(filteredOptions));
-  }, [getSelectedIndex, filteredOptions]);
-  const prepareSingleSearchInput = React__namespace.useCallback(() => {
-    if (mode !== "single" || !selectedOption || justClearedRef.current) return;
-    setInputValue("");
-    setQuery("");
-  }, [mode, selectedOption]);
-  const handleOpen = React__namespace.useCallback(() => {
-    if (justClearedRef.current) return;
-    if (mode === "single" && selectedOption && !locallyClearedRef.current) {
-      prepareSingleSearchInput();
-      openWithAllOptions();
-      return;
-    }
-    openWithCurrentFilter();
-  }, [mode, selectedOption, prepareSingleSearchInput, openWithAllOptions, openWithCurrentFilter]);
-  const handleTriggerMouseDown = React__namespace.useCallback(
-    (e) => {
-      var _a2;
-      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 ? (_a2 = selectedOption == null ? void 0 : selectedOption.label) != null ? _a2 : "" : ""
-        );
-        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,
-      prepareSingleSearchInput,
-      getSelectedIndex,
-      options,
-      filteredOptions
-    ]
-  );
-  const handleChevronMouseDown = React__namespace.useCallback(
-    (e) => {
-      var _a2, _b2;
-      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 ? (_b2 = selectedOption == null ? void 0 : selectedOption.label) != null ? _b2 : "" : ""
-        );
-        return;
-      }
-      handleOpen();
-    },
-    [open, mode, selectedOption, 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" && selectedOption && !locallyClearedRef.current ? selectedOption.label : ""
-        );
-        return;
-    }
-  };
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      ref: rootRef,
-      style: {
-        display: "flex",
-        flexDirection: "column",
-        gap: mode === "multi" && multiSelectedValuesDisplayMode === "below-input" && selectedOptions.length > 0 ? 8 : 0,
-        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__ */ jsxRuntime.jsx(
-          Popover.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, _b2, _c, _d;
-              return /* @__PURE__ */ jsxRuntime.jsx(
-                "div",
-                {
-                  ref: triggerWrapperRef,
-                  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__ */ jsxRuntime.jsx(
-                    Input.Input,
-                    {
-                      ...passthroughInputProps,
-                      ref: inputRef,
-                      value: inputValue,
-                      startAdornment: multiSelectionAdornment || inputPropsStartAdornment ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                        multiSelectionAdornment,
-                        inputPropsStartAdornment
-                      ] }) : void 0,
-                      endAdornment: inputPropsEndAdornment || icon ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                        inputPropsEndAdornment,
-                        icon ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.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: (_b2 = autoCorrect != null ? autoCorrect : inputProps == null ? void 0 : inputProps.autoCorrect) != null ? _b2 : "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__default.default.typeaheadInput,
-                        usesCountAdornment ? styles__default.default.inputWithoutStartPadding : ""
-                      ].filter(Boolean).join(" "),
-                      onClear: (event) => {
-                        var _a3, _b3;
-                        (_a3 = event == null ? void 0 : event.preventDefault) == null ? void 0 : _a3.call(event);
-                        (_b3 = event == null ? void 0 : event.stopPropagation) == null ? void 0 : _b3.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__ */ jsxRuntime.jsx(Menu.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__ */ jsxRuntime.jsx(
-                Menu.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__ */ jsxRuntime.jsx("span", { children: option.label }),
-                  onCheckedChange: () => commitSelection(option)
-                },
-                option.value
-              ) : /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu.Item, { active: isActive, selected: isSelected, children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { children: option.label })
-                }
-              ) }, option.value);
-            }) : /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu.Item, { disabled: true, children: emptyMessage }) })
-          }
-        ),
-        mode === "multi" && multiSelectedValuesDisplayMode === "below-input" && selectedOptions.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.selectedValues, children: selectedOptions.map((option) => /* @__PURE__ */ jsxRuntime.jsx(
-          Chip.Chip,
-          {
-            size: "sm",
-            type: "default",
-            severity: "neutral",
-            onClose: () => commitSelection(option),
-            children: getSelectedValueChipLabel(option)
-          },
-          option.value
-        )) })
-      ]
-    }
-  );
-}
-
-exports.Typeahead = Typeahead;