hrm_ui_lib 3.4.1 → 4.0.0

package/components/DatePicker/RangeDatePicker/RangeDatePickerMobile.js

@@ -22,7 +22,7 @@ import { Modal } from '../../Modal';
 import { CustomHeader } from '../CustomHeader/CustomHeader';
 import { formatDate } from '../../../helpers';
 export const RangeDatePickerMobile = forwardRef((props, _ref) => {
-    const { value, currentDates = [], setFieldValue, name, changeHandler, dataId, format = DateFormat.LongDate, maxDate, minDate, locale = 'hy', disabled, placeholderText, dataIdPrefix, modalOptions } = props, rest = __rest(props, ["value", "currentDates", "setFieldValue", "name", "changeHandler", "dataId", "format", "maxDate", "minDate", "locale", "disabled", "placeholderText", "dataIdPrefix", "modalOptions"]);
+    const { value, currentDates = [], setFieldValue, name, changeHandler, dataTestId, format = DateFormat.LongDate, maxDate, minDate, locale = 'hy', disabled, placeholderText, dataTestIdPrefix, modalOptions } = props, rest = __rest(props, ["value", "currentDates", "setFieldValue", "name", "changeHandler", "dataTestId", "format", "maxDate", "minDate", "locale", "disabled", "placeholderText", "dataTestIdPrefix", "modalOptions"]);
     useImportFilesDynamically(locale);
     const startYear = minDate ? minDate.getFullYear() : 1900;
     const endYear = maxDate ? maxDate.getFullYear() : new Date().getFullYear() + 5;
@@ -76,7 +76,7 @@ export const RangeDatePickerMobile = forwardRef((props, _ref) => {
         closeDatepicker();
     };
     const [startDate, endDate] = rangeArray;
-    return (_jsxs(_Fragment, { children: [_jsx(Input, { readOnly: true, onClick: openDatepicker, dataId: dataId, disabled: disabled, placeholder: placeholderText, currentValue: renderCurrentSelectedDate(rangeArray), rightIconProps: { Component: IconCalendarRight, onClick: openDatepicker } }), _jsxs(Modal, { isOpen: isCalendarOpen, title: modalOptions === null || modalOptions === void 0 ? void 0 : modalOptions.title, onClose: closeDatepicker, buttonProps: {
+    return (_jsxs(_Fragment, { children: [_jsx(Input, { readOnly: true, onClick: openDatepicker, dataTestId: dataTestId, disabled: disabled, placeholder: placeholderText, currentValue: renderCurrentSelectedDate(rangeArray), rightIconProps: { Component: IconCalendarRight, onClick: openDatepicker } }), _jsxs(Modal, { isOpen: isCalendarOpen, title: modalOptions === null || modalOptions === void 0 ? void 0 : modalOptions.title, onClose: closeDatepicker, buttonProps: {
                     confirm: {
                         buttonText: modalOptions === null || modalOptions === void 0 ? void 0 : modalOptions.btnConfirmText,
                         onClick: onApply
@@ -85,6 +85,6 @@ export const RangeDatePickerMobile = forwardRef((props, _ref) => {
                         buttonText: modalOptions === null || modalOptions === void 0 ? void 0 : modalOptions.btnCancelText,
                         onClick: closeDatepicker
                     }
-                }, closeIcon: true, children: [_jsxs("div", { className: "flexbox justify-content--between mb-16 gap-16", children: [_jsx(Input, { readOnly: true, value: formatDate(startDate, format) }), _jsx(Input, { readOnly: true, value: formatDate(endDate, format) })] }), _jsx(DatePicker, Object.assign({}, rest, { inline: true, locale: locale, minDate: minDate, maxDate: maxDate, startDate: startDate, endDate: endDate, selectsRange: true, disabled: disabled, onChange: onChange, onClickOutside: checkRange, renderCustomHeader: (props) => (_jsx(CustomHeader, Object.assign({}, props, { locale: locale, startYear: startYear, endYear: endYear, dataPrefix: dataIdPrefix, isMobile: true }))) }))] })] }));
+                }, closeIcon: true, children: [_jsxs("div", { className: "flexbox justify-content--between mb-16 gap-16", children: [_jsx(Input, { readOnly: true, value: formatDate(startDate, format) }), _jsx(Input, { readOnly: true, value: formatDate(endDate, format) })] }), _jsx(DatePicker, Object.assign({}, rest, { inline: true, locale: locale, minDate: minDate, maxDate: maxDate, startDate: startDate, endDate: endDate, selectsRange: true, disabled: disabled, onChange: onChange, onClickOutside: checkRange, renderCustomHeader: (props) => (_jsx(CustomHeader, Object.assign({}, props, { locale: locale, startYear: startYear, endYear: endYear, dataPrefix: dataTestIdPrefix, isMobile: true }))) }))] })] }));
 });
 RangeDatePickerMobile.displayName = 'RangeDatePickerMobile';

package/components/DatePicker/SimpleDatePicker/SimpleDatePickerDesktop.js

@@ -19,7 +19,7 @@ import { CustomHeader } from '../CustomHeader/CustomHeader';
 import { useImportFilesDynamically } from '../hooks';
 import IconCalendarRight from '../../SVGIcons/IconCalendarRight';
 export const SimpleDatePickerDesktop = (props) => {
-    const { value, currentDate, setFieldValue, name, label, size, locale = 'hy', changeHandler, format = 'M/D/YYYY', required = false, dataId, hasError, placeholderText, minDate, maxDate, dataIdPrefix, helperText, inline } = props, rest = __rest(props, ["value", "currentDate", "setFieldValue", "name", "label", "size", "locale", "changeHandler", "format", "required", "dataId", "hasError", "placeholderText", "minDate", "maxDate", "dataIdPrefix", "helperText", "inline"]);
+    const { value, currentDate, setFieldValue, name, label, size, locale = 'hy', changeHandler, format = 'M/D/YYYY', required = false, dataTestId, hasError, placeholderText, minDate, maxDate, dataTestIdPrefix, helperText, inline } = props, rest = __rest(props, ["value", "currentDate", "setFieldValue", "name", "label", "size", "locale", "changeHandler", "format", "required", "dataTestId", "hasError", "placeholderText", "minDate", "maxDate", "dataTestIdPrefix", "helperText", "inline"]);
     const startYear = minDate ? minDate.getFullYear() : 1900;
     const endYear = maxDate ? maxDate.getFullYear() : new Date().getFullYear() + 5;
     const calendarRef = useRef(null);
@@ -44,5 +44,5 @@ export const SimpleDatePickerDesktop = (props) => {
     };
     return (_jsxs("div", { className: "picker-container", children: [_jsx(Label, { text: label, required: required, invalid: hasError }), _jsx(DatePicker, Object.assign({ minDate: minDate, maxDate: maxDate, selected: dayjs(selectedDate).isValid() ? selectedDate : null, locale: locale, 
                 // @ts-ignore
-                ref: calendarRef, customInput: _jsx(Input, { size: size, dataId: dataId, helperText: helperText, datePlaceHolderText: label ? '' : placeholderText, rightIconProps: { Component: IconCalendarRight, onClick: openDatepicker }, currentValue: selectedDate ? dayjs(selectedDate.toString()).format(format) : '' }), inline: inline }, rest, { onChange: onChange, renderCustomHeader: (props) => (_jsx(CustomHeader, Object.assign({}, props, { locale: locale, startYear: startYear, endYear: endYear, dataPrefix: dataIdPrefix }))) }))] }));
+                ref: calendarRef, customInput: _jsx(Input, { size: size, dataTestId: dataTestId, helperText: helperText, datePlaceHolderText: label ? '' : placeholderText, rightIconProps: { Component: IconCalendarRight, onClick: openDatepicker }, currentValue: selectedDate ? dayjs(selectedDate.toString()).format(format) : '' }), inline: inline }, rest, { onChange: onChange, renderCustomHeader: (props) => (_jsx(CustomHeader, Object.assign({}, props, { locale: locale, startYear: startYear, endYear: endYear, dataPrefix: dataTestIdPrefix }))) }))] }));
 };

