@longline/aqua-ui 1.0.330 → 1.0.331

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, { "data-testid": "MapLoader", x: props.x, y: props.y },
+    return (React.createElement(MapControl, { "data-testid": props['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, { "data-testid": "ScaleControl", x: props.x, y: props.y },
+    return (React.createElement(MapControl, { "data-testid": props['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({ "data-testid": "ZoomInButton", disabled: viewState.zoom >= map.getMaxZoom(), onClick: function () { return map.zoomIn(); }, hint: hint }, props),
+    return (React.createElement(MapButton, __assign({ "data-testid": props['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({ "data-testid": "ZoomOutButton", disabled: viewState.zoom <= map.getMinZoom(), onClick: function () { return map.zoomOut(); }, hint: hint }, props),
+    return (React.createElement(MapButton, __assign({ "data-testid": props['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/MapButton.d.ts

@@ -34,10 +34,6 @@ 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,10 +60,10 @@ 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, "data-testid": props['data-testid'], 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'] || "MapButton", tabIndex: props.disabled ? -1 : 0, onClick: handleClick, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave },
             React.createElement(Button, { "data-testid": "MapButton.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));
+                createPortal(React.createElement(Hint, { "data-testid": "MapButton.Hint", ref: setHintRef, styles: styles.popper, attributes: __assign({}, attributes.popper) }, props.hint), document.body));
     };
     if (props.grouped)
         return renderButton();

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

@@ -1,5 +1,6 @@
 import * as React from 'react';
-interface IMapControlProps {
+import { ITestable } from '../../../../Types';
+interface IMapControlProps extends ITestable {
     /** @ignore */
     className?: string;
     /**

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

@@ -25,11 +25,11 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import * as React from 'react';
-import { useViewState } from '../../../Map';
 import styled from 'styled-components';
+import { useViewState } from '../../../Map';
 var MapControlBase = function (props) {
     var viewState = useViewState();
-    return (React.createElement("div", { "data-testid": "MapControl", className: props.className, style: {
+    return (React.createElement("div", { "data-testid": props['data-testid'] || "MapControl", className: props.className, style: {
             // Must calculate this style dynamically, because it needs local state.
             left: props.x >= 0 ? "".concat(props.x + (props.respectPadding ? viewState.padding.left : 0), "px") : 'auto',
             right: props.x < 0 ? "".concat((props.respectPadding ? viewState.padding.right : 0) - props.x, "px") : 'auto',

package/modules/Filter/Filter.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
-interface IFilterProps {
+import { ITestable } from '../../Types';
+interface IFilterProps extends ITestable {
     /** @ignore */
     className?: string;
     /** @ignore */

package/modules/Filter/Filter.js

@@ -60,7 +60,7 @@ var FilterBase = function (props) {
         if (update)
             update();
     };
-    return (React.createElement("div", { "data-test-id": "Filter", className: props.className },
+    return (React.createElement("div", { "data-testid": props['data-testid'] || "Filter", className: props.className },
         React.createElement(ToggleButton, { url: SVG.Icons.Filter, ref: buttonRef, active: props.active, open: open, onClick: toggleOpen }),
         createPortal(React.createElement(Pane, __assign({ "data-test-id": "Filter.Pane", "$open": open, "$width": props.width, style: styles.popper }, attributes.popper, { ref: paneRef }), open && React.createElement(GlassPane, { padded: true, bordered: true }, props.children)), document.body)));
 };

package/modules/MainMenu/Item.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
-interface IProps {
+import { ITestable } from '../../Types';
+interface IProps extends ITestable {
     /** @ignore */
     className?: string;
     /**

package/modules/MainMenu/Item.js

@@ -74,7 +74,7 @@ var ItemBase = function (props) {
             }
         });
     };
-    return (React.createElement("div", { tabIndex: -1, className: props.className, onMouseEnter: !props.noExpand ? handleMouseEnter : null, onMouseLeave: !props.noExpand ? handleMouseLeave : null, onClick: (_a = props.onClick) !== null && _a !== void 0 ? _a : null },
+    return (React.createElement("div", { "data-testid": props['data-testid'] || "MainMenu.Item", tabIndex: -1, className: props.className, onMouseEnter: !props.noExpand ? handleMouseEnter : null, onMouseLeave: !props.noExpand ? handleMouseLeave : null, onClick: (_a = props.onClick) !== null && _a !== void 0 ? _a : null },
         React.createElement(Animatable, { style: __assign({}, springs) },
             React.createElement(Content, { ref: content },
                 React.createElement(Svg, null,

package/modules/MainMenu/MainMenu.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
-interface IMainMenuProps {
+import { ITestable } from '../../Types';
+interface IMainMenuProps extends ITestable {
     /** @ignore */
     className?: string;
     /** @ignore */

package/modules/MainMenu/MainMenu.js

@@ -48,7 +48,7 @@ var MainMenuBase = function (props) {
             primaryItems.push(child);
         }
     });
-    return (React.createElement("div", { "data-testid": "MainMenu", className: props.className },
+    return (React.createElement("div", { "data-testid": props['data-testid'] || "MainMenu", className: props.className },
         React.createElement(Top, { "data-testid": "MainMenu.Top" }, primaryItems),
         React.createElement(Bottom, { "data-testid": "MainMenu.Bottom" }, secondaryItems)));
 };

package/modules/Root/Sidebar.js

@@ -16,7 +16,7 @@ var __assign = (this && this.__assign) || function () {
 import * as React from 'react';
 import styled from 'styled-components';
 var SidebarBase = function (props) {
-    return (React.createElement("div", { "data-testid": "Root.Sidebar", className: props.className }, props.children));
+    return React.createElement("div", { "data-testid": "Root.Sidebar", className: props.className }, props.children);
 };
 var SidebarStyled = styled(SidebarBase)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  // Position and size:\n  position: absolute;\n  z-index: 2;\n  left: ", ";\n  top: 0;\n  width: 250px;\n  bottom: 0;\n  transition: left ", "ms ease-in-out;\n  pointer-events: all;\n\n  // Appearance:\n  background: ", ";\n"], ["\n  // Position and size:\n  position: absolute;\n  z-index: 2;\n  left: ", ";\n  top: 0;\n  width: 250px;\n  bottom: 0;\n  transition: left ", "ms ease-in-out;\n  pointer-events: all;\n\n  // Appearance:\n  background: ", ";\n"])), function (p) { return p.open ? 0 : '-350px'; }, function (p) { return p.theme.animation.duration * 2; }, function (p) { return p.theme.colors.primary[3]; });
 var Sidebar = function (props) { return React.createElement(SidebarStyled, __assign({}, props)); };

package/package.json

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

package/services/Dialog/Dialog.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
-interface IDialogProps {
+import { ITestable } from '../../Types';
+interface IDialogProps extends ITestable {
     /**
      * Dialog content, consisting of `Dialog.Header`, `Dialog.Content` and
      * `Dialog.Footer` components.

package/services/Dialog/Dialog.js

@@ -117,8 +117,8 @@ var DialogBase = function (props) {
         toggle(props.open);
     }, [props.open]);
     return (React.createElement(React.Fragment, null, isMounted && React.createElement(React.Fragment, null,
-        createPortal(React.createElement(DialogBackground, { status: status }), document.body),
-        createPortal(React.createElement(DialogWindow, { inverted: props.inverted, width: props.width, ref: windowRef, status: status }, props.children), document.body))));
+        createPortal(React.createElement(DialogBackground, { "data-testid": "Dialog.Background", status: status }), document.body),
+        createPortal(React.createElement(DialogWindow, { "data-testid": props['data-testid'] || "Dialog.Window", inverted: props.inverted, width: props.width, ref: windowRef, status: status }, props.children), document.body))));
 };
 var Dialog = function (_a) {
     var _b = _a.open, open = _b === void 0 ? false : _b, _c = _a.canClose, canClose = _c === void 0 ? true : _c, _d = _a.width, width = _d === void 0 ? 600 : _d, _e = _a.inverted, inverted = _e === void 0 ? false : _e, props = __rest(_a, ["open", "canClose", "width", "inverted"]);

package/services/Dialog/DialogWindow.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
-interface IDialogWindowProps {
+import { ITestable } from '../../Types';
+interface IDialogWindowProps extends ITestable {
     /** @ignore */
     className?: string;
     /** @ignore */

package/services/Dialog/DialogWindow.js

@@ -9,7 +9,7 @@ var DialogWindowBase = React.forwardRef(function (props, ref) {
         // Stop any keyboard interaction propagating to parent components.
         ev.stopPropagation();
     };
-    return (React.createElement("div", { "data-testid": "DialogWindow", className: "".concat(props.className, " ").concat(props.status), ref: ref, onKeyDown: handleKeyDown }, props.children));
+    return (React.createElement("div", { "data-testid": props['data-testid'] || "DialogWindow", className: "".concat(props.className, " ").concat(props.status), ref: ref, onKeyDown: handleKeyDown }, props.children));
 });
 var DialogWindow = styled(DialogWindowBase)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: fixed;\n  z-index: 3000;\n  left: 50%;\n  top: 50%;\n  transform-origin: center center;\n  border-radius: ", "px;\n  background-color: ", ";\n  box-shadow: 0px 0px 10px 1px rgba(0,0,0,0.5);\n\n  ", "\n\n  // Font:\n  font: ", ";\n  color: ", ";  \n\n  /* Dialog window width:\n   * Narrower on small screen. */\n  width: ", ";\n  @media (max-width: ", "px) {\n    width: ", ";\n  }\n\n  /* useTransitionState classes */\n  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(.17,.89,.35,1.67);\n  opacity: 0;\n  &.preEnter, &.exiting {\n    opacity: 0;\n    transform: translateX(-50%) translateY(-50%) scale(0.8);\n  }\n  &.entering {\n    opacity: 1;\n    transform: translateX(-50%) translateY(-50%);\n  }\n  &.entered {\n    opacity: 1;\n    transform: translateX(-50%) translateY(-50%);\n  }\n\n"], ["\n  position: fixed;\n  z-index: 3000;\n  left: 50%;\n  top: 50%;\n  transform-origin: center center;\n  border-radius: ", "px;\n  background-color: ", ";\n  box-shadow: 0px 0px 10px 1px rgba(0,0,0,0.5);\n\n  ", "\n\n  // Font:\n  font: ", ";\n  color: ", ";  \n\n  /* Dialog window width:\n   * Narrower on small screen. */\n  width: ", ";\n  @media (max-width: ", "px) {\n    width: ", ";\n  }\n\n  /* useTransitionState classes */\n  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(.17,.89,.35,1.67);\n  opacity: 0;\n  &.preEnter, &.exiting {\n    opacity: 0;\n    transform: translateX(-50%) translateY(-50%) scale(0.8);\n  }\n  &.entering {\n    opacity: 1;\n    transform: translateX(-50%) translateY(-50%);\n  }\n  &.entered {\n    opacity: 1;\n    transform: translateX(-50%) translateY(-50%);\n  }\n\n"])), function (p) { return p.theme.radius.normal; }, function (p) { return p.inverted ? p.theme.colors.primary[3] : p.theme.colors.neutral[100]; }, function (p) { return p.inverted && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    .footer {\n      background: ", ";\n    }  \n  "], ["\n    .footer {\n      background: ", ";\n    }  \n  "])), function (p) { return p.theme.colors.primary[5]; }); }, function (p) { return p.theme.font.bodyMedium; }, function (p) { return p.inverted ? p.theme.colors.neutral[100] : p.theme.colors.neutral[10]; }, function (p) {
     if (!p.width)