@rchemist/listgrid 0.2.6

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

@@ -0,0 +1,238 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useMemo, useState, useCallback, useEffect } from 'react';
+import { useCardSubCollectionData } from '../hooks/useCardSubCollectionData';
+import { CardItem } from './CardItem';
+import { CardSubCollectionModal } from './CardSubCollectionModal';
+import { Tooltip } from '../../../ui';
+import { IconHelp, IconSearch, IconX, IconPlus, IconRefresh, IconLayoutGrid, IconAlertCircle, IconChevronLeft, IconChevronRight, IconChevronsLeft, IconChevronsRight, } from '@tabler/icons-react';
+/**
+ * CardSubCollectionView
+ * Displays a collection of items in a professional card grid format
+ * Features: Client-side search, responsive grid, CRUD operations
+ */
+export const CardSubCollectionView = ({ parentEntityForm, parentId, entityForm, fetchUrl: fetchUrlProp, cardConfig, relation, readonly = false, session, onItemEdit, onItemDelete, onItemAdd, fetchOptions, initialSearchForm, viewDetail = false, tooltip, }) => {
+    // Modal state management
+    const [isModalOpen, setIsModalOpen] = useState(false);
+    const [selectedItemId, setSelectedItemId] = useState(null);
+    const [modalMode, setModalMode] = useState(null);
+    // Search state
+    const [searchQuery, setSearchQuery] = useState('');
+    const [isSearchFocused, setIsSearchFocused] = useState(false);
+    // Pagination state
+    const [currentPage, setCurrentPage] = useState(1);
+    // Helper: Check if a field name matches mappedBy patterns (should be excluded)
+    const isMappedByField = useCallback((fieldName, mappedBy) => {
+        if (fieldName === mappedBy)
+            return true;
+        let baseField = mappedBy;
+        if (mappedBy.endsWith('Id')) {
+            baseField = mappedBy.slice(0, -2);
+        }
+        else if (mappedBy.endsWith('.id')) {
+            baseField = mappedBy.slice(0, -3);
+        }
+        if (fieldName === baseField)
+            return true;
+        if (fieldName.startsWith(baseField + '.'))
+            return true;
+        return false;
+    }, []);
+    // Get quickSearch fields from entity form (excluding mappedBy fields)
+    const quickSearchFields = useMemo(() => {
+        const fields = Array.from(entityForm.fields.values());
+        const mappedBy = relation.mappedBy;
+        return fields.filter((field) => {
+            if (field.listConfig?.support !== true)
+                return false;
+            if (field.listConfig?.quickSearch !== true)
+                return false;
+            if (isMappedByField(field.name, mappedBy))
+                return false;
+            return true;
+        });
+    }, [entityForm, relation.mappedBy, isMappedByField]);
+    const searchPlaceholder = useMemo(() => {
+        if (quickSearchFields.length === 0) {
+            return '검색';
+        }
+        const labels = quickSearchFields.slice(0, 3).map((field) => {
+            const label = field.getLabel();
+            return typeof label === 'string' ? label : field.getName();
+        });
+        return `${labels.join(', ')} 검색`;
+    }, [quickSearchFields]);
+    const isQuickSearchEnabled = quickSearchFields.length > 0;
+    // Get the actual fetch URL
+    const fetchUrl = useMemo(() => {
+        if (typeof fetchUrlProp === 'function') {
+            return fetchUrlProp(parentEntityForm);
+        }
+        return fetchUrlProp;
+    }, [fetchUrlProp, parentEntityForm]);
+    // Fetch data using the hook
+    const { data, loading, error, refresh } = useCardSubCollectionData(fetchUrl, {
+        mappedBy: relation.mappedBy,
+        ...(relation.filterBy !== undefined ? { filterBy: relation.filterBy } : {}),
+        ...(fetchOptions?.useSearchForm !== undefined
+            ? { useSearchForm: fetchOptions.useSearchForm }
+            : {}),
+        ...(initialSearchForm !== undefined ? { searchForm: initialSearchForm } : {}),
+    });
+    const getFieldValue = useCallback((item, fieldName) => {
+        if (!fieldName.includes('.')) {
+            return item[fieldName];
+        }
+        const keys = fieldName.split('.');
+        let value = item;
+        for (const key of keys) {
+            if (value === null || value === undefined)
+                return undefined;
+            value = value[key];
+        }
+        return value;
+    }, []);
+    const searchValue = useCallback((value, query) => {
+        if (value === null || value === undefined)
+            return false;
+        if (typeof value === 'string') {
+            return value.toLowerCase().includes(query);
+        }
+        if (typeof value === 'object' && !Array.isArray(value)) {
+            const displayProps = ['name', 'title', 'label'];
+            for (const prop of displayProps) {
+                if (value[prop] && typeof value[prop] === 'string') {
+                    if (value[prop].toLowerCase().includes(query)) {
+                        return true;
+                    }
+                }
+            }
+        }
+        return false;
+    }, []);
+    const filteredData = useMemo(() => {
+        if (!isQuickSearchEnabled || !searchQuery.trim()) {
+            return data;
+        }
+        const query = searchQuery.toLowerCase().trim();
+        return data.filter((item) => {
+            return quickSearchFields.some((field) => {
+                const fieldName = field.getName();
+                const value = getFieldValue(item, fieldName);
+                return searchValue(value, query);
+            });
+        });
+    }, [data, searchQuery, quickSearchFields, isQuickSearchEnabled, getFieldValue, searchValue]);
+    const pageSize = cardConfig?.pageSize;
+    const isPaginationEnabled = pageSize && pageSize > 0;
+    const totalPages = useMemo(() => {
+        if (!isPaginationEnabled)
+            return 1;
+        return Math.ceil(filteredData.length / pageSize);
+    }, [filteredData.length, pageSize, isPaginationEnabled]);
+    useEffect(() => {
+        if (currentPage > totalPages && totalPages > 0) {
+            setCurrentPage(totalPages);
+        }
+        else if (currentPage < 1 && totalPages > 0) {
+            setCurrentPage(1);
+        }
+    }, [currentPage, totalPages]);
+    useEffect(() => {
+        setCurrentPage(1);
+    }, [searchQuery]);
+    const paginatedData = useMemo(() => {
+        if (!isPaginationEnabled)
+            return filteredData;
+        const startIndex = (currentPage - 1) * pageSize;
+        const endIndex = startIndex + pageSize;
+        return filteredData.slice(startIndex, endIndex);
+    }, [filteredData, currentPage, pageSize, isPaginationEnabled]);
+    const goToPage = useCallback((page) => {
+        setCurrentPage(Math.max(1, Math.min(page, totalPages)));
+    }, [totalPages]);
+    const goToFirstPage = useCallback(() => goToPage(1), [goToPage]);
+    const goToLastPage = useCallback(() => goToPage(totalPages), [goToPage, totalPages]);
+    const goToPrevPage = useCallback(() => goToPage(currentPage - 1), [goToPage, currentPage]);
+    const goToNextPage = useCallback(() => goToPage(currentPage + 1), [goToPage, currentPage]);
+    // Parse columns configuration
+    const cardColumns = useMemo(() => {
+        const columnsConfig = cardConfig?.columns;
+        if (typeof columnsConfig === 'object' && columnsConfig !== null) {
+            return columnsConfig.card;
+        }
+        return 2;
+    }, [cardConfig?.columns]);
+    // rcm-subcollection-card-grid + optional variant for sm+ breakpoint.
+    const gridClassName = useMemo(() => {
+        const variant = cardColumns >= 1 && cardColumns <= 4
+            ? ` rcm-subcollection-card-grid-${cardColumns}`
+            : ' rcm-subcollection-card-grid-2';
+        return `rcm-subcollection-card-grid${variant}`;
+    }, [cardColumns]);
+    const handleCardClick = useCallback((item) => {
+        if (viewDetail || !readonly) {
+            setSelectedItemId(item.id);
+            setModalMode(readonly ? 'view' : 'view');
+            setIsModalOpen(true);
+        }
+    }, [viewDetail, readonly]);
+    const handleEdit = useCallback((item) => {
+        if (onItemEdit) {
+            onItemEdit(item);
+        }
+        else {
+            setSelectedItemId(item.id);
+            setModalMode('edit');
+            setIsModalOpen(true);
+        }
+    }, [onItemEdit]);
+    const handleDelete = useCallback(async (item) => {
+        if (onItemDelete) {
+            onItemDelete(item);
+        }
+        else {
+            setSelectedItemId(item.id);
+            setModalMode('edit');
+            setIsModalOpen(true);
+        }
+    }, [onItemDelete]);
+    const handleAdd = useCallback(() => {
+        if (onItemAdd) {
+            onItemAdd();
+        }
+        else {
+            setSelectedItemId(null);
+            setModalMode('create');
+            setIsModalOpen(true);
+        }
+    }, [onItemAdd]);
+    const handleModalClose = useCallback(() => {
+        setIsModalOpen(false);
+        setSelectedItemId(null);
+        setModalMode(null);
+    }, []);
+    const handleSaveSuccess = useCallback(() => {
+        refresh();
+        handleModalClose();
+    }, [refresh, handleModalClose]);
+    const handleDeleteSuccess = useCallback(() => {
+        refresh();
+        handleModalClose();
+    }, [refresh, handleModalClose]);
+    const clearSearch = useCallback(() => {
+        setSearchQuery('');
+    }, []);
+    // Loading state
+    if (loading) {
+        return (_jsxs("div", { className: "rcm-subcollection-skeleton", children: [_jsxs("div", { className: "rcm-subcollection-skeleton-toolbar", children: [_jsx("div", { className: "rcm-subcollection-skeleton-search" }), _jsxs("div", { className: "rcm-subcollection-skeleton-actions", children: [_jsx("div", { className: "rcm-subcollection-skeleton-pill" }), _jsx("div", { className: "rcm-subcollection-skeleton-pill" })] })] }), _jsx("div", { className: gridClassName, children: [1, 2, 3, 4].map((i) => (_jsxs("div", { className: "rcm-subcollection-skeleton-card", children: [_jsx("div", { className: "rcm-subcollection-skeleton-card-header", children: _jsx("div", { className: "rcm-subcollection-skeleton-value" }) }), _jsxs("div", { className: "rcm-subcollection-skeleton-card-body", children: [_jsxs("div", { className: "rcm-subcollection-skeleton-card-row", children: [_jsxs("div", { className: "rcm-subcollection-skeleton-card-field", children: [_jsx("div", { className: "rcm-subcollection-skeleton-label" }), _jsx("div", { className: "rcm-subcollection-skeleton-value" })] }), _jsxs("div", { className: "rcm-subcollection-skeleton-card-field", children: [_jsx("div", { className: "rcm-subcollection-skeleton-label" }), _jsx("div", { className: "rcm-subcollection-skeleton-value" })] })] }), _jsxs("div", { className: "rcm-subcollection-skeleton-card-row", children: [_jsxs("div", { className: "rcm-subcollection-skeleton-card-field", children: [_jsx("div", { className: "rcm-subcollection-skeleton-label" }), _jsx("div", { className: "rcm-subcollection-skeleton-value" })] }), _jsxs("div", { className: "rcm-subcollection-skeleton-card-field", children: [_jsx("div", { className: "rcm-subcollection-skeleton-label" }), _jsx("div", { className: "rcm-subcollection-skeleton-value" })] })] })] })] }, i))) })] }));
+    }
+    // Error state
+    if (error) {
+        return (_jsxs("div", { className: "rcm-subcollection-error", children: [_jsx("div", { className: "rcm-subcollection-error-icon", children: _jsx(IconAlertCircle, { size: 24 }) }), _jsxs("div", { className: "rcm-subcollection-error-body", children: [_jsx("h4", { className: "rcm-subcollection-error-title", children: "\uB370\uC774\uD130\uB97C \uBD88\uB7EC\uC624\uB294 \uC911 \uC624\uB958\uAC00 \uBC1C\uC0DD\uD588\uC2B5\uB2C8\uB2E4" }), _jsx("p", { className: "rcm-subcollection-error-message", children: error.message }), _jsxs("button", { type: "button", onClick: () => refresh(), className: "rcm-subcollection-error-retry", children: [_jsx(IconRefresh, { size: 16 }), "\uB2E4\uC2DC \uC2DC\uB3C4"] })] })] }));
+    }
+    return (_jsxs("div", { className: "rcm-subcollection", children: [_jsxs("div", { className: "rcm-subcollection-toolbar", children: [isQuickSearchEnabled && (_jsxs("div", { className: "rcm-subcollection-search", children: [_jsx("span", { className: isSearchFocused
+                                    ? 'rcm-subcollection-search-icon rcm-subcollection-search-icon-focused'
+                                    : 'rcm-subcollection-search-icon', children: _jsx(IconSearch, { size: 18, stroke: 2 }) }), _jsx("input", { type: "text", value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), onFocus: () => setIsSearchFocused(true), onBlur: () => setIsSearchFocused(false), placeholder: searchPlaceholder, className: "rcm-subcollection-search-input" }), searchQuery && (_jsx("button", { type: "button", onClick: clearSearch, className: "rcm-subcollection-search-clear", "aria-label": "\uAC80\uC0C9\uC5B4 \uC9C0\uC6B0\uAE30", children: _jsx(IconX, { size: 16 }) }))] })), _jsxs("div", { className: "rcm-subcollection-actions", children: [_jsx("div", { className: "rcm-subcollection-count", children: searchQuery ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "rcm-subcollection-count-accent", children: filteredData.length }), _jsx("span", { className: "rcm-subcollection-count-sep", children: "/" }), _jsx("span", { children: data.length })] })) : (_jsxs("span", { children: [data.length, "\uAC1C"] })) }), _jsx("button", { type: "button", onClick: () => refresh(), className: "rcm-subcollection-icon-btn", title: "\uC0C8\uB85C\uACE0\uCE68", children: _jsx(IconRefresh, { size: 16, stroke: 2 }) }), tooltip && (_jsx(Tooltip, { label: tooltip, color: "gray", withArrow: true, position: "top-end", children: _jsx("div", { className: "rcm-subcollection-icon-btn rcm-subcollection-icon-btn-help", children: _jsx(IconHelp, { size: 16, stroke: 2 }) }) })), !readonly && (_jsxs("button", { type: "button", onClick: handleAdd, className: "rcm-subcollection-add-btn", children: [_jsx(IconPlus, { size: 16, stroke: 2.5 }), _jsx("span", { className: "rcm-subcollection-add-btn-label", children: "\uCD94\uAC00" })] }))] })] }), filteredData.length === 0 ? (_jsx("div", { className: "rcm-subcollection-empty", children: searchQuery ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "rcm-subcollection-empty-icon", children: _jsx(IconSearch, { size: 32 }) }), _jsxs("p", { className: "rcm-subcollection-empty-title", children: ["'", searchQuery, "'\uC5D0 \uB300\uD55C \uAC80\uC0C9 \uACB0\uACFC\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4"] }), _jsx("p", { className: "rcm-subcollection-empty-hint", children: "\uB2E4\uB978 \uD0A4\uC6CC\uB4DC\uB85C \uAC80\uC0C9\uD574 \uBCF4\uC138\uC694" }), _jsx("button", { type: "button", onClick: clearSearch, className: "rcm-subcollection-empty-action", children: "\uAC80\uC0C9 \uCD08\uAE30\uD654" })] })) : (_jsxs(_Fragment, { children: [_jsx("div", { className: "rcm-subcollection-empty-icon", children: _jsx(IconLayoutGrid, { size: 32 }) }), _jsx("p", { className: "rcm-subcollection-empty-title", children: "\uD45C\uC2DC\uD560 \uD56D\uBAA9\uC774 \uC5C6\uC2B5\uB2C8\uB2E4" }), !readonly && (_jsxs("button", { type: "button", onClick: handleAdd, className: "rcm-subcollection-empty-action", children: [_jsx(IconPlus, { size: 16 }), "\uCCAB \uBC88\uC9F8 \uD56D\uBAA9 \uCD94\uAC00"] }))] })) })) : (_jsxs(_Fragment, { children: [_jsx("div", { className: gridClassName, children: paginatedData.map((item) => (_jsx(CardItem, { item: item, entityForm: entityForm, parentEntityForm: parentEntityForm, parentId: parentId, ...(cardConfig !== undefined ? { cardConfig } : {}), relation: relation, readonly: readonly, ...(session !== undefined ? { session } : {}), ...(viewDetail ? { onClick: () => handleCardClick(item) } : {}), ...(!readonly ? { onEdit: () => handleEdit(item) } : {}), ...(!readonly ? { onDelete: () => handleDelete(item) } : {}) }, item.id))) }), isPaginationEnabled && totalPages > 1 && (_jsxs("div", { className: "rcm-subcollection-pagination", children: [_jsx("button", { type: "button", onClick: goToFirstPage, disabled: currentPage === 1, className: "rcm-subcollection-page-btn", title: "\uCCAB \uD398\uC774\uC9C0", children: _jsx(IconChevronsLeft, { size: 16, stroke: 2 }) }), _jsx("button", { type: "button", onClick: goToPrevPage, disabled: currentPage === 1, className: "rcm-subcollection-page-btn", title: "\uC774\uC804 \uD398\uC774\uC9C0", children: _jsx(IconChevronLeft, { size: 16, stroke: 2 }) }), _jsxs("div", { className: "rcm-subcollection-page-info", children: [_jsx("span", { className: "rcm-subcollection-page-info-current", children: currentPage }), _jsx("span", { className: "rcm-subcollection-count-sep", children: "/" }), _jsx("span", { children: totalPages })] }), _jsx("button", { type: "button", onClick: goToNextPage, disabled: currentPage === totalPages, className: "rcm-subcollection-page-btn", title: "\uB2E4\uC74C \uD398\uC774\uC9C0", children: _jsx(IconChevronRight, { size: 16, stroke: 2 }) }), _jsx("button", { type: "button", onClick: goToLastPage, disabled: currentPage === totalPages, className: "rcm-subcollection-page-btn", title: "\uB9C8\uC9C0\uB9C9 \uD398\uC774\uC9C0", children: _jsx(IconChevronsRight, { size: 16, stroke: 2 }) }), _jsxs("div", { className: "rcm-subcollection-page-size-badge", children: [pageSize, "\uAC1C\uC529"] })] }))] })), _jsx(CardSubCollectionModal, { isOpen: isModalOpen, entityForm: entityForm, parentEntityForm: parentEntityForm, itemId: selectedItemId, relation: relation, mode: modalMode, onClose: handleModalClose, onSave: handleSaveSuccess, onDelete: handleDeleteSuccess, readonly: readonly || modalMode === 'view', allowDelete: !readonly && modalMode === 'edit' })] }));
+};
+export default CardSubCollectionView;

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

