@keboola/design 9.0.0 → 9.1.0

package/dist/rjsf.cjs

@@ -25,7 +25,7 @@ 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');
@@ -38,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');
 
@@ -1141,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",
@@ -1202,8 +1204,6 @@ var ALWAYS_OFF = {
 var buildBasicSetup = (readOnly) => ({
   ...ALWAYS_OFF,
   ...readOnly ? {
-    history: false,
-    historyKeymap: false,
     closeBrackets: false,
     closeBracketsKeymap: false,
     lintKeymap: false,
@@ -1225,20 +1225,6 @@ var buildCustomTheme = () => codemirrorThemeGithub.githubLightInit({
     selection: resolveToken("primary", "31 143 255")
   }
 });
-var sfsqlWithLanguageData = {
-  ...codemirrorLangSfsql.sfsql,
-  languageData: {
-    ...codemirrorLangSfsql.sfsql.languageData,
-    // `toggleComment` is a no-op without these, so Mod-/ silently does nothing.
-    commentTokens: { line: "--", block: { open: "/*", close: "*/" } },
-    autocomplete: autocomplete.completeFromList(
-      Object.keys(codemirrorLangSfsql.modeSpec.keywords).map((label) => ({
-        label: label.toUpperCase(),
-        type: "keyword"
-      }))
-    )
-  }
-};
 var getLanguageMode = (mode) => {
   switch (mode) {
     case void 0:
@@ -1255,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(sfsqlWithLanguageData);
+      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":
@@ -1517,7 +1503,7 @@ var completeVariables = (variables = []) => {
     return { from: match2.to - name.length, options };
   };
 };
-var emptyArray = [];
+var useVariableCompletion = (variables = []) => useStableCallback(completeVariables(variables));
 var emptyObject = {};
 var CodeEditor = ({
   value,
@@ -1529,7 +1515,8 @@ var CodeEditor = ({
   searchQuery,
   searchMatchIndex,
   readOnly = false,
-  autocompletions = emptyArray,
+  inputLocked = false,
+  autocompletions,
   completionSource,
   variables,
   extraKeys = emptyObject,
@@ -1565,21 +1552,23 @@ var CodeEditor = ({
     [boundKeysSignature]
   );
   const tooltipLayer = useTooltipsExtension();
-  const variableCompletion = React26.useMemo(() => completeVariables(variables), [variables]);
+  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: completionSource ?? (completeAny ? autocomplete.completeAnyWord : autocompletions) }
-      ]),
-      CodeMirror.EditorState.languageData.of(() => [{ autocomplete: variableCompletion }]),
+      CodeMirror.EditorState.languageData.of(() => completionEntries),
       view.keymap.of(
         boundKeys.map((key) => ({
           key,
@@ -1620,7 +1609,10 @@ var CodeEditor = ({
       ...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,
@@ -1628,7 +1620,7 @@ var CodeEditor = ({
         collapseUnchanged: withCollapseUnchanged ? {} : void 0
       }) : []
     ];
-  }, [commonExtensions, placeholder, readOnly, previousValue, withCollapseUnchanged]);
+  }, [commonExtensions, placeholder, readOnly, inputLocked, previousValue, withCollapseUnchanged]);
   const config = React26.useMemo(() => {
     return {
       ...buildBasicSetup(readOnly),
@@ -9245,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
@@ -9372,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,
@@ -9398,6 +9393,7 @@ var Combobox = ({
   empty = "No items",
   indicator,
   prefix: prefix2,
+  virtualized = false,
   // creatable
   allowCreate,
   queryToCreateValue,
@@ -9421,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];
@@ -9446,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);
@@ -9481,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),
@@ -9493,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,
@@ -9509,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,
@@ -9530,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)) {
@@ -9541,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);