hrm_ui_lib 3.4.2 → 4.0.1

package/components/Alert/Alert.js

@@ -6,6 +6,6 @@ import { Button } from '../Button';
 import IconDismissFilled from '../SVGIcons/IconDismissFilled';
 import { IconDynamicComponent } from '../../helperComponents/IconDynamicComponent';
 export const Alert = (props) => {
-    const { buttonProps, type = 'information', position = 'inline', text, subtext, closeIcon, onClose, className = '', dataId = '' } = props;
-    return (_jsx("div", { className: classnames('alert', `alert--${type} alert--${position}`, className), "data-id": dataId, children: _jsxs("div", { className: "alert__content", children: [_jsx(IconDynamicComponent, { Component: ICONS_MAPPING[type], size: "small", type: TYPE_MAPPING[type], dataId: dataId ? `${dataId}-icon` : '' }), _jsxs("div", { className: "alert__text pl-8", children: [_jsxs("div", { children: [_jsx(Text, { type: "primary", size: "standard", weight: "regular", lineHeight: "large", dataId: dataId ? `${dataId}-text` : '', children: text }), subtext ? (_jsx(Text, { className: 'mt-4', type: "secondary", size: "small", weight: "regular", lineHeight: "large", dataId: dataId ? `${dataId}-subtext` : '', children: subtext })) : null] }), buttonProps ? (_jsxs("div", { className: "alert__actions", children: [buttonProps.confirm && (_jsx(Button, Object.assign({ size: "medium", type: "secondary", dataId: dataId ? `${dataId}-confirm` : '' }, buttonProps.confirm))), buttonProps.cancel && (_jsx(Button, Object.assign({ size: "medium", type: "tertiary", className: "ml-12", dataId: dataId ? `${dataId}-cancel` : '' }, buttonProps.cancel)))] })) : null] }), closeIcon ? (_jsx(IconDismissFilled, { type: TYPE_MAPPING[type], size: "xsmall", className: "ml-12 pointer", onClick: onClose, dataId: dataId ? `${dataId}-close` : '' })) : null] }) }));
+    const { buttonProps, type = 'information', position = 'inline', text, subtext, closeIcon, onClose, className = '', dataTestId = '' } = props;
+    return (_jsx("div", { className: classnames('alert', `alert--${type} alert--${position}`, className), "data-test-id": dataTestId, children: _jsxs("div", { className: "alert__content", children: [_jsx(IconDynamicComponent, { Component: ICONS_MAPPING[type], size: "small", type: TYPE_MAPPING[type], dataTestId: dataTestId ? `${dataTestId}-icon` : '' }), _jsxs("div", { className: "alert__text pl-8", children: [_jsxs("div", { children: [_jsx(Text, { type: "primary", size: "standard", weight: "regular", lineHeight: "large", dataTestId: dataTestId ? `${dataTestId}-text` : '', children: text }), subtext ? (_jsx(Text, { className: 'mt-4', type: "secondary", size: "small", weight: "regular", lineHeight: "large", dataTestId: dataTestId ? `${dataTestId}-subtext` : '', children: subtext })) : null] }), buttonProps ? (_jsxs("div", { className: "alert__actions", children: [buttonProps.confirm && (_jsx(Button, Object.assign({ size: "medium", type: "secondary", dataTestId: dataTestId ? `${dataTestId}-confirm` : '' }, buttonProps.confirm))), buttonProps.cancel && (_jsx(Button, Object.assign({ size: "medium", type: "tertiary", className: "ml-12", dataTestId: dataTestId ? `${dataTestId}-cancel` : '' }, buttonProps.cancel)))] })) : null] }), closeIcon ? (_jsx(IconDismissFilled, { type: TYPE_MAPPING[type], size: "xsmall", className: "ml-12 pointer", onClick: onClose, dataTestId: dataTestId ? `${dataTestId}-close` : '' })) : null] }) }));
 };

package/components/Alert/types.d.ts

@@ -1,3 +1,4 @@
+import { IFormCompProps } from '../../type';
 import { TButtonPropTypes } from '../Button/types';
 export type TAlertTypes = 'success' | 'error' | 'warning' | 'information' | 'discovery';
 export type TAlertPosition = 'inline' | 'sticky';

package/components/Avatar/Avatar.d.ts

@@ -1,3 +1,3 @@
 import { ReactElement } from 'react';
 import { TAvatarProps } from './types';
-export declare const Avatar: ({ dataId, id, color, size, type, imagePath, initials, className, isEditable, allowedTypes, onError, fileAllowedSize, onAvatarChange, onAvatarClick }: TAvatarProps) => ReactElement;
+export declare const Avatar: ({ dataTestId, id, color, size, type, imagePath, initials, className, isEditable, allowedTypes, onError, fileAllowedSize, onAvatarChange, onAvatarClick }: TAvatarProps) => ReactElement;

package/components/Avatar/Avatar.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from 'react';
 import classNames from 'classnames';
 import { FileUpload, FileUploadMode } from '../FileUpload';