@@ -0,0 +1,12 @@
+import { SearchForm } from '../../../form/SearchForm';
+import { DataTransferConfig } from '../../../transfer/Type';
+export declare const DataTransferModals: React.FC<{
+    openDownload: boolean;
+    setOpenDownload: (open: boolean) => void;
+    openUpload: boolean;
+    setOpenUpload: (open: boolean) => void;
+    dataTransferConfig?: DataTransferConfig;
+    searchForm: SearchForm;
+    title: string;
+    refresh: () => void;
+}>;

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

@@ -0,0 +1,10 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { DataExporter } from '../../../transfer/DataExporter';
+import { DataImporter } from '../../../transfer/DataImporter';
+import { isTrue } from '../../../utils/BooleanUtil';
+export const DataTransferModals = ({ openDownload, setOpenDownload, openUpload, setOpenUpload, dataTransferConfig, searchForm, title, refresh, }) => (_jsxs(_Fragment, { children: [openDownload && (_jsx(DataExporter, { ...(dataTransferConfig?.export !== undefined ? { config: dataTransferConfig.export } : {}), searchForm: searchForm, fileName: dataTransferConfig?.getExportFileName() ?? 'export', onClose: () => setOpenDownload(false) })), openUpload && (_jsx(DataImporter, { ...(dataTransferConfig?.import !== undefined ? { config: dataTransferConfig.import } : {}), sampleFileName: `${title}_Sample`, onClose: (result) => {
+                setOpenUpload(false);
+                if (isTrue(result)) {
+                    refresh();
+                }
+            } }))] }));

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

