@airoom/nextmin-react 1.4.4 → 1.4.5

package/dist/components/RefMultiSelect.js

@@ -54,6 +54,8 @@ export const RefMultiSelect = ({ name, label, refModel, showKey = 'name', value,
         try {
             const params = {
                 limit: pageSize,
+                sort: showKey,
+                sortType: 'asc',
                 ...(q ? { q, searchKey: showKey } : {}),
             };
             const res = await api.list?.(modelSlug, 0, pageSize, params);
@@ -91,10 +93,12 @@ export const RefMultiSelect = ({ name, label, refModel, showKey = 'name', value,
                 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: {
+            }, isClearable: true, 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: '',
+            }, scrollShadowProps: {
+                isEnabled: false,
             }, 
             // chips like docs; items is an array (SelectedItems<T>)
             renderValue: (items) => {

package/dist/components/RefSingleSelect.js

@@ -1,7 +1,7 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
-import { Select, SelectItem } from '@heroui/react';
+import { Select, SelectItem, Input } from '@heroui/react';
 import { api } from '../lib/api';
 function stripPointerNone(cls) {
     return (cls ?? '').replace(/\bpointer-events-none\b/g, '').trim();
@@ -10,25 +10,75 @@ export function RefSingleSelect({ name, label, refModel, showKey = 'name', descr
     const [loading, setLoading] = React.useState(false);
     const [items, setItems] = React.useState([]);
     const [error, setError] = React.useState(null);
+    const [query, setQuery] = React.useState('');
+    const [open, setOpen] = React.useState(false);
     const refModelLC = React.useMemo(() => refModel.toLowerCase(), [refModel]);
-    const load = React.useCallback(async () => {
+    // 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 };
+    }, []);
+    const load = React.useCallback(async (q) => {
         try {
             setLoading(true);
             setError(null);
-            const res = await api.list(refModelLC, 0, pageSize, {});
-            setItems(Array.isArray(res.data) ? res.data : []);
+            const params = {
+                limit: pageSize,
+                sort: showKey,
+                sortType: 'asc',
+                ...(q ? { q, searchKey: showKey } : {}),
+            };
+            const res = await api.list(refModelLC, 0, pageSize, params);
+            const payload = res?.data ?? res;
+            const list = Array.isArray(payload)
+                ? payload
+                : payload?.items ?? payload?.docs ?? [];
+            const normalized = list.map(normalize);
+            setItems((prev) => {
+                // Find currently selected item in previous list to ensure we don't lose it
+                // (which would break the label display)
+                const selectedId = value ? String(value) : null;
+                const selectedItem = selectedId
+                    ? prev.find((p) => String(p.id) === selectedId)
+                    : null;
+                // Start with the new list/search results
+                const newItems = [...normalized];
+                // If we have a selected item and it's not in the new results, add it back
+                if (selectedItem &&
+                    !newItems.some((i) => String(i.id) === String(selectedItem.id))) {
+                    newItems.push(selectedItem);
+                }
+                return newItems;
+            });
         }
         catch (e) {
             setError(e?.message || 'Failed to load options');
-            setItems([]);
         }
         finally {
             setLoading(false);
         }
-    }, [refModelLC, pageSize]);
+    }, [refModelLC, pageSize, showKey, normalize]);
+    // load on open
     React.useEffect(() => {
-        void load();
-    }, [load]);
+        if (open)
+            void load(query);
+    }, [open]); // eslint-disable-line react-hooks/exhaustive-deps
+    // debounced search
+    React.useEffect(() => {
+        if (!open)
+            return;
+        const t = setTimeout(() => void load(query), 250);
+        return () => clearTimeout(t);
+    }, [query, open, load]);
+    // If we have a value but no items, try to load once to get the label
+    React.useEffect(() => {
+        if (value && items.length === 0 && !loading) {
+            void load('');
+        }
+    }, [value]); // eslint-disable-line react-hooks/exhaustive-deps
     const getId = (r) => (typeof r.id === 'string' && r.id) ||
         (typeof r._id === 'string' && r._id) ||
         '';
@@ -36,14 +86,22 @@ export function RefSingleSelect({ name, label, refModel, showKey = 'name', descr
         const v = r?.[showKey];
         return v == null ? getId(r) : String(v);
     };
+    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), isClearable: true, onClear: () => setQuery(''), autoFocus: true, onKeyDown: (e) => e.stopPropagation() }) }));
     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) => {
+            }, variant: "bordered", isDisabled: disabled || (loading && !items.length), 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);
+            }, scrollShadowProps: {
+                isEnabled: false,
+            }, onOpenChange: setOpen, listboxProps: {
+                topContent: topSearch,
+                emptyContent: loading ? undefined : 'No results',
+            }, renderValue: (items) => {
+                return items.map((item) => (_jsx("span", { children: item.textValue }, item.key)));
             }, children: (opt) => {
                 const key = getId(opt);
                 const text = getLabel(opt);

package/dist/components/SchemaForm.js

@@ -11,6 +11,7 @@ import { PhoneInput } from './PhoneInput';
 import { FileUploader } from './FileUploader';
 import AddressAutocompleteGoogle from './AddressAutocomplete';
 import { useGoogleMapsKey } from '../hooks/useGoogleMapsKey';
+import { api } from '../lib/api';
 import { parseDate, parseDateTime, parseTime, } from '@internationalized/date';
 // import RichTextEditor from './editor/RichTextEditor';
 // import ShadcnEditor from './editor/ShadcnEditor';
@@ -277,6 +278,30 @@ export function SchemaForm({ model, schemaOverride, initialValues, submitLabel =
     const schema = useMemo(() => schemaOverride ??
         items.find((s) => s.modelName.toLowerCase() === model.toLowerCase()), [items, model, schemaOverride]);
     const [form, setForm] = useState(initialValues ?? {});
+    // For auto-slugging
+    const [manuallyEditedSlugs, setManuallyEditedSlugs] = useState(new Set());
+    const [pendingSlugChecks, setPendingSlugChecks] = useState({});
+    useEffect(() => {
+        const timer = setTimeout(async () => {
+            const entries = Object.entries(pendingSlugChecks);
+            if (entries.length === 0)
+                return;
+            const newValues = {};
+            for (const [targetName, baseSlug] of entries) {
+                if (!baseSlug)
+                    continue;
+                const uniqueSlug = await findUniqueSlug(model, baseSlug, form.id || form._id);
+                if (uniqueSlug !== form[targetName]) {
+                    newValues[targetName] = uniqueSlug;
+                }
+            }
+            if (Object.keys(newValues).length > 0) {
+                setForm((f) => ({ ...f, ...newValues }));
+            }
+            setPendingSlugChecks({});
+        }, 600); // 600ms debounce
+        return () => clearTimeout(timer);
+    }, [pendingSlugChecks, model, form.id, form._id, form]);
     const [error, setError] = useState();
     const isEdit = useMemo(() => !!(initialValues &&
         (initialValues.id || initialValues._id)), [initialValues]);
@@ -318,7 +343,44 @@ export function SchemaForm({ model, schemaOverride, initialValues, submitLabel =
         .filter(([name, attr]) => !(isEdit && isPasswordAttr(name, attr)))
         .map(([name, attr]) => ({ name, attr })), [schema, canBypassPrivacy, isEdit]);
     const gridClass = 'grid gap-4 grid-cols-2';
-    const handleChange = (name, value) => setForm((f) => ({ ...f, [name]: value }));
+    const handleChange = (name, value) => {
+        setForm((f) => {
+            const next = { ...f, [name]: value };
+            if (schema) {
+                // 1. If we edited a target field directly, mark it as manually edited
+                const attr = schema.attributes[name];
+                const head = Array.isArray(attr) ? attr[0] : attr;
+                if (head && head.populateSlugFrom) {
+                    setManuallyEditedSlugs((prev) => new Set(prev).add(name));
+                }
+                // 2. If we edited a source field, update its targets
+                for (const [fname, fattr] of Object.entries(schema.attributes)) {
+                    const fhead = Array.isArray(fattr) ? fattr[0] : fattr;
+                    const populateFrom = fhead?.populateSlugFrom;
+                    if (populateFrom) {
+                        const sources = String(populateFrom)
+                            .split(',')
+                            .map((s) => s.trim());
+                        if (sources.includes(name) && !manuallyEditedSlugs.has(fname)) {
+                            const baseText = sources
+                                .map((s) => next[s] || '')
+                                .filter(Boolean)
+                                .join(' ');
+                            if (baseText) {
+                                const baseSlug = slugify(baseText);
+                                next[fname] = baseSlug;
+                                setPendingSlugChecks((prev) => ({ ...prev, [fname]: baseSlug }));
+                            }
+                            else {
+                                next[fname] = '';
+                            }
+                        }
+                    }
+                }
+            }
+            return next;
+        });
+    };
     const handleSubmit = async (e) => {
         e.preventDefault();
         setError(undefined);
@@ -421,7 +483,9 @@ export function SchemaForm({ model, schemaOverride, initialValues, submitLabel =
 function SchemaField({ uid, name, attr, value, onChange, disabled, inputClassNames, selectClassNames, mapsKey, availableSchemas, formState, }) {
     const id = `${uid}-${name}`;
     const label = attr?.label ?? formatLabel(name);
-    const required = !!attr?.required;
+    const required = !!attr?.required ||
+        name.toLowerCase() === 'slug' ||
+        !!attr?.populateSlugFrom;
     const description = attr?.description;
     // Prefer ref over enum. Only use enum when there is NO ref.
     const enumVals = attr?.ref
@@ -718,3 +782,34 @@ function getPopulateTarget(attr) {
     const t = head?.populate ?? attr?.populate;
     return typeof t === 'string' && t.trim() ? t.trim() : null;
 }
+function slugify(text) {
+    return text
+        .toLowerCase()
+        .trim()
+        .replace(/[\s_]+/g, '-')
+        .replace(/[^\w\-]+/g, '')
+        .replace(/-+/g, '-')
+        .replace(/^-+|-+$/g, '');
+}
+async function findUniqueSlug(model, baseSlug, currentId) {
+    let attempt = 0;
+    while (true) {
+        const checkSlug = attempt === 0 ? baseSlug : `${baseSlug}-${attempt}`;
+        try {
+            // Check if slug exists in the model
+            const res = await api.list(model, 0, 1, { slug: checkSlug });
+            const existing = res.data?.[0];
+            if (!existing ||
+                (currentId && String(existing.id || existing._id) === String(currentId))) {
+                return checkSlug;
+            }
+        }
+        catch (e) {
+            console.error('Slug check failed', e);
+            return checkSlug; // Fallback to current if API fails
+        }
+        attempt++;
+        if (attempt > 100)
+            return checkSlug; // Safety break
+    }
+}

package/dist/components/editor/components/DistrictGridModal.js

@@ -68,5 +68,5 @@ export const DistrictGridModal = ({ isOpen, onClose, onInsert, currentSpeciality
                                                     ? "bg-primary-50 border-primary-500 text-primary-700 dark:bg-primary-900/20 dark:text-primary-400"
                                                     : "bg-transparent border-gray-200 dark:border-gray-800 hover:bg-gray-50 dark:hover:bg-gray-900"), children: "Doctors" }), _jsx("button", { onClick: () => setBaseType('hospitals'), className: cn("px-4 py-2 rounded-lg border text-sm font-medium transition-colors", baseType === 'hospitals'
                                                     ? "bg-primary-50 border-primary-500 text-primary-700 dark:bg-primary-900/20 dark:text-primary-400"
-                                                    : "bg-transparent border-gray-200 dark:border-gray-800 hover:bg-gray-50 dark:hover:bg-gray-900"), children: "Hospitals" })] })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx("label", { className: "text-sm font-medium", children: "Select Districts" }), _jsx(RefMultiSelect, { name: "districts", label: "Search & Select Districts", refModel: "Districts", value: selectedDistricts, onChange: (ids) => setSelectedDistricts(ids), pageSize: 64 }), _jsx("p", { className: "text-xs text-gray-400", children: "Select one or more districts to create grid items." })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx("label", { className: "text-sm font-medium", children: "Select Speciality (Optional)" }), _jsx(RefSingleSelect, { name: "speciality", label: "Search & Select Speciality", refModel: "Specialities", showKey: "name", value: selectedSpecialityId, onChange: (id) => setSelectedSpecialityId(id || ''), pageSize: 50 }), _jsx("p", { className: "text-xs text-gray-400", children: "Leave empty to create URLs without speciality." }), specialitySlug && (_jsx("div", { className: "mt-1 px-2 py-1 bg-primary-50 dark:bg-primary-900/20 rounded border border-primary-200 dark:border-primary-800", children: _jsxs("p", { className: "text-xs text-primary-700 dark:text-primary-400", children: ["Slug: ", _jsx("code", { className: "font-mono", children: specialitySlug })] }) }))] }), selectedDistricts.length > 0 && (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx("label", { className: "text-sm font-medium", children: "URL Preview" }), _jsxs("div", { className: "px-3 py-2 bg-gray-50 dark:bg-gray-900 rounded-lg border border-gray-200 dark:border-gray-800 max-h-32 overflow-y-auto", children: [_jsx("p", { className: "text-xs text-gray-500 mb-2", children: "Example URL pattern (actual district slugs will be used):" }), _jsx("code", { className: "text-xs text-gray-700 dark:text-gray-300", children: getPreviewUrl('[district-slug]') })] })] }))] }), _jsxs(ModalFooter, { children: [_jsx(Button, { variant: "flat", onPress: onClose, children: "Cancel" }), _jsx(Button, { color: "primary", onPress: handleInsert, isDisabled: selectedDistricts.length === 0, children: "Insert Grid" })] })] }) }) }));
+                                                    : "bg-transparent border-gray-200 dark:border-gray-800 hover:bg-gray-50 dark:hover:bg-gray-900"), children: "Hospitals" })] })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(RefMultiSelect, { name: "districts", label: "Search & Select Districts", refModel: "Districts", value: selectedDistricts, onChange: (ids) => setSelectedDistricts(ids), pageSize: 1000 }), _jsx("p", { className: "text-xs text-gray-400", children: "Select one or more districts to create grid items." })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(RefSingleSelect, { name: "speciality", label: "Search & Select Speciality", refModel: "Specialities", showKey: "name", value: selectedSpecialityId, onChange: (id) => setSelectedSpecialityId(id || ''), pageSize: 10000 }), _jsx("p", { className: "text-xs text-gray-400", children: "Leave empty to create URLs without speciality." }), specialitySlug && (_jsx("div", { className: "mt-1 px-2 py-1 bg-primary-50 dark:bg-primary-900/20 rounded border border-primary-200 dark:border-primary-800", children: _jsxs("p", { className: "text-xs text-primary-700 dark:text-primary-400", children: ["Slug: ", _jsx("code", { className: "font-mono", children: specialitySlug })] }) }))] }), selectedDistricts.length > 0 && (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx("label", { className: "text-sm font-medium", children: "URL Preview" }), _jsxs("div", { className: "px-3 py-2 bg-gray-50 dark:bg-gray-900 rounded-lg border border-gray-200 dark:border-gray-800 max-h-32 overflow-y-auto", children: [_jsx("p", { className: "text-xs text-gray-500 mb-2", children: "Example URL pattern (actual district slugs will be used):" }), _jsx("code", { className: "text-xs text-gray-700 dark:text-gray-300", children: getPreviewUrl('[district-slug]') })] })] }))] }), _jsxs(ModalFooter, { children: [_jsx(Button, { variant: "flat", onPress: onClose, children: "Cancel" }), _jsx(Button, { color: "primary", onPress: handleInsert, isDisabled: selectedDistricts.length === 0, children: "Insert Grid" })] })] }) }) }));
 };

