@uxf/ui 11.74.0 → 11.74.2

package/color-scheme/get-color-scheme.d.ts

@@ -0,0 +1,2 @@
+import { ColorScheme } from "../types";
+export declare function getColorScheme(): ColorScheme | undefined;

package/color-scheme/get-color-scheme.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getColorScheme = getColorScheme;
+const is_server_1 = require("@uxf/core/utils/is-server");
+function getColorScheme() {
+    if (is_server_1.isServer) {
+        return;
+    }
+    const bodyClassList = document.body.classList;
+    if (bodyClassList.contains("light")) {
+        return "light";
+    }
+    if (bodyClassList.contains("dark")) {
+        return "dark";
+    }
+}

package/color-scheme/index.d.ts

@@ -0,0 +1,5 @@
+export { COLOR_SCHEME_DEFAULTS } from "./color-scheme-defaults";
+export { getColorScheme } from "./get-color-scheme";
+export { getColorSchemeClassName } from "./get-color-scheme-class-name";
+export { useColorScheme } from "./use-color-scheme";
+export { useToggleColorScheme } from "./use-toggle-color-scheme";

package/color-scheme/index.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useToggleColorScheme = exports.useColorScheme = exports.getColorSchemeClassName = exports.getColorScheme = exports.COLOR_SCHEME_DEFAULTS = void 0;
+var color_scheme_defaults_1 = require("./color-scheme-defaults");
+Object.defineProperty(exports, "COLOR_SCHEME_DEFAULTS", { enumerable: true, get: function () { return color_scheme_defaults_1.COLOR_SCHEME_DEFAULTS; } });
+var get_color_scheme_1 = require("./get-color-scheme");
+Object.defineProperty(exports, "getColorScheme", { enumerable: true, get: function () { return get_color_scheme_1.getColorScheme; } });
+var get_color_scheme_class_name_1 = require("./get-color-scheme-class-name");
+Object.defineProperty(exports, "getColorSchemeClassName", { enumerable: true, get: function () { return get_color_scheme_class_name_1.getColorSchemeClassName; } });
+var use_color_scheme_1 = require("./use-color-scheme");
+Object.defineProperty(exports, "useColorScheme", { enumerable: true, get: function () { return use_color_scheme_1.useColorScheme; } });
+var use_toggle_color_scheme_1 = require("./use-toggle-color-scheme");
+Object.defineProperty(exports, "useToggleColorScheme", { enumerable: true, get: function () { return use_toggle_color_scheme_1.useToggleColorScheme; } });

package/color-scheme/use-color-scheme.d.ts

@@ -0,0 +1,2 @@
+import { ColorScheme } from "../types";
+export declare function useColorScheme(): ColorScheme | undefined;

package/color-scheme/use-color-scheme.js

@@ -0,0 +1,15 @@
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useColorScheme = useColorScheme;
+const react_1 = require("react");
+const get_color_scheme_1 = require("./get-color-scheme");
+function useColorScheme() {
+    const [colorScheme, setColorScheme] = (0, react_1.useState)(get_color_scheme_1.getColorScheme);
+    (0, react_1.useEffect)(() => {
+        const observer = new MutationObserver((mutations) => mutations.forEach(() => setColorScheme((0, get_color_scheme_1.getColorScheme)())));
+        observer.observe(document.body, { attributes: true, attributeFilter: ["class"] });
+        return () => observer.disconnect();
+    }, []);
+    return colorScheme;
+}

package/color-scheme/use-handle-color-scheme.d.ts

@@ -0,0 +1,9 @@
+import { ColorScheme } from "../types";
+export interface ColorSchemeOptions {
+    defaultColorScheme?: ColorScheme;
+    getUserSettings: () => ColorScheme | null;
+    respectSystemSetting?: boolean;
+    respectUserSettings?: boolean;
+    setUserSettings: (colorScheme: ColorScheme) => void;
+}
+export declare function useHandleColorScheme(props: ColorSchemeOptions): void;

