@bit.rhplus/ui2.module-dropdown-list 0.1.111 → 0.1.112

package/dist/index.d.ts

@@ -1,2 +1,15 @@
 export default ModuleDropdownList;
-declare function ModuleDropdownList(props: any): import("react/jsx-runtime").JSX.Element;
+declare function ModuleDropdownList({ value, onChange, onFreeTextCommit, placeholder, disabled, style, allowFreeText, createNewOnMismatch, showArrow, showAddButton, getContainer, moduleDefinition, }: {
+    value: any;
+    onChange: any;
+    onFreeTextCommit: any;
+    placeholder?: string;
+    disabled?: boolean;
+    style?: {};
+    allowFreeText?: boolean;
+    createNewOnMismatch?: boolean;
+    showArrow?: boolean;
+    showAddButton?: boolean;
+    getContainer?: () => HTMLElement;
+    moduleDefinition: any;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/index.js

@@ -1,171 +1,422 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 /* eslint-disable */
-import React, { useEffect, useRef, useCallback } from 'react';
-import Input from 'antd/es/input';
-import Select from 'antd/es/select';
+import React, { useState, useEffect, useRef, useCallback, useMemo } from 'react';
 import AutoComplete from 'antd/es/auto-complete';
+import Select from 'antd/es/select';
 import Button from 'antd/es/button';
-import { SearchOutlined } from '@ant-design/icons';
-import AgGrid from '@bit.rhplus/ag-grid';
-import { useAtom } from 'jotai';
+import Input from 'antd/es/input';
+import { SearchOutlined, LinkOutlined, EditOutlined, DownOutlined, PlusOutlined } from '@ant-design/icons';
+import { AgGridReact } from 'ag-grid-react';
 import DraggableModal from '@bit.rhplus/draggable-modal';
-import { recentItemsAtomFamily } from './store/recentItemsStore';
-import { useModuleDropdownList } from './useModuleDropdownList';
-import './ModuleInput.css';
-const { Option } = Select;
-const ModuleDropdownList = (props) => {
-    const { value, onChange, placeholder = 'Vyberte', disabled = false, readOnly = false, style = {}, width, maxRecentItems = 5, moduleDefinition, displayMode = 'recent', getContainer = () => document.body, // Vlastnost pro nastavení kontejneru modálu
-    // Free-text mód
-    allowFreeText = false, onFreeTextCommit, // (text: string) => void — voláno při Enter nebo blur bez výběru
-    onSearchChange, // (text: string) => void — sleduje aktuální text v inputu
-    initialSearchValue = '', // Počáteční text pro předvyplnění search inputu
-     } = props;
-    // Interní stavy pro Select
-    const containerRef = useRef(null);
-    // Free-text mód — text který uživatel napsal do search inputu
-    const [freeTextInput, setFreeTextInput] = React.useState(initialSearchValue || '');
-    // Zabrání dvojímu spuštění onFreeTextCommit při výběru z AutoComplete dropdown
+import useData from '@bit.rhplus/data';
+import { useOidcAccessToken } from '@axa-fr/react-oidc';
+// Session-level cache — data načtena jednou per moduleName per session
+const _cache = {};
+// ─── Detail panel subkomponenta ───────────────────────────────────────────────
+const DetailPanel = ({ definition, item }) => {
+    if (!definition || !item)
+        return null;
+    if (typeof definition.render === 'function')
+        return definition.render(item);
+    if (!Array.isArray(definition.fields))
+        return null;
+    if (!definition.fields.length)
+        return null;
+    return (_jsx("div", { style: {
+            background: '#fafafa',
+            border: '1px solid #d9d9d9',
+            borderRadius: 6,
+            padding: '8px 12px',
+            display: 'grid',
+            gridTemplateColumns: '1fr 1fr',
+            gap: '4px 16px',
+            fontSize: 12,
+        }, children: definition.fields.map((f) => (_jsxs("div", { style: { display: 'flex', gap: 4, minWidth: 0 }, children: [_jsxs("span", { style: { color: '#8c8c8c', flexShrink: 0 }, children: [f.label, ":"] }), _jsx("span", { style: {
+                        fontWeight: 500,
+                        overflow: 'hidden',
+                        textOverflow: 'ellipsis',
+                        whiteSpace: 'nowrap',
+                        color: item[f.key] ? 'inherit' : '#bfbfbf',
+                    }, children: item[f.key] ?? '—' })] }, f.key))) }));
+};
+const ModuleDropdownList = ({ value, onChange, onFreeTextCommit, placeholder = 'Vyberte', disabled = false, style = {}, allowFreeText = true, createNewOnMismatch = false, showArrow = true, showAddButton = true, getContainer = () => document.body, moduleDefinition, }) => {
+    const moduleName = moduleDefinition?.moduleName;
+    const { fetchDataUIAsync } = useData();
+    const { accessToken } = useOidcAccessToken();
+    // ─── Data a načítání ──────────────────────────────────────────────────────────
+    const [allItems, setAllItems] = useState(() => _cache[moduleName] || []);
+    const [allItemsLoading, setAllItemsLoading] = useState(!_cache[moduleName]);
+    useEffect(() => {
+        if (!moduleName || !moduleDefinition)
+            return;
+        if (_cache[moduleName]) {
+            setAllItems(_cache[moduleName]);
+            setAllItemsLoading(false);
+            return;
+        }
+        setAllItemsLoading(true);
+        moduleDefinition
+            .fetchData('', fetchDataUIAsync, accessToken)
+            .then((data) => {
+            const items = Array.isArray(data) ? data : [];
+            _cache[moduleName] = items;
+            setAllItems(items);
+        })
+            .catch(() => setAllItems([]))
+            .finally(() => setAllItemsLoading(false));
+    }, []); // pouze při mount
+    // ─── Free-text stav ──────────────────────────────────────────────────────────
+    const initialText = useMemo(() => {
+        if (!allowFreeText)
+            return '';
+        if (typeof value === 'string')
+            return value;
+        return '';
+    }, []); // pouze při mount
+    const [inputText, setInputText] = useState(initialText);
+    const [dropdownOpen, setDropdownOpen] = useState(false);
+    // null = prázdno/psaní, true = katalog (🔗), false = volný text (✏️)
+    const [isLinked, setIsLinked] = useState(null);
+    const [selectedItem, setSelectedItem] = useState(null);
+    const [detailOpen, setDetailOpen] = useState(false);
     const justSelectedRef = useRef(false);
-    const processedStyle = typeof style === 'string' ? { width: style } : { ...style };
-    // Priorita nastavení šířky: 1. prop width, 2. style.width, 3. defaultní 100%
-    if (width) {
-        processedStyle.width = width;
-    }
-    else if (!processedStyle.width) {
-        processedStyle.width = '100%';
-    }
-    // Použití Jotai atom pro poslední vybrané položky daného typu modulu
-    const [recentItems, setRecentItems] = useAtom(recentItemsAtomFamily(moduleDefinition?.moduleName || ''));
-    // Přidání položky do seznamu nedávných položek - obaleno v useCallback
-    const addToRecentItems = useCallback((item) => {
-        if (!item || !moduleDefinition)
+    const freeTextWrapperRef = useRef(null);
+    const inputTextRef = useRef(initialText);
+    inputTextRef.current = inputText;
+    const isLinkedRef = useRef(null);
+    isLinkedRef.current = isLinked;
+    // Ref na aktuální suggestions — přístupný v capture handleru bez stale closure
+    const suggestionsRef = useRef([]);
+    // Ref na handleAutoCompleteSelect — přístupný v capture handleru bez stale closure
+    const handleAutoCompleteSelectRef = useRef(null);
+    // ─── Sync externího value (načtení formuláře) ────────────────────────────────
+    // Když se value změní zvenku (form load), najde položku v katalogu a zobrazí ji.
+    // Pokud položka není v allItems, zkusí fetchById fallback.
+    useEffect(() => {
+        console.log('[ModuleDropdownList] sync value:', { value, allItemsCount: allItems.length, allItemsLoading, moduleName });
+        if (!value)
+            return;
+        // Pokud allItems ještě loading, počkáme na další run
+        if (allItemsLoading)
             return;
-        // Vytvoření nového seznamu bez aktuální položky (pokud existuje)
-        const filteredItems = recentItems.filter((existingItem) => existingItem[moduleDefinition.valueField || 'id'] !==
-            item[moduleDefinition.valueField || 'id']);
-        // Přidání nové položky na začátek a omezení počtu položek
-        const updatedItems = [item, ...filteredItems].slice(0, maxRecentItems);
-        setRecentItems(updatedItems);
-    }, [recentItems, moduleDefinition, maxRecentItems, setRecentItems]);
-    // Použití custom hooku pro veškerou logiku ModuleInput
-    const { modalOpen, searchQuery, dropdownSearchQuery, rowData, fullListData, isLoading, isFullListLoading, selectedItem, isDetailLoading, moduleDetailQuery, openModal, closeModal, handleSearchChange, handleDropdownSearchChange, handleItemSelect, clearSelection, getDisplayValue, } = useModuleDropdownList({ moduleDefinition, value, displayMode });
-    const selectItem = (item) => {
-        const selectedItemData = handleItemSelect(item);
-        // Uložení vybrané položky do nedávných položek
-        if (selectedItemData) {
-            addToRecentItems(selectedItemData);
+        const vf = moduleDefinition?.valueField || 'id';
+        const showItem = (item) => {
+            console.log('[ModuleDropdownList] showItem:', { id: item?.[vf], displayValue: moduleDefinition?.getDisplayValue?.(item) });
+            const displayText = moduleDefinition?.getDisplayValue?.(item) || item.code || item.name || '';
+            setInputText(displayText);
+            setIsLinked(true);
+            setSelectedItem(item);
+        };
+        if (allItems.length) {
+            const item = allItems.find((i) => String(i[vf]) === String(value));
+            if (item) {
+                showItem(item);
+                return;
+            }
         }
-        // Přímé volání onChange s novou hodnotou a celým objektem
-        if (typeof onChange === 'function' && moduleDefinition) {
-            const id = selectedItemData[moduleDefinition.valueField || 'id'];
-            onChange(id, selectedItemData);
+        // Fallback: fetchById pro položky, které nejsou v seznamu
+        if (moduleDefinition?.fetchById) {
+            moduleDefinition.fetchById(value, fetchDataUIAsync, accessToken).then((item) => {
+                if (item) {
+                    showItem(item);
+                }
+            });
         }
-    };
-    // Přidání vybrané položky do nedávných položek při načtení
-    useEffect(() => {
-        if (selectedItem && moduleDefinition) {
-            addToRecentItems(selectedItem);
+    }, [value, allItems, allItemsLoading]); // eslint-disable-line react-hooks/exhaustive-deps
+    // ─── Create-new modal ─────────────────────────────────────────────────────────
+    const [createNewModalOpen, setCreateNewModalOpen] = useState(false);
+    const [createNewInitialName, setCreateNewInitialName] = useState('');
+    // ─── Modaly ───────────────────────────────────────────────────────────────────
+    const [catalogFilter, setCatalogFilter] = useState('');
+    const [catalogModalOpen, setCatalogModalOpen] = useState(false);
+    const [multiMatchData, setMultiMatchData] = useState([]);
+    const [multiMatchModalOpen, setMultiMatchModalOpen] = useState(false);
+    const catalogModalOpenRef = useRef(false);
+    catalogModalOpenRef.current = catalogModalOpen;
+    const multiMatchModalOpenRef = useRef(false);
+    multiMatchModalOpenRef.current = multiMatchModalOpen;
+    // ─── Lokální filtrování návrhů ────────────────────────────────────────────────
+    const suggestions = useMemo(() => {
+        const vf = moduleDefinition?.valueField || 'id';
+        const source = !inputText || !inputText.trim()
+            ? allItems
+            : allItems.filter((item) => {
+                const label = moduleDefinition?.getDisplayValue?.(item) ||
+                    item.code ||
+                    item.name ||
+                    '';
+                return label.toLowerCase().includes(inputText.toLowerCase());
+            });
+        return source.slice(0, 15).map((item) => ({
+            value: String(item[vf]),
+            label: moduleDefinition?.getDisplayValue?.(item) ||
+                item.code ||
+                item.name ||
+                '',
+            item,
+        }));
+    }, [allItems, inputText, moduleDefinition]);
+    suggestionsRef.current = suggestions;
+    // Catalog-only: options pro Select
+    const catalogOptions = useMemo(() => {
+        const vf = moduleDefinition?.valueField || 'id';
+        return allItems.map((item) => ({
+            value: item[vf],
+            label: moduleDefinition?.getDisplayValue?.(item) ||
+                item.code ||
+                item.name ||
+                String(item[vf]),
+        }));
+    }, [allItems, moduleDefinition]);
+    // ─── Výběr z katalogu (shared) ────────────────────────────────────────────────
+    const commitCatalogItem = useCallback((item) => {
+        if (!item)
+            return;
+        const vf = moduleDefinition?.valueField || 'id';
+        const id = item[vf];
+        setSelectedItem(item);
+        if (typeof onChange === 'function') {
+            onChange(id, item);
+        }
+    }, [moduleDefinition, onChange]);
+    const handleCreateSuccess = useCallback((newItem) => {
+        if (newItem) {
+            _cache[moduleName] = [...(_cache[moduleName] || []), newItem];
+            setAllItems((prev) => [...prev, newItem]);
+            const displayText = moduleDefinition?.getDisplayValue?.(newItem) || newItem.name || '';
+            setInputText(displayText);
+            setIsLinked(true);
+            commitCatalogItem(newItem);
         }
-    }, [selectedItem, moduleDefinition, addToRecentItems]);
-    // Výběr položky přímo ze Select dropdown
-    const handleSelectChange = (selectedId) => {
+        setCreateNewModalOpen(false);
+    }, [moduleName, moduleDefinition, commitCatalogItem]);
+    // ─── Catalog-only: výběr ze Select ───────────────────────────────────────────
+    const handleCatalogSelectChange = useCallback((selectedId) => {
         if (!selectedId) {
-            clearSelection();
-            if (typeof onChange === 'function') {
+            if (typeof onChange === 'function')
                 onChange(null, null);
-            }
+            return;
         }
-        else {
-            // Pokud je v nedávných položkách nebo fullListData, nastavte ji jako vybranou
-            const allOptions = displayMode === 'full' ? fullListData : recentItems;
-            const selectedItem = allOptions.find((item) => item[moduleDefinition?.valueField || 'id'] === selectedId);
-            if (selectedItem) {
-                handleItemSelect(selectedItem);
-                // Přímé volání onChange s ID a celým objektem
-                if (typeof onChange === 'function') {
-                    onChange(selectedId, selectedItem);
+        const vf = moduleDefinition?.valueField || 'id';
+        const item = allItems.find((i) => String(i[vf]) === String(selectedId));
+        if (item)
+            commitCatalogItem(item);
+    }, [allItems, moduleDefinition, commitCatalogItem, onChange]);
+    // ─── Výběr z catalog modalu ───────────────────────────────────────────────────
+    const handleCatalogModalSelect = useCallback((params) => {
+        if (!params.data)
+            return;
+        const item = params.data;
+        if (allowFreeText) {
+            const displayText = moduleDefinition?.getDisplayValue?.(item) ||
+                item.code ||
+                item.name ||
+                '';
+            setInputText(displayText);
+        }
+        isLinkedRef.current = true; // synchronní update před zavřením modalu (onCancel race condition)
+        setIsLinked(true);
+        commitCatalogItem(item);
+        setCatalogModalOpen(false);
+    }, [allowFreeText, moduleDefinition, commitCatalogItem]);
+    // ─── Free-text: výběr návrhu z AutoComplete ───────────────────────────────────
+    const handleAutoCompleteSelect = useCallback((optionValue, option) => {
+        justSelectedRef.current = true;
+        const item = option.item;
+        const displayText = moduleDefinition?.getDisplayValue?.(item) ||
+            item.code ||
+            item.name ||
+            '';
+        setInputText(displayText);
+        setDropdownOpen(false);
+        setIsLinked(true);
+        commitCatalogItem(item);
+        // Ztratit focus z inputu po výběru
+        freeTextWrapperRef.current?.querySelector('input')?.blur();
+    }, [moduleDefinition, commitCatalogItem]);
+    handleAutoCompleteSelectRef.current = handleAutoCompleteSelect;
+    // ─── Free-text: validace po Enter / blur ──────────────────────────────────────
+    const handleFreeTextCommit = useCallback((text) => {
+        if (!text || !text.trim()) {
+            if (typeof onChange === 'function')
+                onChange(null, null);
+            return;
+        }
+        const searchLower = text.trim().toLowerCase();
+        const vf = moduleDefinition?.valueField || 'id';
+        const localMatches = allItems.filter((item) => {
+            const label = moduleDefinition?.getDisplayValue?.(item) ||
+                item.code ||
+                item.name ||
+                '';
+            return label.toLowerCase() === searchLower;
+        });
+        if (localMatches.length === 0) {
+            if (createNewOnMismatch && moduleDefinition?.createFormComponent) {
+                // Create-new mód — otevřít formulář pro vytvoření nového záznamu
+                setCreateNewInitialName(text.trim());
+                setCreateNewModalOpen(true);
+            }
+            else {
+                // Volný text — žádná shoda v katalogu
+                setIsLinked(false);
+                setSelectedItem(null);
+                setDetailOpen(false);
+                if (typeof onFreeTextCommit === 'function') {
+                    onFreeTextCommit(text.trim());
                 }
+                if (typeof onChange === 'function')
+                    onChange(null, null);
+                freeTextWrapperRef.current?.querySelector('input')?.blur();
             }
         }
-    };
-    // Formátování nedávných položek pro zobrazení v Select
-    const recentItemsOptions = recentItems.map((item) => ({
-        id: item[moduleDefinition.valueField || 'id'],
-        name: moduleDefinition?.getDisplayValue?.(item) || item.name || item.id,
-        fullItem: item, // Uchování celé položky pro snadné získání později
-    }));
-    // Formátování kompletního seznamu pro zobrazení v Select (full mode)
-    const fullListOptions = fullListData.map((item) => ({
-        id: item[moduleDefinition.valueField || 'id'],
-        name: moduleDefinition?.getDisplayValue?.(item) || item.name || item.id,
-        fullItem: item,
-    }));
-    // Výběr správného seznamu podle displayMode
-    const selectOptions = displayMode === 'full' ? fullListOptions : recentItemsOptions;
-    // AutoComplete options pro free-text mód
-    const autoCompleteOptions = selectOptions.map((option) => ({
-        value: String(option.id),
-        label: String(option.name || ''),
-    }));
-    // Pokud nemáme definici modulu, zobrazíme prázdné pole
-    if (!moduleDefinition)
-        return _jsx("div", {});
-    // Funkce pro výběr položky a zavření modálu
-    const handleModalItemSelect = (event) => {
-        selectItem(event.data);
-        closeModal();
-    };
-    // Získání aktuální zobrazované hodnoty pro Select
-    const displayValueText = getDisplayValue();
-    // Funkce pro vykreslení obsahu Option při detailním načítání
-    const renderDetailOption = () => {
-        if (isDetailLoading) {
-            return 'Načítání...';
+        else if (localMatches.length === 1) {
+            // Přesná jedna shoda → auto-výběr
+            const item = localMatches[0];
+            const displayText = moduleDefinition?.getDisplayValue?.(item) ||
+                item.code ||
+                item.name ||
+                text.trim();
+            setInputText(displayText);
+            setIsLinked(true);
+            commitCatalogItem(item);
+        }
+        else {
+            // Více shod → multi-match modal
+            setMultiMatchData(localMatches);
+            setMultiMatchModalOpen(true);
+        }
+    }, [allItems, moduleDefinition, onChange, onFreeTextCommit, commitCatalogItem]);
+    // ─── Free-text: blur ──────────────────────────────────────────────────────────
+    const handleBlur = useCallback(() => {
+        if (justSelectedRef.current) {
+            justSelectedRef.current = false;
+            return;
         }
-        if (moduleDetailQuery?.data) {
-            return (_jsxs("div", { className: "option-item", children: [_jsx("div", { className: "option-avatar", children: displayValueText.charAt(0) }), _jsxs("div", { className: "option-content", children: [_jsx("div", { className: "option-name", children: displayValueText }), _jsx("div", { className: "option-email", children: moduleDetailQuery.data.email || '-' })] })] }));
+        // Pokud už byla hodnota commitnuta (katalog / autocomplete), neoverwritovat
+        if (isLinkedRef.current === true)
+            return;
+        // Refy místo state — vždy aktuální hodnota, bez stale closure problémů
+        if (inputTextRef.current && !multiMatchModalOpenRef.current && !catalogModalOpenRef.current) {
+            handleFreeTextCommit(inputTextRef.current);
         }
-        return `${value} (nenačteno)`;
-    };
-    return (_jsxs("div", { className: "module-input-container", style: processedStyle, ref: containerRef, children: [_jsxs("div", { className: "simple-select-container", children: [allowFreeText ? (_jsx(AutoComplete, { value: freeTextInput, options: autoCompleteOptions, style: { width: '100%', fontSize: '13px' }, placeholder: placeholder, disabled: disabled || readOnly, getPopupContainer: () => document.body, dropdownStyle: { zIndex: 9999 }, filterOption: (input, option) => String(option?.label || '').toLowerCase().includes(input.toLowerCase()), onChange: (text) => {
-                            setFreeTextInput(text);
-                            onSearchChange?.(text);
-                        }, onSelect: (optionValue) => {
-                            justSelectedRef.current = true;
-                            const opt = selectOptions.find((o) => String(o.id) === optionValue);
-                            if (opt) {
-                                addToRecentItems(opt.fullItem);
-                                if (typeof onChange === 'function') {
-                                    onChange(opt.id, opt.fullItem);
-                                }
-                            }
-                        }, onKeyDown: (e) => {
-                            if (e.key === 'Enter') {
-                                e.preventDefault();
-                                e.stopPropagation();
-                                if (freeTextInput)
-                                    onFreeTextCommit?.(freeTextInput);
-                            }
-                        }, onBlur: () => {
-                            if (justSelectedRef.current) {
-                                justSelectedRef.current = false;
-                                return;
-                            }
-                            if (freeTextInput && !modalOpen) {
-                                onFreeTextCommit?.(freeTextInput);
-                            }
-                        } })) : (_jsxs(Select, { value: value, onChange: handleSelectChange, className: "simple-select", placeholder: placeholder, disabled: disabled || readOnly, dropdownMatchSelectWidth: false, getPopupContainer: () => document.body, dropdownStyle: { zIndex: 9999 }, loading: displayMode === 'full' && isFullListLoading, style: { width: '100%', fontSize: '13px' }, maxTagTextLength: 20, filterOption: false, 
-                        // Vlastní tučná šipka s rotací
-                        suffixIcon: _jsx("svg", { className: "select-arrow-icon", width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M2 4L6 8L10 4", stroke: "#bfbfbf", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round" }) }), optionLabelProp: "label", listItemHeight: 32, listHeight: 256, dropdownRender: (menu) => (_jsxs("div", { className: "select-dropdown-container", children: [displayMode === 'full' && (_jsx("div", { className: "search-box", children: _jsx(Input, { placeholder: "Search", value: dropdownSearchQuery, onChange: (e) => handleDropdownSearchChange(e.target.value), prefix: _jsx(SearchOutlined, {}), className: "dropdown-search-input" }) })), menu, _jsxs("div", { className: "new-customer-item", children: [_jsx("div", { className: "plus-icon", children: "+" }), _jsx("span", { children: "New" })] })] })), children: [selectOptions.map((option) => (_jsx(Option, { value: option.id, label: option.name, children: option.name }, option.id))), value && !selectOptions.some((option) => option.id === value) && (_jsx(Option, { value: value, label: displayValueText, children: renderDetailOption() }, value))] })), _jsx(Button, { icon: _jsx(SearchOutlined, {}), className: "search-button", onClick: openModal, type: "primary" })] }), _jsxs(DraggableModal, { width: moduleDefinition.modalWidth || 800, open: modalOpen, getContainer: getContainer, onCancel: closeModal, maskClosable: false, zIndex: 99999999, title: moduleDefinition.modalTitle ||
-                    `Vybrat z modulu: ${moduleDefinition.moduleName}`, footer: () => {
-                    return [
-                        _jsx(Button, { onClick: closeModal, style: { marginRight: '10px', width: 'auto' }, children: "Zav\u0159\u00EDt" }, "cancel"),
-                    ];
-                }, children: [_jsx(Input, { placeholder: "Filtrovat...", value: searchQuery, onChange: (e) => handleSearchChange(e.target.value), prefix: _jsx(SearchOutlined, {}), allowClear: true }), isLoading ? (_jsx("div", { className: "text-align-center padding", children: "Na\u010D\u00EDt\u00E1n\u00ED..." })) : (_jsx("div", { style: { height: 400, width: '100%' }, children: _jsx(AgGrid, { theme: "themeAlpine", rowData: rowData, columnDefs: moduleDefinition.columnDefs, defaultColDef: {
-                                sortable: true,
-                                filter: true,
-                                resizable: true,
-                            }, onCellDoubleClicked: handleModalItemSelect, rowSelection: "single", enableCellChangeFlash: false }) }))] })] }));
+    }, [handleFreeTextCommit]);
+    // ─── Free-text: výběr z multi-match modalu ────────────────────────────────────
+    const handleMultiMatchSelect = useCallback((params) => {
+        if (!params.data)
+            return;
+        const item = params.data;
+        const displayText = moduleDefinition?.getDisplayValue?.(item) ||
+            item.code ||
+            item.name ||
+            '';
+        setInputText(displayText);
+        isLinkedRef.current = true; // synchronní update před zavřením modalu (onCancel race condition)
+        setIsLinked(true);
+        setMultiMatchModalOpen(false);
+        commitCatalogItem(item);
+    }, [moduleDefinition, commitCatalogItem]);
+    // ─── Native capture Enter handler (rc-select stopPropagation obrana) ─────────
+    useEffect(() => {
+        if (!allowFreeText)
+            return;
+        const el = freeTextWrapperRef.current;
+        if (!el)
+            return;
+        const input = el.querySelector('input');
+        if (!input)
+            return;
+        const handler = (e) => {
+            if (e.key !== 'Enter')
+                return;
+            // Pokud je v dropdown označená položka šipkou, ručně ji vybereme
+            const activeOptionEl = document.querySelector('.ant-select-item-option-active');
+            if (activeOptionEl) {
+                e.stopImmediatePropagation();
+                e.preventDefault();
+                const labelText = activeOptionEl.querySelector('.ant-select-item-option-content')?.textContent?.trim();
+                if (labelText) {
+                    const matched = suggestionsRef.current.find((s) => s.label === labelText);
+                    if (matched) {
+                        handleAutoCompleteSelectRef.current(matched.value, matched);
+                        return;
+                    }
+                }
+                return;
+            }
+            // Žádná aktivní položka → volný text
+            const text = inputTextRef.current || '';
+            if (!text.trim())
+                return;
+            e.stopImmediatePropagation();
+            e.preventDefault();
+            handleFreeTextCommit(text);
+        };
+        input.addEventListener('keydown', handler, true);
+        return () => input.removeEventListener('keydown', handler, true);
+    }, [allowFreeText, handleFreeTextCommit]);
+    // ─── Shared: create-new modal ────────────────────────────────────────────────
+    const createNewModalContent = moduleDefinition?.createFormComponent ? (_jsx(DraggableModal, { open: createNewModalOpen, title: moduleDefinition.createModalTitle || 'Nový záznam', width: moduleDefinition.createModalWidth || 600, onCancel: () => setCreateNewModalOpen(false), maskClosable: false, getContainer: getContainer, zIndex: 99999999, footer: null, children: React.createElement(moduleDefinition.createFormComponent, {
+            initialName: createNewInitialName,
+            onSuccess: handleCreateSuccess,
+            onCancel: () => setCreateNewModalOpen(false),
+            fetchDataUIAsync,
+            accessToken,
+            createRecord: moduleDefinition.createRecord,
+        }) })) : null;
+    const addButton = showAddButton && moduleDefinition?.createFormComponent ? (_jsx(Button, { icon: _jsx(PlusOutlined, {}), onMouseDown: (e) => e.preventDefault(), onClick: () => {
+            setCreateNewInitialName('');
+            setCreateNewModalOpen(true);
+        }, disabled: disabled })) : null;
+    const searchButton = (onClickFn) => (_jsx(Button, { icon: _jsx(SearchOutlined, {}), onMouseDown: (e) => e.preventDefault(), onClick: onClickFn, disabled: disabled }));
+    // ─── Shared: catalog modal ────────────────────────────────────────────────────
+    const catalogModalContent = (_jsx(DraggableModal, { open: catalogModalOpen, title: moduleDefinition?.modalTitle ||
+            `Vybrat z modulu: ${moduleDefinition?.moduleName}`, width: moduleDefinition?.modalWidth || 800, onCancel: () => {
+            setCatalogModalOpen(false);
+            setCatalogFilter('');
+            // Pokud uživatel zavřel modal bez výběru a text není katalogově propojený, commitni ho
+            if (allowFreeText && inputTextRef.current && isLinkedRef.current !== true) {
+                setTimeout(() => handleFreeTextCommit(inputTextRef.current), 0);
+            }
+        }, maskClosable: false, getContainer: getContainer, zIndex: 99999999, footer: null, children: allItemsLoading ? (_jsx("div", { style: { padding: 24, textAlign: 'center' }, children: "Na\u010D\u00EDt\u00E1n\u00ED..." })) : (_jsxs(_Fragment, { children: [_jsx(Input, { prefix: _jsx(SearchOutlined, { style: { color: '#bfbfbf' } }), placeholder: "Hledat...", value: catalogFilter, onChange: (e) => setCatalogFilter(e.target.value), allowClear: true, style: { marginBottom: 8 } }), _jsx("div", { className: "ag-theme-alpine", style: { height: 400, width: '100%' }, children: _jsx(AgGridReact, { columnDefs: moduleDefinition?.columnDefs || [], rowData: allItems, quickFilterText: catalogFilter, onRowDoubleClicked: (params) => {
+                            handleCatalogModalSelect(params);
+                            setCatalogFilter('');
+                        } }) })] })) }));
+    // ─── Render: catalog-only mód ─────────────────────────────────────────────────
+    if (!allowFreeText) {
+        const vf = moduleDefinition?.valueField || 'id';
+        const currentId = value && typeof value === 'object' ? value[vf] : value;
+        return (_jsxs("div", { style: { display: 'flex', gap: 4, ...style }, children: [_jsx(Select, { style: { flex: 1 }, value: currentId, options: catalogOptions, loading: allItemsLoading, showSearch: true, filterOption: (input, option) => String(option?.label || '')
+                        .toLowerCase()
+                        .includes(input.toLowerCase()), onChange: handleCatalogSelectChange, getPopupContainer: () => document.body, dropdownStyle: { zIndex: 9999 }, placeholder: placeholder, disabled: disabled }), addButton, searchButton(() => {
+                    catalogModalOpenRef.current = true;
+                    setCatalogModalOpen(true);
+                }), catalogModalContent, createNewModalContent] }));
+    }
+    // ─── Render: free-text mód ────────────────────────────────────────────────────
+    return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 4 }, children: [_jsxs("div", { style: { display: 'flex', gap: 4, alignItems: 'center', ...style }, children: [_jsxs("div", { ref: freeTextWrapperRef, style: { flex: 1, position: 'relative' }, children: [moduleDefinition?.detailPanel && showArrow && (_jsx(DownOutlined, { onMouseDown: (e) => e.preventDefault(), onClick: () => selectedItem && setDetailOpen((v) => !v), style: {
+                                    position: 'absolute',
+                                    left: -18,
+                                    top: '50%',
+                                    transform: `translateY(-50%) rotate(${detailOpen ? 180 : 0}deg)`,
+                                    transition: 'transform 0.2s',
+                                    fontSize: 11,
+                                    cursor: selectedItem ? 'pointer' : 'default',
+                                    color: selectedItem ? 'rgba(0,0,0,0.45)' : '#d9d9d9',
+                                    zIndex: 1,
+                                    pointerEvents: selectedItem ? 'auto' : 'none',
+                                } })), _jsx(AutoComplete, { style: { width: '100%' }, value: inputText, options: suggestions, open: dropdownOpen && suggestions.length > 0, defaultActiveFirstOption: false, allowClear: true, onChange: (text) => {
+                                    setInputText(text || '');
+                                    setIsLinked(null);
+                                    setSelectedItem(null);
+                                    setDetailOpen(false);
+                                }, onSelect: handleAutoCompleteSelect, onFocus: () => setDropdownOpen(true), onBlur: () => {
+                                    setTimeout(() => setDropdownOpen(false), 150);
+                                    handleBlur();
+                                }, notFoundContent: allItemsLoading ? 'Načítání...' : null, placeholder: placeholder, disabled: disabled, getPopupContainer: () => document.body, dropdownStyle: { zIndex: 9999 } })] }), !createNewOnMismatch && isLinked === true && (_jsx(LinkOutlined, { style: { color: '#52c41a', alignSelf: 'center', fontSize: 14, flexShrink: 0 } })), !createNewOnMismatch && isLinked === false && inputText && (_jsx(EditOutlined, { style: { color: '#faad14', alignSelf: 'center', fontSize: 14, flexShrink: 0 } })), addButton, searchButton(() => {
+                        catalogModalOpenRef.current = true;
+                        setCatalogModalOpen(true);
+                    })] }), moduleDefinition?.detailPanel && detailOpen && selectedItem && (_jsx(DetailPanel, { definition: moduleDefinition.detailPanel, item: selectedItem })), catalogModalContent, createNewModalContent, _jsx(DraggableModal, { open: multiMatchModalOpen, title: "Nalezeno v\u00EDce shod", width: moduleDefinition?.modalWidth || 800, onCancel: () => setMultiMatchModalOpen(false), maskClosable: false, getContainer: getContainer, zIndex: 99999999, footer: null, children: _jsx("div", { className: "ag-theme-alpine", style: { height: 400, width: '100%' }, children: _jsx(AgGridReact, { columnDefs: moduleDefinition?.columnDefs || [], rowData: multiMatchData, onRowDoubleClicked: handleMultiMatchSelect }) }) })] }));
 };
 export default ModuleDropdownList;
 //# sourceMappingURL=index.js.map