@maxal_studio/kratosjs-react 1.0.0

package/dist/components/SectionField.js

@@ -0,0 +1,111 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React from 'react';
+import { FieldRenderer } from '../FieldRenderer';
+import { Icon } from './utils/Icon';
+import { ChevronRight, ChevronDown } from 'lucide-react';
+import { getFieldLayoutClasses } from './utils/layoutHelpers';
+// Section background by depth; no bg-muted — direct opacity scale for light and dark.
+const SECTION_BG_LIGHT = [
+    'bg-black/[0.04]',
+    'bg-black/[0.08]',
+    'bg-black/[0.12]',
+    'bg-black/[0.16]',
+    'bg-black/[0.20]',
+    'bg-black/[0.25]',
+    'bg-black/[0.30]',
+    'bg-black/[0.35]',
+];
+const SECTION_BG_DARK = [
+    'dark:bg-black/35',
+    'dark:bg-black/50',
+    'dark:bg-black/62',
+    'dark:bg-black/72',
+    'dark:bg-black/80',
+    'dark:bg-black/87',
+    'dark:bg-black/93',
+    'dark:bg-black',
+];
+export function SectionField({ heading, description, icon, collapsible, collapsed: initialCollapsed, compact, aside, mode, schema, columns, disabled, value, _recordData, operation, apiBaseUrl, resource, isLastSectionInParent, sectionDepth = 0, }) {
+    // Default to collapsed if not specified
+    const [isCollapsed, setIsCollapsed] = React.useState(initialCollapsed !== undefined ? initialCollapsed : true);
+    // In view mode, sections are always expanded and not collapsible
+    const isViewMode = mode === 'view';
+    const viewCollapsed = false;
+    if (!heading && !description) {
+        // Section without header - just a visual separator
+        return _jsx("div", { className: "my-6 border-t border-gray-200 dark:border-gray-700" });
+    }
+    const toggleCollapse = () => {
+        if (collapsible && !isViewMode) {
+            setIsCollapsed(!isCollapsed);
+        }
+    };
+    // In view mode, use viewCollapsed (always false)
+    const displayCollapsed = isViewMode ? viewCollapsed : isCollapsed;
+    // In view mode, use _recordData if provided, otherwise use value
+    const recordData = mode === 'view' && _recordData ? _recordData : value || {};
+    // Get layout classes for nested fields
+    const fieldLayoutClasses = getFieldLayoutClasses(columns);
+    // At each level, the last section gets smaller padding and no border; others get full padding and border.
+    // Background gets darker for each nesting level; supports arbitrary depth (capped at array length).
+    const hasNestedSections = schema && Array.isArray(schema) && schema.some((f) => f.type === 'section');
+    const isLast = Boolean(isLastSectionInParent);
+    const depthIndex = Math.min(sectionDepth, SECTION_BG_LIGHT.length - 1);
+    const bgByDepth = `${SECTION_BG_LIGHT[depthIndex]} ${SECTION_BG_DARK[depthIndex]}`;
+    // Dark mode uses solid colors from styles.css (.dark .section-depth-bg[data-section-depth="1"] etc.)
+    const bodyWrapperClass = `${bgByDepth} section-depth-bg`;
+    const bodyWrapperData = { 'data-section-depth': depthIndex + 1 }; // CSS uses "1"–"8"
+    // Last section: same padding as others, only border-bottom removed.
+    const bodyClasses = isLast
+        ? `rounded-lg ${bodyWrapperClass} p-4 border border-gray-100 dark:border-gray-700/50 border-b-0 mb-2`
+        : `rounded-lg ${bodyWrapperClass} p-4 border border-gray-100 dark:border-gray-700/50 mb-2`;
+    const outerClasses = hasNestedSections && !isLast ? (compact ? 'my-4' : 'my-6') : '';
+    return (_jsx("div", { className: outerClasses, children: _jsxs("div", { className: `${aside ? 'flex gap-6' : ''}`, children: [_jsxs("div", { className: `${aside ? 'w-1/3' : 'mb-4'}`, children: [_jsxs("div", { className: "flex items-center gap-2", children: [icon && _jsx(Icon, { name: icon, size: 20, className: "text-gray-500 dark:text-gray-400" }), heading && (_jsxs("h3", { className: `font-semibold ${aside ? 'text-lg' : 'text-xl'} text-gray-900 dark:text-gray-100 ${collapsible && !isViewMode
+                                        ? 'cursor-pointer hover:text-gray-700 dark:hover:text-gray-300 flex items-center gap-2'
+                                        : ''}`, onClick: toggleCollapse, children: [heading, collapsible &&
+                                            !isViewMode &&
+                                            (displayCollapsed ? (_jsx(ChevronRight, { size: 16, className: "text-gray-500 dark:text-gray-400" })) : (_jsx(ChevronDown, { size: 16, className: "text-gray-500 dark:text-gray-400" })))] }))] }), description && _jsx("p", { className: "mt-1 text-sm text-gray-600 dark:text-gray-400", children: description })] }), aside ? (_jsx("div", { className: "flex-1", children: schema &&
+                        Array.isArray(schema) &&
+                        !displayCollapsed &&
+                        (() => {
+                            const lastSectionIndex = schema.reduce((last, f, i) => (f.type === 'section' ? i : last), -1);
+                            return (_jsx("div", { className: bodyClasses, ...bodyWrapperData, children: _jsx("div", { className: fieldLayoutClasses, children: schema.map((field, index) => {
+                                        const isSection = field.type === 'section';
+                                        const nestedField = {
+                                            ...field,
+                                            disabled: disabled || field.disabled,
+                                            mode: mode || field.mode,
+                                            // Only the single section at lastSectionIndex is "last"; others get false so border shows.
+                                            isLastSectionInParent: isSection
+                                                ? lastSectionIndex >= 0 && index === lastSectionIndex
+                                                : undefined,
+                                            sectionDepth: isSection ? sectionDepth + 1 : undefined,
+                                        };
+                                        const nestedValue = mode === 'view' && field.name
+                                            ? recordData[field.name]
+                                            : undefined;
+                                        return (_jsx(FieldRenderer, { field: nestedField, mode: mode, value: nestedValue, operation: operation, apiBaseUrl: apiBaseUrl, resource: resource }, index));
+                                    }) }) }));
+                        })() })) : (_jsxs(_Fragment, { children: [schema &&
+                            Array.isArray(schema) &&
+                            !displayCollapsed &&
+                            (() => {
+                                const lastSectionIndex = schema.reduce((last, f, i) => (f.type === 'section' ? i : last), -1);
+                                return (_jsx("div", { className: !isLast && hasNestedSections ? `mt-4 ${bodyClasses}` : bodyClasses, ...bodyWrapperData, children: _jsx("div", { className: fieldLayoutClasses, children: schema.map((field, index) => {
+                                            const isSection = field.type === 'section';
+                                            const nestedField = {
+                                                ...field,
+                                                disabled: disabled || field.disabled,
+                                                mode: mode || field.mode,
+                                                isLastSectionInParent: isSection
+                                                    ? lastSectionIndex >= 0 && index === lastSectionIndex
+                                                    : undefined,
+                                                sectionDepth: isSection ? sectionDepth + 1 : undefined,
+                                            };
+                                            const nestedValue = mode === 'view' && field.name
+                                                ? recordData[field.name]
+                                                : undefined;
+                                            return (_jsx(FieldRenderer, { field: nestedField, mode: mode, value: nestedValue, operation: operation, apiBaseUrl: apiBaseUrl, resource: resource }, index));
+                                        }) }) }));
+                            })(), hasNestedSections && !isLast && (_jsx("div", { className: "mt-4 border-t border-gray-200 dark:border-gray-700" }))] }))] }) }));
+}