package/color-scheme/use-handle-color-scheme.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useHandleColorScheme = useHandleColorScheme;
+const react_1 = require("react");
+const color_scheme_defaults_1 = require("./color-scheme-defaults");
+function useHandleColorScheme(props) {
+    const { defaultColorScheme = color_scheme_defaults_1.COLOR_SCHEME_DEFAULTS.defaultColorScheme, getUserSettings, respectSystemSetting, respectUserSettings, setUserSettings, } = props;
+    (0, react_1.useEffect)(() => {
+        const inverseColorScheme = defaultColorScheme === "light" ? "dark" : "light";
+        const userSettings = getUserSettings();
+        if ((respectUserSettings && userSettings === inverseColorScheme) ||
+            (respectSystemSetting &&
+                !userSettings &&
+                window.matchMedia(`(prefers-color-scheme: ${inverseColorScheme})`).matches)) {
+            document.body.classList.remove(defaultColorScheme);
+            document.body.classList.add(inverseColorScheme);
+        }
+        else {
+            document.body.classList.remove(inverseColorScheme);
+            document.body.classList.add(defaultColorScheme);
+        }
+    }, [defaultColorScheme, getUserSettings, respectSystemSetting, respectUserSettings, setUserSettings]);
+}

package/color-scheme/use-toggle-color-scheme.d.ts

@@ -0,0 +1 @@
+export declare function useToggleColorScheme(): () => void;

package/color-scheme/use-toggle-color-scheme.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useToggleColorScheme = useToggleColorScheme;
+const is_server_1 = require("@uxf/core/utils/is-server");
+const react_1 = require("react");
+const context_1 = require("../context");
+function useToggleColorScheme() {
+    const { respectSystemSetting, respectUserSettings, getUserSettings, setUserSettings } = (0, context_1.useComponentContext)("colorScheme");
+    return (0, react_1.useCallback)(() => {
+        if (is_server_1.isServer) {
+            return;
+        }
+        const userSettings = getUserSettings();
+        let inverseColorScheme;
+        if (userSettings && respectUserSettings) {
+            document.body.classList.remove(userSettings);
+            inverseColorScheme = userSettings === "light" ? "dark" : "light";
+        }
+        else if (respectSystemSetting) {
+            const userColorScheme = window.matchMedia(`(prefers-color-scheme: dark)`).matches ? "dark" : "light";
+            document.body.classList.remove(userColorScheme);
+            inverseColorScheme = userColorScheme === "light" ? "dark" : "light";
+        }
+        if (inverseColorScheme) {
+            document.body.classList.add(inverseColorScheme);
+            setUserSettings(inverseColorScheme);
+        }
+    }, [getUserSettings, respectSystemSetting, respectUserSettings, setUserSettings]);
+}

package/combobox/combobox.d.ts

@@ -0,0 +1,51 @@
+import { Placement, Strategy } from "@floating-ui/react";
+import { IconsSet } from "@uxf/ui/icon";
+import { InputGroupSize, InputGroupVariant } from "@uxf/ui/input";
+import { Clearable, FormControlProps } from "@uxf/ui/types";
+import React, { CSSProperties, ReactNode, Ref } from "react";
+export type ComboboxValueId = number | string;
+export type ComboboxValue<Id = ComboboxValueId> = {
+    id: Id;
+    label: string;
+};
+export interface ComboboxOption<Id = ComboboxValueId> extends ComboboxValue<Id> {
+    disabled?: boolean;
+}
+export type ComboboxTypeRef = HTMLInputElement;
+export interface ComboboxProps<Id = ComboboxValueId, Option = ComboboxOption<Id>, Value = Option> extends FormControlProps<Value | null>, Clearable {
+    className?: string;
+    dropdownClassName?: string;
+    dropdownMatchesInputWidth?: boolean;
+    dropdownMaxHeight?: number;
+    dropdownPlacement?: Placement;
+    dropdownStrategy?: Strategy;
+    form?: string;
+    helperText?: ReactNode;
+    hiddenLabel?: boolean;
+    iconName?: keyof IconsSet;
+    id?: string;
+    inputArrow?: (open: boolean) => ReactNode;
+    keyExtractor?: (option: Option) => string | number;
+    label: ReactNode;
+    loadOptions?: (query: string) => Promise<Option[]>;
+    noOptionsMessage?: string;
+    noQueryMessage?: string;
+    notFoundMessage?: string;
+    options?: Option[];
+    placeholder?: string;
+    renderOption?: (option: Option, isSelected: boolean) => ReactNode;
+    size?: InputGroupSize;
+    style?: CSSProperties;
+    variant?: InputGroupVariant;
+    leftAddon?: ReactNode;
+    leftElement?: ReactNode;
+    rightAddon?: ReactNode;
+    rightElement?: ReactNode;
+    inputGroupRef?: Ref<ComboboxTypeRef> | undefined;
+    inputRef?: Ref<HTMLInputElement> | undefined;
+    inputWrapperRef?: Ref<ComboboxTypeRef> | undefined;
+}
+export declare function Combobox<Id = ComboboxValueId, Option = ComboboxOption<Id>, Value = Option>(props: ComboboxProps<Id, Option, Value>): React.JSX.Element;
+export declare namespace Combobox {
+    var displayName: string;
+}

