@keboola/design 8.0.0 → 9.1.0

package/dist/rjsf.cjs

@@ -25,9 +25,10 @@ var r = require('@codemirror/legacy-modes/mode/r');
 var shell = require('@codemirror/legacy-modes/mode/shell');
 var toml = require('@codemirror/legacy-modes/mode/toml');
 var codemirrorThemeGithub = require('@uiw/codemirror-theme-github');
-var codemirrorLangSfsql = require('@keboola/codemirror-lang-sfsql');
+var codemirrorLangSql = require('@keboola/codemirror-lang-sql');
 var colors = require('@keboola/tailwind-config/colors');
 var simpleMode = require('@codemirror/legacy-modes/mode/simple-mode');
+var state = require('@codemirror/state');
 var DOMPurify = require('dompurify');
 var reactCollapsible = require('@radix-ui/react-collapsible');
 var RadixTabs = require('@radix-ui/react-tabs');
@@ -37,6 +38,7 @@ var TextareaAutosize = require('react-textarea-autosize');
 var reactCheckbox = require('@radix-ui/react-checkbox');
 var reactPopover = require('@radix-ui/react-popover');
 var combobox = require('@base-ui/react/combobox');
+var reactVirtual = require('@tanstack/react-virtual');
 var RRadioGroup = require('@radix-ui/react-radio-group');
 var RSeparator = require('@radix-ui/react-separator');
 
@@ -386,6 +388,9 @@ Tooltip.Trigger = TooltipTrigger;
 // src/utils/createPrefixedString.ts
 var createPrefixedString = (prefix2) => (literals) => literals.reduce((acc, literal) => acc + literal, `${prefix2}-`);
 