@@ -0,0 +1,11 @@
+import { ItemCheckable, SelectionOptions } from '../types/ViewListGrid.types';
+interface EntireCheckerProps extends ItemCheckable {
+    total: number;
+    listIds: string[];
+    subCollection?: boolean;
+    selectionOptions?: SelectionOptions;
+    rows?: any[];
+    showCheckboxInput?: boolean;
+}
+export declare const EntireChecker: ({ total, listIds, checkedItems, setCheckedItems, subCollection, selectionOptions, rows, showCheckboxInput, }: EntireCheckerProps) => import("react/jsx-runtime").JSX.Element | null;
+export {};

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

@@ -0,0 +1,46 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { isTrue } from '../../../utils/BooleanUtil';
+import { v1 } from 'uuid';
+export const EntireChecker = ({ total, listIds, checkedItems, setCheckedItems, subCollection, selectionOptions, rows, showCheckboxInput, }) => {
+    // 선택 가능한 항목 필터링
+    const selectableIds = selectionOptions?.selectableFilter && rows
+        ? rows.filter(selectionOptions.selectableFilter).map((item) => item.id)
+        : listIds;
+    const checkAll = selectableIds.length > 0 && selectableIds.every((id) => checkedItems.includes(id));
+    function checkAllItems() {
+        if (!selectionOptions?.selectableFilter) {
+            // 기존 로직
+            if (checkedItems.length === 0) {
+                setCheckedItems?.([...listIds]);
+            }
+            else {
+                setCheckedItems?.([]);
+            }
+        }
+        else {
+            // selectableFilter가 있을 때
+            if (checkAll) {
+                // 선택 가능한 항목들을 제거
+                const newCheckedItems = checkedItems.filter((id) => !selectableIds.includes(id));
+                setCheckedItems?.(newCheckedItems);
+            }
+            else {
+                // 선택 가능한 항목들을 추가
+                const newCheckedItems = [...new Set([...checkedItems, ...selectableIds])];
+                setCheckedItems?.(newCheckedItems);
+            }
+        }
+        // 선택 변경 콜백
+        if (selectionOptions?.onSelectionChange) {
+            selectionOptions.onSelectionChange(checkedItems, rows || []);
+        }
+    }
+    if (total < 1)
+        return null;
+    const id = isTrue(subCollection) ? v1() : 'entire-checker';
+    // showCheckboxInput이 false면 체크박스 없이 '#' 표시
+    if (!showCheckboxInput) {
+        return _jsx("div", { className: "rcm-entire-checker-placeholder", children: "#" });
+    }
+    return (_jsx("input", { type: 'checkbox', "aria-label": "\uC804\uCCB4 \uC120\uD0DD", className: "rcm-checkbox", id: id, checked: checkAll, onChange: () => checkAllItems() }));
+};

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import { ListableFormField } from '../../fields/abstract';
+interface FieldSelectorProps {
+    availableFields: ListableFormField<any>[];
+    selectedFieldNames: Set<string>;
+    onToggleField: (fieldName: string) => void;
+    onSelectAll: () => void;
+    onDeselectAll: () => void;
+}
+export declare const FieldSelector: React.MemoExoticComponent<({ availableFields, selectedFieldNames, onToggleField, onSelectAll, onDeselectAll, }: FieldSelectorProps) => import("react/jsx-runtime").JSX.Element>;
+export {};

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