package/components/DatePicker/SimpleDatePicker/SimpleDatePickerMobile.js

@@ -21,7 +21,7 @@ import { CustomHeader } from '../CustomHeader/CustomHeader';
 import DatePicker from 'react-datepicker';
 import { Label } from '../../../helperComponents/Label';
 export const SimpleDatePickerMobile = (props) => {
-    const { size, dataId, helperText, label, placeholderText, format = 'M/D/YYYY', value, currentDate, minDate, maxDate, locale = 'hy', dataIdPrefix, modalOptions, name, changeHandler, setFieldValue, required, hasError } = props, rest = __rest(props, ["size", "dataId", "helperText", "label", "placeholderText", "format", "value", "currentDate", "minDate", "maxDate", "locale", "dataIdPrefix", "modalOptions", "name", "changeHandler", "setFieldValue", "required", "hasError"]);
+    const { size, dataTestId, helperText, label, placeholderText, format = 'M/D/YYYY', value, currentDate, minDate, maxDate, locale = 'hy', dataTestIdPrefix, modalOptions, name, changeHandler, setFieldValue, required, hasError } = props, rest = __rest(props, ["size", "dataTestId", "helperText", "label", "placeholderText", "format", "value", "currentDate", "minDate", "maxDate", "locale", "dataTestIdPrefix", "modalOptions", "name", "changeHandler", "setFieldValue", "required", "hasError"]);
     const startYear = minDate ? minDate.getFullYear() : 1900;
     const endYear = maxDate ? maxDate.getFullYear() : new Date().getFullYear() + 5;
     const [isCalendarOpen, setIsCalendarOpen] = React.useState(false);
@@ -44,5 +44,5 @@ export const SimpleDatePickerMobile = (props) => {
         }
         closeDatepicker();
     };
-    return (_jsxs(_Fragment, { children: [_jsx(Label, { text: label, required: required, invalid: hasError }), _jsx(Input, { size: size, onClick: openDatepicker, dataId: dataId, readOnly: true, helperText: helperText, datePlaceHolderText: label ? '' : placeholderText, rightIconProps: { Component: IconCalendarRight, onClick: openDatepicker }, currentValue: selectedDate ? dayjs(selectedDate.toString()).format(format) : '' }), _jsx(Modal, { isOpen: isCalendarOpen, title: modalOptions === null || modalOptions === void 0 ? void 0 : modalOptions.title, onClose: closeDatepicker, withFooter: false, closeIcon: true, children: _jsx(DatePicker, Object.assign({ minDate: minDate, maxDate: maxDate, selected: dayjs(selectedDate).isValid() ? selectedDate : null, locale: locale, inline: true }, rest, { onChange: onChange, renderCustomHeader: (props) => (_jsx(CustomHeader, Object.assign({}, props, { locale: locale, startYear: startYear, endYear: endYear, dataPrefix: dataIdPrefix, isMobile: true }))) })) })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(Label, { text: label, required: required, invalid: hasError }), _jsx(Input, { size: size, onClick: openDatepicker, dataTestId: dataTestId, readOnly: true, helperText: helperText, datePlaceHolderText: label ? '' : placeholderText, rightIconProps: { Component: IconCalendarRight, onClick: openDatepicker }, currentValue: selectedDate ? dayjs(selectedDate.toString()).format(format) : '' }), _jsx(Modal, { isOpen: isCalendarOpen, title: modalOptions === null || modalOptions === void 0 ? void 0 : modalOptions.title, onClose: closeDatepicker, withFooter: false, closeIcon: true, children: _jsx(DatePicker, Object.assign({ minDate: minDate, maxDate: maxDate, selected: dayjs(selectedDate).isValid() ? selectedDate : null, locale: locale, inline: true }, rest, { onChange: onChange, renderCustomHeader: (props) => (_jsx(CustomHeader, Object.assign({}, props, { locale: locale, startYear: startYear, endYear: endYear, dataPrefix: dataTestIdPrefix, isMobile: true }))) })) })] }));
 };

package/components/DatePicker/TimePicker/TimePickerDesktop.js

