@rchemist/listgrid 0.2.6

package/dist/listgrid/components/form/ViewEntityForm.js

@@ -0,0 +1,124 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Static imports for core components
+import { ViewEntityFormTitle } from './ui/ViewEntityFormTitle';
+import { ViewEntityFormButtons } from './ui/ViewEntityFormButtons';
+import { ViewEntityFormSkeleton } from './ui/ViewEntityFormSkeleton';
+import { Tab } from '@headlessui/react';
+// Dynamic imports to reduce bundle size
+import { dynamic } from '../../utils/lazy';
+import { useEntityFormLogic } from './hooks/useEntityFormLogic';
+import { clearAllToasts } from '../../message';
+// Theme system
+import { useEntityFormTheme } from './context/EntityFormThemeContext';
+// Lazy load heavy components
+const ViewEntityFormErrors = dynamic(() => import('./ui/ViewEntityFormErrors').then((mod) => ({ default: mod.ViewEntityFormErrors })), {
+    loading: () => _jsx("div", { className: "rcm-skeleton-placeholder-xs" }),
+});
+const ViewEntityFormAlerts = dynamic(() => import('./ui/ViewEntityFormAlerts').then((mod) => ({ default: mod.ViewEntityFormAlerts })), {
+    loading: () => _jsx("div", { className: "rcm-skeleton-placeholder-xs" }),
+});
+const ViewTab = dynamic(() => import('./ViewTab').then((mod) => ({ default: mod.ViewTab })), {
+    loading: () => _jsx("div", { className: "rcm-skeleton-placeholder-tab" }),
+});
+const ViewTabPanel = dynamic(() => import('./ViewTabPanel').then((mod) => ({ default: mod.ViewTabPanel })), {
+    loading: () => _jsx("div", { className: "rcm-skeleton-placeholder-panel" }),
+});
+const SafePerfectScrollbar = dynamic(() => import('../../ui').then((mod) => ({ default: mod.SafePerfectScrollbar })), {
+    ssr: false,
+    loading: () => _jsx("div", { className: "rcm-skeleton-placeholder-fill" }),
+});
+const CreateStepView = dynamic(() => import('./ui/CreateStepView').then((mod) => ({ default: mod.CreateStepView })), {
+    loading: () => _jsx("div", { className: "rcm-skeleton-placeholder-md" }),
+});
+const CreateStepButtons = dynamic(() => import('./ui/CreateStepButtons').then((mod) => ({ default: mod.CreateStepButtons })), {
+    loading: () => _jsx("div", { className: "rcm-skeleton-placeholder-lg" }),
+});
+/**
+ * ViewEntityForm component (render-only structure)
+ * - All state/handlers/logic are managed by the useEntityFormLogic hook.
+ * - This component is responsible only for rendering structure.
+ *
+ * ViewEntityForm 컴포넌트 (최소 렌더링 구조)
+ * - 모든 상태/핸들러/로직은 useEntityFormLogic 훅에서 관리
+ * - 이 컴포넌트는 렌더링 구조만 담당
+ *
+ * @param props {ViewEntityFormProps} - EntityForm 렌더링에 필요한 모든 속성
+ * @returns {JSX.Element|null} - 렌더링 결과 또는 로딩 상태
+ */
+export const ViewEntityForm = (props) => {
+    // useEntityFormLogic 훅에서 모든 상태/핸들러/로직을 일괄 관리
+    // All state/handlers/logic are managed by the useEntityFormLogic hook
+    const { entityForm, tabIndex, setTabIndex, cacheKey, loadingError, initialized, errors, notifications, title, selectedTabIndex, setSelectedTabIndex, currentStep, setCurrentStep, showStepper, setShowStepper, tabs, isSubCollectionEntity, isInlineMode, readonly, session, useCreateStep, maxStep, createStepFields, buttons, headerAreaContent, setEntityForm, onClickSaveButton, resetEntityForm, } = useEntityFormLogic(props);
+    // 테마 시스템에서 클래스 가져오기
+    const { classNames, cn, createStepButtonPosition } = useEntityFormTheme();
+    // 로딩/에러/초기화 미완료/필수 데이터 미존재 시 로딩 UI만 표시
+    // Show loading UI if loading, error, not initialized, or required data is missing
+    const loading = loadingError || !initialized || !entityForm || !tabs || tabs.length === 0;
+    if (loading) {
+        return (_jsx(ViewEntityFormSkeleton, { ...(entityForm !== undefined ? { entityForm } : {}), inlineMode: isInlineMode, subCollectionEntity: isSubCollectionEntity }));
+    }
+    // 버튼 위치 결정 (기본값: header)
+    // 인라인 모드에서는 탭 영역 옆에 버튼 배치
+    const buttonPosition = props.buttonPosition ?? 'header';
+    const showButtonsInHeader = buttonPosition === 'header' && !isInlineMode;
+    const showButtonsInTabRow = isInlineMode;
+    return (_jsxs("div", { id: `view-entity-form-${entityForm.name}${isSubCollectionEntity ? '-sub' : ''}`, className: classNames.root, children: [_jsxs("div", { className: "rcm-form-sticky-header", children: [_jsxs("div", { className: cn('rcm-form-header', classNames.header?.container), children: [_jsx("div", { className: cn('rcm-form-header-title', classNames.header?.titleWrapper), children: _jsx(ViewEntityFormTitle, { title: title, ...(props.hideTitle !== undefined ? { hideTitle: props.hideTitle } : {}) }) }), showButtonsInHeader && (_jsx("div", { className: cn('rcm-form-header-buttons', classNames.header?.buttonWrapper), children: _jsx(ViewEntityFormButtons, { buttons: buttons }) }))] }), headerAreaContent && (_jsx("div", { className: cn('rcm-form-header-area', classNames.headerArea?.container), children: headerAreaContent }))] }), useCreateStep && entityForm && (_jsx(CreateStepView, { currentStep: currentStep, setCurrentStep: setCurrentStep, maxStep: maxStep, entityForm: entityForm, setEntityForm: setEntityForm, onClickSaveButton: onClickSaveButton, showStepper: showStepper, setShowStepper: setShowStepper, session: session ?? undefined, buttonPosition: createStepButtonPosition ?? 'top' })), _jsx(SafePerfectScrollbar, { className: cn('rcm-form-scroll-container', classNames.panel?.scrollContainer), children: _jsx("div", { className: cn('rcm-form-layout-wrapper', classNames.panel?.layoutWrapper), children: _jsx("div", { className: cn(isInlineMode ? 'rcm-form-panel rcm-form-panel-inline' : 'rcm-form-panel', classNames.panel?.container), children: _jsxs("div", { className: cn('rcm-form-panel-inner', classNames.panel?.inner), children: [_jsx(ViewEntityFormAlerts, { alertMessages: entityForm.getAlertMessages(), onRemove: (key) => {
+                                        const updatedForm = entityForm.clone().removeAlertMessage(key);
+                                        setEntityForm(updatedForm);
+                                    }, onTabChange: (tabId) => {
+                                        // tab id로 tab index 찾기
+                                        const index = tabs.findIndex((tab) => tab.id === tabId);
+                                        if (index !== -1) {
+                                            setSelectedTabIndex(index);
+                                            setTabIndex(tabId);
+                                        }
+                                    }, onFieldFocus: (fieldName) => {
+                                        // 필드가 있는 탭 찾기
+                                        const field = entityForm.getField(fieldName);
+                                        if (field) {
+                                            const fieldTabId = field.getTabId();
+                                            if (fieldTabId) {
+                                                const tabIdx = tabs.findIndex((tab) => tab.id === fieldTabId);
+                                                if (tabIdx !== -1) {
+                                                    setSelectedTabIndex(tabIdx);
+                                                    setTabIndex(fieldTabId);
+                                                    // 필드로 스크롤 (약간의 지연 후)
+                                                    setTimeout(() => {
+                                                        const fieldElement = document.querySelector(`[data-field-name="${fieldName}"]`);
+                                                        if (fieldElement) {
+                                                            fieldElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
+                                                            // 포커스 효과 추가 (선택사항)
+                                                            fieldElement.classList.add('rcm-field-focus-ring');
+                                                            setTimeout(() => {
+                                                                fieldElement.classList.remove('rcm-field-focus-ring');
+                                                            }, 2000);
+                                                        }
+                                                    }, 100);
+                                                }
+                                            }
+                                        }
+                                    } }), _jsx(ViewEntityFormErrors, { errors: errors, entityErrorMap: entityForm.getErrorMap(), notifications: notifications, onTabChange: (tabIndex) => {
+                                        clearAllToasts();
+                                        setSelectedTabIndex(tabIndex);
+                                        if (tabs[tabIndex]) {
+                                            setTabIndex(tabs[tabIndex].id);
+                                        }
+                                    }, tabs: tabs, entityForm: entityForm }), _jsxs(Tab.Group, { selectedIndex: selectedTabIndex, onChange: (index) => {
+                                        clearAllToasts();
+                                        setSelectedTabIndex(index);
+                                    }, children: [showButtonsInTabRow && (_jsxs("div", { className: `rcm-form-tab-row ${tabs.length > 1 ? 'rcm-form-tab-row-border' : ''}`, children: [_jsx("div", { className: "rcm-form-tab-row-tabs", children: tabs.length > 1 && (_jsx(Tab.List, { className: cn('rcm-tab-list-inline', useCreateStep ? 'rcm-hide' : undefined), children: tabs.map((tab, index) => (_jsx(ViewTab, { id: tab.id, label: tab.label, tabIndex: tabIndex, description: tab.description, entityForm: entityForm, createStepFields: createStepFields, setTabIndex: setTabIndex }, `${index}_${cacheKey}_tab`))) })) }), _jsx("div", { className: "rcm-form-tab-buttons", children: _jsx(ViewEntityFormButtons, { buttons: buttons }) })] })), !showButtonsInTabRow && tabs.length > 1 && (_jsx(SafePerfectScrollbar, { className: cn(useCreateStep ? 'rcm-hide' : 'rcm-tab-scroll'), children: _jsx(Tab.List, { className: cn('rcm-tab-list', classNames.tabs?.list), children: (function () {
+                                                    const tabsView = [];
+                                                    tabs.forEach((tab, index) => {
+                                                        tabsView.push(_jsx(ViewTab, { id: tab.id, label: tab.label, tabIndex: tabIndex, description: tab.description, entityForm: entityForm, createStepFields: createStepFields, setTabIndex: setTabIndex }, `${index}_${cacheKey}_tab`));
+                                                    });
+                                                    return tabsView;
+                                                })() }) })), _jsx(Tab.Panels, { children: (function () {
+                                                const panels = [];
+                                                tabs.forEach((tab, index) => {
+                                                    panels.push(_jsx(ViewTabPanel, { id: tab.id, tabIndex: tabIndex, readonly: readonly, subCollectionEntity: isSubCollectionEntity, session: session ?? undefined, createStepFields: createStepFields, entityForm: entityForm, setEntityForm: setEntityForm, resetEntityForm: resetEntityForm, hideMappedByFields: props.hideMappedByFields }, `${index}_${cacheKey}`));
+                                                });
+                                                return panels;
+                                            })() })] }), !showButtonsInTabRow && (_jsxs("div", { className: cn('rcm-form-footer', classNames.footer?.container), children: [useCreateStep && createStepButtonPosition === 'bottom' && entityForm && (_jsx(CreateStepButtons, { currentStep: currentStep, maxStep: maxStep, entityForm: entityForm, setEntityForm: setEntityForm, setCurrentStep: setCurrentStep, onClickSaveButton: onClickSaveButton, session: session ?? undefined })), !showButtonsInHeader &&
+                                            !(useCreateStep && createStepButtonPosition === 'bottom') && (_jsx(ViewEntityFormButtons, { buttons: buttons }))] }))] }) }) }) })] }));
+};