@@ -0,0 +1,40 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useCallback, useMemo, useState } from 'react';
+import { getTranslation } from '../../../utils/i18n';
+import { IconCheck, IconSearch } from '@tabler/icons-react';
+/**
+ * Field selector component for choosing which fields to display in advanced search
+ */
+const FieldSelectorInner = ({ availableFields, selectedFieldNames, onToggleField, onSelectAll, onDeselectAll, }) => {
+    const [searchQuery, setSearchQuery] = useState('');
+    const [isExpanded, setIsExpanded] = useState(false);
+    const { t } = getTranslation();
+    // Filter fields based on search query
+    const filteredFields = useMemo(() => {
+        if (!searchQuery.trim()) {
+            return availableFields;
+        }
+        const query = searchQuery.toLowerCase();
+        return availableFields.filter((field) => {
+            const label = field.viewLabel(t);
+            const name = field.getName();
+            return ((typeof label === 'string' && label.toLowerCase().includes(query)) ||
+                name.toLowerCase().includes(query));
+        });
+    }, [availableFields, searchQuery, t]);
+    const handleSearchChange = useCallback((e) => {
+        setSearchQuery(e.target.value);
+    }, []);
+    // availableFields에 포함된 필드 중 선택된 것만 카운트
+    // (통합검색 모드에서 quickSearch 필드가 제외될 때 정확한 숫자 표시)
+    const selectedCount = availableFields.filter((field) => selectedFieldNames.has(field.getName())).length;
+    const totalCount = availableFields.length;
+    return (_jsxs("div", { className: "rcm-field-selector", children: [_jsxs("div", { className: "rcm-field-selector-header", onClick: () => setIsExpanded(!isExpanded), children: [_jsxs("div", { className: "rcm-field-selector-header-left", children: [_jsx("span", { className: "rcm-text", "data-weight": "medium", children: "\uAC80\uC0C9 \uD544\uB4DC \uC120\uD0DD" }), _jsxs("span", { className: "rcm-badge", "data-color": "primary", "data-size": "sm", children: [selectedCount, "/", totalCount] })] }), _jsxs("div", { className: "rcm-field-selector-header-right", children: [!isExpanded && selectedCount > 0 && (_jsxs("span", { className: "rcm-text", "data-size": "xs", "data-tone": "muted", children: [selectedCount, "\uAC1C \uC120\uD0DD\uB428"] })), _jsx("button", { type: "button", className: "rcm-icon-btn", "data-size": "sm", "aria-label": isExpanded ? '접기' : '펼치기', children: _jsx("svg", { className: `rcm-icon ${isExpanded ? 'rcm-rotate-180' : ''}`, "data-size": "sm", "data-tone": "muted", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) }) })] })] }), isExpanded && (_jsxs("div", { className: "rcm-field-selector-body", children: [_jsxs("div", { className: "rcm-field-selector-search-row", children: [_jsxs("div", { className: "rcm-field-selector-search-input-wrap", children: [_jsx(IconSearch, { className: "rcm-icon rcm-field-selector-search-icon", "data-size": "sm", "data-tone": "muted" }), _jsx("input", { type: "text", placeholder: "\uD544\uB4DC \uAC80\uC0C9...", value: searchQuery, onChange: handleSearchChange, className: "rcm-input", "data-size": "sm" })] }), _jsx("button", { type: "button", onClick: onSelectAll, className: "rcm-button", "data-variant": "ghost", "data-size": "sm", children: "\uC804\uCCB4 \uC120\uD0DD" }), _jsx("button", { type: "button", onClick: onDeselectAll, className: "rcm-button", "data-variant": "ghost", "data-size": "sm", children: "\uC804\uCCB4 \uD574\uC81C" })] }), _jsxs("div", { className: "rcm-field-selector-list", children: [_jsx("div", { className: "rcm-field-selector-grid", children: filteredFields.map((field) => {
+                                    const fieldName = field.getName();
+                                    const isSelected = selectedFieldNames.has(fieldName);
+                                    return (_jsxs("button", { type: "button", onClick: () => onToggleField(fieldName), className: "rcm-chip", "data-interactive": true, "data-state": isSelected ? 'selected' : undefined, children: [_jsx("span", { className: `rcm-field-selector-chip-check ${isSelected ? 'rcm-field-selector-chip-check-selected' : ''}`, children: isSelected && (_jsx(IconCheck, { className: "rcm-icon rcm-field-selector-chip-check-icon", "data-size": "xs" })) }), _jsx("span", { className: "rcm-truncate", children: field.viewLabel(t) })] }, fieldName));
+                                }) }), filteredFields.length === 0 && (_jsx("span", { className: "rcm-text rcm-field-selector-empty", "data-tone": "muted", children: "\uAC80\uC0C9 \uACB0\uACFC\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4" }))] })] }))] }));
+};
+export const FieldSelector = memo(FieldSelectorInner);
+FieldSelector.displayName = 'FieldSelector';

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