package/dist/components/SelectField.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { FieldProps } from '../types';
+/**
+ * Select field component
+ * Renders single or multi-select dropdowns with optional creatable functionality
+ * Supports relationship-based data fetching from API
+ */
+export declare function SelectField(props: FieldProps): React.JSX.Element;

package/dist/components/SelectField.js

@@ -0,0 +1,523 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useRef, useEffect } from 'react';
+import { useFormContext, useWatch } from 'react-hook-form';
+import { getFieldError } from '../utils/fieldErrors';
+import { useValidation } from '../hooks/useValidation';
+import { cn } from '../utils/classNames';
+import { HintDisplay } from './utils/HintDisplay';
+import { Icon } from './utils/Icon';
+import { ResourceFormModal } from './modals/ResourceFormModal';
+import { executeSerializedFunction } from '../runtime/serializedFunctions';
+import { ViewFieldWrapper } from './utils/ViewFieldWrapper';
+import { formatSelectLabel } from '../utils/formatValue';
+import { authenticatedFetch } from '../api/authenticatedFetch';
+import { translate } from '../i18n/activeLocale';
+/**
+ * Component for rendering SelectField in view mode with relationship data fetching
+ */
+function SelectFieldViewMode({ value, isMultiple, relationship, label, optionLabelFormatter, apiBaseUrl, }) {
+    const [displayValue, setDisplayValue] = useState('-');
+    const [isLoading, setIsLoading] = useState(false);
+    useEffect(() => {
+        const fetchRelationshipData = async () => {
+            if (!value || (isMultiple && (!Array.isArray(value) || value.length === 0))) {
+                setDisplayValue('-');
+                return;
+            }
+            // Extract IDs from value
+            const valueIds = isMultiple
+                ? (Array.isArray(value) ? value : []).map((v) => {
+                    if (typeof v === 'object' && v !== null) {
+                        return v._id || v.id || String(v);
+                    }
+                    return String(v);
+                })
+                : typeof value === 'object' && value !== null
+                    ? [value._id || value.id || String(value)]
+                    : [String(value)];
+            if (valueIds.length === 0) {
+                setDisplayValue('-');
+                return;
+            }
+            // If all values are already objects with titleAttribute, use them directly
+            if (isMultiple && Array.isArray(value)) {
+                const allHaveTitle = value.every((v) => typeof v === 'object' && v !== null && v[relationship.titleAttribute]);
+                if (allHaveTitle) {
+                    const formatted = value
+                        .map((v) => {
+                        const title = v[relationship.titleAttribute] || String(v);
+                        if (optionLabelFormatter) {
+                            const formattedTitle = executeSerializedFunction(optionLabelFormatter, v._id || v.id || String(v), v);
+                            return formattedTitle !== null && formattedTitle !== undefined
+                                ? String(formattedTitle)
+                                : title;
+                        }
+                        return title;
+                    })
+                        .join(', ');
+                    setDisplayValue(formatted);
+                    return;
+                }
+            }
+            else if (!isMultiple &&
+                typeof value === 'object' &&
+                value !== null &&
+                value[relationship.titleAttribute]) {
+                const title = value[relationship.titleAttribute];
+                if (optionLabelFormatter) {
+                    const formattedTitle = executeSerializedFunction(optionLabelFormatter, value._id || value.id || String(value), value);
+                    setDisplayValue(formattedTitle !== null && formattedTitle !== undefined ? String(formattedTitle) : title);
+                }
+                else {
+                    setDisplayValue(title);
+                }
+                return;
+            }
+            // Need to fetch records
+            setIsLoading(true);
+            try {
+                const resourceSlug = relationship.resource || relationship.name;
+                const apiUrl = apiBaseUrl;
+                const fetchPromises = valueIds.map(async (id) => {
+                    try {
+                        const response = await authenticatedFetch(`${apiUrl}/${resourceSlug}/${id}`, {
+                            headers: {},
+                        }, apiUrl.substring(0, apiUrl.lastIndexOf('/')));
+                        if (response.ok) {
+                            const result = await response.json();
+                            const record = result.data || result;
+                            return { id, record };
+                        }
+                    }
+                    catch (error) {
+                        console.error(`Error fetching record ${id}:`, error);
+                    }
+                    return null;
+                });
+                const results = await Promise.all(fetchPromises);
+                const validResults = results.filter((r) => r !== null);
+                if (validResults.length === 0) {
+                    setDisplayValue(valueIds.join(', '));
+                    return;
+                }
+                // Format the display value
+                const formatted = validResults
+                    .map(({ id, record }) => {
+                    const title = record[relationship.titleAttribute] || id;
+                    if (optionLabelFormatter) {
+                        const formattedTitle = executeSerializedFunction(optionLabelFormatter, id, record);
+                        return formattedTitle !== null && formattedTitle !== undefined
+                            ? String(formattedTitle)
+                            : title;
+                    }
+                    return title;
+                })
+                    .join(', ');
+                setDisplayValue(formatted);
+            }
+            catch (error) {
+                console.error('Error fetching relationship data:', error);
+                // Fallback to showing IDs
+                setDisplayValue(valueIds.join(', '));
+            }
+            finally {
+                setIsLoading(false);
+            }
+        };
+        fetchRelationshipData();
+    }, [value, isMultiple, relationship, optionLabelFormatter, apiBaseUrl]);
+    if (isLoading) {
+        return (_jsx(ViewFieldWrapper, { label: label, children: _jsx("span", { className: "text-fg-secondary", children: translate('core:select.loading') }) }));
+    }
+    return (_jsx(ViewFieldWrapper, { label: label, children: _jsx("span", { dangerouslySetInnerHTML: { __html: displayValue || '-' } }) }));
+}
+/**
+ * Select field component
+ * Renders single or multi-select dropdowns with optional creatable functionality
+ * Supports relationship-based data fetching from API
+ */
+export function SelectField(props) {
+    // View mode: render formatted display
+    if (props.mode === 'view') {
+        const value = props.value;
+        const isMultiple = props.isMultiple || props.multiple;
+        const hasRelationship = !!props.relationship;
+        // For relationship-based selects, we need to fetch the related records if value is just an ID
+        if (hasRelationship && props.relationship) {
+            // Use a component that fetches relationship data
+            return (_jsx(SelectFieldViewMode, { value: value, isMultiple: isMultiple, relationship: props.relationship, label: props.label, optionLabelFormatter: props.optionLabelFormatter, apiBaseUrl: props.apiBaseUrl }));
+        }
+        // For non-relationship selects, use static options
+        const displayValue = formatSelectLabel(value, props.options, isMultiple);
+        return _jsx(ViewFieldWrapper, { label: props.label, children: displayValue });
+    }
+    const { register, setValue, control, formState: { errors }, } = useFormContext();
+    const validation = useValidation(props.validation?.rules || [], props.operation, props.name);
+    const error = getFieldError(errors, props.name);
+    const hasError = !!error;
+    const isMultiple = props.isMultiple || props.multiple;
+    const isCreatable = props.creatable;
+    const isNative = props.native;
+    const hasRelationship = !!props.relationship;
+    // Watch current value for multi-select - let the form handle defaults
+    const rawValue = useWatch({ control, name: props.name });
+    // Normalize value: if it's an object (from edit mode), extract the ID
+    const normalizeValue = (value) => {
+        if (!value)
+            return isMultiple ? [] : '';
+        if (isMultiple) {
+            if (!Array.isArray(value))
+                return [];
+            return value.map((v) => {
+                if (typeof v === 'object' && v !== null) {
+                    return v._id || v.id || String(v);
+                }
+                return String(v);
+            });
+        }
+        else {
+            if (typeof value === 'object' && value !== null) {
+                return value._id || value.id || String(value);
+            }
+            return String(value);
+        }
+    };
+    const currentValue = normalizeValue(rawValue) || (isMultiple ? [] : '');
+    // Update form value if it was an object (normalize it to ID)
+    useEffect(() => {
+        if (rawValue && typeof rawValue === 'object' && !Array.isArray(rawValue)) {
+            const normalized = normalizeValue(rawValue);
+            if (normalized !== rawValue) {
+                setValue(props.name, normalized, { shouldValidate: false });
+            }
+        }
+        else if (rawValue && Array.isArray(rawValue) && rawValue.some((v) => typeof v === 'object')) {
+            const normalized = normalizeValue(rawValue);
+            setValue(props.name, normalized, { shouldValidate: false });
+        }
+    }, [rawValue, props.name, setValue]);
+    const [isOpen, setIsOpen] = useState(false);
+    const [searchTerm, setSearchTerm] = useState('');
+    const [inputValue, setInputValue] = useState('');
+    const [relationshipOptions, setRelationshipOptions] = useState({});
+    const [relationshipRecords, setRelationshipRecords] = useState({});
+    // Track which records were individually fetched (for edit mode) - these should be formatted
+    const [individuallyFetchedIds, setIndividuallyFetchedIds] = useState(new Set());
+    // Cache formatted labels for individually fetched records to prevent re-rendering
+    const [formattedLabels, setFormattedLabels] = useState({});
+    const [isLoadingRelationship, setIsLoadingRelationship] = useState(false);
+    const [showCreateModal, setShowCreateModal] = useState(false);
+    const dropdownRef = useRef(null);
+    // Format option label using custom formatter if provided
+    const formatOptionLabel = (value, label, record) => {
+        if (props.optionLabelFormatter && record) {
+            const result = executeSerializedFunction(props.optionLabelFormatter, value, record);
+            return result !== null && result !== undefined ? String(result) : label;
+        }
+        return label;
+    };
+    // Fetch relationship data when component mounts or search term changes
+    useEffect(() => {
+        if (!hasRelationship || !props.relationship)
+            return;
+        const fetchRelationshipData = async () => {
+            setIsLoadingRelationship(true);
+            try {
+                const { resource, titleAttribute } = props.relationship;
+                const resourceSlug = resource || props.relationship.name;
+                if (!resourceSlug) {
+                    throw new Error('Resource slug is required for relationship data fetching');
+                }
+                const apiBaseUrl = props.apiBaseUrl;
+                const url = `${apiBaseUrl}/${resourceSlug}/list`;
+                const body = { perPage: 50 };
+                if (searchTerm) {
+                    body.search = searchTerm;
+                }
+                const response = await authenticatedFetch(url, {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify(body),
+                }, apiBaseUrl);
+                if (!response.ok) {
+                    throw new Error(`Failed to fetch relationship data: ${response.status}`);
+                }
+                const result = await response.json();
+                const data = result.data || [];
+                const options = {};
+                const records = {};
+                data.forEach((item) => {
+                    const id = item._id || item.id;
+                    const title = item[titleAttribute] || id;
+                    options[id] = title;
+                    records[id] = item;
+                });
+                // Replace with API results so the list reflects current search; preserve labels for selected value(s) so chips still display
+                const valueIds = isMultiple
+                    ? Array.isArray(currentValue)
+                        ? currentValue
+                        : []
+                    : currentValue
+                        ? [currentValue]
+                        : [];
+                setRelationshipOptions(prev => {
+                    const next = { ...options };
+                    valueIds.forEach((id) => {
+                        if (prev[id])
+                            next[id] = prev[id];
+                    });
+                    return next;
+                });
+                // Replace records with API results; preserve individually fetched ones so formatted labels are kept
+                setRelationshipRecords(prev => {
+                    const next = { ...records };
+                    valueIds.forEach((id) => {
+                        if (individuallyFetchedIds.has(id) && prev[id])
+                            next[id] = prev[id];
+                    });
+                    return next;
+                });
+            }
+            catch (error) {
+                console.error('Error fetching relationship data:', error);
+                setRelationshipOptions({});
+            }
+            finally {
+                setIsLoadingRelationship(false);
+            }
+        };
+        const timeoutId = setTimeout(fetchRelationshipData, searchTerm ? 300 : 0);
+        return () => clearTimeout(timeoutId);
+    }, [hasRelationship, searchTerm, props.relationship, individuallyFetchedIds, currentValue, isMultiple]);
+    // Fetch related record(s) when editing (if we have a current value but no record data)
+    useEffect(() => {
+        if (!hasRelationship || !props.relationship || !currentValue)
+            return;
+        const valueIds = isMultiple ? (Array.isArray(currentValue) ? currentValue : []) : [currentValue];
+        const missingIds = valueIds.filter((id) => !relationshipRecords[id]);
+        if (missingIds.length > 0) {
+            const fetchRelatedRecords = async () => {
+                try {
+                    const { resource, titleAttribute } = props.relationship;
+                    const resourceSlug = resource || props.relationship.name;
+                    const apiBaseUrl = props.apiBaseUrl;
+                    const fetchPromises = missingIds.map(async (id) => {
+                        try {
+                            const response = await authenticatedFetch(`${apiBaseUrl}/${resourceSlug}/${id}`, {
+                                headers: {},
+                            }, apiBaseUrl);
+                            if (response.ok) {
+                                const result = await response.json();
+                                // Handle new response structure: { data, metadata }
+                                const record = result.data || result;
+                                return { id, record };
+                            }
+                        }
+                        catch (error) {
+                            console.error(`Error fetching record ${id}:`, error);
+                        }
+                        return null;
+                    });
+                    const results = await Promise.all(fetchPromises);
+                    const newOptions = { ...relationshipOptions };
+                    const newRecords = { ...relationshipRecords };
+                    const newFormattedLabels = {};
+                    results.forEach(result => {
+                        if (result) {
+                            const { id, record } = result;
+                            const title = record[titleAttribute] || id;
+                            newOptions[id] = title;
+                            newRecords[id] = record;
+                            // Pre-format and cache the label for this individually fetched record
+                            const formatted = formatOptionLabel(id, title, record);
+                            newFormattedLabels[id] = formatted;
+                        }
+                    });
+                    setRelationshipOptions(newOptions);
+                    setRelationshipRecords(newRecords);
+                    // Mark these records as individually fetched and cache their formatted labels
+                    setIndividuallyFetchedIds(prev => {
+                        const newSet = new Set(prev);
+                        results.forEach(result => {
+                            if (result)
+                                newSet.add(result.id);
+                        });
+                        return newSet;
+                    });
+                    setFormattedLabels(prev => ({ ...prev, ...newFormattedLabels }));
+                }
+                catch (error) {
+                    console.error('Error fetching related records:', error);
+                }
+            };
+            fetchRelatedRecords();
+        }
+    }, [hasRelationship, currentValue, relationshipRecords, props.relationship, isMultiple]);
+    // Close dropdown when clicking outside
+    useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+                setIsOpen(false);
+                setSearchTerm('');
+                setInputValue('');
+            }
+        };
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => document.removeEventListener('mousedown', handleClickOutside);
+    }, []);
+    // Use relationship options if available, otherwise use static options
+    const effectiveOptions = hasRelationship ? relationshipOptions : props.options || {};
+    // If native or not multiple and not creatable and not relationship, use native select
+    if (isNative || (!isMultiple && !isCreatable && !hasRelationship)) {
+        return (_jsxs("div", { className: "mb-4", children: [props.label && (_jsxs("label", { htmlFor: props.name, className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1", children: [props.label, validation.required && _jsx("span", { className: "text-red-500 dark:text-red-400 ml-1", children: "*" })] })), _jsxs("select", { id: props.name, ...register(props.name, validation), disabled: props.disabled, multiple: isMultiple, className: cn('w-full px-3 py-2 border rounded-lg shadow-sm', 'k-input', 'focus:outline-none focus:ring-2 focus:ring-ring', 'transition duration-150 ease-in-out', hasError && 'border-red-500 dark:border-red-400 focus:ring-red-500 dark:focus:ring-red-400', props.disabled && 'opacity-60 cursor-not-allowed', isMultiple && 'min-h-[120px]'), children: [props.placeholder && !isMultiple && props.selectablePlaceholder !== false && (_jsx("option", { value: "", children: props.placeholder })), effectiveOptions &&
+                            Object.entries(effectiveOptions).map(([value, label]) => (_jsx("option", { value: value, children: label }, value)))] }), hasError && _jsx("p", { className: "mt-1 text-sm text-red-600 dark:text-red-400", children: error?.message }), props.helperText && (_jsx("p", { className: "mt-1 text-sm text-gray-500 dark:text-gray-400", children: props.helperText })), !hasError && _jsx(HintDisplay, { hint: props.hint, hintIcon: props.hintIcon, hintColor: props.hintColor }), isMultiple && !hasError && (_jsx("p", { className: "mt-1 text-xs text-gray-500 dark:text-gray-400", children: "Hold Ctrl/Cmd to select multiple options" }))] }));
+    }
+    // Enhanced multi-select with chips
+    const selectedValues = isMultiple
+        ? Array.isArray(currentValue)
+            ? currentValue.filter((v) => typeof v === 'string')
+            : []
+        : currentValue && typeof currentValue === 'string'
+            ? [currentValue]
+            : [];
+    const optionEntries = Object.entries(effectiveOptions);
+    // Filter options based on search term
+    // For relationship-based selects, the API already filters the results, so skip client-side filtering
+    const filteredOptions = hasRelationship
+        ? optionEntries
+        : optionEntries.filter(([value, label]) => {
+            const matchesSearch = !searchTerm || label.toLowerCase().includes(searchTerm.toLowerCase());
+            return matchesSearch;
+        });
+    // Check if we can create a new option
+    const canCreateNew = isCreatable &&
+        searchTerm &&
+        !optionEntries.some(([value, label]) => label.toLowerCase() === searchTerm.toLowerCase()) &&
+        !selectedValues.includes(searchTerm);
+    // Check if we can create a new relationship record
+    const canCreateRelationship = hasRelationship && props.createOptionForm;
+    const toggleOption = (value) => {
+        // When selecting a new option, format and cache its label if we have the record
+        const record = relationshipRecords[value];
+        if (record && !formattedLabels[value]) {
+            const label = relationshipOptions[value] || value;
+            const formatted = formatOptionLabel(value, label, record);
+            setFormattedLabels(prev => ({ ...prev, [value]: formatted }));
+            // Mark as individually fetched so it stays formatted
+            setIndividuallyFetchedIds(prev => new Set(prev).add(value));
+        }
+        if (isMultiple) {
+            const newValues = selectedValues.includes(value)
+                ? selectedValues.filter((v) => v !== value)
+                : [...selectedValues, value];
+            setValue(props.name, newValues, { shouldValidate: true });
+        }
+        else {
+            setValue(props.name, value, { shouldValidate: true });
+            setIsOpen(false);
+            setSearchTerm('');
+        }
+    };
+    const removeValue = (value) => {
+        if (isMultiple) {
+            const newValues = selectedValues.filter((v) => v !== value);
+            setValue(props.name, newValues, { shouldValidate: true });
+        }
+        else {
+            setValue(props.name, '', { shouldValidate: true });
+        }
+    };
+    const createNewOption = () => {
+        if (!canCreateNew || !searchTerm)
+            return;
+        const trimmedValue = searchTerm.trim();
+        if (isMultiple) {
+            const newValues = [...selectedValues, trimmedValue];
+            setValue(props.name, newValues, { shouldValidate: true });
+        }
+        else {
+            setValue(props.name, trimmedValue, { shouldValidate: true });
+            setIsOpen(false);
+        }
+        setSearchTerm('');
+        setInputValue('');
+    };
+    const handleCreateRelationshipSuccess = (newRecord) => {
+        const id = newRecord._id || newRecord.id;
+        const title = newRecord[props.relationship.titleAttribute] || id;
+        setRelationshipOptions(prev => ({ ...prev, [id]: title }));
+        setRelationshipRecords(prev => ({ ...prev, [id]: newRecord }));
+        // Format and cache the label for the newly created record
+        const formatted = formatOptionLabel(id, title, newRecord);
+        setFormattedLabels(prev => ({ ...prev, [id]: formatted }));
+        setIndividuallyFetchedIds(prev => new Set(prev).add(id));
+        if (isMultiple) {
+            const newValues = [...selectedValues, id];
+            setValue(props.name, newValues, { shouldValidate: true });
+        }
+        else {
+            setValue(props.name, id, { shouldValidate: true });
+        }
+        setShowCreateModal(false);
+        setIsOpen(false);
+        setSearchTerm('');
+    };
+    const handleKeyDown = (e) => {
+        if (e.key === 'Enter') {
+            e.preventDefault();
+            if (canCreateNew) {
+                createNewOption();
+            }
+            else if (filteredOptions.length === 1) {
+                toggleOption(filteredOptions[0][0]);
+                setSearchTerm('');
+            }
+        }
+        else if (e.key === 'Backspace' && !searchTerm && selectedValues.length > 0 && isMultiple) {
+            removeValue(selectedValues[selectedValues.length - 1]);
+        }
+    };
+    const getDisplayLabel = (value) => {
+        // If we have a cached formatted label for this individually fetched record, use it
+        if (formattedLabels[value]) {
+            return formattedLabels[value];
+        }
+        // Otherwise, return the plain label
+        return effectiveOptions[value] || value;
+    };
+    return (_jsxs("div", { className: "mb-4", children: [props.label && (_jsxs("label", { htmlFor: props.name, className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1", children: [props.label, validation.required && _jsx("span", { className: "text-red-500 dark:text-red-400 ml-1", children: "*" })] })), _jsx("input", { type: "hidden", ...register(props.name, validation) }), _jsxs("div", { ref: dropdownRef, className: "relative", children: [_jsx("div", { onClick: () => !props.disabled && setIsOpen(!isOpen), className: cn('w-full min-h-[42px] px-3 py-2 border rounded-lg shadow-sm cursor-pointer', 'k-input', 'focus-within:outline-none focus-within:ring-2 focus-within:ring-ring ', 'transition duration-150 ease-in-out', hasError &&
+                            'border-red-500 dark:border-red-400 focus-within:ring-red-500 dark:focus-within:ring-red-400', props.disabled && 'opacity-60 cursor-not-allowed bg-muted'), children: _jsxs("div", { className: "flex flex-wrap gap-2 items-center", children: [selectedValues.map((value) => {
+                                    const displayLabel = getDisplayLabel(value);
+                                    const hasHTML = /<[^>]+>/.test(displayLabel);
+                                    return (_jsxs("span", { className: "inline-flex items-center gap-1 px-2 py-1 rounded text-sm font-medium bg-accent-soft dark:bg-accent-soft text-accent", children: [hasHTML ? (_jsx("span", { dangerouslySetInnerHTML: { __html: displayLabel } })) : (_jsx("span", { children: displayLabel })), !props.disabled && (_jsx("button", { type: "button", onClick: e => {
+                                                    e.stopPropagation();
+                                                    removeValue(value);
+                                                }, className: "hover:text-accent-hover transition-colors", children: _jsx(Icon, { name: "X", size: 14 }) }))] }, value));
+                                }), !props.disabled && (_jsx("input", { type: "text", value: searchTerm, onChange: e => {
+                                        setSearchTerm(e.target.value);
+                                        if (!isOpen)
+                                            setIsOpen(true);
+                                    }, onKeyDown: handleKeyDown, onClick: e => {
+                                        e.stopPropagation();
+                                        setIsOpen(true);
+                                    }, onFocus: () => setIsOpen(true), placeholder: selectedValues.length === 0
+                                        ? props.placeholder || translate('core:select.placeholder')
+                                        : '', className: "flex-1 min-w-[120px] outline-none bg-transparent text-fg", disabled: props.disabled })), _jsx(Icon, { name: isOpen ? 'ChevronUp' : 'ChevronDown', size: 16, className: "text-gray-400 shrink-0" })] }) }), isOpen && !props.disabled && (_jsxs("div", { className: "absolute z-50 w-full mt-1 bg-white dark:bg-gray-800 border border-border rounded-lg shadow-lg max-h-60 overflow-auto", children: [isLoadingRelationship && (_jsxs("div", { className: "px-3 py-2 text-sm text-fg-secondary flex items-center gap-2", children: [_jsx(Icon, { name: "Loader2", size: 16, className: "animate-spin" }), _jsx("span", { children: translate('core:select.loading') })] })), !isLoadingRelationship &&
+                                filteredOptions.length === 0 &&
+                                !canCreateNew &&
+                                !canCreateRelationship && (_jsx("div", { className: "px-3 py-2 text-sm text-fg-secondary", children: searchTerm
+                                    ? translate('core:select.no_matching')
+                                    : translate('core:filters.no_options') })), !isLoadingRelationship &&
+                                filteredOptions.map(([value, label]) => {
+                                    const record = relationshipRecords[value];
+                                    const displayLabel = formatOptionLabel(value, label, record);
+                                    const hasHTML = /<[^>]+>/.test(displayLabel);
+                                    return (_jsx("div", { onClick: () => {
+                                            toggleOption(value);
+                                            setSearchTerm('');
+                                        }, className: cn('px-3 py-2 cursor-pointer text-sm transition-colors text-fg', 'hover:bg-gray-100 dark:hover:bg-gray-700', selectedValues.includes(value) && 'bg-accent-soft text-accent'), children: _jsxs("div", { className: "flex items-center justify-between", children: [hasHTML ? (_jsx("span", { dangerouslySetInnerHTML: { __html: displayLabel } })) : (_jsx("span", { children: displayLabel })), selectedValues.includes(value) && _jsx(Icon, { name: "Check", size: 16 })] }) }, value));
+                                }), canCreateNew && !canCreateRelationship && (_jsx("div", { onClick: createNewOption, className: cn('px-3 py-2 cursor-pointer text-sm transition-colors hover:bg-gray-100 dark:hover:bg-gray-700 text-accent font-medium', filteredOptions.length > 0 && 'border-t border-border'), children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Icon, { name: "Plus", size: 16 }), _jsx("span", { children: translate('core:select.create', { term: searchTerm }) })] }) })), canCreateRelationship && (_jsx("div", { onClick: () => {
+                                    setShowCreateModal(true);
+                                    setIsOpen(false);
+                                }, className: cn('px-3 py-2 cursor-pointer text-sm transition-colors hover:bg-gray-100 dark:hover:bg-gray-700 text-accent font-medium', filteredOptions.length > 0 && 'border-t border-border'), children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Icon, { name: "Plus", size: 16 }), _jsx("span", { children: props.createOptionModalHeading || translate('core:select.create_new') })] }) }))] }))] }), hasError && _jsx("p", { className: "mt-1 text-sm text-red-600 dark:text-red-400", children: error?.message }), props.helperText && _jsx("p", { className: "mt-1 text-sm text-gray-500 dark:text-gray-400", children: props.helperText }), !hasError && _jsx(HintDisplay, { hint: props.hint, hintIcon: props.hintIcon, hintColor: props.hintColor }), canCreateRelationship && showCreateModal && (_jsx(ResourceFormModal, { isOpen: showCreateModal, onClose: () => setShowCreateModal(false), mode: "create", resourceName: props.createOptionModalHeading || translate('core:common.record'), resourceSlug: props.relationship.resource || props.relationship.name, apiBaseUrl: props.apiBaseUrl, formSchema: { type: 'form', components: props.createOptionForm || [] }, onSuccess: handleCreateRelationshipSuccess, depth: 1 }))] }));
+}