+// src/utils/escapeStringRegexp.ts
+var escapeStringRegexp = (string) => string.replace(/[|\\{}()[\]^$+*?.]/g, "\\$&").replace(/-/g, "\\x2d");
+
 // src/utils/mergeRefs.ts
 function setRef(ref, value) {
   if (typeof ref === "function") {
@@ -397,6 +402,21 @@ function setRef(ref, value) {
 var mergeRefs = (...refs) => {
   return (node) => refs.forEach((ref) => setRef(ref, node));
 };
+
+// src/utils/isMac.ts
+var getIsMac = () => {
+  if (typeof navigator !== "undefined" && "userAgentData" in navigator) {
+    const platform = navigator.userAgentData.platform;
+    if (typeof platform === "string") {
+      return platform.toLowerCase() === "macos";
+    }
+  }
+  if (typeof navigator !== "undefined" && typeof navigator.platform === "string") {
+    return navigator.platform.toUpperCase().indexOf("MAC") >= 0;
+  }
+  return false;
+};
+var isMac = getIsMac();
 var helpVariants = classVarianceAuthority.cva(["tw:m-0", "tw:text-xs"], {
   defaultVariants: {
     state: "default"
@@ -847,8 +867,6 @@ var ButtonToolbar = ({ value, children }) => {
 };
 var COMMANDS = [
   "run-operation",
-  "source freshness",
-  "docs generate",
   "run",
   "test",
   "seed",
@@ -857,9 +875,13 @@ var COMMANDS = [
   "ls",
   "compile",
   "build",
-  "deps"
+  "deps",
+  "docs",
+  "source"
 ];
+var SUBCOMMANDS = { docs: ["generate"], source: ["freshness"] };
 var ARGUMENTS = ["--select", "--exclude", "--selector", "--defer", "--resource-type", "-s"];
+var SELECTORS = ["--select", "--exclude", "-s"];
 var METHODS = [
   "path:",
   "source:",
@@ -886,13 +908,59 @@ var FLAGS = [
   "--profile",
   "--full-refresh"
 ];
-var word = (list) => new RegExp(`^\\s+(?:${list.join("|")})\\b`, "i");
-var prefix = (list) => new RegExp(`^\\s+(?:${list.join("|")})`, "i");
+var COMMAND_PHRASES = COMMANDS.flatMap((command) => {
+  const subcommands = SUBCOMMANDS[command];
+  return subcommands ? subcommands.map((subcommand) => `${command} ${subcommand}`) : [command];
+});
+var alternation = (list) => [...list].sort((a, b) => b.length - a.length).join("|");
+var word = (list) => new RegExp(`^\\s+(?:${alternation(list)})\\b`, "i");
+var prefix = (list) => new RegExp(`^\\s+(?:${alternation(list)})`, "i");
+var WORD = /[\w:-]*$/;
+var asOptions = (list, type) => list.map((label) => ({ label, type }));
+var DBT = [{ label: "dbt", type: "keyword" }];
+var COMMAND_OPTIONS = asOptions(COMMANDS, "keyword");
+var SUBCOMMAND_OPTIONS = Object.fromEntries(
+  Object.entries(SUBCOMMANDS).map(([command, subcommands]) => [
+    command,
+    asOptions(subcommands, "keyword")
+  ])
+);
+var ARGUMENT_OPTIONS = asOptions(ARGUMENTS, "variable");
+var FLAG_OPTIONS = asOptions(FLAGS, "constant");
+var METHOD_OPTIONS = asOptions(METHODS, "property");
+var optionsAfter = (words) => {
+  const [step, command, ...rest] = words;
+  if (step === void 0) return DBT;
+  if (step.toLowerCase() !== "dbt") return [];
+  if (command === void 0) return COMMAND_OPTIONS;
+  const subcommands = SUBCOMMAND_OPTIONS[command.toLowerCase()];
+  if (subcommands && rest.length === 0) return subcommands;
+  const lastArgument = rest.filter((it) => it.startsWith("-")).at(-1);
+  const selecting = lastArgument !== void 0 && SELECTORS.includes(lastArgument.toLowerCase());
+  return selecting ? [...ARGUMENT_OPTIONS, ...FLAG_OPTIONS, ...METHOD_OPTIONS] : [...ARGUMENT_OPTIONS, ...FLAG_OPTIONS];
+};
+var complete = (context) => {
+  const typed = context.matchBefore(WORD);
+  if (!typed?.text && !context.explicit) return null;
+  const from = typed?.from ?? context.pos;
+  const line = context.state.doc.lineAt(from);
+  const options = optionsAfter(
+    line.text.slice(0, from - line.from).split(/\s+/).filter(Boolean)
+  );
+  return options.length > 0 ? { from, options, validFor: WORD } : null;
+};
 var dbt = simpleMode.simpleMode({
+  languageData: {
+    // `toggleComment` is a no-op without these, so Mod-/ silently does nothing.
+    commentTokens: { line: "--", block: { open: "/*", close: "*/" } },
+    autocomplete: complete
+  },
   start: [
     { regex: /"(?:[^\\]|\\.)*?(?:"|$)/, token: "string" },
-    { regex: /dbt/, token: "keyword", sol: true },
-    { regex: word(COMMANDS), token: "keyword" },
+    // Word-bounded, so `dbtX` is not a dbt step whose first word happens to
+    // colour — the same thing the completion source asks of it.
+    { regex: /dbt\b/, token: "keyword", sol: true },
+    { regex: word(COMMAND_PHRASES), token: "keyword" },
     { regex: word(ARGUMENTS), token: "variableName" },
     { regex: prefix(METHODS), token: "propertyName" },
     { regex: prefix(FLAGS), token: "attributeName" },
@@ -940,6 +1008,8 @@ var KEYWORDS = {
 };
 var jsonnet = {
   name: "jsonnet",
+  // `toggleComment` is a no-op without these, so Mod-/ silently does nothing.
+  languageData: { commentTokens: { line: "//", block: { open: "/*", close: "*/" } } },
   startState: () => ({
     cComment: false,
     textBlock: false,
@@ -1072,6 +1142,7 @@ var LANGUAGE_MODES = [
   "text/x-mysql",
   "text/x-pgsql",
   "text/x-mssql",
+  // Snowflake, under a historical name — these strings are a published prop contract.
   "text/x-sfsql",
   "text/x-plsql",
   "text/x-rsrc",
@@ -1133,8 +1204,6 @@ var ALWAYS_OFF = {
 var buildBasicSetup = (readOnly) => ({
   ...ALWAYS_OFF,
   ...readOnly ? {
-    history: false,
-    historyKeymap: false,
     closeBrackets: false,
     closeBracketsKeymap: false,
     lintKeymap: false,
@@ -1172,7 +1241,7 @@ var getLanguageMode = (mode) => {
     case "text/x-mssql":
       return langSql.sql({ upperCaseKeywords: true, dialect: langSql.MSSQL });
     case "text/x-sfsql":
-      return language.StreamLanguage.define(codemirrorLangSfsql.sfsql);
+      return langSql.sql({ upperCaseKeywords: true, dialect: codemirrorLangSql.getSqlDialect("snowflake") });
     case "text/x-plsql":
       return langSql.sql({ upperCaseKeywords: true, dialect: langSql.PLSQL });
     case "text/x-rsrc":
@@ -1197,6 +1266,112 @@ var getLanguageMode = (mode) => {
   }
 };
 var shouldLintJson = (mode, readOnly) => mode === "application/json" && !readOnly;
+var setSearchEffect = state.StateEffect.define();
+function findMatches(doc, query) {
+  if (!query) return [];
+  const text = doc.toString();
+  try {
+    const regex = new RegExp(escapeStringRegexp(query), "gi");
+    return Array.from(text.matchAll(regex)).map((match2, index) => {
+      const from = match2.index;
+      const to = from + match2[0].length;
+      return { from, to, text: match2[0], localIndex: index };
+    });
+  } catch (e) {
+    console.warn("Invalid search regex:", e);
+    return [];
+  }
+}
+function createDecorations(matches, selectedLocalIndex) {
+  const decorations = matches.map((match2) => {
+    const isSelected = match2.localIndex === selectedLocalIndex;
+    const decoration = view.Decoration.mark({
+      class: isSelected ? "cm-searchMatch-selected" : "cm-searchMatch"
+    });
+    return decoration.range(match2.from, match2.to);
+  });
+  return view.Decoration.set(decorations, true);
+}
+var searchField = state.StateField.define({
+  create() {
+    return {
+      query: "",
+      selectedMatchIndex: void 0,
+      matches: [],
+      decorations: view.Decoration.none
+    };
+  },
+  update(state, tr) {
+    let newState = state;
+    for (const effect of tr.effects) {
+      if (!effect.is(setSearchEffect)) {
+        continue;
+      }
+      const { query, selectedMatchIndex } = effect.value;
+      const matches = findMatches(tr.state.doc, query);
+      const decorations = createDecorations(matches, selectedMatchIndex);
+      newState = {
+        query,
+        selectedMatchIndex,
+        matches,
+        decorations
+      };
+    }
+    if (tr.docChanged && newState.query) {
+      const matches = findMatches(tr.state.doc, newState.query);
+      const decorations = createDecorations(matches, newState.selectedMatchIndex);
+      newState = {
+        ...newState,
+        matches,
+        decorations
+      };
+    }
+    return newState;
+  },
+  provide: (field) => view.EditorView.decorations.from(field, (state) => state.decorations)
+});
+var searchViewPlugin = view.ViewPlugin.fromClass(
+  class {
+    lastSelectedIndex;
+    update(update) {
+      const state = update.state.field(searchField);
+      if (state.selectedMatchIndex !== void 0 && state.selectedMatchIndex !== this.lastSelectedIndex) {
+        const match2 = state.matches[state.selectedMatchIndex];
+        if (match2) {
+          requestAnimationFrame(() => {
+            update.view.dispatch({
+              effects: view.EditorView.scrollIntoView(match2.from, { y: "center" })
+            });
+          });
+        }
+        this.lastSelectedIndex = state.selectedMatchIndex;
+      }
+      if (state.selectedMatchIndex === void 0) {
+        this.lastSelectedIndex = void 0;
+      }
+    }
+  }
+);
+var searchTheme = view.EditorView.baseTheme({
+  ".cm-searchMatch": {
+    backgroundColor: colors__default.default.blue[100]
+  },
+  ".cm-searchMatch > span": {
+    color: `${colors__default.default.blue[600]} !important`
+  },
+  ".cm-searchMatch-selected": {
+    backgroundColor: colors__default.default.blue[600]
+  },
+  ".cm-searchMatch-selected > span": {
+    color: `${colors__default.default.white} !important`
+  }
+});
+function searchExtension() {
+  return [searchField, searchViewPlugin, searchTheme];
+}
+function updateSearch(view, query, selectedMatchIndex) {
+  view.dispatch({ effects: setSearchEffect.of({ query, selectedMatchIndex }) });
+}
 var KbdSeparator = ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("span", { ...props, className: cn("tw:text-xs tw:text-muted-foreground", className) });
 var KbdGroup = ({ ref, className, children, separator, ...props }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -1256,12 +1431,79 @@ Kbd.Group = KbdGroup;
 Kbd.Separator = KbdSeparator;
 var ToggleComponentHelp = () => /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
   "Use ",
-  /* @__PURE__ */ jsxRuntime.jsx(Kbd, { children: "Ctrl+/" }),
-  " or ",
-  /* @__PURE__ */ jsxRuntime.jsx(Kbd, { children: "Command+/" }),
+  /* @__PURE__ */ jsxRuntime.jsx(Kbd, { children: isMac ? "Command+/" : "Ctrl+/" }),
   " to toggle comments."
 ] });
-var emptyArray = [];
+var establishesFixedContainingBlock = (style) => style.transform !== "none" || style.translate !== "none" || style.rotate !== "none" || style.scale !== "none" || style.perspective !== "none" || style.filter !== "none" || style.backdropFilter !== "none" || /\b(paint|layout|strict|content)\b/.test(style.contain) || /\b(transform|perspective|filter|contain)\b/.test(style.willChange);
+var crops = (style) => style.overflowX !== "visible" || style.overflowY !== "visible" || style.maskImage !== "none" || style.contentVisibility !== "visible" || /\b(paint|strict|content)\b/.test(style.contain);
+var findTooltipHost = (from) => {
+  let outermostCropper = null;
+  for (let node = from.parentElement; node && node !== document.body; node = node.parentElement) {
+    const style = getComputedStyle(node);
+    if (crops(style)) {
+      outermostCropper = node;
+    } else if (establishesFixedContainingBlock(style)) {
+      return outermostCropper?.parentElement ?? node;
+    }
+  }
+  return outermostCropper?.parentElement ?? null;
+};
+var tooltipsExtension = () => {
+  const layer = new state.Compartment();
+  return [
+    layer.of(view.tooltips()),
+    view.ViewPlugin.define((view$1) => {
+      const scheduled = setTimeout(() => {
+        if (!view$1.dom.isConnected) return;
+        const parent = findTooltipHost(view$1.dom);
+        if (parent) view$1.dispatch({ effects: layer.reconfigure(view.tooltips({ parent })) });
+      });
+      return { destroy: () => clearTimeout(scheduled) };
+    })
+  ];
+};
+var useTooltipsExtension = () => React26.useMemo(tooltipsExtension, []);
+
+// src/components/CodeEditor/variableCompletion.ts
+var BOOST = 2e3;
+var NAME = String.raw`[\w-]*`;
+var AT_CARET = new RegExp(String.raw`(?:\{{1,2} ?)?${NAME}$`);
+var NAME_AT_END = new RegExp(`${NAME}$`);
+var OPENING = /\{{1,2} ?$/;
+var CLOSING = /^ ?\}{1,2}/;
+var completeVariables = (variables = []) => {
+  if (variables.length === 0) return () => null;
+  const options = variables.map(({ name, value }) => ({
+    // The bare name: `SqlEditor` filters prefix-only while `CodeEditor` filters
+    // fuzzily, and this is the only spelling both accept whether or not the caret
+    // has typed the braces. The braces are `displayLabel`, which is what renders.
+    label: name,
+    displayLabel: `{{${name}}}`,
+    detail: value,
+    type: "variable",
+    boost: BOOST,
+    apply: (view, completion, from, to) => {
+      const { doc } = view.state;
+      const line = doc.lineAt(from);
+      const insert = `{{${completion.label}}}`;
+      const opening = OPENING.exec(doc.sliceString(line.from, from));
+      const closing = CLOSING.exec(doc.sliceString(to, line.to));
+      const start = opening ? from - opening[0].length : from;
+      const end = closing ? to + closing[0].length : to;
+      view.dispatch({
+        changes: { from: start, to: end, insert },
+        selection: { anchor: start + insert.length }
+      });
+    }
+  }));
+  return (context) => {
+    const match2 = context.matchBefore(AT_CARET);
+    if (!match2?.text) return null;
+    const [name = ""] = NAME_AT_END.exec(match2.text) ?? [];
+    return { from: match2.to - name.length, options };
+  };
+};
+var useVariableCompletion = (variables = []) => useStableCallback(completeVariables(variables));
 var emptyObject = {};
 var CodeEditor = ({
   value,
@@ -1270,8 +1512,13 @@ var CodeEditor = ({
   mode = "application/json",
   placeholder = "",
   ariaLabel,
+  searchQuery,
+  searchMatchIndex,
   readOnly = false,
-  autocompletions = emptyArray,
+  inputLocked = false,
+  autocompletions,
+  completionSource,
+  variables,
   extraKeys = emptyObject,
   withToggleCommentHint = false,
   withAutofocus = false,
@@ -1286,49 +1533,86 @@ var CodeEditor = ({
   className
 }) => {
   const handleChange = useStableCallback((next) => onChange?.(next));
+  const withSearch = searchQuery !== void 0;
+  const editorRef = React26.useRef(null);
+  React26.useEffect(() => {
+    const view = editorRef.current?.view;
+    if (view && withSearch) updateSearch(view, searchQuery, searchMatchIndex);
+  }, [withSearch, searchQuery, searchMatchIndex]);
+  const handleCreateEditor = useStableCallback((view) => {
+    if (searchQuery) updateSearch(view, searchQuery, searchMatchIndex);
+  });
+  const extraKeysRef = React26.useRef(extraKeys);
+  React26.useLayoutEffect(() => {
+    extraKeysRef.current = extraKeys;
+  });
+  const boundKeysSignature = Object.keys(extraKeys).join("\n");
+  const boundKeys = React26.useMemo(
+    () => boundKeysSignature.split("\n").filter(Boolean),
+    [boundKeysSignature]
+  );
+  const tooltipLayer = useTooltipsExtension();
+  const variableCompletion = useVariableCompletion(variables);
   const customTheme = useThemedExtension("editor:syntax", buildCustomTheme);
   const baseTheme = useThemedExtension(
     "code-editor:chrome",
     () => view.EditorView.theme(buildBaseThemeStyles())
   );
   const commonExtensions = React26.useMemo(() => {
+    const callerCompletions = completionSource ?? (completeAny ? autocomplete.completeAnyWord : autocompletions?.length ? autocompletions : null);
+    const completionEntries = [
+      ...callerCompletions ? [{ autocomplete: callerCompletions }] : [],
+      { autocomplete: variableCompletion }
+    ];
     return [
       getLanguageMode(mode),
       shouldLintJson(mode, readOnly) ? lint.linter(langJson.jsonParseLinter()) : [],
       withLineWrapping ? view.EditorView.lineWrapping : [],
-      CodeMirror.EditorState.languageData.of(() => [
-        { autocomplete: completeAny ? autocomplete.completeAnyWord : autocompletions }
-      ]),
+      CodeMirror.EditorState.languageData.of(() => completionEntries),
       view.keymap.of(
-        Object.entries(extraKeys).map(([key, run]) => ({
+        boundKeys.map((key) => ({
           key,
           run: () => {
-            if (typeof run === "string") return run;
-            run();
+            extraKeysRef.current[key]?.();
             return true;
           }
         }))
       ),
-      readOnly ? [] : autocomplete.autocompletion({ activateOnTyping: completeAny }),
+      readOnly ? [] : [
+        // CodeMirror's own default. Gating it on the props hid completions the
+        // *language* supplies — dbt's vocabulary, Snowflake's keywords — behind
+        // a shortcut, and macOS leaves no usable one. With nothing to offer, no
+        // popup opens anyway.
+        autocomplete.autocompletion()
+      ],
       ariaLabel ? view.EditorView.contentAttributes.of({ "aria-label": ariaLabel }) : [],
+      withSearch ? searchExtension() : [],
+      tooltipLayer,
       baseTheme
     ];
   }, [
     autocompletions,
+    completionSource,
+    variableCompletion,
     completeAny,
-    extraKeys,
+    boundKeys,
     mode,
     readOnly,
     withLineWrapping,
     baseTheme,
-    ariaLabel
+    ariaLabel,
+    withSearch,
+    tooltipLayer
   ]);
   const extensions = React26.useMemo(() => {
     return [
       ...commonExtensions,
       view.placeholder(placeholder),
       view.EditorView.editable.of(!readOnly),
-      CodeMirror.EditorState.readOnly.of(readOnly),
+      // The lock is this facet and nothing else. `contenteditable` is what the
+      // read-only wash keys off, and `basicSetup` is what holds the undo history,
+      // so leaving both alone is what makes the lock invisible.
+      CodeMirror.EditorState.readOnly.of(readOnly || inputLocked),
       previousValue ? merge.unifiedMergeView({
         original: previousValue,
         mergeControls: false,
@@ -1336,13 +1620,16 @@ var CodeEditor = ({
         collapseUnchanged: withCollapseUnchanged ? {} : void 0
       }) : []
     ];
-  }, [commonExtensions, placeholder, readOnly, previousValue, withCollapseUnchanged]);
+  }, [commonExtensions, placeholder, readOnly, inputLocked, previousValue, withCollapseUnchanged]);
   const config = React26.useMemo(() => {
     return {
       ...buildBasicSetup(readOnly),
-      lineNumbers: withLineNumbers
+      lineNumbers: withLineNumbers,
+      // Mod-f opens CodeMirror's own panel, which would run a second query and a
+      // second match count over the same document beside the caller's input.
+      ...withSearch ? { searchKeymap: false } : null
     };
-  }, [withLineNumbers, readOnly]);
+  }, [withLineNumbers, readOnly, withSearch]);
   const additionalButtons = renderAdditionalButtons?.(value);
   const hasToolbar = withCopyButton && !!value || !!additionalButtons;
   return (
@@ -1365,6 +1652,8 @@ var CodeEditor = ({
           /* @__PURE__ */ jsxRuntime.jsx(
             CodeMirror__default.default,
             {
+              ref: editorRef,
+              onCreateEditor: handleCreateEditor,
               theme: customTheme,
               value,
               onChange: handleChange,
@@ -8948,9 +9237,9 @@ var ComboboxItemIndicator = ({ ref, className, variant = "check", ...props }) =>
         "tw:absolute",
         "tw:right-2",
         "tw:group-data-[variant=default]/combobox-content:right-4",
-        // Lucide SVGs default to 24×24 — constrain the rendered child so the
-        // 16px indicator slot owns the actual size.
-        'tw:[&_svg:not([class*="tw:size-"])]:size-4',
+        // `render={<Check />}` makes the icon the indicator element itself (not a descendant), so a
+        // `[&_svg]` rule never matches it — size it directly or Lucide renders at its 24px default.
+        "tw:size-4",
         "tw:group-data-[highlighted]/combobox-item:text-accent-foreground",
         "tw:group-data-[variant=default]/combobox-content:group-data-[highlighted]/combobox-item:text-foreground",
         className
@@ -9075,6 +9364,9 @@ var ComboboxGroupLabel = ({ ref, className, ...props }) => /* @__PURE__ */ jsxRu
   }
 );
 var ComboboxCollection = ({ ...props }) => /* @__PURE__ */ jsxRuntime.jsx(combobox.Combobox.Collection, { "data-slot": "combobox-collection", ...props });
+var VIRTUALIZE_THRESHOLD = 30;
+var ESTIMATED_ROW_HEIGHT = 40;
+var ESTIMATED_LIST_HEIGHT = 320;
 var Combobox = ({
   // root props
   items: _itemsProp,
@@ -9101,6 +9393,7 @@ var Combobox = ({
   empty = "No items",
   indicator,
   prefix: prefix2,
+  virtualized = false,
   // creatable
   allowCreate,
   queryToCreateValue,
@@ -9124,7 +9417,9 @@ var Combobox = ({
     const label = value === null ? "" : itemToStringLabelProp?.(value) ?? toLabel(value);
     setInputValue((prev) => prev === label ? prev : label);
   }, [value]);
-  const query = inputValue.trim();
+  const selectedLabel = value == null ? void 0 : itemToStringLabelProp?.(value) ?? toLabel(value);
+  const isShowingSelection = selectedLabel !== void 0 && inputValue === selectedLabel;
+  const query = (isShowingSelection ? "" : inputValue).trim();
   const queryLower = query.toLowerCase();
   const itemsProp = _itemsProp ?? [];
   const sampleItem = itemsProp.flatMap((item) => isGroupItem(item) ? item.items : [item])[0];
@@ -9149,7 +9444,7 @@ var Combobox = ({
     if (isCreatableItem(value2)) return value2.value;
     return itemToStringLabelProp?.(value2) ?? toLabel(value2);
   };
-  const wrappedFilter = !allowCreate || !filter ? filter : (item, ...args) => isCreatableItem(item) || filter(item, ...args);
+  const wrappedFilter = isShowingSelection ? () => true : !allowCreate || !filter ? filter : (item, ...args) => isCreatableItem(item) || filter(item, ...args);
   const wrappedItemToStringValue = !allowCreate || !itemToStringValue ? itemToStringValue : (item) => isCreatableItem(item) ? item.value : itemToStringValue(item);
   const isItemEqualToValue = (a, b) => {
     if (isCreatableItem(a) || isCreatableItem(b)) return toValueKey(a) === toValueKey(b);
@@ -9184,10 +9479,34 @@ var Combobox = ({
     closeReasonRef.current = "item-press";
     onValueChange?.(next, event);
   };
-  const renderItem = (item) => {
+  const [listElement, setListElement] = React26.useState(null);
+  const isGrouped = isGroupItems(allItems);
+  const shouldVirtualize = !isGrouped && (virtualized === true || virtualized === "auto" && allItems.length > VIRTUALIZE_THRESHOLD);
+  const matchesQuery = (item) => {
+    if (isCreatableItem(item)) return true;
+    if (!query) return true;
+    if (filter) return !!filter(item, query, (value2) => itemToStringLabel(value2) ?? toLabel(value2));
+    return (itemToStringLabel(item) ?? toLabel(item)).toLowerCase().includes(queryLower);
+  };
+  const virtualItems = shouldVirtualize ? items.filter(matchesQuery) : [];
+  const virtualizer = reactVirtual.useVirtualizer({
+    count: virtualItems.length,
+    getScrollElement: () => listElement,
+    estimateSize: () => ESTIMATED_ROW_HEIGHT,
+    overscan: 12,
+    enabled: shouldVirtualize,
+    // Seed a viewport height so rows paint on the first frame. Without it the list measures 0 until
+    // the ResizeObserver fires (a frame later), which renders an empty popup on open.
+    initialRect: { width: 0, height: ESTIMATED_LIST_HEIGHT }
+  });
+  const renderItem = (item, index) => {
+    if (isCreatableItem(item)) {
+      return /* @__PURE__ */ jsxRuntime.jsx(Combobox.Item, { index, value: item, icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, {}), children: queryToCreateLabel(item.value) });
+    }
     return /* @__PURE__ */ jsxRuntime.jsx(
       Combobox.Item,
       {
+        index,
         value: item,
         indicator,
         icon: itemToIcon(item),
@@ -9196,13 +9515,20 @@ var Combobox = ({
       }
     );
   };
+  const rowStyle = (offset) => ({
+    position: "absolute",
+    top: 0,
+    left: 0,
+    width: "100%",
+    transform: `translateY(${offset}px)`
+  });
   return /* @__PURE__ */ jsxRuntime.jsxs(
     combobox.Combobox.Root,
     {
-      items,
+      items: shouldVirtualize ? virtualItems : items,
       value,
       defaultValue,
-      filter: wrappedFilter,
+      filter: shouldVirtualize ? null : wrappedFilter,
       onValueChange: handleOnValueChange,
       itemToStringLabel,
       isItemEqualToValue,
@@ -9212,6 +9538,12 @@ var Combobox = ({
       inputRef,
       inputValue,
       onInputValueChange: handleInputValueChange,
+      virtualized: shouldVirtualize,
+      onItemHighlighted: (_, details) => {
+        if (shouldVirtualize && details.reason === "keyboard") {
+          virtualizer.scrollToIndex(details.index);
+        }
+      },
       children: [
         /* @__PURE__ */ jsxRuntime.jsxs(
           ComboboxInputGroup,
@@ -9233,7 +9565,30 @@ var Combobox = ({
         ),
         /* @__PURE__ */ jsxRuntime.jsxs(ComboboxContent, { children: [
           /* @__PURE__ */ jsxRuntime.jsx(ComboboxEmpty, { children: empty }),
-          /* @__PURE__ */ jsxRuntime.jsx(ComboboxList, { children: (itemOrGroup) => {
+          shouldVirtualize ? /* @__PURE__ */ jsxRuntime.jsx(ComboboxList, { ref: setListElement, children: /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              style: {
+                position: "relative",
+                width: "100%",
+                height: `${virtualizer.getTotalSize()}px`
+              },
+              children: virtualizer.getVirtualItems().map((row) => {
+                const item = virtualItems[row.index];
+                if (item === void 0) return null;
+                return /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    "data-index": row.index,
+                    ref: virtualizer.measureElement,
+                    style: rowStyle(row.start),
+                    children: renderItem(item, row.index)
+                  },
+                  row.key
+                );
+              })
+            }
+          ) }) : /* @__PURE__ */ jsxRuntime.jsx(ComboboxList, { children: (itemOrGroup) => {
             if (isCreatableItem(itemOrGroup))
               return /* @__PURE__ */ jsxRuntime.jsx(Combobox.Item, { value: itemOrGroup, icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, {}), children: queryToCreateLabel(itemOrGroup.value) });
             if (isGroupItem(itemOrGroup)) {
@@ -9244,7 +9599,7 @@ var Combobox = ({
               const groupLabel = groupToLabel(itemOrGroup);
               return /* @__PURE__ */ jsxRuntime.jsxs(Combobox.Group, { items: itemOrGroup.items, children: [
                 groupLabel && /* @__PURE__ */ jsxRuntime.jsx(Combobox.GroupLabel, { children: groupLabel }),
-                /* @__PURE__ */ jsxRuntime.jsx(Combobox.GroupList, { children: renderItem })
+                /* @__PURE__ */ jsxRuntime.jsx(Combobox.GroupList, { children: (item) => renderItem(item) })
               ] });
             }
             return renderItem(itemOrGroup);