@rchemist/listgrid 0.2.6

package/dist/listgrid/components/list/ui/HeaderField.d.ts

@@ -0,0 +1,19 @@
+import { ListableFormField } from '../../fields/abstract';
+import { SearchForm } from '../../../form/SearchForm';
+import { ViewFieldManageable } from '../types/ViewListGrid.types';
+import { EntityForm } from '../../../config/EntityForm';
+interface ViewHeaderFieldProps extends ViewFieldManageable {
+    gridId: string;
+    fields: ListableFormField<any>[];
+    searchForm: SearchForm;
+    entityForm: EntityForm;
+    onChangeSearchForm: (searchForm: SearchForm, resetPage?: boolean) => void;
+    sortable: boolean;
+    draggable?: boolean;
+    /** QuickSearch 필드명 Set (quickSearch 활성 시 해당 필드 헤더 필터 비활성화용) */
+    quickSearchFieldNames?: Set<string>;
+    /** QuickSearch 값 (값이 있으면 quickSearch 필드 헤더 필터 비활성화) */
+    quickSearchValue?: string;
+}
+export declare const HeaderField: ({ viewFields, ...props }: ViewHeaderFieldProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/listgrid/components/list/ui/HeaderField.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { getAlignClassName } from '../../../common/func';
+import React from 'react';
+import { getTranslation } from '../../../utils/i18n';
+import { isTrue } from '../../../utils/BooleanUtil';
+import { SortField } from './SortField';
+import { HeaderFieldFilter } from './HeaderFieldFilter';
+import { useListGridTheme } from '../context/ListGridThemeContext';
+export const HeaderField = ({ viewFields, ...props }) => {
+    const { t } = getTranslation();
+    const { classNames: themeClasses } = useListGridTheme();
+    const listFields = props.fields;
+    const draggable = isTrue(props.draggable);
+    // 테마에서 헤더 셀 클래스 가져오기
+    const cellClass = themeClasses.headerCell?.cell ?? 'whitespace-nowrap';
+    const sortableClass = themeClasses.headerCell?.sortable ?? 'cursor-pointer hover:bg-gray-50 dark:hover:bg-dark/30';
+    const sortIconClass = themeClasses.headerCell?.sortIcon ?? 'ml-1 inline-block';
+    const filterIconClass = themeClasses.headerCell?.filterIcon ?? 'ml-1 text-gray-400 hover:text-primary cursor-pointer';
+    return (_jsxs(React.Fragment, { children: [listFields.map((field, index) => {
+                if (viewFields.length === 0 || viewFields.includes(field.getName())) {
+                    const alignClassName = getAlignClassName(field.getListFieldAlignType(), true);
+                    const sortable = props.sortable && isTrue(field.getListConfig()?.sortable, true);
+                    const filterable = field.isFilterable();
+                    // QuickSearch 필드이고, QuickSearch 값이 있으면 헤더 필터 비활성화
+                    const isQuickSearchField = props.quickSearchFieldNames?.has(field.getName()) ?? false;
+                    const isQuickSearchActive = !!(props.quickSearchValue && props.quickSearchValue.trim().length > 0);
+                    const disableHeaderFilter = isQuickSearchField && isQuickSearchActive;
+                    return (_jsx("th", { className: cellClass, children: _jsxs("div", { className: `w-full min-w-[40px] flex items-center ${alignClassName}`, children: [_jsx("span", { children: field.viewLabel(t) }), isTrue(sortable) && (_jsx("span", { className: `inline-flex items-center ${sortIconClass}`, children: _jsx(SortField, { name: field.name, searchForm: props.searchForm, onChangeSearchForm: props.onChangeSearchForm }) })), filterable && (_jsx("span", { className: `inline-flex items-center ${filterIconClass}`, children: _jsx(HeaderFieldFilter, { field: field, gridId: props.gridId, searchForm: props.searchForm, entityForm: props.entityForm, onChangeSearchForm: props.onChangeSearchForm, disabled: disableHeaderFilter }) }))] }) }, `th_${index}`));
+                }
+                return null;
+            }), draggable && (_jsx("th", { className: themeClasses.headerCell?.dragHandleCell ?? 'w-2 whitespace-nowrap', children: t('순서 변경') }, `th_drag`))] }));
+};

package/dist/listgrid/components/list/ui/HeaderFieldFilter.d.ts

@@ -0,0 +1,14 @@
+import { SearchForm } from '../../../form/SearchForm';
+import { EntityForm } from '../../../config/EntityForm';
+import { ListableFormField } from '../../fields/abstract';
+interface HeaderFieldFilterProps {
+    field: ListableFormField<any>;
+    gridId: string;
+    searchForm: SearchForm;
+    entityForm: EntityForm;
+    onChangeSearchForm: (searchForm: SearchForm, resetPage?: boolean) => void;
+    /** QuickSearch 활성 시 해당 필드의 헤더 필터를 비활성화 */
+    disabled?: boolean;
+}
+export declare const HeaderFieldFilter: ({ field, gridId, searchForm, entityForm, onChangeSearchForm, disabled, }: HeaderFieldFilterProps) => import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/listgrid/components/list/ui/HeaderFieldFilter.js

@@ -0,0 +1,166 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { FilterButton } from './FilterButton';
+import { FilterDropdown } from './FilterDropdown';
+import { FilterView } from './FilterView';
+import { SearchForm } from '../../../form/SearchForm';
+import { AbstractManyToOneField, OptionalField } from '../../fields/abstract';
+import { isBlank } from '../../../utils/StringUtil';
+import { useHeaderFilterStore } from './headerFilterStore';
+import { isTrue } from '../../../utils/BooleanUtil';
+export const HeaderFieldFilter = ({ field, gridId, searchForm, entityForm, onChangeSearchForm, disabled = false, }) => {
+    const fieldName = field.getName();
+    const filterId = `${gridId}::${fieldName}`;
+    // zustand store 사용
+    const { openFilter, closeFilter, isFilterOpen } = useHeaderFilterStore();
+    const isOpen = isFilterOpen(filterId);
+    const [hasFilter, setHasFilter] = useState(false);
+    const [tempSearchForm, setTempSearchForm] = useState();
+    const [placement, setPlacement] = useState('left');
+    const buttonRef = useRef(null);
+    // 필터 상태 확인
+    useEffect(() => {
+        const fieldName = field.getName();
+        let filterValue = searchForm.getSearchValue(fieldName);
+        // ManyToOneField인 경우 .id로 체크
+        if (!filterValue && field instanceof AbstractManyToOneField) {
+            filterValue = searchForm.getSearchValue(fieldName + '.id');
+        }
+        // 배열인 경우 length로 체크
+        const hasValue = Array.isArray(filterValue)
+            ? filterValue.length > 0
+            : filterValue !== null && filterValue !== undefined && filterValue !== '';
+        setHasFilter(hasValue);
+    }, [searchForm, field]);
+    // 필터 위치 결정 (화면 중앙 기준)
+    useEffect(() => {
+        if (isOpen && buttonRef.current) {
+            const rect = buttonRef.current.getBoundingClientRect();
+            const screenCenter = window.innerWidth / 2;
+            // 버튼이 화면 오른쪽 절반에 있으면 드롭다운을 왼쪽으로
+            if (rect.left > screenCenter) {
+                setPlacement('right');
+            }
+            else {
+                setPlacement('left');
+            }
+        }
+    }, [isOpen]);
+    // 드롭다운이 열릴 때 tempSearchForm 초기화
+    useEffect(() => {
+        if (isOpen) {
+            setTempSearchForm(searchForm.clone());
+        }
+    }, [isOpen, searchForm]);
+    const handleFilterChange = (name, value, op = 'EQUAL') => {
+        setTempSearchForm((prevForm) => {
+            const newSearchForm = prevForm?.clone() ?? SearchForm.create();
+            const targetField = entityForm.getField(name);
+            // ManyToOneField 처리
+            if (targetField instanceof AbstractManyToOneField) {
+                const isMultiFilter = isTrue(targetField.listConfig?.multiFilter);
+                if (isMultiFilter) {
+                    // multiFilter가 활성화된 경우: 배열 값을 그대로 사용, IN operator
+                    const idFieldName = targetField.config.field?.id ?? 'id';
+                    name = name + '.' + idFieldName;
+                    // value는 이미 ID 배열이므로 그대로 사용
+                    if (Array.isArray(value) && value.length > 0) {
+                        // 배열의 길이가 1이면 EQUAL, 그 이상이면 IN
+                        op = value.length === 1 ? 'EQUAL' : 'IN';
+                        value = value.length === 1 ? value[0] : value;
+                    }
+                }
+                else {
+                    // 기존 단일 선택 로직
+                    if (targetField.config.field?.id) {
+                        name = name + '.' + targetField.config.field.id;
+                        if (value !== undefined && value[targetField.config.field.id] !== undefined) {
+                            value = value[targetField.config.field.id];
+                        }
+                    }
+                    else {
+                        name = name + '.id';
+                        if (value?.['id'] !== undefined) {
+                            value = value['id'];
+                        }
+                    }
+                }
+            }
+            // OptionalField에서 다중 선택인 경우
+            if (targetField instanceof OptionalField && (targetField.options?.length ?? 0) > 2) {
+                op = 'IN';
+            }
+            // 필터 추가/수정/삭제
+            const isEmpty = Array.isArray(value) ? value.length === 0 : isBlank(value);
+            if (isEmpty && op !== 'NULL' && op !== 'NOT_NULL') {
+                newSearchForm.removeFilter(name);
+            }
+            else {
+                newSearchForm.handleAndFilter(name, value, op);
+            }
+            return newSearchForm;
+        });
+    };
+    const handleApply = () => {
+        if (tempSearchForm) {
+            onChangeSearchForm(tempSearchForm, true);
+        }
+        closeFilter();
+    };
+    const handleClear = () => {
+        const newSearchForm = searchForm.clone();
+        // 기본 필드명으로 제거
+        newSearchForm.removeFilter(fieldName);
+        // ManyToOneField인 경우 .id도 제거
+        if (field instanceof AbstractManyToOneField) {
+            newSearchForm.removeFilter(fieldName + '.id');
+            if (field.config.field?.id) {
+                newSearchForm.removeFilter(fieldName + '.' + field.config.field.id);
+            }
+        }
+        onChangeSearchForm(newSearchForm, true);
+        closeFilter();
+    };
+    // 필터링 불가능한 필드 또는 비활성화된 필드는 렌더링하지 않음
+    // (QuickSearch 활성 시 해당 필드의 헤더 필터는 비활성화됨)
+    if (!field.isFilterable() || disabled) {
+        return null;
+    }
+    // 필드 타입에 따라 드롭다운 크기 결정
+    const getDropdownSize = () => {
+        const fieldType = field.type;
+        // 큰 크기: Date, Datetime (빠른 선택 버튼들이 많음)
+        if (fieldType === 'date' || fieldType === 'datetime') {
+            return 'lg';
+        }
+        // ManyToOne + multiFilter인 경우 큰 크기 (칩들이 많이 표시됨)
+        if (field instanceof AbstractManyToOneField && isTrue(field.listConfig?.multiFilter)) {
+            return 'lg';
+        }
+        // 중간 크기: ManyToOne, Select, Number 등
+        if (fieldType === 'manyToOne' ||
+            field instanceof AbstractManyToOneField ||
+            fieldType === 'number') {
+            return 'md';
+        }
+        // 작은 크기: String, Email, Boolean 등 기본
+        return 'sm';
+    };
+    return (_jsxs("div", { ref: buttonRef, className: "relative inline-block", children: [_jsx(FilterButton, { isActive: hasFilter, onClick: () => {
+                    if (isOpen) {
+                        closeFilter();
+                    }
+                    else {
+                        openFilter(filterId);
+                    }
+                } }), isOpen &&
+                tempSearchForm &&
+                (() => {
+                    // ManyToOneField인 경우 .id로 값을 가져옴 (AdvancedSearchForm과 동일)
+                    const searchFieldName = field instanceof AbstractManyToOneField ? field.getName() + '.id' : field.getName();
+                    const fieldValue = tempSearchForm.getSearchValue(searchFieldName);
+                    const filterField = field.clone(false).withValue(fieldValue);
+                    return (_jsx(FilterDropdown, { isOpen: isOpen, onClose: closeFilter, onClear: handleClear, onApply: handleApply, size: getDropdownSize(), placement: placement, anchorRef: buttonRef, children: _jsx(FilterView, { entityForm: entityForm, field: filterField, value: fieldValue, onChange: handleFilterChange }) }));
+                })()] }));
+};

package/dist/listgrid/components/list/ui/HeaderTitle.d.ts

@@ -0,0 +1,4 @@
+export declare const HeaderTitle: React.FC<{
+    title: string;
+    hideTitle?: boolean;
+}>;

package/dist/listgrid/components/list/ui/HeaderTitle.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Tooltip } from '../../../ui';
+import { getTranslation } from '../../../utils/i18n';
+import { isTrue } from '../../../utils/BooleanUtil';
+import { useListGridTheme } from '../context/ListGridThemeContext';
+export const HeaderTitle = ({ title, hideTitle, }) => {
+    const { t } = getTranslation();
+    const { classNames: themeClasses, cn } = useListGridTheme();
+    const titleText = t(title);
+    if (isTrue(hideTitle))
+        return null;
+    return (_jsx("div", { className: cn('min-w-[200px] max-w-full flex-1 overflow-hidden', themeClasses.header?.titleContainer), children: _jsx(Tooltip, { label: titleText, zIndex: 1000, usePortal: true, position: "top-start", children: _jsx("div", { className: cn('flex items-center mt-2 min-h-[60px] truncate py-3 pt-2 text-[1.8rem] font-bold dark:text-white-light md:mt-0 overflow-ellipsis', themeClasses.header?.titleWrapper), children: titleText }) }) }));
+};

