hrm_ui_lib 3.2.3 → 3.4.0

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 = '' } = props;
-    return (_jsx("div", { className: classnames('alert', `alert--${type} alert--${position}`, className), children: _jsxs("div", { className: "alert__content", children: [_jsx(IconDynamicComponent, { Component: ICONS_MAPPING[type], size: "small", type: TYPE_MAPPING[type] }), _jsxs("div", { className: "alert__text pl-8", children: [_jsxs("div", { children: [_jsx(Text, { type: "primary", size: "standard", weight: "regular", lineHeight: "large", children: text }), subtext ? (_jsx(Text, { className: 'mt-4', type: "secondary", size: "small", weight: "regular", lineHeight: "large", children: subtext })) : null] }), buttonProps ? (_jsxs("div", { className: "alert__actions", children: [buttonProps.confirm && (_jsx(Button, Object.assign({ size: "medium", type: "secondary" }, buttonProps.confirm))), buttonProps.cancel && (_jsx(Button, Object.assign({ size: "medium", type: "tertiary", className: "ml-12" }, buttonProps.cancel)))] })) : null] }), closeIcon ? (_jsx(IconDismissFilled, { type: TYPE_MAPPING[type], size: "xsmall", className: "ml-12 pointer", onClick: onClose })) : null] }) }));
+    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] }) }));
 };

package/components/Avatar/types.d.ts

@@ -3,7 +3,6 @@ import { FILE_UPLOAD_ERRORS } from '../../consts';
 export interface TAvatarProps extends IFormCompProps {
     allowedTypes?: string;
     id?: string;
-    dataId?: string;
     imagePath?: string;
     initials?: string | ReactElement;
     color?: 'default' | 'purple' | 'blue' | 'green' | 'red';
@@ -17,8 +16,7 @@ export interface TAvatarProps extends IFormCompProps {
     fileAllowedSize?: number;
     onAvatarClick?: () => void;
 }
-export interface TAvatarGroupProps {
-    dataId?: string;
+export interface TAvatarGroupProps extends IBaseProps {
     avatarGroup: TAvatarProps[];
     onAddUser?: () => void;
     maxCount?: 0 | 2 | 4 | 6;

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 = '' } = props;
-    return (_jsx("div", { className: classNames(`badge badge--${type}  badge--${size}`, className), children: text ? (_jsx(Text, { size: "xsmall", type: type == 'secondary' ? 'primary' : 'inverse', className: "badge__inner", children: _jsx(_Fragment, { children: text }) })) : null }));
+    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 }));
 };

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 } = props;
+    const { type = 'blue', style = 'filled', size = BadgeSize.large, text, className = '', iconProps, withDot, dot, disabled, dataId = '' } = 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') });
+        return _jsx("div", { className: classNames(baseClassName, 'badge-v2--dot'), "data-id": dataId });
     }
-    return (_jsxs("div", { className: baseClassName, children: [withDot ? (_jsx("div", { className: classNames(baseClassName, 'badge-v2--dot badge-v2--with-dot') })) : null, !withDot && iconProps && iconAlignment === 'left' ? (_jsx(iconProps.Component, { size: iconSize, type: iconType })) : null, typeof text === 'string' || typeof text === 'number' ? (_jsx(Text, { size: "xsmall", className: "badge-v2__inner", children: text })) : React.isValidElement(text) ? (text) : null, !withDot && iconProps && iconAlignment === 'right' ? (_jsx(iconProps.Component, { size: iconSize, type: iconType })) : null] }));
+    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] }));
 };

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 } = props;
-    return (_jsx("div", { className: `breadcrumb ${className}`, children: breadCrumbItems.map((itemInfo) => {
-            return (_jsx("span", { className: "breadcrumb__item", children: _jsx("span", { className: `breadcrumb__item__inner ${selectedValue === itemInfo.value ? 'selected' : ''}`, onClick: () => onSelect(itemInfo.value), children: itemInfo.label }) }, itemInfo.value));
+    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));
         }) }));
 };

package/components/Button/types.d.ts

@@ -1,6 +1,6 @@
 import { ButtonHTMLAttributes, LegacyRef, PropsWithChildren, ReactElement } from 'react';
 import { TSVGIconType } from '../../type';