package/combobox/combobox.js

@@ -0,0 +1,108 @@
+"use strict";
+"use client";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Combobox = Combobox;
+const react_1 = require("@floating-ui/react");
+const react_2 = require("@headlessui/react");
+const show_1 = require("@uxf/core-react/components/show");
+const use_input_focus_1 = require("@uxf/core-react/hooks/use-input-focus");
+const use_on_unmount_1 = require("@uxf/core-react/hooks/use-on-unmount");
+const translations_1 = require("@uxf/core-react/translations");
+const compose_refs_1 = require("@uxf/core-react/utils/compose-refs");
+const classes_1 = require("@uxf/core/constants/classes");
+const empty_array_1 = require("@uxf/core/constants/empty-array");
+const cx_1 = require("@uxf/core/utils/cx");
+const is_empty_1 = require("@uxf/core/utils/is-empty");
+const is_not_empty_1 = require("@uxf/core/utils/is-not-empty");
+const is_not_nil_1 = require("@uxf/core/utils/is-not-nil");
+const slugify_1 = require("@uxf/core/utils/slugify");
+const use_async_loading_1 = require("@uxf/ui/hooks/use-async-loading");
+const use_dropdown_1 = require("@uxf/ui/hooks/use-dropdown");
+const input_1 = require("@uxf/ui/input");
+const label_1 = require("@uxf/ui/label");
+const react_3 = __importStar(require("react"));
+function Option(props) {
+    const option = props.option;
+    return (react_3.default.createElement(react_2.Combobox.Option, { className: (optionState) => (0, cx_1.cx)("uxf-dropdown__item uxf-combobox__dropdown-item", optionState.active && classes_1.CLASSES.IS_ACTIVE, optionState.disabled && classes_1.CLASSES.IS_DISABLED, optionState.selected && classes_1.CLASSES.IS_SELECTED), disabled: option.disabled, value: option }, (optionState) => { var _a, _b; return react_3.default.createElement(react_3.default.Fragment, null, (_b = (_a = props.renderOption) === null || _a === void 0 ? void 0 : _a.call(props, props.option, optionState.selected)) !== null && _b !== void 0 ? _b : option.label); }));
+}
+Option.displayName = "UxfUiComboboxOption";
+function Options(props) {
+    var _a, _b;
+    (0, use_on_unmount_1.useOnUnmount)(() => { var _a; return (_a = props.onUnmount) === null || _a === void 0 ? void 0 : _a.call(props); });
+    return (react_3.default.createElement(react_2.Combobox.Options, { className: (0, cx_1.cx)("uxf-dropdown uxf-combobox__dropdown", `uxf-dropdown--size-${(_a = props.size) !== null && _a !== void 0 ? _a : "default"}`, `uxf-dropdown--variant-${(_b = props.variant) !== null && _b !== void 0 ? _b : "default"}`, props.matchWidth ? "uxf-dropdown--match-width" : "uxf-dropdown--not-match-width", props.placement === "bottom" && "uxf-dropdown--bottom", props.placement === "top" && "uxf-dropdown--top", props.className), ref: props.forwardRef, static: true, style: props.style }, (0, is_not_empty_1.isNotEmpty)(props.options) ? (props.options.map((option) => {
+        var _a, _b;
+        const optionKey = (_b = (_a = props.keyExtractor) === null || _a === void 0 ? void 0 : _a.call(props, option)) !== null && _b !== void 0 ? _b : option.id;
+        return react_3.default.createElement(Option, { key: optionKey, option: option, renderOption: props.renderOption });
+    })) : (react_3.default.createElement("div", { className: "uxf-dropdown__empty-wrapper" }, props.emptyMessage))));
+}
+Options.displayName = "UxfUiComboboxOptions";
+// eslint-disable-next-line complexity
+function Combobox(props) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    const t = (0, translations_1.useUxfTranslation)();
+    const isAsync = (0, is_not_nil_1.isNotNil)(props.loadOptions);
+    const [query, setQuery] = (0, react_3.useState)("");
+    const asyncOptions = (0, use_async_loading_1.useAsyncLoading)(query, (_a = props.options) !== null && _a !== void 0 ? _a : empty_array_1.EMPTY_ARRAY, props.loadOptions);
+    const options = isAsync ? asyncOptions : ((_b = props.options) !== null && _b !== void 0 ? _b : empty_array_1.EMPTY_ARRAY);
+    const filteredData = (0, is_empty_1.isEmpty)(query) || isAsync ? options : options.filter((item) => (0, slugify_1.slugify)(item.label).includes((0, slugify_1.slugify)(query)));
+    const emptyMessage = (0, is_empty_1.isEmpty)(query)
+        ? ((_c = props.noQueryMessage) !== null && _c !== void 0 ? _c : t("uxf-ui-combobox:no-query-message"))
+        : (0, is_empty_1.isEmpty)(options)
+            ? ((_d = props.noOptionsMessage) !== null && _d !== void 0 ? _d : t("uxf-ui-combobox:no-options-message"))
+            : ((_e = props.notFoundMessage) !== null && _e !== void 0 ? _e : "Nic nenalezeno");
+    const clearQuery = () => setQuery("");
+    const onChange = (v) => props.onChange(v);
+    const onInputChange = (event) => setQuery(event.target.value);
+    const displayValue = (item) => { var _a; return (_a = item === null || item === void 0 ? void 0 : item.label) !== null && _a !== void 0 ? _a : ""; };
+    const selectedOption = (_f = props.value) !== null && _f !== void 0 ? _f : null;
+    const generatedId = (0, react_3.useId)();
+    const id = (_g = props.id) !== null && _g !== void 0 ? _g : generatedId;
+    const innerRef = (0, react_3.useRef)(null);
+    const errorId = props.isInvalid ? `${id}--error-message` : undefined;
+    const input = (0, use_input_focus_1.useInputFocus)(innerRef, props.onBlur, props.onFocus);
+    const dropdown = (0, use_dropdown_1.useDropdown)((_h = props.dropdownPlacement) !== null && _h !== void 0 ? _h : "bottom", (_j = props.dropdownMatchesInputWidth) !== null && _j !== void 0 ? _j : true, props.dropdownMaxHeight, props.dropdownStrategy);
+    const stableRef = (0, react_3.useMemo)(() => (0, compose_refs_1.composeRefs)(innerRef, props.inputGroupRef, dropdown.refs.setReference), [dropdown.refs.setReference, props.inputGroupRef]);
+    const isNotInteractive = props.isDisabled || props.isReadOnly;
+    return (react_3.default.createElement(react_2.Combobox, { as: "div", by: "id", className: (0, cx_1.cx)("uxf-form-component uxf-combobox", props.isInvalid && classes_1.CLASSES.IS_INVALID, props.isRequired && classes_1.CLASSES.IS_REQUIRED, props.isReadOnly && classes_1.CLASSES.IS_READONLY, props.isDisabled && classes_1.CLASSES.IS_DISABLED, props.className), "data-name": props.name, disabled: isNotInteractive, form: props.form, name: props.name, onChange: onChange, style: props.style, value: selectedOption }, (renderProps) => (react_3.default.createElement(react_3.default.Fragment, null,
+        react_3.default.createElement("div", { className: "uxf-form-component__label" },
+            react_3.default.createElement(react_2.Combobox.Label, { as: label_1.Label, isHidden: props.hiddenLabel, isRequired: props.isRequired, onClick: isNotInteractive ? undefined : input.focus }, props.label)),
+        react_3.default.createElement("div", { className: "uxf-form-component__input" },
+            react_3.default.createElement(react_2.Combobox.Button, { "aria-describedby": errorId, "aria-invalid": props.isInvalid, as: input_1.Input, className: (0, cx_1.cx)("uxf-combobox__button", dropdown.placement === "bottom" && `${classes_1.CLASSES.IS_OPEN}--bottom`, dropdown.placement === "top" && `${classes_1.CLASSES.IS_OPEN}--top`, renderProps.open && classes_1.CLASSES.IS_OPEN), customInputElementDisplayName: react_2.Combobox.Input.displayName, inputFocus: input, inputGroupRef: stableRef, inputWrapperRef: props.inputWrapperRef, isDisabled: props.isDisabled, isFocused: renderProps.open, isInvalid: props.isInvalid, isReadOnly: props.isReadOnly, ref: props.inputRef, size: props.size, variant: props.variant },
+                props.leftAddon && react_3.default.createElement(input_1.Input.LeftAddon, null, props.leftAddon),
+                props.leftElement && react_3.default.createElement(input_1.Input.LeftElement, null, props.leftElement),
+                react_3.default.createElement(react_2.Combobox.Input, { autoComplete: "off", className: "uxf-input__element", displayValue: displayValue, onBlur: props.onBlur, onChange: onInputChange, placeholder: props.placeholder, type: "text" }),
+                react_3.default.createElement(input_1.Input.RightElement, null,
+                    react_3.default.createElement(show_1.Show, { when: Boolean(props.isClearable) && (0, is_not_nil_1.isNotNil)(selectedOption) && !isNotInteractive },
+                        react_3.default.createElement(input_1.Input.RemoveButton, { onChange: onChange })),
+                    props.inputArrow ? (react_3.default.createElement(react_2.Combobox.Button, null, props.inputArrow(renderProps.open))) : (react_3.default.createElement(input_1.Input.ArrowIcon, { iconName: props.iconName, isOpen: renderProps.open }))),
+                props.rightAddon && react_3.default.createElement(input_1.Input.RightAddon, null, props.rightAddon)),
+            react_3.default.createElement(show_1.Show, { when: renderProps.open },
+                react_3.default.createElement(react_1.FloatingPortal, null,
+                    react_3.default.createElement(Options, { className: props.dropdownClassName, emptyMessage: emptyMessage, forwardRef: dropdown.refs.setFloating, keyExtractor: props.keyExtractor, matchWidth: props.dropdownMatchesInputWidth, onUnmount: clearQuery, options: filteredData, placement: dropdown.placement, renderOption: props.renderOption, size: props.size, style: dropdown.floatingStyles, variant: props.variant }))),
+            react_3.default.createElement(show_1.Show, { when: Boolean(props.helperText) },
+                react_3.default.createElement("div", { className: (0, cx_1.cx)("uxf-helper-text", props.isInvalid && classes_1.CLASSES.IS_INVALID), id: errorId }, props.helperText)))))));
+}
+Combobox.displayName = "UxfUiCombobox";

