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

package/index.jsx

@@ -1,395 +1,653 @@
-/* eslint-disable */
-import React, { useEffect, useRef, useCallback } from 'react';
-import Input from 'antd/es/input';
-import Select from 'antd/es/select';
-import AutoComplete from 'antd/es/auto-complete';
-import Button from 'antd/es/button';
-import { SearchOutlined } from '@ant-design/icons';
-import AgGrid from '@bit.rhplus/ag-grid';
-import { useAtom } from 'jotai';
-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
-  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) 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);
-    }
-
-    // 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);
-    }
-  };
-
-  // Přidání vybrané položky do nedávných položek při načtení
-  useEffect(() => {
-    if (selectedItem && moduleDefinition) {
-      addToRecentItems(selectedItem);
-    }
-  }, [selectedItem, moduleDefinition, addToRecentItems]);
-
-  // Výběr položky přímo ze Select dropdown
-  const handleSelectChange = (selectedId) => {
-    if (!selectedId) {
-      clearSelection();
-      if (typeof onChange === 'function') {
-        onChange(null, null);
-      }
-    } 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);
-        }
-      }
-    }
-  };
-
-  // 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 <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í...';
-    }
-    
-    if (moduleDetailQuery?.data) {
-      return (
-        <div className="option-item">
-          <div className="option-avatar">
-            {displayValueText.charAt(0)}
-          </div>
-          <div className="option-content">
-            <div className="option-name">{displayValueText}</div>
-            <div className="option-email">
-              {moduleDetailQuery.data.email || '-'}
-            </div>
-          </div>
-        </div>
-      );
-    }
-    
-    return `${value} (nenačteno)`;
-  };
-
-  return (
-    <div
-      className="module-input-container"
-      style={processedStyle}
-      ref={containerRef}
-    >
-      <div className="simple-select-container">
-        {allowFreeText ? (
-          <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);
-              }
-            }}
-          />
-        ) : (
-          <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={
-              <svg
-                className="select-arrow-icon"
-                width="12"
-                height="12"
-                viewBox="0 0 12 12"
-                fill="none"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M2 4L6 8L10 4"
-                  stroke="#bfbfbf"
-                  strokeWidth="2.5"
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                />
-              </svg>
-            }
-            optionLabelProp="label"
-            listItemHeight={32}
-            listHeight={256}
-            dropdownRender={(menu) => (
-              <div className="select-dropdown-container">
-                {displayMode === 'full' && (
-                  <div className="search-box">
-                    <Input
-                      placeholder="Search"
-                      value={dropdownSearchQuery}
-                      onChange={(e) => handleDropdownSearchChange(e.target.value)}
-                      prefix={<SearchOutlined />}
-                      className="dropdown-search-input"
-                    />
-                  </div>
-                )}
-                {menu}
-                <div className="new-customer-item">
-                  <div className="plus-icon">+</div>
-                  <span>New</span>
-                </div>
-              </div>
-            )}
-          >
-            {selectOptions.map((option) => (
-              <Option
-                key={option.id}
-                value={option.id}
-                label={option.name}
-              >
-                {option.name}
-              </Option>
-            ))}
-
-            {value && !selectOptions.some((option) => option.id === value) && (
-              <Option key={value} value={value} label={displayValueText}>
-                {renderDetailOption()}
-              </Option>
-            )}
-          </Select>
-        )}
-
-        <Button
-          icon={<SearchOutlined />}
-          className="search-button"
-          onClick={openModal}
-          type="primary"
-        />
-      </div>
-
-      {/* DraggableModal pro zobrazení tabulky */}
-      <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 [
-            <Button
-              key="cancel"
-              onClick={closeModal}
-              style={{ marginRight: '10px', width: 'auto' }}
-            >
-              Zavřít
-            </Button>,
-          ];
-        }}
-      >
-        <Input
-          placeholder="Filtrovat..."
-          value={searchQuery}
-          onChange={(e) => handleSearchChange(e.target.value)}
-          prefix={<SearchOutlined />}
-          allowClear
-        />
-
-        {isLoading ? (
-          <div className="text-align-center padding">Načítání...</div>
-        ) : (
-          <div
-            style={{ height: 400, width: '100%' }}
-          >
-            <AgGrid
-              theme="themeAlpine"
-              rowData={rowData}
-              columnDefs={moduleDefinition.columnDefs}
-              defaultColDef={{
-                sortable: true,
-                filter: true,
-                resizable: true,
-              }}
-              onCellDoubleClicked={handleModalItemSelect}
-              rowSelection="single"
-              enableCellChangeFlash={false}
-            />
-          </div>
-        )}
-      </DraggableModal>
-    </div>
-  );
-};
-
-export default ModuleDropdownList;
+/* eslint-disable */
+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 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 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 (
+    <div
+      style={{
+        background: '#fafafa',
+        border: '1px solid #d9d9d9',
+        borderRadius: 6,
+        padding: '8px 12px',
+        display: 'grid',
+        gridTemplateColumns: '1fr 1fr',
+        gap: '4px 16px',
+        fontSize: 12,
+      }}
+    >
+      {definition.fields.map((f) => (
+        <div key={f.key} style={{ display: 'flex', gap: 4, minWidth: 0 }}>
+          <span style={{ color: '#8c8c8c', flexShrink: 0 }}>{f.label}:</span>
+          <span
+            style={{
+              fontWeight: 500,
+              overflow: 'hidden',
+              textOverflow: 'ellipsis',
+              whiteSpace: 'nowrap',
+              color: item[f.key] ? 'inherit' : '#bfbfbf',
+            }}
+          >
+            {item[f.key] ?? '—'}
+          </span>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+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 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;
+
+    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;
+      }
+    }
+
+    // Fallback: fetchById pro položky, které nejsou v seznamu
+    if (moduleDefinition?.fetchById) {
+      moduleDefinition.fetchById(value, fetchDataUIAsync, accessToken).then((item) => {
+        if (item) {
+          showItem(item);
+        }
+      });
+    }
+  }, [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);
+      }
+      setCreateNewModalOpen(false);
+    },
+    [moduleName, moduleDefinition, commitCatalogItem]
+  );
+
+  // ─── Catalog-only: výběr ze Select ───────────────────────────────────────────
+  const handleCatalogSelectChange = useCallback(
+    (selectedId) => {
+      if (!selectedId) {
+        if (typeof onChange === 'function') onChange(null, null);
+        return;
+      }
+      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();
+        }
+      } 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;
+    }
+    // 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);
+    }
+  }, [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 ? (
+    <DraggableModal
+      open={createNewModalOpen}
+      title={moduleDefinition.createModalTitle || 'Nový záznam'}
+      width={moduleDefinition.createModalWidth || 600}
+      onCancel={() => setCreateNewModalOpen(false)}
+      maskClosable={false}
+      getContainer={getContainer}
+      zIndex={99999999}
+      footer={null}
+    >
+      {React.createElement(moduleDefinition.createFormComponent, {
+        initialName: createNewInitialName,
+        onSuccess: handleCreateSuccess,
+        onCancel: () => setCreateNewModalOpen(false),
+        fetchDataUIAsync,
+        accessToken,
+        createRecord: moduleDefinition.createRecord,
+      })}
+    </DraggableModal>
+  ) : null;
+
+  const addButton = showAddButton && moduleDefinition?.createFormComponent ? (
+    <Button
+      icon={<PlusOutlined />}
+      onMouseDown={(e) => e.preventDefault()}
+      onClick={() => {
+        setCreateNewInitialName('');
+        setCreateNewModalOpen(true);
+      }}
+      disabled={disabled}
+    />
+  ) : null;
+
+  const searchButton = (onClickFn) => (
+    <Button
+      icon={<SearchOutlined />}
+      onMouseDown={(e) => e.preventDefault()}
+      onClick={onClickFn}
+      disabled={disabled}
+    />
+  );
+
+  // ─── Shared: catalog modal ────────────────────────────────────────────────────
+  const catalogModalContent = (
+    <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}
+    >
+      {allItemsLoading ? (
+        <div style={{ padding: 24, textAlign: 'center' }}>Načítání...</div>
+      ) : (
+        <>
+          <Input
+            prefix={<SearchOutlined style={{ color: '#bfbfbf' }} />}
+            placeholder="Hledat..."
+            value={catalogFilter}
+            onChange={(e) => setCatalogFilter(e.target.value)}
+            allowClear
+            style={{ marginBottom: 8 }}
+          />
+          <div className="ag-theme-alpine" style={{ height: 400, width: '100%' }}>
+            <AgGridReact
+              columnDefs={moduleDefinition?.columnDefs || []}
+              rowData={allItems}
+              quickFilterText={catalogFilter}
+              onRowDoubleClicked={(params) => {
+                handleCatalogModalSelect(params);
+                setCatalogFilter('');
+              }}
+            />
+          </div>
+        </>
+      )}
+    </DraggableModal>
+  );
+
+  // ─── Render: catalog-only mód ─────────────────────────────────────────────────
+  if (!allowFreeText) {
+    const vf = moduleDefinition?.valueField || 'id';
+    const currentId =
+      value && typeof value === 'object' ? value[vf] : value;
+
+    return (
+      <div style={{ display: 'flex', gap: 4, ...style }}>
+        <Select
+          style={{ flex: 1 }}
+          value={currentId}
+          options={catalogOptions}
+          loading={allItemsLoading}
+          showSearch
+          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}
+      </div>
+    );
+  }
+
+  // ─── Render: free-text mód ────────────────────────────────────────────────────
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
+      {/* Hlavní řádek — omezený stylem z props */}
+      <div style={{ display: 'flex', gap: 4, alignItems: 'center', ...style }}>
+        <div ref={freeTextWrapperRef} style={{ flex: 1, position: 'relative' }}>
+          {moduleDefinition?.detailPanel && showArrow && (
+            <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',
+              }}
+            />
+          )}
+          <AutoComplete
+            style={{ width: '100%' }}
+            value={inputText}
+            options={suggestions}
+            open={dropdownOpen && suggestions.length > 0}
+            defaultActiveFirstOption={false}
+            allowClear
+            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 }}
+          />
+        </div>
+
+        {!createNewOnMismatch && isLinked === true && (
+          <LinkOutlined style={{ color: '#52c41a', alignSelf: 'center', fontSize: 14, flexShrink: 0 }} />
+        )}
+        {!createNewOnMismatch && isLinked === false && inputText && (
+          <EditOutlined style={{ color: '#faad14', alignSelf: 'center', fontSize: 14, flexShrink: 0 }} />
+        )}
+
+        {addButton}
+        {searchButton(() => {
+          catalogModalOpenRef.current = true;
+          setCatalogModalOpen(true);
+        })}
+      </div>
+
+      {/* Detail panel — 100% šířky parent containeru, nezávisle na šířce inputu */}
+      {moduleDefinition?.detailPanel && detailOpen && selectedItem && (
+        <DetailPanel definition={moduleDefinition.detailPanel} item={selectedItem} />
+      )}
+
+      {catalogModalContent}
+      {createNewModalContent}
+
+      {/* Multi-match modal — více shod na zadaný text */}
+      <DraggableModal
+        open={multiMatchModalOpen}
+        title="Nalezeno více shod"
+        width={moduleDefinition?.modalWidth || 800}
+        onCancel={() => setMultiMatchModalOpen(false)}
+        maskClosable={false}
+        getContainer={getContainer}
+        zIndex={99999999}
+        footer={null}
+      >
+        <div className="ag-theme-alpine" style={{ height: 400, width: '100%' }}>
+          <AgGridReact
+            columnDefs={moduleDefinition?.columnDefs || []}
+            rowData={multiMatchData}
+            onRowDoubleClicked={handleMultiMatchSelect}
+          />
+        </div>
+      </DraggableModal>
+
+    </div>
+  );
+};
+
+export default ModuleDropdownList;
+/* eslint-enable */