@keboola/design 9.0.0 → 9.1.0

package/dist/index.d.cts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
-import { ComponentProps, ReactNode, PropsWithChildren, ComponentPropsWithRef, MouseEvent as MouseEvent$1, HTMLAttributes, Ref, RefObject, MouseEventHandler, ChangeEvent, FocusEvent as FocusEvent$1, KeyboardEvent as KeyboardEvent$1, ComponentPropsWithoutRef, ComponentRef, CSSProperties, TransitionEventHandler, MutableRefObject, RefCallback } from 'react';
+import { ComponentProps, ReactNode, PropsWithChildren, ComponentPropsWithRef, MouseEvent as MouseEvent$1, HTMLAttributes, Ref, RefObject, MouseEventHandler, ChangeEvent, FocusEvent as FocusEvent$1, CSSProperties, KeyboardEvent as KeyboardEvent$1, ComponentPropsWithoutRef, ComponentRef, TransitionEventHandler, MutableRefObject, RefCallback } from 'react';
 import * as class_variance_authority from 'class-variance-authority';
 import { VariantProps } from 'class-variance-authority';
 import * as class_variance_authority_types from 'class-variance-authority/types';
@@ -1797,13 +1797,20 @@ type Props$$<Value, GroupShape extends Group<Value> = Group<Value>> = PublicComb
     empty?: ReactNode;
     indicator?: Indicator$1;
     prefix?: ReactNode;