package/dist/listgrid/components/form/ViewFieldGroup.d.ts

@@ -0,0 +1,27 @@
+import { EntityFormManageable } from './types/ViewEntityForm.types';
+import { Session } from '../../auth/types';
+/**
+ * ViewFieldGroup component
+ * - Renders a group of fields and sub-collections for a given tab/group in EntityForm.
+ * - Handles collapsible panels, help text, and readonly/sub-collection logic.
+ *
+ * ViewFieldGroup 컴포넌트
+ * - EntityForm의 탭/그룹별 필드 및 서브콜렉션을 렌더링합니다.
+ * - 접기/펼치기, 도움말, 읽기전용/서브콜렉션 로직을 처리합니다.
+ *
+ * @param props {ViewFieldGroupProps} - 탭/그룹/EntityForm 정보 등
+ * @returns {JSX.Element|null} - 렌더링 결과 또는 null
+ */
+interface ViewFieldGroupProps extends EntityFormManageable {
+    groupId: string;
+    tabId: string;
+    readonly: boolean;
+    subCollectionEntity?: boolean;
+    session?: Session;
+    createStepFields?: string[];
+    resetEntityForm?: (delay?: number, preserveState?: boolean) => Promise<void>;
+    /** MappedBy field name for hiding parent reference fields in SubCollection */
+    hideMappedByFields?: string;
+}
+export declare const ViewFieldGroup: ({ entityForm, setEntityForm, readonly, subCollectionEntity, session, createStepFields, hideMappedByFields, ...props }: ViewFieldGroupProps) => import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/listgrid/components/form/ViewFieldGroup.js

