@longline/aqua-ui 1.0.330 → 1.0.331

package/controls/Histogram/Histogram.js

@@ -30,30 +30,30 @@ import { HistogramNoData } from './HistogramNoData';
 import { HistogramBar } from './HistogramBar';
 import { HistogramTick } from './HistogramTick';
 import { DefaultHistogramAppearance } from './HistogramAppearance';
-var HistogramBase = function (p) {
+var HistogramBase = function (props) {
     // Abort if there are no bins.
-    if (p.bins.length === 0)
-        return React.createElement(HistogramNoData, null, p.nodata);
+    if (props.bins.length === 0)
+        return React.createElement(HistogramNoData, null, props.nodata);
     // Find tallest bar. This is used to calculate the percentage height
     // of each bar.
-    var maxHeight = Math.max.apply(Math, p.bins.map(function (b) { return b.count; }));
+    var maxHeight = Math.max.apply(Math, props.bins.map(function (b) { return b.count; }));
     // Abort if bins are all empty.
     if (maxHeight === 0)
-        return React.createElement(HistogramNoData, null, p.nodata);
-    return (React.createElement("div", { "data-testid": "Histogram", className: p.className },
+        return React.createElement(HistogramNoData, null, props.nodata);
+    return (React.createElement("div", { "data-testid": props['data-testid'] || "Histogram", className: props.className },
         React.createElement(ChartArea, null,
             React.createElement(Indent, null,
-                React.createElement(BarArea, null, p.bins.map(function (bin, idx) {
-                    return React.createElement(HistogramBar, { key: idx, values: p.values, value: bin.count, label: bin.name, height: 100 * bin.count / maxHeight, onClick: p.onClick ? function () { return p.onClick(idx); } : null, loading: p.loading, appearance: p.appearance });
+                React.createElement(BarArea, null, props.bins.map(function (bin, idx) {
+                    return React.createElement(HistogramBar, { key: idx, values: props.values, value: bin.count, label: bin.name, height: 100 * bin.count / maxHeight, onClick: props.onClick ? function () { return props.onClick(idx); } : null, loading: props.loading, appearance: props.appearance });
                 })))),
-        p.tickStyle !== 'none' && React.createElement(AxisArea, null,
+        props.tickStyle !== 'none' && React.createElement(AxisArea, null,
             React.createElement(Indent, null,
-                p.bins.map(function (bin, idx) {
-                    return React.createElement(HistogramTick, { key: idx, showValue: p.tickStyle === 'value', left: 100 * idx / p.bins.length, value: bin.binStart });
+                props.bins.map(function (bin, idx) {
+                    return React.createElement(HistogramTick, { key: idx, showValue: props.tickStyle === 'value', left: 100 * idx / props.bins.length, value: bin.binStart });
                 }),
-                p.bins.length > 0 &&
-                    React.createElement(HistogramTick, { left: 100, showValue: p.tickStyle === 'value', value: p.bins[p.bins.length - 1].binEnd }))),
-        p.unit && React.createElement(UnitArea, null, p.unit)));
+                props.bins.length > 0 &&
+                    React.createElement(HistogramTick, { left: 100, showValue: props.tickStyle === 'value', value: props.bins[props.bins.length - 1].binEnd }))),
+        props.unit && React.createElement(UnitArea, null, props.unit)));
 };
 var ChartArea = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject([""], [""])));
 var AxisArea = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject([""], [""])));

package/controls/Icon/Icon.d.ts

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

package/controls/Icon/Icon.js

@@ -36,7 +36,7 @@ var IconBase = function (props) {
         if (props.onClick)
             props.onClick(e);
     };
-    return (React.createElement("svg", { "data-testid": "Icon", className: props.className, onClick: handleClick, focusable: "false", role: "img" },
+    return (React.createElement("svg", { "data-testid": props['data-testid'] || "Icon", className: props.className, onClick: handleClick, focusable: "false", role: "img" },
         props.title && React.createElement("title", null, props.title),
         React.createElement("use", { xlinkHref: props.url })));
 };

package/controls/Key/Key.d.ts

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

package/controls/Key/Key.js

@@ -48,7 +48,7 @@ var KeyBase = function (props) {
         }
         return { symbol: sym, wide: isWide };
     }, [props.value, isMac]), symbol = _a.symbol, wide = _a.wide;
