@longline/aqua-ui 1.0.325 → 1.0.327

package/map/controls/CompassButton/CompassButton.js

@@ -34,7 +34,7 @@ import { Key } from '../../../controls/Key';
 var CompassButtonBase = function (p) {
     var viewState = useViewState();
     var map = useMap().current;
-    return (React.createElement(MapButton, __assign({ onClick: function () { map.rotateTo(0); map.resetNorthPitch(); } }, p),
+    return (React.createElement(MapButton, __assign({ "data-testid": "CompassButton", onClick: function () { map.rotateTo(0); map.resetNorthPitch(); } }, p),
         React.createElement("div", { style: { transform: "rotateX(".concat(p.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" },
                 React.createElement("polygon", { className: "tip", points: "100,1000 500,0 900,1000 500,700 " }),

package/map/controls/FullscreenButton/FullscreenButton.js

@@ -59,7 +59,7 @@ var FullscreenButton = function (_a) {
             window.document.exitFullscreen();
         }
     };
-    return (React.createElement(MapButton, __assign({ disabled: !checkFullscreenSupport(), onClick: toggle, hint: hint }, props),
+    return (React.createElement(MapButton, __assign({ "data-testid": "FullscreenButton", disabled: !checkFullscreenSupport(), onClick: toggle, hint: hint }, props),
         React.createElement("svg", { width: "100", height: "100", viewBox: "0 0 448 512", xmlns: "http://www.w3.org/2000/svg" },
             React.createElement("path", { d: "M32 32C14.3 32 0 46.3 0 64v96c0 17.7 14.3 32 32 32s32-14.3 32-32V96h64c17.7 0 32-14.3 32-32s-14.3-32-32-32H32zM64 352c0-17.7-14.3-32-32-32s-32 14.3-32 32v96c0 17.7 14.3 32 32 32h96c17.7 0 32-14.3 32-32s-14.3-32-32-32H64V352zM320 32c-17.7 0-32 14.3-32 32s14.3 32 32 32h64v64c0 17.7 14.3 32 32 32s32-14.3 32-32V64c0-17.7-14.3-32-32-32H320zM448 352c0-17.7-14.3-32-32-32s-32 14.3-32 32v64H320c-17.7 0-32 14.3-32 32s14.3 32 32 32h96c17.7 0 32-14.3 32-32V352z" }))));
 };

package/map/controls/Geocoder/Geocoder.js

@@ -129,7 +129,7 @@ var GeocoderBase = function (props) {
                 break;
         }
     };
-    return (React.createElement(MapControl, { x: props.x, y: props.y },
+    return (React.createElement(MapControl, { "data-testid": "Geocoder", x: props.x, y: props.y },
         React.createElement("div", { className: props.className, onKeyDown: function (e) { return handleKeyDown(e); }, ref: wrapperRef },
             React.createElement(GeocoderSelector, { placeholder: props.placeholder, searchIcon: props.searchIcon, value: q, onChange: handleChange }),
             features.length > 0 && React.createElement(GeocoderList, { upwards: props.upwards }, features.map(function (f, idx) {

package/map/controls/MapLoader/MapLoader.js

@@ -30,7 +30,7 @@ import { MapControl } from '../base/MapControl';
 var DEFAULT_SIZE = 40; // Default control size (px)
 var DEFAULT_COLOR = "white"; // Default control color
 var MapLoaderBase = function (props) {
-    return (React.createElement(MapControl, { x: props.x, y: props.y },
+    return (React.createElement(MapControl, { "data-testid": "MapLoader", x: props.x, y: props.y },
         React.createElement("div", { className: props.className },
             React.createElement(Svg, { width: "1792", height: "1792", viewBox: "0 0 1792 1792", xmlns: "http://www.w3.org/2000/svg" },
                 React.createElement("path", { d: "M1760 896q0 176-68.5 336t-184 275.5-275.5 184-336 68.5-336-68.5-275.5-184-184-275.5-68.5-336q0-213 97-398.5t265-305.5 374-151v228q-221 45-366.5 221t-145.5 406q0 130 51 248.5t136.5 204 204 136.5 248.5 51 248.5-51 204-136.5 136.5-204 51-248.5q0-230-145.5-406t-366.5-221v-228q206 31 374 151t265 305.5 97 398.5z" })))));

package/map/controls/ScaleControl/ScaleControl.js

@@ -72,7 +72,7 @@ var ScaleControlBase = function (props) {
     var meters = width * meterspx;
     var dist = getRoundedMeters(meters);
     width = width * dist / meters;
-    return (React.createElement(MapControl, { x: props.x, y: props.y },
+    return (React.createElement(MapControl, { "data-testid": "ScaleControl", x: props.x, y: props.y },
         React.createElement("div", { className: props.className, style: { width: "".concat(width, "px") } }, getHumanText(dist))));
 };
 var ScaleControlStyled = styled(ScaleControlBase)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  // Size:\n  box-sizing: border-box;\n  height: 20px;\n  padding-left: 5px;\n\n  // Appearance:\n  border: solid 2px #333333;\n  border-top: none;\n  user-select: none;\n  pointer-events: none;\n  background-color: #C7C7C7;\n  font-size: 10px; /* TODO: Not a theme font size. */\n  color: #333;\n  white-space: nowrap;\n  opacity: 0.8;\n  transition: width ease-in-out 100ms;\n"], ["\n  // Size:\n  box-sizing: border-box;\n  height: 20px;\n  padding-left: 5px;\n\n  // Appearance:\n  border: solid 2px #333333;\n  border-top: none;\n  user-select: none;\n  pointer-events: none;\n  background-color: #C7C7C7;\n  font-size: 10px; /* TODO: Not a theme font size. */\n  color: #333;\n  white-space: nowrap;\n  opacity: 0.8;\n  transition: width ease-in-out 100ms;\n"

package/map/controls/ZoomInButton/ZoomInButton.js

@@ -49,7 +49,7 @@ var ZoomInButton = function (_a) {
         " Zoom in") : _b, props = __rest(_a, ["hint"]);
     var viewState = useViewState();
     var map = useMap().current;
-    return (React.createElement(MapButton, __assign({ disabled: viewState.zoom >= map.getMaxZoom(), onClick: function () { return map.zoomIn(); }, hint: hint }, props),
+    return (React.createElement(MapButton, __assign({ "data-testid": "ZoomInButton", 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

@@ -49,7 +49,7 @@ var ZoomOutButton = function (_a) {
         " Zoom out") : _b, props = __rest(_a, ["hint"]);
     var viewState = useViewState();
     var map = useMap().current;
-    return (React.createElement(MapButton, __assign({ disabled: viewState.zoom <= map.getMinZoom(), onClick: function () { return map.zoomOut(); }, hint: hint }, props),
+    return (React.createElement(MapButton, __assign({ "data-testid": "ZoomOutButton", 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/MapButton/Hint.js

@@ -17,7 +17,7 @@ import * as React from 'react';
 import styled from 'styled-components';
 var HEIGHT = 24; // Hint height (px)
 var HintBase = React.forwardRef(function (props, ref) {
-    return React.createElement("div", __assign({ ref: ref, style: props.styles }, props.attributes, { className: props.className }), props.children);
+    return React.createElement("div", __assign({ "data-testid": "MapButton.Hint", ref: ref, style: props.styles }, props.attributes, { className: props.className }), props.children);
 });
 var HintStyled = styled(HintBase)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: absolute;\n  height: ", "px;\n  padding: 0 12px 0 12px;\n  margin: 0 12px 0 12px;\n  font: ", ";\n  z-index: 1000;\n\n  // Border:\n  border-radius: ", "px;\n\n  // Color:\n  background-color: ", ";\n  color: ", ";\n  white-space: nowrap;\n  pointer-events: none;\n  user-select: none;\n  transition: opacity ease-in-out ", "ms;\n  opacity: 0;\n\n  // Content:\n  display: flex;\n  align-items: center;\n  gap: 4px;\n"], ["\n  position: absolute;\n  height: ", "px;\n  padding: 0 12px 0 12px;\n  margin: 0 12px 0 12px;\n  font: ", ";\n  z-index: 1000;\n\n  // Border:\n  border-radius: ", "px;\n\n  // Color:\n  background-color: ", ";\n  color: ", ";\n  white-space: nowrap;\n  pointer-events: none;\n  user-select: none;\n  transition: opacity ease-in-out ", "ms;\n  opacity: 0;\n\n  // Content:\n  display: flex;\n  align-items: center;\n  gap: 4px;\n"
     /**

package/map/controls/base/MapButton/MapButton.d.ts

@@ -34,6 +34,10 @@ interface IProps {
      * Fired when the map button is clicked.
      */
     onClick: (e?: React.MouseEvent) => void;
+    /**
+     * Test ID for Playwright/testing. Forwarded to the root DOM element.
+     */
+    'data-testid'?: string;
 }
 /**
  * A `MapButton` is a square button to be used on a Mapbox map. It must

package/map/controls/base/MapButton/MapButton.js

@@ -60,7 +60,7 @@ var MapButtonBase = function (props) {
         ]
     }), styles = _c.styles, attributes = _c.attributes, update = _c.update;
     var renderButton = function () {
-        return React.createElement("div", { ref: setWrapperRef, className: props.className, tabIndex: props.disabled ? -1 : 0, onClick: handleClick, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave },
+        return React.createElement("div", { ref: setWrapperRef, className: props.className, "data-testid": props['data-testid'], tabIndex: props.disabled ? -1 : 0, onClick: handleClick, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave },
             React.createElement(Button, { "$grouped": props.grouped, "$size": props.size, "$disabled": props.disabled, "$active": props.active }, props.children),
             props.hint &&
                 createPortal(React.createElement(Hint, { ref: setHintRef, styles: styles.popper, attributes: __assign({}, attributes.popper) }, props.hint), document.body));

package/package.json

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