@@ -0,0 +1,7 @@
+interface FilterButtonProps {
+    isActive: boolean;
+    onClick: () => void;
+    disabled?: boolean;
+}
+export declare const FilterButton: ({ isActive, onClick, disabled }: FilterButtonProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { IconFilter } from '@tabler/icons-react';
+export const FilterButton = ({ isActive, onClick, disabled }) => {
+    return (_jsx("button", { onClick: onClick, disabled: disabled, className: `inline-flex items-center transition-colors ${isActive ? 'text-primary' : 'text-gray-400 hover:text-primary'} ${disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}`, "aria-label": "\uD544\uD130", type: "button", children: _jsx(IconFilter, { className: "w-3.5 h-3.5 mt-0.5" }) }));
+};

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

@@ -0,0 +1,15 @@
+import React from 'react';
+export type FilterDropdownSize = 'sm' | 'md' | 'lg';
+export type FilterDropdownPlacement = 'left' | 'right';
+interface FilterDropdownProps {
+    isOpen: boolean;
+    onClose: () => void;
+    children: React.ReactNode;
+    onApply?: () => void;
+    onClear?: () => void;
+    size?: FilterDropdownSize;
+    placement?: FilterDropdownPlacement;
+    anchorRef?: React.RefObject<HTMLElement | null>;
+}
+export declare const FilterDropdown: ({ isOpen, onClose, children, onApply, onClear, size, placement, anchorRef, }: FilterDropdownProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,106 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment, useCallback, useEffect, useRef, useState } from 'react';
+import ReactDOM from 'react-dom';
+import { Transition } from '@headlessui/react';
+import { IconX } from '@tabler/icons-react';
+import { getOverlayZIndex } from '../../../store';
+export const FilterDropdown = ({ isOpen, onClose, children, onApply, onClear, size = 'sm', placement = 'left', anchorRef, }) => {
+    const dropdownRef = useRef(null);
+    const [zIndex, setZIndex] = useState(50);
+    const [positionStyle, setPositionStyle] = useState({});
+    // z-index 동적 계산
+    useEffect(() => {
+        if (isOpen) {
+            setZIndex(getOverlayZIndex());
+        }
+    }, [isOpen]);
+    // 크기별 너비 (px)
+    const getDropdownWidth = () => {
+        switch (size) {
+            case 'sm':
+                return 260;
+            case 'md':
+                return 360;
+            case 'lg':
+                return 420;
+            default:
+                return 260;
+        }
+    };
+    // 크기별 클래스 설정
+    const getSizeClass = () => {
+        switch (size) {
+            case 'sm':
+                return 'rcm-filter-dropdown-sm';
+            case 'md':
+                return 'rcm-filter-dropdown-md';
+            case 'lg':
+                return 'rcm-filter-dropdown-lg';
+            default:
+                return 'rcm-filter-dropdown-sm';
+        }
+    };
+    // Portal + fixed positioning based on anchor element
+    const updatePosition = useCallback(() => {
+        if (!anchorRef?.current)
+            return;
+        const rect = anchorRef.current.getBoundingClientRect();
+        const dropdownWidth = getDropdownWidth();
+        const style = {
+            position: 'fixed',
+            top: rect.bottom + 8,
+        };
+        if (placement === 'right') {
+            style.left = Math.max(0, rect.right - dropdownWidth);
+        }
+        else {
+            style.left = rect.left;
+        }
+        setPositionStyle(style);
+    }, [anchorRef, placement, size]);
+    useEffect(() => {
+        if (isOpen && anchorRef?.current) {
+            updatePosition();
+        }
+    }, [isOpen, updatePosition]);
+    // Recalculate on scroll/resize
+    useEffect(() => {
+        if (!isOpen || !anchorRef?.current)
+            return;
+        const handleReposition = () => updatePosition();
+        window.addEventListener('scroll', handleReposition, true);
+        window.addEventListener('resize', handleReposition);
+        return () => {
+            window.removeEventListener('scroll', handleReposition, true);
+            window.removeEventListener('resize', handleReposition);
+        };
+    }, [isOpen, updatePosition]);
+    // Fallback: inline absolute positioning when no anchorRef
+    const getPlacementStyle = () => {
+        if (placement === 'right') {
+            return { top: '100%', right: 0 };
+        }
+        return { top: '100%', left: 0 };
+    };
+    // ESC 키 감지
+    useEffect(() => {
+        const handleEscape = (event) => {
+            if (event.key === 'Escape') {
+                onClose();
+            }
+        };
+        if (isOpen) {
+            document.addEventListener('keydown', handleEscape);
+        }
+        return () => {
+            document.removeEventListener('keydown', handleEscape);
+        };
+    }, [isOpen, onClose]);
+    const usePortal = !!anchorRef?.current;
+    const dropdownContent = (_jsx(Transition, { show: isOpen, as: Fragment, enter: "transition ease-out duration-100", enterFrom: "transform opacity-0 scale-95", enterTo: "transform opacity-100 scale-100", leave: "transition ease-in duration-75", leaveFrom: "transform opacity-100 scale-100", leaveTo: "transform opacity-0 scale-95", children: _jsx("div", { ref: dropdownRef, className: `rcm-filter-dropdown ${usePortal ? '' : 'rcm-filter-dropdown-floating'} ${getSizeClass()}`, style: usePortal ? { ...positionStyle, zIndex } : { ...getPlacementStyle(), zIndex }, children: _jsxs("div", { className: "rcm-filter-dropdown-inner", children: [_jsxs("div", { className: "rcm-filter-dropdown-header", children: [_jsx("span", { className: "rcm-text", "data-size": "sm", "data-weight": "semibold", children: "\uD544\uD130" }), _jsx("button", { type: "button", onClick: onClose, className: "rcm-icon-btn", "data-size": "sm", "aria-label": "\uB2EB\uAE30", children: _jsx(IconX, { className: "rcm-icon", "data-size": "sm" }) })] }), _jsx("div", { className: "rcm-filter-dropdown-body", children: children }), _jsxs("div", { className: "rcm-filter-dropdown-footer", children: [onClear && (_jsx("button", { type: "button", className: "rcm-button", "data-variant": "outline", "data-color": "error", "data-size": "sm", onClick: onClear, children: "\uCD08\uAE30\uD654" })), onApply && (_jsx("button", { type: "button", className: "rcm-button", "data-variant": "primary", "data-size": "sm", onClick: onApply, children: "\uC801\uC6A9" }))] })] }) }) }));
+    if (usePortal) {
+        return ReactDOM.createPortal(dropdownContent, document.body);
+    }
+    return dropdownContent;
+};

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

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

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

@@ -0,0 +1,22 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { isTrue } from '../../../utils/BooleanUtil';
+import { useEffect, useState } from 'react';
+export const FilterView = ({ entityForm, field, value, resetValue, onChange }) => {
+    const [view, setView] = useState(undefined);
+    useEffect(() => {
+        if (field.isFilterable()) {
+            (async () => {
+                const view = await field.viewListFilter({
+                    entityForm: entityForm,
+                    onChange: (value, op) => onChange(field.getName(), value, op),
+                    value: isTrue(resetValue) ? undefined : value,
+                });
+                setView(view);
+            })();
+        }
+    }, []);
+    if (view === undefined || view == null)
+        return null;
+    return _jsx("div", { children: view });
+};

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

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+import { ListGridHeaderProps } from '../types/ListGridHeader.types';
+export declare const HeaderActionButtons: React.FC<ListGridHeaderProps & {
+    headerButtons: ReactNode[];
+    checkedButtons: ReactNode[];
+} & {
+    setOpenDownload: (val: boolean) => void;
+    setOpenUpload: (val: boolean) => void;
+    neverDelete?: boolean;
+}>;

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

@@ -0,0 +1,39 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Tooltip } from '../../../ui';
+import { useLoadingStore } from '../../../loading';
+import { isTrue } from '../../../utils/BooleanUtil';
+import { IconDownload, IconPlus, IconTrash, IconUpload } from '@tabler/icons-react';
+import { CacheClearButton } from './buttons/CacheClearButton';
+import { isEmpty } from '../../../utils';
+export const HeaderActionButtons = (props) => {
+    const { headerButtons, supportPriority, isSubCollection, setManagePriority, cacheable, entityForm, setNotifications, setErrors, refresh, dataTransferConfig, setOpenDownload, setOpenUpload, enableHandleData, activeTrashIcon, deleteItems, neverDelete, checkedItems, checkedButtons, addNew, router, path, selectionOptions, rows, readonly, } = props;
+    const { setOpenBaseLoading } = useLoadingStore();
+    return (_jsxs("div", { className: "rcm-header-actions", children: [headerButtons, supportPriority && !isSubCollection && (_jsx(Tooltip, { label: "\uB9AC\uC2A4\uD2B8 \uAC01 \uD589\uC758 \uB9E8 \uC88C\uCE21 \uC5F4\uC744 \uB4DC\uB798\uADF8\uD574 \uC6B0\uC120\uC21C\uC704\uB97C \uBCC0\uACBD\uD560 \uC218 \uC788\uC2B5\uB2C8\uB2E4", children: _jsx("button", { type: "button", className: "rcm-button", "data-variant": "primary", onClick: setManagePriority, children: "\uC6B0\uC120\uC21C\uC704 \uBCC0\uACBD" }) })), cacheable && !isSubCollection && (_jsx(CacheClearButton, { entityForm: entityForm, setNotifications: setNotifications, setErrors: setErrors, onRefresh: refresh })), !isSubCollection && !readonly && isTrue(dataTransferConfig?.isSupportExport()) && (_jsxs("button", { type: "button", className: "rcm-button", "data-variant": "primary", onClick: () => setOpenDownload(true), children: [_jsx(IconDownload, { className: "rcm-btn-icon" }), "\uB2E4\uC6B4\uB85C\uB4DC"] })), !isSubCollection && !readonly && isTrue(dataTransferConfig?.isSupportImport()) && (_jsxs("button", { type: "button", className: "rcm-button", "data-variant": "primary", onClick: () => setOpenUpload(true), children: [_jsx(IconUpload, { className: "rcm-btn-icon" }), "\uC5C5\uB85C\uB4DC"] })), !isEmpty(checkedItems) && checkedButtons.length > 0 && selectionOptions?.actions && (_jsx(_Fragment, { children: checkedButtons })), enableHandleData && (_jsxs(_Fragment, { children: [!isSubCollection &&
+                        activeTrashIcon &&
+                        (() => {
+                            const deleteButton = selectionOptions?.deleteButton;
+                            const isDeleteButtonObject = deleteButton && typeof deleteButton === 'object';
+                            return (_jsxs("button", { type: "button", className: isDeleteButtonObject && deleteButton.className
+                                    ? deleteButton.className
+                                    : 'rcm-button', "data-variant": isDeleteButtonObject && deleteButton.className ? undefined : 'outline', "data-color": isDeleteButtonObject && deleteButton.className ? undefined : 'error', onClick: async () => {
+                                    // 삭제 확인 메시지
+                                    if (isDeleteButtonObject && deleteButton.confirmMessage) {
+                                        const message = typeof deleteButton.confirmMessage === 'function'
+                                            ? deleteButton.confirmMessage(checkedItems || [])
+                                            : deleteButton.confirmMessage;
+                                        if (!confirm(message))
+                                            return;
+                                    }
+                                    deleteItems();
+                                }, children: [isDeleteButtonObject && deleteButton.icon ? (deleteButton.icon) : (_jsx(IconTrash, { className: "rcm-btn-icon" })), isDeleteButtonObject && deleteButton.label
+                                        ? typeof deleteButton.label === 'function'
+                                            ? deleteButton.label(checkedItems || [])
+                                            : deleteButton.label
+                                        : isTrue(neverDelete)
+                                            ? '사용 중지'
+                                            : '선택 삭제'] }));
+                        })(), !isEmpty(checkedItems) && checkedButtons.length > 0 && !selectionOptions?.actions && (_jsx(_Fragment, { children: checkedButtons })), !isTrue(isSubCollection) && isTrue(addNew, true) && (_jsxs("button", { className: "rcm-button", "data-variant": "primary", onClick: () => {
+                            setOpenBaseLoading(true);
+                            router.push(`${path}/add`);
+                        }, children: [_jsx(IconPlus, { className: "rcm-btn-icon" }), "\uC2E0\uADDC \uC785\uB825"] }))] }))] }));
+};