package/dist/listgrid/components/list/ui/InlineSubCollectionView.d.ts

@@ -0,0 +1,30 @@
+import React, { ReactNode } from 'react';
+import { EntityForm } from '../../../config/EntityForm';
+import { Session } from '../../../auth/types';
+import { SearchForm } from '../../../form/SearchForm';
+import { ViewListGridOptionProps } from '../types/ViewListGrid.types';
+import { InlineGlobalListConfig, InlineListFieldConfig, InlinePaginationOptions, InlineRowActionColumn, InlineSubCollectionFetchOptions, InlineSubCollectionRelation } from '../../../config/InlineSubCollectionField';
+export interface InlineSubCollectionViewProps {
+    parentEntityForm: EntityForm;
+    parentId: string;
+    entityForm: EntityForm;
+    relation: InlineSubCollectionRelation;
+    readonly?: boolean;
+    session?: Session;
+    listFields?: (string | InlineListFieldConfig)[];
+    /** Row action columns - supports multiple action columns */
+    rowActionColumns?: InlineRowActionColumn[];
+    pagination?: InlinePaginationOptions;
+    globalListConfig?: InlineGlobalListConfig;
+    fetchOptions?: InlineSubCollectionFetchOptions;
+    initialSearchForm?: SearchForm;
+    tooltip?: ReactNode;
+    hideTitle?: boolean;
+    viewListOptions?: ViewListGridOptionProps;
+}
+/**
+ * InlineSubCollectionView component
+ * Renders a simple list table without detail view
+ * Supports row actions and field overrides
+ */
+export declare const InlineSubCollectionView: React.FC<InlineSubCollectionViewProps>;