@@ -18,7 +18,7 @@ import { Label } from '../../../helperComponents/Label';
 import { useImportFilesDynamically } from '../hooks';
 import IconClock from '../../SVGIcons/IconClock';
 export const TimePickerDesktop = (props) => {
-    const { value, currentTime, name, setFieldValue, label, size, dataId, changeHandler, required, format = 'HH:mm', locale = 'hy', hasError } = props, rest = __rest(props, ["value", "currentTime", "name", "setFieldValue", "label", "size", "dataId", "changeHandler", "required", "format", "locale", "hasError"]);
+    const { value, currentTime, name, setFieldValue, label, size, dataTestId, changeHandler, required, format = 'HH:mm', locale = 'hy', hasError } = props, rest = __rest(props, ["value", "currentTime", "name", "setFieldValue", "label", "size", "dataTestId", "changeHandler", "required", "format", "locale", "hasError"]);
     const [time, setTime] = useState();
     const dateInitialValue = value !== undefined && Object.prototype.toString.call(value) === '[object Date]'
         ? value
@@ -63,5 +63,5 @@ export const TimePickerDesktop = (props) => {
     };
     return (_jsxs("div", { className: "picker-container input__inner", children: [_jsx(Label, { text: label, required: required, invalid: hasError }), _jsx(DatePicker, Object.assign({ selected: dayjs(dateInitialValue).isValid() ? dateInitialValue : null, locale: locale, showTimeSelect: true, showTimeSelectOnly: true, dateFormat: format, 
                 // @ts-ignore
-                ref: calendarRef }, rest, { onChange: onChange, customInput: _jsx(Input, { handleChange: onInputChange, handleBlurEvent: formatAndSetTime, disabled: rest.disabled, dataId: dataId, size: size, rightIconProps: { Component: IconClock, onClick: openDatepicker } }) }))] }));
+                ref: calendarRef }, rest, { onChange: onChange, customInput: _jsx(Input, { handleChange: onInputChange, handleBlurEvent: formatAndSetTime, disabled: rest.disabled, dataTestId: dataTestId, size: size, rightIconProps: { Component: IconClock, onClick: openDatepicker } }) }))] }));
 };

package/components/DatePicker/TimePicker/TimePickerMobile.js

@@ -6,7 +6,7 @@ import IconCalendarRight from '../../SVGIcons/IconCalendarRight';
 import dayjs from 'dayjs';
 import { MobileModalContent } from './MobileModalContent';
 export const TimePickerMobile = (props) => {
-    const { value, currentTime, format = 'HH:mm', label, required, hasError, size, placeholderText, dataId, changeHandler, setFieldValue, modalOptions, name } = props;
+    const { value, currentTime, format = 'HH:mm', label, required, hasError, size, placeholderText, dataTestId, changeHandler, setFieldValue, modalOptions, name } = props;
     const selectedTime = value !== undefined && Object.prototype.toString.call(value) === '[object Date]'
         ? value
         : currentTime;
@@ -25,5 +25,5 @@ export const TimePickerMobile = (props) => {
         onChange(selectedTime);
         closeTimePicker();
     };
-    return (_jsxs(_Fragment, { children: [_jsx(Label, { text: label, required: required, invalid: hasError }), _jsx(Input, { size: size, onClick: openTimePicker, dataId: dataId, readOnly: true, datePlaceHolderText: label ? '' : placeholderText, rightIconProps: { Component: IconCalendarRight, onClick: openTimePicker }, currentValue: selectedTime ? dayjs(selectedTime.toString()).format(format) : '' }), _jsx(MobileModalContent, { dateInitialValue: selectedTime, onApply: onApply, mobileTitle: modalOptions === null || modalOptions === void 0 ? void 0 : modalOptions.title, isOpen: isPickerOpen, closeTimePicker: closeTimePicker, modalApplyButtonText: modalOptions === null || modalOptions === void 0 ? void 0 : modalOptions.btnConfirmText })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(Label, { text: label, required: required, invalid: hasError }), _jsx(Input, { size: size, onClick: openTimePicker, dataTestId: dataTestId, readOnly: true, datePlaceHolderText: label ? '' : placeholderText, rightIconProps: { Component: IconCalendarRight, onClick: openTimePicker }, currentValue: selectedTime ? dayjs(selectedTime.toString()).format(format) : '' }), _jsx(MobileModalContent, { dateInitialValue: selectedTime, onApply: onApply, mobileTitle: modalOptions === null || modalOptions === void 0 ? void 0 : modalOptions.title, isOpen: isPickerOpen, closeTimePicker: closeTimePicker, modalApplyButtonText: modalOptions === null || modalOptions === void 0 ? void 0 : modalOptions.btnConfirmText })] }));
 };

package/components/DatePicker/types.d.ts

