@longline/aqua-ui 1.0.326 → 1.0.328

package/containers/Form/Field.d.ts

@@ -64,6 +64,10 @@ interface IFieldProps {
      * Triggered whenever an _uncontrolled_ Field changes.
      */
     onChange?: (data: any, forceupdate: boolean) => void;
+    /**
+     * Test ID for Playwright/testing. Forwarded to the root DOM element.
+     */
+    'data-testid'?: string;
 }
 /**
  * A `Form.Field` wraps a form control. It serves several purposes.

package/containers/Form/Field.js

@@ -130,6 +130,7 @@ var Field = function (props) {
     var getControl = function (hasError, transparent) {
         return React.cloneElement(props.control, {
             name: props.name,
+            'data-testid': props['data-testid'],
             onChange: handleChange,
             value: props.value, // Changed from just "value", since that breaks TiptapEditor.
             checked: props.value,

package/containers/Form/elements/BoxWrapper.js

@@ -32,8 +32,8 @@ var BoxWrapperBase = function (props) {
     return (React.createElement("div", { "data-testid": "BoxWrapper", className: props.className, onClick: handleClick, ref: wrapper },
         props.ghost && React.createElement(Ghost, { style: { position: 'absolute', left: 0, top: 0, right: 0, bottom: 0, zIndex: 100 } }),
         props.label,
-        React.createElement(Control, null, props.children),
-        React.createElement(HintBackground, null, props.hint)));
+        React.createElement(Control, { "data-testid": "Control" }, props.children),
+        React.createElement(HintBackground, { "data-testid": "HintBackground" }, props.hint)));
 };
 var HintBackground = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: absolute;\n  left: 0;\n  bottom: 0;\n  right: 0;\n  height: 22px;\n  border-bottom-left-radius: ", "px;\n  border-bottom-right-radius: ", "px;\n"], ["\n  position: absolute;\n  left: 0;\n  bottom: 0;\n  right: 0;\n  height: 22px;\n  border-bottom-left-radius: ", "px;\n  border-bottom-right-radius: ", "px;\n"])), function (p) { return p.theme.radius.normal; }, function (p) { return p.theme.radius.normal; });
 var Control = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  padding-top: 23px;\n  padding-bottom: 23px;\n  flex: 1;\n  overflow-x: hidden;\n"], ["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  padding-top: 23px;\n  padding-bottom: 23px;\n  flex: 1;\n  overflow-x: hidden;\n"])));

package/containers/Form/elements/Label.js

@@ -6,7 +6,7 @@ import * as React from 'react';
 import styled from 'styled-components';
 var Required = styled.span(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  /* Required fields put an asterisk on the label. */ \n  color: ", ";\n"], ["\n  /* Required fields put an asterisk on the label. */ \n  color: ", ";\n"])), function (p) { return p.theme.colors.negative; });
 var LabelBase = function (props) {
-    return React.createElement("label", { tabIndex: -1, className: props.className },
+    return React.createElement("label", { "data-testid": "Field.Label", tabIndex: -1, className: props.className },
         props.children,
         props.required && !props.ghost && !props.noAsterisk && !props.disabled && React.createElement(Required, null, "*"));
 };

package/inputs/DateInput/DateInput.d.ts

@@ -64,6 +64,10 @@ interface IDateInputProps {
      * 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 DateInput: {
     ({ direction, noTabIndex, disabled, transparent, fluid, error, clearable, nofuture, ...props }: IDateInputProps): React.JSX.Element;

package/inputs/DateInput/DateInput.js

@@ -102,7 +102,7 @@ var DateInputBase = function (props) {
             }
         ]
     }), styles = _c.styles, attributes = _c.attributes, update = _c.update;