package/dist/listgrid/components/list/ui/InlineSubCollectionView.js

@@ -0,0 +1,260 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useMemo, useState } from 'react';
+import { ListGrid } from '../../../config/ListGrid';
+import { ViewListGrid } from '../ViewListGrid';
+import { ListableFormField, } from '../../fields/abstract/ListableFormField';
+import { Tooltip } from '../../../ui';
+import { useLoadingStore } from '../../../loading';
+import { showAlert } from '../../../message';
+/**
+ * InlineRowActionField - Custom field for rendering row action buttons
+ * This field renders action buttons in the list view
+ * Now supports multiple columns with unique columnId
+ */
+class InlineRowActionField extends ListableFormField {
+    constructor(columnId, rowActions, onActionHandler, columnLabel, columnOrder) {
+        const order = columnOrder ?? 9999;
+        const fieldName = `_rowActions_${columnId}`;
+        super(fieldName, order, 'custom');
+        this.columnId = columnId;
+        this.rowActions = rowActions;
+        this.onActionHandler = onActionHandler;
+        this.columnLabel = columnLabel ?? '작업';
+        this.columnOrder = order;
+        // Configure as list field
+        this.listConfig = {
+            support: true,
+            filterable: false,
+            sortable: false,
+            quickSearch: false,
+            order: order,
+            label: this.columnLabel,
+            align: 'center',
+        };
+    }
+    createInstance(name, order) {
+        return new InlineRowActionField(this.columnId, this.rowActions, this.onActionHandler, this.columnLabel, this.columnOrder);
+    }
+    async renderInstance(params) {
+        return null;
+    }
+    async renderListItemInstance(props) {
+        const { item } = props;
+        if (!this.rowActions || this.rowActions.length === 0) {
+            return { result: null, linkOnCell: false };
+        }
+        const visibleActions = this.rowActions.filter((action) => !action.hidden?.(item));
+        if (visibleActions.length === 0) {
+            return { result: null, linkOnCell: false };
+        }
+        const buttons = (_jsx("div", { className: "rcm-inline-action-row", children: visibleActions.map((action) => {
+                const label = typeof action.label === 'function' ? action.label(item) : action.label;
+                const isDisabled = action.disabled?.(item) ?? false;
+                return (_jsx(Tooltip, { label: label, children: _jsxs("button", { type: "button", className: `rcm-button ${action.className ?? ''} ${isDisabled ? 'rcm-is-disabled' : ''}`, "data-variant": action.className ? undefined : 'outline', "data-size": "sm", disabled: isDisabled, onClick: (e) => {
+                            e.stopPropagation();
+                            e.preventDefault();
+                            this.onActionHandler(action, item);
+                        }, children: [action.icon && _jsx("span", { className: "mr-1", children: action.icon }), label] }) }, action.id));
+            }) }));
+        return { result: buttons, linkOnCell: false };
+    }
+}
+/**
+ * InlineSubCollectionView component
+ * Renders a simple list table without detail view
+ * Supports row actions and field overrides
+ */
+export const InlineSubCollectionView = ({ parentEntityForm, parentId, entityForm, relation, readonly = false, session, listFields, rowActionColumns, pagination, globalListConfig, fetchOptions, initialSearchForm, tooltip, hideTitle = false, viewListOptions, }) => {
+    const [refreshKey, setRefreshKey] = useState(0);
+    const { setOpenBaseLoading } = useLoadingStore();
+    // Refresh function for row actions
+    const refresh = useCallback(() => {
+        setRefreshKey((prev) => prev + 1);
+    }, []);
+    // Handle row action click
+    const handleRowAction = useCallback(async (action, item) => {
+        // Check if disabled
+        if (action.disabled?.(item)) {
+            return;
+        }
+        // Confirmation if needed
+        if (action.confirm) {
+            const message = typeof action.confirm === 'function' ? action.confirm(item) : action.confirm;
+            const confirmed = window.confirm(message);
+            if (!confirmed) {
+                return;
+            }
+        }
+        try {
+            setOpenBaseLoading(true);
+            // Pass the configuredEntityForm from the ref
+            await action.onClick(item, entityForm.clone(true).withParentId(parentId), refresh);
+        }
+        catch (error) {
+            console.error('Row action error:', error);
+            showAlert({
+                message: error instanceof Error ? error.message : '작업 중 오류가 발생했습니다.',
+                topLayer: true,
+            });
+        }
+        finally {
+            setOpenBaseLoading(false);
+        }
+    }, [entityForm, parentId, refresh, setOpenBaseLoading]);
+    // Clone entityForm and apply field overrides
+    const configuredEntityForm = useMemo(() => {
+        const cloned = entityForm.clone(true).withParentId(parentId);
+        // Apply list field overrides
+        if (listFields && listFields.length > 0) {
+            const fieldNames = listFields.map((f) => (typeof f === 'string' ? f : f.name));
+            const fieldConfigs = new Map();
+            listFields.forEach((f) => {
+                if (typeof f !== 'string' && f.listConfig) {
+                    fieldConfigs.set(f.name, f.listConfig);
+                }
+            });
+            // Update field list configs
+            cloned.fields.forEach((field) => {
+                if (field instanceof ListableFormField) {
+                    if (fieldNames.includes(field.name)) {
+                        // Enable this field for list display
+                        field.useListField();
+                        // Apply specific config override if provided
+                        const configOverride = fieldConfigs.get(field.name);
+                        if (configOverride) {
+                            field.withListConfig({
+                                ...field.getListConfig(),
+                                ...configOverride,
+                                support: true,
+                            });
+                        }
+                        // Apply global config
+                        if (globalListConfig) {
+                            const currentConfig = field.getListConfig() ?? {};
+                            const mergedFilterable = globalListConfig.filterable ?? currentConfig.filterable;
+                            const mergedSortable = globalListConfig.sortable ?? currentConfig.sortable;
+                            const mergedQuickSearch = globalListConfig.quickSearch ?? currentConfig.quickSearch;
+                            field.withListConfig({
+                                ...currentConfig,
+                                ...(mergedFilterable !== undefined ? { filterable: mergedFilterable } : {}),
+                                ...(mergedSortable !== undefined ? { sortable: mergedSortable } : {}),
+                                ...(mergedQuickSearch !== undefined ? { quickSearch: mergedQuickSearch } : {}),
+                                support: true,
+                            });
+                        }
+                    }
+                    else {
+                        // Disable this field for list display
+                        delete field.listConfig;
+                    }
+                }
+            });
+        }
+        else if (globalListConfig) {
+            // Apply global config to all list fields
+            cloned.fields.forEach((field) => {
+                if (field instanceof ListableFormField && field.isSupportList()) {
+                    const currentConfig = field.getListConfig() ?? {};
+                    const mergedFilterable = globalListConfig.filterable ?? currentConfig.filterable;
+                    const mergedSortable = globalListConfig.sortable ?? currentConfig.sortable;
+                    const mergedQuickSearch = globalListConfig.quickSearch ?? currentConfig.quickSearch;
+                    field.withListConfig({
+                        ...currentConfig,
+                        ...(mergedFilterable !== undefined ? { filterable: mergedFilterable } : {}),
+                        ...(mergedSortable !== undefined ? { sortable: mergedSortable } : {}),
+                        ...(mergedQuickSearch !== undefined ? { quickSearch: mergedQuickSearch } : {}),
+                        support: true,
+                    });
+                }
+            });
+        }
+        // Add row action columns if defined
+        if (rowActionColumns && rowActionColumns.length > 0) {
+            rowActionColumns.forEach((column) => {
+                if (column.actions && column.actions.length > 0) {
+                    const actionField = new InlineRowActionField(column.id, column.actions, handleRowAction, column.label, column.order);
+                    cloned.fields.set(`_rowActions_${column.id}`, actionField);
+                }
+            });
+        }
+        return cloned;
+    }, [
+        entityForm,
+        parentId,
+        listFields,
+        globalListConfig,
+        rowActionColumns,
+        readonly,
+        handleRowAction,
+    ]);
+    // Create ListGrid
+    const listGrid = useMemo(() => {
+        return new ListGrid(configuredEntityForm);
+    }, [configuredEntityForm]);
+    // Build filters with mappedBy
+    const buildFilters = useCallback(async (ef) => {
+        // Get mappedBy filter
+        const mappedBy = relation.mappedBy;
+        const filterBy = relation.filterBy ??
+            (mappedBy.endsWith('Id') ? mappedBy.replace('Id', '') + '.id' : mappedBy);
+        const valueProperty = relation.valueProperty ?? 'id';
+        let mappedByValue;
+        if (valueProperty === 'id') {
+            mappedByValue = parentId;
+        }
+        else {
+            const value = parentEntityForm.getValue(valueProperty);
+            if (typeof value === 'string' || typeof value === 'number') {
+                mappedByValue = value;
+            }
+        }
+        const mappedByFilter = {
+            name: filterBy,
+            ...(mappedByValue !== undefined ? { value: String(mappedByValue) } : {}),
+        };
+        // Apply user-defined filters if any
+        if (fetchOptions?.filters) {
+            const additionalFilters = await fetchOptions.filters(ef);
+            if (additionalFilters.length > 0 && additionalFilters[0].items) {
+                const hasMappedByFilter = additionalFilters[0].items.some((item) => item.name === mappedByFilter.name);
+                if (!hasMappedByFilter) {
+                    additionalFilters[0].items.unshift(mappedByFilter);
+                }
+                return additionalFilters;
+            }
+        }
+        // Return default filter
+        return [
+            {
+                condition: 'AND',
+                items: [mappedByFilter],
+            },
+        ];
+    }, [relation, parentId, parentEntityForm, fetchOptions]);
+    // Build ViewListGrid options
+    const options = useMemo(() => {
+        const baseOptions = {
+            ...viewListOptions,
+            hideTitle: hideTitle,
+            readonly: readonly,
+            subCollection: {
+                name: relation.mappedBy,
+                mappedBy: relation.mappedBy,
+                mappedValue: parentId,
+                // List only mode - disable modify on view
+                modifyOnView: false,
+            },
+            filters: buildFilters,
+            // Disable create/update UI since we only show list
+            createOrUpdate: {
+                addNew: false,
+                modal: false,
+            },
+            // Hide pagination controls if client-side pagination with all data
+            ...(pagination?.clientSide !== undefined ? { hidePagination: pagination.clientSide } : {}),
+        };
+        return baseOptions;
+    }, [viewListOptions, hideTitle, readonly, relation, parentId, buildFilters, pagination]);
+    return (_jsxs("div", { className: "inline-subcollection-view", children: [tooltip && _jsx("div", { className: "rcm-inline-subcollection-tooltip", children: tooltip }), _jsx(ViewListGrid, { listGrid: listGrid, parentId: parentId, options: options, viewMode: "popup", ...(session !== undefined ? { session } : {}) })] }, `inline-sub-${refreshKey}`));
+};