@@ -0,0 +1,164 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from 'react';
+import { FormField, FULL_WIDTH_FIELD_TYPES } from '../fields/abstract';
+import { FieldRenderer } from './FieldRenderer';
+import { isEmpty } from '../../utils';
+import { SubCollectionRenderer } from './SubCollectionRenderer';
+import { getTranslation } from '../../utils/i18n';
+import { isBlank } from '../../utils/StringUtil';
+import { ViewHelpIcon } from './ui/ViewHelpIcon';
+import { useEntityFormTheme } from './context/EntityFormThemeContext';
+/**
+ * Determine grid col-span class based on field layout type.
+ * Uses library-owned `rcm-col-span-full` (defined in base.css) instead of
+ * Tailwind's `col-span-full` — the host's Tailwind content scanner does not
+ * include @rchemist/listgrid sources in node_modules, so Tailwind utilities
+ * placed inside library JSX never get generated.
+ */
+function getFieldColSpanClass(field) {
+    if (field.layout === 'full')
+        return 'rcm-col-span-full';
+    if (field.layout === 'half')
+        return '';
+    // auto: FULL_WIDTH_FIELD_TYPES get full width
+    if (FULL_WIDTH_FIELD_TYPES.includes(field.type))
+        return 'rcm-col-span-full';
+    return '';
+}
+export const ViewFieldGroup = ({ entityForm, setEntityForm, readonly, subCollectionEntity, session, createStepFields, hideMappedByFields, ...props }) => {
+    const { classNames, cn } = useEntityFormTheme();
+    // 현재 그룹의 필드, 서브콜렉션, 그룹 정보 상태
+    // State for fields, sub-collections, and group info in this group
+    const [fields, setFields] = useState();
+    const [subCollections, setSubCollections] = useState();
+    const [fieldGroup, setFieldGroup] = useState();
+    const [open, setOpen] = useState(true); // 패널 열림/닫힘 상태
+    const [collapsable, setCollapsable] = useState(true); // 접기/펼치기 가능 여부
+    /**
+     * Filter fields based on hideMappedByFields (mappedBy field name)
+     * SubCollection에서 부모 참조 필드 자동 숨김 처리
+     *
+     * Filters out:
+     * - Exact mappedBy field (e.g., "studentId", "enrollment.student.id")
+     * - Base field without Id/.id suffix (e.g., "student" from "studentId", "enrollment.student" from "enrollment.student.id")
+     * - Nested patterns (e.g., "student.name", "enrollment.student.name")
+     *
+     * 예시:
+     * - mappedBy="studentId" → studentId, student, student.* 숨김
+     * - mappedBy="enrollment.student.id" → enrollment.student.id, enrollment.student, enrollment.student.* 숨김
+     */
+    const filteredFields = useMemo(() => {
+        if (!fields || !hideMappedByFields || hideMappedByFields.trim() === '') {
+            return fields;
+        }
+        const mappedBy = hideMappedByFields.trim();
+        // Generate patterns to exclude
+        const patternsToExclude = new Set();
+        // 1. Exact mappedBy field (e.g., "studentId", "enrollment.student.id")
+        patternsToExclude.add(mappedBy);
+        // 2. Base field without Id/.id suffix
+        let baseField = mappedBy;
+        // Handle "studentId" format (camelCase Id suffix)
+        if (mappedBy.endsWith('Id')) {
+            baseField = mappedBy.slice(0, -2);
+        }
+        // Handle "enrollment.student.id" format (dot notation .id suffix)
+        else if (mappedBy.endsWith('.id')) {
+            baseField = mappedBy.slice(0, -3);
+        }
+        patternsToExclude.add(baseField);
+        // 3. Nested pattern prefix (e.g., "student.", "enrollment.student.")
+        const nestedPattern = `${baseField}.`;
+        return fields.filter((field) => {
+            if (!(field instanceof FormField)) {
+                return true; // Keep non-FormField items
+            }
+            const fieldName = field.getName();
+            // Exact match - exclude
+            if (patternsToExclude.has(fieldName)) {
+                return false;
+            }
+            // Nested pattern match - exclude (e.g., student.name, enrollment.student.name)
+            if (fieldName.startsWith(nestedPattern)) {
+                return false;
+            }
+            return true;
+        });
+    }, [fields, hideMappedByFields]);
+    useEffect(() => {
+        // 마운트 시 필드/서브콜렉션/그룹 정보 비동기 조회
+        // On mount, fetch fields, sub-collections, and group info asynchronously
+        (async () => {
+            const fieldInfo = await entityForm?.getVisibleFields(props.tabId, props.groupId, session, createStepFields);
+            setFieldGroup(fieldInfo?.fieldGroup);
+            setFields(fieldInfo?.fields ?? []);
+            // fieldGroup의 config.open 값으로 초기 상태 설정
+            // Set initial state based on fieldGroup's config.open value
+            if (fieldInfo?.fieldGroup) {
+                setOpen(fieldInfo.fieldGroup.config?.open ?? true);
+            }
+            const collectionInfo = await entityForm?.getVisibleCollections(props.tabId, props.groupId, session);
+            setSubCollections(collectionInfo?.collections ?? []);
+            let collapsable = false;
+            // 두 개 이상의 fieldGroup이 있고, 현재 그룹이 hidden이 아니면 접기/펼치기 활성화
+            // Enable collapsible if there are multiple fieldGroups and this group is not hidden
+            const fieldGroups = entityForm.getTab(props.tabId)?.fieldGroups ?? [];
+            if (fieldGroups.length > 1) {
+                for (const fieldGroup of fieldGroups) {
+                    if (fieldGroup.id !== props.groupId &&
+                        (await entityForm.isViewableFieldGroup({
+                            tabId: props.tabId,
+                            fieldGroupId: fieldGroup.id,
+                            createStepFields,
+                        }))) {
+                        collapsable = true;
+                        break;
+                    }
+                }
+            }
+            setCollapsable(collapsable);
+        })();
+    }, []);
+    // 필드 또는 서브콜렉션이 하나라도 있으면 표시 (필터링된 필드 기준)
+    // Show if there is at least one field or sub-collection (using filtered fields)
+    const showFields = !isEmpty(filteredFields);
+    const showCollections = entityForm?.id !== undefined && !isEmpty(subCollections);
+    // 그룹 정보가 없거나, 표시할 필드/서브콜렉션이 없으면 렌더링하지 않음
+    // If no group info or nothing to show, do not render
+    if (fieldGroup === undefined || !(showFields || showCollections))
+        return null;
+    const { t } = getTranslation();
+    const helpText = fieldGroup.description ? t(fieldGroup.description) : '';
+    // SubCollection 인라인 모드: 컴팩트한 패널 박스 스타일
+    // SubCollection inline mode: compact panel box style
+    const containerClass = subCollectionEntity
+        ? 'rcm-fieldgroup-subcollection'
+        : cn('rcm-fieldgroup', classNames.fieldGroup?.container);
+    return (_jsx(_Fragment, { children: _jsxs("div", { className: containerClass, children: [_jsx("div", { className: cn(open ? 'rcm-fieldgroup-header' : '', subCollectionEntity ? '' : classNames.fieldGroup?.header), children: _jsx("div", { className: "rcm-row-between", children: _jsxs("h5", { className: cn('rcm-fieldgroup-title', subCollectionEntity ? '' : classNames.fieldGroup?.title), children: [fieldGroup.label, _jsxs("div", { className: cn('rcm-row rcm-gap-sm', subCollectionEntity ? '' : classNames.fieldGroup?.actions), children: [!isBlank(helpText) && _jsx(ViewHelpIcon, { helpText: helpText }), collapsable && (_jsx("span", { className: cn('rcm-fieldgroup-collapse', subCollectionEntity ? '' : classNames.fieldGroup?.collapseToggle), onClick: () => {
+                                                setOpen(!open);
+                                            }, children: _jsx("div", { className: open ? '' : 'rcm-rotate-180', children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", children: _jsx("path", { stroke: "#5B6B79", strokeLinecap: "round", strokeLinejoin: "round", strokeMiterlimit: "10", strokeWidth: "1.5", d: "M19.92 15.05L13.4 8.53c-.77-.77-2.03-.77-2.8 0l-6.52 6.52" }) }) }) }))] })] }) }) }), open && (_jsxs("div", { className: cn(subCollectionEntity ? 'rcm-stack' : 'rcm-field-grid', subCollectionEntity ? undefined : classNames.fieldGroup?.content), children: [filteredFields?.map((field, index) => {
+                            if (field instanceof FormField) {
+                                if (readonly) {
+                                    field.withReadOnly(true);
+                                }
+                                // If the previous field has lineBreak, force this field to start at column 1
+                                const prevField = index > 0 ? filteredFields?.[index - 1] : null;
+                                const forceNewRow = prevField instanceof FormField && prevField.lineBreak;
+                                const colSpanClass = getFieldColSpanClass(field);
+                                const className = forceNewRow ? `${colSpanClass} rcm-col-start-1-lg` : colSpanClass;
+                                return (_jsx("div", { className: className, children: _jsx(FieldRenderer, { field: field, entityForm: entityForm, ...(setEntityForm !== undefined ? { setEntityForm } : {}), ...(subCollectionEntity !== undefined ? { subCollectionEntity } : {}), ...(session !== undefined ? { session } : {}), ...(props.resetEntityForm !== undefined
+                                            ? { resetEntityForm: props.resetEntityForm }
+                                            : {}) }) }, field.getName()));
+                            }
+                            else {
+                                return null;
+                            }
+                        }), showCollections &&
+                            subCollections?.map((collection) => {
+                                if (readonly) {
+                                    collection.withReadOnly(true);
+                                }
+                                return (_jsx("div", { className: "rcm-col-span-full", children: _jsx(SubCollectionRenderer, { entityForm: entityForm, collection: collection, ...(session !== undefined ? { session } : {}) }) }, `subCollection_${collection.getName()}_${entityForm.id}`));
+                            })] }))] }) }));
+};

package/dist/listgrid/components/form/ViewTab.d.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+import { TabIndexable } from './types/ViewEntityForm.types';
+import { EntityForm } from '../../config/EntityForm';
+/**
+ * ViewTab component
+ * - Renders a single tab button for EntityForm's tab navigation.
+ * - Handles tab selection, description tooltip, and dynamic field group visibility.
+ *
+ * ViewTab 컴포넌트
+ * - EntityForm의 탭 네비게이션에서 단일 탭 버튼을 렌더링합니다.
+ * - 탭 선택, 설명 툴팁, 동적 필드 그룹 표시를 처리합니다.
+ *
+ * @param props {ViewTabProps} - 탭 정보, 인덱스, EntityForm 인스턴스 등
+ * @returns {JSX.Element|null} - 렌더링 결과 또는 null
+ */
+interface ViewTabProps extends TabIndexable {
+    id: string;
+    label: string;
+    description?: string | React.ReactNode;
+    entityForm: EntityForm;
+    createStepFields?: string[];
+}
+export declare const ViewTab: ({ id, tabIndex, label, setTabIndex, entityForm, createStepFields, ...props }: ViewTabProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/listgrid/components/form/ViewTab.js

@@ -0,0 +1,68 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment, useEffect, useState } from 'react';
+import { Tab } from '@headlessui/react';
+import { Tooltip } from '../../ui';
+import { getTranslation } from '../../utils/i18n';
+import { useEntityFormTheme } from './context/EntityFormThemeContext';
+export const ViewTab = ({ id, tabIndex, label, setTabIndex, entityForm, createStepFields, ...props }) => {
+    const { classNames, cn } = useEntityFormTheme();
+    // 현재 탭에서 표시할 필드 그룹 id 목록
+    // List of field group ids to display in this tab
+    const [groups, setGroups] = useState([]);
+    useEffect(() => {
+        // 탭이 마운트될 때, 표시 가능한 필드 그룹 목록을 비동기로 조회
+        // On mount, fetch viewable field groups for this tab asynchronously
+        (async () => {
+            const viewableFieldGroups = await entityForm.getViewableFieldGroups({
+                tabId: id,
+                createStepFields,
+            });
+            setGroups(viewableFieldGroups);
+        })();
+    }, [id, createStepFields?.join(','), entityForm]); // tabIndex 의존성 제거, createStepFields를 문자열로 변환
+    // CreateStep에서 필드가 없는 탭은 숨김 처리하되 null 반환하지 않음
+    // 이렇게 해야 Tab.Group의 selectedIndex가 깨지지 않음
+    const hasContent = groups.length > 0;
+    const { t } = getTranslation();
+    // description이 string이면 번역, 아니면 그대로 사용
+    // If description is a string, translate it; otherwise, use as is
+    let description = undefined;
+    if (props.description !== undefined) {
+        if (typeof props.description === 'string') {
+            description = t(props.description);
+        }
+        else {
+            description = props.description;
+        }
+    }
+    /**
+     * ShowButton
+     * - 실제 탭 버튼 렌더링 및 선택 처리
+     * - 선택 시 스타일 강조, 클릭 시 setTabIndex 호출
+     *
+     * 실제로는 headlessui의 Tab 컴포넌트와 연동됨
+     *
+     * @param selected {boolean} - 현재 탭이 선택되었는지 여부
+     * @returns {JSX.Element} - 버튼 렌더링
+     */
+    function ShowButton(selected) {
+        // primitive + data-state: rcm-tab 기본 + [data-state="selected"|"disabled"]
+        let buttonClass = cn('rcm-tab', classNames.tabs?.tab);
+        if (selected) {
+            buttonClass = cn(buttonClass, classNames.tabs?.tabSelected);
+        }
+        if (!hasContent) {
+            buttonClass = cn(buttonClass, classNames.tabs?.tabDisabled);
+        }
+        const dataState = !hasContent ? 'disabled' : selected ? 'selected' : undefined;
+        return (_jsx("div", { style: { display: hasContent ? 'block' : 'none' }, children: _jsx("button", { className: buttonClass, "data-state": dataState, onClick: () => {
+                    if (hasContent) {
+                        setTabIndex?.(id);
+                    }
+                }, disabled: !hasContent, children: label }) }));
+    }
+    // description이 있으면 Tooltip으로 감싸서 렌더링, 없으면 바로 버튼 렌더링
+    // If description exists, wrap with Tooltip; otherwise, render button directly
+    return (_jsx(Tab, { as: Fragment, children: ({ selected }) => description === undefined ? (ShowButton(selected)) : (_jsx(Tooltip, { label: description, children: ShowButton(selected) })) }));
+};

package/dist/listgrid/components/form/ViewTabPanel.d.ts

@@ -0,0 +1,14 @@
+import { EntityFormManageable, TabIndexable } from './types/ViewEntityForm.types';
+import { Session } from '../../auth/types';
+interface ViewTabPanelProps extends TabIndexable, EntityFormManageable {
+    id: string;
+    readonly: boolean;
+    subCollectionEntity?: boolean;
+    session?: Session;
+    createStepFields?: string[];
+    resetEntityForm?: (delay?: number, preserveState?: boolean) => Promise<void>;
+    /** MappedBy field name for hiding parent reference fields in SubCollection */
+    hideMappedByFields?: string;
+}
+export declare const ViewTabPanel: ({ id, tabIndex, entityForm, setEntityForm, readonly, subCollectionEntity, session, createStepFields, resetEntityForm, hideMappedByFields, ...props }: ViewTabPanelProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/listgrid/components/form/ViewTabPanel.js

@@ -0,0 +1,32 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Tab } from '@headlessui/react';
+import { useEffect, useState } from 'react';
+import { ViewFieldGroup } from './ViewFieldGroup';
+import { useEntityFormTheme } from './context/EntityFormThemeContext';
+export const ViewTabPanel = ({ id, tabIndex, entityForm, setEntityForm, readonly, subCollectionEntity, session, createStepFields, resetEntityForm, hideMappedByFields, ...props }) => {
+    const { classNames, cn } = useEntityFormTheme();
+    const [groups, setGroups] = useState([]);
+    useEffect(() => {
+        setGroups([]);
+        (async () => {
+            const viewableFieldGroups = await entityForm.getViewableFieldGroups({
+                tabId: id,
+                createStepFields,
+            });
+            setGroups(viewableFieldGroups);
+        })();
+    }, [id, createStepFields?.join(','), entityForm]); // tabIndex 의존성 제거, createStepFields를 문자열로 변환하여 안정적인 비교
+    // Tab.Group에서 자동으로 활성화/비활성화되므로 별도의 조건 체크 제거
+    // Tab.Group automatically handles activation/deactivation, so remove separate condition check
+    if (groups.length === 0) {
+        return (_jsx(Tab.Panel, { className: classNames.tabPanel?.panel, unmount: false, children: _jsx("div", { className: cn('p-4 text-gray-500 dark:text-gray-400', classNames.tabPanel?.empty), children: "\uC774 \uB2E8\uACC4\uC5D0\uC11C\uB294 \uD45C\uC2DC\uD560 \uB0B4\uC6A9\uC774 \uC5C6\uC2B5\uB2C8\uB2E4." }) }));
+    }
+    return (_jsx(Tab.Panel, { className: classNames.tabPanel?.panel, unmount: false, children: _jsx("div", { className: cn('pt-2 md:pt-3', classNames.tabPanel?.content), children: (function () {
+                const panels = [];
+                groups.forEach((group, index) => {
+                    panels.push(_jsx("div", { children: _jsx(ViewFieldGroup, { tabId: id, groupId: group, readonly: readonly, ...(subCollectionEntity !== undefined ? { subCollectionEntity } : {}), entityForm: entityForm, ...(setEntityForm !== undefined ? { setEntityForm } : {}), ...(session !== undefined ? { session } : {}), ...(createStepFields !== undefined ? { createStepFields } : {}), ...(resetEntityForm !== undefined ? { resetEntityForm } : {}), ...(hideMappedByFields !== undefined ? { hideMappedByFields } : {}) }, index) }, `${group}-${index}-${createStepFields ? createStepFields?.join(',') : ''}`));
+                });
+                return panels;
+            })() }) }));
+};

package/dist/listgrid/components/form/context/EntityFormThemeContext.d.ts

@@ -0,0 +1,52 @@
+import React from 'react';
+import { EntityFormThemeContextValue, EntityFormThemeProviderProps } from '../types/ViewEntityFormTheme.types';
+/**
+ * EntityForm 테마 컨텍스트
+ * ViewEntityForm과 하위 컴포넌트에서 스타일을 커스터마이징하는데 사용
+ */
+declare const EntityFormThemeContext: React.Context<EntityFormThemeContextValue>;
+/**
+ * EntityForm 테마 Provider
+ *
+ * 사이트별로 다른 테마를 적용할 때 사용합니다.
+ * 기본 테마에 커스텀 테마를 deep merge합니다.
+ *
+ * @example
+ * ```tsx
+ * // 사이트 A의 layout.tsx
+ * import { EntityFormThemeProvider } from '../../../listgrid-compat';
+ *
+ * const siteATheme = {
+ *   header: { container: 'mt-2 bg-blue-50 rounded-lg p-4' },
+ *   title: { text: 'text-2xl font-medium text-blue-800' },
+ *   buttons: { save: 'btn bg-blue-600 text-white hover:bg-blue-700' },
+ * };
+ *
+ * export default function RootLayout({ children }) {
+ *   return (
+ *     <EntityFormThemeProvider theme={siteATheme}>
+ *       {children}
+ *     </EntityFormThemeProvider>
+ *   );
+ * }
+ * ```
+ */
+export declare const EntityFormThemeProvider: React.FC<EntityFormThemeProviderProps>;
+/**
+ * EntityForm 테마 훅
+ *
+ * ViewEntityForm의 하위 컴포넌트에서 테마 클래스를 가져올 때 사용합니다.
+ *
+ * @example
+ * ```tsx
+ * const { classNames, cn } = useEntityFormTheme();
+ *
+ * return (
+ *   <div className={cn('flex items-center', classNames.header?.container)}>
+ *     ...
+ *   </div>
+ * );
+ * ```
+ */
+export declare const useEntityFormTheme: () => EntityFormThemeContextValue;
+export { EntityFormThemeContext };

package/dist/listgrid/components/form/context/EntityFormThemeContext.js

@@ -0,0 +1,129 @@
+'use client';
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useMemo } from 'react';
+import { cn as cnUtil } from '../../../utils/cn';
+import { defaultEntityFormTheme } from '../themes/defaultTheme';
+/**
+ * 두 객체를 깊게 병합하는 유틸리티
+ * 커스텀 테마가 기본 테마를 오버라이드
+ */
+const deepMerge = (base, override) => {
+    if (!override)
+        return base;
+    const result = { ...base };
+    for (const key in override) {
+        if (Object.prototype.hasOwnProperty.call(override, key)) {
+            const baseValue = base[key];
+            const overrideValue = override[key];
+            if (baseValue &&
+                overrideValue &&
+                typeof baseValue === 'object' &&
+                typeof overrideValue === 'object' &&
+                !Array.isArray(baseValue) &&
+                !Array.isArray(overrideValue)) {
+                // 중첩 객체 병합
+                result[key] = deepMerge(baseValue, overrideValue);
+            }
+            else if (overrideValue !== undefined) {
+                // 값 오버라이드
+                result[key] = overrideValue;
+            }
+        }
+    }
+    return result;
+};
+/**
+ * EntityForm 테마 컨텍스트
+ * ViewEntityForm과 하위 컴포넌트에서 스타일을 커스터마이징하는데 사용
+ */
+const EntityFormThemeContext = createContext({
+    classNames: defaultEntityFormTheme,
+    cn: (base, custom) => (custom ? cnUtil(base, custom) : base),
+    getFieldRenderer: () => undefined,
+    createStepButtonPosition: 'top',
+});
+/**
+ * EntityForm 테마 Provider
+ *
+ * 사이트별로 다른 테마를 적용할 때 사용합니다.
+ * 기본 테마에 커스텀 테마를 deep merge합니다.
+ *
+ * @example
+ * ```tsx
+ * // 사이트 A의 layout.tsx
+ * import { EntityFormThemeProvider } from '../../../listgrid-compat';
+ *
+ * const siteATheme = {
+ *   header: { container: 'mt-2 bg-blue-50 rounded-lg p-4' },
+ *   title: { text: 'text-2xl font-medium text-blue-800' },
+ *   buttons: { save: 'btn bg-blue-600 text-white hover:bg-blue-700' },
+ * };
+ *
+ * export default function RootLayout({ children }) {
+ *   return (
+ *     <EntityFormThemeProvider theme={siteATheme}>
+ *       {children}
+ *     </EntityFormThemeProvider>
+ *   );
+ * }
+ * ```
+ */
+export const EntityFormThemeProvider = ({ theme, fieldRenderers, buttonLabels, stepperRenderer, createStepButtonPosition, children, }) => {
+    const value = useMemo(() => {
+        // 기본 테마와 커스텀 테마를 deep merge
+        const mergedClassNames = deepMerge(defaultEntityFormTheme, theme);
+        const base = {
+            classNames: mergedClassNames,
+            cn: (base, custom) => {
+                if (!custom)
+                    return base;
+                return cnUtil(base, custom);
+            },
+            getFieldRenderer: (fieldName) => {
+                return fieldRenderers?.[fieldName];
+            },
+        };
+        if (fieldRenderers !== undefined)
+            base.fieldRenderers = fieldRenderers;
+        if (buttonLabels !== undefined)
+            base.buttonLabels = buttonLabels;
+        if (stepperRenderer !== undefined)
+            base.stepperRenderer = stepperRenderer;
+        if (createStepButtonPosition !== undefined) {
+            base.createStepButtonPosition = createStepButtonPosition;
+        }
+        return base;
+    }, [theme, fieldRenderers, buttonLabels, stepperRenderer, createStepButtonPosition]);
+    return (_jsx(EntityFormThemeContext.Provider, { value: value, children: children }));
+};
+/**
+ * EntityForm 테마 훅
+ *
+ * ViewEntityForm의 하위 컴포넌트에서 테마 클래스를 가져올 때 사용합니다.
+ *
+ * @example
+ * ```tsx
+ * const { classNames, cn } = useEntityFormTheme();
+ *
+ * return (
+ *   <div className={cn('flex items-center', classNames.header?.container)}>
+ *     ...
+ *   </div>
+ * );
+ * ```
+ */
+export const useEntityFormTheme = () => {
+    const context = useContext(EntityFormThemeContext);
+    if (!context) {
+        // Context가 없으면 기본값 반환 (Provider 없이도 동작)
+        return {
+            classNames: defaultEntityFormTheme,
+            cn: (base, custom) => (custom ? cnUtil(base, custom) : base),
+            getFieldRenderer: () => undefined,
+            createStepButtonPosition: 'top',
+        };
+    }
+    return context;
+};
+export { EntityFormThemeContext };

package/dist/listgrid/components/form/context/index.d.ts

@@ -0,0 +1 @@
+export { EntityFormThemeProvider, useEntityFormTheme, EntityFormThemeContext, } from './EntityFormThemeContext';