@longline/aqua-ui 1.0.330 → 1.0.334

package/inputs/Editor/Editor.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
-interface IEditorProps {
+import { ITestable } from '../../Types';
+interface IEditorProps extends ITestable {
     /** @ignore */
     className?: string;
     /**
@@ -49,15 +50,16 @@ interface IEditorProps {
      */
     codeButtons?: boolean;
     /**
-     * URL for OpenAI requests.
-     * If not present, no OpenAI controls will be available.
+     * URL for the back-end Text AI endpoint (streamed text generation).
+     * If not present, no Text AI controls will be available.
      */
-    openAIurl?: string;
+    textAIurl?: string;
     /**
-     * URL for AssemblyAI temporary token requests.
-     * If not present, no AssemblyAI controls will be available.
+     * URL for the back-end Speech AI endpoint (issues a temporary streaming
+     * token for the speech-to-text provider).
+     * If not present, no Speech AI controls will be available.
      */
-    assemblyAIurl?: string;
+    speechAIurl?: string;
     /**
      * Optional Bearer token for authenticated AI requests.
      */
@@ -65,10 +67,7 @@ interface IEditorProps {
     /**
      * Listeners are notified whenever the user interacts with the Editor.
      */
-    onChange?: (value: any) => void; /**
-     * Test ID for Playwright/testing. Forwarded to the root DOM element.
-     */
-    'data-testid'?: string;
+    onChange?: (value: any) => void;
 }
 declare const Editor: {
     ({ fluid, error, disabled, transparent, ghost, allowFullscreen, codeButtons, ...props }: IEditorProps): React.JSX.Element;

package/inputs/Editor/Editor.js

@@ -91,7 +91,7 @@ var EditorBase = function (props) {
         React.createElement("div", { "data-testid": props['data-testid'] || "Editor", className: props.className, ref: wrapperRef },
             React.createElement(OverlayScrollbarsComponent, { className: "scroller ".concat(fullscreen ? 'fullscreen' : ''), defer: true, options: { scrollbars: { theme: 'os-theme-dark', autoHide: 'leave' } } },
                 !props.disabled && !props.ghost &&
-                    React.createElement(MenuBar, { allowFullscreen: props.allowFullscreen, codeButtons: props.codeButtons, fullscreen: fullscreen, editor: editor, onToggleFullscreen: handleToggleFullscreen, openAIurl: props.openAIurl, assemblyAIurl: props.assemblyAIurl, authToken: props.authToken }),
+                    React.createElement(MenuBar, { allowFullscreen: props.allowFullscreen, codeButtons: props.codeButtons, fullscreen: fullscreen, editor: editor, onToggleFullscreen: handleToggleFullscreen, textAIurl: props.textAIurl, speechAIurl: props.speechAIurl, authToken: props.authToken }),
                 React.createElement(EditorContent, { editor: editor, ref: setRef })))));
 };
 var pulse = keyframes(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  from {\n    opacity: .15;\n  }\n  to {\n    opacity: 1;\n  }\n"], ["\n  from {\n    opacity: .15;\n  }\n  to {\n    opacity: 1;\n  }\n"])));

package/inputs/Editor/buttons/{SpeechButton.d.ts → SpeechAIButton.d.ts}

@@ -8,5 +8,5 @@ interface IProps {
      */
     authToken?: string;
 }
-declare const SpeechButton: (props: IProps) => React.JSX.Element;
-export { SpeechButton };
+declare const SpeechAIButton: (props: IProps) => React.JSX.Element;
+export { SpeechAIButton };

package/inputs/Editor/buttons/{SpeechButton.js → SpeechAIButton.js}

@@ -1,8 +1,8 @@
 import React, { useEffect, useRef } from 'react';
 import { MenuButton } from '../menu/MenuButton';
 import { SVG } from '../../../svg';
-import { useAssemblyAIRecorder } from '../../../hooks/useAssemblyAIRecorder';
-var SpeechButton = function (props) {
+import { useSpeechAIRecorder } from '../../../hooks/useSpeechAIRecorder';
+var SpeechAIButton = function (props) {
     var fromRef = useRef(null);
     var transcriptRef = useRef("");
     var onTranscript = function (text) {
@@ -12,7 +12,7 @@ var SpeechButton = function (props) {
         view.dispatch(transaction);
         transcriptRef.current = text;
     };
-    var _a = useAssemblyAIRecorder(props.url, onTranscript, props.authToken), recordingStatus = _a.recordingStatus, toggleRecording = _a.toggleRecording;
+    var _a = useSpeechAIRecorder(props.url, onTranscript, props.authToken), recordingStatus = _a.recordingStatus, toggleRecording = _a.toggleRecording;
     useEffect(function () {
         if (recordingStatus == 'recording') {
             props.editor.setOptions({ editable: false });
@@ -26,6 +26,6 @@ var SpeechButton = function (props) {
     var handleClick = function () {
         toggleRecording();
     };
-    return (React.createElement(MenuButton, { editor: props.editor, hint: React.createElement("span", { style: { whiteSpace: "nowrap" } }, "AssemblyAI speech-to-text"), onClick: handleClick, disabled: false, active: recordingStatus == 'connecting', highlighted: recordingStatus == 'recording', icon: { url: SVG.Icons.Microphone } }));
+    return (React.createElement(MenuButton, { editor: props.editor, hint: React.createElement("span", { style: { whiteSpace: "nowrap" } }, "Speech-to-text"), onClick: handleClick, disabled: false, active: recordingStatus == 'connecting', highlighted: recordingStatus == 'recording', icon: { url: SVG.Icons.Microphone } }));
 };
-export { SpeechButton };
+export { SpeechAIButton };

package/inputs/Editor/buttons/TextAIButton.d.ts

@@ -0,0 +1,28 @@
+import React from 'react';
+import { Editor } from '@tiptap/react';
+interface IProps {
+    editor: Editor;
+    /**
+     * URL for AI requests.
+     */
+    url: string;
+    /**
+     * Optional Bearer token for authenticated requests.
+     */
+    authToken?: string;
+}
+/**
+ * `TextAIButton` provides a menu button that allows the user to run various
+ * AI-powered text transformations on selected editor content.
+ *
+ * Available transformations include:
+ * - Summarizing selected content
+ * - Extracting key points
+ * - Translating
+ *
+ * When triggered, the selected content is cut, sent to the configured Text AI
+ * back-end, and replaced with the transformed version. Streaming support
+ * allows real-time insertion with animated progress.
+ */
+declare const TextAIButton: (props: IProps) => React.JSX.Element;
+export { TextAIButton };

package/inputs/Editor/buttons/{OpenAIButton.js → TextAIButton.js}

@@ -37,24 +37,23 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
 import React, { useState } from 'react';
 import { marked } from 'marked';
 import { DOMParser as ProseMirrorDOMParser } from 'prosemirror-model';
-import { useOpenAIStream } from '../../../hooks/useOpenAIStream';
-import { OpenAIMenu } from './OpenAIMenu';
+import { useTextAIStream } from '../../../hooks/useTextAIStream';
+import { TextAIMenu } from './TextAIMenu';
 /**
- * `AIButton` provides a menu button that allows the user to run various
- * AI-powered transformations on selected editor content.
+ * `TextAIButton` provides a menu button that allows the user to run various
+ * AI-powered text transformations on selected editor content.
  *
  * Available transformations include:
- * - Telling a joke
  * - Summarizing selected content
  * - Extracting key points
- * - Translating to Portuguese
+ * - Translating
  *
- * When triggered, the selected content is cut, sent to OpenAI, and replaced
- * with the transformed version. Streaming support allows real-time insertion
- * with animated progress.
+ * When triggered, the selected content is cut, sent to the configured Text AI
+ * back-end, and replaced with the transformed version. Streaming support
+ * allows real-time insertion with animated progress.
  */
-var OpenAIButton = function (props) {
-    var streamOpenAI = useOpenAIStream(props.url, props.authToken).stream;
+var TextAIButton = function (props) {
+    var streamTextAI = useTextAIStream(props.url, props.authToken).stream;
     var _a = useState(false), streaming = _a[0], setStreaming = _a[1];
     // The DOM parser is only created once, then used many times as content
     // is streamed in.
@@ -154,7 +153,7 @@ var OpenAIButton = function (props) {
                     // Create initial node.
                     _a.sent();
                     text = "";
-                    return [4 /*yield*/, streamOpenAI(prompt, function (chunk) { return __awaiter(void 0, void 0, void 0, function () {
+                    return [4 /*yield*/, streamTextAI(prompt, function (chunk) { return __awaiter(void 0, void 0, void 0, function () {
                             return __generator(this, function (_a) {
                                 switch (_a.label) {
                                     case 0:
@@ -203,6 +202,6 @@ var OpenAIButton = function (props) {
             props.editor.setOptions({ editable: true });
         });
     };
-    return (React.createElement(OpenAIMenu, { editor: props.editor, onClick: function (p) { return transformStream(p); }, animated: streaming }));
+    return (React.createElement(TextAIMenu, { editor: props.editor, onClick: function (p) { return transformStream(p); }, animated: streaming }));
 };
-export { OpenAIButton };
+export { TextAIButton };

package/inputs/Editor/buttons/{OpenAIMenu.d.ts → TextAIMenu.d.ts}

@@ -5,5 +5,5 @@ interface IProps {
     onClick: (prompt: (text: string) => string) => void;
     animated: boolean;
 }
-declare const OpenAIMenu: (props: IProps) => React.JSX.Element;
-export { OpenAIMenu };
+declare const TextAIMenu: (props: IProps) => React.JSX.Element;
+export { TextAIMenu };

package/inputs/Editor/buttons/{OpenAIMenu.js → TextAIMenu.js}

@@ -4,7 +4,7 @@ import { MenuButton } from '../menu/MenuButton';
 import { List, ListRow } from '../../../containers/List';
 import { SVG } from '../../../svg';
 import { Icon } from '../../../controls/Icon';
-var OpenAIMenu = function (props) {
+var TextAIMenu = function (props) {
     var _a = React.useState(false), open = _a[0], setOpen = _a[1];
     var _b = React.useState(false), langOpen = _b[0], setLangOpen = _b[1];
     // With an empty selection, some AI commands cannot work, because they
@@ -19,7 +19,7 @@ var OpenAIMenu = function (props) {
             setLangOpen(false);
     }, [open]);
     var languages = ["US English", "UK English", "Portuguese", "Spanish", "French", "German", "Dutch", "Simplified Chinese"];
-    return (React.createElement(Openable, { width: 300, toggle: React.createElement(MenuButton, { editor: props.editor, onClick: function () { return setOpen(!open); }, hint: React.createElement("span", { style: { whiteSpace: "nowrap" } }, "OpenAI functions"), icon: { url: SVG.Editor.AI, animated: props.animated } }), content: React.createElement("div", { style: { display: 'flex', gap: '8px' } },
+    return (React.createElement(Openable, { width: 300, toggle: React.createElement(MenuButton, { editor: props.editor, onClick: function () { return setOpen(!open); }, hint: React.createElement("span", { style: { whiteSpace: "nowrap" } }, "Text AI"), icon: { url: SVG.Editor.AI, animated: props.animated } }), content: React.createElement("div", { style: { display: 'flex', gap: '8px' } },
             React.createElement("div", { style: { minWidth: '150px' } },
                 React.createElement(List, { maxItems: 4, contract: true },
                     React.createElement(ListRow, { disabled: selectionIsEmpty, onClick: function () { return handleClick(function (text) {
@@ -39,4 +39,4 @@ var OpenAIMenu = function (props) {
                             }); } }, lang);
                     })))), open: open, onClose: function () { return setOpen(false); } }));
 };
-export { OpenAIMenu };
+export { TextAIMenu };

package/inputs/Editor/menu/MenuBar.d.ts

@@ -16,15 +16,15 @@ interface IProps {
      */
     codeButtons?: boolean;
     /**
-     * URL for OpenAI requests.
-     * If not present, no AI controls will be available.
+     * URL for the back-end Text AI endpoint.
+     * If not present, no Text AI controls will be available.
      */
-    openAIurl?: string;
+    textAIurl?: string;
     /**
-     * URL for AssemblyAI requests.
-     * If not present, no AI controls will be available.
+     * URL for the back-end Speech AI endpoint.
+     * If not present, no Speech AI controls will be available.
      */
-    assemblyAIurl?: string;
+    speechAIurl?: string;
     /**
      * Optional Bearer token for authenticated AI requests.
      */

package/inputs/Editor/menu/MenuBar.js

@@ -13,8 +13,8 @@ import { OrderedListButton } from '../buttons/OrderedListButton';
 import { BulletListButton } from '../buttons/BulletListButton';
 import { CodeBlockButton } from '../buttons/CodeBlockButton';
 import { FullscreenButton } from '../buttons/FullscreenButton';
-import { OpenAIButton } from '../buttons/OpenAIButton';
-import { SpeechButton } from '../buttons/SpeechButton';
+import { TextAIButton } from '../buttons/TextAIButton';
+import { SpeechAIButton } from '../buttons/SpeechAIButton';
 var MenuBarBase = function (props) {
     if (!props.editor) {
         return null;
@@ -31,11 +31,11 @@ var MenuBarBase = function (props) {
                 React.createElement(MenuSeparator, null),
                 React.createElement(CodeButton, { editor: props.editor }),
                 React.createElement(CodeBlockButton, { editor: props.editor })),
-            (props.openAIurl || props.allowFullscreen) && React.createElement(MenuSeparator, null),
-            props.openAIurl &&
-                React.createElement(OpenAIButton, { url: props.openAIurl, editor: props.editor, authToken: props.authToken }),
-            props.assemblyAIurl &&
-                React.createElement(SpeechButton, { url: props.assemblyAIurl, editor: props.editor, authToken: props.authToken }),
+            (props.textAIurl || props.allowFullscreen) && React.createElement(MenuSeparator, null),
+            props.textAIurl &&
+                React.createElement(TextAIButton, { url: props.textAIurl, editor: props.editor, authToken: props.authToken }),
+            props.speechAIurl &&
+                React.createElement(SpeechAIButton, { url: props.speechAIurl, editor: props.editor, authToken: props.authToken }),
             props.allowFullscreen &&
                 React.createElement(FullscreenButton, { fullscreen: props.fullscreen, editor: props.editor, onClick: props.onToggleFullscreen }))));
 };

package/inputs/Input/Input.d.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { IIconProps } from '../../controls/Icon';
-interface IInputProps {
+import { ITestable } from '../../Types';
+interface IInputProps extends ITestable {
     /** @ignore */
     className?: string;
     /** @ignore */
@@ -128,10 +129,6 @@ interface IInputProps {
      * Listeners are notified when the Input receives focus.
      */
     onFocus?: () => void;
-    /**
-     * Test ID for Playwright/testing. Forwarded to the root DOM element.
-     */
-    'data-testid'?: string;
 }
 declare const Input: {
     (props: IInputProps): React.JSX.Element;

package/inputs/Input/InputWrapper.d.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { IIconProps } from '../../controls/Icon';
-interface IProps {
+import { ITestable } from '../../Types';
+interface IProps extends ITestable {
     className?: string;
     children?: React.ReactNode;
     fluid?: boolean;

package/inputs/Input/InputWrapper.js

@@ -42,7 +42,7 @@ var InputWrapperBase = function (props) {
     else if (props.icon != null) {
         icon = (React.createElement(Icon, __assign({ size: 17, color: (_a = props.icon.color) !== null && _a !== void 0 ? _a : theme.colors.primary[3] }, props.icon)));
     }
-    return (React.createElement("div", { "data-testid": "InputWrapper", className: props.className, onClick: props.onClick },
+    return (React.createElement("div", { "data-testid": props['data-testid'] || "InputWrapper", className: props.className, onClick: props.onClick },
         props.ghost && React.createElement(Ghost, { style: { position: 'absolute', left: 0, top: 0, right: 0, bottom: 0, zIndex: 100 } }),
         icon && !props.ghost && props.iconPosition == 'left' && icon,
         React.createElement(Content, null, props.children),

package/inputs/MonthRange/MonthRange.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
-interface IMonthRangeProps {
+import { ITestable } from '../../Types';
+interface IMonthRangeProps extends ITestable {
     /** @ignore */
     className?: string;
     /**
@@ -63,10 +64,6 @@ interface IMonthRangeProps {
      * Listeners are notified when the `MonthRange` receives focus.
      */
     onFocus?: () => void;
-    /**
-     * Test ID for Playwright/testing. Forwarded to the root DOM element.
-     */
-    'data-testid'?: string;
 }
 /**
  * A `MonthRange` allows a selection of a time period, measured in months.

package/inputs/Selector/Selector.d.ts

@@ -1,7 +1,8 @@
 import * as React from 'react';
 import { ISelectorProps } from './ISelectorProps';
+import { ITestable } from '../../Types';
 type TCheckboxType = 'check' | 'toggle' | 'slider' | 'circle';
-interface IProps extends ISelectorProps {
+interface IProps extends ISelectorProps, ITestable {
     /** @ignore */
     className?: string;
     /**
@@ -25,10 +26,6 @@ interface IProps extends ISelectorProps {
      * If set, checkbox has a dark label.
      */
     dark?: boolean;
-    /**
-     * Test ID for Playwright/testing. Forwarded to the root DOM element.
-     */
-    'data-testid'?: string;
 }
 /**
  * A Selector can be used to create either a HTML checkbox or a HTML radio button.

package/inputs/Slider/Slider.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
-interface ISliderProps {
+import { ITestable } from '../../Types';
+interface ISliderProps extends ITestable {
     /** @ignore */
     className?: string;
     /**
@@ -72,10 +73,6 @@ interface ISliderProps {
      * Event is triggered when slider's value changes.
      */
     onChange?: (value: number) => void;
-    /**
-     * Test ID for Playwright/testing. Forwarded to the root DOM element.
-     */
-    'data-testid'?: string;
 }
 /**
  * Sliders allow users to view and select a value (or range) along a track.

package/inputs/Textarea/Textarea.d.ts

@@ -1,10 +1,11 @@
 import * as React from 'react';
+import { ITestable } from '../../Types';
 /**
  * Textarea validates itself using the HTML validation API whenever its
  * content changes. Listeners can use onValidate to obtain the resulting
  * ValidityState.
  */
-interface ITextareaProps {
+interface ITextareaProps extends ITestable {
     /** @ignore */
     className?: string;
     /**
@@ -69,10 +70,6 @@ interface ITextareaProps {
      * Listeners are notified whenever the user interacts with the Textarea.
      */
     onChange?: (value: any) => void;
-    /**
-     * Test ID for Playwright/testing. Forwarded to the root DOM element.
-     */
-    'data-testid'?: string;
 }
 /**
  * `Textarea` encapsulated and styles the `<textarea>` element. Like `Input`,

package/map/Map/Map.d.ts

@@ -1,7 +1,8 @@
 import * as React from 'react';
 import { MapMouseEvent, Map as OriginalMap } from 'mapbox-gl';
 import { ViewState, ViewStateChangeEvent } from 'react-map-gl/mapbox';
-interface IMapProps {
+import { ITestable } from '../../Types';
+interface IMapProps extends ITestable {
     /** @ignore */
     children?: React.ReactNode;
     /**

package/map/Map/Map.js

@@ -218,7 +218,7 @@ var MapBase = function (props) {
         if (props.onMove)
             props.onMove(e);
     };
-    return (React.createElement(GLMap, __assign({ "data-testid": "Map" }, viewState, { mapboxAccessToken: props.token, style: { width: '100%', height: '100%', minHeight: '300px', font: theme.font.bodyMedium }, logoPosition: props.logoPosition, mapStyle: props.style, minZoom: props.minZoom, maxZoom: props.maxZoom, interactiveLayerIds: props.interactiveLayerIds, doubleClickZoom: props.doubleClickZoom, cursor: props.cursor, preserveDrawingBuffer: props.preserveDrawingBuffer, fadeDuration: props.fadeDuration, onMove: handleMove, onMoveEnd: props.onMoveEnd, onMouseMove: props.onMouseMove, onMouseLeave: props.onMouseLeave, onLoad: handleLoad, onClick: props.onClick, onDblClick: props.onDblClick }),
+    return (React.createElement(GLMap, __assign({ "data-testid": props['data-testid'] || "Map" }, viewState, { mapboxAccessToken: props.token, style: { width: '100%', height: '100%', minHeight: '300px', font: theme.font.bodyMedium }, logoPosition: props.logoPosition, mapStyle: props.style, minZoom: props.minZoom, maxZoom: props.maxZoom, interactiveLayerIds: props.interactiveLayerIds, doubleClickZoom: props.doubleClickZoom, cursor: props.cursor, preserveDrawingBuffer: props.preserveDrawingBuffer, fadeDuration: props.fadeDuration, onMove: handleMove, onMoveEnd: props.onMoveEnd, onMouseMove: props.onMouseMove, onMouseLeave: props.onMouseLeave, onLoad: handleLoad, onClick: props.onClick, onDblClick: props.onDblClick }),
         props.clipped && React.createElement(React.Fragment, null,
             React.createElement(Source, { type: "raster", tiles: ["https://api.mapbox.com/raster/v1/mapbox.mapbox-terrain-dem-v1/{z}/{x}/{y}.webp?access_token=".concat(props.token)] },
                 React.createElement(Layer, { id: "overlay", type: "raster" })),

package/map/PositionsManager/PositionBox.d.ts

@@ -1,10 +1,11 @@
 import * as React from 'react';
+import { ITestable } from '../../Types';
 interface IPosition {
     lng: number;
     lat: number;
     zoom: number;
 }
-interface IPositionBoxProps {
+interface IPositionBoxProps extends ITestable {
     coord: IPosition;
     onMove: (x: number, y: number) => void;
     onDelete: () => void;

package/map/PositionsManager/PositionBox.js

@@ -52,7 +52,7 @@ var PositionBox = function (props) {
             console.error("Could not write to clipboard: context not secure.");
         }
     };
-    return (React.createElement(Dockable, { latitude: props.coord.lat, longitude: props.coord.lng, offsetX: -9, offsetY: -38 },
+    return (React.createElement(Dockable, { "data-testid": props['data-testid'] || 'PositionBox', latitude: props.coord.lat, longitude: props.coord.lng, offsetX: -9, offsetY: -38 },
         React.createElement(Wrapper, { ref: wrapperRef },
             React.createElement(Icon, { onClick: props.onDelete },
                 React.createElement(Target, null,

package/map/controls/CompassButton/CompassButton.js

@@ -31,11 +31,11 @@ import { MapButton } from '../base/MapButton';
 import { useViewState } from '../../Map';
 import { Mouse } from '../../../controls/Mouse';
 import { Key } from '../../../controls/Key';
-var CompassButtonBase = function (p) {
+var CompassButtonBase = function (props) {
     var viewState = useViewState();
     var map = useMap().current;
-    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)") } },
+    return (React.createElement(MapButton, __assign({ "data-testid": props['data-testid'] || "CompassButton", 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" },
                 React.createElement("polygon", { className: "tip", points: "100,1000 500,0 900,1000 500,700 " }),
                 React.createElement("polygon", { className: "arrow", points: "500,0 423,192.6 500,351.6 577,192.6 " })))));

package/map/controls/FullscreenButton/FullscreenButton.js

@@ -59,7 +59,7 @@ var FullscreenButton = function (_a) {
             window.document.exitFullscreen();
         }
     };
-    return (React.createElement(MapButton, __assign({ "data-testid": "FullscreenButton", disabled: !checkFullscreenSupport(), onClick: toggle, hint: hint }, props),
+    return (React.createElement(MapButton, __assign({ "data-testid": props['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, { "data-testid": "Geocoder", x: props.x, y: props.y },
+    return (React.createElement(MapControl, { "data-testid": props['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, { "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 */