@xyo-network/react-map 2.35.7 → 2.35.8

package/dist/esm/Components/MapBox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MapBox.d.ts","sourceRoot":"","sources":["../../../src/Components/MapBox.tsx"],"names":[],"mappings":";AACA,OAAO,8BAA8B,CAAA;AAErC,OAAO,EAAO,aAAa,EAAE,MAAM,WAAW,CAAA;AAM9C,MAAM,WAAW,WAAW;IAC1B,OAAO,CAAC,EAAE,OAAO,CAAC,aAAa,CAAC,CAAA;IAChC,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,WAAW,EAAE,MAAM,CAAA;CACpB;AAED,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAiDxC,CAAA"}
+{"version":3,"file":"MapBox.d.ts","sourceRoot":"","sources":["../../../src/Components/MapBox.tsx"],"names":[],"mappings":";AACA,OAAO,8BAA8B,CAAA;AAErC,OAAO,EAAO,aAAa,EAAE,MAAM,WAAW,CAAA;AAO9C,MAAM,WAAW,WAAW;IAC1B,OAAO,CAAC,EAAE,OAAO,CAAC,aAAa,CAAC,CAAA;IAChC,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,WAAW,EAAE,MAAM,CAAA;CACpB;AAED,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAwDxC,CAAA"}

package/dist/esm/Components/MapBox.js

@@ -4,12 +4,16 @@ import 'mapbox-gl/dist/mapbox-gl.css';
 import { Map } from 'mapbox-gl';
 import { useEffect, useRef, useState } from 'react';
 import { useMapBoxInstance, useMapSettings } from '../Contexts';