-export const Avatar = ({ dataId, id, color = 'default', size = 'medium', type, imagePath = '', initials = '', className = '', isEditable = false, allowedTypes = '.png, .jpg, .jpeg, image/jpeg, image/png, image/jpg', onError, fileAllowedSize, onAvatarChange, onAvatarClick }) => {
+export const Avatar = ({ dataTestId, id, color = 'default', size = 'medium', type, imagePath = '', initials = '', className = '', isEditable = false, allowedTypes = '.png, .jpg, .jpeg, image/jpeg, image/png, image/jpg', onError, fileAllowedSize, onAvatarChange, onAvatarClick }) => {
     const [image, setImage] = useState(imagePath);
     const getFiles = (files) => {
         if (files && files[0]) {
@@ -16,7 +16,7 @@ export const Avatar = ({ dataId, id, color = 'default', size = 'medium', type, i
     useEffect(() => {
         setImage(imagePath);
     }, [imagePath]);
-    return (_jsxs("div", { id: id, "data-id": dataId, className: classNames(`avatar avatar--${color} avatar--${type} avatar--${size}`, className, {
+    return (_jsxs("div", { id: id, "data-test-id": dataTestId, className: classNames(`avatar avatar--${color} avatar--${type} avatar--${size}`, className, {
             'avatar--edit': isEditable
         }), children: [_jsx("div", { className: classNames({
                     'avatar--image': image

package/components/Avatar/AvatarGroup.d.ts

@@ -1,3 +1,3 @@
 import { ReactElement } from 'react';
 import { TAvatarGroupProps } from './types';
-export declare const AvatarGroup: ({ avatarGroup, onAddUser, size, maxCount, dataId }: TAvatarGroupProps) => ReactElement;
+export declare const AvatarGroup: ({ avatarGroup, onAddUser, size, maxCount, dataTestId }: TAvatarGroupProps) => ReactElement;

package/components/Avatar/AvatarGroup.js

@@ -10,12 +10,12 @@ const VISIBLE_AVATARS_AMOUNT = {
     medium: 4,
     large: 6
 };
-export const AvatarGroup = ({ avatarGroup = [], onAddUser, size = 'medium', maxCount = 0, dataId }) => {
+export const AvatarGroup = ({ avatarGroup = [], onAddUser, size = 'medium', maxCount = 0, dataTestId }) => {
     const screenSize = useScreenSize();
     const visibleAvatarsAmount = maxCount || VISIBLE_AVATARS_AMOUNT[screenSize];
     const visibleAvatars = avatarGroup.slice(0, visibleAvatarsAmount);
     const invisibleAvatarsAmount = avatarGroup.length - visibleAvatarsAmount > 0 ? avatarGroup.length - visibleAvatarsAmount : 0;
     return (_jsxs("div", { className: classNames(`avatar-group avatar-group--${size}`), children: [visibleAvatars.map((avatar, index) => {
-                return (_jsxs("div", { className: 'avatar-group__item', children: [avatar.tooltipContent ? (_jsx(Tooltip, { text: avatar.tooltipContent, id: `${index}`, position: Positions.TOP_CENTER })) : null, _jsx(Avatar, { dataId: dataId, id: `${index}`, size: size, initials: avatar.initials, imagePath: avatar.imagePath })] }, index));
+                return (_jsxs("div", { className: 'avatar-group__item', children: [avatar.tooltipContent ? (_jsx(Tooltip, { text: avatar.tooltipContent, id: `${index}`, position: Positions.TOP_CENTER })) : null, _jsx(Avatar, { dataTestId: dataTestId, id: `${index}`, size: size, initials: avatar.initials, imagePath: avatar.imagePath })] }, index));
             }), invisibleAvatarsAmount ? (_jsxs("div", { className: "avatar-group__item", children: [_jsx(Tooltip, { text: 'Name Surname', id: 'amountTooltip', position: Positions.TOP_CENTER }), _jsx(Avatar, { type: 'count', size: size, id: 'amountTooltip', initials: `+${invisibleAvatarsAmount}` })] })) : null, onAddUser ? (_jsx("div", { className: classNames(`avatar avatar-group__add avatar--${size}`), onClick: onAddUser, children: _jsx(IconAdd, { type: "disabled", size: size }) })) : null] }));
 };

package/components/Avatar/types.d.ts

@@ -1,3 +1,4 @@
+import { IBaseProps, IFormCompProps } from '../../type';
 import { ReactElement } from 'react';
 import { FILE_UPLOAD_ERRORS } from '../../consts';
 export interface TAvatarProps extends IFormCompProps {

package/components/Badge/Badge.js

@@ -2,6 +2,6 @@ import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 import { Text } from '../Text';
 import classNames from 'classnames';
 export const Badge = (props) => {
-    const { type = 'primary', size = 'large', text, className = '', dataId = '' } = props;
-    return (_jsx("div", { className: classNames(`badge badge--${type}  badge--${size}`, className), "data-id": dataId, children: text ? (_jsx(Text, { size: "xsmall", type: type == 'secondary' ? 'primary' : 'inverse', className: "badge__inner", dataId: dataId ? `${dataId}-text` : '', children: _jsx(_Fragment, { children: text }) })) : null }));
+    const { type = 'primary', size = 'large', text, className = '', dataTestId = '' } = props;
+    return (_jsx("div", { className: classNames(`badge badge--${type}  badge--${size}`, className), "data-test-id": dataTestId, children: text ? (_jsx(Text, { size: "xsmall", type: type == 'secondary' ? 'primary' : 'inverse', className: "badge__inner", dataTestId: dataTestId ? `${dataTestId}-text` : '', children: _jsx(_Fragment, { children: text }) })) : null }));
 };

package/components/Badge/types.d.ts

@@ -1,3 +1,4 @@
+import { IFormCompProps } from '../../type';
 export interface TBadgeProps extends IFormCompProps {
     text?: number | string;
     type?: 'primary' | 'secondary' | 'tertiary';

package/components/BadgeV2/BadgeV2.js

@@ -4,11 +4,11 @@ import { Text } from '../Text';
 import { BadgeSize } from './types';
 import classNames from 'classnames';
 export const BadgeV2 = (props) => {
-    const { type = 'blue', style = 'filled', size = BadgeSize.large, text, className = '', iconProps, withDot, dot, disabled, dataId = '' } = props;
+    const { type = 'blue', style = 'filled', size = BadgeSize.large, text, className = '', iconProps, withDot, dot, disabled, dataTestId = '' } = props;
     const { size: iconSize = 'small', type: iconType, alignment: iconAlignment = 'left' } = iconProps !== null && iconProps !== void 0 ? iconProps : {};
     const baseClassName = classNames(`badge-v2 badge-v2--${type} badge-v2--${style} badge-v2--${size}`, { 'badge-v2--disabled': disabled }, className);
     if (dot) {
-        return _jsx("div", { className: classNames(baseClassName, 'badge-v2--dot'), "data-id": dataId });
+        return _jsx("div", { className: classNames(baseClassName, 'badge-v2--dot'), "data-test-id": dataTestId });
     }
-    return (_jsxs("div", { className: baseClassName, "data-id": dataId, children: [withDot ? (_jsx("div", { className: classNames(baseClassName, 'badge-v2--dot badge-v2--with-dot'), "data-id": dataId ? `${dataId}-dot` : '' })) : null, !withDot && iconProps && iconAlignment === 'left' ? (_jsx(iconProps.Component, { size: iconSize, type: iconType, dataId: dataId ? `${dataId}-left-icon` : '' })) : null, typeof text === 'string' || typeof text === 'number' ? (_jsx(Text, { size: "xsmall", className: "badge-v2__inner", dataId: dataId ? `${dataId}-text` : '', children: text })) : React.isValidElement(text) ? (text) : null, !withDot && iconProps && iconAlignment === 'right' ? (_jsx(iconProps.Component, { size: iconSize, type: iconType, dataId: dataId ? `${dataId}-right-icon` : '' })) : null] }));
+    return (_jsxs("div", { className: baseClassName, "data-test-id": dataTestId, children: [withDot ? (_jsx("div", { className: classNames(baseClassName, 'badge-v2--dot badge-v2--with-dot'), "data-test-id": dataTestId ? `${dataTestId}-dot` : '' })) : null, !withDot && iconProps && iconAlignment === 'left' ? (_jsx(iconProps.Component, { size: iconSize, type: iconType, dataTestId: dataTestId ? `${dataTestId}-left-icon` : '' })) : null, typeof text === 'string' || typeof text === 'number' ? (_jsx(Text, { size: "xsmall", className: "badge-v2__inner", dataTestId: dataTestId ? `${dataTestId}-text` : '', children: text })) : React.isValidElement(text) ? (text) : null, !withDot && iconProps && iconAlignment === 'right' ? (_jsx(iconProps.Component, { size: iconSize, type: iconType, dataTestId: dataTestId ? `${dataTestId}-right-icon` : '' })) : null] }));
 };

package/components/BadgeV2/types.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { TSVGIconType } from '../../type';
+import { TSVGIconType, IFormCompProps } from '../../type';
 export interface TBadgeV2Props extends IFormCompProps {
     text?: number | string | ReactNode;
     type?: 'gray' | 'blue' | 'orange' | 'red' | 'green' | 'yellow' | 'purple' | 'sky' | 'pink' | 'teal';

package/components/Breadcrumb/Breadcrumb.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 export const Breadcrumb = (props) => {
-    const { selectedValue, breadCrumbItems, className = '', onSelect, dataId = '' } = props;
-    return (_jsx("div", { className: `breadcrumb ${className}`, "data-id": dataId, children: breadCrumbItems.map((itemInfo, index) => {
-            return (_jsx("span", { className: "breadcrumb__item", children: _jsx("span", { className: `breadcrumb__item__inner ${selectedValue === itemInfo.value ? 'selected' : ''}`, "data-id": dataId ? `${dataId}-crumb-${index}` : '', onClick: () => onSelect(itemInfo.value), children: itemInfo.label }) }, itemInfo.value));
+    const { selectedValue, breadCrumbItems, className = '', onSelect, dataTestId = '' } = props;
+    return (_jsx("div", { className: `breadcrumb ${className}`, "data-test-id": dataTestId, children: breadCrumbItems.map((itemInfo, index) => {
+            return (_jsx("span", { className: "breadcrumb__item", children: _jsx("span", { className: `breadcrumb__item__inner ${selectedValue === itemInfo.value ? 'selected' : ''}`, "data-test-id": dataTestId ? `${dataTestId}-crumb-${index}` : '', onClick: () => onSelect(itemInfo.value), children: itemInfo.label }) }, itemInfo.value));
         }) }));
 };

package/components/Breadcrumb/types.d.ts

@@ -1,3 +1,4 @@
+import { IFormCompProps } from '../../type';
 export type TBreadCrumbItem = {
     value: number | string;
     label: string | React.ReactElement;

package/components/Button/Button.js

@@ -14,7 +14,7 @@ import classnames from 'classnames';
 import { Loader } from '../../helperComponents/Loader';
 import { ICON_SIZE_MAPPING, ICON_TYPE_MAPPING, LITE_LOADER_TYPES } from './consts';
 export const Button = (props) => {
-    const { buttonText, type = 'primary', size = 'large', className = '', iconProps, buttonActionType = 'button', disabled, pressed, isLoading, formId, dataId = '', onClick, refHandler = null, children } = props, rest = __rest(props, ["buttonText", "type", "size", "className", "iconProps", "buttonActionType", "disabled", "pressed", "isLoading", "formId", "dataId", "onClick", "refHandler", "children"]);
+    const { buttonText, type = 'primary', size = 'large', className = '', iconProps, buttonActionType = 'button', disabled, pressed, isLoading, formId, dataTestId = '', onClick, refHandler = null, children } = props, rest = __rest(props, ["buttonText", "type", "size", "className", "iconProps", "buttonActionType", "disabled", "pressed", "isLoading", "formId", "dataTestId", "onClick", "refHandler", "children"]);
     const justIcon = !buttonText && !children && iconProps !== undefined;
     const clickHandler = (e) => {
         if (pressed || disabled || isLoading) {
@@ -23,7 +23,7 @@ export const Button = (props) => {
         }
         onClick === null || onClick === void 0 ? void 0 : onClick(e);
     };
-    return (_jsx("button", Object.assign({ ref: refHandler, "data-id": dataId, disabled: disabled, type: buttonActionType, className: classnames('btn', `btn--${type}`, `btn--${size}`, {
+    return (_jsx("button", Object.assign({ ref: refHandler, "data-test-id": dataTestId, disabled: disabled, type: buttonActionType, className: classnames('btn', `btn--${type}`, `btn--${size}`, {
             pressed: pressed,
             'btn--icon': justIcon,
             [`btn--icon-${(iconProps === null || iconProps === void 0 ? void 0 : iconProps.alignment) || 'left'}`]: !isLoading && !justIcon && (iconProps === null || iconProps === void 0 ? void 0 : iconProps.Component)

package/components/Button/types.d.ts

@@ -1,5 +1,5 @@
 import { ButtonHTMLAttributes, LegacyRef, PropsWithChildren, ReactElement } from 'react';
-import { TSVGIconType } from '../../type';
+import { TSVGIconType, IBaseProps } from '../../type';
 export interface TButtonPropTypes extends PropsWithChildren<Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'type' | 'children'>>, IBaseProps {
     id?: string;
     disabled?: boolean;

package/components/ButtonGroup/ButtonGroup.d.ts

@@ -1,2 +1,2 @@
 import { IButtonGroup } from './types';
-export declare const ButtonGroup: ({ buttons, activeIndex, className, type, size, disabled, onTabChange, dataId }: IButtonGroup) => import("react/jsx-runtime").JSX.Element;
+export declare const ButtonGroup: ({ buttons, activeIndex, className, type, size, disabled, onTabChange, dataTestId }: IButtonGroup) => import("react/jsx-runtime").JSX.Element;

package/components/ButtonGroup/ButtonGroup.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useState } from 'react';
 import classNames from 'classnames';
 import { ButtonGroupItem } from './ButtonGroupItem';
-export const ButtonGroup = ({ buttons, activeIndex = 0, className, type, size, disabled, onTabChange, dataId = '' }) => {
+export const ButtonGroup = ({ buttons, activeIndex = 0, className, type, size, disabled, onTabChange, dataTestId = '' }) => {
     const [activeItem, setActiveItem] = useState(activeIndex);
     const handleItemClick = (index) => {
         if (disabled || activeItem === index)
@@ -10,7 +10,7 @@ export const ButtonGroup = ({ buttons, activeIndex = 0, className, type, size, d
         setActiveItem(index);
         onTabChange === null || onTabChange === void 0 ? void 0 : onTabChange(index);
     };
-    return (_jsx("div", { className: classNames('button-group', className), "data-id": dataId, children: buttons.map((button, index) => {
-            return (_jsx(ButtonGroupItem, Object.assign({}, button, { type: type, size: size, isActive: activeItem === button.id, disabled: disabled, dataId: dataId ? `${dataId}-item-${index}` : '', onClick: () => handleItemClick(button.id) }), `buttonGroup_${button.id}`));
+    return (_jsx("div", { className: classNames('button-group', className), "data-test-id": dataTestId, children: buttons.map((button, index) => {
+            return (_jsx(ButtonGroupItem, Object.assign({}, button, { type: type, size: size, isActive: activeItem === button.id, disabled: disabled, dataTestId: dataTestId ? `${dataTestId}-item-${index}` : '', onClick: () => handleItemClick(button.id) }), `buttonGroup_${button.id}`));
         }) }));
 };

package/components/ButtonGroup/ButtonGroupItem.d.ts

@@ -1,2 +1,2 @@
 import { IButtonGroupItem } from './types';
-export declare const ButtonGroupItem: ({ buttonText, size, type, isActive, disabled, onClick, className, icons, dataId }: IButtonGroupItem) => import("react/jsx-runtime").JSX.Element;
+export declare const ButtonGroupItem: ({ buttonText, size, type, isActive, disabled, onClick, className, icons, dataTestId }: IButtonGroupItem) => import("react/jsx-runtime").JSX.Element;

package/components/ButtonGroup/ButtonGroupItem.js

@@ -3,7 +3,7 @@ import { useMemo } from 'react';
 import { Text } from '../Text';
 import classNames from 'classnames';
 import { ICON_SIZE_MAPPING, TEXT_SIZE_MAPPING } from './consts';
-export const ButtonGroupItem = ({ buttonText, size = 'medium', type = 'primary', isActive, disabled, onClick, className, icons, dataId = '' }) => {
+export const ButtonGroupItem = ({ buttonText, size = 'medium', type = 'primary', isActive, disabled, onClick, className, icons, dataTestId = '' }) => {
     var _a, _b;
     const onClickHandler = (event) => {
         event.preventDefault();
@@ -19,5 +19,5 @@ export const ButtonGroupItem = ({ buttonText, size = 'medium', type = 'primary',
         }
         return 'tertiary';
     }, [disabled, isActive]);
-    return (_jsxs("div", { className: classNames('button-group-item', `button-group-item__${type}`, `button-group-item__${size}`, { active: isActive, disabled }, className), "data-id": dataId, onClick: onClickHandler, children: [((_a = icons === null || icons === void 0 ? void 0 : icons.left) === null || _a === void 0 ? void 0 : _a.Component) ? (_jsx(icons.left.Component, { dataId: dataId ? `${dataId}-left-icon` : '', size: ICON_SIZE_MAPPING[size], type: iconType })) : null, _jsx(Text, { dataId: dataId ? `${dataId}-text` : '', size: TEXT_SIZE_MAPPING[size], type: iconType, children: buttonText }), ((_b = icons === null || icons === void 0 ? void 0 : icons.right) === null || _b === void 0 ? void 0 : _b.Component) ? (_jsx(icons.right.Component, { dataId: dataId ? `${dataId}-right-icon` : '', size: ICON_SIZE_MAPPING[size], type: iconType })) : null] }));
+    return (_jsxs("div", { className: classNames('button-group-item', `button-group-item__${type}`, `button-group-item__${size}`, { active: isActive, disabled }, className), "data-test-id": dataTestId, onClick: onClickHandler, children: [((_a = icons === null || icons === void 0 ? void 0 : icons.left) === null || _a === void 0 ? void 0 : _a.Component) ? (_jsx(icons.left.Component, { dataTestId: dataTestId ? `${dataTestId}-left-icon` : '', size: ICON_SIZE_MAPPING[size], type: iconType })) : null, _jsx(Text, { dataTestId: dataTestId ? `${dataTestId}-text` : '', size: TEXT_SIZE_MAPPING[size], type: iconType, children: buttonText }), ((_b = icons === null || icons === void 0 ? void 0 : icons.right) === null || _b === void 0 ? void 0 : _b.Component) ? (_jsx(icons.right.Component, { dataTestId: dataTestId ? `${dataTestId}-right-icon` : '', size: ICON_SIZE_MAPPING[size], type: iconType })) : null] }));
 };

package/components/ButtonGroup/types.d.ts

@@ -1,4 +1,4 @@
-import { ISVGIconProps } from '../../type';
+import { ISVGIconProps, IBaseProps } from '../../type';
 interface IButtonGroupBase extends IBaseProps {
     type?: 'primary';
     size?: 'small' | 'medium' | 'large';

package/components/Card/CardComponent/Card.js

@@ -3,11 +3,11 @@ import classNames from 'classnames';
 import { useCardContext } from '../CardContext';
 import { generateDataTestId } from '../../../utils/helpers';
 export const Card = ({ children }) => {
-    const { isExpanded, className, title, dataId, id, noBorder } = useCardContext();
+    const { isExpanded, className, title, dataTestId, id, noBorder } = useCardContext();
     const { alignment, color, text } = title !== null && title !== void 0 ? title : { alignment: 'left', color: 'blue' };
     return (_jsxs("div", { className: classNames('card', {
             'card--expanded': isExpanded,
             [`card--title--alignment--${alignment}`]: title,
             'card--noBorder': noBorder
-        }, className), id: `${id || ''}`, "data-id": generateDataTestId('card-item', dataId), children: [title && (_jsx("div", { className: classNames('card__title', { [`card__title--${color}`]: color }), children: text })), _jsx("div", { className: "card__content", children: children })] }));
+        }, className), id: `${id || ''}`, "data-test-id": generateDataTestId('card-item', dataTestId), children: [title && (_jsx("div", { className: classNames('card__title', { [`card__title--${color}`]: color }), children: text })), _jsx("div", { className: "card__content", children: children })] }));
 };

package/components/Card/types.d.ts

@@ -1,3 +1,4 @@
+import { IBaseProps } from '../../type';
 import { ReactNode } from 'react';
 export type TCardTitle = {
     alignment?: 'top' | 'bottom' | 'left' | 'right';

package/components/CardGroup/CardGroupComponent/CardGroup.js

@@ -3,7 +3,7 @@ import classNames from 'classnames';
 import { generateDataTestId } from '../../../utils/helpers';
 import { useCardGroupContext } from '../CardGroupContext';
 export const CardGroup = ({ children }) => {
-    const { className, title, dataId, id } = useCardGroupContext();
+    const { className, title, dataTestId, id } = useCardGroupContext();
     const { alignment } = title !== null && title !== void 0 ? title : { alignment: 'left' };
-    return (_jsx("div", { className: classNames('card--group', { [`card--group--title--alignment--${alignment}`]: title }, className), id: `${id || ''}`, "data-id": generateDataTestId('card--group-item', dataId), children: _jsx("div", { className: "card--group__content", children: children }) }));
+    return (_jsx("div", { className: classNames('card--group', { [`card--group--title--alignment--${alignment}`]: title }, className), id: `${id || ''}`, "data-test-id": generateDataTestId('card--group-item', dataTestId), children: _jsx("div", { className: "card--group__content", children: children }) }));
 };

package/components/CardGroup/types.d.ts

@@ -1,3 +1,4 @@
+import { IBaseProps } from '../../type';
 import { ReactNode } from 'react';
 export type TCardGroupTitle = {
     alignment?: 'top' | 'bottom' | 'left' | 'right';

package/components/Checkbox/Checkbox.js

@@ -8,7 +8,7 @@ import IconInfo from '../SVGIcons/IconInfo';
 import { ICONS_MAPPING } from './consts';
 import { IconDynamicComponent } from '../../helperComponents/IconDynamicComponent';
 export const Checkbox = forwardRef((props, ref) => {
-    const { label, disabled, required = false, link, name, setFieldValue, selectedValue, value, className = '', iconProps = { name: 'checkmark' }, dataId = '', onClick, beforeLink, afterLink, helperText = '', popoverAddons, isInvalid, stopPropagation = false } = props;
+    const { label, disabled, required = false, link, name, setFieldValue, selectedValue, value, className = '', iconProps = { name: 'checkmark' }, dataTestId = '', onClick, beforeLink, afterLink, helperText = '', popoverAddons, isInvalid, stopPropagation = false } = props;
     const localRef = useRef(null);
     const inputRef = ref && Object.keys(ref).length ? ref : localRef;
     const isChecked = !!value || selectedValue;
@@ -21,7 +21,7 @@ export const Checkbox = forwardRef((props, ref) => {
             onClick(!isChecked);
         }
     };
-    const checkboxLabelPopover = popoverAddons ? (_jsx(Popover, Object.assign({ id: `${popoverAddons.id}` }, popoverAddons, { children: _jsx("div", { id: `${popoverAddons.id}`, children: _jsx(IconInfo, { dataId: dataId ? `${dataId}-icon` : '', type: "information", size: "xsmall", className: 'ml-4 pointer', onClick: changeHandler }) }) }))) : null;
+    const checkboxLabelPopover = popoverAddons ? (_jsx(Popover, Object.assign({ id: `${popoverAddons.id}` }, popoverAddons, { children: _jsx("div", { id: `${popoverAddons.id}`, children: _jsx(IconInfo, { dataTestId: dataTestId ? `${dataTestId}-icon` : '', type: "information", size: "xsmall", className: 'ml-4 pointer', onClick: changeHandler }) }) }))) : null;
     const checkboxLabel = useMemo(() => {
         if (!label) {
             return null;
@@ -32,13 +32,13 @@ export const Checkbox = forwardRef((props, ref) => {
         if (!link) {
             return (_jsx(Text, { type: disabled ? 'disabled' : 'primary', className: "controller__label", children: _jsxs(_Fragment, { children: [label, required && _jsx("sup", { children: "*" })] }) }));
         }
-        return (_jsx(Text, { type: disabled ? 'disabled' : 'primary', className: "controller__label", children: _jsxs(_Fragment, { children: [beforeLink && _jsx("span", { className: "mr-4", children: beforeLink }), _jsx(Link, { dataId: dataId ? `${dataId}-link` : '', url: link, target: "_blank", children: label }), afterLink && _jsx("span", { className: "ml-4", children: afterLink }), required && _jsx("sup", { children: "*" })] }) }));
+        return (_jsx(Text, { type: disabled ? 'disabled' : 'primary', className: "controller__label", children: _jsxs(_Fragment, { children: [beforeLink && _jsx("span", { className: "mr-4", children: beforeLink }), _jsx(Link, { dataTestId: dataTestId ? `${dataTestId}-link` : '', url: link, target: "_blank", children: label }), afterLink && _jsx("span", { className: "ml-4", children: afterLink }), required && _jsx("sup", { children: "*" })] }) }));
     }, [label, link]);
-    return (_jsx(_Fragment, { children: _jsxs("label", { "data-id": dataId, className: classnames('controller', {
+    return (_jsx(_Fragment, { children: _jsxs("label", { "data-test-id": dataTestId, className: classnames('controller', {
                 'controller--checkbox': true,
                 'controller--disabled': disabled,
                 'controller--error': isInvalid,
                 [className]: !!className
-            }), onClick: (e) => stopPropagation && e.stopPropagation(), children: [_jsx("input", { "data-id": dataId ? `${dataId}-input` : '', type: "checkbox", ref: inputRef, tabIndex: 0, onChange: changeHandler, checked: Boolean(isChecked), disabled: disabled }), _jsx("span", { className: "controller__icon", children: _jsx(IconDynamicComponent, { Component: ICONS_MAPPING[iconProps.name], size: "xxsmall", type: disabled ? 'disabled' : 'inverse', className: "controller__mark" }) }), checkboxLabel ? (_jsxs("div", { className: "controller__right", children: [_jsxs("div", { className: "flexbox", children: [checkboxLabel, checkboxLabelPopover] }), helperText ? (_jsx(Text, { size: "small", type: disabled ? 'disabled' : 'secondary', children: helperText })) : null] })) : null] }) }));
+            }), onClick: (e) => stopPropagation && e.stopPropagation(), children: [_jsx("input", { "data-test-id": dataTestId ? `${dataTestId}-input` : '', type: "checkbox", ref: inputRef, tabIndex: 0, onChange: changeHandler, checked: Boolean(isChecked), disabled: disabled }), _jsx("span", { className: "controller__icon", children: _jsx(IconDynamicComponent, { Component: ICONS_MAPPING[iconProps.name], size: "xxsmall", type: disabled ? 'disabled' : 'inverse', className: "controller__mark" }) }), checkboxLabel ? (_jsxs("div", { className: "controller__right", children: [_jsxs("div", { className: "flexbox", children: [checkboxLabel, checkboxLabelPopover] }), helperText ? (_jsx(Text, { size: "small", type: disabled ? 'disabled' : 'secondary', children: helperText })) : null] })) : null] }) }));
 });
 Checkbox.displayName = 'Checkbox';

package/components/Checkbox/types.d.ts

@@ -1,3 +1,4 @@
+import { IFormCompProps } from '../../type';
 import { TPopoverProps } from '../Popover/types';
 export interface TCheckboxProps extends IFormCompProps {
     label?: string | React.ReactElement;

package/components/Chips/Chips.js

@@ -5,7 +5,7 @@ import classNames from 'classnames';
 import IconDismissCircleFilled from '../SVGIcons/IconDismissCircleFilled';
 import { ICON_SIZE_MAPPING, TEXT_SIZE_MAPPING } from './consts';
 export const Chips = (props) => {
-    const { type = 'filled', color = 'primary', size = 'large', text, disabled, className = '', leftIconProps, withAction, onClick, onRemove, dataId = '', id = '' } = props;
+    const { type = 'filled', color = 'primary', size = 'large', text, disabled, className = '', leftIconProps, withAction, onClick, onRemove, dataTestId = '', id = '' } = props;
     const customType = disabled
         ? 'disabled'
         : type == ChipCustomType.filled
@@ -21,5 +21,5 @@ export const Chips = (props) => {
         event.stopPropagation();
         onRemove === null || onRemove === void 0 ? void 0 : onRemove(event);
     };
-    return (_jsxs("div", { className: classNames(`chips chips--${type} chips--${disabled ? 'disabled' : color} chips--${size}`, className), id: id, "data-id": dataId, onClick: handleClick, children: [(leftIconProps === null || leftIconProps === void 0 ? void 0 : leftIconProps.Component) ? (_jsx(leftIconProps.Component, Object.assign({ dataId: `${dataId}-icon`, size: ICON_SIZE_MAPPING[size], type: customType, className: classNames({ 'mr-6': !!text }) }, leftIconProps))) : null, text ? (_jsx(Text, { dataId: `${dataId}-text`, type: customType, size: TEXT_SIZE_MAPPING[size], className: "chips__label", children: _jsx(_Fragment, { children: text }) })) : null, withAction && (_jsx(IconDismissCircleFilled, { dataId: `${dataId}-icon`, size: ICON_SIZE_MAPPING[size], type: customType, className: "chips__delete ml-6", onClick: handleRemove }))] }));
+    return (_jsxs("div", { className: classNames(`chips chips--${type} chips--${disabled ? 'disabled' : color} chips--${size}`, className), id: id, "data-test-id": dataTestId, onClick: handleClick, children: [(leftIconProps === null || leftIconProps === void 0 ? void 0 : leftIconProps.Component) ? (_jsx(leftIconProps.Component, Object.assign({ dataTestId: `${dataTestId}-icon`, size: ICON_SIZE_MAPPING[size], type: customType, className: classNames({ 'mr-6': !!text }) }, leftIconProps))) : null, text ? (_jsx(Text, { dataTestId: `${dataTestId}-text`, type: customType, size: TEXT_SIZE_MAPPING[size], className: "chips__label", children: _jsx(_Fragment, { children: text }) })) : null, withAction && (_jsx(IconDismissCircleFilled, { dataTestId: `${dataTestId}-icon`, size: ICON_SIZE_MAPPING[size], type: customType, className: "chips__delete ml-6", onClick: handleRemove }))] }));
 };

package/components/Chips/types.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { ISVGIconProps } from '../../type';
+import { ISVGIconProps, IFormCompProps } from '../../type';
 export type TChipsColors = 'primary' | 'disabled' | 'brand' | 'danger' | 'warning' | 'success' | 'information' | 'discovery';
 export interface TChipsProps extends IFormCompProps {
     text?: string | ReactNode;

package/components/Collapse/Collapse/Collapse.js

@@ -7,7 +7,7 @@ import classNames from 'classnames';
 import { generateDataTestId } from '../../../utils/helpers';
 import { Title } from './Title';
 export const Collapse = (props) => {
-    const { title, className, isOpen: isCollapseOpen = false, iconAlignment = 'left', hasIconBorder = false, toggle, dataId, children, id } = props;
+    const { title, className, isOpen: isCollapseOpen = false, iconAlignment = 'left', hasIconBorder = false, toggle, dataTestId, children, id } = props;
     const [isOpen, toggleIsOpen] = useState(isCollapseOpen);
     const onToggle = useCallback(() => {
         toggleIsOpen((prevVal) => {
@@ -15,5 +15,5 @@ export const Collapse = (props) => {
             return !prevVal;
         });
     }, []);
-    return (_jsxs("div", { className: classNames('collapse collapse--v2', { 'collapse--opened': isOpen }, className), id: `${id || ''}`, "data-id": generateDataTestId('collapse-item', dataId), children: [_jsx("div", { className: "collapse__header", onClick: onToggle, children: _jsx(Title, { hasIconBorder: hasIconBorder, iconAlignment: iconAlignment, isOpen: isOpen, dataId: dataId, title: title }) }), _jsx(AnimatePresenceWrapper, { initial: false, children: isOpen && (_jsx(motion.div, { initial: { height: 0 }, animate: { height: 'auto' }, exit: { height: 0 }, transition: { type: 'spring', duration: 0.5, bounce: 0 }, children: _jsxs("div", { className: "collapse__content", children: [_jsx(Divider, { type: "primary", isHorizontal: true, className: 'collapse__divider' }), children] }) })) })] }));
+    return (_jsxs("div", { className: classNames('collapse collapse--v2', { 'collapse--opened': isOpen }, className), id: `${id || ''}`, "data-test-id": generateDataTestId('collapse-item', dataTestId), children: [_jsx("div", { className: "collapse__header", onClick: onToggle, children: _jsx(Title, { hasIconBorder: hasIconBorder, iconAlignment: iconAlignment, isOpen: isOpen, dataTestId: dataTestId, title: title }) }), _jsx(AnimatePresenceWrapper, { initial: false, children: isOpen && (_jsx(motion.div, { initial: { height: 0 }, animate: { height: 'auto' }, exit: { height: 0 }, transition: { type: 'spring', duration: 0.5, bounce: 0 }, children: _jsxs("div", { className: "collapse__content", children: [_jsx(Divider, { type: "primary", isHorizontal: true, className: 'collapse__divider' }), children] }) })) })] }));
 };

package/components/Collapse/Collapse/Title.d.ts

@@ -1,10 +1,10 @@
 import { TCollapseItemTitleV2 } from '../types';
 interface ITitleProps {
-    dataId: string;
+    dataTestId: string;
     isOpen: boolean;
     iconAlignment: 'left' | 'right';
     hasIconBorder: boolean;
     title: TCollapseItemTitleV2;
 }
-export declare const Title: ({ dataId, title, isOpen, iconAlignment, hasIconBorder }: ITitleProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Title: ({ dataTestId, title, isOpen, iconAlignment, hasIconBorder }: ITitleProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/components/Collapse/Collapse/Title.js

@@ -5,9 +5,9 @@ import { Text } from '../../Text';
 import classNames from 'classnames';
 import IconChevronDown from '../../SVGIcons/IconChevronDown';
 import IconChevronUp from '../../SVGIcons/IconChevronUp';
-export const Title = ({ dataId, title, isOpen, iconAlignment, hasIconBorder }) => {
+export const Title = ({ dataTestId, title, isOpen, iconAlignment, hasIconBorder }) => {
     const { text = '', weight = 'bolder', size = 'medium', color } = title;
-    const titleText = useMemo(() => typeof text === 'string' ? (_jsx(Text, { size: size, type: color, weight: weight, dataId: generateDataTestId('title', dataId), children: text })) : (text), [text, size, color, weight, dataId]);
+    const titleText = useMemo(() => typeof text === 'string' ? (_jsx(Text, { size: size, type: color, weight: weight, dataTestId: generateDataTestId('title', dataTestId), children: text })) : (text), [text, size, color, weight, dataTestId]);
     const icon = useMemo(() => (_jsx("div", { className: classNames('collapse-icon', {
             'icon-border': hasIconBorder,
             'icon-open': isOpen

package/components/Collapse/CollapseGroup/CollapseGroup.js

@@ -17,9 +17,9 @@ export const CollapseGroup = forwardRef((props, ref) => {
     const onCollapseDeselect = (value) => {
         setOpenValues(openValues.filter((item) => item !== value));
     };
-    return (_jsx("div", { className: classNames('collapse-group', className), ref: ref, children: items.map(({ id, title, value, content, dataId, iconProps }) => {
+    return (_jsx("div", { className: classNames('collapse-group', className), ref: ref, children: items.map(({ id, title, value, content, dataTestId, iconProps }) => {
             const isOpen = openValues.indexOf(value) !== -1;
-            return (_jsx(CollapseItem, { className: 'collapse-group__item', id: id, isOpen: isOpen, dataId: dataId, title: { size, color, text: title }, toggle: () => (isOpen ? onCollapseDeselect(value) : onCollapseSelect(value)), labelLeftIconProps: iconProps, children: content }, value));
+            return (_jsx(CollapseItem, { className: 'collapse-group__item', id: id, isOpen: isOpen, dataTestId: dataTestId, title: { size, color, text: title }, toggle: () => (isOpen ? onCollapseDeselect(value) : onCollapseSelect(value)), labelLeftIconProps: iconProps, children: content }, value));
         }) }));
 });
 CollapseGroup.displayName = 'CollapseGroup';

package/components/Collapse/CollapseItem/CollapseItem.js

@@ -8,7 +8,7 @@ import classNames from 'classnames';
 import IconChevronDown from '../../SVGIcons/IconChevronDown';
 import { generateDataTestId } from '../../../utils/helpers';
 export const CollapseItem = (props) => {
-    const { title: { text, weight = 'bolder', size = 'medium', color }, className, isOpen, toggle, dataId, children, reverse = false, additionalInfo, labelLeftIconProps, id } = props;
-    const title = typeof text === 'string' ? (_jsx(Text, { size: size, type: color, weight: weight, dataId: generateDataTestId('title', dataId), children: text })) : (text);
-    return (_jsxs("div", { className: classNames('collapse', { 'collapse--opened': isOpen }, className), id: `${id || ''}`, "data-id": generateDataTestId('collapse-item', dataId), children: [_jsx("div", { className: "collapse__header flexbox justify-content--between", onClick: toggle, children: reverse ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "collapse__header__inner flexbox align-items--center", children: [_jsx(IconChevronDown, { className: 'collapse__header__icon', size: 'small' }), additionalInfo] }), title] })) : (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flexbox align-items--center", children: [(labelLeftIconProps === null || labelLeftIconProps === void 0 ? void 0 : labelLeftIconProps.Component) ? (_jsx(labelLeftIconProps.Component, Object.assign({ size: "small", type: "primary", className: "mr-16" }, labelLeftIconProps))) : null, title] }), _jsxs("div", { className: "collapse__header__inner flexbox align-items--center", children: [additionalInfo, _jsx(IconChevronRight, { className: 'collapse__header__icon', size: 'small' })] })] })) }), _jsx(AnimatePresenceWrapper, { initial: false, children: isOpen && (_jsx(motion.div, { initial: { height: 0 }, animate: { height: 'auto' }, exit: { height: 0 }, transition: { type: 'spring', duration: 0.5, bounce: 0 }, children: _jsxs("div", { className: "collapse__content", children: [_jsx(Divider, { type: "primary", isHorizontal: true, className: 'collapse__divider' }), children] }) })) })] }));
+    const { title: { text, weight = 'bolder', size = 'medium', color }, className, isOpen, toggle, dataTestId, children, reverse = false, additionalInfo, labelLeftIconProps, id } = props;
+    const title = typeof text === 'string' ? (_jsx(Text, { size: size, type: color, weight: weight, dataTestId: generateDataTestId('title', dataTestId), children: text })) : (text);
+    return (_jsxs("div", { className: classNames('collapse', { 'collapse--opened': isOpen }, className), id: `${id || ''}`, "data-test-id": generateDataTestId('collapse-item', dataTestId), children: [_jsx("div", { className: "collapse__header flexbox justify-content--between", onClick: toggle, children: reverse ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "collapse__header__inner flexbox align-items--center", children: [_jsx(IconChevronDown, { className: 'collapse__header__icon', size: 'small' }), additionalInfo] }), title] })) : (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flexbox align-items--center", children: [(labelLeftIconProps === null || labelLeftIconProps === void 0 ? void 0 : labelLeftIconProps.Component) ? (_jsx(labelLeftIconProps.Component, Object.assign({ size: "small", type: "primary", className: "mr-16" }, labelLeftIconProps))) : null, title] }), _jsxs("div", { className: "collapse__header__inner flexbox align-items--center", children: [additionalInfo, _jsx(IconChevronRight, { className: 'collapse__header__icon', size: 'small' })] })] })) }), _jsx(AnimatePresenceWrapper, { initial: false, children: isOpen && (_jsx(motion.div, { initial: { height: 0 }, animate: { height: 'auto' }, exit: { height: 0 }, transition: { type: 'spring', duration: 0.5, bounce: 0 }, children: _jsxs("div", { className: "collapse__content", children: [_jsx(Divider, { type: "primary", isHorizontal: true, className: 'collapse__divider' }), children] }) })) })] }));
 };

package/components/Collapse/types.d.ts

@@ -1,3 +1,4 @@
+import { IBaseProps } from '../../type';
 import { ReactElement, ReactNode } from 'react';
 export type TCollapseTitleColor = 'selected' | 'primary';
 export interface ICollapseTitleProps {

package/components/Container/Container.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 export const Container = (props) => {
-    const { children, dataId = '' } = props;
-    return (_jsx("div", { className: "container", "data-id": dataId, children: children }));
+    const { children, dataTestId = '' } = props;
+    return (_jsx("div", { className: "container", "data-test-id": dataTestId, children: children }));
 };

package/components/Container/types.d.ts

@@ -1,3 +1,4 @@
+import { IBaseProps } from '../../type';
 import { ReactNode } from 'react';
 export interface TContainerProps extends IBaseProps {
     children?: ReactNode;

package/components/Copy/Copy.d.ts

@@ -1,3 +1,3 @@
 import { ReactElement } from 'react';
 import { TCopyProps } from './types';
-export declare const Copy: ({ textAfterCopy, className, text, dataId }: TCopyProps) => ReactElement;
+export declare const Copy: ({ textAfterCopy, className, text, dataTestId }: TCopyProps) => ReactElement;

package/components/Copy/Copy.js

@@ -3,7 +3,7 @@ import { useState, useRef } from 'react';
 import { Button } from '../Button';
 import { Popover } from '../Popover';
 import IconCopy from '../SVGIcons/IconCopy';
-export const Copy = ({ textAfterCopy, className = '', text, dataId }) => {
+export const Copy = ({ textAfterCopy, className = '', text, dataTestId }) => {
     const [isTooltipVisible, setTooltipVisibility] = useState(false);
     const copyIconRef = useRef(null);
     const copy = (e) => {
@@ -12,5 +12,5 @@ export const Copy = ({ textAfterCopy, className = '', text, dataId }) => {
         setTooltipVisibility(true);
         setTimeout(() => setTooltipVisibility(false), 1000);
     };
-    return (_jsxs("div", { ref: copyIconRef, className: "copy-icon", children: [_jsx(Button, { dataId: dataId, type: "tertiary", iconProps: { Component: IconCopy }, size: "small", className: className, onClick: copy }), isTooltipVisible ? (_jsx(Popover, { clicked: true, elemRef: copyIconRef.current, text: textAfterCopy || 'Copied', position: 'top-center' })) : null] }));
+    return (_jsxs("div", { ref: copyIconRef, className: "copy-icon", children: [_jsx(Button, { dataTestId: dataTestId, type: "tertiary", iconProps: { Component: IconCopy }, size: "small", className: className, onClick: copy }), isTooltipVisible ? (_jsx(Popover, { clicked: true, elemRef: copyIconRef.current, text: textAfterCopy || 'Copied', position: 'top-center' })) : null] }));
 };

package/components/Copy/types.d.ts

@@ -1,3 +1,4 @@
+import { IBaseProps } from '../../type';
 export type TCopyProps = IBaseProps & {
     className?: string;
     textAfterCopy?: string;

package/components/Counter/Counter.js

@@ -39,14 +39,14 @@ export const Counter = forwardRef((props, ref) => {
     const isIncreaseIconDisabled = counterValue <= min;
     const isDecreaseIconDisabled = counterValue === undefined || counterValue >= max;
     return (_jsx(Input, Object.assign({}, rest, { className: "counter", error: isFormField ? '' : customError, label: label, required: required, leftIconProps: {
-            dataId: `${rest.dataId}-decrement`,
+            dataTestId: `${rest.dataTestId}-decrement`,
             size: 'small',
             Component: IconSubtract,
             className: classNames({ action_active: !isIncreaseIconDisabled }),
             type: isIncreaseIconDisabled ? 'disabled' : 'primary',
             onClick: isIncreaseIconDisabled ? noop : increase
         }, rightIconProps: {
-            dataId: `${rest.dataId}-increment`,
+            dataTestId: `${rest.dataTestId}-increment`,
             Component: IconAdd,
             size: 'small',
             className: classNames({ action_active: !isDecreaseIconDisabled }),

package/components/Counter/types.d.ts

@@ -1,3 +1,4 @@
+import { IFormCompProps } from '../../type';
 export interface ICounterProps extends IFormCompProps {
     min?: number;
     max?: number;

package/components/DarkModeSwitcher/DarkModeSwitcher.d.ts

@@ -1,3 +1,4 @@
+import { IBaseProps } from '../../type';
 import React from 'react';
 export declare const DarkModeSwitcher: React.ForwardRefExoticComponent<IBaseProps & {
     checked: boolean;

package/components/DarkModeSwitcher/DarkModeSwitcher.js

@@ -3,13 +3,13 @@ import { forwardRef } from 'react';
 import classNames from 'classnames';
 import IconMoon from '../SVGIcons/IconMoon';
 import IconSun from '../SVGIcons/IconSun';
-export const DarkModeSwitcher = forwardRef(({ checked, onChange, disabled = false, id = 'dark-mode-switcher', name, className, dataId = '' }, ref) => {
+export const DarkModeSwitcher = forwardRef(({ checked, onChange, disabled = false, id = 'dark-mode-switcher', name, className, dataTestId = '' }, ref) => {
     const _onChange = (e) => {
         if (disabled) {
             return;
         }
         onChange(e.target.checked);
     };
-    return (_jsx("label", { className: classNames('theme-switch', className, { 'is-disabled': disabled }), htmlFor: id, "data-id": dataId, children: _jsxs("span", { className: classNames('theme-switch__track', { 'is-checked': checked }), children: [_jsx("span", { className: "theme-switch__icon theme-switch__icon--sun", "aria-hidden": "true", children: _jsx(IconSun, { size: "xsmall", dataId: dataId ? `${dataId}-sun-icon` : '' }) }), _jsx("input", { ref: ref, id: id, name: name, type: "checkbox", checked: checked, disabled: disabled, onChange: _onChange, className: "theme-switch__input", "data-id": dataId ? `${dataId}-input` : '' }), _jsx("span", { className: "theme-switch__thumb", "aria-hidden": "true" }), _jsx("span", { className: "theme-switch__icon theme-switch__icon--moon", "aria-hidden": "true", children: _jsx(IconMoon, { size: "xsmall", dataId: dataId ? `${dataId}-moon-icon` : '' }) })] }) }));
+    return (_jsx("label", { className: classNames('theme-switch', className, { 'is-disabled': disabled }), htmlFor: id, "data-test-id": dataTestId, children: _jsxs("span", { className: classNames('theme-switch__track', { 'is-checked': checked }), children: [_jsx("span", { className: "theme-switch__icon theme-switch__icon--sun", "aria-hidden": "true", children: _jsx(IconSun, { size: "xsmall", dataTestId: dataTestId ? `${dataTestId}-sun-icon` : '' }) }), _jsx("input", { ref: ref, id: id, name: name, type: "checkbox", checked: checked, disabled: disabled, onChange: _onChange, className: "theme-switch__input", "data-test-id": dataTestId ? `${dataTestId}-input` : '' }), _jsx("span", { className: "theme-switch__thumb", "aria-hidden": "true" }), _jsx("span", { className: "theme-switch__icon theme-switch__icon--moon", "aria-hidden": "true", children: _jsx(IconMoon, { size: "xsmall", dataTestId: dataTestId ? `${dataTestId}-moon-icon` : '' }) })] }) }));
 });
 DarkModeSwitcher.displayName = 'DarkModeSwitcher';

package/components/DarkModeSwitcher/types.d.ts

@@ -1,3 +1,4 @@
+import { IFormCompProps } from '../../type';
 export interface TSwitcherProps extends IFormCompProps {
     onClick?: (isChecked: boolean) => void;
     className?: string;

package/components/DatePicker/CustomHeader/CustomHeader.js

@@ -13,5 +13,5 @@ export const CustomHeader = (props) => {
     };
     const month = date === null || date === void 0 ? void 0 : date.getMonth();
     const year = date === null || date === void 0 ? void 0 : date.getFullYear();
-    return (_jsxs("div", { className: "flexbox custom_header_container", children: [_jsx(IconChevronLeft, { size: "small", className: "cursor-pointer", dataId: dataPrefix ? `${dataPrefix}-prev-month-button` : '', onClick: prevMonthButtonDisabled ? noop : decreaseMonth, type: prevMonthButtonDisabled ? 'disabled' : 'primary' }), _jsxs("div", { className: "selects_container", children: [_jsx(ButtonSelect, { size: "small", type: "tertiary", className: "date_picker_select", offsets: isMobile ? {} : { top: 42, left: 48 }, placeHolder: getMonthLabel(month), dataId: dataPrefix ? `${dataPrefix}-month-select` : '', options: months, selectedItem: month, setSelectedItem: (m) => changeMonth(m), dropdownWidth: 150, isRequiredField: true }), _jsx(ButtonSelect, { type: "tertiary", className: "date_picker_select", offsets: isMobile ? {} : { top: 42, left: 138 }, placeHolder: year.toString(), dataId: dataPrefix ? `${dataPrefix}-year-select` : '', size: "small", options: getYearOptions(startYear, endYear), selectedItem: year, setSelectedItem: (y) => changeYear(y), dropdownWidth: 100, isRequiredField: true })] }), _jsx(IconChevronRight, { size: "small", className: "cursor-pointer", dataId: dataPrefix ? `${dataPrefix}-next-month-button` : '', onClick: nextMonthButtonDisabled ? noop : increaseMonth, type: nextMonthButtonDisabled ? 'disabled' : 'primary' })] }));
+    return (_jsxs("div", { className: "flexbox custom_header_container", children: [_jsx(IconChevronLeft, { size: "small", className: "cursor-pointer", dataTestId: dataPrefix ? `${dataPrefix}-prev-month-button` : '', onClick: prevMonthButtonDisabled ? noop : decreaseMonth, type: prevMonthButtonDisabled ? 'disabled' : 'primary' }), _jsxs("div", { className: "selects_container", children: [_jsx(ButtonSelect, { size: "small", type: "tertiary", className: "date_picker_select", offsets: isMobile ? {} : { top: 42, left: 48 }, placeHolder: getMonthLabel(month), dataTestId: dataPrefix ? `${dataPrefix}-month-select` : '', options: months, selectedItem: month, setSelectedItem: (m) => changeMonth(m), dropdownWidth: 150, isRequiredField: true }), _jsx(ButtonSelect, { type: "tertiary", className: "date_picker_select", offsets: isMobile ? {} : { top: 42, left: 138 }, placeHolder: year.toString(), dataTestId: dataPrefix ? `${dataPrefix}-year-select` : '', size: "small", options: getYearOptions(startYear, endYear), selectedItem: year, setSelectedItem: (y) => changeYear(y), dropdownWidth: 100, isRequiredField: true })] }), _jsx(IconChevronRight, { size: "small", className: "cursor-pointer", dataTestId: dataPrefix ? `${dataPrefix}-next-month-button` : '', onClick: nextMonthButtonDisabled ? noop : increaseMonth, type: nextMonthButtonDisabled ? 'disabled' : 'primary' })] }));
 };

package/components/DatePicker/RangeDatePicker/RangeDatePickerDesktop.js

@@ -20,7 +20,7 @@ import { isSameDay } from '../../../utils/helpers';
 import { Label } from '../../../helperComponents/Label';
 import IconCalendarRight from '../../SVGIcons/IconCalendarRight';
 export const RangeDatePickerDesktop = forwardRef((props, _ref) => {
-    const { value, currentDates = [], setFieldValue, name, changeHandler, dataId, format = DateFormat.LongDate, maxDate, minDate, locale = 'hy', disabled, placeholderText, label, hasError, required } = props, rest = __rest(props, ["value", "currentDates", "setFieldValue", "name", "changeHandler", "dataId", "format", "maxDate", "minDate", "locale", "disabled", "placeholderText", "label", "hasError", "required"]);
+    const { value, currentDates = [], setFieldValue, name, changeHandler, dataTestId, format = DateFormat.LongDate, maxDate, minDate, locale = 'hy', disabled, placeholderText, label, hasError, required } = props, rest = __rest(props, ["value", "currentDates", "setFieldValue", "name", "changeHandler", "dataTestId", "format", "maxDate", "minDate", "locale", "disabled", "placeholderText", "label", "hasError", "required"]);
     useImportFilesDynamically(locale);
     const dateInitialValue = value !== undefined && Array.isArray(value) ? value : currentDates;
     const [rangeArray, setRangeDate] = useState(dateInitialValue);
@@ -69,7 +69,7 @@ export const RangeDatePickerDesktop = forwardRef((props, _ref) => {
     };
     return (_jsxs("div", { className: "picker-container input__inner", children: [_jsx(Label, { text: label, required: required, invalid: hasError }), _jsx(DatePicker, Object.assign({}, rest, { locale: locale, minDate: minDate, maxDate: maxDate, startDate: rangeArray[0], endDate: rangeArray[1], selectsRange: true, disabled: disabled, onChange: onChange, onClickOutside: checkRange, 
                 // @ts-ignore
-                ref: calendarRef, customInput: _jsx("div", { className: "date-picker_input-container", children: _jsx(Input, { dataId: dataId, disabled: disabled, placeholder: placeholderText, 
+                ref: calendarRef, customInput: _jsx("div", { className: "date-picker_input-container", children: _jsx(Input, { dataTestId: dataTestId, disabled: disabled, placeholder: placeholderText, 
                         // @ts-ignore
                         currentValue: renderCurrentSelectedDate(rangeArray), rightIconProps: { Component: IconCalendarRight, onClick: openDatepicker } }) }) }))] }));
 });