@airoom/nextmin-react 0.1.7 → 0.1.8

package/dist/components/RefMultiSelect.d.ts

@@ -1,14 +1,22 @@
 import React from 'react';
+type RefOption = {
+    id?: string;
+    _id?: string;
+    [k: string]: any;
+};
 export type RefMultiSelectProps = {
     name: string;
     label: string;
     refModel: string;
     showKey?: string;
-    value: string[];
+    value: RefOption[] | string[];
     onChange: (ids: string[]) => void;
     description?: string;
     disabled?: boolean;
     required?: boolean;
-    pageSize?: number;
+    pageSize?: number | undefined;
+    error?: boolean | undefined;
+    errorMessage?: string | undefined;
 };
 export declare const RefMultiSelect: React.FC<RefMultiSelectProps>;
+export {};

package/dist/components/RefMultiSelect.js

@@ -1,38 +1,61 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
-import { Button, Input, Listbox, ListboxItem, Popover, PopoverContent, PopoverTrigger, Spinner, } from '@heroui/react';
+import { Select, SelectItem, Input, Chip } from '@heroui/react';
 import { api } from '../lib/api';
-export const RefMultiSelect = ({ name, label, refModel, showKey = 'name', value, onChange, description, disabled, required, pageSize = 20, }) => {
-    const [open, setOpen] = React.useState(false);
-    const [query, setQuery] = React.useState('');
-    const [loading, setLoading] = React.useState(false);
-    const [options, setOptions] = React.useState([]);
+export const RefMultiSelect = ({ name, label, refModel, showKey = 'name', value, onChange, description, disabled, required, pageSize = 10000, error, errorMessage, }) => {
     const modelSlug = React.useMemo(() => String(refModel).trim().toLowerCase(), [refModel]);
-    const selectedKeys = React.useMemo(() => new Set((value ?? []).map((v) => v)), [value]);
-    const selectionCount = selectedKeys.size;
-    const summaryText = selectionCount
-        ? `You have ${selectionCount} selected`
-        : `Select ${refModel}`;
-    const labelOf = React.useCallback((opt) => String((showKey && opt?.[showKey]) ??
+    // normalize an option to always have string `id`
+    const normalize = React.useCallback((it) => {
+        const { id: rawId, _id: raw_Id, ...rest } = it || {};
+        const id = (typeof rawId === 'string' && rawId) ||
+            (typeof raw_Id === 'string' && raw_Id) ||
+            String(rawId ?? raw_Id ?? '');
+        return { id, ...rest };
+    }, []);
+    // from props.value (objects or ids) build selected ids + pre-seeded options
+    const preselected = React.useMemo(() => {
+        if (Array.isArray(value) && value.length && typeof value[0] === 'object') {
+            return value.map(normalize);
+        }
+        return [];
+    }, [value, normalize]);
+    const selectedIds = React.useMemo(() => {
+        if (preselected.length)
+            return preselected.map((o) => o.id);
+        return (value ?? []).map(String);
+    }, [value, preselected]);
+    // options start with preselected objects so chips show immediately & no warning
+    const [options, setOptions] = React.useState(preselected);
+    // keep options in sync if parent passes new objects later
+    React.useEffect(() => {
+        if (!preselected.length)
+            return;
+        setOptions((prev) => {
+            const map = new Map(prev.map((o) => [o.id, o]));
+            preselected.forEach((o) => map.set(o.id, o));
+            return Array.from(map.values());
+        });
+    }, [preselected]);
+    const selectedKeys = React.useMemo(() => new Set(selectedIds), [selectedIds]);
+    const labelOf = React.useCallback((opt) => String(opt?.[showKey] ??
         opt?.name ??
         opt?.title ??
         opt?.key ??
         opt?.id ??
         opt?._id ??
         ''), [showKey]);
-    const viewItems = React.useMemo(() => options.map((opt) => {
-        const text = labelOf(opt);
-        const key = String(opt.id ?? opt._id ?? text);
-        return { key, text };
-    }), [options, labelOf]);
-    const loadOptions = React.useCallback(async (q) => {
+    const [open, setOpen] = React.useState(false);
+    const [query, setQuery] = React.useState('');
+    const [loading, setLoading] = React.useState(false);
+    // fetch list (large page) and merge with preseeded
+    const load = React.useCallback(async (q) => {
         setLoading(true);
         try {
-            // One list call for the current search page
-            const params = q
-                ? { q, searchKey: showKey || 'name' }
-                : {};
+            const params = {
+                limit: pageSize,
+                ...(q ? { q, searchKey: showKey } : {}),
+            };
             const res = await api.list?.(modelSlug, 0, pageSize, params);
             const payload = res?.data ?? res;
             const list = payload?.items ??
@@ -40,37 +63,47 @@ export const RefMultiSelect = ({ name, label, refModel, showKey = 'name', value,
                 payload?.results ??
                 payload?.list ??
                 (Array.isArray(payload) ? payload : []);
-            const normalized = (list || []).map((it) => ({
-                id: (typeof it?.id === 'string' && it.id) ||
-                    (typeof it?._id === 'string' && it._id) ||
-                    String(it?.id ?? ''),
-                ...it,
-            }));
-            setOptions(normalized);
-        }
-        catch {
-            setOptions([]);
+            const normalized = list.map(normalize);
+            // merge by id (keep preselected if present)
+            setOptions((prev) => {
+                const map = new Map(prev.map((o) => [o.id, o]));
+                normalized.forEach((o) => map.set(o.id, { ...(map.get(o.id) || {}), ...o }));
+                return Array.from(map.values());
+            });
         }
         finally {
             setLoading(false);
         }
-    }, [modelSlug, showKey]);
-    // Load when menu opens
+    }, [modelSlug, pageSize, showKey, normalize]);
+    // load on open + debounced search
     React.useEffect(() => {
         if (open)
-            void loadOptions(query);
+            void load(query);
     }, [open]); // eslint-disable-line react-hooks/exhaustive-deps
-    // Debounced search
     React.useEffect(() => {
         if (!open)
             return;
-        const t = setTimeout(() => void loadOptions(query), 250);
+        const t = setTimeout(() => void load(query), 250);
         return () => clearTimeout(t);
-    }, [open, query, loadOptions]);
-    return (_jsxs("div", { className: "w-full", children: [_jsxs("label", { className: "mb-1 block text-sm font-medium", children: [label, " ", required ? _jsx("span", { className: "text-danger", children: "*" }) : null] }), _jsxs(Popover, { placement: "bottom-start", offset: 6, isOpen: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { children: _jsxs(Button, { variant: "bordered", className: "w-full justify-between", isDisabled: disabled, "aria-label": label, name: name, children: [_jsx("span", { className: "truncate", children: summaryText }), _jsx("span", { className: "text-xs text-default-500", children: selectionCount ? `${selectionCount} selected` : '' })] }) }), _jsx(PopoverContent, { className: "w-auto p-2", children: _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Input, { size: "sm", variant: "bordered", "aria-label": `Search ${refModel}`, placeholder: `Search ${refModel}…`, fullWidth: true, value: query, onChange: (e) => setQuery(e.target.value) }), _jsx("div", { className: "max-h-72 overflow-auto w-full", children: _jsx(Listbox, { "aria-label": `${label} options`, selectionMode: "multiple", selectedKeys: selectedKeys, onSelectionChange: (keys) => {
-                                            if (keys === 'all')
-                                                return;
-                                            const ids = Array.from(keys).map(String);
-                                            onChange(ids);
-                                        }, items: viewItems, children: (item) => (_jsx(ListboxItem, { textValue: item.text, children: item.text }, item.key)) }) }), loading && (_jsx("div", { className: "grid place-items-center py-2", children: _jsx(Spinner, { size: "sm" }) }))] }) })] }), description ? (_jsx("p", { className: "mt-1 text-xs text-default-500", children: description })) : null] }));
+    }, [query, open, load]);
+    const topSearch = (_jsx("div", { className: "p-2", children: _jsx(Input, { size: "sm", variant: "bordered", "aria-label": `Search ${refModel}`, placeholder: `Search ${refModel}…`, value: query, onChange: (e) => setQuery(e.target.value), autoFocus: true }) }));
+    return (_jsx("div", { className: "w-full", children: _jsx(Select, { name: name, label: label, "aria-label": label, isDisabled: disabled, selectionMode: "multiple", selectedKeys: selectedKeys, onSelectionChange: (keys) => {
+                if (keys === 'all')
+                    return;
+                onChange(Array.from(keys).map(String));
+            }, items: options, isVirtualized: true, isMultiline: true, isInvalid: !!error, errorMessage: errorMessage || '', variant: "bordered", maxListboxHeight: 288, itemHeight: 36, className: "w-full", placeholder: `Select ${refModel}`, onOpenChange: setOpen, isLoading: loading, description: description || null, listboxProps: {
+                topContent: topSearch,
+                emptyContent: loading ? undefined : 'No results',
+                className: '',
+            }, 
+            // chips like docs; items is an array (SelectedItems<T>)
+            renderValue: (items) => {
+                const arr = Array.isArray(items) ? items : [];
+                // first render: items may be empty → fall back to selectedIds mapped from preseeded options
+                if (!arr.length && selectedIds.length) {
+                    const byId = new Map(options.map((o) => [String(o.id), o]));
+                    return (_jsx("div", { className: "flex flex-wrap gap-1", children: selectedIds.map((id) => (_jsx(Chip, { size: "sm", variant: "flat", children: labelOf(byId.get(String(id))) }, id))) }));
+                }
+                return (_jsx("div", { className: "flex flex-wrap gap-1", children: arr.map((it) => (_jsx(Chip, { size: "sm", variant: "flat", children: String(it?.props?.textValue ?? it?.props?.children ?? '') }, String(it?.key)))) }));
+            }, children: (item) => (_jsx(SelectItem, { textValue: labelOf(item), children: labelOf(item) }, item.id)) }) }));
 };