-export interface TButtonPropTypes extends PropsWithChildren<Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'type' | 'children'>> {
+export interface TButtonPropTypes extends PropsWithChildren<Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'type' | 'children'>>, IBaseProps {
     id?: string;
     disabled?: boolean;
     pressed?: boolean;
@@ -18,6 +18,5 @@ export interface TButtonPropTypes extends PropsWithChildren<Omit<ButtonHTMLAttri
     };
     onClick?: (event: TClickEventType) => void;
     formId?: string;
-    dataId?: string;
     refHandler?: LegacyRef<HTMLButtonElement> | undefined;
 }

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 }: IButtonGroup) => import("react/jsx-runtime").JSX.Element;
+export declare const ButtonGroup: ({ buttons, activeIndex, className, type, size, disabled, onTabChange, dataId }: 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 }) => {
+export const ButtonGroup = ({ buttons, activeIndex = 0, className, type, size, disabled, onTabChange, dataId = '' }) => {
     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), children: buttons.map((button) => {
-            return (_jsx(ButtonGroupItem, Object.assign({}, button, { type: type, size: size, isActive: activeItem === button.id, disabled: disabled, onClick: () => handleItemClick(button.id) }), `buttonGroup_${button.id}`));
+    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}`));
         }) }));
 };

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 }: IButtonGroupItem) => import("react/jsx-runtime").JSX.Element;
+export declare const ButtonGroupItem: ({ buttonText, size, type, isActive, disabled, onClick, className, icons, dataId }: 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 }) => {
+export const ButtonGroupItem = ({ buttonText, size = 'medium', type = 'primary', isActive, disabled, onClick, className, icons, dataId = '' }) => {
     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), 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, { size: ICON_SIZE_MAPPING[size], type: iconType })) : null, _jsx(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, { 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-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] }));
 };

package/components/ButtonGroup/types.d.ts

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

package/components/Card/types.d.ts

@@ -4,7 +4,7 @@ export type TCardTitle = {
     text: string;
     color: 'blue' | 'purple' | 'yellow' | 'pink' | 'green' | 'grey';
 };
-export type TCardProps = {
+export type TCardProps = IBaseProps & {
     title?: TCardTitle;
     isExpandable?: boolean;
     isExpanded?: boolean;
@@ -15,5 +15,4 @@ export type TCardProps = {
     children: ReactNode;
     className?: string;
     id?: string;
-    dataId?: string;
 };

package/components/CardGroup/types.d.ts

@@ -4,11 +4,10 @@ export type TCardGroupTitle = {
     text: string;
     color: 'blue' | 'purple' | 'yellow' | 'pink' | 'green' | 'grey';
 };
-export type TCardGroupProps = {
+export type TCardGroupProps = IBaseProps & {
     title?: TCardGroupTitle;
     children: ReactNode;
     className?: string;
     id?: string;
-    dataId?: string;
     noDivider?: boolean;
 };

package/components/Checkbox/Checkbox.js

@@ -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}-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, { dataId: dataId ? `${dataId}-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, 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, { dataId: dataId ? `${dataId}-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", { className: classnames('controller', {
+    return (_jsx(_Fragment, { children: _jsxs("label", { "data-id": dataId, 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, 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-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] }) }));
 });
 Checkbox.displayName = 'Checkbox';

package/components/Chips/Chips.js

@@ -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, 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-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 }))] }));
 };

package/components/Chips/types.d.ts

@@ -12,7 +12,6 @@ export interface TChipsProps extends IFormCompProps {
     withAction?: boolean;
     onClick?: (e: TClickEventType) => void;
     onRemove?: (e: TClickEventType) => void;
-    dataId?: string;
     id?: string;
 }
 export declare enum ChipCustomType {

package/components/Collapse/types.d.ts

@@ -8,26 +8,24 @@ export interface ICollapseTitleProps {
 export interface TCollapseItemTitle extends ICollapseTitleProps {
     text: string | ReactNode;
 }
-export type TCollapseProps = {
+export type TCollapseProps = IBaseProps & {
     isOpen: boolean;
     toggle: () => void;
     children: ReactNode;
     title: TCollapseItemTitle;
     reverse?: boolean;
     additionalInfo?: ReactNode;
-    dataId?: string | undefined;
     labelLeftIconProps?: TSelectIconProps;
     id?: string | number;
     className?: string;
 };
 export type TCollapseValue = string | number;
-export type TCollapseItem = {
+export type TCollapseItem = IBaseProps & {
     title: string;
     value: TCollapseValue;
     content?: ReactElement | null;
     iconProps?: TSelectIconProps;
     isOpen?: boolean;
-    dataId?: string;
     id?: string | number;
 };
 export type TCollapseGroupProps = {
@@ -39,14 +37,13 @@ export type TCollapseGroupProps = {
 export interface TCollapseItemTitleV2 extends ICollapseTitleProps {
     text?: string | ReactNode;
 }
-export type TCollapseV2Props = {
+export type TCollapseV2Props = IBaseProps & {
     isOpen?: boolean;
     toggle?: (isOpen: boolean) => void;
     children: ReactNode;
     title: TCollapseItemTitleV2;
     iconAlignment?: 'left' | 'right';
     hasIconBorder?: boolean;
-    dataId?: string | undefined;
     id?: string | number;
     className?: string;
 };

package/components/Container/Container.js

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

package/components/Container/types.d.ts

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

package/components/Copy/types.d.ts

@@ -1,6 +1,5 @@
-export type TCopyProps = {
+export type TCopyProps = IBaseProps & {
     className?: string;
     textAfterCopy?: string;
     text: string;
-    dataId?: string;
 };

package/components/DarkModeSwitcher/DarkModeSwitcher.d.ts

@@ -1,11 +1,9 @@
 import React from 'react';
-type DarkModeSwitcherProps = {
+export declare const DarkModeSwitcher: React.ForwardRefExoticComponent<IBaseProps & {
     checked: boolean;
     onChange: (checked: boolean) => void;
     disabled?: boolean;
     id?: string;
     name?: string;
     className?: string;
-};
-export declare const DarkModeSwitcher: React.ForwardRefExoticComponent<DarkModeSwitcherProps & React.RefAttributes<HTMLInputElement>>;
-export {};
+} & React.RefAttributes<HTMLInputElement>>;

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 }, ref) => {
+export const DarkModeSwitcher = forwardRef(({ checked, onChange, disabled = false, id = 'dark-mode-switcher', name, className, dataId = '' }, ref) => {
     const _onChange = (e) => {
         if (disabled) {
             return;
         }
         onChange(e.target.checked);
     };
-    return (_jsx("label", { className: classNames('theme-switch', className, { 'is-disabled': disabled }), htmlFor: id, 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" }) }), _jsx("input", { ref: ref, id: id, name: name, type: "checkbox", checked: checked, disabled: disabled, onChange: _onChange, className: "theme-switch__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" }) })] }) }));
+    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` : '' }) })] }) }));
 });
 DarkModeSwitcher.displayName = 'DarkModeSwitcher';

