colibri-ui 0.8.98 → 0.8.99

package/Status/index.js

@@ -16,8 +16,10 @@ const Status = ({
   showIndicator = true,
   tag: Component = "span",
   children,
-  type
+  type,
+  "data-testid": testId
 }) => (/*#__PURE__*/React__default.default.createElement(Component, {
+  "data-testid": testId,
   className: clsx__default.default(styles__default.default.root, {
     [styles__default.default[`root_${type}`]]: Boolean(type)
   }, className)

package/Status/index.props.d.ts

@@ -1,4 +1,5 @@
 import type { ReactNode } from "react";
+import type { TestIdProps } from "../helpers/testId";
 export type StatusTag = "span" | "div";
 export declare enum STATUS_TYPE {
     SUCCESS = "success",
@@ -6,7 +7,7 @@ export declare enum STATUS_TYPE {
     INFO = "info",
     WARNING = "warning"
 }
-export type StatusProps = {
+export type StatusProps = TestIdProps & {
     className?: string;
     indicator?: ReactNode;
     showIndicator?: boolean;

package/TextArea/index.js

@@ -53,7 +53,6 @@ const TextArea = _a => {
     hasError: hasError
   }, /*#__PURE__*/React__default.default.createElement(TextareaAutosize__default.default, Object.assign({
     ref: inputRef,
-    "data-testid": "textarea",
     disabled: disabled,
     minRows: minRows,
     maxRows: maxRows,

package/TimeSelect/index.js

@@ -29,7 +29,8 @@ const TimeSelect = ({
   zIndex,
   hasError,
   hint,
-  "aria-label": ariaLabel
+  "aria-label": ariaLabel,
+  "data-testid": testId
 }) => {
   const baseOptions = React.useMemo(() => helpers.generateSuggest(interval).map(item => ({
     value: item.time,
@@ -45,6 +46,7 @@ const TimeSelect = ({
   }), [baseOptions, currentDate, selectedDate, allowedTimeRange, interval]);
   return /*#__PURE__*/React__default.default.createElement(index$1.Select, {
     "aria-label": ariaLabel,
+    "data-testid": testId,
     className: className,
     customInputRoot: customInputRoot,
     fontSize: fontSize,

package/Tooltip/index.js

@@ -18,7 +18,8 @@ const Tooltip = ({
   withTail = false,
   placement = "bottom",
   strategy = "absolute",
-  className
+  className,
+  "data-testid": testId
 }) => {
   const [isOpen, setIsOpen] = React.useState(false);
   const arrowRef = React.useRef(null);
@@ -66,6 +67,7 @@ const Tooltip = ({
     ref: refs.setFloating
   }, getFloatingProps(), {
     className: clsx__default.default(styles__default.default.tooltip, className),
+    "data-testid": testId,
     style: Object.assign(Object.assign({}, floatingStyles), {
       zIndex
     })

package/Tooltip/index.props.d.ts

@@ -1,6 +1,7 @@
 import type { Placement, Strategy } from "@floating-ui/react";
 import type { ReactNode } from "react";
-export type TooltipProps = {
+import type { PopupTestIdProps } from "../helpers/testId";
+export type TooltipProps = PopupTestIdProps & {
     content: ReactNode;
     zIndex?: number;
     placement?: Placement;

package/base/FormField/index.d.ts

@@ -1,3 +1,3 @@
 import React from "react";
 import type { FormFieldProps } from "./index.props";
-export declare const FormField: ({ label, hint, children, hasError, hintId, htmlFor, labelId, required, className, ref, }: FormFieldProps) => React.JSX.Element;
+export declare const FormField: ({ label, hint, children, hasError, hintId, htmlFor, labelId, required, className, ref, "data-testid": testId, }: FormFieldProps) => React.JSX.Element;

package/base/FormField/index.js

@@ -21,10 +21,12 @@ const FormField = ({
   labelId,
   required,
   className,
-  ref
+  ref,
+  "data-testid": testId
 }) => (/*#__PURE__*/React__default.default.createElement("div", {
   className: clsx__default.default(styles__default.default.container, className),
-  ref: ref
+  ref: ref,
+  "data-testid": testId
 }, label && (/*#__PURE__*/React__default.default.createElement(index.Typography, {
   className: clsx__default.default(styles__default.default.label, {
     [styles__default.default.label_required]: Boolean(required)

package/base/FormField/index.props.d.ts

@@ -1,6 +1,7 @@
 import type { ReactNode } from "react";
 import type { PropsWithChildren } from "react";
-export type FormFieldProps = PropsWithChildren<{
+import type { TestIdProps } from "../../helpers/testId";
+export type FormFieldProps = PropsWithChildren<TestIdProps & {
     className?: string;
     hasError?: boolean;
     hint?: ReactNode;

package/esm/Accordion/index.js

@@ -11,7 +11,8 @@ const Accordion = ({
   children,
   className,
   tabIndex,
-  defaultOpen = false
+  defaultOpen = false,
+  "data-testid": testId
 }) => {
   const [isOpen, setIsOpen] = useState(defaultOpen);
   const contentRef = useRef(null);
@@ -35,7 +36,8 @@ const Accordion = ({
     return () => observer.disconnect();
   }, [isOpen]);
   return /*#__PURE__*/React.createElement("div", {
-    className: clsx(styles.root, className)
+    className: clsx(styles.root, className),
+    "data-testid": testId
   }, /*#__PURE__*/React.createElement("div", {
     className: styles.header
   }, /*#__PURE__*/React.createElement("button", {

package/esm/Accordion/index.props.d.ts

@@ -1,5 +1,6 @@
 import type { PropsWithChildren, ReactNode } from "react";
-export type AccordionProps = PropsWithChildren<{
+import type { TestIdProps } from "../helpers/testId";
+export type AccordionProps = PropsWithChildren<TestIdProps & {
     title: ReactNode;
     className?: string;
     boldTitle?: boolean;

package/esm/Avatar/index.js

@@ -84,7 +84,6 @@ const Avatar = /*#__PURE__*/memo(props => {
       })
     }, onClick && roleProps), /*#__PURE__*/React.createElement("img", Object.assign({
       ref: ref,
-      "data-testid": "avatar",
       alt: alt,
       src: src,
       className: clsx(styles.avatar, {
@@ -94,8 +93,7 @@ const Avatar = /*#__PURE__*/memo(props => {
   }
   if (hasInitials) {
     return /*#__PURE__*/React.createElement("span", Object.assign({
-      ref: ref,
-      "data-testid": "avatar"
+      ref: ref
     }, roleProps, {
       className: clsx(styles["avatar-initials"], {
         [styles["avatar-bordered"]]: Boolean(bordered),
@@ -106,8 +104,7 @@ const Avatar = /*#__PURE__*/memo(props => {
     }, initials.trim().slice(0, 2)));
   }
   return /*#__PURE__*/React.createElement("span", Object.assign({
-    ref: ref,
-    "data-testid": "avatar"
+    ref: ref
   }, roleProps, {
     className: clsx(styles["avatar-stub"], {
       [styles["avatar-bordered"]]: Boolean(bordered),

package/esm/Avatar/index.props.d.ts

@@ -1,9 +1,10 @@
 import type { AvatarSize } from "./constants";
+import type { TestIdProps } from "../helpers/testId";
 export declare enum AccountType {
     Person = "person",
     Organization = "org"
 }
-export type AvatarProps = {
+export type AvatarProps = TestIdProps & {
     accountType?: AccountType;
     alt?: string;
     size?: AvatarSize;

package/esm/Badge/Control/index.props.d.ts

@@ -1,3 +1,4 @@
-export interface ControlProps {
+import type { TestIdProps } from "../../helpers/testId";
+export interface ControlProps extends TestIdProps {
     className?: string;
 }

package/esm/Badge/index.js

@@ -24,8 +24,7 @@ const Badge = _a => {
     className: clsx(styles.root, {
       [styles[`root_direction_${direction}`]]: Boolean(direction),
       [styles["root_invisible"]]: Boolean(invisible)
-    }, className),
-    "data-testid": "badge"
+    }, className)
   }, displayValue)));
 };
 

package/esm/Button/index.js

@@ -30,7 +30,6 @@ const Button = _a => {
       [styles[`variant_${variant}_disabled`]]: Boolean(disabled)
     }, className),
     disabled: disabled,
-    "data-testid": "button",
     type: type || "button"
   }, props), icon && /*#__PURE__*/React.createElement("span", {
     className: styles.icon

package/esm/Checkbox/index.js

@@ -16,9 +16,11 @@ const Checkbox = ({
   variant = "primary",
   className,
   disabled,
-  hasError
+  hasError,
+  "data-testid": testId
 }) => (/*#__PURE__*/React.createElement("div", {
-  className: styles.root
+  className: styles.root,
+  "data-testid": testId
 }, /*#__PURE__*/React.createElement("label", {
   className: styles.label,
   htmlFor: id

package/esm/Checkbox/index.props.d.ts

@@ -1,5 +1,6 @@
 import type { FocusEvent, ChangeEvent, ReactNode } from "react";
-export interface CheckboxProps {
+import type { TestIdProps } from "../helpers/testId";
+export interface CheckboxProps extends TestIdProps {
     checked?: boolean;
     className?: string;
     disabled?: boolean;

package/esm/Chip/index.js

@@ -11,13 +11,11 @@ const Chip = _a => {
       onClick,
       onClickIcon,
       size = "m",
-      testID = "chip",
       variant = "primary"
     } = _a,
-    props = __rest(_a, ["children", "iconEnd", "isActive", "onClick", "onClickIcon", "size", "testID", "variant"]);
+    props = __rest(_a, ["children", "iconEnd", "isActive", "onClick", "onClickIcon", "size", "variant"]);
   return /*#__PURE__*/React.createElement("span", Object.assign({
-    className: styles.chip,
-    "data-testid": testID
+    className: styles.chip
   }, props), /*#__PURE__*/React.createElement("span", {
     className: clsx(styles.inner, styles[`inner_variant_${variant}`], {
       [styles["inner_active"]]: iconEnd || isActive,

package/esm/Chip/index.props.d.ts

@@ -1,9 +1,9 @@
+import type { TestIdProps } from "../helpers/testId";
 export type ChipSize = "s" | "m" | "l";
 export type ChipVariant = "primary" | "secondary" | "outline" | "pseudo" | "alert" | "success" | "clear";
-export type ChipProps = {
+export type ChipProps = TestIdProps & {
     size?: ChipSize;
     variant?: ChipVariant;
-    testID?: string;
     isActive?: boolean;
     iconEnd?: React.ReactNode;
     onClick?: () => void;

package/esm/ColorPicker/ColorPicker.d.ts

@@ -1,3 +1,3 @@
 import React from "react";
 import type { ColorPickerProps } from "./index.props";
-export declare const ColorPicker: ({ value, onChange, presets, columns, disabled, placement, zIndex, labels: labelsProp, children, }: ColorPickerProps) => React.JSX.Element;
+export declare const ColorPicker: ({ value, onChange, presets, columns, disabled, placement, zIndex, labels: labelsProp, children, "data-testid": testId, }: ColorPickerProps) => React.JSX.Element;

package/esm/ColorPicker/ColorPicker.js

@@ -23,7 +23,8 @@ const ColorPicker = ({
   placement = "bottom-start",
   zIndex,
   labels: labelsProp,
-  children
+  children,
+  "data-testid": testId
 }) => {
   var _a, _b;
   const [isOpen, setOpen] = useState(false);
@@ -77,7 +78,8 @@ const ColorPicker = ({
   }));
   return /*#__PURE__*/React.createElement("span", {
     ref: rootRef,
-    className: styles.root
+    className: styles.root,
+    "data-testid": testId
   }, /*#__PURE__*/React.createElement(Dropdown, {
     trigger: ["click"],
     visible: isOpen,

package/esm/ColorPicker/index.props.d.ts

@@ -1,5 +1,6 @@
 import type { ReactElement } from "react";
 import type { Placement } from "@floating-ui/react";
+import type { TestIdProps } from "../helpers/testId";
 export interface ColorPickerPreset {
     /** HEX color, for example `#d81b60`. */
     value: string;
@@ -24,7 +25,7 @@ export interface ColorPickerLabels {
     cancel: string;
     save: string;
 }
-export interface ColorPickerProps {
+export interface ColorPickerProps extends TestIdProps {
     /** Current color in HEX. A color missing from `presets` is shown as an extra swatch. */
     value?: string;
     /** Called with the chosen color as lowercase `#rrggbb`. */

package/esm/Counter/index.js

@@ -12,7 +12,8 @@ const Counter = ({
   fullWidth,
   onChange,
   disabled,
-  className
+  className,
+  "data-testid": testId
 }) => {
   const minusDisabled = disabled || value <= min;
   const plusDisabled = disabled || value >= max;
@@ -25,7 +26,8 @@ const Counter = ({
   return /*#__PURE__*/React.createElement("div", {
     className: clsx(styles.root, {
       [styles["root_fullWidth"]]: Boolean(fullWidth)
-    }, className)
+    }, className),
+    "data-testid": testId
   }, /*#__PURE__*/React.createElement("div", {
     className: clsx(styles.control, {
       [styles["control_fullWidth"]]: Boolean(fullWidth)

package/esm/Counter/index.props.d.ts

@@ -1,4 +1,5 @@
-export type CounterProps = {
+import type { TestIdProps } from "../helpers/testId";
+export type CounterProps = TestIdProps & {
     value: number;
     max: number;
     min: number;

package/esm/Datepicker/index.d.ts

@@ -1,3 +1,3 @@
 import React from "react";
 import type { Props } from "./index.props";
-export declare const Datepicker: ({ className, disabled, endPlaceholder, hasError, hint, label, placeholder, required, selectedDate, selectedRange, selectionMode, size, startPlaceholder, onChangeDate, onChangeRange, ...calendarProps }: Props) => React.JSX.Element;
+export declare const Datepicker: ({ className, disabled, endPlaceholder, hasError, hint, label, placeholder, required, selectedDate, selectedRange, selectionMode, size, startPlaceholder, onChangeDate, onChangeRange, "data-testid": testId, ...calendarProps }: Props) => React.JSX.Element;

package/esm/Datepicker/index.js

@@ -20,11 +20,13 @@ const Datepicker = _a => {
       size = "m",
       startPlaceholder,
       onChangeDate,
-      onChangeRange
+      onChangeRange,
+      "data-testid": testId
     } = _a,
-    calendarProps = __rest(_a, ["className", "disabled", "endPlaceholder", "hasError", "hint", "label", "placeholder", "required", "selectedDate", "selectedRange", "selectionMode", "size", "startPlaceholder", "onChangeDate", "onChangeRange"]);
+    calendarProps = __rest(_a, ["className", "disabled", "endPlaceholder", "hasError", "hint", "label", "placeholder", "required", "selectedDate", "selectedRange", "selectionMode", "size", "startPlaceholder", "onChangeDate", "onChangeRange", "data-testid"]);
   return /*#__PURE__*/React.createElement("div", {
-    className: clsx(styles.root, className)
+    className: clsx(styles.root, className),
+    "data-testid": testId
   }, /*#__PURE__*/React.createElement(DatePicker, Object.assign({}, calendarProps, {
     disabled: disabled,
     endPlaceholder: endPlaceholder,

package/esm/Datepicker/index.props.d.ts

@@ -1,10 +1,11 @@
 import type { ReactNode } from "react";
 import type { CalendarCommonProps } from "../Calendar";
+import type { TestIdProps } from "../helpers/testId";
 export type DatepickerSize = "s" | "m" | "l";
 export type DatepickerSelectionMode = "single" | "range";
 export type DatepickerRangeValue = [string, string];
 export type DatepickerCalendarProps = Omit<CalendarCommonProps, "className" | "size">;
-export type Props = DatepickerCalendarProps & {
+export type Props = DatepickerCalendarProps & TestIdProps & {
     className?: string;
     disabled?: boolean;
     endPlaceholder?: string;

package/esm/DotsLoader/index.js

@@ -2,8 +2,11 @@ import React from 'react';
 import clsx from 'clsx';
 import styles from './DotsLoader.module.css';
 
-const DotsLoader = () => (/*#__PURE__*/React.createElement("div", {
-  className: styles.wrapper
+const DotsLoader = ({
+  "data-testid": testId
+}) => (/*#__PURE__*/React.createElement("div", {
+  className: styles.wrapper,
+  "data-testid": testId
 }, /*#__PURE__*/React.createElement("div", {
   className: clsx({
     [styles.dot]: true,

package/esm/DotsLoader/index.props.d.ts

@@ -1 +1,2 @@
-export type DotsLoaderProps = Record<string, never>;
+import type { TestIdProps } from "../helpers/testId";
+export type DotsLoaderProps = TestIdProps;

package/esm/Dropdown/index.js

@@ -6,6 +6,7 @@ import styles from './Dropdown.module.css';
 
 const Dropdown = ({
   children,
+  "data-testid": testId,
   zIndex,
   fontSize,
   disabled,
@@ -87,7 +88,7 @@ const Dropdown = ({
     onClick: () => setOpen(false)
   }, /*#__PURE__*/React.createElement("div", Object.assign({
     ref: refs.setFloating,
-    "data-testid": "popper-container",
+    "data-testid": testId,
     className: clsx(styles["popper-container"], styles[`placement-${finalPlacement}`]),
     style: Object.assign(Object.assign({}, floatingStyles), {
       zIndex,
@@ -97,7 +98,6 @@ const Dropdown = ({
     role: "menu",
     tabIndex: 0
   }, getFloatingProps()), /*#__PURE__*/React.createElement("div", {
-    "data-testid": "overlay-container",
     className: styles["overlay-container"],
     onClick: onClickOverlay
   }, overlay))))));

package/esm/Dropdown/index.props.d.ts

@@ -1,7 +1,8 @@
 import type { ReactNode } from "react";
 import type { Placement, Strategy } from "@floating-ui/react";
+import type { PopupTestIdProps } from "../helpers/testId";
 export type Trigger = "click" | "hover" | "focus";
-export type DropdownProps = {
+export type DropdownProps = PopupTestIdProps & {
     defaultVisible?: boolean;
     disabled?: boolean;
     flip?: boolean;

package/esm/Grid/index.js

@@ -8,9 +8,11 @@ const Grid = ({
   gridRowGap = "6",
   gridColumnGap = "4",
   gridItemMinWidth = "var(--component-grid-item-min-width)",
-  className
+  className,
+  "data-testid": testId
 }) => (/*#__PURE__*/React.createElement("div", {
   className: clsx(styles.root, className),
+  "data-testid": testId,
   style: {
     rowGap: `var(--space-${gridRowGap})`,
     columnGap: `var(--space-${gridColumnGap})`,

package/esm/Grid/index.props.d.ts

@@ -1,5 +1,6 @@
+import type { TestIdProps } from "../helpers/testId";
 export type Space = "0" | "1" | "2" | "3" | "4" | "5" | "6" | "8" | "10" | "12" | "16" | "20" | "24" | "32";
-export type GridProps = {
+export type GridProps = TestIdProps & {
     className?: string;
     gridRowGap?: Space;
     gridColumnGap?: Space;

package/esm/InputRadio/index.js

@@ -23,9 +23,9 @@ const InputRadio = /*#__PURE__*/memo(_a => {
       style,
       text,
       value,
-      testid
+      "data-testid": testId
     } = _a,
-    rest = __rest(_a, ["checked", "children", "className", "containerClassName", "disabled", "error", "id", "name", "note", "onBlur", "onFocus", "onChange", "onClick", "onMouseEnter", "style", "text", "value", "testid"]);
+    rest = __rest(_a, ["checked", "children", "className", "containerClassName", "disabled", "error", "id", "name", "note", "onBlur", "onFocus", "onChange", "onClick", "onMouseEnter", "style", "text", "value", "data-testid"]);
   return (
     /*#__PURE__*/
     // Keyboard activation of the nested radio dispatches a click that bubbles to the label.
@@ -36,7 +36,7 @@ const InputRadio = /*#__PURE__*/memo(_a => {
       style: style,
       onClick: onClick,
       onMouseEnter: onMouseEnter,
-      "data-testid": testid
+      "data-testid": testId
     }, /*#__PURE__*/React.createElement("div", {
       className: clsx(styles.container, {
         [styles["container_disabled"]]: Boolean(disabled),

package/esm/InputRadio/index.props.d.ts

@@ -1,5 +1,6 @@
 import type { ChangeEvent, CSSProperties, FocusEvent, PropsWithChildren } from "react";
-export type InputRadioProps = PropsWithChildren<{
+import type { TestIdProps } from "../helpers/testId";
+export type InputRadioProps = PropsWithChildren<TestIdProps & {
     checked?: boolean;
     className?: string;
     containerClassName?: string;
@@ -16,5 +17,4 @@ export type InputRadioProps = PropsWithChildren<{
     style?: CSSProperties;
     text?: string;
     value: string | number;
-    testid?: string;
 }>;

package/esm/Menu/components/MenuItem/index.js

@@ -25,7 +25,6 @@ const MenuItem = _a => {
     ref: ref,
     role: "menuitem",
     tabIndex: disabled ? -1 : 0,
-    "data-testid": "menuitem",
     "aria-disabled": disabled || undefined,
     className: clsx(styles.item, {
       [styles["item_disabled"]]: Boolean(disabled),

package/esm/Menu/components/MenuItem/index.props.d.ts

@@ -1,6 +1,7 @@
 import type { KeyboardEvent, MouseEvent } from "react";
 import type { MenuVariant } from "../../index.props";
-export interface MenuItemProps {
+import type { TestIdProps } from "../../../helpers/testId";
+export interface MenuItemProps extends TestIdProps {
     className?: string;
     isSelected?: boolean;
     onClick?: (event: MouseEvent<Element> | KeyboardEvent<Element>) => void;

package/esm/Menu/index.d.ts

@@ -1,3 +1,3 @@
 import React from "react";
 import type { Props } from "./index.props";
-export declare const Menu: ({ selected, variant, className, onClick, children, ref, }: Props) => React.JSX.Element;
+export declare const Menu: ({ selected, variant, className, onClick, children, ref, "data-testid": testId, }: Props) => React.JSX.Element;

package/esm/Menu/index.js

@@ -8,7 +8,8 @@ const Menu = ({
   className,
   onClick,
   children,
-  ref
+  ref,
+  "data-testid": testId
 }) => {
   const renderChild = useMemo(() => Children.map(children, child => {
     if (! /*#__PURE__*/isValidElement(child)) return child;
@@ -28,7 +29,8 @@ const Menu = ({
   return /*#__PURE__*/React.createElement("ul", {
     ref: ref,
     className: clsx(styles.menu, className),
-    role: "menu"
+    role: "menu",
+    "data-testid": testId
   }, renderChild);
 };
 

package/esm/Menu/index.props.d.ts

@@ -1,7 +1,8 @@
 import type { ReactElement, KeyboardEvent, MouseEvent } from "react";
 import type { MenuItemProps } from "./components/MenuItem/index.props";
+import type { TestIdProps } from "../helpers/testId";
 export type MenuVariant = "primary";
-export type Props = {
+export type Props = TestIdProps & {
     selected?: string[];
     variant?: MenuVariant;
     className?: string;

package/esm/Modal/index.js

@@ -23,7 +23,8 @@ const ModalRoot = ({
   onClose,
   title,
   withinParent = false,
-  fillParent = false
+  fillParent = false,
+  "data-testid": testId
 }) => {
   const [dialog, setDialog] = useState(null);
   const [container, setContainer] = useState(null);
@@ -91,6 +92,7 @@ const ModalRoot = ({
     ref: setDialog,
     role: "dialog",
     "aria-modal": "true",
+    "data-testid": testId,
     tabIndex: -1,
     "aria-labelledby": titleCount > 0 ? titleId : undefined
   }, /*#__PURE__*/React.createElement("div", {

package/esm/Modal/index.props.d.ts

@@ -1,5 +1,6 @@
 import type { HTMLAttributes } from "react";
-export type ModalProps = {
+import type { TestIdProps } from "../helpers/testId";
+export type ModalProps = TestIdProps & {
     className?: string;
     onClose?: () => void;
     /**

package/esm/MultiSelect/index.js

@@ -32,7 +32,8 @@ const MultiSelect = ({
   value = [],
   type,
   onChange,
-  "aria-label": ariaLabel
+  "aria-label": ariaLabel,
+  "data-testid": testId
 }) => {
   const [isOpen, setIsOpen] = useState(false);
   const id = useId();
@@ -72,6 +73,7 @@ const MultiSelect = ({
     })
   }))), [preparedGroups]);
   return /*#__PURE__*/React.createElement(FormField, {
+    "data-testid": testId,
     className: clsx(styles["form-field"], {
       [styles["full-width"]]: Boolean(fullWidth)
     }, className),

package/esm/RadioGroup/Radio.js

@@ -14,7 +14,7 @@ const Radio = ({
   onMouseEnter,
   className,
   disabled = false,
-  testId
+  "data-testid": testId
 }) => (/*#__PURE__*/React.createElement(InputRadio, {
   id: id,
   value: value,
@@ -28,7 +28,7 @@ const Radio = ({
   name: name,
   className: className,
   disabled: disabled,
-  testid: testId
+  "data-testid": testId
 }));
 
 export { Radio };

package/esm/RadioGroup/index.js

@@ -32,7 +32,7 @@ const RadioGroup = /*#__PURE__*/memo(({
   return /*#__PURE__*/React.createElement(Radio, {
     key: optionVal,
     id: id,
-    testId: id,
+    "data-testid": id,
     value: optionVal,
     text: text,
     note: note,

package/esm/RadioGroup/index.props.d.ts

@@ -34,5 +34,5 @@ export type RadioProps = {
     onMouseEnter?: (event: React.MouseEvent<HTMLLabelElement, MouseEvent>) => void;
     className: string;
     disabled?: boolean;
-    testId?: string;
+    "data-testid"?: string;
 };