@longline/aqua-ui 1.0.330 → 1.0.334

package/Types.d.ts

@@ -7,4 +7,12 @@ interface IGradientStop {
     pos: number;
     color: string;
 }
-export { Size, IGradientStop };
+interface ITestable {
+    /**
+    * Test ID for Playwright/testing. Forwarded to the root DOM element.
+    */
+    'data-testid'?: string;
+}
+export type { Size };
+export type { IGradientStop };
+export type { ITestable };

package/containers/Anchor/Anchor.d.ts

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

package/containers/Anchor/Anchor.js

@@ -101,7 +101,7 @@ var Anchor = function (props) {
     React.useEffect(function () {
         updatePosition();
     }, [props.horizontal, props.vertical]);
-    return (React.createElement("div", { "data-testid": "Anchor", ref: anchorRef, style: {
+    return (React.createElement("div", { "data-testid": props['data-testid'] || "Anchor", ref: anchorRef, style: {
             position: 'absolute',
             left: (_a = props.left) !== null && _a !== void 0 ? _a : 'auto',
             top: (_b = props.top) !== null && _b !== void 0 ? _b : 'auto',

package/containers/Dock/Dock.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
-interface IDockProps {
+import { ITestable } from '../../Types';
+interface IDockProps extends ITestable {
     /** @ignore */
     className?: string;
     /** Children are one or more `Dockable`. */

package/containers/Dock/Dock.js

@@ -27,7 +27,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import * as React from 'react';
 import styled, { css } from 'styled-components';
 var DockBase = function (props) {
-    return React.createElement("div", { "data-testid": "Dock", className: props.className, role: "presentation" }, props.children);
+    return React.createElement("div", { "data-testid": props['data-testid'] || "Dock", className: props.className, role: "presentation" }, props.children);
 };
 var DockStyled = styled(DockBase)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  // Position and size:\n  position: absolute;\n  left: 0;\n  right: ", "px;\n  top: ", "px;\n  bottom: ", "px;\n  box-sizing: border-box;\n  // zIndex >= 2 will overlap Mapbox logo.\n  z-index: 2;\n\n  // Appearance:\n  background-color: transparent;\n  ", "\n  pointer-events: none !important; /* Map will set pointer-events:all to its children. */\n\n  // Content:\n  display: flex;\n  flex-direction: column;\n  align-items: end;\n  gap: ", "px;\n"], ["\n  // Position and size:\n  position: absolute;\n  left: 0;\n  right: ", "px;\n  top: ", "px;\n  bottom: ", "px;\n  box-sizing: border-box;\n  // zIndex >= 2 will overlap Mapbox logo.\n  z-index: 2;\n\n  // Appearance:\n  background-color: transparent;\n  ", "\n  pointer-events: none !important; /* Map will set pointer-events:all to its children. */\n\n  // Content:\n  display: flex;\n  flex-direction: column;\n  align-items: end;\n  gap: ", "px;\n"
     /**

package/containers/Dock/Dockable.d.ts

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

package/containers/Dock/Dockable.js

@@ -103,7 +103,7 @@ var DockableBase = function (props) {
         style.left = "".concat(x + offsetX, "px");
         style.top = "".concat(y + offsetY, "px");
     }
-    return (React.createElement("div", { "data-testid": "Dockable", style: style, className: "".concat(props.className, " ").concat(offscreen ? 'offscreen' : ''), ref: containerRef }, props.children));
+    return (React.createElement("div", { "data-testid": props['data-testid'] || "Dockable", style: style, className: "".concat(props.className, " ").concat(offscreen ? 'offscreen' : ''), ref: containerRef }, props.children));
 };
 var DockableStyled = styled(DockableBase)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  color: white;\n  z-index: ", ";\n  ", "\n"], ["\n  color: white;\n  z-index: ", ";\n  ", "\n"
     /**

package/containers/DragBar/DragBar.d.ts

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

package/containers/DragBar/DragBar.js

@@ -71,7 +71,7 @@ var DragBarBase = function (props) {
             behavior: props.behavior
         });
     };
-    return (React.createElement("div", { "data-testid": "DragBar", className: props.className },
+    return (React.createElement("div", { "data-testid": props['data-testid'] || "DragBar", className: props.className },
         props.navigation && React.createElement(NavButton, { onClick: function () { return handleNavigate(-props.navigationDelta); } },
             React.createElement(Icon, { url: SVG.Icons.Chevron })),
         React.createElement(Scroller, { onMouseDown: handleMouseDown, ref: scrollerRef },

package/containers/Form/elements/BoxWrapper.js

@@ -29,7 +29,7 @@ var BoxWrapperBase = function (props) {
             clickableChild.focus();
         }
     };
-    return (React.createElement("div", { "data-testid": "BoxWrapper", className: props.className, onClick: handleClick, ref: wrapper },
+    return (React.createElement("div", { "data-testid": "Field.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, { "data-testid": "Control" }, props.children),

package/containers/Form/elements/Hint.js

@@ -5,7 +5,7 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
 import * as React from 'react';
 import styled from 'styled-components';
 var HintBase = function (props) {
-    return React.createElement("div", { "data-testid": "Hint", tabIndex: -1, className: props.className }, props.children);
+    return React.createElement("div", { "data-testid": "Field.Hint", tabIndex: -1, className: props.className }, props.children);
 };
 var Hint = styled(HintBase)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  font: ", ";\n  color: ", ";\n  user-select: none;\n  // Hints don't wrap and are ellipsized:\n  white-space: nowrap;\n  overflow-x: hidden;\n  text-overflow: ellipsis;\n"], ["\n  font: ", ";\n  color: ", ";\n  user-select: none;\n  // Hints don't wrap and are ellipsized:\n  white-space: nowrap;\n  overflow-x: hidden;\n  text-overflow: ellipsis;\n"])), function (p) { return p.theme.font.bodySmall; }, function (p) { return p.error ? p.theme.colors.negative : p.theme.colors.font; });
 export { Hint };

package/containers/Form/elements/SimpleWrapper.js

@@ -7,7 +7,7 @@ import styled, { css } from 'styled-components';
 import { Label } from './Label';
 import { Hint } from './Hint';
 var SimpleWrapperBase = function (props) {
-    return React.createElement("div", { "data-testid": "SimpleWrapper", className: props.className },
+    return React.createElement("div", { "data-testid": "Field.SimpleWrapper", className: props.className },
         props.label,
         props.children,
         props.hint);

package/containers/GlassPane/GlassPane.d.ts

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

package/containers/GlassPane/GlassPane.js

@@ -42,7 +42,7 @@ var GlassPaneBase = React.memo(function (props) {
             return function () { };
         }
     }, [props.animated]);
-    return (React.createElement("div", { "data-testid": "GlassPane", className: "".concat(props.className, " ").concat(mounted ? 'mounted' : '') }, props.children));
+    return (React.createElement("div", { "data-testid": props['data-testid'] || "GlassPane", className: "".concat(props.className, " ").concat(mounted ? 'mounted' : '') }, props.children));
 });
 var GRADIENT_0 = "rgb(255,255,255,0.6)";
 var GRADIENT_1 = "rgb(255,255,255,0.3)";

package/containers/InfoBox/InfoBox.d.ts

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

package/containers/InfoBox/InfoBox.js

@@ -33,7 +33,7 @@ import { InfoBoxRow } from './elements/Row';
  * An `InfoBox` is a glass pane with an optional header and footer.
  */
 var InfoBoxBase = function (props) {
-    return React.createElement("div", { "data-testid": "InfoBox", className: props.className, role: "region", "aria-label": "Information" },
+    return React.createElement("div", { "data-testid": props['data-testid'] || "InfoBox", className: props.className, role: "region", "aria-label": "Information" },
         React.createElement(Content, { header: props.header, padded: props.padded, minHeight: props.minHeight, scroll: props.scroll }, props.children),
         props.footer && React.createElement(Footer, null, props.footer));
 };

package/containers/InfoBox/elements/Content.d.ts

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

package/containers/InfoBox/elements/Content.js

@@ -19,7 +19,7 @@ import { OverlayScrollbarsComponent } from "overlayscrollbars-react";
 import { GlassPane } from '../../GlassPane';
 import { Header } from './Header';
 var ContentBase = function (props) {
-    return React.createElement("div", { "data-testid": "InfoBox.Content", className: props.className },
+    return React.createElement("div", { "data-testid": props['data-testid'] || "InfoBox.Content", className: props.className },
         React.createElement(GlassPane, { bordered: true },
             props.header && React.createElement(Header, null, props.header),
             React.createElement(PaneContent, null,

package/containers/InfoBox/elements/Footer.d.ts

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

package/containers/InfoBox/elements/Footer.js

@@ -16,7 +16,7 @@ var __assign = (this && this.__assign) || function () {
 import * as React from 'react';
 import styled from "styled-components";
 var FooterBase = function (props) {
-    return React.createElement("div", { "data-testid": "InfoBox.Footer", className: props.className }, props.children);
+    return React.createElement("div", { "data-testid": props['data-testid'] || "InfoBox.Footer", className: props.className }, props.children);
 };
 var FooterStyled = styled(FooterBase)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  // Position and size:\n  position: relative;\n  width: 100%;\n  padding-top: 8px;\n  padding-left:  16px;\n  padding-right: 16px;\n  box-sizing: border-box;\n  \n  // Appearance;\n  color: ", ";\n  font: ", ";\n\n  // Content:\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  gap: 16px;\n\n  // While InfoBox blocks all pointer events, contents inside\n  // the footer must receive events:\n  & > * {\n    pointer-events: all;\n  }\n"], ["\n  // Position and size:\n  position: relative;\n  width: 100%;\n  padding-top: 8px;\n  padding-left:  16px;\n  padding-right: 16px;\n  box-sizing: border-box;\n  \n  // Appearance;\n  color: ", ";\n  font: ", ";\n\n  // Content:\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  gap: 16px;\n\n  // While InfoBox blocks all pointer events, contents inside\n  // the footer must receive events:\n  & > * {\n    pointer-events: all;\n  }\n"])), function (p) { return p.theme.colors.neutral[100]; }, function (p) { return p.theme.font.bodyMedium; });
 var Footer = function (props) { return React.createElement(FooterStyled, __assign({}, props)); };

package/containers/InfoBox/elements/Header.d.ts

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

package/containers/InfoBox/elements/Header.js

@@ -16,7 +16,7 @@ var __assign = (this && this.__assign) || function () {
 import * as React from 'react';
 import styled from "styled-components";
 var HeaderBase = function (props) {
-    return React.createElement("div", { "data-testid": "InfoBox.Header", className: props.className }, props.children);
+    return React.createElement("div", { "data-testid": props['data-testid'] || "InfoBox.Header", className: props.className }, props.children);
 };
 var HeaderStyled = styled(HeaderBase)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  // Size:\n  box-sizing: border-box;\n  padding-left: 22px;\n  padding-right: 22px;\n  padding-top: 12px;\n  padding-bottom: 12px;\n\n  // Appearance:\n  background: ", ";\n  color: ", ";\n  font: ", ";\n  \n  // Content:\n  display: flex;\n  flex-direction: column;\n  gap: 3px;\n"], ["\n  // Size:\n  box-sizing: border-box;\n  padding-left: 22px;\n  padding-right: 22px;\n  padding-top: 12px;\n  padding-bottom: 12px;\n\n  // Appearance:\n  background: ", ";\n  color: ", ";\n  font: ", ";\n  \n  // Content:\n  display: flex;\n  flex-direction: column;\n  gap: 3px;\n"])), function (p) { return p.theme.colors.primary[5]; }, function (p) { return p.theme.colors.neutral[100]; }, function (p) { return p.theme.font.headingMedium; });
 var Header = function (props) { return React.createElement(HeaderStyled, __assign({}, props)); };

package/containers/InfoBox/elements/Row.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
-interface IInfoBoxRowProps {
+import { ITestable } from '../../../Types';
+interface IInfoBoxRowProps extends ITestable {
     /** Name to show. */
     name: React.ReactNode;
     /** Value to show. */
@@ -11,4 +12,5 @@ interface IInfoBoxRowProps {
  * An `InfoBoxRow` shows a name-value combination, in row format.
  */
 declare const InfoBoxRow: (props: IInfoBoxRowProps) => React.JSX.Element;
-export { InfoBoxRow, IInfoBoxRowProps };
+export { InfoBoxRow };
+export type { IInfoBoxRowProps };

package/containers/InfoBox/elements/Row.js

@@ -9,7 +9,7 @@ import { Ghost } from '../../../controls/Ghost';
  * An `InfoBoxRow` shows a name-value combination, in row format.
  */
 var InfoBoxRow = function (props) {
-    return React.createElement(Wrapper, { "data-testid": "InfoBox.Row" },
+    return React.createElement(Wrapper, { "data-testid": props['data-testid'] || "InfoBox.Row" },
         props.ghost === true && React.createElement(Ghost, { style: { position: 'absolute', left: 0, top: '3px', right: 0, bottom: '3px' } }),
         props.ghost !== true && React.createElement(React.Fragment, null,
             React.createElement(Name, null, props.name),

package/containers/List/List.d.ts

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

package/containers/List/List.js

@@ -19,7 +19,7 @@ import { Input } from '../../inputs/Input';
  * other code, using the ref, can scroll list items into view.
  */
 var List = React.forwardRef(function (props, ref) {
-    return React.createElement(ListStyled, { "data-testid": "List", className: props.className, tabIndex: -1, "$count": React.Children.count(props.children), "$maxItems": props.maxItems, "$contract": props.contract, "$tall": props.tall },
+    return React.createElement(ListStyled, { "data-testid": props['data-testid'] || "List", className: props.className, tabIndex: -1, "$count": React.Children.count(props.children), "$maxItems": props.maxItems, "$contract": props.contract, "$tall": props.tall },
         props.onSearch &&
             React.createElement(SearchBox, { onClick: function (e) { return e.stopPropagation(); } },
                 React.createElement(Input, { icon: SVG.Icons.Search, placeholder: props.placeholder, clearable: true, value: props.search, transparent: true, fluid: true, type: "text", onChange: props.onSearch })),

package/containers/List/ListCell.d.ts

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

package/containers/List/ListCell.js

@@ -16,7 +16,7 @@ var __assign = (this && this.__assign) || function () {
 import * as React from 'react';
 import styled, { css } from 'styled-components';
 var ListCellBase = function (props) {
-    return React.createElement("div", { "data-testid": "ListCell", className: props.className }, props.children);
+    return React.createElement("div", { "data-testid": props['data-testid'] || "ListCell", className: props.className }, props.children);
 };
 var ListCellStyled = styled(ListCellBase)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  ", ";\n  ", ";\n  ", "\n\n  // Content alignment:\n  text-align: ", ";\n\n  // Text is truncated with an ellipsis\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n"], ["\n  ", ";\n  ", ";\n  ", "\n\n  // Content alignment:\n  text-align: ", ";\n\n  // Text is truncated with an ellipsis\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n"])), function (p) { return p.width && typeof p.width === 'string' && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["width: ", ";"], ["width: ", ";"])), p.width); }, function (p) { return p.width && typeof p.width !== 'string' && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["flex: ", ";"], ["flex: ", ";"])), p.width); }, function (p) { return !p.width && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["flex: 1;"], ["flex: 1;"]))); }, function (p) { return p.align === 'right' ? 'right' : 'left'; });
 var ListCell = function (props) { return React.createElement(ListCellStyled, __assign({}, props)); };

package/containers/List/ListRow.d.ts

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

package/containers/List/ListRow.js

@@ -16,7 +16,7 @@ var __assign = (this && this.__assign) || function () {
 import * as React from 'react';
 import styled, { css } from 'styled-components';
 var ListRowBase = function (props) {
-    return React.createElement("div", { "data-testid": "ListRow", className: props.className, onClick: props.disabled ? null : function (e) { return props.onClick(e); } }, props.children);
+    return React.createElement("div", { "data-testid": props['data-testid'] || "ListRow", className: props.className, onClick: props.disabled ? null : function (e) { return props.onClick(e); } }, props.children);
 };
 var ListRowStyled = styled(ListRowBase)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  padding-left: 16px;\n  padding-right: 16px;\n  min-height: 42px;\n  user-select: none;\n  outline: none;\n  color: ", ";\n\n  // Entire row is clickable:\n  cursor: ", ";\n\n  // Cells are flex-aligned:\n  display: flex;\n  flex-direction: row;\n  flex-wrap: nowrap;\n  align-items: center;\n  gap: ", "px;\n\n  // Background color on hover:\n  ", "\n\n  ", "\n"], ["\n  padding-left: 16px;\n  padding-right: 16px;\n  min-height: 42px;\n  user-select: none;\n  outline: none;\n  color: ", ";\n\n  // Entire row is clickable:\n  cursor: ", ";\n\n  // Cells are flex-aligned:\n  display: flex;\n  flex-direction: row;\n  flex-wrap: nowrap;\n  align-items: center;\n  gap: ", "px;\n\n  // Background color on hover:\n  ", "\n\n  ", "\n"])), function (p) { return p.theme.colors.neutral[30]; }, function (p) { return (p.onClick && !p.disabled) ? 'pointer' : 'auto'; }, function (p) { return p.gap; }, function (p) { return !p.disabled && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    &:hover {\n      background-color: ", ";\n    }\n\n    // Background color on pressed:\n    ", "\n\n    ", "\n  "], ["\n    &:hover {\n      background-color: ", ";\n    }\n\n    // Background color on pressed:\n    ", "\n\n    ", "\n  "])), function (p) { return p.theme.colors.neutral[95]; }, p.onClick && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      &:active {\n        background-color: rgb(from ", " r g b / 65%) !important;\n        color: ", ";\n      }\n    "], ["\n      &:active {\n        background-color: rgb(from ", " r g b / 65%) !important;\n        color: ", ";\n      }\n    "])), function (p) { return p.theme.colors.primary[2]; }, function (p) { return p.theme.colors.neutral[100]; }), p.active && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      background-color: rgb(from ", " r g b / 45%) !important;\n      color: ", ";\n    "], ["\n      background-color: rgb(from ", " r g b / 45%) !important;\n      color: ", ";\n    "])), function (p) { return p.theme.colors.primary[2]; }, function (p) { return p.theme.colors.neutral[100]; })); }, function (p) { return p.disabled && css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    color: ", ";\n  "], ["\n    color: ", ";\n  "])), function (p) { return p.theme.colors.neutral[50]; }); });
 var ListRow = function (props) { return React.createElement(ListRowStyled, __assign({}, props)); };

package/containers/Message/Message.d.ts

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

package/containers/Message/Message.js

@@ -19,7 +19,7 @@ import { NoData } from './NoData';
 import { NoFilteredData } from './NoFilteredData';
 import { Error } from './Error';
 var MessageBase = function (props) {
-    return React.createElement("div", { "data-testid": "Message", className: props.className }, props.children);
+    return React.createElement("div", { "data-testid": props['data-testid'] || "Message", className: props.className }, props.children);
 };
 var MessageStyled = styled(MessageBase)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  // Position:\n  margin: ", ";\n\n  // Content:\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  text-align: center;\n  align-items: center;\n  gap: 16px;\n\n  // Appearance:\n  color: ", ";\n  user-select: none;\n  padding: 16px 16px 16px 16px;\n  border-radius: ", "px;\n  background-color: ", ";  \n  line-height: 22px;\n"], ["\n  // Position:\n  margin: ", ";\n\n  // Content:\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  text-align: center;\n  align-items: center;\n  gap: 16px;\n\n  // Appearance:\n  color: ", ";\n  user-select: none;\n  padding: 16px 16px 16px 16px;\n  border-radius: ", "px;\n  background-color: ", ";  \n  line-height: 22px;\n"
     /**

package/containers/Openable/Openable.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
-interface IOpenableProps {
+import { ITestable } from '../../Types';
+interface IOpenableProps extends ITestable {
     /**
      * Toggle element (usually a button or icon)
      */

package/containers/Openable/Openable.js

@@ -55,9 +55,9 @@ var Openable = function (_a) {
     React.useEffect(function () {
         update === null || update === void 0 ? void 0 : update();
     }, [props.open]);
-    return (React.createElement("div", { "data-testid": "Openable", ref: toggleRef },
+    return (React.createElement("div", { "data-testid": props['data-testid'] || "Openable", ref: toggleRef },
         props.toggle,
-        createPortal(React.createElement(Pane, __assign({ "$open": props.open, "$width": width, style: styles.popper }, attributes.popper, { ref: paneRef }), props.open && props.content), // If in fullscreen mode, Openable must portal into fullscreen element,
+        createPortal(React.createElement(Pane, __assign({ "data-testid": "Openable.Pane", "$open": props.open, "$width": width, style: styles.popper }, attributes.popper, { ref: paneRef }), props.open && props.content), // If in fullscreen mode, Openable must portal into fullscreen element,
         // else content will be hidden.
         (_b = document.fullscreenElement) !== null && _b !== void 0 ? _b : document.body)));
 };

package/containers/PublicRoute/Help.d.ts

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

package/containers/PublicRoute/Help.js

@@ -16,7 +16,7 @@ var __assign = (this && this.__assign) || function () {
 import * as React from 'react';
 import styled from 'styled-components';
 var HelpBase = function (props) {
-    return (React.createElement("div", { "data-testid": "Help", className: props.className },
+    return (React.createElement("div", { "data-testid": props['data-testid'] || "PublicRoute.Help", className: props.className },
         React.createElement(Body, null,
             React.createElement(Content, null, props.children))));
 };

package/containers/PublicRoute/PublicRoute.d.ts

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

package/containers/PublicRoute/PublicRoute.js

@@ -22,7 +22,7 @@ import { SVG } from '../../svg';
 import { ParticleGlobe } from '../../modules/ParticleGlobe/ParticleGlobe';
 var PublicRouteBase = function (props) {
     var _a = React.useState(false), showHelp = _a[0], setShowHelp = _a[1];
-    return (React.createElement("div", { "data-testid": "PublicRoute", className: props.className },
+    return (React.createElement("div", { "data-testid": props['data-testid'] || "PublicRoute", className: props.className },
         React.createElement(ParticleGlobe, { landmass: 'day', globe: true, glow: 20, trails: 5, pointSize: 1.0, numParticles: 100000, brightness: 0.9, speedFactor: 750, minLifetime: 1000, maxLifetime: 1000, responsive: true }),
         React.createElement(Content, null,
             React.createElement(Help, { active: showHelp },

package/containers/Tabs/Pane.d.ts

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

package/containers/Tabs/Pane.js

@@ -22,7 +22,7 @@ var PaneBase = function (props) {
     // By default, all children are rendered (but hidden when
     // not active). With nohiddenrender enabled, only the active
     // tab is rendered.
-    return (React.createElement("div", { "data-testid": "Tabs.Pane", className: props.className }, shouldRender() ? props.children : null));
+    return (React.createElement("div", { "data-testid": props['data-testid'] || "Tabs.Pane", className: props.className }, shouldRender() ? props.children : null));
 };
 var PaneStyled = styled(PaneBase)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  display: ", ";\n  height: 100%;\n  padding-top: ", "px;\n  font: ", ";\n"], ["\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  display: ", ";\n  height: 100%;\n  padding-top: ", "px;\n  font: ", ";\n"
     /**

package/containers/Tabs/Tabs.d.ts

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

package/containers/Tabs/Tabs.js

@@ -65,7 +65,7 @@ var TabsBase = function (props) {
             });
         });
     };
-    return (React.createElement("div", { "data-testid": "Tabs", className: props.className },
+    return (React.createElement("div", { "data-testid": props['data-testid'] || "Tabs", className: props.className },
         React.createElement(TabBar, { active: index, onChange: tabClicked, tabWidth: props.tabWidth }, getTabs()),
         React.createElement(Panes, null, getPanes())));
 };

package/controls/Chip/Chip.d.ts

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

package/controls/Chip/Chip.js

@@ -38,7 +38,7 @@ var ChipBase = function (props) {
             props.onClick(e);
         }
     };
-    return (React.createElement("div", { "data-testid": "Chip", className: props.className, tabIndex: 0, onKeyDown: handleKeyDown, "aria-disabled": props.disabled },
+    return (React.createElement("div", { "data-testid": props['data-testid'] || "Chip", className: props.className, tabIndex: 0, onKeyDown: handleKeyDown, "aria-disabled": props.disabled },
         React.createElement("span", { className: "inner", tabIndex: -1 }, props.children),
         React.createElement("button", { type: "button", onClick: props.onClick, "aria-label": "Remove chip", disabled: props.disabled, "aria-disabled": props.disabled },
             React.createElement("svg", null,

package/controls/CircularProgress/CircularProgress.d.ts

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

package/controls/CircularProgress/CircularProgress.js

@@ -32,7 +32,7 @@ var CircularProgressBase = function (props) {
     var radius = (props.size - props.strokeWidth) / 2;
     var circumference = 2 * Math.PI * radius;
     var offset = circumference * (1 - value / 100);
-    return (React.createElement("div", { "data-testid": "CircularProgress", className: props.className, role: "progressbar", "aria-valuenow": value, "aria-valuemin": 0, "aria-valuemax": 100 },
+    return (React.createElement("div", { "data-testid": props['data-testid'] || "CircularProgress", className: props.className, role: "progressbar", "aria-valuenow": value, "aria-valuemin": 0, "aria-valuemax": 100 },
         React.createElement("svg", { width: props.size, height: props.size },
             React.createElement("circle", { cx: props.size / 2, cy: props.size / 2, r: radius, fill: "none", strokeDasharray: circumference, strokeDashoffset: offset, strokeLinecap: "round", transform: "rotate(-90 ".concat(props.size / 2, " ").concat(props.size / 2, ")") })),
         React.createElement(Text, null,

package/controls/Dropzone/Dropzone.d.ts

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

package/controls/Dropzone/Dropzone.js

@@ -53,7 +53,7 @@ var DropzoneBase = function (props) {
         setHover(false);
         props.onAddFiles(Array.from(e.dataTransfer.files));
     };
-    return (React.createElement("button", { "data-testid": "Dropzone", type: "button", className: "".concat(props.className, " ").concat(hover ? 'hover' : ''), onClick: handleClick, onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop, onKeyDown: function (e) {
+    return (React.createElement("button", { "data-testid": props['data-testid'] || "Dropzone", type: "button", className: "".concat(props.className, " ").concat(hover ? 'hover' : ''), onClick: handleClick, onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop, onKeyDown: function (e) {
             if (e.key === 'Enter' || e.key === ' ') {
                 e.preventDefault();
                 handleClick();

package/controls/Fab/Fab.d.ts

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

package/controls/Fab/Fab.js

@@ -45,7 +45,7 @@ var FabBase = function (props) {
         // Call user's click handler if provided:
         (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, e);
     };
-    return (React.createElement("button", { "data-testid": "Fab", type: "button", className: props.className, onClick: handleClick, onMouseDown: handleMouseDown, title: props.title, disabled: props.disabled, "aria-disabled": props.disabled },
+    return (React.createElement("button", { "data-testid": props['data-testid'] || "Fab", type: "button", className: props.className, onClick: handleClick, onMouseDown: handleMouseDown, title: props.title, disabled: props.disabled, "aria-disabled": props.disabled },
         React.createElement(Icon, __assign({}, (typeof props.icon === 'string' ? { url: props.icon } : props.icon))),
         props.children));
 };

package/controls/Ghost/Ghost.d.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { CSSProperties } from 'styled-components';
-interface IGhostProps {
+import { ITestable } from '../../Types';
+interface IGhostProps extends ITestable {
     /** @ignore */
     className?: string;
     /**

package/controls/Ghost/Ghost.js

@@ -16,7 +16,7 @@ var __assign = (this && this.__assign) || function () {
 import * as React from 'react';
 import styled, { keyframes } from 'styled-components';
 var GhostBase = function (props) {
-    return React.createElement("div", { "data-testid": "Ghost", className: props.className, style: props.style },
+    return React.createElement("div", { "data-testid": props['data-testid'] || "Ghost", className: props.className, style: props.style },
         React.createElement(Gradient1, null),
         React.createElement(Gradient2, null));
 };

package/controls/Gradient/Gradient.d.ts

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

package/controls/Gradient/Gradient.js

@@ -32,7 +32,7 @@ var GradientBase = function (props) {
         console.warn("Gradient: Missing or invalid 'gradientStops'");
         return null;
     }
-    return React.createElement("div", { "data-testid": "Gradient", className: props.className });
+    return React.createElement("div", { "data-testid": props['data-testid'] || "Gradient", className: props.className });
 };
 var generateGradient = function (stops) {
     return "linear-gradient(to right, ".concat(stops.map(function (gs) { return "".concat(gs.color, " ").concat(gs.pos * 100, "%"); }).join(', '), ")");

package/controls/Histogram/Histogram.d.ts

@@ -1,9 +1,10 @@
 import * as React from 'react';
 import { IHistogramAppearance } from './HistogramAppearance';
 import { IHistogramBin } from './IHistogramBin';
+import { ITestable } from '../../Types';
 type TTickStyle = 'none' | 'tick' | 'value';
 type TValueStyle = 'hide' | 'show' | 'hover';
-interface IHistogramProps {
+interface IHistogramProps extends ITestable {
     /** @ignore */
     className?: string;
     /**