package/combobox/combobox.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/combobox/combobox.spec.js

@@ -0,0 +1,10 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const snap_test_1 = require("../utils/snap-test");
+const combobox_stories_1 = require("./combobox.stories");
+(0, snap_test_1.snapTest)("render default stories", react_1.default.createElement(combobox_stories_1.SynchronousOptions, null));
+(0, snap_test_1.snapTest)("render async stories", react_1.default.createElement(combobox_stories_1.AsynchronousOptions, null));

package/combobox/combobox.stories.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+export declare function SynchronousOptions(): React.JSX.Element;
+export declare function AsynchronousOptions(): React.JSX.Element;

package/combobox/combobox.stories.js

@@ -0,0 +1,55 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SynchronousOptions = SynchronousOptions;
+exports.AsynchronousOptions = AsynchronousOptions;
+const react_1 = __importStar(require("react"));
+const action_1 = require("../utils/action");
+const index_1 = require("./index");
+const OPTIONS = [
+    { id: "one", label: "Option one" },
+    { id: "two", label: "Option two disabled", disabled: true },
+    { id: "three", label: "Option three" },
+    { id: "four", label: "Option with diacritics (ěščřžýáíé)" },
+];
+function SynchronousOptions() {
+    const [value, setValue] = (0, react_1.useState)(null);
+    const onChange = (0, action_1.action)("onChange", setValue);
+    return (react_1.default.createElement("div", { className: "space-y-4 p-4" },
+        react_1.default.createElement(index_1.Combobox, { helperText: "Start typing to see options...", id: "combobox-1", label: "Combobox", name: "combobox", onChange: onChange, options: OPTIONS, placeholder: "Vyberte...", value: value }),
+        react_1.default.createElement(index_1.Combobox, { helperText: "Error message", id: "combobox-1", isInvalid: true, isRequired: true, label: "Combobox invalid", name: "combobox", onChange: onChange, options: OPTIONS, placeholder: "Vyberte...", value: value }),
+        react_1.default.createElement(index_1.Combobox, { dropdownPlacement: "top", id: "combobox-1", isClearable: true, label: "Combobox with dropdown top", name: "combobox", onChange: onChange, options: OPTIONS, placeholder: "Vyberte...", value: value }),
+        react_1.default.createElement(index_1.Combobox, { id: "combobox-render", isClearable: true, label: "RenderOption", name: "combobox", onChange: onChange, options: OPTIONS, placeholder: "Vyberte...", renderOption: (option, isSelected) => (react_1.default.createElement(react_1.default.Fragment, null,
+                "Option: ",
+                option.label,
+                isSelected && " (selected)")), value: value })));
+}
+function AsynchronousOptions() {
+    const [value, setValue] = (0, react_1.useState)(null);
+    const onChange = (0, action_1.action)("onChange", setValue);
+    const loadOptions = (query) => Promise.resolve(OPTIONS.filter((option) => !query || option.label.toLowerCase().includes(query.toLowerCase())));
+    return (react_1.default.createElement("div", { className: "p-4" },
+        react_1.default.createElement(index_1.Combobox, { id: "combobox-1", label: "Combobox", loadOptions: loadOptions, name: "combobox", onChange: onChange, placeholder: "Vyberte...", value: value })));
+}

