@refraktor/core 0.0.2 → 0.0.4

package/build/components/combobox/combobox-root/combobox-root.js

@@ -0,0 +1,282 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useId, useUncontrolled } from "@refraktor/utils";
+import { Children, isValidElement, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useTheme } from "../../../theme";
+import { factory, useClassNames, useProps } from "../../../utils";
+import { ComboboxProvider, getNavigableComboboxItems, getNodeTextValue, useComboboxItemsRegistry } from "../combobox.context";
+import { useCombobox } from "../use-combobox";
+import { InputWrapper } from "../../input/input-wrapper";
+const defaultProps = {
+    positioning: {
+        placement: "bottom-start",
+        offset: 4
+    },
+    middlewares: { flip: true, shift: true },
+    placeholder: "Type to search",
+    nothingFound: "No options",
+    size: "md",
+    radius: "default",
+    variant: "default",
+    withinPortal: true,
+    openOnFocus: true,
+    closeOnClickOutside: true,
+    closeOnEscape: true
+};
+function collectComboboxOptionLabels(node, labels) {
+    Children.forEach(node, (child) => {
+        if (!isValidElement(child)) {
+            return;
+        }
+        const typeDisplayName = child.type
+            .displayName;
+        const props = child.props;
+        if (typeDisplayName === "@refraktor/core/Combobox.Option" &&
+            typeof props.value === "string") {
+            labels.set(props.value, getNodeTextValue(props.children, props.textValue) || props.value);
+        }
+        if (props.children !== undefined && props.children !== null) {
+            collectComboboxOptionLabels(props.children, labels);
+        }
+    });
+}
+function getComboboxOptionLabels(node) {
+    const labels = new Map();
+    collectComboboxOptionLabels(node, labels);
+    return labels;
+}
+const ComboboxRoot = factory((_props, ref) => {
+    const { cx } = useTheme();
+    const { id, children, label, description, error, required, withAsterisk, value, defaultValue, onChange, searchValue, defaultSearchValue, onSearchChange, opened, defaultOpened, onOpenedChange, positioning, middlewares, disabled, openOnFocus, placeholder, nothingFound, filter, limit, size, radius, variant, withinPortal, closeOnClickOutside, closeOnEscape, transitionProps, className, classNames, ...props } = useProps("Combobox", defaultProps, _props);
+    const classes = useClassNames("Combobox", classNames);
+    const _id = useId(id);
+    const listId = `${_id}-listbox`;
+    const inputId = `${_id}-input`;
+    const hasWrapper = label || description || error;
+    const inferredLabels = useMemo(() => getComboboxOptionLabels(children), [children]);
+    const [selectedValue, setSelectedValue] = useUncontrolled({
+        value,
+        defaultValue,
+        finalValue: null,
+        onChange
+    });
+    const [search, setSearch] = useUncontrolled({
+        value: searchValue,
+        defaultValue: defaultSearchValue,
+        finalValue: "",
+        onChange: onSearchChange
+    });
+    const combobox = useCombobox({
+        opened,
+        defaultOpened,
+        onOpenedChange,
+        positioning,
+        middlewares,
+        disabled,
+        closeOnClickOutside,
+        closeOnEscape
+    });
+    const { registerItem: registerRegistryItem, getItems } = useComboboxItemsRegistry();
+    const labelsRef = useRef(new Map());
+    const inputRef = useRef(null);
+    const [activeOptionId, setActiveOptionId] = useState(null);
+    const getLabelForValue = useCallback((itemValue) => {
+        return (labelsRef.current.get(itemValue) ??
+            inferredLabels.get(itemValue) ??
+            itemValue);
+    }, [inferredLabels]);
+    const selectedLabel = useMemo(() => {
+        if (!selectedValue) {
+            return "";
+        }
+        return getLabelForValue(selectedValue);
+    }, [getLabelForValue, selectedValue]);
+    const normalizedQuery = useMemo(() => {
+        const query = search.trim();
+        if (combobox.opened && selectedValue && query === selectedLabel) {
+            return "";
+        }
+        return query;
+    }, [combobox.opened, search, selectedLabel, selectedValue]);
+    const normalizedQueryLower = normalizedQuery.toLowerCase();
+    const isSearchMatch = useCallback((item) => {
+        if (!normalizedQuery) {
+            return true;
+        }
+        if (filter) {
+            return filter({
+                value: item.value,
+                label: item.label,
+                textValue: item.textValue,
+                disabled: item.disabled,
+                groupId: item.groupId
+            }, normalizedQuery);
+        }
+        return item.textValue.toLowerCase().includes(normalizedQueryLower);
+    }, [filter, normalizedQuery, normalizedQueryLower]);
+    const getVisibleItems = useCallback(() => {
+        const matchedItems = getItems().filter((item) => isSearchMatch(item));
+        if (typeof limit === "number" && limit > 0) {
+            return matchedItems.slice(0, limit);
+        }
+        return matchedItems;
+    }, [getItems, isSearchMatch, limit]);
+    const hasVisibleItems = useCallback(() => getVisibleItems().length > 0, [getVisibleItems]);
+    const isOptionVisible = useCallback((itemId) => getVisibleItems().some((item) => item.id === itemId), [getVisibleItems]);
+    const isGroupVisible = useCallback((groupId) => {
+        if (!normalizedQuery) {
+            return true;
+        }
+        const groupItems = getItems().filter((item) => item.groupId === groupId);
+        if (!groupItems.length) {
+            return true;
+        }
+        return groupItems.some((item) => isSearchMatch(item));
+    }, [getItems, isSearchMatch, normalizedQuery]);
+    const getSelectedLabel = useCallback(() => {
+        return selectedLabel;
+    }, [selectedLabel]);
+    const getVisibleNavigableItems = useCallback(() => getNavigableComboboxItems(getVisibleItems()), [getVisibleItems]);
+    const setActiveToFirst = useCallback(() => {
+        const items = getVisibleNavigableItems();
+        setActiveOptionId(items[0]?.id ?? null);
+    }, [getVisibleNavigableItems]);
+    const setActiveToLast = useCallback(() => {
+        const items = getVisibleNavigableItems();
+        setActiveOptionId(items[items.length - 1]?.id ?? null);
+    }, [getVisibleNavigableItems]);
+    const setActiveToSelectedOrFirst = useCallback(() => {
+        const items = getVisibleNavigableItems();
+        if (!items.length) {
+            setActiveOptionId(null);
+            return;
+        }
+        const selectedItem = items.find((item) => item.value === selectedValue);
+        setActiveOptionId((selectedItem ?? items[0]).id);
+    }, [getVisibleNavigableItems, selectedValue]);
+    const moveActiveOption = useCallback((direction) => {
+        const items = getVisibleNavigableItems();
+        if (!items.length) {
+            setActiveOptionId(null);
+            return;
+        }
+        const activeIndex = items.findIndex((item) => item.id === activeOptionId);
+        if (activeIndex === -1) {
+            setActiveOptionId(direction === 1 ? items[0].id : items[items.length - 1].id);
+            return;
+        }
+        const nextIndex = (activeIndex + direction + items.length) % items.length;
+        setActiveOptionId(items[nextIndex].id);
+    }, [activeOptionId, getVisibleNavigableItems]);
+    const selectActiveOption = useCallback(() => {
+        if (!activeOptionId) {
+            return;
+        }
+        const activeItem = getVisibleNavigableItems().find((item) => item.id === activeOptionId);
+        activeItem?.select();
+    }, [activeOptionId, getVisibleNavigableItems]);
+    const clearValue = useCallback(() => {
+        setSelectedValue(null);
+    }, [setSelectedValue]);
+    const selectValue = useCallback((nextValue, nextLabel) => {
+        labelsRef.current.set(nextValue, nextLabel);
+        setSelectedValue(nextValue);
+        setSearch(nextLabel);
+        combobox.close();
+    }, [combobox, setSearch, setSelectedValue]);
+    const registerItem = useCallback((item) => {
+        labelsRef.current.set(item.value, item.label);
+        return registerRegistryItem(item);
+    }, [registerRegistryItem]);
+    useEffect(() => {
+        if (!combobox.opened) {
+            setActiveOptionId(null);
+            return;
+        }
+        setActiveToSelectedOrFirst();
+    }, [combobox.opened, setActiveToSelectedOrFirst]);
+    useEffect(() => {
+        if (!combobox.opened) {
+            return;
+        }
+        const visibleItems = getVisibleNavigableItems();
+        if (!visibleItems.length) {
+            setActiveOptionId(null);
+            return;
+        }
+        if (!activeOptionId) {
+            setActiveOptionId(visibleItems[0].id);
+            return;
+        }
+        const hasActiveItem = visibleItems.some((item) => item.id === activeOptionId);
+        if (!hasActiveItem) {
+            setActiveOptionId(visibleItems[0].id);
+        }
+    }, [activeOptionId, combobox.opened, getVisibleNavigableItems]);
+    const isSearchControlled = searchValue !== undefined;
+    useEffect(() => {
+        if (isSearchControlled || combobox.opened || !selectedValue) {
+            return;
+        }
+        const selectedLabel = getSelectedLabel();
+        if (search !== selectedLabel) {
+            setSearch(selectedLabel);
+        }
+    }, [
+        combobox.opened,
+        getSelectedLabel,
+        isSearchControlled,
+        search,
+        selectedValue,
+        setSearch
+    ]);
+    const activeValue = useMemo(() => {
+        if (!activeOptionId) {
+            return null;
+        }
+        const activeItem = getItems().find((item) => item.id === activeOptionId);
+        return activeItem?.value ?? null;
+    }, [activeOptionId, getItems]);
+    const getStyles = useCallback((part) => classes[part], [classes]);
+    const context = {
+        combobox,
+        value: selectedValue,
+        clearValue,
+        selectValue,
+        search,
+        setSearch,
+        placeholder,
+        nothingFound,
+        disabled: !!disabled,
+        error: !!error,
+        required: !!required,
+        openOnFocus: !!openOnFocus,
+        size,
+        radius,
+        variant,
+        withinPortal: !!withinPortal,
+        transitionProps,
+        listId,
+        inputId,
+        inputRef,
+        activeOptionId,
+        activeValue,
+        setActiveOptionId,
+        setActiveToFirst,
+        setActiveToLast,
+        setActiveToSelectedOrFirst,
+        moveActiveOption,
+        selectActiveOption,
+        registerItem,
+        getItems,
+        getVisibleItems,
+        hasVisibleItems,
+        isOptionVisible,
+        isGroupVisible,
+        getSelectedLabel,
+        getStyles
+    };
+    const content = (_jsx("div", { ref: ref, id: _id, className: cx("relative w-full", classes.root, className), ...props, children: children }));
+    return (_jsx(ComboboxProvider, { value: context, children: hasWrapper ? (_jsx(InputWrapper, { label: label, description: description, error: error, required: required, withAsterisk: withAsterisk, inputId: inputId, children: content })) : (content) }));
+});
+ComboboxRoot.displayName = "@refraktor/core/Combobox.Root";
+export default ComboboxRoot;