+import { useDynamicMapResize } from '../hooks';
 import { XyoMapStyle } from '../lib';
 export const MapBox = ({ accessToken, darkMode = false, zoom = 2, options, ...props }) => {
     const [map, setMap] = useState();
     const mapContainerRef = useRef(null);
-    const { setMapBoxInstance } = useMapBoxInstance();
+    const mapCanvasRef = useRef(null);
+    const { setMapBoxInstance, map: mapInstance } = useMapBoxInstance();
     const { mapSettings } = useMapSettings();
+    const activeResize = mapSettings?.dynamicMapResize.value;
+    useDynamicMapResize(mapContainerRef, mapCanvasRef, mapInstance, activeResize);
     useEffect(() => {
         if (mapSettings?.preferDark?.value === true) {
             map?.setStyle(`mapbox://styles/${XyoMapStyle.Dark}`);
@@ -30,6 +34,8 @@ export const MapBox = ({ accessToken, darkMode = false, zoom = 2, options, ...pr
         // Allow external components to control the map
         setMapBoxInstance?.(map);
         setMap(map);
+        // save the map canvas ref to help with resizing
+        mapCanvasRef.current = document.querySelector('.mapboxgl-canvas');
         console.log('Created Map');
         return () => {
             console.log('Removing Map');

package/dist/esm/Components/MapBox.js.map

@@ -1 +1 @@
-{"version":3,"file":"MapBox.js","sourceRoot":"","sources":["../../../src/Components/MapBox.tsx"],"names":[],"mappings":";AAAA,sDAAsD;AACtD,OAAO,8BAA8B,CAAA;AAErC,OAAO,EAAE,GAAG,EAAiB,MAAM,WAAW,CAAA;AAC9C,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAEnD,OAAO,EAAE,iBAAiB,EAAE,cAAc,EAAE,MAAM,aAAa,CAAA;AAC/D,OAAO,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAA;AASpC,MAAM,CAAC,MAAM,MAAM,GAA0B,CAAC,EAAE,WAAW,EAAE,QAAQ,GAAG,KAAK,EAAE,IAAI,GAAG,CAAC,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IAC9G,MAAM,CAAC,GAAG,EAAE,MAAM,CAAC,GAAG,QAAQ,EAAO,CAAA;IACrC,MAAM,eAAe,GAAG,MAAM,CAAwB,IAAI,CAAC,CAAA;IAC3D,MAAM,EAAE,iBAAiB,EAAE,GAAG,iBAAiB,EAAE,CAAA;IACjD,MAAM,EAAE,WAAW,EAAE,GAAG,cAAc,EAAE,CAAA;IAExC,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,WAAW,EAAE,UAAU,EAAE,KAAK,KAAK,IAAI,EAAE;YAC3C,GAAG,EAAE,QAAQ,CAAC,mBAAmB,WAAW,CAAC,IAAI,EAAE,CAAC,CAAA;SACrD;aAAM;YACL,GAAG,EAAE,QAAQ,CAAC,mBAAmB,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC,WAAW,CAAC,KAAK,EAAE,CAAC,CAAA;SACpF;IACH,CAAC,EAAE,CAAC,GAAG,EAAE,QAAQ,EAAE,WAAW,CAAC,CAAC,CAAA;IAEhC,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,GAAG,GAAG,IAAI,GAAG,CAAC;YAClB,WAAW;YACX,MAAM,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;YACd,SAAS,EAAE,eAAe,CAAC,OAAO,IAAI,EAAE;YACxC,KAAK,EAAE,mBAAmB,WAAW,CAAC,KAAK,EAAE;YAC7C,IAAI;YACJ,GAAG,OAAO;SACX,CAAC,CAAA;QAEF,+CAA+C;QAC/C,iBAAiB,EAAE,CAAC,GAAG,CAAC,CAAA;QACxB,MAAM,CAAC,GAAG,CAAC,CAAA;QAEX,OAAO,CAAC,GAAG,CAAC,aAAa,CAAC,CAAA;QAE1B,OAAO,GAAG,EAAE;YACV,OAAO,CAAC,GAAG,CAAC,cAAc,CAAC,CAAA;YAC3B,GAAG,CAAC,MAAM,EAAE,CAAA;QACd,CAAC,CAAA;IACH,CAAC,EAAE,CAAC,eAAe,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,iBAAiB,EAAE,WAAW,CAAC,CAAC,CAAA;IAE5E,OAAO,CACL,cACE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,eAAe,CAAC,OAAO,GAAG,EAAE,CAAC,EAC3C,KAAK,EAAE;YACL,MAAM,EAAE,CAAC;YACT,IAAI,EAAE,CAAC;YACP,QAAQ,EAAE,UAAU;YACpB,KAAK,EAAE,CAAC;YACR,GAAG,EAAE,CAAC;YACN,GAAG,KAAK;SACT,GACD,CACH,CAAA;AACH,CAAC,CAAA"}
+{"version":3,"file":"MapBox.js","sourceRoot":"","sources":["../../../src/Components/MapBox.tsx"],"names":[],"mappings":";AAAA,sDAAsD;AACtD,OAAO,8BAA8B,CAAA;AAErC,OAAO,EAAE,GAAG,EAAiB,MAAM,WAAW,CAAA;AAC9C,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAEnD,OAAO,EAAE,iBAAiB,EAAE,cAAc,EAAE,MAAM,aAAa,CAAA;AAC/D,OAAO,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAA;AAC9C,OAAO,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAA;AASpC,MAAM,CAAC,MAAM,MAAM,GAA0B,CAAC,EAAE,WAAW,EAAE,QAAQ,GAAG,KAAK,EAAE,IAAI,GAAG,CAAC,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IAC9G,MAAM,CAAC,GAAG,EAAE,MAAM,CAAC,GAAG,QAAQ,EAAO,CAAA;IACrC,MAAM,eAAe,GAAG,MAAM,CAAwB,IAAI,CAAC,CAAA;IAC3D,MAAM,YAAY,GAAG,MAAM,CAA2B,IAAI,CAAC,CAAA;IAC3D,MAAM,EAAE,iBAAiB,EAAE,GAAG,EAAE,WAAW,EAAE,GAAG,iBAAiB,EAAE,CAAA;IACnE,MAAM,EAAE,WAAW,EAAE,GAAG,cAAc,EAAE,CAAA;IAExC,MAAM,YAAY,GAAG,WAAW,EAAE,gBAAgB,CAAC,KAAK,CAAA;IACxD,mBAAmB,CAAC,eAAe,EAAE,YAAY,EAAE,WAAW,EAAE,YAAY,CAAC,CAAA;IAE7E,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,WAAW,EAAE,UAAU,EAAE,KAAK,KAAK,IAAI,EAAE;YAC3C,GAAG,EAAE,QAAQ,CAAC,mBAAmB,WAAW,CAAC,IAAI,EAAE,CAAC,CAAA;SACrD;aAAM;YACL,GAAG,EAAE,QAAQ,CAAC,mBAAmB,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC,WAAW,CAAC,KAAK,EAAE,CAAC,CAAA;SACpF;IACH,CAAC,EAAE,CAAC,GAAG,EAAE,QAAQ,EAAE,WAAW,CAAC,CAAC,CAAA;IAEhC,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,GAAG,GAAG,IAAI,GAAG,CAAC;YAClB,WAAW;YACX,MAAM,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;YACd,SAAS,EAAE,eAAe,CAAC,OAAO,IAAI,EAAE;YACxC,KAAK,EAAE,mBAAmB,WAAW,CAAC,KAAK,EAAE;YAC7C,IAAI;YACJ,GAAG,OAAO;SACX,CAAC,CAAA;QAEF,+CAA+C;QAC/C,iBAAiB,EAAE,CAAC,GAAG,CAAC,CAAA;QACxB,MAAM,CAAC,GAAG,CAAC,CAAA;QAEX,gDAAgD;QAChD,YAAY,CAAC,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,kBAAkB,CAAC,CAAA;QAEjE,OAAO,CAAC,GAAG,CAAC,aAAa,CAAC,CAAA;QAE1B,OAAO,GAAG,EAAE;YACV,OAAO,CAAC,GAAG,CAAC,cAAc,CAAC,CAAA;YAC3B,GAAG,CAAC,MAAM,EAAE,CAAA;QACd,CAAC,CAAA;IACH,CAAC,EAAE,CAAC,eAAe,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,iBAAiB,EAAE,WAAW,CAAC,CAAC,CAAA;IAE5E,OAAO,CACL,cACE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,eAAe,CAAC,OAAO,GAAG,EAAE,CAAC,EAC3C,KAAK,EAAE;YACL,MAAM,EAAE,CAAC;YACT,IAAI,EAAE,CAAC;YACP,QAAQ,EAAE,UAAU;YACpB,KAAK,EAAE,CAAC;YACR,GAAG,EAAE,CAAC;YACN,GAAG,KAAK;SACT,GACD,CACH,CAAA;AACH,CAAC,CAAA"}

package/dist/esm/Settings/DefaultMapSettings.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DefaultMapSettings.d.ts","sourceRoot":"","sources":["../../../src/Settings/DefaultMapSettings.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAEzC,eAAO,MAAM,kBAAkB,EAAE,MAAM,UAwCrC,CAAA"}
+{"version":3,"file":"DefaultMapSettings.d.ts","sourceRoot":"","sources":["../../../src/Settings/DefaultMapSettings.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAEzC,eAAO,MAAM,kBAAkB,EAAE,MAAM,UA8CrC,CAAA"}

package/dist/esm/Settings/DefaultMapSettings.js

@@ -12,6 +12,12 @@ export const DefaultMapSettings = () => ({
         label: 'Debug Logging',
         value: false,
     },
+    dynamicMapResize: {
+        devMode: false,
+        field: 'dynamicMapResize',
+        label: 'Auto Map Resize',
+        value: true,
+    },
     enableControls: {
         devMode: true,
         field: 'enableControls',

package/dist/esm/Settings/DefaultMapSettings.js.map

@@ -1 +1 @@
-{"version":3,"file":"DefaultMapSettings.js","sourceRoot":"","sources":["../../../src/Settings/DefaultMapSettings.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,kBAAkB,GAAqB,GAAG,EAAE,CAAC,CAAC;IACzD,UAAU,EAAE;QACV,OAAO,EAAE,IAAI;QACb,KAAK,EAAE,YAAY;QACnB,MAAM,EAAE,IAAI;QACZ,KAAK,EAAE,aAAa;QACpB,KAAK,EAAE,KAAK;KACb;IACD,YAAY,EAAE;QACZ,OAAO,EAAE,IAAI;QACb,KAAK,EAAE,cAAc;QACrB,KAAK,EAAE,eAAe;QACtB,KAAK,EAAE,KAAK;KACb;IACD,cAAc,EAAE;QACd,OAAO,EAAE,IAAI;QACb,KAAK,EAAE,gBAAgB;QACvB,KAAK,EAAE,cAAc;QACrB,KAAK,EAAE,KAAK;KACb;IACD,WAAW,EAAE;QACX,OAAO,EAAE,IAAI;QACb,KAAK,EAAE,aAAa;QACpB,MAAM,EAAE,IAAI;QACZ,KAAK,EAAE,eAAe;QACtB,KAAK,EAAE,KAAK;KACb;IACD,UAAU,EAAE;QACV,OAAO,EAAE,KAAK;QACd,KAAK,EAAE,YAAY;QACnB,MAAM,EAAE,IAAI;QACZ,KAAK,EAAE,aAAa;QACpB,KAAK,EAAE,KAAK;KACb;IACD,YAAY,EAAE;QACZ,OAAO,EAAE,IAAI;QACb,KAAK,EAAE,cAAc;QACrB,KAAK,EAAE,gBAAgB;QACvB,KAAK,EAAE,KAAK;KACb;CACF,CAAC,CAAA"}
+{"version":3,"file":"DefaultMapSettings.js","sourceRoot":"","sources":["../../../src/Settings/DefaultMapSettings.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,kBAAkB,GAAqB,GAAG,EAAE,CAAC,CAAC;IACzD,UAAU,EAAE;QACV,OAAO,EAAE,IAAI;QACb,KAAK,EAAE,YAAY;QACnB,MAAM,EAAE,IAAI;QACZ,KAAK,EAAE,aAAa;QACpB,KAAK,EAAE,KAAK;KACb;IACD,YAAY,EAAE;QACZ,OAAO,EAAE,IAAI;QACb,KAAK,EAAE,cAAc;QACrB,KAAK,EAAE,eAAe;QACtB,KAAK,EAAE,KAAK;KACb;IACD,gBAAgB,EAAE;QAChB,OAAO,EAAE,KAAK;QACd,KAAK,EAAE,kBAAkB;QACzB,KAAK,EAAE,iBAAiB;QACxB,KAAK,EAAE,IAAI;KACZ;IACD,cAAc,EAAE;QACd,OAAO,EAAE,IAAI;QACb,KAAK,EAAE,gBAAgB;QACvB,KAAK,EAAE,cAAc;QACrB,KAAK,EAAE,KAAK;KACb;IACD,WAAW,EAAE;QACX,OAAO,EAAE,IAAI;QACb,KAAK,EAAE,aAAa;QACpB,MAAM,EAAE,IAAI;QACZ,KAAK,EAAE,eAAe;QACtB,KAAK,EAAE,KAAK;KACb;IACD,UAAU,EAAE;QACV,OAAO,EAAE,KAAK;QACd,KAAK,EAAE,YAAY;QACnB,MAAM,EAAE,IAAI;QACZ,KAAK,EAAE,aAAa;QACpB,KAAK,EAAE,KAAK;KACb;IACD,YAAY,EAAE;QACZ,OAAO,EAAE,IAAI;QACb,KAAK,EAAE,cAAc;QACrB,KAAK,EAAE,gBAAgB;QACvB,KAAK,EAAE,KAAK;KACb;CACF,CAAC,CAAA"}

package/dist/esm/Settings/MapSetting.d.ts

@@ -6,6 +6,7 @@ export declare type MapSetting = {
         label: string;
         hidden?: boolean;
         devMode?: boolean;
+        dynamicMapResize?: boolean;
     };
 };
 //# sourceMappingURL=MapSetting.d.ts.map

package/dist/esm/Settings/MapSetting.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MapSetting.d.ts","sourceRoot":"","sources":["../../../src/Settings/MapSetting.ts"],"names":[],"mappings":"AAAA,oBAAY,gBAAgB,GAAG,YAAY,GAAG,aAAa,GAAG,cAAc,GAAG,gBAAgB,GAAG,cAAc,GAAG,YAAY,CAAA;AAE/H,oBAAY,UAAU,GAAG;KACtB,KAAK,IAAI,gBAAgB,GAAG,MAAM,GAAG;QACpC,KAAK,EAAE,OAAO,CAAA;QACd,KAAK,EAAE,MAAM,CAAA;QACb,KAAK,EAAE,MAAM,CAAA;QACb,MAAM,CAAC,EAAE,OAAO,CAAA;QAChB,OAAO,CAAC,EAAE,OAAO,CAAA;KAClB;CACF,CAAA"}
+{"version":3,"file":"MapSetting.d.ts","sourceRoot":"","sources":["../../../src/Settings/MapSetting.ts"],"names":[],"mappings":"AAAA,oBAAY,gBAAgB,GAAG,YAAY,GAAG,aAAa,GAAG,cAAc,GAAG,gBAAgB,GAAG,cAAc,GAAG,YAAY,CAAA;AAE/H,oBAAY,UAAU,GAAG;KACtB,KAAK,IAAI,gBAAgB,GAAG,MAAM,GAAG;QACpC,KAAK,EAAE,OAAO,CAAA;QACd,KAAK,EAAE,MAAM,CAAA;QACb,KAAK,EAAE,MAAM,CAAA;QACb,MAAM,CAAC,EAAE,OAAO,CAAA;QAChB,OAAO,CAAC,EAAE,OAAO,CAAA;QACjB,gBAAgB,CAAC,EAAE,OAAO,CAAA;KAC3B;CACF,CAAA"}

package/dist/esm/hooks/index.d.ts

@@ -1,3 +1,4 @@
+export * from './useDynamicMapResize';
 export * from './useDynamicPositioning';
 export * from './useFetchPayloads';
 export * from './useFindHashes';

package/dist/esm/hooks/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,yBAAyB,CAAA;AACvC,cAAc,oBAAoB,CAAA;AAClC,cAAc,iBAAiB,CAAA;AAC/B,cAAc,oBAAoB,CAAA;AAClC,cAAc,gCAAgC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAA;AACrC,cAAc,yBAAyB,CAAA;AACvC,cAAc,oBAAoB,CAAA;AAClC,cAAc,iBAAiB,CAAA;AAC/B,cAAc,oBAAoB,CAAA;AAClC,cAAc,gCAAgC,CAAA"}

package/dist/esm/hooks/index.js

@@ -1,3 +1,4 @@
+export * from './useDynamicMapResize';
 export * from './useDynamicPositioning';
 export * from './useFetchPayloads';
 export * from './useFindHashes';

package/dist/esm/hooks/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,yBAAyB,CAAA;AACvC,cAAc,oBAAoB,CAAA;AAClC,cAAc,iBAAiB,CAAA;AAC/B,cAAc,oBAAoB,CAAA;AAClC,cAAc,gCAAgC,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAA;AACrC,cAAc,yBAAyB,CAAA;AACvC,cAAc,oBAAoB,CAAA;AAClC,cAAc,iBAAiB,CAAA;AAC/B,cAAc,oBAAoB,CAAA;AAClC,cAAc,gCAAgC,CAAA"}

package/dist/esm/hooks/useDynamicMapResize.d.ts

@@ -0,0 +1,7 @@
+import { Map } from 'mapbox-gl';
+import { MutableRefObject } from 'react';
+/**
+ * Inspired by - https://bl.ocks.org/danswick/fc56f37c10d40be62e4feac5984250d2
+ */
+export declare const useDynamicMapResize: (mapContainerRef: MutableRefObject<HTMLDivElement | null>, mapCanvasRef: MutableRefObject<HTMLCanvasElement | null>, mapInstance?: Map, active?: boolean) => void;
+//# sourceMappingURL=useDynamicMapResize.d.ts.map

package/dist/esm/hooks/useDynamicMapResize.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDynamicMapResize.d.ts","sourceRoot":"","sources":["../../../src/hooks/useDynamicMapResize.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,WAAW,CAAA;AAC/B,OAAO,EAAE,gBAAgB,EAAgC,MAAM,OAAO,CAAA;AAEtE;;GAEG;AACH,eAAO,MAAM,mBAAmB,oBACb,iBAAiB,cAAc,GAAG,IAAI,CAAC,gBAC1C,iBAAiB,iBAAiB,GAAG,IAAI,CAAC,gBAC1C,GAAG,2BAmClB,CAAA"}

package/dist/esm/hooks/useDynamicMapResize.js

@@ -0,0 +1,31 @@
+import { useEffect, useMemo, useState } from 'react';
+/**
+ * Inspired by - https://bl.ocks.org/danswick/fc56f37c10d40be62e4feac5984250d2
+ */
+export const useDynamicMapResize = (mapContainerRef, mapCanvasRef, mapInstance, active = true) => {
+    const [dependenciesReady, setDependenciesReady] = useState(false);
+    const resizer = useMemo(() => new ResizeObserver(() => {
+        const width = mapContainerRef.current?.getBoundingClientRect().width;
+        if (width && mapCanvasRef.current) {
+            mapCanvasRef.current.style.width = `${width}px`;
+            // setTimeout allows for the smoothest animation (vs requestAnimationFrame, debouce, etc)
+            // likely because it lets mapbox resize once when the event loop is ready?
+            setTimeout(() => mapInstance?.resize());
+        }
+    }), [mapCanvasRef, mapContainerRef, mapInstance]);
+    useEffect(() => {
+        const dependenciesReady = !!(active && mapInstance && mapContainerRef?.current && mapCanvasRef.current);
+        setDependenciesReady(dependenciesReady);
+    }, [active, mapCanvasRef, mapContainerRef, mapInstance]);
+    useEffect(() => {
+        if (dependenciesReady) {
+            if (mapContainerRef.current) {
+                resizer.observe(mapContainerRef.current);
+            }
+            return () => {
+                resizer.disconnect();
+            };
+        }
+    }, [active, dependenciesReady, mapCanvasRef, mapContainerRef, mapInstance, resizer]);
+};
+//# sourceMappingURL=useDynamicMapResize.js.map

package/dist/esm/hooks/useDynamicMapResize.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDynamicMapResize.js","sourceRoot":"","sources":["../../../src/hooks/useDynamicMapResize.tsx"],"names":[],"mappings":"AACA,OAAO,EAAoB,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAEtE;;GAEG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG,CACjC,eAAwD,EACxD,YAAwD,EACxD,WAAiB,EACjB,MAAM,GAAG,IAAI,EACb,EAAE;IACF,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IAEjE,MAAM,OAAO,GAAG,OAAO,CACrB,GAAG,EAAE,CACH,IAAI,cAAc,CAAC,GAAG,EAAE;QACtB,MAAM,KAAK,GAAG,eAAe,CAAC,OAAO,EAAE,qBAAqB,EAAE,CAAC,KAAK,CAAA;QACpE,IAAI,KAAK,IAAI,YAAY,CAAC,OAAO,EAAE;YACjC,YAAY,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,GAAG,GAAG,KAAK,IAAI,CAAA;YAC/C,yFAAyF;YACzF,0EAA0E;YAC1E,UAAU,CAAC,GAAG,EAAE,CAAC,WAAW,EAAE,MAAM,EAAE,CAAC,CAAA;SACxC;IACH,CAAC,CAAC,EACJ,CAAC,YAAY,EAAE,eAAe,EAAE,WAAW,CAAC,CAC7C,CAAA;IAED,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,iBAAiB,GAAG,CAAC,CAAC,CAAC,MAAM,IAAI,WAAW,IAAI,eAAe,EAAE,OAAO,IAAI,YAAY,CAAC,OAAO,CAAC,CAAA;QACvG,oBAAoB,CAAC,iBAAiB,CAAC,CAAA;IACzC,CAAC,EAAE,CAAC,MAAM,EAAE,YAAY,EAAE,eAAe,EAAE,WAAW,CAAC,CAAC,CAAA;IAExD,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,iBAAiB,EAAE;YACrB,IAAI,eAAe,CAAC,OAAO,EAAE;gBAC3B,OAAO,CAAC,OAAO,CAAC,eAAe,CAAC,OAAO,CAAC,CAAA;aACzC;YAED,OAAO,GAAG,EAAE;gBACV,OAAO,CAAC,UAAU,EAAE,CAAA;YACtB,CAAC,CAAA;SACF;IACH,CAAC,EAAE,CAAC,MAAM,EAAE,iBAAiB,EAAE,YAAY,EAAE,eAAe,EAAE,WAAW,EAAE,OAAO,CAAC,CAAC,CAAA;AACtF,CAAC,CAAA"}

package/package.json

@@ -12,11 +12,11 @@
   "dependencies": {
     "@xylabs/react-flexbox": "^2.14.20",
     "@xylabs/react-shared": "^2.14.20",
-    "@xyo-network/react-app-settings": "^2.35.7",
-    "@xyo-network/react-archive": "^2.35.7",
-    "@xyo-network/react-archivist-api": "^2.35.7",
-    "@xyo-network/react-network": "^2.35.7",
-    "@xyo-network/react-shared": "^2.35.7",
+    "@xyo-network/react-app-settings": "^2.35.8",
+    "@xyo-network/react-archive": "^2.35.8",
+    "@xyo-network/react-archivist-api": "^2.35.8",
+    "@xyo-network/react-network": "^2.35.8",
+    "@xyo-network/react-shared": "^2.35.8",
     "@xyo-network/sdk-geo": "^2.6.19",
     "geojson": "^0.5.0",
     "mapbox-gl": "^2.10.0",
@@ -79,5 +79,5 @@
   },
   "sideEffects": false,
   "types": "dist/esm/index.d.ts",
-  "version": "2.35.7"
+  "version": "2.35.8"
 }

package/src/Components/MapBox.stories.tsx

@@ -0,0 +1,68 @@
+import { Button } from '@mui/material'
+import { ComponentStory, DecoratorFn, Meta } from '@storybook/react'
+import { FlexGrowCol } from '@xylabs/react-flexbox'
+import { useRef } from 'react'
+
+import { MapBoxInstanceProvider, MapSettingsProvider } from '../Contexts'
+import { DefaultMapSettings } from '../Settings'
+import { MapBox } from './MapBox'
+
+const WithMapboxProviders: DecoratorFn = (Story, props) => {
+  return (
+    <MapBoxInstanceProvider>
+      <MapSettingsProvider defaultMapSettings={DefaultMapSettings()}>
+        <Story {...props} />
+      </MapSettingsProvider>
+    </MapBoxInstanceProvider>
+  )
+}
+
+// eslint-disable-next-line import/no-default-export
+export default {
+  argTypes: {
+    accessToken: {
+      defaultValue: process.env.STORYBOOK_MAPBOX_TOKEN,
+    },
+  },
+  component: MapBox,
+  decorators: [WithMapboxProviders],
+  parameters: {
+    docs: {
+      page: null,
+    },
+  },
+  title: 'map/Mapbox',
+} as Meta
+
+const Template: ComponentStory<typeof MapBox> = (args) => {
+  const containerRef = useRef<HTMLDivElement | null>()
+  const handleClick = () => {
+    if (containerRef.current) {
+      const containerWidth = containerRef.current.style.minWidth
+      if (containerWidth === '100%') {
+        containerRef.current.style.minWidth = '50%'
+      } else {
+        containerRef.current.style.minWidth = '100%'
+      }
+    }
+  }
+
+  return (
+    <FlexGrowCol rowGap={2} alignItems="start">
+      <Button variant="contained" sx={{ my: 2 }} onClick={handleClick}>
+        Toggle Container minWidth
+      </Button>
+      <div
+        ref={(ref) => (containerRef.current = ref)}
+        style={{ minHeight: 'calc(100vh - 2rem)', minWidth: '100%', position: 'relative', transition: 'min-width 300ms ease' }}
+      >
+        <MapBox {...args} />
+      </div>
+    </FlexGrowCol>
+  )
+}
+
+const Default = Template.bind({})
+Default.args = {}
+
+export { Default }

package/src/Components/MapBox.tsx

@@ -5,6 +5,7 @@ import { Map, MapboxOptions } from 'mapbox-gl'
 import { useEffect, useRef, useState } from 'react'
 
 import { useMapBoxInstance, useMapSettings } from '../Contexts'
+import { useDynamicMapResize } from '../hooks'
 import { XyoMapStyle } from '../lib'
 
 export interface MapBoxProps {
@@ -17,9 +18,13 @@ export interface MapBoxProps {
 export const MapBox: React.FC<MapBoxProps> = ({ accessToken, darkMode = false, zoom = 2, options, ...props }) => {
   const [map, setMap] = useState<Map>()
   const mapContainerRef = useRef<HTMLDivElement | null>(null)
-  const { setMapBoxInstance } = useMapBoxInstance()
+  const mapCanvasRef = useRef<HTMLCanvasElement | null>(null)
+  const { setMapBoxInstance, map: mapInstance } = useMapBoxInstance()
   const { mapSettings } = useMapSettings()
 
+  const activeResize = mapSettings?.dynamicMapResize.value
+  useDynamicMapResize(mapContainerRef, mapCanvasRef, mapInstance, activeResize)
+
   useEffect(() => {
     if (mapSettings?.preferDark?.value === true) {
       map?.setStyle(`mapbox://styles/${XyoMapStyle.Dark}`)
@@ -42,6 +47,9 @@ export const MapBox: React.FC<MapBoxProps> = ({ accessToken, darkMode = false, z
     setMapBoxInstance?.(map)
     setMap(map)
 
+    // save the map canvas ref to help with resizing
+    mapCanvasRef.current = document.querySelector('.mapboxgl-canvas')
+
     console.log('Created Map')
 
     return () => {

package/src/Settings/DefaultMapSettings.ts

@@ -14,6 +14,12 @@ export const DefaultMapSettings: () => MapSetting = () => ({
     label: 'Debug Logging',
     value: false,
   },
+  dynamicMapResize: {
+    devMode: false,
+    field: 'dynamicMapResize',
+    label: 'Auto Map Resize',
+    value: true,
+  },
   enableControls: {
     devMode: true,
     field: 'enableControls',

package/src/Settings/MapSetting.ts

@@ -7,5 +7,6 @@ export type MapSetting = {
     label: string
     hidden?: boolean
     devMode?: boolean
+    dynamicMapResize?: boolean
   }
 }

package/src/hooks/index.ts

@@ -1,3 +1,4 @@
+export * from './useDynamicMapResize'
 export * from './useDynamicPositioning'
 export * from './useFetchPayloads'
 export * from './useFindHashes'

package/src/hooks/useDynamicMapResize.tsx

@@ -0,0 +1,45 @@
+import { Map } from 'mapbox-gl'
+import { MutableRefObject, useEffect, useMemo, useState } from 'react'
+
+/**
+ * Inspired by - https://bl.ocks.org/danswick/fc56f37c10d40be62e4feac5984250d2
+ */
+export const useDynamicMapResize = (
+  mapContainerRef: MutableRefObject<HTMLDivElement | null>,
+  mapCanvasRef: MutableRefObject<HTMLCanvasElement | null>,
+  mapInstance?: Map,
+  active = true,
+) => {
+  const [dependenciesReady, setDependenciesReady] = useState(false)
+
+  const resizer = useMemo(
+    () =>
+      new ResizeObserver(() => {
+        const width = mapContainerRef.current?.getBoundingClientRect().width
+        if (width && mapCanvasRef.current) {
+          mapCanvasRef.current.style.width = `${width}px`
+          // setTimeout allows for the smoothest animation (vs requestAnimationFrame, debouce, etc)
+          // likely because it lets mapbox resize once when the event loop is ready?
+          setTimeout(() => mapInstance?.resize())
+        }
+      }),
+    [mapCanvasRef, mapContainerRef, mapInstance],
+  )
+
+  useEffect(() => {
+    const dependenciesReady = !!(active && mapInstance && mapContainerRef?.current && mapCanvasRef.current)
+    setDependenciesReady(dependenciesReady)
+  }, [active, mapCanvasRef, mapContainerRef, mapInstance])
+
+  useEffect(() => {
+    if (dependenciesReady) {
+      if (mapContainerRef.current) {
+        resizer.observe(mapContainerRef.current)
+      }
+
+      return () => {
+        resizer.disconnect()
+      }
+    }
+  }, [active, dependenciesReady, mapCanvasRef, mapContainerRef, mapInstance, resizer])
+}