package/dist/components/RefSingleSelect.js

@@ -3,7 +3,10 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import { Select, SelectItem } from '@heroui/react';
 import { api } from '../lib/api';
-export function RefSingleSelect({ name, label, refModel, showKey = 'name', description, value, onChange, disabled, required, className, classNames, pageSize, }) {
+function stripPointerNone(cls) {
+    return (cls ?? '').replace(/\bpointer-events-none\b/g, '').trim();
+}
+export function RefSingleSelect({ name, label, refModel, showKey = 'name', description, value, onChange, disabled, required, className, classNames, pageSize = 50, }) {
     const [loading, setLoading] = React.useState(false);
     const [items, setItems] = React.useState([]);
     const [error, setError] = React.useState(null);
@@ -12,7 +15,6 @@ export function RefSingleSelect({ name, label, refModel, showKey = 'name', descr
         try {
             setLoading(true);
             setError(null);
-            // small page size is enough for pickers; adjust if needed
             const res = await api.list(refModelLC, 0, pageSize, {});
             setItems(Array.isArray(res.data) ? res.data : []);
         }
@@ -23,9 +25,9 @@ export function RefSingleSelect({ name, label, refModel, showKey = 'name', descr
         finally {
             setLoading(false);
         }
-    }, [refModelLC]);
+    }, [refModelLC, pageSize]);
     React.useEffect(() => {
-        load(); // eager-load on mount
+        void load();
     }, [load]);
     const getId = (r) => (typeof r.id === 'string' && r.id) ||
         (typeof r._id === 'string' && r._id) ||
@@ -34,17 +36,15 @@ export function RefSingleSelect({ name, label, refModel, showKey = 'name', descr
         const v = r?.[showKey];
         return v == null ? getId(r) : String(v);
     };
-    return (_jsx("div", { className: "w-full", children: _jsx(Select, { name: name, label: label, placeholder: label, labelPlacement: "outside", className: className, classNames: classNames, variant: "bordered", selectionMode: "single", isDisabled: disabled || loading, isLoading: loading, isRequired: required, description: error || description, items: items, selectedKeys: value ? new Set([String(value)]) : new Set(), onSelectionChange: (keys) => {
+    return (_jsx("div", { className: "w-full", children: _jsx(Select, { name: name, label: label, placeholder: label, labelPlacement: "outside", className: className, classNames: {
+                // Make sure the whole trigger is clickable
+                trigger: `cursor-pointer ${stripPointerNone(classNames?.trigger)}`,
+            }, variant: "bordered", isDisabled: disabled || loading, isLoading: loading, isRequired: required, description: error || description, items: items, selectionMode: "single", selectedKeys: value ? new Set([String(value)]) : new Set(), onSelectionChange: (keys) => {
                 if (keys === 'all')
                     return;
                 const v = Array.from(keys)[0];
                 onChange(v ?? null);
-            }, 
-            // Re-fetch on open to ensure newest data (e.g., newly created roles)
-            onOpenChange: (open) => {
-                if (open)
-                    void load();
-            }, disallowEmptySelection: false, "aria-label": label, children: (opt) => {
+            }, children: (opt) => {
                 const key = getId(opt);
                 const text = getLabel(opt);
                 return (_jsx(SelectItem, { textValue: text, children: text }, key));

package/dist/components/SchemaForm.d.ts

@@ -1,4 +1,9 @@
 import { SchemaDef } from '../lib/types';
+type FieldErrorItems = {
+    error: boolean;
+    field: string;
+    message: string;
+};
 type SchemaFormProps = {
     model: string;
     schemaOverride?: SchemaDef;
@@ -7,7 +12,8 @@ type SchemaFormProps = {
     busy?: boolean;
     showReset?: boolean;
     onSubmit: (values: Record<string, any>) => void | Promise<void>;
+    fieldErrors?: FieldErrorItems[] | undefined;
 };
 /** --------------------------------------------------------------------------------------- **/
-export declare function SchemaForm({ model, schemaOverride, initialValues, submitLabel, busy, showReset, onSubmit, }: SchemaFormProps): import("react/jsx-runtime").JSX.Element;
+export declare function SchemaForm({ model, schemaOverride, initialValues, submitLabel, busy, showReset, onSubmit, fieldErrors, }: SchemaFormProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/SchemaForm.js

@@ -181,7 +181,7 @@ function normalizeTimeRangeLoose(value) {
     return {};
 }
 /** --------------------------------------------------------------------------------------- **/
-export function SchemaForm({ model, schemaOverride, initialValues, submitLabel = 'Save', busy = false, showReset = true, onSubmit, }) {
+export function SchemaForm({ model, schemaOverride, initialValues, submitLabel = 'Save', busy = false, showReset = true, onSubmit, fieldErrors, }) {
     const mapsKey = useGoogleMapsKey();
     const formUid = useId();
     const { items } = useSelector((s) => s.schemas);
@@ -282,7 +282,7 @@ export function SchemaForm({ model, schemaOverride, initialValues, submitLabel =
                 // --- 1) Array of references → multi select (1 column)
                 const refArray = getRefArraySpec(attr);
                 if (refArray) {
-                    return (_jsx("div", { className: colClass, children: _jsx(RefMultiSelect, { name: name, label: attr?.label ?? formatLabel(name), refModel: refArray.ref, showKey: refArray.show ?? 'name', description: attr?.description, value: normalizeIdsArray(form[name]), onChange: (ids) => handleChange(name, ids), disabled: busy, required: !!attr?.required, pageSize: attr?.pageSize }) }, name));
+                    return (_jsx("div", { className: colClass, children: _jsx(RefMultiSelect, { name: name, label: attr[0]?.label ?? formatLabel(name), refModel: refArray.ref, showKey: refArray.show ?? 'name', description: attr?.description, value: form[name], onChange: (ids) => handleChange(name, ids), disabled: busy, required: attr[0]?.required, pageSize: attr[0]?.pageSize }) }, name));
                 }
                 // --- 2) Single reference → single select (1 column)
                 const refSingle = getRefSingleSpec(attr);
@@ -433,7 +433,7 @@ function SchemaField({ uid, name, attr, value, onChange, disabled, inputClassNam
                     return (_jsx(Radio, { value: opt, children: opt }, opt));
                 }) }));
         }
-        return (_jsx(Select, { variant: "bordered", classNames: selectClassNames, labelPlacement: "outside", id: id, name: name, label: label, selectedKeys: value ? new Set([String(value)]) : new Set(), onSelectionChange: (keys) => {
+        return (_jsx(Select, { isVirtualized: true, variant: "bordered", classNames: selectClassNames, labelPlacement: "outside", id: id, name: name, label: label, selectedKeys: value ? new Set([String(value)]) : new Set(), onSelectionChange: (keys) => {
                 if (keys === 'all')
                     return;
                 const v = Array.from(keys)[0];

package/dist/lib/api.js

@@ -28,16 +28,29 @@ function modelPath(modelName) {
 async function request(path, opts = {}) {
     const { method = 'GET', body, token, json = true, auth = true } = opts;
     const headers = { 'x-api-key': API_KEY };
-    if (json)
+    // Don't force JSON when sending FormData/Blob
+    const isForm = typeof FormData !== 'undefined' && body instanceof FormData;
+    if (json && !isForm)
         headers['Content-Type'] = 'application/json';
     const bearer = token ?? tokenFromStorage();
     if (auth && bearer)
         headers.Authorization = `Bearer ${bearer}`;
-    const res = await fetch(`${API_BASE}${path}`, {
-        method,
-        headers,
-        body: body && json ? JSON.stringify(body) : body,
-    });
+    let res;
+    try {
+        res = await fetch(`${API_BASE}${path}`, {
+            method,
+            headers,
+            body: body && json && !isForm
+                ? JSON.stringify(body)
+                : body,
+        });
+    }
+    catch (networkErr) {
+        // Network/DNS/CORS timeouts etc.
+        const err = new ApiError(networkErr?.message || 'Network error', 0);
+        err.request = { url: `${API_BASE}${path}`, method, headers };
+        throw err;
+    }
     const raw = await res.text();
     let payload = {};
     try {
@@ -50,15 +63,9 @@ async function request(path, opts = {}) {
         const status = res.status;
         const serverMsg = payload?.message ??
             payload?.error ??
-            res.statusText;
-        // Normalize common auth/permission errors for the UI
-        if (status === 401)
-            throw new ApiError('Not authenticated', 401, payload);
-        if (status === 403)
-            throw new ApiError('Not permitted', 403, payload);
-        throw new ApiError(typeof serverMsg === 'string' && serverMsg.trim()
-            ? serverMsg
-            : 'API error', status, payload);
+            res.statusText ??
+            'API error';
+        throw payload;
     }
     return payload;
 }