@airoom/nextmin-react 2.0.1 → 2.0.3

package/dist/components/RefSelect.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 export type RefSelectProps = {
     name: string;
     label: string;
@@ -12,5 +13,7 @@ export type RefSelectProps = {
     className?: string;
     pageSize?: number;
     where?: Record<string, any>;
+    isInvalid?: boolean;
+    errorMessage?: React.ReactNode;
 };
-export declare function RefSelect({ name, label, refModel, showKey, value, onChange, multiple, description, disabled, required, className, pageSize, where, }: RefSelectProps): import("react/jsx-runtime").JSX.Element;
+export declare function RefSelect({ name, label, refModel, showKey, value, onChange, multiple, description, disabled, required, className, pageSize, where, isInvalid: isInvalidProp, errorMessage, }: RefSelectProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/RefSelect.js

@@ -1,93 +1,159 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { Select, SelectItem, Chip, Spinner, Input } from '@heroui/react';
 import { useInfiniteScroll } from '@heroui/use-infinite-scroll';
 import { api } from '../lib/api';
-export function RefSelect({ name, label, refModel, showKey = 'name', value, onChange, multiple = false, description, disabled, required, className, pageSize = 20, where, }) {
+export function RefSelect({ name, label, refModel, showKey = 'name', value, onChange, multiple = false, description, disabled, required, className, pageSize = 20, where, isInvalid: isInvalidProp, errorMessage, }) {
     const [isOpen, setIsOpen] = useState(false);
     const [items, setItems] = useState([]);
     const [hasMore, setHasMore] = useState(true);
     const [isLoading, setIsLoading] = useState(false);
+    const [isHydrating, setIsHydrating] = useState(false);
     const [offset, setOffset] = useState(0);
     const [searchFilter, setSearchFilter] = useState('');
     const [allSeenItems, setAllSeenItems] = useState({});
-    const refModelLC = useMemo(() => refModel.toLowerCase(), [refModel]);
-    // Normalize IDs to strings
-    const normalizeId = (it) => {
+    const refModelLC = useMemo(() => (refModel ? String(refModel).toLowerCase() : ''), [refModel]);
+    // Normalize IDs to strings safely without producing "[object Object]"
+    const normalizeId = useCallback((it) => {
         if (it == null)
             return '';
         if (typeof it === 'string')
-            return it;
+            return it.trim();
         if (typeof it === 'number')
             return String(it);
-        // Handle objects like MongoDB ObjectIds
-        const id = it?.id ?? it?._id ?? it;
-        if (id == null)
+        // Handle objects like MongoDB ObjectIds or document objects
+        if (typeof it === 'object') {
+            if (typeof it.toHexString === 'function')
+                return it.toHexString();
+            const id = it?.id ?? it?._id;
+            if (id != null && id !== it) {
+                return normalizeId(id);
+            }
+            if (typeof it.toString === 'function' && it.toString !== Object.prototype.toString) {
+                const str = it.toString();
+                if (str && str !== '[object Object]')
+                    return str;
+            }
             return '';
-        if (typeof id === 'string')
-            return id;
-        if (typeof id.toHexString === 'function')
-            return id.toHexString();
-        if (typeof id.toString === 'function' && id !== it)
-            return id.toString();
-        return String(id);
-    };
+        }
+        return String(it).trim();
+    }, []);
     const getLabel = useCallback((it) => {
-        return String(it?.[showKey] ?? it?.name ?? it?.title ?? normalizeId(it));
-    }, [showKey]);
-    // Hydration: Fetch labels for initial values if not in list
+        if (it == null)
+            return '';
+        if (typeof it === 'string' || typeof it === 'number')
+            return String(it);
+        const val = it?.[showKey] ?? it?.name ?? it?.title ?? it?.label;
+        if (val != null && typeof val !== 'object')
+            return String(val);
+        const sid = normalizeId(it);
+        return sid;
+    }, [showKey, normalizeId]);
+    // Track which IDs have already been hydrated / in-flight to avoid duplicate fetches & loops
+    const hydratedIdsRef = React.useRef(new Set());
+    // Hydration: eagerly fetch labels for pre-selected values not yet in cache
     useEffect(() => {
+        const rawList = Array.isArray(value) ? value : value ? [value] : [];
+        if (rawList.length === 0)
+            return;
+        // Pre-seed any hydrated objects passed directly in value prop
+        const newSeen = {};
+        for (const v of rawList) {
+            if (v && typeof v === 'object') {
+                const sid = normalizeId(v);
+                const lbl = getLabel(v);
+                if (sid && lbl) {
+                    newSeen[sid] = { id: sid, label: lbl, ...v };
+                    hydratedIdsRef.current.add(sid);
+                }
+            }
+        }
+        if (Object.keys(newSeen).length > 0) {
+            setAllSeenItems(prev => ({ ...prev, ...newSeen }));
+        }
+        if (!refModelLC)
+            return;
+        // Only fetch IDs not already cached, pre-seeded, or previously fetched
+        const missingIds = rawList
+            .map(normalizeId)
+            .filter(id => !!id && !allSeenItems[id] && !newSeen[id] && !hydratedIdsRef.current.has(id));
+        if (missingIds.length === 0)
+            return;
+        // Mark as in-flight immediately to prevent duplicate requests
+        for (const id of missingIds)
+            hydratedIdsRef.current.add(id);
+        let isMounted = true;
         const fetchLabels = async () => {
-            const ids = Array.isArray(value) ? value : value ? [value] : [];
-            if (ids.length === 0)
-                return;
-            // Filter out IDs we already have labels for
-            const missingIds = ids.filter(id => !items.some(it => it.id === id));
-            if (missingIds.length === 0)
-                return;
             try {
-                const res = await api.list(refModelLC, {
-                    where: { id: { $in: missingIds } },
-                    limit: missingIds.length,
-                });
-                const docs = (res?.data ?? res);
-                if (Array.isArray(docs)) {
-                    const newItems = docs.map(d => ({ id: normalizeId(d), label: getLabel(d), ...d }));
+                // Use a high limit so all selected IDs are fetched in one shot.
+                // Batch in chunks of 200 to stay within safe query limits.
+                const CHUNK = 200;
+                const selectProjection = Array.from(new Set(['id', '_id', showKey, 'name', 'title'])).join(',');
+                for (let i = 0; i < missingIds.length; i += CHUNK) {
+                    const chunk = missingIds.slice(i, i + CHUNK);
+                    const res = await api.list(refModelLC, {
+                        where: { id: { $in: chunk } },
+                        limit: chunk.length + 1, // +1 ensures no off-by-one truncation
+                        page: 1,
+                        select: selectProjection,
+                    });
+                    if (!isMounted)
+                        return;
+                    const docs = (res?.data ?? res);
+                    if (!Array.isArray(docs))
+                        continue;
+                    const newItems = docs.map(d => ({
+                        id: normalizeId(d),
+                        label: getLabel(d),
+                        ...d,
+                    })).filter(d => Boolean(d.id));
                     setAllSeenItems(prev => {
                         const next = { ...prev };
                         for (const item of newItems) {
-                            next[item.id] = item;
+                            if (item.id)
+                                next[item.id] = item;
                         }
                         return next;
                     });
                     setItems(prev => {
                         const existingIds = new Set(prev.map(i => i.id));
-                        const uniqueNew = newItems.filter(i => !existingIds.has(i.id));
-                        return [...prev, ...uniqueNew];
+                        const uniqueNew = newItems.filter(i => i.id && !existingIds.has(i.id));
+                        return uniqueNew.length ? [...prev, ...uniqueNew] : prev;
                     });
                 }
             }
             catch (err) {
-                console.error('Failed to hydrate RefSelect labels', err);
+                // Log warning and retain IDs in hydrated set to prevent infinite retry render loops
+                console.warn(`RefSelect: failed to hydrate labels for model "${refModel}"`, err);
             }
         };
-        if (refModelLC) {
-            fetchLabels();
-        }
-    }, [value, refModelLC, getLabel]); // Run once on value change if items missing
+        setIsHydrating(true);
+        fetchLabels().finally(() => {
+            if (isMounted)
+                setIsHydrating(false);
+        });
+        return () => {
+            isMounted = false;
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [value, refModelLC, showKey, getLabel, normalizeId]);
     const loadMore = useCallback(async (isSearch = false) => {
         if (isLoading || (!hasMore && !isSearch))
             return;
+        if (!refModelLC)
+            return;
         setIsLoading(true);
         try {
             const effectivePageSize = Number(pageSize) || 20;
             const currentOffset = isSearch ? 0 : offset;
+            const selectProjection = Array.from(new Set(['id', '_id', showKey, 'name', 'title'])).join(',');
             const params = {
                 limit: effectivePageSize,
                 page: Math.floor(currentOffset / effectivePageSize) + 1,
                 sort: showKey,
                 sortType: 'asc',
+                select: selectProjection,
             };
             if (searchFilter.length >= 1) {
                 params.where = {
@@ -101,12 +167,13 @@ export function RefSelect({ name, label, refModel, showKey = 'name', value, onCh
             const res = await api.list(refModelLC, params);
             const docs = (res?.data ?? res);
             const normalized = Array.isArray(docs)
-                ? docs.map(d => ({ id: normalizeId(d), label: getLabel(d), ...d }))
+                ? docs.map(d => ({ id: normalizeId(d), label: getLabel(d), ...d })).filter(d => Boolean(d.id))
                 : [];
             setAllSeenItems(prev => {
                 const next = { ...prev };
                 for (const item of normalized) {
-                    next[item.id] = item;
+                    if (item.id)
+                        next[item.id] = item;
                 }
                 return next;
             });
@@ -114,19 +181,19 @@ export function RefSelect({ name, label, refModel, showKey = 'name', value, onCh
                 if (isSearch)
                     return normalized;
                 const existingIds = new Set(prev.map(i => i.id));
-                const uniqueNew = normalized.filter(i => !existingIds.has(i.id));
+                const uniqueNew = normalized.filter(i => i.id && !existingIds.has(i.id));
                 return [...prev, ...uniqueNew];
             });
             setHasMore(normalized.length === effectivePageSize);
             setOffset(prev => isSearch ? effectivePageSize : prev + effectivePageSize);
         }
         catch (err) {
-            console.error('Failed to load RefSelect items', err);
+            console.warn(`Failed to load RefSelect items for model "${refModel}"`, err);
         }
         finally {
             setIsLoading(false);
         }
-    }, [isLoading, hasMore, offset, pageSize, searchFilter, refModelLC, showKey, getLabel]);
+    }, [isLoading, hasMore, offset, pageSize, searchFilter, refModelLC, showKey, getLabel, normalizeId, where, refModel]);
     const [, scrollerRef] = useInfiniteScroll({
         hasMore,
         isEnabled: isOpen,
@@ -154,7 +221,7 @@ export function RefSelect({ name, label, refModel, showKey = 'name', value, onCh
     const onSelectionChange = (keys) => {
         if (keys === 'all')
             return;
-        const selectedIds = Array.from(keys).map(String);
+        const selectedIds = Array.from(keys).map(String).filter(Boolean);
         if (multiple) {
             onChange(selectedIds);
         }
@@ -164,24 +231,39 @@ export function RefSelect({ name, label, refModel, showKey = 'name', value, onCh
     };
     const removeValue = (idToRemove) => {
         if (Array.isArray(value)) {
-            onChange(value.filter(id => id !== idToRemove));
+            onChange(value.filter(id => normalizeId(id) !== idToRemove));
         }
     };
     const selectedKeys = useMemo(() => {
+        const rawIds = Array.isArray(value) ? value : value ? [value] : [];
+        const normIds = rawIds.map(normalizeId).filter(Boolean);
         if (multiple) {
-            return new Set(Array.isArray(value) ? value.map(String) : []);
+            return new Set(normIds);
         }
-        return (value ? new Set([String(value)]) : new Set());
-    }, [value, multiple]);
+        return (normIds.length > 0 ? new Set([normIds[0]]) : new Set());
+    }, [value, multiple, normalizeId]);
     const selectedItems = useMemo(() => {
         const ids = Array.isArray(value) ? value : value ? [value] : [];
         return ids.map(id => {
-            const found = items.find(it => it.id === id);
+            const sid = normalizeId(id);
+            if (!sid)
+                return { id: '', label: '' };
+            // Check cache first (populated by hydration fetch / object pre-seeding)
+            if (allSeenItems[sid])
+                return allSeenItems[sid];
+            // Check if object has embedded label
+            if (id && typeof id === 'object') {
+                const lbl = getLabel(id);
+                if (lbl)
+                    return { id: sid, label: lbl, ...id };
+            }
+            // Then check current page items
+            const found = items.find(it => it.id === sid);
             if (found)
                 return found;
-            return { id: String(id), label: String(id) };
-        });
-    }, [value, items]);
+            return { id: sid, label: sid };
+        }).filter(it => Boolean(it.id));
+    }, [value, items, allSeenItems, getLabel, normalizeId]);
     const isValueEmpty = useMemo(() => {
         if (multiple)
             return !Array.isArray(value) || value.length === 0;
@@ -193,10 +275,15 @@ export function RefSelect({ name, label, refModel, showKey = 'name', value, onCh
         // 1. Add currently selected items (from allSeenItems cache)
         const selectedIds = Array.isArray(value) ? value : value ? [value] : [];
         for (const id of selectedIds) {
-            const stringId = String(id);
+            const stringId = normalizeId(id);
+            if (!stringId)
+                continue;
             if (allSeenItems[stringId]) {
                 itemMap.set(stringId, allSeenItems[stringId]);
             }
+            else if (id && typeof id === 'object') {
+                itemMap.set(stringId, { id: stringId, label: getLabel(id), ...id });
+            }
             else {
                 // Fallback for cases where label isn't loaded yet
                 itemMap.set(stringId, { id: stringId, label: stringId });
@@ -204,22 +291,33 @@ export function RefSelect({ name, label, refModel, showKey = 'name', value, onCh
         }
         // 2. Add current results (highest priority for labels/data)
         for (const item of items) {
-            itemMap.set(item.id, item);
+            if (item.id) {
+                itemMap.set(item.id, item);
+            }
         }
         return Array.from(itemMap.values());
-    }, [items, value, allSeenItems]);
-    return (_jsx("div", { className: `flex flex-col gap-2 ${className}`, children: _jsx(Select, { label: label, placeholder: `Select ${refModel}...`, variant: "bordered", labelPlacement: "outside", isMultiline: multiple, items: mergedDisplayItems, isLoading: isLoading, scrollRef: scrollerRef, selectionMode: multiple ? 'multiple' : 'single', selectedKeys: selectedKeys, onSelectionChange: onSelectionChange, onOpenChange: onOpenChange, isDisabled: disabled, isRequired: required, isInvalid: required && isValueEmpty, validationBehavior: "aria", description: description, className: "w-full", classNames: {
+    }, [items, value, allSeenItems, getLabel, normalizeId]);
+    const placeholderText = refModel ? `Select ${refModel}...` : `Select ${label}...`;
+    return (_jsx("div", { className: `flex flex-col gap-2 ${className}`, children: _jsx(Select, { label: label, placeholder: placeholderText, variant: "bordered", labelPlacement: "outside", isMultiline: multiple, items: mergedDisplayItems, isLoading: isLoading || isHydrating, scrollRef: scrollerRef, selectionMode: multiple ? 'multiple' : 'single', selectedKeys: selectedKeys, onSelectionChange: onSelectionChange, onOpenChange: onOpenChange, isDisabled: disabled, isRequired: required, isInvalid: isInvalidProp || (required && isValueEmpty), errorMessage: errorMessage, validationBehavior: "aria", description: description, className: "w-full", classNames: {
                 trigger: 'min-h-12 py-2',
             }, scrollShadowProps: {
                 isEnabled: false,
             }, listboxProps: {
                 topContent: (_jsx("div", { className: "px-2 pt-2 pb-1 sticky top-0 z-20 bg-content1 shadow-sm pb-2 -mt-2 -mx-1", children: _jsx(Input, { placeholder: "Search...", size: "sm", variant: "bordered", value: searchFilter, onChange: onInputChange, onClear: () => setSearchFilter(''), isClearable: true, 
-                        // Prevent closing when clicking search
-                        onClick: (e) => e.stopPropagation(), onKeyDown: (e) => e.stopPropagation(), endContent: isLoading ? _jsx(Spinner, { size: "sm" }) : null }) })),
+                        // Prevent closing when clicking search without triggering React Spectrum warning
+                        onClick: (e) => {
+                            if (typeof e?.continuePropagation === 'function')
+                                return;
+                            e?.stopPropagation?.();
+                        }, onKeyDown: (e) => {
+                            if (typeof e?.continuePropagation === 'function')
+                                return;
+                            e?.stopPropagation?.();
+                        }, endContent: (isLoading || isHydrating) ? _jsx(Spinner, { size: "sm" }) : null }) })),
             }, renderValue: (items) => {
                 if (multiple) {
-                    return (_jsx("div", { className: "flex flex-wrap gap-1", children: items.map((item) => (_jsx(Chip, { size: "sm", variant: "flat", children: item.textValue }, item.key))) }));
+                    return (_jsx("div", { className: "flex flex-wrap gap-1", children: items.map((item) => (_jsx(Chip, { size: "sm", variant: "flat", children: item.textValue || item.key }, item.key))) }));
                 }
-                return items[0].textValue;
-            }, children: (item) => (_jsx(SelectItem, { textValue: item.label, children: item.label }, item.id)) }) }));
+                return items[0]?.textValue ?? '';
+            }, children: (item) => (_jsx(SelectItem, { textValue: item.label || item.id, children: item.label || item.id }, item.id)) }) }));
 }

package/dist/components/SchemaForm.d.ts

@@ -13,7 +13,8 @@ type SchemaFormProps = {
     showReset?: boolean;
     onSubmit: (values: Record<string, any>) => void | Promise<void>;
     fieldErrors?: FieldErrorItems[] | undefined;
+    isEdit?: boolean;
 };
 /** --------------------------------------------------------------------------------------- **/
-export declare function SchemaForm({ model, schemaOverride, initialValues, submitLabel, busy, showReset, onSubmit, fieldErrors, }: SchemaFormProps): import("react/jsx-runtime").JSX.Element;
+export declare function SchemaForm({ model, schemaOverride, initialValues, submitLabel, busy, showReset, onSubmit, fieldErrors, isEdit: isEditProp, }: SchemaFormProps): import("react/jsx-runtime").JSX.Element;
 export {};