package/dist/listgrid/components/list/ui/MemoizedFilterField.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { QueryConditionType } from '../../../form/SearchForm';
+import { EntityForm } from '../../../config/EntityForm';
+import { ListableFormField } from '../../fields/abstract';
+interface MemoizedFilterFieldProps {
+    entityForm: EntityForm;
+    field: ListableFormField<any>;
+    fieldName: string;
+    value: any;
+    onChange: (name: string, value: any, op?: QueryConditionType) => void;
+    isCompact?: boolean;
+}
+export declare const MemoizedFilterField: React.MemoExoticComponent<({ entityForm, field, fieldName, value, onChange, isCompact, }: MemoizedFilterFieldProps) => import("react/jsx-runtime").JSX.Element | null>;
+export {};

package/dist/listgrid/components/list/ui/MemoizedFilterField.js

@@ -0,0 +1,67 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useCallback, useEffect, useRef, useState } from 'react';
+import { getTranslation } from '../../../utils/i18n';
+/**
+ * Memoized filter field component for performance optimization
+ * Only re-renders when props actually change
+ */
+const MemoizedFilterFieldInner = ({ entityForm, field, fieldName, value, onChange, isCompact = false, }) => {
+    const [filterView, setFilterView] = useState(null);
+    const [isLoading, setIsLoading] = useState(true);
+    const mountedRef = useRef(true);
+    const { t } = getTranslation();
+    // Memoized change handler to prevent unnecessary re-renders
+    const handleChange = useCallback((newValue, op) => {
+        onChange(fieldName, newValue, op);
+    }, [fieldName, onChange]);
+    // Load filter view only once on mount
+    useEffect(() => {
+        mountedRef.current = true;
+        const loadFilterView = async () => {
+            if (!field.isFilterable()) {
+                setIsLoading(false);
+                return;
+            }
+            try {
+                const view = await field.viewListFilter({
+                    entityForm,
+                    onChange: handleChange,
+                    value,
+                });
+                if (mountedRef.current) {
+                    setFilterView(view);
+                    setIsLoading(false);
+                }
+            }
+            catch (error) {
+                console.error('Failed to load filter view:', error);
+                if (mountedRef.current) {
+                    setIsLoading(false);
+                }
+            }
+        };
+        loadFilterView();
+        return () => {
+            mountedRef.current = false;
+        };
+    }, [field, entityForm, handleChange, value]);
+    if (isLoading) {
+        return _jsx("div", { className: `animate-pulse ${isCompact ? 'h-8' : 'h-10'} bg-gray-100 rounded` });
+    }
+    if (!filterView) {
+        return null;
+    }
+    return (_jsxs("div", { className: isCompact ? 'space-y-1' : 'space-y-2', children: [_jsx("label", { htmlFor: fieldName, className: `flex items-center text-gray-700 font-medium ${isCompact ? 'text-xs' : 'text-sm'}`, children: field.viewLabel(t) }), _jsx("div", { className: isCompact ? 'filter-field-compact' : '', children: filterView })] }));
+};
+// Memoize the component to prevent unnecessary re-renders
+export const MemoizedFilterField = memo(MemoizedFilterFieldInner, (prevProps, nextProps) => {
+    // Custom comparison: only re-render if these props change
+    return (prevProps.fieldName === nextProps.fieldName &&
+        prevProps.value === nextProps.value &&
+        prevProps.isCompact === nextProps.isCompact &&
+        // Reference equality for stable objects
+        prevProps.entityForm === nextProps.entityForm &&
+        prevProps.field === nextProps.field);
+});
+MemoizedFilterField.displayName = 'MemoizedFilterField';