@@ -1,8 +1,9 @@
+import { IFormCompProps } from '../../type';
 import { DatePickerProps } from 'react-datepicker';
 import { ReactNode } from 'react';
 type DatePickerDefaultProps = Omit<IFormCompProps, 'value'> & Omit<DatePickerProps, 'onChange' | 'value'>;
 export interface TDatepickerBaseProps extends DatePickerDefaultProps {
-    dataIdPrefix?: string;
+    dataTestIdPrefix?: string;
     label?: ReactNode;
     format?: string;
     inline?: boolean;

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', dataId = '' } = props;
-    return (_jsx("hr", { "data-id": dataId, className: classnames('divider', `divider--${type}`, `divider--${color}`, {
+    const { type = 'primary', isHorizontal, className, color = 'light-grey', dataTestId = '' } = props;
+    return (_jsx("hr", { "data-test-id": dataTestId, className: classnames('divider', `divider--${type}`, `divider--${color}`, {
             'divider--horizontal': isHorizontal,
             'divider--vertical': !isHorizontal
         }, className) }));

package/components/Divider/types.d.ts

@@ -1,3 +1,4 @@
+import { IBaseProps } from '../../type';
 export interface TDividerProps extends IBaseProps {
     type: 'primary' | 'secondary';
     isHorizontal?: boolean;

package/components/Empty/Empty.js

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

package/components/Empty/types.d.ts

@@ -1,3 +1,4 @@
+import { IBaseProps } from '../../type';
 import { TButtonPropTypes } from '../Button/types';
 export interface TEmptyProps extends IBaseProps {
     size?: 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, dataId = '' }, _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, dataTestId = '' }, _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", "data-id": dataId, children: [mode !== FileUploadMode.view ? (_jsxs("div", Object.assign({}, getRootProps(), { className: classnames('dz-file-upload__area', {
+    return (_jsxs("div", { className: "dz-file-upload", "data-test-id": dataTestId, 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
-                }), "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));
+                }), "data-test-id": dataTestId ? `${dataTestId}-dropzone` : '', children: [_jsx(IconUpload, { className: "mb-20", size: "xlarge" }), _jsx("input", Object.assign({}, getInputProps(), { name: name, "data-test-id": dataTestId ? `${dataTestId}-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, dataTestId: dataTestId ? `${dataTestId}-error-${index}` : '' }, index));
                     }), initialFiles.map((file, index) => {
-                        return (_jsx(PreviewItem, { file: file, onRemove: () => removeFile(file.name), mode: mode, dataId: dataId ? `${dataId}-item-${index}` : '' }, index));
+                        return (_jsx(PreviewItem, { file: file, onRemove: () => removeFile(file.name), mode: mode, dataTestId: dataTestId ? `${dataTestId}-item-${index}` : '' }, index));
                     })] })] }));
 });
 DropzoneFileUpload.displayName = 'DropzoneFileUpload';

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

@@ -5,7 +5,7 @@ interface IErrorItemProps {
     areaContent: AreaContentDTO;
     onRemove: () => void;
     locale?: string;
-    dataId?: string;
+    dataTestId?: string;
 }
-export declare const ErrorItem: ({ code, onRemove, areaContent, locale, dataId }: IErrorItemProps) => ReactElement | null;
+export declare const ErrorItem: ({ code, onRemove, areaContent, locale, dataTestId }: 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, dataId = '' }) => {
+export const ErrorItem = ({ code, onRemove, areaContent, locale, dataTestId = '' }) => {
     const errorMessage = useMemo(() => {
         const translation = getDropzoneLocale(locale);
         if (code === ErrorCode.FileInvalidType) {
@@ -17,5 +17,5 @@ export const ErrorItem = ({ code, onRemove, areaContent, locale, dataId = '' })
         }
         return '';
     }, [code]);
-    return errorMessage ? (_jsx(Alert, { type: "error", text: errorMessage, closeIcon: true, onClose: onRemove, dataId: dataId })) : null;
+    return errorMessage ? (_jsx(Alert, { type: "error", text: errorMessage, closeIcon: true, onClose: onRemove, dataTestId: dataTestId })) : null;
 };

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

@@ -1,8 +1,8 @@
 import { ReactElement } from 'react';
 import { FileType, FileUploadMode } from '../types';
-export declare const PreviewItem: ({ file, onRemove, mode, dataId }: {
+export declare const PreviewItem: ({ file, onRemove, mode, dataTestId }: {
     file: FileType;
     onRemove: () => void;
     mode: FileUploadMode;
-    dataId?: string;
+    dataTestId?: 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, dataId = '' }) => {
+export const PreviewItem = ({ file, onRemove, mode, dataTestId = '' }) => {
     const type = file.type.split('/')[0];
     const preview = useMemo(() => {
         return URL.createObjectURL(file);
@@ -26,5 +26,5 @@ export const PreviewItem = ({ file, onRemove, mode, dataId = '' }) => {
     };
     return (_jsxs("div", { className: classnames('dz-file-upload__files--item', {
             'dz-file-upload__files--item--view': mode === FileUploadMode.view
-        }), "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) }) })] })] }));
+        }), "data-test-id": dataTestId, 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", dataTestId: dataTestId ? `${dataTestId}-text` : '', children: shortenFileName(file.name, 40) }), mode === FileUploadMode.attach && (_jsx(Button, { size: "small", type: "tertiary", onClick: onRemove, iconProps: { Component: IconDelete }, dataTestId: dataTestId ? `${dataTestId}-close` : '' })), mode === FileUploadMode.view && (_jsx(Button, { size: "small", type: "tertiary", onClick: onFileDownload, iconProps: { Component: IconArrowDownloadFilled }, dataTestId: dataTestId ? `${dataTestId}-action` : '' }))] }), _jsx("div", { className: "dz-file-upload__files--item__info-size", children: _jsx(Text, { size: "small", dataTestId: dataTestId ? `${dataTestId}-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, dataId = '' } = 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, dataTestId = '' } = 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", "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 })] })] }));
+    return (_jsxs("div", { className: "file-upload", "data-test-id": dataTestId, children: [_jsx(Label, { text: label, required: required, disabled: disabled, labelAddons: labelAddons, dataTestId: dataTestId ? `${dataTestId}-label` : '' }), _jsxs("div", { className: "file-upload__inner", children: [_jsx("input", { name: name, type: "file", multiple: multiple, className: "hide", ref: fileInputRef, accept: allowedTypes, "data-test-id": dataTestId ? `${dataTestId}-input` : '', onChange: handleChange }), mode === FileUploadMode.edit && (_jsx("div", { className: "edit__icon", "data-test-id": dataTestId ? `${dataTestId}-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, dataTestId: dataTestId ? `${dataTestId}-action` : '' })), _jsx(UploadItems, { handleFileClick: handleFileClick, onRemove: handleFileRemove, files: files, withFilePreview: withFilePreview, dataTestId: dataTestId })] })] }));
 };

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, dataId = '' } = props;
+    const { files, onRemove, withFilePreview, handleFileClick, dataTestId = '' } = 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' : ''}`, "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 &&
+            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-test-id": dataTestId ? `${dataTestId}-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", dataTestId: dataTestId ? `${dataTestId}-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, dataId: dataId ? `${dataId}-item-${index}` : '' }))] }), _jsx(Button, { type: "tertiary", size: "small", iconProps: { Component: IconDelete }, dataId: dataId ? `${dataId}-item-${index}-close` : '', onClick: () => {
+                                            }), children: file.name }), filesErrors && (_jsx(ErrorMessage, { message: (_b = errors.files[index]) === null || _b === void 0 ? void 0 : _b.message, dataTestId: dataTestId ? `${dataTestId}-item-${index}` : '' }))] }), _jsx(Button, { type: "tertiary", size: "small", iconProps: { Component: IconDelete }, dataTestId: dataTestId ? `${dataTestId}-item-${index}-close` : '', onClick: () => {
                                     onRemove(file, index);
                                 } })] }) }) }, index));
         }) }));

package/components/FileUpload/types.d.ts

@@ -1,5 +1,5 @@
 import { FILE_UPLOAD_ERRORS } from '../../consts';
-import { FileTypeEnum } from '../../type';
+import { FileTypeEnum, IBaseProps, IFormCompProps } from '../../type';
 import { Dispatch, SetStateAction } from 'react';
 import { Accept, DropzoneOptions } from 'react-dropzone';
 export interface TFileUploadProps extends IFormCompProps {

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, dataId = '' } = props;
+    const { children, className = '', shouldUnregister, shouldFocusError = true, mode = 'onBlur', initialValues, validationScheme, buttonConfigs, formId, language, onSubmit, dataTestId = '' } = 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, "data-id": dataId, className: classnames('form-container', className), children: _jsx(FormContext.Provider, { value: {
+    return (_jsx("form", { onSubmit: handleSubmit(customSubmit), id: formId, "data-test-id": dataTestId, 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", "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 })));
+            }, children: _jsxs(_Fragment, { children: [children, buttonConfigs && (_jsx("div", { className: "form-container__buttons", "data-test-id": dataTestId ? `${dataTestId}-buttons` : '', children: buttonConfigs.map((buttonConfig, index) => {
+                            return (_createElement(Button, Object.assign({}, buttonConfig, { key: index, dataTestId: dataTestId ? `${dataTestId}-button-${index}` : buttonConfig.dataTestId })));
                         }) }))] }) }) }));
 };

package/components/FormContainer/types.d.ts

@@ -1,3 +1,4 @@
+import { IBaseProps } from '../../type';
 import { ReactNode } from 'react';
 import { FormState, ValidationMode } from 'react-hook-form';
 import { AnyObjectSchema } from 'yup';

package/components/FormField/FormField.js

@@ -6,7 +6,7 @@ import { FormContext } from '../../context';
 import { Controller } from 'react-hook-form';
 import classnames from 'classnames';
 export const FormField = (props) => {
-    const { As, name, className = '', dataId = '', hideErrorMessage = false, errorMessageIcon, defaultValue } = props;
+    const { As, name, className = '', dataTestId = '', hideErrorMessage = false, errorMessageIcon, defaultValue } = props;
     const { register, errors, setValue, control } = useContext(FormContext);
     if (!register) {
         return null;
@@ -14,8 +14,8 @@ export const FormField = (props) => {
     const registerOptions = register(name);
     return (_jsx("div", { className: classnames('form-container__field', className, name), children: _jsx(Controller, Object.assign({ control: control, name: name }, (defaultValue ? { defaultValue } : {}), { render: ({ field, fieldState }) => {
                 var _a;
-                return (_jsxs(_Fragment, { children: [As(Object.assign(Object.assign(Object.assign({ hasError: !!fieldState.error, isValid: fieldState.isTouched && fieldState.isDirty && !fieldState.invalid, dataId }, registerOptions), { setFieldValue: (data, name, options) => setValue(data, name, Object.assign({ shouldValidate: true, shouldDirty: true, shouldTouch: true }, options)) }), field)), !hideErrorMessage ? (_jsx(ReactHookFormErrorMessage, { name: ((_a = errors === null || errors === void 0 ? void 0 : errors[name]) === null || _a === void 0 ? void 0 : _a.root) ? `${name}.root` : name, errors: errors, render: ({ message }) => {
-                                return (_jsx(ErrorMessage, { dataId: dataId, message: message || '', className: "full-width", icon: errorMessageIcon }));
+                return (_jsxs(_Fragment, { children: [As(Object.assign(Object.assign(Object.assign({ hasError: !!fieldState.error, isValid: fieldState.isTouched && fieldState.isDirty && !fieldState.invalid, dataTestId }, registerOptions), { setFieldValue: (data, name, options) => setValue(data, name, Object.assign({ shouldValidate: true, shouldDirty: true, shouldTouch: true }, options)) }), field)), !hideErrorMessage ? (_jsx(ReactHookFormErrorMessage, { name: ((_a = errors === null || errors === void 0 ? void 0 : errors[name]) === null || _a === void 0 ? void 0 : _a.root) ? `${name}.root` : name, errors: errors, render: ({ message }) => {
+                                return (_jsx(ErrorMessage, { dataTestId: dataTestId, message: message || '', className: "full-width", icon: errorMessageIcon }));
                             } })) : null] }));
             } })) }));
 };

package/components/FormField/types.d.ts

@@ -1,3 +1,4 @@
+import { IBaseProps, IFormCompProps } from '../../type';
 export interface TFormFieldPropTypes extends IBaseProps {
     As: (props: IFormCompProps) => React.ReactElement;
     name: string;

package/components/Heading/Heading.js

@@ -2,6 +2,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { noop } from '../../utils/helpers';
 import classNames from 'classnames';
 export const Heading = (props) => {
-    const { children, className = '', size = 'small', lineHeight = 'large', type: As = 'h1', weight = 'regular', onClick = noop, dataId = '' } = props;
-    return (_jsx(As, { dataid: dataId, onClick: onClick, className: classNames('heading', size && `heading-${size}`, weight, lineHeight && `lh-${lineHeight}`, className), children: children }));
+    const { children, className = '', size = 'small', lineHeight = 'large', type: As = 'h1', weight = 'regular', onClick = noop, dataTestId = '' } = props;
+    return (_jsx(As, { dataid: dataTestId, onClick: onClick, className: classNames('heading', size && `heading-${size}`, weight, lineHeight && `lh-${lineHeight}`, className), children: children }));
 };

package/components/Heading/types.d.ts

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

package/components/Image/Image.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 export const Image = (props) => {
-    const { name, imagePath = 'static/media/src/assets/images/image-placeholder.png', isBackgroundImage, backgroundSize, className = '', isFullWidth, isFullHeight, ratio, dataId = '' } = props;
-    return isBackgroundImage ? (_jsx("div", { "data-id": dataId, className: `image image--bg ${className}`, style: {
+    const { name, imagePath = 'static/media/src/assets/images/image-placeholder.png', isBackgroundImage, backgroundSize, className = '', isFullWidth, isFullHeight, ratio, dataTestId = '' } = props;
+    return isBackgroundImage ? (_jsx("div", { "data-test-id": dataTestId, className: `image image--bg ${className}`, style: {
             backgroundImage: `${imagePath ? `url(${imagePath})` : ''}`,
             backgroundSize: backgroundSize,
             aspectRatio: ratio
-        } })) : (_jsx("img", { "data-id": dataId, className: `image ${className}`, src: imagePath, alt: name, style: {
+        } })) : (_jsx("img", { "data-test-id": dataTestId, className: `image ${className}`, src: imagePath, alt: name, style: {
             aspectRatio: ratio,
             width: isFullWidth ? '100%' : '',
             height: isFullHeight ? '100%' : ''

package/components/Image/types.d.ts

@@ -1,3 +1,4 @@
+import { IBaseProps } from '../../type';
 export interface ImagePropTypes extends IBaseProps {
     name?: string;
     imagePath?: string;

package/components/Input/Input.js

@@ -19,7 +19,7 @@ import { Label } from '../../helperComponents/Label';
 import { Text } from '../Text';
 import IconCheckmarkCircleFilled from '../SVGIcons/IconCheckmarkCircleFilled';
 export const Input = React.forwardRef((_a, ref) => {
-    var { datePlaceHolderText, className, size = 'medium', error, hasError, label, mask, maskChar, maskPlaceholder, currentValue, name, leftIconProps, rightIconProps, disabled, required, readonly, placeholder, type = 'text', helperText, successMessage, maxCount, setFieldValue, handleChange, dataId = '', isValid, allowLeadingZeros, thousandSeparator = '', allowNegative = false, hideCounter = false, labelAddons, witUpperCase = false, isAllowed, onChange, handleBlurEvent } = _a, rest = __rest(_a, ["datePlaceHolderText", "className", "size", "error", "hasError", "label", "mask", "maskChar", "maskPlaceholder", "currentValue", "name", "leftIconProps", "rightIconProps", "disabled", "required", "readonly", "placeholder", "type", "helperText", "successMessage", "maxCount", "setFieldValue", "handleChange", "dataId", "isValid", "allowLeadingZeros", "thousandSeparator", "allowNegative", "hideCounter", "labelAddons", "witUpperCase", "isAllowed", "onChange", "handleBlurEvent"]);
+    var { datePlaceHolderText, className, size = 'medium', error, hasError, label, mask, maskChar, maskPlaceholder, currentValue, name, leftIconProps, rightIconProps, disabled, required, readonly, placeholder, type = 'text', helperText, successMessage, maxCount, setFieldValue, handleChange, dataTestId = '', isValid, allowLeadingZeros, thousandSeparator = '', allowNegative = false, hideCounter = false, labelAddons, witUpperCase = false, isAllowed, onChange, handleBlurEvent } = _a, rest = __rest(_a, ["datePlaceHolderText", "className", "size", "error", "hasError", "label", "mask", "maskChar", "maskPlaceholder", "currentValue", "name", "leftIconProps", "rightIconProps", "disabled", "required", "readonly", "placeholder", "type", "helperText", "successMessage", "maxCount", "setFieldValue", "handleChange", "dataTestId", "isValid", "allowLeadingZeros", "thousandSeparator", "allowNegative", "hideCounter", "labelAddons", "witUpperCase", "isAllowed", "onChange", "handleBlurEvent"]);
     const isErrorVisible = hasError !== undefined ? hasError : !!error;
     const placeHolder = label === placeholder ? '' : placeholder || datePlaceHolderText;
     const changeHandler = (event) => {
@@ -56,21 +56,21 @@ export const Input = React.forwardRef((_a, ref) => {
     // @ts-ignore
     _jsx(InputMask, Object.assign({ name: name, mask: mask, 
         // @ts-ignore
-        ref: () => ref && ref() }, rest, { placeholder: placeHolder, onBlur: onBlurCallback, onChange: changeHandler, disabled: disabled, "data-id": dataId, className: `${isErrorVisible ? 'with-error-styles' : ''}` }, (currentValue ? { value: currentValue } : {}), { maskChar: maskChar, maskPlaceholder: maskPlaceholder }))) : type === 'numeric' ? (
+        ref: () => ref && ref() }, rest, { placeholder: placeHolder, onBlur: onBlurCallback, onChange: changeHandler, disabled: disabled, "data-test-id": dataTestId, className: `${isErrorVisible ? 'with-error-styles' : ''}` }, (currentValue ? { value: currentValue } : {}), { maskChar: maskChar, maskPlaceholder: maskPlaceholder }))) : type === 'numeric' ? (
     // @ts-ignore
     _jsx(NumericFormat, Object.assign({}, rest, { name: name, onChange: changeHandler, placeholder: placeHolder, readOnly: readonly, allowLeadingZeros: allowLeadingZeros, thousandSeparator: thousandSeparator, allowNegative: allowNegative, maxLength: maxCount, inputMode: 'numeric', disabled: disabled, isAllowed: isAllowed, onBlur: onBlurCallback }, (currentValue !== undefined ? { value: currentValue } : {})))) : (
     // @ts-ignore
-    _jsx("input", Object.assign({ readOnly: readonly, disabled: disabled, name: name, ref: ref, type: type, placeholder: placeHolder, "data-id": dataId }, rest, { onBlur: onBlurCallback, onChange: changeHandler }, (currentValue !== undefined ? { value: currentValue } : {}))));
+    _jsx("input", Object.assign({ readOnly: readonly, disabled: disabled, name: name, ref: ref, type: type, placeholder: placeHolder, "data-test-id": dataTestId }, rest, { onBlur: onBlurCallback, onChange: changeHandler }, (currentValue !== undefined ? { value: currentValue } : {}))));
     return (_jsxs("div", { className: classNames(`input input--${size}`, className, {
             'input--icon-left': leftIconProps,
             'input--icon-right': rightIconProps,
             'input--invalid': isErrorVisible || !!error,
             'input--valid': isValid,
             'input--disabled': disabled
-        }), children: [_jsx(Label, { text: label, required: required, disabled: disabled, labelAddons: labelAddons, dataId: dataId }), _jsxs("div", { className: "input__inner", children: [input, (leftIconProps === null || leftIconProps === void 0 ? void 0 : leftIconProps.Component) ? (_jsx(leftIconProps.Component, Object.assign({ size: "small" }, leftIconProps, { className: classNames('input__icon', 'input__icon--left', {
+        }), children: [_jsx(Label, { text: label, required: required, disabled: disabled, labelAddons: labelAddons, dataTestId: dataTestId }), _jsxs("div", { className: "input__inner", children: [input, (leftIconProps === null || leftIconProps === void 0 ? void 0 : leftIconProps.Component) ? (_jsx(leftIconProps.Component, Object.assign({ size: "small" }, leftIconProps, { className: classNames('input__icon', 'input__icon--left', {
                             [leftIconProps.className || '']: !!leftIconProps.className
                         }) }))) : null, (rightIconProps === null || rightIconProps === void 0 ? void 0 : rightIconProps.Component) ? (_jsx(rightIconProps.Component, Object.assign({ size: "small" }, rightIconProps, { className: classNames('input__icon', 'input__icon--right', {
                             [rightIconProps.className || '']: !!rightIconProps.className
-                        }) }))) : null] }), error || successMessage || helperText || maxCount ? (_jsxs("div", { className: "input__message mt-8", children: [isErrorVisible && error ? (_jsx(ErrorMessage, { message: error, icon: "infoFilled", dataId: dataId })) : null, successMessage ? (_jsx(Text, { size: "small", type: "success", className: "flexbox align-items--center", children: _jsxs(_Fragment, { children: [_jsx(IconCheckmarkCircleFilled, { type: "success", size: "xsmall" }), _jsx("span", { className: "ml-4", children: successMessage })] }) })) : null, helperText && !successMessage && !(isErrorVisible || error) ? (_jsx(Text, { size: "small", type: disabled ? 'disabled' : 'secondary', children: helperText })) : null, maxCount && !hideCounter && !hasError ? (_jsx(Text, { size: "small", type: disabled ? 'disabled' : 'secondary', className: "input__counter", children: `${currentLength}/${maxCount}` })) : null] })) : null] }));
+                        }) }))) : null] }), error || successMessage || helperText || maxCount ? (_jsxs("div", { className: "input__message mt-8", children: [isErrorVisible && error ? (_jsx(ErrorMessage, { message: error, icon: "infoFilled", dataTestId: dataTestId })) : null, successMessage ? (_jsx(Text, { size: "small", type: "success", className: "flexbox align-items--center", children: _jsxs(_Fragment, { children: [_jsx(IconCheckmarkCircleFilled, { type: "success", size: "xsmall" }), _jsx("span", { className: "ml-4", children: successMessage })] }) })) : null, helperText && !successMessage && !(isErrorVisible || error) ? (_jsx(Text, { size: "small", type: disabled ? 'disabled' : 'secondary', children: helperText })) : null, maxCount && !hideCounter && !hasError ? (_jsx(Text, { size: "small", type: disabled ? 'disabled' : 'secondary', className: "input__counter", children: `${currentLength}/${maxCount}` })) : null] })) : null] }));
 });
 Input.displayName = 'FormInput';

package/components/Input/types.d.ts

@@ -1,5 +1,5 @@
 import { InputHTMLAttributes, ReactElement, RefObject, FocusEvent } from 'react';
-import { ISVGIconProps } from '../../type';
+import { ISVGIconProps, IFormCompProps } from '../../type';
 export interface InputCustomProps extends IFormCompProps, Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'onFocus' | 'value' | 'onChange' | 'autoComplete'> {
     mask?: string;
     maskChar?: string | null;

package/components/LineChart/LineChart.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
 import { TLineChartProps } from './types';
-export declare const LineChart: ({ data, dataId }: TLineChartProps) => React.ReactElement;
+export declare const LineChart: ({ data, dataTestId }: TLineChartProps) => React.ReactElement;

package/components/LineChart/LineChart.js

@@ -3,18 +3,18 @@ import classNames from 'classnames';
 import { Text } from '../Text';
 import { Divider } from '../Divider';
 import { generateLinePath, formatWithDots } from './helper';
-export const LineChart = ({ data, dataId = '' }) => {
+export const LineChart = ({ data, dataTestId = '' }) => {
     const linePathes = generateLinePath(data);
     let percent = 0;
-    return (_jsxs("div", { "data-id": dataId, children: [_jsx("div", { className: "bar", children: linePathes.map(({ percentage, color }, i) => {
+    return (_jsxs("div", { "data-test-id": dataTestId, children: [_jsx("div", { className: "bar", children: linePathes.map(({ percentage, color }, i) => {
                     const start = percent;
                     const end = start + percentage;
                     percent = end;
-                    return (_jsx("div", { "data-id": dataId ? `${dataId}-segment-${i}` : '', className: classNames('bar__segment', `bar__segment--color-${color}`, {
+                    return (_jsx("div", { "data-test-id": dataTestId ? `${dataTestId}-segment-${i}` : '', className: classNames('bar__segment', `bar__segment--color-${color}`, {
                             'bar__segment--first': i === 0,
                             'bar__segment--last': i === linePathes.length - 1
                         }), style: {
                             flexBasis: `${percentage}%`
                         } }, `line-chart-segment-${i}`));
-                }) }), _jsx("div", { className: "line-chart-status", children: linePathes.map(({ label, dataCurrency, color, quantity, isHidden }, i) => !isHidden && (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flexbox justify-content--between pt-6 pb-6", "data-id": dataId ? `${dataId}-item-${i}` : '', children: [_jsxs("div", { className: "flexbox align-items--center", children: [_jsx("span", { className: classNames('status__circle', `status__circle--${color}`) }), _jsx(Text, { type: "tertiary", dataId: dataId ? `${dataId}-label-${i}` : '', children: label })] }), _jsx("div", { children: _jsxs(Text, { dataId: dataId ? `${dataId}-value-${i}` : '', children: [formatWithDots(quantity), " ", dataCurrency] }) })] }, `line-chart-status-${i}`), i !== linePathes.length - 1 && (_jsx(Divider, { type: "primary", isHorizontal: true, color: "grey" }))] }))) })] }));
+                }) }), _jsx("div", { className: "line-chart-status", children: linePathes.map(({ label, dataCurrency, color, quantity, isHidden }, i) => !isHidden && (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flexbox justify-content--between pt-6 pb-6", "data-test-id": dataTestId ? `${dataTestId}-item-${i}` : '', children: [_jsxs("div", { className: "flexbox align-items--center", children: [_jsx("span", { className: classNames('status__circle', `status__circle--${color}`) }), _jsx(Text, { type: "tertiary", dataTestId: dataTestId ? `${dataTestId}-label-${i}` : '', children: label })] }), _jsx("div", { children: _jsxs(Text, { dataTestId: dataTestId ? `${dataTestId}-value-${i}` : '', children: [formatWithDots(quantity), " ", dataCurrency] }) })] }, `line-chart-status-${i}`), i !== linePathes.length - 1 && (_jsx(Divider, { type: "primary", isHorizontal: true, color: "grey" }))] }))) })] }));
 };

package/components/LineChart/types.d.ts

@@ -1,3 +1,4 @@
+import { IBaseProps } from '../../type';
 export type TLineChartColor = 'blue' | 'purple' | 'yellow' | 'pink' | 'green' | 'grey' | 'red';
 export type TLineChartDataItem = {
     quantity: number;

package/components/Link/Link.js

@@ -1,16 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import classNames from 'classnames';
 export const Link = (props) => {
-    const { children, afterLink, beforeLink, className = '', url, dataId = '', target, type = 'brand', onclick } = props;
+    const { children, afterLink, beforeLink, className = '', url, dataTestId = '', target, type = 'brand', onclick } = props;
     return beforeLink || afterLink ? (_jsxs("span", { className: className, children: [beforeLink, _jsx("a", { onClick: (e) => {
                     if (onclick) {
                         e.preventDefault();
                         onclick();
                     }
-                }, href: url, className: `link link-${type}`, "data-id": dataId ? `${dataId}-link` : '', target: target, children: children }), afterLink] })) : (_jsx("a", { onClick: (e) => {
+                }, href: url, className: `link link-${type}`, "data-test-id": dataTestId ? `${dataTestId}-link` : '', target: target, children: children }), afterLink] })) : (_jsx("a", { onClick: (e) => {
             if (onclick) {
                 e.preventDefault();
                 onclick();
             }
-        }, href: url, className: classNames(`link ${className} link-${type}`), "data-id": dataId ? `${dataId}-link` : '', target: target, children: children }));
+        }, href: url, className: classNames(`link ${className} link-${type}`), "data-test-id": dataTestId ? `${dataTestId}-link` : '', target: target, children: children }));
 };

package/components/Link/types.d.ts

@@ -1,3 +1,4 @@
+import { IBaseProps } from '../../type';
 type TLinkTypes = 'primary' | 'secondary' | 'tertiary' | 'disabled' | 'inverse' | 'selected' | 'brand' | 'danger' | 'warning' | 'success' | 'information' | 'discovery';
 export interface LinkPropTypes extends IBaseProps {
     children?: string | React.ReactElement;

package/components/Menu/Menu.js

@@ -36,8 +36,8 @@ export const Menu = (props) => {
     if (!parentRef || !isOpen) {
         return null;
     }
-    return (_jsx(_Fragment, { children: createPortal(_jsx("div", { className: classNames('select', 'select--menu', className), style: menuStyles, ref: setMenuRef, children: _jsxs(_Fragment, { children: [children, _jsx(_Fragment, { children: menuItems === null || menuItems === void 0 ? void 0 : menuItems.map(({ label, meta, value, handler, iconProps, disabled, dataId }) => {
-                            return (_jsx(OptionItem, { dataId: dataId, disabled: disabled, data: {
+    return (_jsx(_Fragment, { children: createPortal(_jsx("div", { className: classNames('select', 'select--menu', className), style: menuStyles, ref: setMenuRef, children: _jsxs(_Fragment, { children: [children, _jsx(_Fragment, { children: menuItems === null || menuItems === void 0 ? void 0 : menuItems.map(({ label, meta, value, handler, iconProps, disabled, dataTestId }) => {
+                            return (_jsx(OptionItem, { dataTestId: dataTestId, disabled: disabled, data: {
                                     label,
                                     value,
                                     meta

package/components/Menu/NestedMenu.js

@@ -37,8 +37,8 @@ export const NestedMenu = ({ menuItems = [], parentRef, onClose, isOpen, positio
         return null;
     }
     const _menuItems = menuItems.map((item, index) => {
-        return Object.assign(Object.assign({}, item), { content: item.subItems ? (_jsx("div", { className: "nested-menu__sub-items select", children: item.subItems.map(({ label, meta, value, handler, iconProps, disabled, dataId }) => {
-                    return (_jsx(OptionItem, { dataId: dataId, disabled: disabled, data: {
+        return Object.assign(Object.assign({}, item), { content: item.subItems ? (_jsx("div", { className: "nested-menu__sub-items select", children: item.subItems.map(({ label, meta, value, handler, iconProps, disabled, dataTestId }) => {
+                    return (_jsx(OptionItem, { dataTestId: dataTestId, disabled: disabled, data: {
                             label,
                             value,
                             meta

package/components/Menu/types.d.ts

@@ -1,3 +1,4 @@
+import { IBaseProps } from '../../type';
 import { ReactNode } from 'react';
 export type TMenuItem = IBaseProps & {
     label: TItemLabel;