package/build/components/combobox/combobox-root/index.d.ts

@@ -0,0 +1,2 @@
+export { default as ComboboxRoot } from "./combobox-root";
+//# sourceMappingURL=index.d.ts.map

package/build/components/combobox/combobox-root/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/combobox/combobox-root/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,iBAAiB,CAAC"}

package/build/components/combobox/combobox-root/index.js

@@ -0,0 +1 @@
+export { default as ComboboxRoot } from "./combobox-root";

package/build/components/combobox/combobox.context.d.ts

@@ -0,0 +1,73 @@
+import type { MutableRefObject, ReactNode } from "react";
+import type { RefraktorRadius, RefraktorSize } from "../../theme";
+import type { InputVariant } from "../input";
+import type { TransitionProps } from "../transition";
+import type { ComboboxClassNames } from "./combobox.types";
+import type { UseComboboxReturn } from "./use-combobox";
+export interface ComboboxItemRegistration {
+    id: string;
+    value: string;
+    ref: MutableRefObject<HTMLElement | null>;
+    disabled: boolean;
+    label: string;
+    textValue: string;
+    groupId?: string;
+    select: () => void;
+}
+export interface ComboboxContextValue {
+    combobox: UseComboboxReturn;
+    value: string | null;
+    clearValue: () => void;
+    selectValue: (value: string, label: string) => void;
+    search: string;
+    setSearch: (value: string) => void;
+    placeholder: string;
+    nothingFound: ReactNode;
+    disabled: boolean;
+    error: boolean;
+    required: boolean;
+    openOnFocus: boolean;
+    size: RefraktorSize;
+    radius: RefraktorRadius;
+    variant: InputVariant;
+    withinPortal: boolean;
+    transitionProps?: Omit<TransitionProps, "children" | "mounted">;
+    listId: string;
+    inputId: string;
+    inputRef: MutableRefObject<HTMLInputElement | null>;
+    activeOptionId: string | null;
+    activeValue: string | null;
+    setActiveOptionId: (value: string | null) => void;
+    setActiveToFirst: () => void;
+    setActiveToLast: () => void;
+    setActiveToSelectedOrFirst: () => void;
+    moveActiveOption: (direction: 1 | -1) => void;
+    selectActiveOption: () => void;
+    registerItem: (item: ComboboxItemRegistration) => () => void;
+    getItems: () => ComboboxItemRegistration[];
+    getVisibleItems: () => ComboboxItemRegistration[];
+    hasVisibleItems: () => boolean;
+    isOptionVisible: (itemId: string) => boolean;
+    isGroupVisible: (groupId: string) => boolean;
+    getSelectedLabel: () => string;
+    getStyles: (part: keyof ComboboxClassNames) => string | undefined;
+}
+export interface ComboboxGroupContextValue {
+    groupId: string;
+}
+export declare const ComboboxProvider: ({ children, value }: {
+    children: React.ReactNode;
+    value: ComboboxContextValue;
+}) => import("react/jsx-runtime").JSX.Element, useComboboxContext: () => ComboboxContextValue;
+export declare const ComboboxGroupProvider: ({ value, children }: {
+    value: ComboboxGroupContextValue;
+    children: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element, useComboboxGroupContext: () => ComboboxGroupContextValue | null;
+export declare function useComboboxItemsRegistry(): {
+    registerItem: (item: ComboboxItemRegistration) => () => void;
+    getItems: () => ComboboxItemRegistration[];
+};
+export declare function sortComboboxItems(items: ComboboxItemRegistration[]): ComboboxItemRegistration[];
+export declare function getNavigableComboboxItems(items: ComboboxItemRegistration[]): ComboboxItemRegistration[];
+export declare function getNodeTextValue(children: ReactNode, explicitTextValue?: string): string;
+//# sourceMappingURL=combobox.context.d.ts.map

package/build/components/combobox/combobox.context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"combobox.context.d.ts","sourceRoot":"","sources":["../../../src/components/combobox/combobox.context.ts"],"names":[],"mappings":"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"}

package/build/components/combobox/combobox.context.js

@@ -0,0 +1,50 @@
+import { createOptionalContext, createSafeContext } from "@refraktor/utils";
+import { useCallback, useRef } from "react";
+export const [ComboboxProvider, useComboboxContext] = createSafeContext("Combobox component was not found in tree. Make sure Combobox.Input, Combobox.Dropdown, Combobox.Group and Combobox.Option are wrapped with Combobox.Root or Combobox.");
+export const [ComboboxGroupProvider, useComboboxGroupContext] = createOptionalContext();
+export function useComboboxItemsRegistry() {
+    const itemsRef = useRef([]);
+    const registerItem = useCallback((item) => {
+        itemsRef.current = [
+            ...itemsRef.current.filter((x) => x.id !== item.id),
+            item
+        ];
+        return () => {
+            itemsRef.current = itemsRef.current.filter((x) => x.id !== item.id);
+        };
+    }, []);
+    const getItems = useCallback(() => sortComboboxItems(itemsRef.current), []);
+    return {
+        registerItem,
+        getItems
+    };
+}
+export function sortComboboxItems(items) {
+    return [...items].sort((a, b) => {
+        const aNode = a.ref.current;
+        const bNode = b.ref.current;
+        if (!aNode || !bNode || aNode === bNode) {
+            return 0;
+        }
+        const position = aNode.compareDocumentPosition(bNode);
+        if (position & Node.DOCUMENT_POSITION_FOLLOWING) {
+            return -1;
+        }
+        if (position & Node.DOCUMENT_POSITION_PRECEDING) {
+            return 1;
+        }
+        return 0;
+    });
+}
+export function getNavigableComboboxItems(items) {
+    return items.filter((item) => !item.disabled);
+}
+export function getNodeTextValue(children, explicitTextValue) {
+    if (explicitTextValue) {
+        return explicitTextValue;
+    }
+    if (typeof children === "string" || typeof children === "number") {
+        return String(children);
+    }
+    return "";
+}

package/build/components/combobox/combobox.d.ts

@@ -0,0 +1,4 @@
+import type { ComboboxFactoryPayload } from "./combobox.types";
+declare const Combobox: import("../..").RefraktorComponent<ComboboxFactoryPayload>;
+export default Combobox;
+//# sourceMappingURL=combobox.d.ts.map

package/build/components/combobox/combobox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"combobox.d.ts","sourceRoot":"","sources":["../../../src/components/combobox/combobox.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAGR,sBAAsB,EAGzB,MAAM,kBAAkB,CAAC;AAM1B,QAAA,MAAM,QAAQ,4DAgDZ,CAAC;AAWH,eAAe,QAAQ,CAAC"}

package/build/components/combobox/combobox.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createClassNamesConfig, createComponentConfig, factory } from "../../utils";
+import { ComboboxDropdown } from "./combobox-dropdown";
+import { ComboboxGroup } from "./combobox-group";
+import { ComboboxInput } from "./combobox-input";
+import { ComboboxOption } from "./combobox-option";
+import { ComboboxRoot } from "./combobox-root";
+function isGroupData(item) {
+    return "items" in item;
+}
+const Combobox = factory((_props, ref) => {
+    const { data, children, ...props } = _props;
+    if (children !== undefined && children !== null) {
+        return (_jsx(ComboboxRoot, { ref: ref, ...props, children: children }));
+    }
+    return (_jsxs(ComboboxRoot, { ref: ref, ...props, children: [_jsx(ComboboxInput, {}), _jsx(ComboboxDropdown, { children: (data ?? []).map((entry, index) => {
+                    if (isGroupData(entry)) {
+                        return (_jsx(ComboboxGroup, { label: entry.label, children: entry.items.map((item) => (_jsx(ComboboxOption, { value: item.value, disabled: item.disabled, textValue: item.textValue, children: item.label }, item.value))) }, `group-${index}`));
+                    }
+                    return (_jsx(ComboboxOption, { value: entry.value, disabled: entry.disabled, textValue: entry.textValue, children: entry.label }, entry.value));
+                }) })] }));
+});
+Combobox.displayName = "@refraktor/core/Combobox";
+Combobox.configure = createComponentConfig();
+Combobox.classNames = createClassNamesConfig();
+Combobox.Root = ComboboxRoot;
+Combobox.Input = ComboboxInput;
+Combobox.Dropdown = ComboboxDropdown;
+Combobox.Group = ComboboxGroup;
+Combobox.Option = ComboboxOption;
+export default Combobox;