-    return (React.createElement("div", { "data-testid": "DateInput", tabIndex: -1, className: props.className, onKeyDown: handleKeyDown, ref: wrapperRef },
+    return (React.createElement("div", { "data-testid": props['data-testid'] || "DateInput", tabIndex: -1, className: props.className, onKeyDown: handleKeyDown, ref: wrapperRef },
         React.createElement(Selector, { value: value, disabled: props.disabled, ghost: props.ghost, transparent: props.transparent, error: props.error, clearable: props.clearable, noTabIndex: props.noTabIndex, onChange: handleChange, onClear: (!props.disabled && props.clearable && value != null) ? function () { return handleChange(null); } : null, onCalendar: handleToggle }),
         createPortal(React.createElement(Body, { ref: bodyRef, value: value, open: open, transparent: props.transparent, nofuture: props.nofuture, onSelect: handleSelect, styles: styles, attributes: attributes }), document.body)));
 };

package/inputs/Dropdown/Dropdown.d.ts

@@ -112,6 +112,10 @@ interface IDropdownProps {
      * is closed.
      */
     onClose?: () => void;
+    /**
+     * Test ID for Playwright/testing. Forwarded to the root DOM element.
+     */
+    'data-testid'?: string;
 }
 /**
  * A `Dropdown` is a replacement for `<select>` (select). It opens upwards or

package/inputs/Dropdown/Dropdown.js

@@ -419,7 +419,7 @@ var DropdownBase = function (props) {
             sameWidth
         ]
     }), styles = _d.styles, attributes = _d.attributes, update = _d.update;
-    return (React.createElement("div", { "data-testid": "Dropdown", className: props.className, tabIndex: props.disabled ? -1 : 0, ref: wrapperRef, onKeyDown: handleKeyDown, onClick: handleClickDropdown },
+    return (React.createElement("div", { "data-testid": props['data-testid'] || "Dropdown", className: props.className, tabIndex: props.disabled ? -1 : 0, ref: wrapperRef, onKeyDown: handleKeyDown, onClick: handleClickDropdown },
         React.createElement(Selection, { open: open, error: props.error, disabled: props.disabled, transparent: props.transparent, ghost: props.ghost, multiple: props.multiple, onClick: handleSelectorClicked, onClear: (props.clearable && !showPlaceholder) ? handleClear : null, placeholder: showPlaceholder }, label),
         createPortal(React.createElement(Body, { ref: bodyRef, open: open, transparent: props.transparent, maxItems: props.maxItems, onSearch: props.onSearch ? handleSearch : null, search: search, tall: props.tall, minBodyWidth: props.minBodyWidth, styles: styles, attributes: attributes }, getBodyChildren()), document.body)));
 };

package/inputs/Editor/Editor.d.ts

@@ -65,7 +65,10 @@ interface IEditorProps {
     /**
      * Listeners are notified whenever the user interacts with the Editor.
      */
-    onChange?: (value: any) => void;
+    onChange?: (value: any) => void; /**
+     * Test ID for Playwright/testing. Forwarded to the root DOM element.
+     */
+    'data-testid'?: string;
 }
 declare const Editor: {
     ({ fluid, error, disabled, transparent, ghost, allowFullscreen, codeButtons, ...props }: IEditorProps): React.JSX.Element;

package/inputs/Editor/Editor.js

@@ -88,7 +88,7 @@ var EditorBase = function (props) {
         EditorRegistry.removeEditor(contentEditableRef.current);
     }; }, []);
     return (React.createElement(InputWrapper, { fluid: props.fluid, ghost: props.ghost, error: props.error, disabled: props.disabled, transparent: props.transparent, flex: props.flex },
-        React.createElement("div", { "data-testid": "Editor", className: props.className, ref: wrapperRef },
+        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 }),

package/inputs/Input/Input.d.ts

@@ -128,6 +128,10 @@ 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/Input.js

@@ -72,7 +72,7 @@ var InputBase = function (props) {
         inputRef.current.select();
     };
     return (React.createElement(InputWrapper, { fluid: props.fluid, ghost: props.ghost, error: props.error, disabled: props.disabled, transparent: props.transparent, icon: props.icon, iconPosition: props.iconPosition, onClear: (props.clearable && props.value) ? handleClear : null, onToggleReveal: props.revealable ? handleToggleReveal : null, revealed: revealed, unit: props.unit },
-        React.createElement("input", { "data-testid": "Input", className: props.className, ref: inputRef, tabIndex: props.noTabIndex ? -1 : 0, value: value, placeholder: props.placeholder, disabled: props.disabled, type: props.type == 'password' ? (revealed ? 'text' : 'password') : props.type, maxLength: props.maxLength, autoComplete: props.autocomplete, onChange: handleChange, onFocus: props.onFocus })));
+        React.createElement("input", { "data-testid": props['data-testid'] || "Input", className: props.className, ref: inputRef, tabIndex: props.noTabIndex ? -1 : 0, value: value, placeholder: props.placeholder, disabled: props.disabled, type: props.type == 'password' ? (revealed ? 'text' : 'password') : props.type, maxLength: props.maxLength, autoComplete: props.autocomplete, onChange: handleChange, onFocus: props.onFocus })));
 };
 var InputStyled = styled(InputBase)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  // Dimensions:\n  width:            100%;\n  box-sizing:       border-box;\n  z-index:          0;\n  border: none;\n\n  outline: solid 3px rebeccapurple;\n  background: transparent;\n  padding: 0;\n  margin: 0;\n  outline:          none;\n\n  // Font\n  font:             ", ";\n  text-align:       left;\n  color:            ", ";\n\n  // Define colors for placeholder text.\n  &::placeholder {\n    color: rgb(from ", " r g b / 50%);\n    opacity: 1 !important; /* Firefox applies opacity */\n  }\n\n  // Focus:\n  &:focus {\n    &::placeholder {\n      color: rgb(from ", " r g b / 30%);\n    }\n  }\n\n  ", "\n\n  // Make sure HTML5 validation does not show up.\n  &:valid {\n    box-shadow: none;\n  }\n  &:invalid {\n    box-shadow: none;\n  }\n\n  // Turn off number spinners.\n  &[type=number]::-webkit-inner-spin-button, \n  &[type=number]::-webkit-outer-spin-button { \n    -webkit-appearance: none;  /* Webkit (Chrome) */\n    margin: 0; \n  }    \n  &[type=number] {\n    appearance:textfield;\n    -moz-appearance:textfield; /* Firefox */\n  }       \n"], ["\n  // Dimensions:\n  width:            100%;\n  box-sizing:       border-box;\n  z-index:          0;\n  border: none;\n\n  outline: solid 3px rebeccapurple;\n  background: transparent;\n  padding: 0;\n  margin: 0;\n  outline:          none;\n\n  // Font\n  font:             ", ";\n  text-align:       left;\n  color:            ", ";\n\n  // Define colors for placeholder text.\n  &::placeholder {\n    color: rgb(from ", " r g b / 50%);\n    opacity: 1 !important; /* Firefox applies opacity */\n  }\n\n  // Focus:\n  &:focus {\n    &::placeholder {\n      color: rgb(from ", " r g b / 30%);\n    }\n  }\n\n  ", "\n\n  // Make sure HTML5 validation does not show up.\n  &:valid {\n    box-shadow: none;\n  }\n  &:invalid {\n    box-shadow: none;\n  }\n\n  // Turn off number spinners.\n  &[type=number]::-webkit-inner-spin-button, \n  &[type=number]::-webkit-outer-spin-button { \n    -webkit-appearance: none;  /* Webkit (Chrome) */\n    margin: 0; \n  }    \n  &[type=number] {\n    appearance:textfield;\n    -moz-appearance:textfield; /* Firefox */\n  }       \n"])), function (p) { return p.theme.font.bodyMedium; }, function (p) { return p.theme.colors.primary[3]; }, function (p) { return p.theme.colors.primary[3]; }, function (p) { return p.theme.colors.primary[3]; }, function (p) { return p.disabled && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    color: ", ";\n  "], ["\n    color: ", ";\n  "])), p.theme.colors.neutral[50]); });
 var Input = function (props) { return React.createElement(InputStyled, __assign({}, props)); };

