@keboola/design 8.0.0 → 9.1.0

package/dist/index.cjs

@@ -28,6 +28,7 @@ var reactSlider = require('@radix-ui/react-slider');
 var SelectPrimitive6 = require('@radix-ui/react-select');
 var reactCheckbox = require('@radix-ui/react-checkbox');
 var combobox = require('@base-ui/react/combobox');
+var reactVirtual = require('@tanstack/react-virtual');
 var inputOtp = require('input-otp');
 var ReactMarkdown = require('react-markdown');
 var remarkGfm = require('remark-gfm');
@@ -12433,9 +12434,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
@@ -12560,6 +12561,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,
@@ -12586,6 +12590,7 @@ var Combobox = ({
   empty = "No items",
   indicator,
   prefix,
+  virtualized = false,
   // creatable
   allowCreate,
   queryToCreateValue,
@@ -12609,7 +12614,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];
@@ -12634,7 +12641,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);
@@ -12669,10 +12676,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 matchesQuery2 = (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(matchesQuery2) : [];
+  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),
@@ -12681,13 +12712,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,
@@ -12697,6 +12735,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,
@@ -12718,7 +12762,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)) {
@@ -12729,7 +12796,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);
@@ -13767,6 +13834,8 @@ var formatDateRange = (range, inputValue) => {
   const toStr = to?.toLocaleDateString();
   return `${fromStr} - ${toStr}`;
 };
+var ISO_DATE_ONLY = /^\d{4}-\d{2}-\d{2}$/;
+var parseLocalDate = (value) => ISO_DATE_ONLY.test(value) ? /* @__PURE__ */ new Date(`${value}T00:00:00`) : new Date(value);
 var parseDateRange = (value) => {
   const parts = value.split(" - ");
   if (parts.length !== 2) {
@@ -13776,8 +13845,8 @@ var parseDateRange = (value) => {
   if (!fromPart || !toPart) {
     return null;
   }
-  const from = new Date(fromPart.trim());
-  const to = new Date(toPart.trim());
+  const from = parseLocalDate(fromPart.trim());
+  const to = parseLocalDate(toPart.trim());
   if (isNaN(from.getTime()) || isNaN(to.getTime())) {
     return null;
   }
@@ -23640,6 +23709,13 @@ function useAutosizeInput({
   ] });
   return { inputRef, inputStyle, sizerElement };
 }
+var useStableCallback = (callback) => {
+  const latestRef = React26.useRef(callback);
+  React26.useLayoutEffect(() => {
+    latestRef.current = callback;
+  }, [callback]);
+  return React26.useCallback((...args) => latestRef.current(...args), []);
+};
 var MIN_SCALE = 0.5;
 var MAX_SCALE = 3;
 var ZOOM_STEP = 0.1;
@@ -24809,6 +24885,7 @@ exports.useMergeDiff = useMergeDiff;
 exports.useNotification = useNotification;
 exports.useScrollbarPosition = useScrollbarPosition;
 exports.useSidebar = useSidebar;
+exports.useStableCallback = useStableCallback;
 exports.useTargetRect = useTargetRect;
 exports.useTheme = useTheme;
 exports.wcagLevel = wcagLevel;