@visns-studio/visns-components 6.24.4 → 6.25.0

package/package.json

@@ -93,7 +93,7 @@
         "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
     },
     "name": "@visns-studio/visns-components",
-    "version": "6.24.4",
+    "version": "6.25.0",
     "description": "Various packages to assist in the development of our Custom Applications.",
     "main": "src/index.js",
     "files": [
@@ -104,7 +104,9 @@
         "build": "vite build",
         "test": "node --test tests/*.test.mjs",
         "dev:vault": "vite --config dev/vite.config.js",
-        "dev:sms": "FIXTURE=sms vite --config dev/vite.config.js"
+        "dev:sms": "FIXTURE=sms vite --config dev/vite.config.js",
+        "dev:grid": "FIXTURE=grid vite --config dev/vite.config.js",
+        "check:grid": "node dev/checkGridFixture.mjs"
     },
     "repository": {
         "type": "git",

package/src/components/Autocomplete.jsx

@@ -3,6 +3,17 @@ import AwesomeDebouncePromise from 'awesome-debounce-promise';
 import { ToggleLeft, ToggleRight, Search } from 'lucide-react';
 import styles from './styles/Autocomplete.module.scss';
 import fetchUtil from '../utils/fetchUtil';
+import {
+    DEFAULT_TYPES,
+    adaptSuggestions,
+    adaptToLegacyFeature,
+    buildRetrieveUrl,
+    buildSuggestUrl,
+    createSessionTokenManager,
+    featureFromRetrieve,
+    isTypesParamRejection,
+    warnOnce,
+} from './mapboxSearchBox';
 
 // Create the debounced function outside the component to prevent recreation
 const createDebouncedSearch = (fn) =>
@@ -31,66 +42,87 @@ const VisnsAutocomplete = memo((props) => {
     const inputRef = useRef(null);
     const resultsRef = useRef(null);
 
-    // Memoize URL building logic to avoid recalculations
-    const buildSearchUrl = useCallback(
-        (value) => {
-            if (!value || !api) return null;
-
-            // The search text is a PATH segment, so it has to be escaped: an
-            // unencoded "5/12 Smith St" split the path and 404'd, which is a
-            // shape half of Australian addresses take.
-            let url = `https://api.mapbox.com/geocoding/v5/mapbox.places/${encodeURIComponent(
-                value
-            )}.json?types=address,poi&access_token=${api}`;
-
-            if (country) {
-                url += `&country=${country}`;
-            }
+    /*
+     * The Search Box session, held for the life of the mounted field.
+     *
+     * One token covers every keystroke of a search and the retrieve that ends
+     * it — that pairing is what Mapbox bills as a single session. See
+     * mapboxSearchBox.js; the manager is a ref because a token that changed
+     * with the render cycle would be a token per keystroke.
+     */
+    const sessionRef = useRef(null);
 
-            if (mapbox) {
-                if (mapbox.proximity) {
-                    url += `&proximity=${mapbox.proximity}`;
-                }
+    if (!sessionRef.current) {
+        sessionRef.current = createSessionTokenManager();
+    }
 
-                if (mapbox.bbox) {
-                    url += `&bbox=${mapbox.bbox}`;
-                }
-            }
+    /*
+     * The `types` filter, held so a refusal is only paid for once.
+     *
+     * `types=address,poi` is what the documentation says and what live calls
+     * accept. If a future Mapbox disagrees, the first refusal drops the filter
+     * for the rest of the page rather than erroring on every keystroke.
+     */
+    const typesRef = useRef(DEFAULT_TYPES);
 
-            return url;
-        },
-        [api, country, mapbox]
-    );
+    /*
+     * Read the two biasing values off the prop as primitives.
+     *
+     * `mapbox` is usually rebuilt by the parent on every render, so depending
+     * on the object identity made `performSearch` a new function each time —
+     * and the "autocomplete switched back on" effect below keys on exactly
+     * that, so it would re-fire on every render of the parent form.
+     */
+    const proximity = mapbox?.proximity;
+    const bbox = mapbox?.bbox;
 
     const performSearch = useCallback(
         (id, value) => {
-            if (id <= 0 || !value) {
+            if (id <= 0 || !value || !api) {
                 setResults([]);
                 setIsLoading(false);
                 return;
             }
 
-            const url = buildSearchUrl(value);
-            if (!url) return;
-
-            fetchUtil
-                .get(url)
-                .then((response) => {
-                    // Ensure we're accessing the features array from the response
-                    // Check if response.data is a string (sometimes happens with certain APIs)
-                    let parsedData = response.data;
-                    if (typeof response.data === 'string') {
-                        try {
-                            parsedData = JSON.parse(response.data);
-                        } catch (e) {
-                            console.error('Error parsing response data:', e);
-                        }
-                    }
+            const request = (types) => {
+                const url = buildSuggestUrl({
+                    query: value,
+                    accessToken: api,
+                    // `current()` — NOT `consume()`. Every keystroke of this
+                    // search rides the same token; only the retrieve spends it.
+                    sessionToken: sessionRef.current.current(),
+                    country,
+                    proximity,
+                    bbox,
+                    types,
+                });
 
-                    const features = parsedData?.features || [];
+                if (!url) {
+                    setIsLoading(false);
+                    return Promise.resolve();
+                }
 
-                    setResults(features);
+                return fetchUtil.get(url).then((response) => {
+                    setResults(adaptSuggestions(response.data));
                     setIsLoading(false);
+                });
+            };
+
+            request(typesRef.current)
+                .catch((error) => {
+                    if (typesRef.current && isTypesParamRejection(error)) {
+                        warnOnce(
+                            'searchbox-types',
+                            'Mapbox refused the Search Box `types` filter; retrying without it.',
+                            error?.response?.data
+                        );
+
+                        typesRef.current = '';
+
+                        return request('');
+                    }
+
+                    throw error;
                 })
                 .catch((error) => {
                     console.error('Error fetching address suggestions:', error);
@@ -98,7 +130,7 @@ const VisnsAutocomplete = memo((props) => {
                     setIsLoading(false);
                 });
         },
-        [buildSearchUrl]
+        [api, bbox, country, proximity]
     );
 
     // Create the debounced search function using our memoized performSearch
@@ -126,36 +158,15 @@ const VisnsAutocomplete = memo((props) => {
         [field, overwrite, performSearchDebounced, setFormData]
     );
 
-    const handleItemClicked = useCallback(
+    /**
+     * Hand a finished pick — already adapted to the legacy v5 feature shape —
+     * to whoever owns this field's value.
+     */
+    const applyFeature = useCallback(
         (place) => {
-            // Use place_name as the primary display value as it contains the full formatted address
-            const displayValue = place.place_name || '';
-
-            // If place_name is not available, construct from components
-            const fallbackValue = (() => {
-                const address = place.address || '';
-                const text = place.text || '';
-                const context = place.context
-                    ? place.context
-                          .filter((ctx) => ctx.text)
-                          .map((ctx) => ctx.text)
-                          .join(', ')
-                    : '';
-
-                if (address && text) {
-                    return context
-                        ? `${address} ${text}, ${context}`
-                        : `${address} ${text}`;
-                } else if (text) {
-                    return context ? `${text}, ${context}` : text;
-                }
-                return '';
-            })();
-
-            const finalValue = displayValue || fallbackValue;
-
-            setResults([]);
-            setIsFocused(false);
+            if (!place) {
+                return;
+            }
 
             /*
              * A form that handles the pick owns this field's value.
@@ -179,10 +190,14 @@ const VisnsAutocomplete = memo((props) => {
                 return;
             }
 
+            // Standalone use (no form to parse the place): the field keeps
+            // the full formatted address, which is the only useful value. The
+            // adapter always builds a `place_name`, from the record's own
+            // `full_address` or from its name and locality.
+            const finalValue = place.place_name || '';
+
             setSearch(finalValue);
 
-            // Standalone use (no form to parse the place): the field keeps
-            // the full formatted address, which is the only useful value.
             setFormData((prevState) => ({
                 ...prevState,
                 [field]: finalValue,
@@ -191,10 +206,89 @@ const VisnsAutocomplete = memo((props) => {
         [field, onSelect, setFormData]
     );
 
+    /*
+     * A click on a row is the second half of the Search Box exchange: the
+     * suggestion carries a `mapbox_id` and nothing else useful, so the full
+     * record — coordinates, context, the whole formatted address — is fetched
+     * by `retrieve` on the same session token, then adapted back to the v5
+     * shape the forms read.
+     *
+     * IT FAILS SOFT, ALWAYS. A retrieve that 500s, times out or comes back
+     * empty must not cost the user their click and must never throw into the
+     * form: a suggestion already carries the name, the street line and the
+     * same context object, so it adapts into the same feature minus the
+     * coordinates. That is worth far more than an empty address field, and
+     * nothing in this library reads the coordinates.
+     */
+    const handleItemClicked = useCallback(
+        (row) => {
+            setResults([]);
+            setIsFocused(false);
+
+            const fromSuggestion = () =>
+                adaptToLegacyFeature(row?.suggestion || row);
+
+            if (!row?.mapbox_id || !api) {
+                // Shouldn't happen — suggest returns an id on every row.
+                warnOnce(
+                    'searchbox-no-id',
+                    'Mapbox suggestion arrived without a mapbox_id; filling from the suggestion alone.',
+                    row
+                );
+
+                sessionRef.current.reset();
+                applyFeature(fromSuggestion());
+                return;
+            }
+
+            const url = buildRetrieveUrl({
+                mapboxId: row.mapbox_id,
+                accessToken: api,
+                // Spends the token: this pick closes the session, and the next
+                // thing typed opens a new one.
+                sessionToken: sessionRef.current.consume(),
+            });
+
+            fetchUtil
+                .get(url)
+                .then((response) => {
+                    const place = featureFromRetrieve(response.data);
+
+                    if (!place) {
+                        warnOnce(
+                            'searchbox-retrieve-empty',
+                            'Mapbox retrieve returned no feature; filling from the suggestion instead.',
+                            response?.data
+                        );
+
+                        applyFeature(fromSuggestion());
+                        return;
+                    }
+
+                    applyFeature(place);
+                })
+                .catch((error) => {
+                    warnOnce(
+                        'searchbox-retrieve-failed',
+                        'Mapbox retrieve failed; filling from the suggestion instead.',
+                        error
+                    );
+
+                    applyFeature(fromSuggestion());
+                });
+        },
+        [api, applyFeature]
+    );
+
     const handleOverwrite = useCallback(() => {
         setOverwrite((prevState) => {
             if (!prevState) {
                 setResults([]);
+
+                // Switching autocomplete off abandons the session rather than
+                // ending it. Keeping the token would bill whatever is typed
+                // after it is switched back on against this search.
+                sessionRef.current.reset();
             }
             return !prevState;
         });
@@ -331,34 +425,34 @@ const VisnsAutocomplete = memo((props) => {
                             Loading...
                         </li>
                     ) : Array.isArray(results) && results.length > 0 ? (
-                        results.map((place) => (
+                        /*
+                         * Suggest hands back the row already split in two:
+                         * `name` — the business or the street line — over
+                         * `place_formatted`, the locality it sits in. So
+                         * "Epiq" reads above "Perth 6000, Australia" rather
+                         * than the v5 rows' number/street pair stitched back
+                         * together from a context array. Same two elements,
+                         * same classes.
+                         */
+                        results.map((row) => (
                             <li
-                                key={place.id}
+                                key={row.id}
                                 className={styles['AutocompletePlace-items']}
-                                onClick={() => handleItemClicked(place)}
+                                onClick={() => handleItemClicked(row)}
                             >
                                 <div
                                     className={
                                         styles['AutocompletePlace-itemMain']
                                     }
                                 >
-                                    {place.address && (
-                                        <span
-                                            className={
-                                                styles[
-                                                    'AutocompletePlace-itemAddress'
-                                                ]
-                                            }
-                                        >
-                                            {place.address}
-                                        </span>
-                                    )}
                                     <span
                                         className={
-                                            styles['AutocompletePlace-itemText']
+                                            styles[
+                                                'AutocompletePlace-itemAddress'
+                                            ]
                                         }
                                     >
-                                        {place.text}
+                                        {row.name}
                                     </span>
                                 </div>
                                 <div
@@ -368,31 +462,7 @@ const VisnsAutocomplete = memo((props) => {
                                         ]
                                     }
                                 >
-                                    {place.context &&
-                                        place.context
-                                            .filter((ctx) => ctx.text)
-                                            .map((ctx, index) => (
-                                                <span key={ctx.id || index}>
-                                                    {ctx.text}
-                                                </span>
-                                            ))
-                                            .reduce(
-                                                (prev, curr, i) => [
-                                                    prev,
-                                                    <span
-                                                        key={`sep-${i}`}
-                                                        className={
-                                                            styles[
-                                                                'AutocompletePlace-itemSeparator'
-                                                            ]
-                                                        }
-                                                    >
-                                                        ,{' '}
-                                                    </span>,
-                                                    curr,
-                                                ],
-                                                []
-                                            )}
+                                    {row.place_formatted}
                                 </div>
                             </li>
                         ))