package/dist/listgrid/components/list/ui/QuickSearchInput.d.ts

@@ -0,0 +1,9 @@
+export interface QuickSearchInputProps {
+    search: string;
+    setSearch: (value: string) => void;
+    onQuickSearch: (search: string) => void;
+    quickSearchEnabled: boolean;
+    quickSearchLabel: string;
+    loading: boolean;
+}
+export declare const QuickSearchInput: React.FC<QuickSearchInputProps>;

package/dist/listgrid/components/list/ui/QuickSearchInput.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { isBlank } from '../../../utils/StringUtil';
+import { IconCircleX, IconSearch } from '@tabler/icons-react';
+export const QuickSearchInput = ({ search, setSearch, onQuickSearch, quickSearchEnabled, quickSearchLabel, loading, }) => {
+    if (!quickSearchEnabled)
+        return _jsx("div", { children: "\u00A0" });
+    return (_jsxs("div", { className: "rcm-quick-search-wrap", children: [_jsx("input", { type: "text", id: "quick-search", className: "rcm-input rcm-quick-search-input", placeholder: `Search ${quickSearchLabel}`, value: search, readOnly: !quickSearchEnabled, disabled: loading || !quickSearchEnabled, onChange: (e) => setSearch(e.target.value), onKeyUp: (e) => {
+                    if (e.key === 'Enter')
+                        onQuickSearch(search);
+                } }), _jsx("div", { className: "rcm-quick-search-addon rcm-quick-search-addon-search", children: _jsx("button", { className: "rcm-quick-search-btn", onClick: () => {
+                        if (!isBlank(search))
+                            onQuickSearch(search);
+                    }, children: _jsx(IconSearch, { className: "rcm-quick-search-icon", stroke: 1 }) }) }), !isBlank(search) && (_jsx("div", { className: "rcm-quick-search-addon rcm-quick-search-addon-clear", children: _jsx("button", { className: "rcm-quick-search-btn", onClick: () => {
+                        setSearch('');
+                        onQuickSearch('');
+                    }, children: _jsx(IconCircleX, { className: "rcm-quick-search-icon", stroke: 1 }) }) }))] }));
+};