package/build/components/combobox/combobox.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=combobox.test.d.ts.map

package/build/components/combobox/combobox.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"combobox.test.d.ts","sourceRoot":"","sources":["../../../src/components/combobox/combobox.test.tsx"],"names":[],"mappings":""}

package/build/components/combobox/combobox.test.js

@@ -0,0 +1,104 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { describe, expect, it, vi } from "vitest";
+import { render, screen, userEvent, waitFor } from "../../vitest";
+import Combobox from "./combobox";
+describe("@refraktor/core/Combobox", () => {
+    const transitionProps = {
+        duration: 0,
+        immediate: true
+    };
+    it("supports built-in data mode", async () => {
+        const user = userEvent.setup();
+        await render(_jsx(Combobox, { placeholder: "Pick framework", transitionProps: transitionProps, data: [
+                { value: "react", label: "React" },
+                { value: "vue", label: "Vue" }
+            ] }));
+        const input = screen.getByRole("combobox");
+        expect(input).toHaveAttribute("placeholder", "Pick framework");
+        await user.click(input);
+        await user.click(screen.getByRole("option", { name: "React" }));
+        expect(input).toHaveValue("React");
+        await waitFor(() => {
+            expect(screen.queryByRole("listbox")).not.toBeInTheDocument();
+        });
+    });
+    it("renders defaultValue label in input before opening", async () => {
+        await render(_jsx(Combobox, { defaultValue: "apple", data: [
+                { value: "apple", label: "Apple" },
+                { value: "orange", label: "Orange" }
+            ] }));
+        expect(screen.getByRole("combobox")).toHaveValue("Apple");
+    });
+    it("filters options based on typed query", async () => {
+        const user = userEvent.setup();
+        await render(_jsx(Combobox, { transitionProps: transitionProps, data: [
+                { value: "react", label: "React" },
+                { value: "vue", label: "Vue" },
+                { value: "solid", label: "Solid" }
+            ] }));
+        const input = screen.getByRole("combobox");
+        await user.click(input);
+        await user.type(input, "vu");
+        expect(screen.getByRole("option", { name: "Vue" })).toBeInTheDocument();
+        expect(screen.queryByRole("option", { name: "React" })).not.toBeInTheDocument();
+        await user.clear(input);
+        await user.type(input, "unknown");
+        expect(screen.getByText("No options")).toBeInTheDocument();
+    });
+    it("supports keyboard navigation and selection", async () => {
+        const user = userEvent.setup();
+        await render(_jsx(Combobox, { transitionProps: transitionProps, data: [
+                { value: "react", label: "React" },
+                { value: "vue", label: "Vue" }
+            ] }));
+        const input = screen.getByRole("combobox");
+        input.focus();
+        await user.keyboard("{ArrowDown}");
+        await user.keyboard("{ArrowDown}");
+        await user.keyboard("{Enter}");
+        expect(input).toHaveValue("Vue");
+    });
+    it("supports compound mode with groups", async () => {
+        const user = userEvent.setup();
+        await render(_jsxs(Combobox.Root, { transitionProps: transitionProps, children: [_jsx(Combobox.Input, {}), _jsxs(Combobox.Dropdown, { children: [_jsx(Combobox.Group, { label: "Frontend", children: _jsx(Combobox.Option, { value: "react", children: "React" }) }), _jsx(Combobox.Group, { label: "Backend", children: _jsx(Combobox.Option, { value: "node", children: "Node.js" }) })] })] }));
+        const input = screen.getByRole("combobox");
+        await user.click(input);
+        expect(screen.getByText("Frontend")).toBeInTheDocument();
+        expect(screen.getByText("Backend")).toBeInTheDocument();
+        await user.click(screen.getByRole("option", { name: "Node.js" }));
+        expect(input).toHaveValue("Node.js");
+    });
+    it("supports controlled mode", async () => {
+        const user = userEvent.setup();
+        const onChange = vi.fn();
+        function Demo() {
+            const [value, setValue] = useState("react");
+            return (_jsx(Combobox, { value: value, onChange: (nextValue) => {
+                    onChange(nextValue);
+                    setValue(nextValue);
+                }, transitionProps: transitionProps, data: [
+                    { value: "react", label: "React" },
+                    { value: "vue", label: "Vue" }
+                ] }));
+        }
+        await render(_jsx(Demo, {}));
+        await user.click(screen.getByRole("combobox"));
+        await user.click(screen.getByRole("option", { name: "Vue" }));
+        expect(onChange).toHaveBeenCalledWith("vue");
+        expect(screen.getByRole("combobox")).toHaveValue("Vue");
+    });
+    it("supports custom filter and limit", async () => {
+        const user = userEvent.setup();
+        await render(_jsx(Combobox, { transitionProps: transitionProps, filter: (item, query) => item.textValue.toLowerCase().startsWith(query.toLowerCase()), limit: 1, data: [
+                { value: "react", label: "React" },
+                { value: "ruby", label: "Ruby" },
+                { value: "vue", label: "Vue" }
+            ] }));
+        const input = screen.getByRole("combobox");
+        await user.click(input);
+        await user.type(input, "r");
+        expect(screen.getByRole("option", { name: "React" })).toBeInTheDocument();
+        expect(screen.queryByRole("option", { name: "Ruby" })).not.toBeInTheDocument();
+    });
+});