package/combobox/index.d.ts

@@ -0,0 +1,2 @@
+export { Combobox } from "./combobox";
+export type { ComboboxOption, ComboboxProps, ComboboxTypeRef, ComboboxValue, ComboboxValueId } from "./combobox";

package/combobox/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Combobox = void 0;
+var combobox_1 = require("./combobox");
+Object.defineProperty(exports, "Combobox", { enumerable: true, get: function () { return combobox_1.Combobox; } });

package/combobox/translations.d.ts

@@ -0,0 +1,17 @@
+declare const _default: {
+    "uxf-ui-combobox": {
+        "no-query-message": {
+            cs: string;
+            en: string;
+            sk: string;
+            de: string;
+        };
+        "no-options-message": {
+            cs: string;
+            en: string;
+            sk: string;
+            de: string;
+        };
+    };
+};
+export default _default;

package/combobox/translations.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    "uxf-ui-combobox": {
+        "no-query-message": {
+            cs: "Pro zobrazení možností začněte psát",
+            en: "Start typing to see options",
+            sk: "Pre zobrazenie možností začnite písať",
+            de: "Beginnen Sie zu tippen, um Optionen zu sehen",
+        },
+        "no-options-message": {
+            cs: "Nabídka neosahuje žádné položky",
+            en: "No items found",
+            sk: "Ponuka neobsahuje žiadne položky",
+            de: "Keine Elemente gefunden",
+        },
+    },
+};