package/dist/components/editor/components/SchemaInsertionModal.js

@@ -83,7 +83,7 @@ export const SchemaInsertionModal = ({ isOpen, onClose, onInsert, schema, availa
             base: "bg-white dark:bg-zinc-950 border border-gray-200 dark:border-gray-800",
             header: "border-b border-gray-200 dark:border-gray-800",
             footer: "border-t border-gray-200 dark:border-gray-800",
-        }, children: _jsx(ModalContent, { children: _jsxs(_Fragment, { children: [_jsxs(ModalHeader, { children: ["Insert ", schema.modelName] }), _jsxs(ModalBody, { className: "py-6 flex flex-col gap-6", children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx("label", { className: "text-sm font-medium", children: "Select Items" }), _jsx(RefMultiSelect, { name: "items", label: "Search & Select", refModel: schema.modelName, value: selectedIds, onChange: (ids) => setSelectedIds(ids), pageSize: 20 }), _jsx("p", { className: "text-xs text-gray-400", children: "Leave empty to fetch latest items automatically." })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx("label", { className: "text-sm font-medium", children: "View Type" }), _jsxs("div", { className: "flex gap-4", children: [_jsx("button", { onClick: () => setViewType('grid'), className: cn("px-4 py-2 rounded-lg border text-sm font-medium transition-colors", viewType === 'grid'
+        }, children: _jsx(ModalContent, { children: _jsxs(_Fragment, { children: [_jsxs(ModalHeader, { children: ["Insert ", schema.modelName] }), _jsxs(ModalBody, { className: "py-6 flex flex-col gap-6", children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(RefMultiSelect, { name: "items", label: "Search & Select", refModel: schema.modelName, value: selectedIds, onChange: (ids) => setSelectedIds(ids), pageSize: 10000 }), _jsx("p", { className: "text-xs text-gray-400", children: "Leave empty to fetch latest items automatically." })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx("label", { className: "text-sm font-medium", children: "View Type" }), _jsxs("div", { className: "flex gap-4", children: [_jsx("button", { onClick: () => setViewType('grid'), className: cn("px-4 py-2 rounded-lg border text-sm font-medium transition-colors", viewType === 'grid'
                                                     ? "bg-primary-50 border-primary-500 text-primary-700 dark:bg-primary-900/20 dark:text-primary-400"
                                                     : "bg-transparent border-gray-200 dark:border-gray-800 hover:bg-gray-50"), children: "Grid (Pills)" }), _jsx("button", { onClick: () => setViewType('list'), className: cn("px-4 py-2 rounded-lg border text-sm font-medium transition-colors", viewType === 'list'
                                                     ? "bg-primary-50 border-primary-500 text-primary-700 dark:bg-primary-900/20 dark:text-primary-400"

package/dist/lib/types.d.ts

@@ -6,6 +6,7 @@ export type AttributeBase = {
     ref?: string;
     longtext?: boolean;
     show?: string;
+    populateSlugFrom?: string;
 };
 export type ArrayAttribute = AttributeBase[];
 export type Attribute = AttributeBase | ArrayAttribute;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@airoom/nextmin-react",
-  "version": "1.4.4",
+  "version": "1.4.5",
   "license": "MIT",
   "type": "module",
   "main": "./dist/index.js",