package/components/DatePicker/types.d.ts

@@ -2,7 +2,6 @@ import { DatePickerProps } from 'react-datepicker';
 import { ReactNode } from 'react';
 type DatePickerDefaultProps = Omit<IFormCompProps, 'value'> & Omit<DatePickerProps, 'onChange' | 'value'>;
 export interface TDatepickerBaseProps extends DatePickerDefaultProps {
-    dataId?: string;
     dataIdPrefix?: string;
     label?: ReactNode;
     format?: string;

package/components/Divider/Divider.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import classnames from 'classnames';
 export const Divider = (props) => {
-    const { type = 'primary', isHorizontal, className, color = 'light-grey' } = props;
-    return (_jsx("hr", { className: classnames('divider', `divider--${type}`, `divider--${color}`, {
+    const { type = 'primary', isHorizontal, className, color = 'light-grey', dataId = '' } = props;
+    return (_jsx("hr", { "data-id": dataId, className: classnames('divider', `divider--${type}`, `divider--${color}`, {
             'divider--horizontal': isHorizontal,
             'divider--vertical': !isHorizontal
         }, className) }));

package/components/Divider/types.d.ts

@@ -1,4 +1,4 @@
-export interface TDividerProps {
+export interface TDividerProps extends IBaseProps {
     type: 'primary' | 'secondary';
     isHorizontal?: boolean;
     className?: string;

package/components/Empty/Empty.js

@@ -6,6 +6,7 @@ import classNames from 'classnames';
 // @ts-ignore
 import noResultImage from '../../assets/images/no-result.svg';
 export const Empty = (props) => {
-    const { size = 'large', mainMessage, paragraphMessage, buttonProps, className, illustration = noResultImage } = props;
-    return (_jsxs("div", { className: classNames(`no-result ${size == 'large' ? 'no-result--large' : 'no-result--small'}`, className), children: [_jsx("div", { className: "no-result__icon", children: _jsx(Image, { imagePath: illustration }) }), _jsxs("div", { className: "no-result__content", children: [mainMessage ? (_jsx(Text, { size: size == 'large' ? 'large' : 'small', weight: "bold", children: mainMessage })) : null, paragraphMessage ? (_jsx(Text, { size: size == 'large' ? 'small' : 'xsmall', children: paragraphMessage })) : null, buttonProps ? _jsx(Button, Object.assign({}, buttonProps, { size: "medium", className: "mt-4" })) : null] })] }));
+    var _a;
+    const { size = 'large', mainMessage, paragraphMessage, buttonProps, className, illustration = noResultImage, dataId = '' } = props;
+    return (_jsxs("div", { "data-id": dataId, className: classNames(`no-result ${size == 'large' ? 'no-result--large' : 'no-result--small'}`, className), children: [_jsx("div", { className: "no-result__icon", children: _jsx(Image, { imagePath: illustration, dataId: dataId ? `${dataId}-image` : '' }) }), _jsxs("div", { className: "no-result__content", children: [mainMessage ? (_jsx(Text, { size: size == 'large' ? 'large' : 'small', weight: "bold", dataId: dataId ? `${dataId}-text` : '', children: mainMessage })) : null, paragraphMessage ? (_jsx(Text, { size: size == 'large' ? 'small' : 'xsmall', dataId: dataId ? `${dataId}-subtext` : '', children: paragraphMessage })) : null, buttonProps ? (_jsx(Button, Object.assign({}, buttonProps, { size: "medium", className: "mt-4", dataId: (_a = buttonProps.dataId) !== null && _a !== void 0 ? _a : (dataId ? `${dataId}-action` : '') }))) : null] })] }));
 };

package/components/Empty/types.d.ts

@@ -1,5 +1,5 @@
 import { TButtonPropTypes } from '../Button/types';
-export interface TEmptyProps {
+export interface TEmptyProps extends IBaseProps {
     size?: string;
     className?: string;
     mainMessage?: string;

package/components/FileUpload/DropzoneFileUpload/DropzoneFileUpload.js

@@ -10,7 +10,7 @@ import { generateAreaContent, getDropzoneLocale } from './helpers';
 import { ErrorItem } from './ErrorItem';
 import { PreviewItem } from './PreviewItem';
 import { uniqueFiles as _uniqueFiles } from '../../../utils/helpers';
-export const DropzoneFileUpload = forwardRef(({ maxSize = 10 * 1024 * 1024, allowedTypes = [FileTypeEnum.IMAGE, FileTypeEnum.PDF, FileTypeEnum.DOC], name, setFiles, setFieldValue, value, selectedFiles, maxFiles = 1, mode = FileUploadMode.attach, locale, multiple = false }, _ref) => {
+export const DropzoneFileUpload = forwardRef(({ maxSize = 10 * 1024 * 1024, allowedTypes = [FileTypeEnum.IMAGE, FileTypeEnum.PDF, FileTypeEnum.DOC], name, setFiles, setFieldValue, value, selectedFiles, maxFiles = 1, mode = FileUploadMode.attach, locale, multiple = false, dataId = '' }, _ref) => {
     const initialFiles = value || selectedFiles || [];
     const initialMaxFiles = initialFiles.length >= maxFiles ? 0 : maxFiles - initialFiles.length;
     const [errors, setErrors] = useState([]);
@@ -55,13 +55,13 @@ export const DropzoneFileUpload = forwardRef(({ maxSize = 10 * 1024 * 1024, allo
             setFieldValue(name, values);
         }
     }, [name, setFieldValue]);
-    return (_jsxs("div", { className: "dz-file-upload", children: [mode !== FileUploadMode.view ? (_jsxs("div", Object.assign({}, getRootProps(), { className: classnames('dz-file-upload__area', {
+    return (_jsxs("div", { className: "dz-file-upload", "data-id": dataId, children: [mode !== FileUploadMode.view ? (_jsxs("div", Object.assign({}, getRootProps(), { className: classnames('dz-file-upload__area', {
                     'dz-file-upload__area--focused': isFocused,
                     'dz-file-upload__area--active': isDragActive
-                }), children: [_jsx(IconUpload, { className: "mb-20", size: "xlarge" }), _jsx("input", Object.assign({}, getInputProps(), { name: name })), _jsx(Text, { type: "primary", weight: "semibold", className: "mb-6", children: translation.title }), _jsx(Text, { size: "small", children: `${areaContent.acceptTypesMessage} ${(allowedTypes === null || allowedTypes === void 0 ? void 0 : allowedTypes.length) === 1 ? translation.format : translation.formats}, ${translation.maxSize.replace('$1', areaContent.maxSizeFormatted)}` })] }))) : null, _jsxs("div", { className: "dz-file-upload__files", children: [errors.map(({ code }, index) => {
-                        return (_jsx(ErrorItem, { code: code, areaContent: areaContent, onRemove: () => removeError(index), locale: locale }, index));
+                }), "data-id": dataId ? `${dataId}-dropzone` : '', children: [_jsx(IconUpload, { className: "mb-20", size: "xlarge" }), _jsx("input", Object.assign({}, getInputProps(), { name: name, "data-id": dataId ? `${dataId}-input` : '' })), _jsx(Text, { type: "primary", weight: "semibold", className: "mb-6", children: translation.title }), _jsx(Text, { size: "small", children: `${areaContent.acceptTypesMessage} ${(allowedTypes === null || allowedTypes === void 0 ? void 0 : allowedTypes.length) === 1 ? translation.format : translation.formats}, ${translation.maxSize.replace('$1', areaContent.maxSizeFormatted)}` })] }))) : null, _jsxs("div", { className: "dz-file-upload__files", children: [errors.map(({ code }, index) => {
+                        return (_jsx(ErrorItem, { code: code, areaContent: areaContent, onRemove: () => removeError(index), locale: locale, dataId: dataId ? `${dataId}-error-${index}` : '' }, index));
                     }), initialFiles.map((file, index) => {
-                        return (_jsx(PreviewItem, { file: file, onRemove: () => removeFile(file.name), mode: mode }, index));
+                        return (_jsx(PreviewItem, { file: file, onRemove: () => removeFile(file.name), mode: mode, dataId: dataId ? `${dataId}-item-${index}` : '' }, index));
                     })] })] }));
 });
 DropzoneFileUpload.displayName = 'DropzoneFileUpload';

package/components/FileUpload/DropzoneFileUpload/ErrorItem.d.ts

@@ -5,6 +5,7 @@ interface IErrorItemProps {
     areaContent: AreaContentDTO;
     onRemove: () => void;
     locale?: string;
+    dataId?: string;
 }
-export declare const ErrorItem: ({ code, onRemove, areaContent, locale }: IErrorItemProps) => ReactElement | null;
+export declare const ErrorItem: ({ code, onRemove, areaContent, locale, dataId }: IErrorItemProps) => ReactElement | null;
 export {};

package/components/FileUpload/DropzoneFileUpload/ErrorItem.js

@@ -3,7 +3,7 @@ import { useMemo } from 'react';
 import { ErrorCode } from 'react-dropzone';
 import { Alert } from '../../Alert';
 import { getDropzoneLocale } from './helpers';
-export const ErrorItem = ({ code, onRemove, areaContent, locale }) => {
+export const ErrorItem = ({ code, onRemove, areaContent, locale, dataId = '' }) => {
     const errorMessage = useMemo(() => {
         const translation = getDropzoneLocale(locale);
         if (code === ErrorCode.FileInvalidType) {
@@ -17,5 +17,5 @@ export const ErrorItem = ({ code, onRemove, areaContent, locale }) => {
         }
         return '';
     }, [code]);
-    return errorMessage ? (_jsx(Alert, { type: "error", text: errorMessage, closeIcon: true, onClose: onRemove })) : null;
+    return errorMessage ? (_jsx(Alert, { type: "error", text: errorMessage, closeIcon: true, onClose: onRemove, dataId: dataId })) : null;
 };

package/components/FileUpload/DropzoneFileUpload/PreviewItem.d.ts

@@ -1,7 +1,8 @@
 import { ReactElement } from 'react';
 import { FileType, FileUploadMode } from '../types';
-export declare const PreviewItem: ({ file, onRemove, mode }: {
+export declare const PreviewItem: ({ file, onRemove, mode, dataId }: {
     file: FileType;
     onRemove: () => void;
     mode: FileUploadMode;
+    dataId?: string;
 }) => ReactElement;

package/components/FileUpload/DropzoneFileUpload/PreviewItem.js

@@ -9,7 +9,7 @@ import { formatFileSize, shortenFileName } from './helpers';
 import IconArrowDownloadFilled from '../../SVGIcons/IconArrowDownloadFilled';
 import classnames from 'classnames';
 import { downloadFile } from '../../../helpers';
-export const PreviewItem = ({ file, onRemove, mode }) => {
+export const PreviewItem = ({ file, onRemove, mode, dataId = '' }) => {
     const type = file.type.split('/')[0];
     const preview = useMemo(() => {
         return URL.createObjectURL(file);
@@ -26,5 +26,5 @@ export const PreviewItem = ({ file, onRemove, mode }) => {
     };
     return (_jsxs("div", { className: classnames('dz-file-upload__files--item', {
             'dz-file-upload__files--item--view': mode === FileUploadMode.view
-        }), onClick: handleItemClick, children: [_jsx("div", { className: 'dz-file-upload__files--item__preview', children: _jsx(FilePreview, { preview: preview, type: type }) }), _jsxs("div", { className: 'dz-file-upload__files--item__info', children: [_jsxs("div", { className: "dz-file-upload__files--item__info-title", children: [_jsx(Text, { weight: "semibold", children: shortenFileName(file.name, 40) }), mode === FileUploadMode.attach && (_jsx(Button, { size: "small", type: "tertiary", onClick: onRemove, iconProps: { Component: IconDelete } })), mode === FileUploadMode.view && (_jsx(Button, { size: "small", type: "tertiary", onClick: onFileDownload, iconProps: { Component: IconArrowDownloadFilled } }))] }), _jsx("div", { className: "dz-file-upload__files--item__info-size", children: _jsx(Text, { size: "small", children: formatFileSize(file.size) }) })] })] }));
+        }), "data-id": dataId, onClick: handleItemClick, children: [_jsx("div", { className: 'dz-file-upload__files--item__preview', children: _jsx(FilePreview, { preview: preview, type: type }) }), _jsxs("div", { className: 'dz-file-upload__files--item__info', children: [_jsxs("div", { className: "dz-file-upload__files--item__info-title", children: [_jsx(Text, { weight: "semibold", dataId: dataId ? `${dataId}-text` : '', children: shortenFileName(file.name, 40) }), mode === FileUploadMode.attach && (_jsx(Button, { size: "small", type: "tertiary", onClick: onRemove, iconProps: { Component: IconDelete }, dataId: dataId ? `${dataId}-close` : '' })), mode === FileUploadMode.view && (_jsx(Button, { size: "small", type: "tertiary", onClick: onFileDownload, iconProps: { Component: IconArrowDownloadFilled }, dataId: dataId ? `${dataId}-action` : '' }))] }), _jsx("div", { className: "dz-file-upload__files--item__info-size", children: _jsx(Text, { size: "small", dataId: dataId ? `${dataId}-size` : '', children: formatFileSize(file.size) }) })] })] }));
 };

package/components/FileUpload/FileUpload.js

@@ -10,7 +10,7 @@ import IconEditFilled from '../SVGIcons/IconEditFilled';
 import IconEdit from '../SVGIcons/IconEdit';
 import IconAttach from '../SVGIcons/IconAttach';
 export const FileUpload = (props) => {
-    const { allowedTypes = 'application/pdf, .png, .jpg, .jpeg, image/jpeg, image/png, image/jpg, text/plain, image/*, .pdf, .doc, .docx, application/vnd', label, getFiles, removeFiles, handleFileClick, name, setFieldValue, toBase64, required, disabled, buttonText, withFilePreview = true, multiple = true, uploadedFiles, value, labelAddons, onError, fileAllowedSize, mode = FileUploadMode.attach } = props;
+    const { allowedTypes = 'application/pdf, .png, .jpg, .jpeg, image/jpeg, image/png, image/jpg, text/plain, image/*, .pdf, .doc, .docx, application/vnd', label, getFiles, removeFiles, handleFileClick, name, setFieldValue, toBase64, required, disabled, buttonText, withFilePreview = true, multiple = true, uploadedFiles, value, labelAddons, onError, fileAllowedSize, mode = FileUploadMode.attach, dataId = '' } = props;
     const files = value || uploadedFiles || [];
     const fileInputRef = useRef(null);
     const [isHovered, setHoverState] = useState(false);
@@ -66,5 +66,5 @@ export const FileUpload = (props) => {
             }
         }
     }, [files, removeFiles]);
-    return (_jsxs("div", { className: "file-upload", children: [_jsx(Label, { text: label, required: required, disabled: disabled, labelAddons: labelAddons }), _jsxs("div", { className: "file-upload__inner", children: [_jsx("input", { name: name, type: "file", multiple: multiple, className: "hide", ref: fileInputRef, accept: allowedTypes, onChange: handleChange }), mode === FileUploadMode.edit && (_jsx("div", { className: "edit__icon", onMouseEnter: onMouseEnterOrLeave, onMouseLeave: onMouseEnterOrLeave, onClick: onUploadClick, children: isHovered ? (_jsx(IconEditFilled, { size: "xxsmall", type: "secondary" })) : (_jsx(IconEdit, { size: "xxsmall", type: "secondary" })) })), mode === FileUploadMode.attach && (_jsx(Button, { type: "secondary", size: "medium", disabled: disabled, iconProps: { Component: IconAttach }, onClick: onUploadClick, buttonText: buttonText })), _jsx(UploadItems, { handleFileClick: handleFileClick, onRemove: handleFileRemove, files: files, withFilePreview: withFilePreview })] })] }));
+    return (_jsxs("div", { className: "file-upload", "data-id": dataId, children: [_jsx(Label, { text: label, required: required, disabled: disabled, labelAddons: labelAddons, dataId: dataId ? `${dataId}-label` : '' }), _jsxs("div", { className: "file-upload__inner", children: [_jsx("input", { name: name, type: "file", multiple: multiple, className: "hide", ref: fileInputRef, accept: allowedTypes, "data-id": dataId ? `${dataId}-input` : '', onChange: handleChange }), mode === FileUploadMode.edit && (_jsx("div", { className: "edit__icon", "data-id": dataId ? `${dataId}-trigger` : '', onMouseEnter: onMouseEnterOrLeave, onMouseLeave: onMouseEnterOrLeave, onClick: onUploadClick, children: isHovered ? (_jsx(IconEditFilled, { size: "xxsmall", type: "secondary" })) : (_jsx(IconEdit, { size: "xxsmall", type: "secondary" })) })), mode === FileUploadMode.attach && (_jsx(Button, { type: "secondary", size: "medium", disabled: disabled, iconProps: { Component: IconAttach }, onClick: onUploadClick, buttonText: buttonText, dataId: dataId ? `${dataId}-action` : '' })), _jsx(UploadItems, { handleFileClick: handleFileClick, onRemove: handleFileRemove, files: files, withFilePreview: withFilePreview, dataId: dataId })] })] }));
 };

package/components/FileUpload/UploadItems.js

@@ -6,17 +6,17 @@ import { ErrorMessage } from '../../helperComponents/ErrorMessage';
 import { Button } from '../Button';
 import IconDelete from '../SVGIcons/IconDelete';
 export const UploadItems = (props) => {
-    const { files, onRemove, withFilePreview, handleFileClick } = props;
+    const { files, onRemove, withFilePreview, handleFileClick, dataId = '' } = props;
     const { errors } = useFormProps();
     const filesErrors = errors && errors.files && errors.files.length > 0;
     return (_jsx(_Fragment, { children: files.map((file, index) => {
             var _a, _b;
-            return (_jsx("div", { className: `upload-item mt-4 ${filesErrors && ((_a = errors.files[index]) === null || _a === void 0 ? void 0 : _a.message) ? 'upload-item--error' : ''}`, children: _jsx("div", { className: "upload-item__inner", children: _jsxs("div", { className: "upload-item__content mb-2", children: [_jsxs("div", { className: "upload-item__content__inner pr-8", children: [_jsx(Text, { size: "small", lineHeight: "medium", className: "upload-item__text", onClick: (e) => withFilePreview &&
+            return (_jsx("div", { className: `upload-item mt-4 ${filesErrors && ((_a = errors.files[index]) === null || _a === void 0 ? void 0 : _a.message) ? 'upload-item--error' : ''}`, "data-id": dataId ? `${dataId}-item-${index}` : '', children: _jsx("div", { className: "upload-item__inner", children: _jsxs("div", { className: "upload-item__content mb-2", children: [_jsxs("div", { className: "upload-item__content__inner pr-8", children: [_jsx(Text, { size: "small", lineHeight: "medium", className: "upload-item__text", dataId: dataId ? `${dataId}-item-${index}-text` : '', onClick: (e) => withFilePreview &&
                                             openFileInNewWindow({
                                                 e,
                                                 file,
                                                 handleFileClick
-                                            }), children: file.name }), filesErrors && _jsx(ErrorMessage, { message: (_b = errors.files[index]) === null || _b === void 0 ? void 0 : _b.message })] }), _jsx(Button, { type: "tertiary", size: "small", iconProps: { Component: IconDelete }, onClick: () => {
+                                            }), children: file.name }), filesErrors && (_jsx(ErrorMessage, { message: (_b = errors.files[index]) === null || _b === void 0 ? void 0 : _b.message, dataId: dataId ? `${dataId}-item-${index}` : '' }))] }), _jsx(Button, { type: "tertiary", size: "small", iconProps: { Component: IconDelete }, dataId: dataId ? `${dataId}-item-${index}-close` : '', onClick: () => {
                                     onRemove(file, index);
                                 } })] }) }) }, index));
         }) }));

package/components/FileUpload/types.d.ts

@@ -26,7 +26,7 @@ export declare enum FileUploadMode {
     attach = "attach",
     view = "view"
 }
-export interface IUploadItemPropTypes {
+export interface IUploadItemPropTypes extends IBaseProps {
     name?: string;
     onRemove: (file: File, index: number) => void;
     fileType?: string;

package/components/FormContainer/FormContainer.js

@@ -7,7 +7,7 @@ import classnames from 'classnames';
 import { FormContext } from '../../context';
 import { Button } from '../Button';
 export const FormContainer = (props) => {
-    const { children, className = '', shouldUnregister, shouldFocusError = true, mode = 'onBlur', initialValues, validationScheme, buttonConfigs, formId, language, onSubmit } = props;
+    const { children, className = '', shouldUnregister, shouldFocusError = true, mode = 'onBlur', initialValues, validationScheme, buttonConfigs, formId, language, onSubmit, dataId = '' } = props;
     const { handleSubmit, register, setValue, control, formState, getValues, watch, reset, clearErrors, setError, trigger, getFieldState, unregister } = useForm({
         mode: mode,
         resolver: yupResolver(validationScheme),
@@ -29,7 +29,7 @@ export const FormContainer = (props) => {
             }
         }
     }, [language]);
-    return (_jsx("form", { onSubmit: handleSubmit(customSubmit), id: formId, className: classnames('form-container', className), children: _jsx(FormContext.Provider, { value: {
+    return (_jsx("form", { onSubmit: handleSubmit(customSubmit), id: formId, "data-id": dataId, className: classnames('form-container', className), children: _jsx(FormContext.Provider, { value: {
                 trigger,
                 register,
                 errors,
@@ -48,7 +48,7 @@ export const FormContainer = (props) => {
                 unregister,
                 isValid,
                 onSubmit: () => handleSubmit(customSubmit)()
-            }, children: _jsxs(_Fragment, { children: [children, buttonConfigs && (_jsx("div", { className: "form-container__buttons", children: buttonConfigs.map((buttonConfig, index) => {
-                            return _createElement(Button, Object.assign({}, buttonConfig, { key: index }));
+            }, children: _jsxs(_Fragment, { children: [children, buttonConfigs && (_jsx("div", { className: "form-container__buttons", "data-id": dataId ? `${dataId}-buttons` : '', children: buttonConfigs.map((buttonConfig, index) => {
+                            return (_createElement(Button, Object.assign({}, buttonConfig, { key: index, dataId: dataId ? `${dataId}-button-${index}` : buttonConfig.dataId })));
                         }) }))] }) }) }));
 };

package/components/FormContainer/types.d.ts

@@ -5,7 +5,7 @@ import { TButtonPropTypes } from '../Button/types';
 export type TDirtyFields = Partial<Readonly<{
     [x: string]: unknown;
 }>>;
-export interface FormPropTypes {
+export interface FormPropTypes extends IBaseProps {
     className?: string;
     onSubmit?: (data: TFormData, formState: FormState<TFormData>, dirtyFields?: TDirtyFields) => void;
     children?: ReactNode;

package/components/FormField/types.d.ts

@@ -1,8 +1,7 @@
-export interface TFormFieldPropTypes {
+export interface TFormFieldPropTypes extends IBaseProps {
     As: (props: IFormCompProps) => React.ReactElement;
     name: string;
     className?: string;
-    dataId?: string;
     hideErrorMessage?: boolean;
     errorMessageIcon?: string;
     defaultValue?: any;

package/components/Heading/types.d.ts

@@ -1,5 +1,5 @@
 import { ElementType, ReactNode } from 'react';
-export interface HeadingPropTypes {
+export interface HeadingPropTypes extends IBaseProps {
     children?: ReactNode;
     type?: ElementType;
     size?: 'xsmall' | 'small' | 'standard' | 'medium' | 'large' | 'xlarge';
@@ -7,5 +7,4 @@ export interface HeadingPropTypes {
     lineHeight?: 'xsmall' | 'small' | 'medium' | 'large';
     className?: string;
     onClick?: (event: TClickEventType) => void;
-    dataId?: string;
 }