package/inputs/MonthRange/MonthRange.d.ts

@@ -63,6 +63,10 @@ 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/MonthRange/MonthRange.js

@@ -80,7 +80,7 @@ var MonthRangeBase = function (props) {
             }
         ]
     }), styles = _c.styles, attributes = _c.attributes, update = _c.update;
-    return (React.createElement("div", { "data-testid": "MonthRange", tabIndex: -1, className: props.className, onKeyDown: handleKeyDown, ref: wrapperRef },
+    return (React.createElement("div", { "data-testid": props['data-testid'] || "MonthRange", tabIndex: -1, className: props.className, onKeyDown: handleKeyDown, ref: wrapperRef },
         React.createElement(Selector, { value: value, disabled: props.disabled, ghost: props.ghost, transparent: props.transparent, error: props.error, clearable: props.clearable, placeholder: props.placeholder, count: props.count, onClear: (!props.disabled && props.clearable && value != null) ? function () { return handleSelect(null); } : null, onCalendar: handleToggle }),
         createPortal(React.createElement(Body, { ref: bodyRef, value: value, open: open, transparent: props.transparent, onSelect: handleSelect, styles: styles, attributes: attributes }), document.body)));
 };

package/inputs/Selector/Selector.d.ts

@@ -25,6 +25,10 @@ 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/Selector/Selector.js

@@ -61,7 +61,7 @@ var SelectorBase = function (props) {
             default: return React.createElement(Checkbox, __assign({}, otherProps));
         }
     };
