@ttoss/google-maps 2.1.23 → 2.2.0

package/dist/esm/index.js

@@ -0,0 +1,360 @@
+/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", {
+  value,
+  configurable: true
+});
+
+// src/GoogleMapsProvider.tsx
+import { useScript } from "@ttoss/react-hooks";
+import * as React from "react";
+var GoogleMapsContext = /* @__PURE__ */React.createContext({
+  status: "idle",
+  google: {
+    maps: null
+  }
+});
+var DefaultScript = /* @__PURE__ */__name(({
+  src,
+  onReady
+}) => {
+  const {
+    status
+  } = useScript(src);
+  React.useEffect(() => {
+    if (status === "ready") {
+      onReady();
+    }
+  }, [status, onReady]);
+  return null;
+}, "DefaultScript");
+var GoogleMapsProvider = /* @__PURE__ */__name(({
+  children,
+  apiKey,
+  loading = "async",
+  libraries,
+  language,
+  Script = DefaultScript,
+  onError
+}) => {
+  const src = (() => {
+    let srcTemp = `https://maps.googleapis.com/maps/api/js?key=${apiKey}`;
+    if (loading) {
+      srcTemp = srcTemp + `&loading=${loading}`;
+    }
+    if (libraries) {
+      srcTemp = srcTemp + `&libraries=${libraries.join(",")}`;
+    }
+    if (language) {
+      srcTemp = srcTemp + `&language=${language}`;
+    }
+    return srcTemp;
+  })();
+  const [status, setStatus] = React.useState("loading");
+  const google = React.useMemo(() => {
+    if (status === "ready" && window.google) {
+      return window.google;
+    }
+    return null;
+  }, [status]);
+  const value = React.useMemo(() => {
+    if (status === "ready" && google?.maps) {
+      return {
+        status,
+        google: {
+          maps: google.maps
+        }
+      };
+    }
+    return {
+      status,
+      google: {
+        maps: null
+      }
+    };
+  }, [google, status]);
+  return /* @__PURE__ */React.createElement(React.Fragment, null, /* @__PURE__ */React.createElement(Script, {
+    src,
+    onReady: /* @__PURE__ */__name(() => {
+      return setStatus("ready");
+    }, "onReady"),
+    onError
+  }), /* @__PURE__ */React.createElement(GoogleMapsContext.Provider, {
+    value
+  }, children));
+}, "GoogleMapsProvider");
+
+// src/MapProvider.tsx
+import * as React2 from "react";
+var MapContext = /* @__PURE__ */React2.createContext({
+  map: null,
+  ref: {
+    current: null
+  }
+});
+var MapProvider = /* @__PURE__ */React2.forwardRef(({
+  children,
+  map
+}, ref) => {
+  return /* @__PURE__ */React2.createElement(MapContext.Provider, {
+    value: {
+      map,
+      ref
+    }
+  }, children);
+});
+MapProvider.displayName = "MapProvider";
+
+// src/useGeocoder.ts
+import * as React4 from "react";
+
+// src/useGoogleMaps.ts
+import * as React3 from "react";
+var useGoogleMaps = /* @__PURE__ */__name(() => {
+  const {
+    status,
+    google
+  } = React3.useContext(GoogleMapsContext);
+  const isReady = status === "ready";
+  return {
+    isReady,
+    status,
+    google
+  };
+}, "useGoogleMaps");
+
+// src/useGeocoder.ts
+var useGeocoder = /* @__PURE__ */__name(() => {
+  const {
+    google
+  } = useGoogleMaps();
+  const [isGeocoderInitialized, setIsGeocoderInitialized] = React4.useState(false);
+  const geocoder = React4.useMemo(() => {
+    if (google.maps) {
+      const googleMapsGeocoder = new google.maps.Geocoder();
+      setIsGeocoderInitialized(true);
+      return googleMapsGeocoder;
+    }
+    return null;
+  }, [google.maps]);
+  return {
+    geocoder,
+    isGeocoderInitialized
+  };
+}, "useGeocoder");
+
+// src/useMap.ts
+import * as React5 from "react";
+import { useCallbackRef } from "use-callback-ref";
+var useMap = /* @__PURE__ */__name((options = {}) => {
+  const [, forceUpdate] = React5.useState(0);
+  const ref = useCallbackRef(null, () => {
+    return forceUpdate(n => {
+      return n + 1;
+    });
+  });
+  const {
+    google,
+    isReady
+  } = useGoogleMaps();
+  const mapContext = React5.useContext(MapContext);
+  const [map, setMap] = React5.useState(mapContext.map);
+  React5.useEffect(() => {
+    if (map) {
+      return;
+    }
+    if (!ref.current) {
+      return;
+    }
+    if (!isReady) {
+      return;
+    }
+    if (!google.maps?.Map) {
+      return;
+    }
+    setMap(new google.maps.Map(ref.current, options));
+  }, [map, isReady, ref, google.maps?.Map, options]);
+  const optionsStringify = JSON.stringify(options);
+  React5.useEffect(() => {
+    if (map) {
+      const parsedOptions = JSON.parse(optionsStringify);
+      map.setOptions(parsedOptions);
+    }
+  }, [optionsStringify, map]);
+  return {
+    /**
+    * Returns the map object which provides access to the [Google Maps API](https://developers.google.com/maps/documentation/javascript/overview).
+    */
+    map,
+    /**
+    * Returns the ref object which provides access to the HTMLDivElement element
+    * that the map is rendered in.
+    */
+    ref
+  };
+}, "useMap");
+
+// src/usePlacesAutocomplete/index.ts
+import * as React7 from "react";
+
+// src/usePlacesAutocomplete/useLatest.ts
+import * as React6 from "react";
+var useLatest = /* @__PURE__ */__name(val => {
+  const ref = React6.useRef(val);
+  ref.current = val;
+  return ref;
+}, "useLatest");
+
+// src/usePlacesAutocomplete/debounce.ts
+var debounce = /* @__PURE__ */__name((fn, delay) => {
+  let timer;
+  function debounceFn(...args) {
+    if (timer !== null) {
+      clearTimeout(timer);
+      timer = null;
+    }
+    timer = setTimeout(() => fn.apply(this, args), delay);
+  }
+  __name(debounceFn, "debounceFn");
+  return debounceFn;
+}, "debounce");
+var debounce_default = debounce;
+
+// src/usePlacesAutocomplete/index.ts
+var usePlacesAutocomplete = /* @__PURE__ */__name(({
+  requestOptions,
+  debounce: debounce2 = 200,
+  cache = 24 * 60 * 60,
+  cacheKey,
+  callbackName,
+  defaultValue = "",
+  initOnMount = true
+} = {}) => {
+  const [ready, setReady] = React7.useState(false);
+  const [value, setVal] = React7.useState(defaultValue);
+  const [suggestions, setSuggestions] = React7.useState({
+    loading: false,
+    status: "",
+    data: []
+  });
+  const asRef = React7.useRef(null);
+  const requestOptionsRef = useLatest(requestOptions);
+  const {
+    google
+  } = useGoogleMaps();
+  const googleMapsRef = useLatest(google.maps);
+  const upaCacheKey = cacheKey ? `upa-${cacheKey}` : "upa";
+  const init = React7.useCallback(() => {
+    if (asRef.current) {
+      return;
+    }
+    if (!google.maps) {
+      return;
+    }
+    const {
+      current: gMaps
+    } = googleMapsRef;
+    const placesLib = gMaps?.places || google.maps.places;
+    if (!placesLib) {
+      return;
+    }
+    asRef.current = new placesLib.AutocompleteService();
+    setReady(true);
+  }, [google.maps]);
+  const clearSuggestions = React7.useCallback(() => {
+    setSuggestions({
+      loading: false,
+      status: "",
+      data: []
+    });
+  }, []);
+  const clearCache = React7.useCallback(() => {
+    try {
+      sessionStorage.removeItem(upaCacheKey);
+    } catch (error) {}
+  }, []);
+  const fetchPredictions = React7.useCallback(debounce_default(val => {
+    if (!val) {
+      clearSuggestions();
+      return;
+    }
+    setSuggestions(prevState => {
+      return {
+        ...prevState,
+        loading: true
+      };
+    });
+    let cachedData = {};
+    try {
+      cachedData = JSON.parse(sessionStorage.getItem(upaCacheKey) || "{}");
+    } catch (error) {}
+    if (cache) {
+      cachedData = Object.keys(cachedData).reduce((acc, key) => {
+        if (cachedData[key].maxAge - Date.now() >= 0) {
+          acc[key] = cachedData[key];
+        }
+        return acc;
+      }, {});
+      if (cachedData[val]) {
+        setSuggestions({
+          loading: false,
+          status: "OK",
+          data: cachedData[val].data
+        });
+        return;
+      }
+    }
+    asRef?.current?.getPlacePredictions({
+      ...requestOptionsRef.current,
+      input: val
+    }, (data, status) => {
+      setSuggestions({
+        loading: false,
+        status,
+        data: data || []
+      });
+      if (cache && status === "OK") {
+        cachedData[val] = {
+          data,
+          maxAge: Date.now() + cache * 1e3
+        };
+        try {
+          sessionStorage.setItem(upaCacheKey, JSON.stringify(cachedData));
+        } catch (error) {}
+      }
+    });
+  }, debounce2), [debounce2, clearSuggestions]);
+  const setValue = React7.useCallback((val, shouldFetchData = true) => {
+    setVal(val);
+    if (asRef.current && shouldFetchData) {
+      fetchPredictions(val);
+    }
+  }, [fetchPredictions]);
+  React7.useEffect(() => {
+    if (!initOnMount) {
+      return () => {
+        return null;
+      };
+    }
+    if (!googleMapsRef.current && !google.maps && callbackName) {
+      window[callbackName] = init;
+    } else {
+      init();
+    }
+    return () => {
+      if (window[callbackName]) {
+        delete window[callbackName];
+      }
+    };
+  }, [callbackName, init]);
+  return {
+    ready,
+    value,
+    suggestions,
+    setValue,
+    clearSuggestions,
+    clearCache,
+    init
+  };
+}, "usePlacesAutocomplete");
+export { GoogleMapsProvider, MapProvider, useGeocoder, useGoogleMaps, useMap, usePlacesAutocomplete };

