@airoom/nextmin-react 0.1.4 → 0.1.5

package/dist/components/AddressAutocomplete.js

@@ -1,5 +1,5 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { Autocomplete, AutocompleteItem } from '@heroui/react';
 import { loadGoogleMaps } from '../lib/googleLoader';
@@ -13,7 +13,7 @@ function deriveStableKey(s) {
     return pid ? String(pid) : label ? String(label) : null;
 }
 export default function AddressAutocompleteGoogle({ name, label, description, value, onChange, disabled, required, className, classNames, countryCodes, limit = 8, apiKey, }) {
-    // Controlled input
+    // ---------------- Hooks (ALL before any return) ----------------
     const [q, setQ] = useState(value ?? '');
     useEffect(() => {
         if ((value ?? '') !== q)
@@ -22,41 +22,45 @@ export default function AddressAutocompleteGoogle({ name, label, description, va
     }, [value]);
     const [items, setItems] = useState([]);
     const [keyMissing, setKeyMissing] = useState(false);
-    // Google + guards
     const tokenRef = useRef(null);
     const suppressFetchRef = useRef(false);
     const fetchGenRef = useRef(0);
-    // Clears
     const manualClearRef = useRef(false);
     const locationRestriction = useMemo(() => {
         const cc = (countryCodes?.[0] ?? '').toLowerCase();
-        if (cc === 'bd' || !cc)
+        if (cc === 'bd' || !cc) {
             return { west: 88.008, south: 20.67, east: 92.68, north: 26.634 };
+        }
         return undefined;
     }, [countryCodes]);
-    // Load Google once (and on key change)
+    // Compute readiness; DON'T early-return before hooks are declared
+    const ready = Boolean(apiKey && apiKey.trim()) && !keyMissing;
+    // Load Google once (and when key toggles)
     useEffect(() => {
+        if (!apiKey || !apiKey.trim()) {
+            setKeyMissing(true);
+            tokenRef.current = null;
+            return;
+        }
         (async () => {
             try {
-                const g = await loadGoogleMaps(apiKey);
+                const g = await loadGoogleMaps(apiKey); // must include libraries=places
                 tokenRef.current = new g.maps.places.AutocompleteSessionToken();
                 setKeyMissing(false);
             }
             catch {
                 setKeyMissing(true);
+                tokenRef.current = null;
             }
         })();
     }, [apiKey]);
-    if (!apiKey || !apiKey.trim()) {
-        return (_jsxs("div", { className: "text-danger text-xs", children: ["Google Maps API key is missing. Set ", _jsx("b", { children: "system.googleMapsKey" }), " or define ", _jsx("b", { children: "NEXT_PUBLIC_GOOGLE_MAPS_KEY" }), "."] }));
-    }
-    if (keyMissing) {
-        return (_jsxs("div", { className: "text-danger text-xs", children: ["Google Maps API key is missing or invalid. Set", ' ', _jsx("b", { children: "system.googleMapsKey" }), " or ", _jsx("b", { children: "NEXT_PUBLIC_GOOGLE_MAPS_KEY" }), "."] }));
-    }
-    // Debounced suggestions fetch (Places API New)
+    // Debounced suggestions fetch (always declared, internally gated by `ready`)
     useEffect(() => {
-        if (suppressFetchRef.current)
+        if (!ready || suppressFetchRef.current) {
+            if (!ready)
+                setItems([]);
             return;
+        }
         const trimmed = (q ?? '').trim();
         if (!trimmed || trimmed.length < 3) {
             setItems([]);
@@ -84,8 +88,8 @@ export default function AddressAutocompleteGoogle({ name, label, description, va
                     .slice(0, Math.max(1, limit))
                     .map((s) => {
                     const key = deriveStableKey(s);
-                    const label = s.placePrediction?.text?.toString?.() ?? '';
-                    return key && label ? { key, label, raw: s } : null;
+                    const lbl = s.placePrediction?.text?.toString?.() ?? '';
+                    return key && lbl ? { key, label: lbl, raw: s } : null;
                 })
                     .filter((r) => !!r);
                 setItems(mapped);
@@ -99,8 +103,9 @@ export default function AddressAutocompleteGoogle({ name, label, description, va
             cancelled = true;
             clearTimeout(t);
         };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [q, apiKey, countryCodes, locationRestriction, limit]);
+    }, [ready, q, apiKey, countryCodes, locationRestriction, limit]);
+    // ----------------------------------------------------------------
+    // Utilities (no hooks)
     const getLatLng = (loc) => {
         if (!loc)
             return null;
@@ -110,15 +115,13 @@ export default function AddressAutocompleteGoogle({ name, label, description, va
             return { lat: loc.lat, lng: loc.lng };
         return null;
     };
-    // Resolve and commit
     const resolveByKey = async (key) => {
         const rec = items.find((r) => r.key === key);
         if (!rec)
             return;
         suppressFetchRef.current = true;
-        // Show EXACT suggestion text immediately, and keep it
-        const label = rec.label;
-        setQ(label);
+        const labelText = rec.label;
+        setQ(labelText);
         setItems([]);
         try {
             const g = await loadGoogleMaps(apiKey);
@@ -127,20 +130,17 @@ export default function AddressAutocompleteGoogle({ name, label, description, va
                 return;
             const place = pp.toPlace();
             await place.fetchFields({
-                fields: ['location'], // we only need lat/lng; do NOT fetch formattedAddress
+                fields: ['location'],
                 sessionToken: tokenRef.current ?? undefined,
             });
             const ll = getLatLng(place.location);
-            // Always commit the SUGGESTION TEXT to the form; populate latLng when available
-            onChange(label, ll ?? undefined);
-            // fresh session
+            onChange(labelText, ll ?? undefined);
             tokenRef.current = new g.maps.places.AutocompleteSessionToken();
         }
         finally {
             suppressFetchRef.current = false;
         }
     };
-    // Normalize HeroUI selection payload
     function extractKey(sel) {
         if (sel === null || sel === undefined || sel === 'all')
             return null;
@@ -150,7 +150,8 @@ export default function AddressAutocompleteGoogle({ name, label, description, va
         }
         return String(sel);
     }
-    return (_jsx("div", { className: className, children: _jsx(Autocomplete, { "aria-label": label ?? name, label: label, labelPlacement: "outside", placeholder: "Type address", name: name, isRequired: required, description: description, variant: "bordered", classNames: classNames, isDisabled: disabled, items: items, inputValue: q, isClearable: true, onClear: () => {
+    // ------- Render: keep subtree shape stable; disable when not ready -------
+    return (_jsx("div", { className: className, children: _jsx(Autocomplete, { "aria-label": label ?? name, label: label, labelPlacement: "outside", placeholder: "Type address", name: name, isRequired: required, description: description, variant: "bordered", classNames: classNames, isDisabled: disabled || !ready, items: ready ? items : [], inputValue: q, isClearable: true, onClear: () => {
                 manualClearRef.current = true;
                 setQ('');
                 setItems([]);
@@ -160,10 +161,11 @@ export default function AddressAutocompleteGoogle({ name, label, description, va
                     manualClearRef.current = true;
                 }
             }, onInputChange: (text) => {
+                if (!ready)
+                    return;
                 if (text == null)
                     return;
                 const trimmed = text.trim();
-                // Ignore blur-initiated clears unless it was a real manual clear
                 if (trimmed === '' && !manualClearRef.current)
                     return;
                 if (trimmed === '' && manualClearRef.current) {
@@ -175,6 +177,8 @@ export default function AddressAutocompleteGoogle({ name, label, description, va
                 if (text !== q)
                     setQ(text);
             }, onSelectionChange: (sel) => {
+                if (!ready)
+                    return;
                 const key = extractKey(sel);
                 if (key)
                     void resolveByKey(key);

package/dist/components/SchemaForm.js

@@ -182,6 +182,7 @@ function normalizeTimeRangeLoose(value) {
 }
 /** --------------------------------------------------------------------------------------- **/
 export function SchemaForm({ model, schemaOverride, initialValues, submitLabel = 'Save', busy = false, showReset = true, onSubmit, }) {
+    const mapsKey = useGoogleMapsKey();
     const formUid = useId();
     const { items } = useSelector((s) => s.schemas);
     const reduxUser = useSelector((s) => s?.session?.user ?? null) ??
@@ -294,10 +295,10 @@ export function SchemaForm({ model, schemaOverride, initialValues, submitLabel =
                         ? form[name]
                         : ''
                     : (form[name] ?? (Array.isArray(attr) ? [] : ''));
-                return (_jsx("div", { className: colClass, children: _jsx(SchemaField, { uid: formUid, name: name, attr: attr, value: baseValue, onChange: handleChange, disabled: busy, inputClassNames: inputClassNames, selectClassNames: selectClassNames }) }, name));
+                return (_jsx("div", { className: colClass, children: _jsx(SchemaField, { uid: formUid, name: name, attr: attr, value: baseValue, onChange: handleChange, disabled: busy, inputClassNames: inputClassNames, selectClassNames: selectClassNames, mapsKey: mapsKey }) }, name));
             }), error && (_jsx("div", { className: "col-span-2", children: _jsx("div", { className: "text-danger text-sm", children: error }) })), _jsxs("div", { className: "flex gap-2 col-span-2", children: [_jsx(Button, { type: "submit", color: "primary", isLoading: busy, children: submitLabel }), showReset && (_jsx(Button, { type: "reset", variant: "flat", isDisabled: busy, children: "Reset" }))] })] }));
 }
-function SchemaField({ uid, name, attr, value, onChange, disabled, inputClassNames, selectClassNames, }) {
+function SchemaField({ uid, name, attr, value, onChange, disabled, inputClassNames, selectClassNames, mapsKey, }) {
     const id = `${uid}-${name}`;
     const label = attr?.label ?? formatLabel(name);
     const required = !!attr?.required;
@@ -345,7 +346,6 @@ function SchemaField({ uid, name, attr, value, onChange, disabled, inputClassNam
             : '';
         return (_jsx(PhoneInput, { id: id, name: name, label: label, mask: phoneMask, value: rawDigits, onChange: (raw) => onChange(name, raw), disabled: disabled, required: required, description: description, className: "w-full", classNames: inputClassNames }));
     }
-    const mapsKey = useGoogleMapsKey();
     const populateField = getPopulateTarget(attr);
     // Address → Autocomplete
     if (isAddressAttr(name, attr)) {

package/package.json

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