-    return (React.createElement("label", { "data-testid": "Selector", className: props.className },
+    return (React.createElement("label", { "data-testid": props['data-testid'] || "Selector", className: props.className },
         React.createElement("input", { ref: inputRef, name: props.name, type: props.radio ? "radio" : "checkbox", value: props.value === null ? undefined : props.value, checked: checked === null ? false : checked, disabled: props.disabled, onChange: handleChange }),
         getWidget(),
         React.createElement("span", null, props.label)));

package/inputs/Slider/Slider.d.ts

@@ -72,6 +72,10 @@ 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/Slider/Slider.js

@@ -154,7 +154,7 @@ var SliderBase = function (props) {
         // Create a number of ticks and return them.
         return Array(props.ticks).fill(0).map(function (t, idx) { return React.createElement(Tick, { key: idx }); });
     };
-    return (React.createElement("div", { "data-testid": "Slider", className: props.className, onMouseDown: handleMouseDown, onKeyDown: handleKeyDown, tabIndex: 0 },
+    return (React.createElement("div", { "data-testid": props['data-testid'] || "Slider", className: props.className, onMouseDown: handleMouseDown, onKeyDown: handleKeyDown, tabIndex: 0 },
         React.createElement(Track, { ref: trackRef },
             React.createElement(TrackFill, { "$disabled": props.disabled, "$error": props.error, ref: trackFillRef }),
             props.ticks && props.hideTicks != true && renderTicks(),

package/inputs/Textarea/Textarea.d.ts

@@ -69,6 +69,10 @@ 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/inputs/Textarea/Textarea.js

@@ -42,7 +42,7 @@ var TextareaBase = function (props) {
         }
     };
     return (React.createElement(InputWrapper, { fluid: props.fluid, ghost: props.ghost, error: props.error, disabled: props.disabled, transparent: props.transparent, flex: props.flex },
-        React.createElement("textarea", { "data-testid": "Textarea", className: props.className, ref: textareaRef, name: props.name, value: value == null ? '' : value, placeholder: props.placeholder, disabled: props.disabled, tabIndex: 0, onChange: handleChange }),
+        React.createElement("textarea", { "data-testid": props['data-testid'] || "Textarea", className: props.className, ref: textareaRef, name: props.name, value: value == null ? '' : value, placeholder: props.placeholder, disabled: props.disabled, tabIndex: 0, onChange: handleChange }),
         props.fullscreen &&
             React.createElement(FullscreenToggle, { onClick: toggleFullscreen },
                 React.createElement("use", { xlinkHref: SVG.Icons.Fullscreen }))));

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,8 +60,8 @@ 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 },
-            React.createElement(Button, { "$grouped": props.grouped, "$size": props.size, "$disabled": props.disabled, "$active": props.active }, props.children),
+        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, { "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));
     };

package/map/controls/base/MapButtonGroup/MapButtonGroup.js

@@ -9,7 +9,7 @@ import { MapControl } from '../MapControl';
  */
 var MapButtonGroup = function (props) {
     return (React.createElement(MapControl, { x: props.x, y: props.y },
-        React.createElement("div", { className: props.className }, React.Children.map(props.children, function (child) {
+        React.createElement("div", { "data-testid": "MapButtonGroup", className: props.className }, React.Children.map(props.children, function (child) {
             if (child == null)
                 return null;
             return React.cloneElement(child, {

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

@@ -29,7 +29,7 @@ import { useViewState } from '../../../Map';
 import styled from 'styled-components';
 var MapControlBase = function (props) {
     var viewState = useViewState();
-    return (React.createElement("div", { className: props.className, style: {
+    return (React.createElement("div", { "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.js

@@ -60,9 +60,9 @@ var FilterBase = function (props) {
         if (update)
             update();
     };
-    return (React.createElement("div", { className: props.className },
+    return (React.createElement("div", { "data-test-id": "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({ "$open": open, "$width": props.width, style: styles.popper }, attributes.popper, { ref: paneRef }), open && React.createElement(GlassPane, { padded: true, bordered: true }, props.children)), document.body)));
+        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)));
 };
 var Pane = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: ", ";\n  width: ", "px;\n  z-index: 2500;\n"], ["\n  display: ", ";\n  width: ", "px;\n  z-index: 2500;\n"
     /**

package/modules/MainMenu/MainMenu.js

@@ -49,8 +49,8 @@ var MainMenuBase = function (props) {
         }
     });
     return (React.createElement("div", { "data-testid": "MainMenu", className: props.className },
-        React.createElement(Top, null, primaryItems),
-        React.createElement(Bottom, null, secondaryItems)));
+        React.createElement(Top, { "data-testid": "MainMenu.Top" }, primaryItems),
+        React.createElement(Bottom, { "data-testid": "MainMenu.Bottom" }, secondaryItems)));
 };
 var Top = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 16px;\n"], ["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 16px;\n"])));
 var Bottom = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: end;\n  gap: 16px;\n"], ["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: end;\n  gap: 16px;\n"])));

package/modules/Root/Content.js

@@ -16,7 +16,7 @@ var __assign = (this && this.__assign) || function () {
 import * as React from 'react';
 import styled from 'styled-components';
 var ContentBase = function (props) {
-    return (React.createElement("div", { className: props.className }, props.children));
+    return (React.createElement("div", { "data-testid": "Root.Content", className: props.className }, props.children));
 };
 var ContentStyled = styled(ContentBase)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  width: 100%;\n  height: 100%;\n  background: red;\n  visibility: ", ";\n"], ["\n  position: relative;\n  width: 100%;\n  height: 100%;\n  background: red;\n  visibility: ", ";\n"])), function (p) { return p.active ? 'visible' : 'hidden'; });
 var Content = function (props) { return React.createElement(ContentStyled, __assign({}, props)); };

package/modules/Root/Overlay.js

@@ -22,7 +22,7 @@ var OverlayBase = function (props) {
     var handleShaderClick = function () {
         props.onClose();
     };
-    return (React.createElement("div", { className: props.className },
+    return (React.createElement("div", { "data-testid": "Root.Overlay", className: props.className },
         React.createElement(Sidebar, { open: props.open }, props.children),
         React.createElement(Shader, { active: props.open, onClick: handleShaderClick })));
 };

package/modules/Root/Root.js

@@ -31,10 +31,10 @@ var RootBase = function (props) {
             React.createElement(MainMenu.Item, { icon: SVG.Menu.Account, onClick: function () { return navigate("page1"); } }, "Page 1"),
             React.createElement(MainMenu.Item, { icon: SVG.Menu.Signout, onClick: function () { return navigate("page2"); } }, "Page 2")),
         React.createElement(Overlay, { open: m.length == 3 && m[2].pathname != "/", onClose: function () { return navigate("/"); } }, m.length == 3 && React.createElement(Outlet, null)),
-        React.createElement(Content, null,
+        React.createElement(Content, { "data-testid": "Root.Content" },
             React.createElement(Map, { token: "pk.eyJ1IjoibG9uZ2xpbmVlbnZpcm9ubWVudCIsImEiOiJjbDdldTJhMmYwM3VlM3lvMW5mcTFyOWlnIn0.LzghnMQjPdtw795xN-BCWg", style: "mapbox://styles/longlineenvironment/clm8wahno013a01pb5c0u3k22" }),
             m.length == 2 &&
-                React.createElement(Page, null,
+                React.createElement(Page, { "data-testid": "Root.Page" },
                     React.createElement(Outlet, null)))));
 };
 var Content = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  left: 80px;\n  right: 0;\n  bottom: 0;\n"], ["\n  position: absolute;\n  top: 0;\n  left: 80px;\n  right: 0;\n  bottom: 0;\n"])));

package/modules/Root/Shader.js

@@ -16,7 +16,7 @@ var __assign = (this && this.__assign) || function () {
 import * as React from 'react';
 import styled from 'styled-components';
 var ShaderBase = function (props) {
-    return (React.createElement("div", { className: props.className, onClick: props.onClick }));
+    return (React.createElement("div", { "data-testid": "Root.Shader", className: props.className, onClick: props.onClick }));
 };
 var ShaderStyled = styled(ShaderBase)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  // Position and size:\n  position: absolute;\n  z-index: 1;\n  left: 0;\n  top: 0;\n  right: 0;\n  bottom: 0;\n\n  // Behavior:\n  pointer-events: ", ";\n  cursor: ", ";\n\n  // Appearance:\n  transition: opacity ", "ms ease-in-out;\n  opacity: ", ";\n  background-color: rgba(0,0,0,0.5);\n"], ["\n  // Position and size:\n  position: absolute;\n  z-index: 1;\n  left: 0;\n  top: 0;\n  right: 0;\n  bottom: 0;\n\n  // Behavior:\n  pointer-events: ", ";\n  cursor: ", ";\n\n  // Appearance:\n  transition: opacity ", "ms ease-in-out;\n  opacity: ", ";\n  background-color: rgba(0,0,0,0.5);\n"])), function (p) { return p.active ? 'all' : 'none'; }, function (p) { return p.active ? 'pointer' : 'auto'; }, function (p) { return p.theme.animation.duration * 2; }, function (p) { return p.active ? 1 : 0; });
 var Shader = function (props) { return React.createElement(ShaderStyled, __assign({}, props)); };

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", { 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.326",
+  "version": "1.0.328",
   "description": "AquaUI",
   "author": "Alexander van Oostenrijk / Longline Environment",
   "license": "Commercial",