package/dist/index.d.ts

@@ -0,0 +1,96 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+
+type GoogleMaps = typeof google.maps;
+/**
+ * The libraries that can be loaded from the Google Maps JavaScript API.
+ * https://developers.google.com/maps/documentation/javascript/libraries?hl=pt-br#available-libraries
+ */
+type Libraries = 'core' | 'maps' | 'maps3d' | 'places' | 'geocoding' | 'routes' | 'marker' | 'geometry' | 'elevation' | 'streetView' | 'journeySharing' | 'visualization' | 'airQuality' | 'addressValidation';
+type ScriptProps = {
+    src: string;
+    onReady: () => void;
+    onError?: (e: Error) => void;
+};
+declare const GoogleMapsProvider: ({ children, apiKey, loading, libraries, language, Script, onError, }: {
+    children: React.ReactNode;
+    apiKey: string;
+    libraries?: Libraries[];
+    /**
+     * https://developers.google.com/maps/faq#languagesupport
+     */
+    language?: string;
+    loading?: "async" | false;
+    Script?: React.ComponentType<ScriptProps>;
+    onError?: (e: Error) => void;
+}) => react_jsx_runtime.JSX.Element;
+
+declare const MapProvider: React.ForwardRefExoticComponent<{
+    children: React.ReactNode;
+    map: google.maps.Map | null;
+} & React.RefAttributes<HTMLDivElement>>;
+
+declare const useGeocoder: () => {
+    geocoder: google.maps.Geocoder | null;
+    isGeocoderInitialized: boolean;
+};
+
+declare const useMap: (options?: google.maps.MapOptions) => {
+    /**
+     * Returns the map object which provides access to the [Google Maps API](https://developers.google.com/maps/documentation/javascript/overview).
+     */
+    map: google.maps.Map | null;
+    /**
+     * Returns the ref object which provides access to the HTMLDivElement element
+     * that the map is rendered in.
+     */
+    ref: React.MutableRefObject<HTMLDivElement | null>;
+};
+
+interface HookArgs {
+    requestOptions?: Omit<google.maps.places.AutocompletionRequest, 'input'>;
+    debounce?: number;
+    cache?: number | false;
+    cacheKey?: string;
+    callbackName?: string;
+    defaultValue?: string;
+    initOnMount?: boolean;
+}
+type Suggestion = google.maps.places.AutocompletePrediction;
+type Status = `${google.maps.places.PlacesServiceStatus}` | '';
+interface Suggestions {
+    readonly loading: boolean;
+    readonly status: Status;
+    data: Suggestion[];
+}
+interface SetValue {
+    (val: string, shouldFetchData?: boolean): void;
+}
+interface HookReturn {
+    ready: boolean;
+    value: string;
+    suggestions: Suggestions;
+    setValue: SetValue;
+    clearSuggestions: () => void;
+    clearCache: () => void;
+    init: () => void;
+}
+declare const usePlacesAutocomplete: ({ requestOptions, debounce, cache, cacheKey, callbackName, defaultValue, initOnMount, }?: HookArgs) => HookReturn;
+
+/**
+ * Returns the status of the Google Maps API and the google object which
+ * provides access to the [Google Maps API](https://developers.google.com/maps/documentation/javascript/overview).
+ *
+ * @returns An object containing the API status and the google object.
+ */
+declare const useGoogleMaps: () => {
+    isReady: boolean;
+    status: "idle" | "loading" | "ready" | "error";
+    google: {
+        maps: GoogleMaps;
+    } | {
+        maps: null;
+    };
+};
+
+export { GoogleMapsProvider, MapProvider, useGeocoder, useGoogleMaps, useMap, usePlacesAutocomplete };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/google-maps",
-  "version": "2.1.23",
+  "version": "2.2.0",
   "license": "MIT",
   "author": "ttoss",
   "contributors": [
@@ -24,7 +24,7 @@
   ],
   "dependencies": {
     "use-callback-ref": "^1.3.2",
-    "@ttoss/react-hooks": "^2.1.11"
+    "@ttoss/react-hooks": "^2.2.0"
   },
   "peerDependencies": {
     "react": ">=16.8.0",
@@ -32,12 +32,12 @@
   },
   "devDependencies": {
     "@types/google.maps": "^3.58.1",
-    "@types/react": "^19.2.7",
+    "@types/react": "^19.2.14",
     "jest": "^30.2.0",
-    "react": "^19.2.1",
+    "react": "^19.2.4",
     "tsup": "^8.5.1",
-    "@ttoss/config": "^1.35.12",
-    "@ttoss/test-utils": "^4.0.2"
+    "@ttoss/test-utils": "^4.1.0",
+    "@ttoss/config": "^1.36.0"
   },
   "keywords": [
     "Google",