@keboola/design 9.0.0 → 9.1.0

package/dist/rjsf.js

@@ -1,7 +1,7 @@
 import React26, { createContext, use, useCallback, useMemo, useRef, useState, useEffect, useContext, isValidElement, useLayoutEffect, useId, useSyncExternalStore, Children, Fragment as Fragment$1 } from 'react';
 import Form2 from '@rjsf/core';
 import validator from '@rjsf/validator-ajv8';
-import { completeFromList, completeAnyWord, autocompletion } from '@codemirror/autocomplete';
+import { completeAnyWord, autocompletion } from '@codemirror/autocomplete';
 import { jsonParseLinter, json } from '@codemirror/lang-json';
 import { linter } from '@codemirror/lint';
 import { unifiedMergeView } from '@codemirror/merge';
@@ -23,7 +23,7 @@ import { r } from '@codemirror/legacy-modes/mode/r';
 import { shell } from '@codemirror/legacy-modes/mode/shell';
 import { toml } from '@codemirror/legacy-modes/mode/toml';
 import { githubLightInit } from '@uiw/codemirror-theme-github';
-import { modeSpec, sfsql } from '@keboola/codemirror-lang-sfsql';
+import { getSqlDialect } from '@keboola/codemirror-lang-sql';
 import colors from '@keboola/tailwind-config/colors';
 import { simpleMode } from '@codemirror/legacy-modes/mode/simple-mode';
 import { StateEffect, StateField, Compartment } from '@codemirror/state';
@@ -36,6 +36,7 @@ import TextareaAutosize from 'react-textarea-autosize';
 import { Root, Indicator } from '@radix-ui/react-checkbox';
 import { Root as Root$3, Trigger as Trigger$1, Close, Portal as Portal$1, Content as Content$2 } from '@radix-ui/react-popover';
 import { Combobox as Combobox$1 } from '@base-ui/react/combobox';
+import { useVirtualizer } from '@tanstack/react-virtual';
 import * as RRadioGroup from '@radix-ui/react-radio-group';
 import { Item, Indicator as Indicator$1 } from '@radix-ui/react-radio-group';
 import * as RSeparator from '@radix-ui/react-separator';