+    /**
+     * Window the list with a virtualizer so large option sets stay fast. Opt-in — defaults to
+     * `false` to keep behavior unchanged for existing call sites (every option stays in the DOM).
+     * Pass `'auto'` to virtualize only ungrouped lists longer than {@link VIRTUALIZE_THRESHOLD},
+     * or `true` to force it. Grouped lists are never virtualized.
+     */
+    virtualized?: boolean | 'auto';
     itemToLabel?: (item: Value) => ReactNode;
     itemToIcon?: (item: Value) => ReactNode;
     itemToDisabled?: (item: Value) => boolean;
     groupToLabel?: (group: GroupShape) => ReactNode;
 };
 declare const Combobox: {
-    <Value, GroupShape extends Group<Value> = Group<Value>>({ items: _itemsProp, value, defaultValue, onValueChange, itemToStringLabel: itemToStringLabelProp, itemToStringValue, disabled, filter, inputRef, onOpenChangeComplete, isItemEqualToValue: isItemEqualToValueProp, variant, sizing, focusVariant, state, placeholder, allowClear, id, className, empty, indicator, prefix, allowCreate, queryToCreateValue, queryToCreateLabel, itemToDisabled, itemToLabel, itemToIcon, groupToLabel, }: Props$$<Value, GroupShape>): react_jsx_runtime.JSX.Element;
+    <Value, GroupShape extends Group<Value> = Group<Value>>({ items: _itemsProp, value, defaultValue, onValueChange, itemToStringLabel: itemToStringLabelProp, itemToStringValue, disabled, filter, inputRef, onOpenChangeComplete, isItemEqualToValue: isItemEqualToValueProp, variant, sizing, focusVariant, state, placeholder, allowClear, id, className, empty, indicator, prefix, virtualized, allowCreate, queryToCreateValue, queryToCreateLabel, itemToDisabled, itemToLabel, itemToIcon, groupToLabel, }: Props$$<Value, GroupShape>): react_jsx_runtime.JSX.Element;
     Root: <Value, Multiple extends boolean | undefined = false>(props: Combobox$1.Root.Props<Value, Multiple>) => react_jsx_runtime.JSX.Element;
     InputGroup: ({ ref, state, variant, sizing, focusVariant, className, ...props }: {
         variant?: "primary" | "secondary" | null | undefined;
@@ -1823,7 +1830,7 @@ declare const Combobox: {
         popover?: "" | "auto" | "manual" | "hint" | undefined | undefined;
         form?: string | undefined | undefined;
         slot?: string | undefined | undefined;
-        style?: react.CSSProperties | ((state: _base_ui_react_combobox.ComboboxInputState) => React.CSSProperties | undefined) | undefined;
+        style?: CSSProperties | ((state: _base_ui_react_combobox.ComboboxInputState) => React.CSSProperties | undefined) | undefined;
         title?: string | undefined | undefined;
         pattern?: string | undefined | undefined;
         ref?: react.Ref<HTMLInputElement> | undefined;
@@ -10322,6 +10329,24 @@ declare const useScrollbarPosition: () => {
     isNone: boolean;
 };
 
+/**
+ * A callback with a permanently stable identity that always sees the latest
+ * render's values — for any consumer that keys off the handler's identity: a
+ * third-party component that redoes expensive work when it changes, or a
+ * memoized context value.
+ *
+ * React 19.2's `useEffectEvent` does this in one line, but it is scoped to
+ * Effects and explicitly not to be passed to another component, which is the
+ * whole point here.
+ *
+ * The swap is a layout effect rather than a passive one so it lands before the
+ * browser can paint and accept input against the previous render's handler. It
+ * is still an effect, and a child's runs before its parent's — so a consumer
+ * calling the returned function from its own layout effect can still see the
+ * previous render's closure.
+ */
+declare const useStableCallback: <Args extends unknown[], Result>(callback: (...args: Args) => Result) => ((...args: Args) => Result);
+
 declare const cn: (...classes: ClassValue[]) => string;
 
 declare const copyToClipboard: (text: string) => Promise<void>;
@@ -10410,4 +10435,4 @@ declare const contrastRatio: (fg: string, bg: string) => number;
 /** WCAG level for normal-size text at a given ratio. */
 declare const wcagLevel: (ratio: number) => "AAA" | "AA" | "fail";
 
-export { Alert, AlertModal, AnswerSummary, type AnswerItem as AnswerSummaryItem, type Props$N as AnswerSummaryProps, type Variant$5 as AnswerSummaryVariant, AppShell, ArgoDesignContext, AutoSaveTextarea, Avatar, Badge, BrandEditor, type BrandEditorProps, type BrandId, BrandLogo, Breadcrumb, Button, ButtonGroup, ButtonInline, Calendar, type CalendarProps, Card, ChangeClassification, ChartPanel, type RootProps as ChartPanelProps, Checkbox, Clipboard, ClipboardButton, ClipboardInline, Collapse, Collapsible, CollapsiblePanel, CollapsibleStepHeader, ColorInput, ColorModeSwitch, type ColorScheme, type ColorSlot, Combobox, Command, CommandGroup, CommandInput, CommandItem, CommandList, ConflictStatusIndicator, CopyField, DEFAULT_COLOR_SCHEME, DEFAULT_FALLBACK_FONT, DEFAULT_FONT_OPTIONS, DEFAULT_BRAND_ID as DEFAULT_KEBOOLA_BRAND_ID, DashboardHero, type RootProps$2 as DashboardHeroProps, DateInput, DatePicker, type DateRange, DateRangeInput, DateRangePicker, type DateRangePreset, type DiffInformation, type DiffRow, DiffType, DiffView, DotsLoader, DropdownMenu, EmptyConfigurationActionCard, EmptySearchContent, EmptyState, type RootProps$6 as EmptyStateProps, type Variant$1 as EmptyStateVariant, ErrorState, type RootProps$5 as ErrorStateProps, type Variant as ErrorStateVariant, ExportMenu, type ExportMenuItem, FileUpload, FormGroup, FullScreenModal, FullScreenModalBody, FullScreenModalHeader, GoogleButton, HelpBlock, HoverCard, InlineStepDetail, type Props$L as InlineStepDetailProps, InlineStepLabel, type Props$K as InlineStepLabelProps, type Variant$3 as InlineStepLabelVariant, InputGroup, Kbd, Label, type LineInformation, Link, Markdown, MarkedText, MergeConflict, MessageBubble, MicrosoftButton, Modal, MultiActionButtonGroup, MultiCombobox, Navbar, NumberInput, OtpInput, type RootProps$7 as OtpInputProps, PageHeader, PageLayout, PageToolbar, Pagination, PaneHeader, PanelWithDetails, PasswordInput, PlanApproval, type PlanApprovalProps, type PlanApprovalStatus, PlanRewritingIndicator, type PlanRewritingIndicatorProps, Popconfirm, Popover, Progress, type PromptCommand, PromptInput, type Props$1m as Props, Question, type QuestionAnswers, QuestionBlock, type Props$D as QuestionBlockProps, type QuestionOption, type Props$E as QuestionProps, type QuestionStep, RadioGroup, type RadiusSize, ResizableHandle, ResizablePanelGroup, type ResolvedColorScheme, ScrollArea, ScrollBar, Search, SearchForm, SearchInput, SearchInputWithNavigation, Select, type SelectItem, type SelectItemGroup, Separator, type ServerFieldError, Sheet, type SideInformation, Sidebar, type SidebarMode, SidebarProvider, type SidebarSide, type SidebarSlot, Skeleton, SkeletonList, Slider, SplitButton, SpotlightBackdrop, type SpotlightTarget, StatCard, StatCardGrid, type Props$2 as StatCardGridProps, type RootProps$1 as StatCardProps, type TrendDirection as StatCardTrendDirection, type TrendProps as StatCardTrendProps, type StepStatus, Stepper, type StepperOrientation, SuggestedPrompt, Switch, Table, type TableSortDirection, Tabs, TabsContent, type TargetRect, TextInput, Textarea, type Theme, ThemeProvider, ThinkingIndicator, type ThumbTooltipFn, TimeInput, TimePicker, Timeline, type ToastOptions, Toaster, Toggle, ToggleGroup, type Tokens, ToolCallApproval, type ToolCallApprovalProps, type ToolCallApprovalStatus, ToolCallChip, type ToolCallChipProps, type ToolCallState, Tooltip, type Props$1L as TooltipProps, TooltipProvider, type Trigger, Truncated, UsageStats, UsageStatsRing, type UseAutosizeInputOptions, type UseAutosizeInputReturn, type ValidityState, type WordInformation, ZoomableSvg, argoVariants, channelsToHex, cn, computeDiffRows, computeLineInformation, contrastRatio, copyToClipboard, hexToChannels, isMac, kbdVariants, keys, mergeRefs, setServerFieldErrors, setSubmitError, svgToPngBlob, tableAriaSort, toSvgFileContent, toast, useAppForm, useArgoDesign, useAutosizeInput, useMergeDiff, useNotification, useScrollbarPosition, useSidebar, useTargetRect, useTheme, wcagLevel, withForm };
+export { Alert, AlertModal, AnswerSummary, type AnswerItem as AnswerSummaryItem, type Props$N as AnswerSummaryProps, type Variant$5 as AnswerSummaryVariant, AppShell, ArgoDesignContext, AutoSaveTextarea, Avatar, Badge, BrandEditor, type BrandEditorProps, type BrandId, BrandLogo, Breadcrumb, Button, ButtonGroup, ButtonInline, Calendar, type CalendarProps, Card, ChangeClassification, ChartPanel, type RootProps as ChartPanelProps, Checkbox, Clipboard, ClipboardButton, ClipboardInline, Collapse, Collapsible, CollapsiblePanel, CollapsibleStepHeader, ColorInput, ColorModeSwitch, type ColorScheme, type ColorSlot, Combobox, Command, CommandGroup, CommandInput, CommandItem, CommandList, ConflictStatusIndicator, CopyField, DEFAULT_COLOR_SCHEME, DEFAULT_FALLBACK_FONT, DEFAULT_FONT_OPTIONS, DEFAULT_BRAND_ID as DEFAULT_KEBOOLA_BRAND_ID, DashboardHero, type RootProps$2 as DashboardHeroProps, DateInput, DatePicker, type DateRange, DateRangeInput, DateRangePicker, type DateRangePreset, type DiffInformation, type DiffRow, DiffType, DiffView, DotsLoader, DropdownMenu, EmptyConfigurationActionCard, EmptySearchContent, EmptyState, type RootProps$6 as EmptyStateProps, type Variant$1 as EmptyStateVariant, ErrorState, type RootProps$5 as ErrorStateProps, type Variant as ErrorStateVariant, ExportMenu, type ExportMenuItem, FileUpload, FormGroup, FullScreenModal, FullScreenModalBody, FullScreenModalHeader, GoogleButton, HelpBlock, HoverCard, InlineStepDetail, type Props$L as InlineStepDetailProps, InlineStepLabel, type Props$K as InlineStepLabelProps, type Variant$3 as InlineStepLabelVariant, InputGroup, Kbd, Label, type LineInformation, Link, Markdown, MarkedText, MergeConflict, MessageBubble, MicrosoftButton, Modal, MultiActionButtonGroup, MultiCombobox, Navbar, NumberInput, OtpInput, type RootProps$7 as OtpInputProps, PageHeader, PageLayout, PageToolbar, Pagination, PaneHeader, PanelWithDetails, PasswordInput, PlanApproval, type PlanApprovalProps, type PlanApprovalStatus, PlanRewritingIndicator, type PlanRewritingIndicatorProps, Popconfirm, Popover, Progress, type PromptCommand, PromptInput, type Props$1m as Props, Question, type QuestionAnswers, QuestionBlock, type Props$D as QuestionBlockProps, type QuestionOption, type Props$E as QuestionProps, type QuestionStep, RadioGroup, type RadiusSize, ResizableHandle, ResizablePanelGroup, type ResolvedColorScheme, ScrollArea, ScrollBar, Search, SearchForm, SearchInput, SearchInputWithNavigation, Select, type SelectItem, type SelectItemGroup, Separator, type ServerFieldError, Sheet, type SideInformation, Sidebar, type SidebarMode, SidebarProvider, type SidebarSide, type SidebarSlot, Skeleton, SkeletonList, Slider, SplitButton, SpotlightBackdrop, type SpotlightTarget, StatCard, StatCardGrid, type Props$2 as StatCardGridProps, type RootProps$1 as StatCardProps, type TrendDirection as StatCardTrendDirection, type TrendProps as StatCardTrendProps, type StepStatus, Stepper, type StepperOrientation, SuggestedPrompt, Switch, Table, type TableSortDirection, Tabs, TabsContent, type TargetRect, TextInput, Textarea, type Theme, ThemeProvider, ThinkingIndicator, type ThumbTooltipFn, TimeInput, TimePicker, Timeline, type ToastOptions, Toaster, Toggle, ToggleGroup, type Tokens, ToolCallApproval, type ToolCallApprovalProps, type ToolCallApprovalStatus, ToolCallChip, type ToolCallChipProps, type ToolCallState, Tooltip, type Props$1L as TooltipProps, TooltipProvider, type Trigger, Truncated, UsageStats, UsageStatsRing, type UseAutosizeInputOptions, type UseAutosizeInputReturn, type ValidityState, type WordInformation, ZoomableSvg, argoVariants, channelsToHex, cn, computeDiffRows, computeLineInformation, contrastRatio, copyToClipboard, hexToChannels, isMac, kbdVariants, keys, mergeRefs, setServerFieldErrors, setSubmitError, svgToPngBlob, tableAriaSort, toSvgFileContent, toast, useAppForm, useArgoDesign, useAutosizeInput, useMergeDiff, useNotification, useScrollbarPosition, useSidebar, useStableCallback, useTargetRect, useTheme, wcagLevel, withForm };

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
-import { ComponentProps, ReactNode, PropsWithChildren, ComponentPropsWithRef, MouseEvent as MouseEvent$1, HTMLAttributes, Ref, RefObject, MouseEventHandler, ChangeEvent, FocusEvent as FocusEvent$1, KeyboardEvent as KeyboardEvent$1, ComponentPropsWithoutRef, ComponentRef, CSSProperties, TransitionEventHandler, MutableRefObject, RefCallback } from 'react';
+import { ComponentProps, ReactNode, PropsWithChildren, ComponentPropsWithRef, MouseEvent as MouseEvent$1, HTMLAttributes, Ref, RefObject, MouseEventHandler, ChangeEvent, FocusEvent as FocusEvent$1, CSSProperties, KeyboardEvent as KeyboardEvent$1, ComponentPropsWithoutRef, ComponentRef, TransitionEventHandler, MutableRefObject, RefCallback } from 'react';
 import * as class_variance_authority from 'class-variance-authority';
 import { VariantProps } from 'class-variance-authority';
 import * as class_variance_authority_types from 'class-variance-authority/types';
@@ -1797,13 +1797,20 @@ type Props$$<Value, GroupShape extends Group<Value> = Group<Value>> = PublicComb
     empty?: ReactNode;
     indicator?: Indicator$1;
     prefix?: ReactNode;
+    /**
+     * Window the list with a virtualizer so large option sets stay fast. Opt-in — defaults to
+     * `false` to keep behavior unchanged for existing call sites (every option stays in the DOM).
+     * Pass `'auto'` to virtualize only ungrouped lists longer than {@link VIRTUALIZE_THRESHOLD},
+     * or `true` to force it. Grouped lists are never virtualized.
+     */
+    virtualized?: boolean | 'auto';
     itemToLabel?: (item: Value) => ReactNode;
     itemToIcon?: (item: Value) => ReactNode;
     itemToDisabled?: (item: Value) => boolean;
     groupToLabel?: (group: GroupShape) => ReactNode;
 };
 declare const Combobox: {
-    <Value, GroupShape extends Group<Value> = Group<Value>>({ items: _itemsProp, value, defaultValue, onValueChange, itemToStringLabel: itemToStringLabelProp, itemToStringValue, disabled, filter, inputRef, onOpenChangeComplete, isItemEqualToValue: isItemEqualToValueProp, variant, sizing, focusVariant, state, placeholder, allowClear, id, className, empty, indicator, prefix, allowCreate, queryToCreateValue, queryToCreateLabel, itemToDisabled, itemToLabel, itemToIcon, groupToLabel, }: Props$$<Value, GroupShape>): react_jsx_runtime.JSX.Element;
+    <Value, GroupShape extends Group<Value> = Group<Value>>({ items: _itemsProp, value, defaultValue, onValueChange, itemToStringLabel: itemToStringLabelProp, itemToStringValue, disabled, filter, inputRef, onOpenChangeComplete, isItemEqualToValue: isItemEqualToValueProp, variant, sizing, focusVariant, state, placeholder, allowClear, id, className, empty, indicator, prefix, virtualized, allowCreate, queryToCreateValue, queryToCreateLabel, itemToDisabled, itemToLabel, itemToIcon, groupToLabel, }: Props$$<Value, GroupShape>): react_jsx_runtime.JSX.Element;
     Root: <Value, Multiple extends boolean | undefined = false>(props: Combobox$1.Root.Props<Value, Multiple>) => react_jsx_runtime.JSX.Element;
     InputGroup: ({ ref, state, variant, sizing, focusVariant, className, ...props }: {
         variant?: "primary" | "secondary" | null | undefined;
@@ -1823,7 +1830,7 @@ declare const Combobox: {
         popover?: "" | "auto" | "manual" | "hint" | undefined | undefined;
         form?: string | undefined | undefined;
         slot?: string | undefined | undefined;
-        style?: react.CSSProperties | ((state: _base_ui_react_combobox.ComboboxInputState) => React.CSSProperties | undefined) | undefined;
+        style?: CSSProperties | ((state: _base_ui_react_combobox.ComboboxInputState) => React.CSSProperties | undefined) | undefined;
         title?: string | undefined | undefined;
         pattern?: string | undefined | undefined;
         ref?: react.Ref<HTMLInputElement> | undefined;
@@ -10322,6 +10329,24 @@ declare const useScrollbarPosition: () => {
     isNone: boolean;
 };
 
+/**
+ * A callback with a permanently stable identity that always sees the latest
+ * render's values — for any consumer that keys off the handler's identity: a
+ * third-party component that redoes expensive work when it changes, or a
+ * memoized context value.
+ *
+ * React 19.2's `useEffectEvent` does this in one line, but it is scoped to
+ * Effects and explicitly not to be passed to another component, which is the
+ * whole point here.
+ *
+ * The swap is a layout effect rather than a passive one so it lands before the
+ * browser can paint and accept input against the previous render's handler. It
+ * is still an effect, and a child's runs before its parent's — so a consumer
+ * calling the returned function from its own layout effect can still see the
+ * previous render's closure.
+ */
+declare const useStableCallback: <Args extends unknown[], Result>(callback: (...args: Args) => Result) => ((...args: Args) => Result);
+
 declare const cn: (...classes: ClassValue[]) => string;
 
 declare const copyToClipboard: (text: string) => Promise<void>;
@@ -10410,4 +10435,4 @@ declare const contrastRatio: (fg: string, bg: string) => number;
 /** WCAG level for normal-size text at a given ratio. */
 declare const wcagLevel: (ratio: number) => "AAA" | "AA" | "fail";
 
-export { Alert, AlertModal, AnswerSummary, type AnswerItem as AnswerSummaryItem, type Props$N as AnswerSummaryProps, type Variant$5 as AnswerSummaryVariant, AppShell, ArgoDesignContext, AutoSaveTextarea, Avatar, Badge, BrandEditor, type BrandEditorProps, type BrandId, BrandLogo, Breadcrumb, Button, ButtonGroup, ButtonInline, Calendar, type CalendarProps, Card, ChangeClassification, ChartPanel, type RootProps as ChartPanelProps, Checkbox, Clipboard, ClipboardButton, ClipboardInline, Collapse, Collapsible, CollapsiblePanel, CollapsibleStepHeader, ColorInput, ColorModeSwitch, type ColorScheme, type ColorSlot, Combobox, Command, CommandGroup, CommandInput, CommandItem, CommandList, ConflictStatusIndicator, CopyField, DEFAULT_COLOR_SCHEME, DEFAULT_FALLBACK_FONT, DEFAULT_FONT_OPTIONS, DEFAULT_BRAND_ID as DEFAULT_KEBOOLA_BRAND_ID, DashboardHero, type RootProps$2 as DashboardHeroProps, DateInput, DatePicker, type DateRange, DateRangeInput, DateRangePicker, type DateRangePreset, type DiffInformation, type DiffRow, DiffType, DiffView, DotsLoader, DropdownMenu, EmptyConfigurationActionCard, EmptySearchContent, EmptyState, type RootProps$6 as EmptyStateProps, type Variant$1 as EmptyStateVariant, ErrorState, type RootProps$5 as ErrorStateProps, type Variant as ErrorStateVariant, ExportMenu, type ExportMenuItem, FileUpload, FormGroup, FullScreenModal, FullScreenModalBody, FullScreenModalHeader, GoogleButton, HelpBlock, HoverCard, InlineStepDetail, type Props$L as InlineStepDetailProps, InlineStepLabel, type Props$K as InlineStepLabelProps, type Variant$3 as InlineStepLabelVariant, InputGroup, Kbd, Label, type LineInformation, Link, Markdown, MarkedText, MergeConflict, MessageBubble, MicrosoftButton, Modal, MultiActionButtonGroup, MultiCombobox, Navbar, NumberInput, OtpInput, type RootProps$7 as OtpInputProps, PageHeader, PageLayout, PageToolbar, Pagination, PaneHeader, PanelWithDetails, PasswordInput, PlanApproval, type PlanApprovalProps, type PlanApprovalStatus, PlanRewritingIndicator, type PlanRewritingIndicatorProps, Popconfirm, Popover, Progress, type PromptCommand, PromptInput, type Props$1m as Props, Question, type QuestionAnswers, QuestionBlock, type Props$D as QuestionBlockProps, type QuestionOption, type Props$E as QuestionProps, type QuestionStep, RadioGroup, type RadiusSize, ResizableHandle, ResizablePanelGroup, type ResolvedColorScheme, ScrollArea, ScrollBar, Search, SearchForm, SearchInput, SearchInputWithNavigation, Select, type SelectItem, type SelectItemGroup, Separator, type ServerFieldError, Sheet, type SideInformation, Sidebar, type SidebarMode, SidebarProvider, type SidebarSide, type SidebarSlot, Skeleton, SkeletonList, Slider, SplitButton, SpotlightBackdrop, type SpotlightTarget, StatCard, StatCardGrid, type Props$2 as StatCardGridProps, type RootProps$1 as StatCardProps, type TrendDirection as StatCardTrendDirection, type TrendProps as StatCardTrendProps, type StepStatus, Stepper, type StepperOrientation, SuggestedPrompt, Switch, Table, type TableSortDirection, Tabs, TabsContent, type TargetRect, TextInput, Textarea, type Theme, ThemeProvider, ThinkingIndicator, type ThumbTooltipFn, TimeInput, TimePicker, Timeline, type ToastOptions, Toaster, Toggle, ToggleGroup, type Tokens, ToolCallApproval, type ToolCallApprovalProps, type ToolCallApprovalStatus, ToolCallChip, type ToolCallChipProps, type ToolCallState, Tooltip, type Props$1L as TooltipProps, TooltipProvider, type Trigger, Truncated, UsageStats, UsageStatsRing, type UseAutosizeInputOptions, type UseAutosizeInputReturn, type ValidityState, type WordInformation, ZoomableSvg, argoVariants, channelsToHex, cn, computeDiffRows, computeLineInformation, contrastRatio, copyToClipboard, hexToChannels, isMac, kbdVariants, keys, mergeRefs, setServerFieldErrors, setSubmitError, svgToPngBlob, tableAriaSort, toSvgFileContent, toast, useAppForm, useArgoDesign, useAutosizeInput, useMergeDiff, useNotification, useScrollbarPosition, useSidebar, useTargetRect, useTheme, wcagLevel, withForm };
+export { Alert, AlertModal, AnswerSummary, type AnswerItem as AnswerSummaryItem, type Props$N as AnswerSummaryProps, type Variant$5 as AnswerSummaryVariant, AppShell, ArgoDesignContext, AutoSaveTextarea, Avatar, Badge, BrandEditor, type BrandEditorProps, type BrandId, BrandLogo, Breadcrumb, Button, ButtonGroup, ButtonInline, Calendar, type CalendarProps, Card, ChangeClassification, ChartPanel, type RootProps as ChartPanelProps, Checkbox, Clipboard, ClipboardButton, ClipboardInline, Collapse, Collapsible, CollapsiblePanel, CollapsibleStepHeader, ColorInput, ColorModeSwitch, type ColorScheme, type ColorSlot, Combobox, Command, CommandGroup, CommandInput, CommandItem, CommandList, ConflictStatusIndicator, CopyField, DEFAULT_COLOR_SCHEME, DEFAULT_FALLBACK_FONT, DEFAULT_FONT_OPTIONS, DEFAULT_BRAND_ID as DEFAULT_KEBOOLA_BRAND_ID, DashboardHero, type RootProps$2 as DashboardHeroProps, DateInput, DatePicker, type DateRange, DateRangeInput, DateRangePicker, type DateRangePreset, type DiffInformation, type DiffRow, DiffType, DiffView, DotsLoader, DropdownMenu, EmptyConfigurationActionCard, EmptySearchContent, EmptyState, type RootProps$6 as EmptyStateProps, type Variant$1 as EmptyStateVariant, ErrorState, type RootProps$5 as ErrorStateProps, type Variant as ErrorStateVariant, ExportMenu, type ExportMenuItem, FileUpload, FormGroup, FullScreenModal, FullScreenModalBody, FullScreenModalHeader, GoogleButton, HelpBlock, HoverCard, InlineStepDetail, type Props$L as InlineStepDetailProps, InlineStepLabel, type Props$K as InlineStepLabelProps, type Variant$3 as InlineStepLabelVariant, InputGroup, Kbd, Label, type LineInformation, Link, Markdown, MarkedText, MergeConflict, MessageBubble, MicrosoftButton, Modal, MultiActionButtonGroup, MultiCombobox, Navbar, NumberInput, OtpInput, type RootProps$7 as OtpInputProps, PageHeader, PageLayout, PageToolbar, Pagination, PaneHeader, PanelWithDetails, PasswordInput, PlanApproval, type PlanApprovalProps, type PlanApprovalStatus, PlanRewritingIndicator, type PlanRewritingIndicatorProps, Popconfirm, Popover, Progress, type PromptCommand, PromptInput, type Props$1m as Props, Question, type QuestionAnswers, QuestionBlock, type Props$D as QuestionBlockProps, type QuestionOption, type Props$E as QuestionProps, type QuestionStep, RadioGroup, type RadiusSize, ResizableHandle, ResizablePanelGroup, type ResolvedColorScheme, ScrollArea, ScrollBar, Search, SearchForm, SearchInput, SearchInputWithNavigation, Select, type SelectItem, type SelectItemGroup, Separator, type ServerFieldError, Sheet, type SideInformation, Sidebar, type SidebarMode, SidebarProvider, type SidebarSide, type SidebarSlot, Skeleton, SkeletonList, Slider, SplitButton, SpotlightBackdrop, type SpotlightTarget, StatCard, StatCardGrid, type Props$2 as StatCardGridProps, type RootProps$1 as StatCardProps, type TrendDirection as StatCardTrendDirection, type TrendProps as StatCardTrendProps, type StepStatus, Stepper, type StepperOrientation, SuggestedPrompt, Switch, Table, type TableSortDirection, Tabs, TabsContent, type TargetRect, TextInput, Textarea, type Theme, ThemeProvider, ThinkingIndicator, type ThumbTooltipFn, TimeInput, TimePicker, Timeline, type ToastOptions, Toaster, Toggle, ToggleGroup, type Tokens, ToolCallApproval, type ToolCallApprovalProps, type ToolCallApprovalStatus, ToolCallChip, type ToolCallChipProps, type ToolCallState, Tooltip, type Props$1L as TooltipProps, TooltipProvider, type Trigger, Truncated, UsageStats, UsageStatsRing, type UseAutosizeInputOptions, type UseAutosizeInputReturn, type ValidityState, type WordInformation, ZoomableSvg, argoVariants, channelsToHex, cn, computeDiffRows, computeLineInformation, contrastRatio, copyToClipboard, hexToChannels, isMac, kbdVariants, keys, mergeRefs, setServerFieldErrors, setSubmitError, svgToPngBlob, tableAriaSort, toSvgFileContent, toast, useAppForm, useArgoDesign, useAutosizeInput, useMergeDiff, useNotification, useScrollbarPosition, useSidebar, useStableCallback, useTargetRect, useTheme, wcagLevel, withForm };

package/dist/index.js

@@ -34,6 +34,7 @@ import * as SelectPrimitive6 from '@radix-ui/react-select';
 import { Root as Root$6 } from '@radix-ui/react-select';
 import { Root as Root$4, Indicator } from '@radix-ui/react-checkbox';
 import { Combobox as Combobox$1 } from '@base-ui/react/combobox';
+import { useVirtualizer } from '@tanstack/react-virtual';
 import { OTPInput, REGEXP_ONLY_DIGITS, OTPInputContext } from 'input-otp';
 export { REGEXP_ONLY_CHARS, REGEXP_ONLY_DIGITS, REGEXP_ONLY_DIGITS_AND_CHARS } from 'input-otp';
 import ReactMarkdown from 'react-markdown';
@@ -12403,9 +12404,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
@@ -12530,6 +12531,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,
@@ -12556,6 +12560,7 @@ var Combobox = ({
   empty = "No items",
   indicator,
   prefix,
+  virtualized = false,
   // creatable
   allowCreate,
   queryToCreateValue,
@@ -12579,7 +12584,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];
@@ -12604,7 +12611,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);
@@ -12639,10 +12646,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 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 = 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),
@@ -12651,13 +12682,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,
@@ -12667,6 +12705,12 @@ var Combobox = ({
       inputRef,
       inputValue,
       onInputValueChange: handleInputValueChange,
+      virtualized: shouldVirtualize,
+      onItemHighlighted: (_, details) => {
+        if (shouldVirtualize && details.reason === "keyboard") {
+          virtualizer.scrollToIndex(details.index);
+        }
+      },
       children: [
         /* @__PURE__ */ jsxs(
           ComboboxInputGroup,
@@ -12688,7 +12732,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)) {
@@ -12699,7 +12766,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);
@@ -13737,6 +13804,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) {
@@ -13746,8 +13815,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;
   }
@@ -23610,6 +23679,13 @@ function useAutosizeInput({
   ] });
   return { inputRef, inputStyle, sizerElement };
 }
+var useStableCallback = (callback) => {
+  const latestRef = useRef(callback);
+  useLayoutEffect(() => {
+    latestRef.current = callback;
+  }, [callback]);
+  return useCallback((...args) => latestRef.current(...args), []);
+};
 var MIN_SCALE = 0.5;
 var MAX_SCALE = 3;
 var ZOOM_STEP = 0.1;
@@ -24565,6 +24641,6 @@ object-assign/index.js:
   *)
 */
 
-export { Alert, AlertModal, AnswerSummary, AppShell, ArgoDesignContext, AutoSaveTextarea, Avatar, Badge2 as Badge, BrandEditor, BrandLogo, Breadcrumb, Button, ButtonGroup, ButtonInline, Calendar2 as Calendar, Card, ChartPanel, Checkbox, Clipboard2 as Clipboard, ClipboardButton, ClipboardInline, Collapse, Collapsible, CollapsiblePanel, CollapsibleStepHeader, ColorInput, ColorModeSwitch, Combobox, Command2 as Command, CommandGroup, CommandInput, CommandItem, CommandList, ConflictStatusIndicator, CopyField, DEFAULT_COLOR_SCHEME, DEFAULT_FALLBACK_FONT, DEFAULT_FONT_OPTIONS, DEFAULT_BRAND_ID as DEFAULT_KEBOOLA_BRAND_ID, DashboardHero, DateInput, DatePicker, DateRangeInput, DateRangePicker, DiffType, DiffView, DotsLoader, DropdownMenu, EmptyConfigurationActionCard, EmptySearchContent, EmptyState, ErrorState, ExportMenu, FileUpload, FormGroup, FullScreenModal, FullScreenModalBody, FullScreenModalHeader, GoogleButton, HelpBlock, HoverCard, InlineStepDetail, InlineStepLabel, InputGroup, Kbd, Label2 as Label, Link3 as Link, Markdown, MarkedText, MessageBubble, MicrosoftButton, Modal, MultiActionButtonGroup, MultiCombobox, Navbar, NumberInput, OtpInput, PageHeader, PageLayout, PageToolbar, Pagination, PaneHeader, PanelWithDetails, PasswordInput, PlanApproval, PlanRewritingIndicator, Popconfirm, Popover, Progress, PromptInput, Question, QuestionBlock, RadioGroup2 as RadioGroup, ResizableHandle, ResizablePanelGroup, ScrollArea, ScrollBar, Search2 as Search, SearchForm, SearchInput, SearchInputWithNavigation, Select2 as Select, Separator2 as Separator, Sheet2 as Sheet, Sidebar2 as Sidebar, SidebarProvider, Skeleton, SkeletonList, Slider, SplitButton, SpotlightBackdrop, StatCard, StatCardGrid, Stepper, SuggestedPrompt, Switch, Table3 as Table, Tabs2 as Tabs, TabsContent, TextInput, Textarea, ThemeProvider, ThinkingIndicator, TimeInput, TimePicker, Timeline2 as Timeline, Toaster, Toggle, ToggleGroup, ToolCallApproval, ToolCallChip, Tooltip, TooltipProvider, Truncated, UsageStats, UsageStatsRing, ZoomableSvg, argoVariants, channelsToHex, cn, computeDiffRows, computeLineInformation, contrastRatio, copyToClipboard, hexToChannels, isMac, kbdVariants, keys, mergeRefs, setServerFieldErrors, setSubmitError, svgToPngBlob, tableAriaSort, toSvgFileContent, toast, useAppForm, useArgoDesign, useAutosizeInput, useMergeDiff, useNotification, useScrollbarPosition, useSidebar, useTargetRect, useTheme, wcagLevel, withForm };
+export { Alert, AlertModal, AnswerSummary, AppShell, ArgoDesignContext, AutoSaveTextarea, Avatar, Badge2 as Badge, BrandEditor, BrandLogo, Breadcrumb, Button, ButtonGroup, ButtonInline, Calendar2 as Calendar, Card, ChartPanel, Checkbox, Clipboard2 as Clipboard, ClipboardButton, ClipboardInline, Collapse, Collapsible, CollapsiblePanel, CollapsibleStepHeader, ColorInput, ColorModeSwitch, Combobox, Command2 as Command, CommandGroup, CommandInput, CommandItem, CommandList, ConflictStatusIndicator, CopyField, DEFAULT_COLOR_SCHEME, DEFAULT_FALLBACK_FONT, DEFAULT_FONT_OPTIONS, DEFAULT_BRAND_ID as DEFAULT_KEBOOLA_BRAND_ID, DashboardHero, DateInput, DatePicker, DateRangeInput, DateRangePicker, DiffType, DiffView, DotsLoader, DropdownMenu, EmptyConfigurationActionCard, EmptySearchContent, EmptyState, ErrorState, ExportMenu, FileUpload, FormGroup, FullScreenModal, FullScreenModalBody, FullScreenModalHeader, GoogleButton, HelpBlock, HoverCard, InlineStepDetail, InlineStepLabel, InputGroup, Kbd, Label2 as Label, Link3 as Link, Markdown, MarkedText, MessageBubble, MicrosoftButton, Modal, MultiActionButtonGroup, MultiCombobox, Navbar, NumberInput, OtpInput, PageHeader, PageLayout, PageToolbar, Pagination, PaneHeader, PanelWithDetails, PasswordInput, PlanApproval, PlanRewritingIndicator, Popconfirm, Popover, Progress, PromptInput, Question, QuestionBlock, RadioGroup2 as RadioGroup, ResizableHandle, ResizablePanelGroup, ScrollArea, ScrollBar, Search2 as Search, SearchForm, SearchInput, SearchInputWithNavigation, Select2 as Select, Separator2 as Separator, Sheet2 as Sheet, Sidebar2 as Sidebar, SidebarProvider, Skeleton, SkeletonList, Slider, SplitButton, SpotlightBackdrop, StatCard, StatCardGrid, Stepper, SuggestedPrompt, Switch, Table3 as Table, Tabs2 as Tabs, TabsContent, TextInput, Textarea, ThemeProvider, ThinkingIndicator, TimeInput, TimePicker, Timeline2 as Timeline, Toaster, Toggle, ToggleGroup, ToolCallApproval, ToolCallChip, Tooltip, TooltipProvider, Truncated, UsageStats, UsageStatsRing, ZoomableSvg, argoVariants, channelsToHex, cn, computeDiffRows, computeLineInformation, contrastRatio, copyToClipboard, hexToChannels, isMac, kbdVariants, keys, mergeRefs, setServerFieldErrors, setSubmitError, svgToPngBlob, tableAriaSort, toSvgFileContent, toast, useAppForm, useArgoDesign, useAutosizeInput, useMergeDiff, useNotification, useScrollbarPosition, useSidebar, useStableCallback, useTargetRect, useTheme, wcagLevel, withForm };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map