@longline/aqua-ui 1.0.348 → 1.0.349

package/map/Map/Map.d.ts

@@ -1,7 +1,8 @@
 import * as React from 'react';
 import { MapMouseEvent, Map as OriginalMap } from 'mapbox-gl';
-import { Map as GLMap, ViewState, ViewStateChangeEvent } from 'react-map-gl/mapbox';
+import { Map as GLMap, ViewStateChangeEvent } from 'react-map-gl/mapbox';
 import { ITestable } from '../../Types';
+import { ViewStateContext, useViewState } from '../context';
 interface IMapProps extends ITestable {
     /** @ignore */
     children?: React.ReactNode;
@@ -134,8 +135,6 @@ interface IMapProps extends ITestable {
      */
     transformRequest?: React.ComponentProps<typeof GLMap>['transformRequest'];
 }
-declare const ViewStateContext: React.Context<ViewState | null>;
-declare const useViewState: () => ViewState | null;
 declare const Map: {
     ({ longitude, latitude, zoom, pitch, bearing, logoPosition, interactiveLayerIds, noRotate, preserveDrawingBuffer, minZoom, maxZoom, fadeDuration, doubleClickZoom, ...props }: IMapProps): React.JSX.Element;
     displayName: string;

package/map/Map/Map.js

@@ -62,10 +62,22 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import * as React from 'react';
 import styled, { useTheme } from "styled-components";
-import { Map as GLMap, Layer, Source } from 'react-map-gl/mapbox';
-var ViewStateContext = React.createContext(null);
-var useViewState = function () {
-    return React.useContext(ViewStateContext);
+import { Map as GLMap, Layer, Source, useMap as useGLMap } from 'react-map-gl/mapbox';
+import { MapInstanceContext, ViewStateContext, useViewState } from '../context';
+/**
+ * Publishes the live map on this package's own context, so that controls can
+ * reach it through `useMap()` from `map/context` without importing
+ * react-map-gl — and therefore without dragging mapbox-gl into the bundle of
+ * any app that only wants a zoom button.
+ *
+ * Must render inside `GLMap`, since that is what puts react-map-gl's own
+ * context in scope for the hook below.
+ */
+var MapInstanceBridge = function (_a) {
+    var _b;
+    var children = _a.children;
+    var current = useGLMap().current;
+    return (React.createElement(MapInstanceContext.Provider, { value: (_b = current) !== null && _b !== void 0 ? _b : null }, children));
 };
 /**
  * `Map` creates a react-mapbox-gl map instance. The map stretches to fill its
@@ -231,7 +243,8 @@ var MapBase = function (props) {
             React.createElement(Source, { type: "raster", tiles: ["https://api.mapbox.com/v4/mapbox.satellite/{z}/{x}/{y}@2x.webp?access_token=".concat(props.token)] },
                 React.createElement(Layer, { beforeId: "overlay", type: "raster" }))),
         React.createElement(ViewStateContext.Provider, { value: __assign({}, viewState) },
-            React.createElement(Controls, null, props.children))));
+            React.createElement(MapInstanceBridge, null,
+                React.createElement(Controls, null, props.children)))));
 };
 var Controls = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  pointer-events: none;\n  & > * {\n    pointer-events: all;\n  }\n\n  ", ";\n"], ["\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  pointer-events: none;\n  & > * {\n    pointer-events: all;\n  }\n\n  ", ";\n"])), function (p) { return p.theme.font.bodyMedium; });
 var Map = function (_a) {
@@ -239,5 +252,7 @@ var Map = function (_a) {
     return React.createElement(MapBase, __assign({ longitude: longitude, latitude: latitude, zoom: zoom, pitch: pitch, bearing: bearing, logoPosition: logoPosition, interactiveLayerIds: interactiveLayerIds, noRotate: noRotate, preserveDrawingBuffer: preserveDrawingBuffer, minZoom: minZoom, maxZoom: maxZoom, fadeDuration: fadeDuration, doubleClickZoom: doubleClickZoom }, props));
 };
 Map.displayName = 'Map';
+// useViewState and ViewStateContext now live in map/context, which is free of
+// react-map-gl. Re-exported here so existing imports keep working.
 export { Map, useViewState, ViewStateContext };
 var templateObject_1;

package/map/context/MapContext.d.ts

@@ -0,0 +1,72 @@
+import * as React from 'react';
+/**
+ * The map's current view state.
+ *
+ * Declared here rather than imported from react-map-gl, deliberately: anything
+ * that imports react-map-gl also pulls in the whole of mapbox-gl, and the point
+ * of this module is that a control can reach the map without paying that. The
+ * shape matches react-map-gl's `ViewState`, so the two stay assignable to each
+ * other and `Map` can feed its own state straight into the context.
+ */
+interface IViewState {
+    longitude: number;
+    latitude: number;
+    zoom: number;
+    pitch: number;
+    bearing: number;
+    /** Members are optional, matching react-map-gl's `PaddingOptions`. */
+    padding: {
+        top?: number;
+        bottom?: number;
+        left?: number;
+        right?: number;
+    };
+}
+/**
+ * The part of a map that the controls in this package actually use.
+ *
+ * Structural on purpose. A mapbox-gl `Map`, a maplibre-gl `Map` and
+ * react-map-gl's `MapRef` all satisfy it, so a host can hand over whichever it
+ * has and this package needs a dependency on none of them.
+ */
+interface IMapInstance {
+    zoomIn(): void;
+    zoomOut(): void;
+    getZoom(): number;
+    getMinZoom(): number;
+    getMaxZoom(): number;
+    rotateTo(bearing: number, options?: any): void;
+    resetNorthPitch(options?: any): void;
+    getContainer(): HTMLElement;
+}
+declare const ViewStateContext: React.Context<IViewState | null>;
+declare const MapInstanceContext: React.Context<IMapInstance | null>;
+/**
+ * The current view state of the surrounding map: centre, zoom, bearing, pitch
+ * and padding.
+ *
+ * `Map` provides this automatically to everything it hosts. A host driving its
+ * own map instance provides `ViewStateContext` itself.
+ */
+declare const useViewState: () => IViewState | null;
+/**
+ * The surrounding map instance.
+ *
+ * `Map` provides this automatically to everything it hosts. A host driving its
+ * own map — a bare mapbox-gl or maplibre-gl instance, say — provides
+ * `MapInstanceContext` itself:
+ *
+ * ```tsx
+ * <MapInstanceContext.Provider value={map}>
+ *   <ViewStateContext.Provider value={viewState}>
+ *     <ZoomInButton x={20} y={20}/>
+ *   </ViewStateContext.Provider>
+ * </MapInstanceContext.Provider>
+ * ```
+ *
+ * Note this returns the map itself, where react-map-gl's like-named hook
+ * returns a collection to pick `current` out of.
+ */
+declare const useMap: () => IMapInstance | null;
+export { ViewStateContext, MapInstanceContext, useViewState, useMap };
+export type { IViewState, IMapInstance };

package/map/context/MapContext.js

@@ -0,0 +1,31 @@
+import * as React from 'react';
+var ViewStateContext = React.createContext(null);
+var MapInstanceContext = React.createContext(null);
+/**
+ * The current view state of the surrounding map: centre, zoom, bearing, pitch
+ * and padding.
+ *
+ * `Map` provides this automatically to everything it hosts. A host driving its
+ * own map instance provides `ViewStateContext` itself.
+ */
+var useViewState = function () { return React.useContext(ViewStateContext); };
+/**
+ * The surrounding map instance.
+ *
+ * `Map` provides this automatically to everything it hosts. A host driving its
+ * own map — a bare mapbox-gl or maplibre-gl instance, say — provides
+ * `MapInstanceContext` itself:
+ *
+ * ```tsx
+ * <MapInstanceContext.Provider value={map}>
+ *   <ViewStateContext.Provider value={viewState}>
+ *     <ZoomInButton x={20} y={20}/>
+ *   </ViewStateContext.Provider>
+ * </MapInstanceContext.Provider>
+ * ```
+ *
+ * Note this returns the map itself, where react-map-gl's like-named hook
+ * returns a collection to pick `current` out of.
+ */
+var useMap = function () { return React.useContext(MapInstanceContext); };
+export { ViewStateContext, MapInstanceContext, useViewState, useMap };

package/map/context/index.d.ts

@@ -0,0 +1 @@
+export * from './MapContext';

package/map/context/index.js

@@ -0,0 +1 @@
+export * from './MapContext';

package/map/controls/CompassButton/CompassButton.js

@@ -25,15 +25,14 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import * as React from 'react';
-import { useMap } from 'react-map-gl/mapbox';
 import styled, { css } from 'styled-components';
 import { MapButton } from '../base/MapButton';
-import { useViewState } from '../../Map';
+import { useMap, useViewState } from '../../context';
 import { Mouse } from '../../../controls/Mouse';
 import { Key } from '../../../controls/Key';
 var CompassButtonBase = function (props) {
     var viewState = useViewState();
-    var map = useMap().current;
+    var map = useMap();
     return (React.createElement(MapButton, __assign({ "data-testid": props['data-testid'] || "CompassButton", ariaLabel: "Reset bearing and pitch", onClick: function () { map.rotateTo(0); map.resetNorthPitch(); } }, props),
         React.createElement("div", { style: { transform: "rotateX(".concat(props.visualizePitch ? viewState.pitch : 0, "deg)") } },
             React.createElement("svg", { style: { transform: "rotateZ(".concat(-viewState.bearing, "deg)") }, xmlns: "http://www.w3.org/2000/svg", x: "0px", y: "0px", viewBox: "0 0 1000 1000" },

package/map/controls/FullscreenButton/FullscreenButton.js

@@ -21,8 +21,8 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import * as React from 'react';
-import { useMap } from 'react-map-gl/mapbox';
 import { MapButton } from '../base/MapButton';
+import { useMap } from '../../context';
 /**
  * The `FullscreenButton` toggles the map full-screen when clicked.
  *
@@ -35,7 +35,7 @@ import { MapButton } from '../base/MapButton';
  */
 var FullscreenButton = function (_a) {
     var _b = _a.hint, hint = _b === void 0 ? React.createElement(React.Fragment, null, "Toggle fullscreen map") : _b, _c = _a.mode, mode = _c === void 0 ? 'document' : _c, props = __rest(_a, ["hint", "mode"]);
-    var map = useMap().current;
+    var map = useMap();
     // Does the browser offer full screen support?
     var checkFullscreenSupport = function () {
         return !!(window.document.fullscreenEnabled ||

package/map/controls/ScaleControl/ScaleControl.js

@@ -26,7 +26,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import * as React from 'react';
 import styled from 'styled-components';
-import { useViewState } from '../../Map';
+import { useViewState } from '../../context';
 import { MapControl } from '../base/MapControl/MapControl';
 var DEFAULT_WIDTH = 100;
 // Number display steps, in meters:

package/map/controls/ZoomInButton/ZoomInButton.js

@@ -21,9 +21,8 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import * as React from 'react';
-import { useMap } from 'react-map-gl/mapbox';
 import { MapButton } from '../base/MapButton';
-import { useViewState } from '../../Map';
+import { useMap, useViewState } from '../../context';
 import { Mouse } from '../../../controls/Mouse';
 import { Key } from '../../../controls/Key';
 /**
@@ -48,7 +47,7 @@ var ZoomInButton = function (_a) {
         React.createElement(Mouse, { size: 16, wheel: true }),
         " Zoom in") : _b, props = __rest(_a, ["hint"]);
     var viewState = useViewState();
-    var map = useMap().current;
+    var map = useMap();
     return (React.createElement(MapButton, __assign({ "data-testid": props['data-testid'] || "ZoomInButton", ariaLabel: "Zoom in", disabled: viewState.zoom >= map.getMaxZoom(), onClick: function () { return map.zoomIn(); }, hint: hint }, props),
         React.createElement("svg", { width: "100", height: "100", viewBox: "0 0 100 100", xmlns: "http://www.w3.org/2000/svg" },
             React.createElement("path", { d: "M100,43.2v13.6c0,1.9-0.7,3.5-2,4.8c-1.3,1.3-2.9,2-4.8,2H63.6v29.5c0,1.9-0.7,3.5-2,4.8c-1.3,1.3-2.9,2-4.8,2H43.2c-1.9,0-3.5-0.7-4.8-2c-1.3-1.3-2-2.9-2-4.8V63.6H6.8c-1.9,0-3.5-0.7-4.8-2c-1.3-1.3-2-2.9-2-4.8V43.2c0-1.9,0.7-3.5,2-4.8c1.3-1.3,2.9-2,4.8-2h29.5V6.8c0-1.9,0.7-3.5,2-4.8c1.3-1.3,2.9-2,4.8-2h13.6c1.9,0,3.5,0.7,4.8,2c1.3,1.3,2,2.9,2,4.8v29.5h29.5c1.9,0,3.5,0.7,4.8,2C99.3,39.7,100,41.3,100,43.2z" }))));

package/map/controls/ZoomOutButton/ZoomOutButton.js

@@ -21,9 +21,8 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import * as React from 'react';
-import { useMap } from 'react-map-gl/mapbox';
 import { MapButton } from '../base/MapButton';
-import { useViewState } from '../../Map';
+import { useMap, useViewState } from '../../context';
 import { Mouse } from '../../../controls/Mouse';
 import { Key } from '../../../controls/Key';
 /**
@@ -48,7 +47,7 @@ var ZoomOutButton = function (_a) {
         React.createElement(Mouse, { size: 16, wheel: true }),
         " Zoom out") : _b, props = __rest(_a, ["hint"]);
     var viewState = useViewState();
-    var map = useMap().current;
+    var map = useMap();
     return (React.createElement(MapButton, __assign({ "data-testid": props['data-testid'] || "ZoomOutButton", ariaLabel: "Zoom out", disabled: viewState.zoom <= map.getMinZoom(), onClick: function () { return map.zoomOut(); }, hint: hint }, props),
         React.createElement("svg", { width: "100", height: "100", viewBox: "0 0 100 100", xmlns: "http://www.w3.org/2000/svg" },
             React.createElement("path", { d: "M93.2,36.4c1.9,0,3.5,0.7,4.8,2c1.3,1.3,2,2.9,2,4.8v13.6c0,1.9-0.7,3.5-2,4.8c-1.3,1.3-2.9,2-4.8,2H63.6H6.8c-1.9,0-3.5-0.7-4.8-2c-1.3-1.3-2-2.9-2-4.8V43.2c0-1.9,0.7-3.5,2-4.8c1.3-1.3,2.9-2,4.8-2" }))));

package/map/controls/base/MapControl/MapControl.js

@@ -26,7 +26,9 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import * as React from 'react';
 import styled from 'styled-components';
-import { useViewState } from '../../../Map';
+// From map/context, not map/Map: importing the Map component here would pull
+// react-map-gl, and with it mapbox-gl, into every app that uses a control.
+import { useViewState } from '../../../context';
 // Default prop values, referenced both by the MapControlBase fallbacks and the
 // MapControl wrapper below.
 var DEFAULT_X = 0;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@longline/aqua-ui",
-  "version": "1.0.348",
+  "version": "1.0.349",
   "description": "AquaUI",
   "author": "Alexander van Oostenrijk / Longline Environment",
   "license": "Commercial",