-    return (React.createElement("span", { "data-testid": "Key", className: props.className, style: {
+    return (React.createElement("span", { "data-testid": props['data-testid'] || "Key", className: props.className, style: {
             maxWidth: wide ? 'auto' : '16px',
             minWidth: wide ? '36px' : 'auto'
         }, "aria-label": props.value },

package/controls/LinearChart/LinearChart.d.ts

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

package/controls/LinearChart/LinearChart.js

@@ -29,7 +29,7 @@ import styled from 'styled-components';
 import { Ghost } from '../Ghost';
 var LinearChartBase = function (props) {
     var percentage = Math.round(Math.max(0, Math.min(100, props.value))) + "%";
-    return (React.createElement("div", { "data-testid": "LinearChart", className: props.className, role: "progressbar", "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": Math.round(props.value) },
+    return (React.createElement("div", { "data-testid": props['data-testid'] || "LinearChart", className: props.className, role: "progressbar", "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": Math.round(props.value) },
         props.label && React.createElement(Label, null,
             props.ghost && React.createElement(Ghost, { style: { position: 'absolute', left: 0, top: '2px', right: 0, bottom: '2px' } }),
             !props.ghost && props.label),

package/controls/ListButton/ListButton.d.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { Placement } from '@popperjs/core';
-interface IListButtonProps {
+import { ITestable } from '../../Types';
+interface IListButtonProps extends ITestable {
     /** @ignore */
     children?: React.ReactNode;
     /** Toggle control that opens/closes the list. Receives an `onClick` handler. */

package/controls/ListButton/ListButton.js

@@ -59,7 +59,7 @@ var ListButtonBase = function (props) {
             update();
     };
     return (React.createElement(React.Fragment, null,
-        React.createElement("div", { "data-testid": "ListButton", ref: buttonRef, style: { display: 'inline-block' } }, React.cloneElement(props.toggle, { onClick: toggleOpen })),
+        React.createElement("div", { "data-testid": props['data-testid'] || "ListButton", ref: buttonRef, style: { display: 'inline-block' } }, React.cloneElement(props.toggle, { onClick: toggleOpen })),
         createPortal(React.createElement(Pane, __assign({ "$open": open, "$width": props.width, style: styles.popper }, attributes.popper, { ref: paneRef }), open && React.createElement(List, { maxItems: 6, contract: 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/controls/ListView/ListView.d.ts

@@ -1,7 +1,8 @@
 import * as React from 'react';
 import { IColumnProps } from './Column';
 import { IListViewProps } from './IListViewProps';
-interface IProps extends IListViewProps {
+import { ITestable } from '../../Types';
+interface IProps extends IListViewProps, ITestable {
     /**
      * Column specifications. These are a set of `Column` children,
      * each of which set a column name, width, sort key and sort direction, and

package/controls/ListView/ListView.js

@@ -120,7 +120,7 @@ var ListViewBase = function (props) {
     if (props.ghost) {
         return React.createElement(Ghost, __assign({}, otherProps, { columns: columns }));
     }
-    return (React.createElement(Table, __assign({ "data-testid": "ListView" }, otherProps, { data: data, columns: columns, sort: sort, reverse: reverse, onSortClick: handleSort, columnsMode: columnsMode, onOpenColumns: handleColumns, onCheck: props.onCheck ? handleCheck : null, onChangeColumns: handleChangeColumns, onCloseColumns: function () { return setColumnsMode(false); }, onResetColumns: handleResetColumns })));
+    return (React.createElement(Table, __assign({ "data-testid": props['data-testid'] || "ListView" }, otherProps, { data: data, columns: columns, sort: sort, reverse: reverse, onSortClick: handleSort, columnsMode: columnsMode, onOpenColumns: handleColumns, onCheck: props.onCheck ? handleCheck : null, onChangeColumns: handleChangeColumns, onCloseColumns: function () { return setColumnsMode(false); }, onResetColumns: handleResetColumns })));
 };
 /**
  * A data table with sorting, column management, virtualization, and row selection.

package/controls/Mouse/Mouse.d.ts

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

package/controls/Mouse/Mouse.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 MouseBase = function (props) {
-    return (React.createElement("svg", { "data-testid": "Mouse", className: props.className, viewBox: "3 0 22 29", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" // Hide from assistive tech (for non-interactive icons)
+    return (React.createElement("svg", { "data-testid": props['data-testid'] || "Mouse", className: props.className, viewBox: "3 0 22 29", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" // Hide from assistive tech (for non-interactive icons)
         , focusable: "false" },
         React.createElement("path", { d: "M14 1.75623C8.69307 1.75623 4.375 6.07429 4.375 11.3812V18.3812C4.375 23.6882 8.69307 28.0062 14 28.0062C19.3069 28.0062 23.625 23.6882 23.625 18.3812V11.3812C23.625 6.07429 19.3069 1.75623 14 1.75623ZM21.875 11.3812V12.2562H16.625V10.5062C16.625 9.36653 15.8911 8.40403 14.875 8.04199V3.55756C18.806 3.99506 21.875 7.33546 21.875 11.3812ZM14 9.63123C14.4834 9.63123 14.875 10.0239 14.875 10.5062V13.1312C14.875 13.6136 14.4834 14.0062 14 14.0062C13.5166 14.0062 13.125 13.6136 13.125 13.1312V10.5062C13.125 10.0239 13.5166 9.63123 14 9.63123ZM6.125 11.3812C6.125 7.33546 9.19403 3.99389 13.125 3.55779V8.04223C12.1089 8.40427 11.375 9.36677 11.375 10.5065V12.2565H6.125V11.3812ZM14 26.2562C9.65767 26.2562 6.125 22.7236 6.125 18.3812V14.0062H11.5358C11.8978 15.0223 12.8603 15.7562 14 15.7562C15.1397 15.7562 16.1022 15.0223 16.4642 14.0062H21.875V18.3812C21.875 22.7236 18.3423 26.2562 14 26.2562Z", fill: props.color }),
         props.left && React.createElement("path", { className: "left", d: "M13.125 3.55798C9.19403 3.99408 6.125 7.33565 6.125 11.3814V12.2567H11.375V10.5067C11.375 9.36696 12.1089 8.40446 13.125 8.04242V3.55798Z" }),

package/controls/PrimaryButton/PrimaryButton.d.ts

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

package/controls/PrimaryButton/PrimaryButton.js

@@ -40,7 +40,7 @@ var PrimaryButtonBase = function (props) {
         // An IIconProps was provided. Use it as the props for the icon.
         return React.createElement(Icon, __assign({ color: theme.colors.neutral[100] }, props.icon));
     };
-    return (React.createElement("button", { "data-testid": "PrimaryButton", className: props.className, type: "button", onClick: props.onClick, title: props.title, "aria-disabled": props.disabled, disabled: props.disabled },
+    return (React.createElement("button", { "data-testid": props['data-testid'] || "PrimaryButton", className: props.className, type: "button", onClick: props.onClick, title: props.title, "aria-disabled": props.disabled, disabled: props.disabled },
         icon(),
         props.children));
 };

package/controls/Progress/Progress.d.ts

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

package/controls/Progress/Progress.js

@@ -34,7 +34,7 @@ var getClampedValue = function (value) {
     return Math.round(Math.min(100, Math.max(0, value)));
 };
 var ProgressBase = function (props) {
-    return React.createElement("div", { "data-testid": "Progress", className: props.className, role: "progressbar", "aria-valuenow": getClampedValue(props.value), "aria-valuemin": 0, "aria-valuemax": 100 },
+    return React.createElement("div", { "data-testid": props['data-testid'] || "Progress", className: props.className, role: "progressbar", "aria-valuenow": getClampedValue(props.value), "aria-valuemin": 0, "aria-valuemax": 100 },
         React.createElement(FillOuter, null,
             React.createElement(FillInner, { style: { transform: "scaleX(".concat(getClampedValue(props.value) / 100, ")") } })),
         props.numbered && React.createElement(Value, null, "".concat(getClampedValue(props.value), "%")));

package/controls/SecondaryButton/SecondaryButton.d.ts

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

package/controls/SecondaryButton/SecondaryButton.js

@@ -29,7 +29,7 @@ import styled, { css, useTheme } from 'styled-components';
 import { Icon } from '../Icon';
 var SecondaryButtonBase = function (props) {
     var theme = useTheme();
-    return (React.createElement("button", { "data-testid": "SecondaryButton", type: "button", className: props.className, disabled: props.disabled, onClick: props.onClick, title: props.title, "aria-label": props.title },
+    return (React.createElement("button", { "data-testid": props['data-testid'] || "SecondaryButton", type: "button", className: props.className, disabled: props.disabled, onClick: props.onClick, title: props.title, "aria-label": props.title },
         React.createElement(Icon, __assign({ color: theme.colors.neutral[100] }, (typeof props.icon === 'string' ? { url: props.icon } : props.icon)))));
 };
 // 

package/controls/TabBar/Tab.d.ts

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

package/controls/TabBar/Tab.js

@@ -32,7 +32,7 @@ var TabBase = React.forwardRef(function (props, ref) {
         if (props.onClick)
             props.onClick();
     };
-    return (React.createElement("div", { "data-testid": "TabBar.Tab", className: props.className, role: "tab", "aria-selected": props.active, ref: ref, onClick: handleClick },
+    return (React.createElement("div", { "data-testid": props['data-testid'] || "TabBar.Tab", className: props.className, role: "tab", "aria-selected": props.active, ref: ref, onClick: handleClick },
         props.ghost && React.createElement(Ghost, { style: { position: 'absolute', left: '5px', top: '9px', right: '5px', bottom: '9px', zIndex: 100 } }),
         React.createElement(Content, null,
             props.children,

package/controls/TabBar/TabBar.d.ts

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

package/controls/TabBar/TabBar.js

@@ -190,7 +190,7 @@ var TabBarBase = function (props) {
         setActive(idx);
         (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, idx);
     };
-    return (React.createElement("div", { "data-testid": "TabBar", className: props.className, ref: barRef, "aria-orientation": "horizontal" },
+    return (React.createElement("div", { "data-testid": props['data-testid'] || "TabBar", className: props.className, ref: barRef, "aria-orientation": "horizontal" },
         React.createElement(Slider, { ref: sliderRef, onMouseDown: handleMouseDown },
             React.Children.map(props.children, function (child, idx) {
                 return React.cloneElement(child, {

package/controls/TertiaryButton/TertiaryButton.d.ts

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

package/controls/TertiaryButton/TertiaryButton.js

@@ -39,7 +39,7 @@ var TertiaryButtonBase = React.forwardRef(function (props, ref) {
         // An IIconProps was provided. Use it as the props for the icon.
         return React.createElement(Icon, __assign({ color: props.primary ? theme.colors.neutral[100] : theme.colors.primary[3] }, props.icon));
     };
-    return (React.createElement("button", { "data-testid": "TertiaryButton", ref: ref, className: props.className, type: "button", disabled: props.disabled, onClick: props.onClick },
+    return (React.createElement("button", { "data-testid": props['data-testid'] || "TertiaryButton", ref: ref, className: props.className, type: "button", disabled: props.disabled, onClick: props.onClick },
         icon(),
         props.children));
 });

package/controls/ToggleButton/ToggleButton.d.ts

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

package/controls/ToggleButton/ToggleButton.js

@@ -28,7 +28,7 @@ import * as React from 'react';
 import styled, { css } from 'styled-components';
 import { Icon } from '../Icon';
 var ToggleButtonBase = React.forwardRef(function (props, ref) {
-    return React.createElement("button", { "data-testid": "ToggleButton", className: props.className, ref: ref, type: "button", onClick: props.onClick, title: props.title, disabled: props.disabled, "aria-pressed": props.active, "aria-expanded": props.open, "aria-disabled": props.disabled },
+    return React.createElement("button", { "data-testid": props['data-testid'] || "ToggleButton", className: props.className, ref: ref, type: "button", onClick: props.onClick, title: props.title, disabled: props.disabled, "aria-pressed": props.active, "aria-expanded": props.open, "aria-disabled": props.disabled },
         React.createElement(Icon, { url: props.url }));
 });
 var ToggleButtonStyled = styled(ToggleButtonBase).attrs(function (p) {

package/controls/View/View.d.ts

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

package/controls/View/View.js

@@ -31,7 +31,7 @@ import { ScrollingContent } from './ScrollingContent';
 import { EllipsizedContent } from './EllipsizedContent';
 import { Ghost } from '../Ghost';
 var ViewBase = function (props) {
-    return React.createElement("div", { "data-testid": "View", className: props.className },
+    return React.createElement("div", { "data-testid": props['data-testid'] || "View", className: props.className },
         props.ghost && React.createElement(Ghost, { style: { position: 'absolute', left: 0, top: 0, right: 0, bottom: 0, zIndex: 100 } }),
         React.createElement(Label, null, props.badge ? (React.createElement(BadgeWrapper, null,
             props.label,

package/inputs/DateInput/DateInput.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
-interface IDateInputProps {
+import { ITestable } from '../../Types';
+interface IDateInputProps extends ITestable {
     /** @ignore */
     className?: string;
     /**
@@ -64,10 +65,6 @@ 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/Dropdown/Dropdown.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
-interface IDropdownProps {
+import { ITestable } from '../../Types';
+interface IDropdownProps extends ITestable {
     /** @ignore */
     className?: string;
     /** @ignore */
@@ -112,10 +113,6 @@ 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/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;
     /**
@@ -65,10 +66,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/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) {