@@ -1107,6 +1108,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",
@@ -1168,8 +1170,6 @@ var ALWAYS_OFF = {
 var buildBasicSetup = (readOnly) => ({
   ...ALWAYS_OFF,
   ...readOnly ? {
-    history: false,
-    historyKeymap: false,
     closeBrackets: false,
     closeBracketsKeymap: false,
     lintKeymap: false,
@@ -1191,20 +1191,6 @@ var buildCustomTheme = () => githubLightInit({
     selection: resolveToken("primary", "31 143 255")
   }
 });
-var sfsqlWithLanguageData = {
-  ...sfsql,
-  languageData: {
-    ...sfsql.languageData,
-    // `toggleComment` is a no-op without these, so Mod-/ silently does nothing.
-    commentTokens: { line: "--", block: { open: "/*", close: "*/" } },
-    autocomplete: completeFromList(
-      Object.keys(modeSpec.keywords).map((label) => ({
-        label: label.toUpperCase(),
-        type: "keyword"
-      }))
-    )
-  }
-};
 var getLanguageMode = (mode) => {
   switch (mode) {
     case void 0:
@@ -1221,7 +1207,7 @@ var getLanguageMode = (mode) => {
     case "text/x-mssql":
       return sql({ upperCaseKeywords: true, dialect: MSSQL });
     case "text/x-sfsql":
-      return StreamLanguage.define(sfsqlWithLanguageData);
+      return sql({ upperCaseKeywords: true, dialect: getSqlDialect("snowflake") });
     case "text/x-plsql":
       return sql({ upperCaseKeywords: true, dialect: PLSQL });
     case "text/x-rsrc":
@@ -1483,7 +1469,7 @@ var completeVariables = (variables = []) => {
     return { from: match2.to - name.length, options };
   };
 };
-var emptyArray = [];
+var useVariableCompletion = (variables = []) => useStableCallback(completeVariables(variables));
 var emptyObject = {};
 var CodeEditor = ({
   value,
@@ -1495,7 +1481,8 @@ var CodeEditor = ({
   searchQuery,
   searchMatchIndex,
   readOnly = false,
-  autocompletions = emptyArray,
+  inputLocked = false,
+  autocompletions,
   completionSource,
   variables,
   extraKeys = emptyObject,
@@ -1531,21 +1518,23 @@ var CodeEditor = ({
     [boundKeysSignature]
   );
   const tooltipLayer = useTooltipsExtension();
-  const variableCompletion = useMemo(() => completeVariables(variables), [variables]);
+  const variableCompletion = useVariableCompletion(variables);
   const customTheme = useThemedExtension("editor:syntax", buildCustomTheme);
   const baseTheme = useThemedExtension(
     "code-editor:chrome",
     () => EditorView.theme(buildBaseThemeStyles())
   );
   const commonExtensions = useMemo(() => {
+    const callerCompletions = completionSource ?? (completeAny ? completeAnyWord : autocompletions?.length ? autocompletions : null);
+    const completionEntries = [
+      ...callerCompletions ? [{ autocomplete: callerCompletions }] : [],
+      { autocomplete: variableCompletion }
+    ];
     return [
       getLanguageMode(mode),
       shouldLintJson(mode, readOnly) ? linter(jsonParseLinter()) : [],
       withLineWrapping ? EditorView.lineWrapping : [],
-      EditorState.languageData.of(() => [
-        { autocomplete: completionSource ?? (completeAny ? completeAnyWord : autocompletions) }
-      ]),
-      EditorState.languageData.of(() => [{ autocomplete: variableCompletion }]),
+      EditorState.languageData.of(() => completionEntries),
       keymap.of(
         boundKeys.map((key) => ({
           key,
@@ -1586,7 +1575,10 @@ var CodeEditor = ({
       ...commonExtensions,
       placeholder(placeholder$1),
       EditorView.editable.of(!readOnly),
-      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.
+      EditorState.readOnly.of(readOnly || inputLocked),
       previousValue ? unifiedMergeView({
         original: previousValue,
         mergeControls: false,
@@ -1594,7 +1586,7 @@ var CodeEditor = ({
         collapseUnchanged: withCollapseUnchanged ? {} : void 0
       }) : []
     ];
-  }, [commonExtensions, placeholder$1, readOnly, previousValue, withCollapseUnchanged]);
+  }, [commonExtensions, placeholder$1, readOnly, inputLocked, previousValue, withCollapseUnchanged]);
   const config = useMemo(() => {
     return {
       ...buildBasicSetup(readOnly),
@@ -9211,9 +9203,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
@@ -9338,6 +9330,9 @@ var ComboboxGroupLabel = ({ ref, className, ...props }) => /* @__PURE__ */ jsx(
   }
 );
 var ComboboxCollection = ({ ...props }) => /* @__PURE__ */ jsx(Combobox$1.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,
@@ -9364,6 +9359,7 @@ var Combobox = ({
   empty = "No items",
   indicator,
   prefix: prefix2,
+  virtualized = false,
   // creatable
   allowCreate,
   queryToCreateValue,
@@ -9387,7 +9383,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];
@@ -9412,7 +9410,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);
@@ -9447,10 +9445,34 @@ var Combobox = ({
     closeReasonRef.current = "item-press";
     onValueChange?.(next, event);
   };
-  const renderItem = (item) => {
+  const [listElement, setListElement] = 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 = 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__ */ jsx(Combobox.Item, { index, value: item, icon: /* @__PURE__ */ jsx(Plus, {}), children: queryToCreateLabel(item.value) });
+    }
     return /* @__PURE__ */ jsx(
       Combobox.Item,
       {
+        index,
         value: item,
         indicator,
         icon: itemToIcon(item),
@@ -9459,13 +9481,20 @@ var Combobox = ({
       }
     );
   };
+  const rowStyle = (offset) => ({
+    position: "absolute",
+    top: 0,
+    left: 0,
+    width: "100%",
+    transform: `translateY(${offset}px)`
+  });
   return /* @__PURE__ */ jsxs(
     Combobox$1.Root,
     {
-      items,
+      items: shouldVirtualize ? virtualItems : items,
       value,
       defaultValue,
-      filter: wrappedFilter,
+      filter: shouldVirtualize ? null : wrappedFilter,
       onValueChange: handleOnValueChange,
       itemToStringLabel,
       isItemEqualToValue,
@@ -9475,6 +9504,12 @@ var Combobox = ({
       inputRef,
       inputValue,
       onInputValueChange: handleInputValueChange,
+      virtualized: shouldVirtualize,
+      onItemHighlighted: (_, details) => {
+        if (shouldVirtualize && details.reason === "keyboard") {
+          virtualizer.scrollToIndex(details.index);
+        }
+      },
       children: [
         /* @__PURE__ */ jsxs(
           ComboboxInputGroup,
@@ -9496,7 +9531,30 @@ var Combobox = ({
         ),
         /* @__PURE__ */ jsxs(ComboboxContent, { children: [
           /* @__PURE__ */ jsx(ComboboxEmpty, { children: empty }),
-          /* @__PURE__ */ jsx(ComboboxList, { children: (itemOrGroup) => {
+          shouldVirtualize ? /* @__PURE__ */ jsx(ComboboxList, { ref: setListElement, children: /* @__PURE__ */ 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__ */ jsx(
+                  "div",
+                  {
+                    "data-index": row.index,
+                    ref: virtualizer.measureElement,
+                    style: rowStyle(row.start),
+                    children: renderItem(item, row.index)
+                  },
+                  row.key
+                );
+              })
+            }
+          ) }) : /* @__PURE__ */ jsx(ComboboxList, { children: (itemOrGroup) => {
             if (isCreatableItem(itemOrGroup))
               return /* @__PURE__ */ jsx(Combobox.Item, { value: itemOrGroup, icon: /* @__PURE__ */ jsx(Plus, {}), children: queryToCreateLabel(itemOrGroup.value) });
             if (isGroupItem(itemOrGroup)) {
@@ -9507,7 +9565,7 @@ var Combobox = ({
               const groupLabel = groupToLabel(itemOrGroup);
               return /* @__PURE__ */ jsxs(Combobox.Group, { items: itemOrGroup.items, children: [
                 groupLabel && /* @__PURE__ */ jsx(Combobox.GroupLabel, { children: groupLabel }),
-                /* @__PURE__ */ jsx(Combobox.GroupList, { children: renderItem })
+                /* @__PURE__ */ jsx(Combobox.GroupList, { children: (item) => renderItem(item) })
               ] });
             }
             return renderItem(itemOrGroup);