hrm_ui_lib 3.2.3 → 3.3.0

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 }) => {
+export const LineChart = ({ data, dataId = '' }) => {
     const linePathes = generateLinePath(data);
     let percent = 0;
-    return (_jsxs("div", { children: [_jsx("div", { className: "bar", children: linePathes.map(({ percentage, color }, i) => {
+    return (_jsxs("div", { "data-id": dataId, children: [_jsx("div", { className: "bar", children: linePathes.map(({ percentage, color }, i) => {
                     const start = percent;
                     const end = start + percentage;
                     percent = end;
-                    return (_jsx("div", { className: classNames('bar__segment', `bar__segment--color-${color}`, {
+                    return (_jsx("div", { "data-id": dataId ? `${dataId}-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", children: [_jsxs("div", { className: "flexbox align-items--center", children: [_jsx("span", { className: classNames('status__circle', `status__circle--${color}`) }), _jsx(Text, { type: "tertiary", children: label })] }), _jsx("div", { children: _jsxs(Text, { 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-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" }))] }))) })] }));
 };

package/components/LineChart/types.d.ts

@@ -9,6 +9,6 @@ export type TLineChartDataItem = {
 export interface TLineChartDataItemWithPercentage extends TLineChartDataItem {
     percentage: number;
 }
-export type TLineChartProps = {
+export type TLineChartProps = IBaseProps & {
     data: Array<TLineChartDataItem>;
 };

package/components/Link/types.d.ts

@@ -1,10 +1,9 @@
 type TLinkTypes = 'primary' | 'secondary' | 'tertiary' | 'disabled' | 'inverse' | 'selected' | 'brand' | 'danger' | 'warning' | 'success' | 'information' | 'discovery';
-export interface LinkPropTypes {
+export interface LinkPropTypes extends IBaseProps {
     children?: string | React.ReactElement;
     className?: string;
     type?: TLinkTypes;
     url?: string;
-    dataId?: string;
     target?: string;
     beforeLink?: string | React.ReactElement;
     afterLink?: string | React.ReactElement;

package/components/Menu/types.d.ts

@@ -1,11 +1,10 @@
 import { ReactNode } from 'react';
-export type TMenuItem = {
+export type TMenuItem = IBaseProps & {
     label: TItemLabel;
     value: TItemValue;
     iconProps?: TSelectIconProps;
     handler?: TCallBackFn;
     disabled?: boolean;
-    dataId?: string;
     meta?: string;
 };
 export type TMenuProps = {

package/components/More/More.js

@@ -6,7 +6,7 @@ export const More = (props) => {
     const { textProps = {}, expandedText, collapsedText, buttonText = {
         expand: 'Ավելին',
         collapse: 'Փակել'
-    } } = props;
+    }, dataId = '' } = props;
     const [isExpanded, setIsExpanded] = useState(false);
     const expand = (e) => {
         e.stopPropagation();
@@ -16,5 +16,5 @@ export const More = (props) => {
         e.stopPropagation();
         setIsExpanded(false);
     };
-    return (_jsxs(Text, Object.assign({}, textProps, { className: 'more', children: [`${isExpanded ? expandedText : collapsedText}`, _jsx(Button, { className: 'more__btn ml-4', type: "link", buttonText: isExpanded ? buttonText.collapse : buttonText.expand, onClick: isExpanded ? collapse : expand })] })));
+    return (_jsxs(Text, Object.assign({}, textProps, { className: 'more', dataId: dataId, children: [`${isExpanded ? expandedText : collapsedText}`, _jsx(Button, { className: 'more__btn ml-4', type: "link", buttonText: isExpanded ? buttonText.collapse : buttonText.expand, dataId: dataId ? `${dataId}-action` : '', onClick: isExpanded ? collapse : expand })] })));
 };

package/components/More/types.d.ts

@@ -1,5 +1,5 @@
 import { TextPropTypes } from '../Text/types';
-export type TMorePropTypes = {
+export type TMorePropTypes = IBaseProps & {
     textProps?: TextPropTypes;
     expandedText: string;
     collapsedText: string;

package/components/Pagination/Pagination.js

@@ -7,12 +7,12 @@ import IconChevronLeft from '../SVGIcons/IconChevronLeft';
 import IconMore from '../SVGIcons/IconMore';
 import { ICON_SIZE_MAPPING } from './consts';
 export const Pagination = (props) => {
-    const { totalCount, handleChangePage, classname = '', size = 'large', pageSize, disableInitialCallback = false, page, breakLabel = _jsx(IconMore, { size: ICON_SIZE_MAPPING[size] }), labels = {
-        previous: _jsx(IconChevronLeft, { size: ICON_SIZE_MAPPING[size] }),
-        next: _jsx(IconChevronRight, { size: ICON_SIZE_MAPPING[size] })
+    const { totalCount, handleChangePage, classname = '', size = 'large', pageSize, disableInitialCallback = false, page, dataId = '', breakLabel = (_jsx(IconMore, { size: ICON_SIZE_MAPPING[size], dataId: dataId ? `${dataId}-more` : '' })), labels = {
+        previous: (_jsx(IconChevronLeft, { size: ICON_SIZE_MAPPING[size], dataId: dataId ? `${dataId}-prev` : '' })),
+        next: (_jsx(IconChevronRight, { size: ICON_SIZE_MAPPING[size], dataId: dataId ? `${dataId}-next` : '' }))
     } } = props;
     const handlePageChange = ({ selected }) => {
         handleChangePage(selected + 1);
     };
-    return (_jsx("div", { className: "pagination-wrapper flexbox", children: _jsx(ReactPaginate, Object.assign({ pageCount: Math.ceil(totalCount / pageSize), disableInitialCallback: disableInitialCallback, pageRangeDisplayed: PAGE_RANGE_DISPLAYED, marginPagesDisplayed: 1, onPageChange: handlePageChange, containerClassName: classNames(`pagination pagination--${size}`, classname), activeClassName: 'active', previousLabel: labels === null || labels === void 0 ? void 0 : labels.previous, nextLabel: labels === null || labels === void 0 ? void 0 : labels.next, breakClassName: "pagination__more", breakLinkClassName: "pagination__more__link", breakLabel: breakLabel }, (page ? { forcePage: page - 1 } : {}))) }));
+    return (_jsx("div", { className: "pagination-wrapper flexbox", "data-id": dataId, children: _jsx(ReactPaginate, Object.assign({ pageCount: Math.ceil(totalCount / pageSize), disableInitialCallback: disableInitialCallback, pageRangeDisplayed: PAGE_RANGE_DISPLAYED, marginPagesDisplayed: 1, onPageChange: handlePageChange, containerClassName: classNames(`pagination pagination--${size}`, classname), activeClassName: 'active', previousLabel: labels === null || labels === void 0 ? void 0 : labels.previous, nextLabel: labels === null || labels === void 0 ? void 0 : labels.next, breakClassName: "pagination__more", breakLinkClassName: "pagination__more__link", breakLabel: breakLabel }, (page ? { forcePage: page - 1 } : {}))) }));
 };

package/components/Pagination/types.d.ts

@@ -1,5 +1,5 @@
 import { ReactElement } from 'react';
-export type TPaginationProps = {
+export type TPaginationProps = IBaseProps & {
     labels?: {
         next: string | ReactElement;
         previous: string | ReactElement;

package/components/Progress/Progress.js

@@ -5,12 +5,12 @@ var CIRCLE_SIZES;
     CIRCLE_SIZES[CIRCLE_SIZES["large"] = 45] = "large";
 })(CIRCLE_SIZES || (CIRCLE_SIZES = {}));
 export const Progress = (props) => {
-    const { percent, stepCount, currentStep, type = 'linear', size = 'large', noText = false, dimension, className = '', loop = false } = props;
+    const { percent, stepCount, currentStep, type = 'linear', size = 'large', noText = false, dimension, className = '', loop = false, dataId = '' } = props;
     const _dimension = dimension ? dimension : CIRCLE_SIZES[size];
     const r = _dimension - 5;
     const _percent = stepCount && currentStep ? (currentStep / stepCount) * 100 : percent;
     const strokeDasharray = `${2 * r * 3.14}px`;
-    return (_jsxs("div", { className: `progress-bar progress-bar--${type} progress-bar--${size} ${className}${loop ? ' progress-bar--loop' : ''}`, style: type == 'circle'
+    return (_jsxs("div", { "data-id": dataId, className: `progress-bar progress-bar--${type} progress-bar--${size} ${className}${loop ? ' progress-bar--loop' : ''}`, style: type == 'circle'
             ? {
                 width: 2 * _dimension,
                 height: 2 * _dimension
@@ -18,5 +18,5 @@ export const Progress = (props) => {
             : {}, children: [type == 'circle' ? (_jsxs("svg", { children: [_jsx("circle", { cx: _dimension, cy: _dimension, r: r }), _jsx("circle", { cx: _dimension, cy: _dimension, r: r, style: {
                             strokeDasharray,
                             strokeDashoffset: `calc(${strokeDasharray} - (${strokeDasharray} * ${_percent}) / 100)`
-                        } })] })) : (_jsx("div", { className: "progress-bar__inner", children: _jsx("div", { className: "progress-bar__filled", style: { width: `${_percent}%` } }) })), !noText ? (_jsx("span", { className: "progress-bar__percent", children: stepCount ? `${currentStep}/${stepCount}` : `${percent}%` })) : null] }));
+                        } })] })) : (_jsx("div", { className: "progress-bar__inner", children: _jsx("div", { className: "progress-bar__filled", style: { width: `${_percent}%` } }) })), !noText ? (_jsx("span", { className: "progress-bar__percent", "data-id": dataId ? `${dataId}-text` : '', children: stepCount ? `${currentStep}/${stepCount}` : `${percent}%` })) : null] }));
 };

package/components/Progress/types.d.ts

@@ -1,4 +1,4 @@
-export interface TProgressPropTypes {
+export interface TProgressPropTypes extends IBaseProps {
     percent?: number;
     stepCount?: number;
     currentStep?: number;

package/components/ProgressStep/ProgressStep.js

@@ -2,9 +2,9 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import classnames from 'classnames';
 import { Step } from './Step';
 export const ProgressStep = (props) => {
-    const { steps, stepType, activeStep, setActiveStep, stepSize = 'large', stepDirection = 'horizontal' } = props;
+    const { steps, stepType, activeStep, setActiveStep, stepSize = 'large', stepDirection = 'horizontal', dataId = '' } = props;
     const singleStepWidth = `${100 / steps.length}%`;
-    return (_jsx("div", { className: classnames('progress-stepper', `progress-stepper--${stepDirection}`), children: steps.map((step, index) => {
-            return (_jsx(Step, { width: stepDirection == 'horizontal' ? singleStepWidth : '100%', step: step, index: index + 1, activeStep: activeStep, onStepClick: setActiveStep, stepType: stepType, stepSize: stepSize }, step.value));
+    return (_jsx("div", { className: classnames('progress-stepper', `progress-stepper--${stepDirection}`), "data-id": dataId, children: steps.map((step, index) => {
+            return (_jsx(Step, { width: stepDirection == 'horizontal' ? singleStepWidth : '100%', step: step, index: index + 1, activeStep: activeStep, onStepClick: setActiveStep, stepType: stepType, stepSize: stepSize, dataId: dataId ? `${dataId}-item-${index}` : '' }, step.value));
         }) }));
 };

package/components/ProgressStep/Step.js

@@ -7,7 +7,7 @@ import { PROGRESS_STATUSES } from './consts';
 import IconDismissCircle from '../SVGIcons/IconDismissCircle';
 import IconCheckmarkCircle from '../SVGIcons/IconCheckmarkCircle';
 export const Step = (props) => {
-    const { width, step, stepSize = 'large', index, activeStep, stepType, onStepClick } = props;
+    const { width, step, stepSize = 'large', index, activeStep, stepType, onStepClick, dataId = '' } = props;
     const { label, subText, value, status } = step;
     const isActive = activeStep === value;
     const isCompleted = status === PROGRESS_STATUSES.completed;
@@ -29,7 +29,7 @@ export const Step = (props) => {
     };
     const stepItemContent = useMemo(() => {
         if (stepType === StepTypes.number) {
-            return (_jsx(Text, { type: textType, size: stepSize == 'large' ? 'medium' : 'small', weight: stepSize == 'large' ? 'semibold' : 'regular', children: `${index}` }));
+            return (_jsx(Text, { type: textType, size: stepSize == 'large' ? 'medium' : 'small', weight: stepSize == 'large' ? 'semibold' : 'regular', dataId: dataId ? `${dataId}-number` : '', children: `${index}` }));
         }
         if (stepType === StepTypes.dot) {
             if (isActive) {
@@ -38,17 +38,17 @@ export const Step = (props) => {
             if (isCompleted) {
                 const iconSize = stepSize == 'large' ? 'small' : 'xsmall';
                 if (isRejected) {
-                    return _jsx(IconDismissCircle, { size: iconSize, type: "inverse" });
+                    return (_jsx(IconDismissCircle, { size: iconSize, type: "inverse", dataId: dataId ? `${dataId}-icon` : '' }));
                 }
-                return _jsx(IconCheckmarkCircle, { size: iconSize, type: "inverse" });
+                return (_jsx(IconCheckmarkCircle, { size: iconSize, type: "inverse", dataId: dataId ? `${dataId}-icon` : '' }));
             }
         }
         return null;
-    }, [index, stepType, stepSize, isCompleted, isActive, isRejected, textType]);
+    }, [index, stepType, stepSize, isCompleted, isActive, isRejected, textType, dataId]);
     return (_jsxs("div", { className: classNames('step', `step--${stepSize}`, {
             active: isActive,
             completed: isCompleted && !isActive,
             rejected: isRejected,
             review: isReview
-        }), style: { width }, onClick: onClick, children: [_jsx("div", { className: "step__top", children: _jsx("div", { className: "step__circle", children: stepItemContent }) }), _jsxs("div", { className: "step__label", children: [_jsx(Text, { size: stepSize == 'large' ? 'standard' : 'small', weight: "semibold", lineHeight: 'large', className: "text-truncate", children: label }), _jsx(Text, { size: stepSize == 'large' ? 'small' : 'xsmall', className: "text-truncate", children: subText })] })] }));
+        }), style: { width }, onClick: onClick, "data-id": dataId, children: [_jsx("div", { className: "step__top", children: _jsx("div", { className: "step__circle", children: stepItemContent }) }), _jsxs("div", { className: "step__label", children: [_jsx(Text, { size: stepSize == 'large' ? 'standard' : 'small', weight: "semibold", lineHeight: 'large', className: "text-truncate", dataId: dataId ? `${dataId}-label` : '', children: label }), _jsx(Text, { size: stepSize == 'large' ? 'small' : 'xsmall', className: "text-truncate", dataId: dataId ? `${dataId}-subtext` : '', children: subText })] })] }));
 };

package/components/ProgressStep/types.d.ts

@@ -8,7 +8,7 @@ export interface TStep {
 }
 export type TStepType = 'number' | 'dot';
 export type TSteps = TStep[];
-export type TProgressStepProps = {
+export type TProgressStepProps = IBaseProps & {
     steps: TSteps;
     stepType: TStepType;
     stepDirection: 'horizontal' | 'vertical';
@@ -16,7 +16,7 @@ export type TProgressStepProps = {
     activeStep: TStepValue;
     setActiveStep: (v: TStepValue) => void;
 };
-export type TStepProps = {
+export type TStepProps = IBaseProps & {
     width: string;
     step: TStep;
     stepSize?: 'large' | 'small';

package/components/Radio/types.d.ts

@@ -9,11 +9,10 @@ export interface TRadioProps extends IFormCompProps {
     isSelected?: boolean;
     onClick?: (isChecked: boolean) => void;
 }
-export type TRadioOptionItem = {
+export type TRadioOptionItem = IBaseProps & {
     value: number | string;
     label: string;
     helperText?: string | ReactElement;
-    dataId?: string;
 };
 export interface TRadioGroupProps extends IFormCompProps {
     label?: string | ReactElement;

package/components/Select/types.d.ts

@@ -100,7 +100,6 @@ export interface TMultiSelectPropTypes extends IFormCompProps, TSelectBaseProps
 }
 export interface TButtonSelectPropTypes extends IFormCompProps, TSelectBaseProps {
     isMobileFullScreen?: boolean;
-    dataId?: string;
     options: TSelectOptions;
     selectedItem?: TItemValue;
     setSelectedItem?: (items: TItemValue | undefined) => void;
@@ -129,11 +128,10 @@ export interface TSingleSelectPropTypes extends IFormCompProps, TSelectBaseProps
         emptyListMainMessage: string;
     };
 }
-export interface ISingleSelectResponsiveProps {
+export interface ISingleSelectResponsiveProps extends IBaseProps {
     isOpen: boolean;
     closeDropdown: () => void;
     isLoading?: boolean;
-    dataId?: string;
     innerHelperText?: string;
     labelLeftIconProps?: {
         size?: TIconSize;
@@ -227,7 +225,7 @@ export interface TFilterGroupDropdownContentProps extends IFormCompProps {
     onItemDeselect: (item: TSelectedValue) => void;
     checkIsSelected: (item: TItemValue) => boolean;
 }
-export type TSelectWrapperProps = {
+export type TSelectWrapperProps = IBaseProps & {
     isMobile: boolean;
     applySelectedItems: (isChecked: boolean) => void;
     hasError?: boolean;
@@ -255,7 +253,6 @@ export type TSelectWrapperProps = {
     dropdownRef: HTMLDivElement | null;
     setDropdownRef: LegacyRef<HTMLDivElement>;
     selectedValues?: TSelectedValue[];
-    dataId?: string;
     type?: 'primary' | 'secondary' | 'tertiary';
     modalApplyButtonText?: string;
     hideSelectedOptions?: boolean;

package/components/SideSheet/Footer/Footer.d.ts

@@ -11,6 +11,7 @@ type TProps = {
     onClose: (e?: TClickEventType) => void;
     onSubmit?: (isSelected: boolean) => void;
     checkboxInfo?: TCheckboxInfo;
+    dataId?: string;
 };
-export declare const Footer: ({ isLoading, footerButtons, onClose, onSubmit, checkboxInfo }: TProps) => ReactElement | null;
+export declare const Footer: ({ isLoading, footerButtons, onClose, onSubmit, checkboxInfo, dataId }: TProps) => ReactElement | null;
 export {};

package/components/SideSheet/Footer/Footer.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useCallback } from 'react';
 import { Button } from '../../Button';
 import { Checkbox } from '../../Checkbox';
-export const Footer = ({ isLoading, footerButtons, onClose, onSubmit, checkboxInfo }) => {
+export const Footer = ({ isLoading, footerButtons, onClose, onSubmit, checkboxInfo, dataId = '' }) => {
     const [isSelected, setIsSelected] = React.useState((checkboxInfo === null || checkboxInfo === void 0 ? void 0 : checkboxInfo.isChecked) || false);
     const handleSubmit = useCallback(() => {
         onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(isSelected);
@@ -11,5 +11,5 @@ export const Footer = ({ isLoading, footerButtons, onClose, onSubmit, checkboxIn
         return null;
     }
     const { extraButton, confirm, cancel } = footerButtons;
-    return (_jsxs("div", { className: "side-sheet__footer", children: [checkboxInfo ? (_jsx("div", { className: "side-sheet__footer_checkbox", children: _jsx(Checkbox, { label: checkboxInfo.label, selectedValue: isSelected, onClick: setIsSelected }) })) : null, _jsxs("div", { className: "side-sheet__footer_buttons", children: [extraButton ? (_jsx(Button, Object.assign({ size: "large", type: "secondary" }, footerButtons.extraButton, { className: "mr-12" }))) : null, _jsx(Button, Object.assign({ type: "secondary", size: "large", className: "mr-12", onClick: onClose }, cancel)), _jsx(Button, Object.assign({ type: "primary", size: "large", onClick: handleSubmit, disabled: isLoading }, confirm))] })] }));
+    return (_jsxs("div", { className: "side-sheet__footer", "data-id": dataId ? `${dataId}-footer` : '', children: [checkboxInfo ? (_jsx("div", { className: "side-sheet__footer_checkbox", children: _jsx(Checkbox, { label: checkboxInfo.label, selectedValue: isSelected, onClick: setIsSelected, dataId: dataId ? `${dataId}-checkbox` : '' }) })) : null, _jsxs("div", { className: "side-sheet__footer_buttons", children: [extraButton ? (_jsx(Button, Object.assign({ size: "large", type: "secondary" }, footerButtons.extraButton, { className: "mr-12", dataId: dataId ? `${dataId}-extra` : '' }))) : null, _jsx(Button, Object.assign({ type: "secondary", size: "large", className: "mr-12", onClick: onClose }, cancel, { dataId: dataId ? `${dataId}-cancel` : '' })), _jsx(Button, Object.assign({ type: "primary", size: "large", onClick: handleSubmit, disabled: isLoading }, confirm, { dataId: dataId ? `${dataId}-confirm` : '' }))] })] }));
 };

package/components/SideSheet/SideSheet.js

@@ -11,7 +11,7 @@ import { Footer } from './Footer/Footer';
 import IconCaretUp from '../SVGIcons/IconCaretUp';
 import IconDismissFilled from '../SVGIcons/IconDismissFilled';
 export const SideSheet = (props) => {
-    const { size = 'small', isLoading, isOpen, onClose, onSubmit, title, position = 'right', shouldRemoveCallback, className = '', headerButtons, footerButtons, scrollToTopOptions, children, closeOnOutsideClick = true, checkboxInfo } = props;
+    const { size = 'small', isLoading, isOpen, onClose, onSubmit, title, position = 'right', shouldRemoveCallback, className = '', headerButtons, footerButtons, scrollToTopOptions, children, closeOnOutsideClick = true, checkboxInfo, dataId = '' } = props;
     const [containerRef, setContainerRef] = useState(null);
     const [isShownScrollIcon, setIsShownScrollIcon] = useState(false);
     const scrollbarContainerRef = useRef(null);
@@ -42,7 +42,7 @@ export const SideSheet = (props) => {
         });
     }, []);
     const isFromLeft = position === 'left';
-    return (_jsx(AnimatePresenceWrapper, { children: isOpen ? (_jsx(motion.div, { className: "side-sheet", initial: {
+    return (_jsx(AnimatePresenceWrapper, { children: isOpen ? (_jsx(motion.div, { className: "side-sheet", "data-id": dataId, initial: {
                 opacity: 0
             }, animate: {
                 opacity: 1
@@ -54,5 +54,5 @@ export const SideSheet = (props) => {
                 }
             }, transition: { duration: 0.2 }, children: _jsxs(motion.div, { initial: isFromLeft ? { left: '-100%' } : { right: '-100%' }, animate: isFromLeft ? { left: 0 } : { right: 0 }, exit: Object.assign(Object.assign({}, (isFromLeft ? { left: '-100%' } : { right: '-100%' })), { transition: {
                         duration: 0.5
-                    } }), transition: { duration: 0.5 }, className: classnames('side-sheet__container', `side-sheet__${position}`, `side-sheet__container--${size}`, className), ref: setContainerRef, children: [_jsxs("div", { className: "side-sheet__header", children: [_jsxs("div", { className: "side-sheet__header__left pr-16", children: [(headerButtons === null || headerButtons === void 0 ? void 0 : headerButtons.back) ? (_jsx(Button, Object.assign({ size: "small", type: "tertiary" }, headerButtons.back, { className: "mr-8" }))) : null, _jsx(Text, { className: "side-sheet__title", weight: "bolder", lineHeight: "large", size: "medium", children: title })] }), _jsxs("div", { className: "side-sheet__header__right", children: [(headerButtons === null || headerButtons === void 0 ? void 0 : headerButtons.pin) ? (_jsx(Button, Object.assign({ size: "small", type: "tertiary" }, headerButtons.pin, { className: "mr-8" }))) : null, (headerButtons === null || headerButtons === void 0 ? void 0 : headerButtons.close) ? (_jsx(Button, Object.assign({ size: "small", type: "tertiary" }, headerButtons.close, { onClick: onClose }))) : (_jsx(Button, { size: "small", type: "tertiary", iconProps: { Component: IconDismissFilled }, onClick: onClose }))] }), isShownScrollIcon && (_jsx(Button, { size: "large", type: "secondary", iconProps: { Component: IconCaretUp }, className: `side-sheet__header__scroll-top side-sheet__header__scroll-top__${size}`, onClick: handleScrollToTop }))] }), _jsx("div", { className: "side-sheet__content scrollbar scrollbar--vertical", ref: scrollbarContainerRef, children: children }), _jsx(Footer, { footerButtons: footerButtons, isLoading: isLoading, onClose: onClose, onSubmit: onSubmit, checkboxInfo: checkboxInfo })] }) })) : null }));
+                    } }), transition: { duration: 0.5 }, className: classnames('side-sheet__container', `side-sheet__${position}`, `side-sheet__container--${size}`, className), "data-id": dataId ? `${dataId}-container` : '', ref: setContainerRef, children: [_jsxs("div", { className: "side-sheet__header", children: [_jsxs("div", { className: "side-sheet__header__left pr-16", children: [(headerButtons === null || headerButtons === void 0 ? void 0 : headerButtons.back) ? (_jsx(Button, Object.assign({ size: "small", type: "tertiary" }, headerButtons.back, { className: "mr-8", dataId: dataId ? `${dataId}-back` : '' }))) : null, _jsx(Text, { className: "side-sheet__title", weight: "bolder", lineHeight: "large", size: "medium", dataId: dataId ? `${dataId}-title` : '', children: title })] }), _jsxs("div", { className: "side-sheet__header__right", children: [(headerButtons === null || headerButtons === void 0 ? void 0 : headerButtons.pin) ? (_jsx(Button, Object.assign({ size: "small", type: "tertiary" }, headerButtons.pin, { className: "mr-8", dataId: dataId ? `${dataId}-pin` : '' }))) : null, (headerButtons === null || headerButtons === void 0 ? void 0 : headerButtons.close) ? (_jsx(Button, Object.assign({ size: "small", type: "tertiary" }, headerButtons.close, { onClick: onClose, dataId: dataId ? `${dataId}-close` : '' }))) : (_jsx(Button, { size: "small", type: "tertiary", iconProps: { Component: IconDismissFilled }, onClick: onClose, dataId: dataId ? `${dataId}-close` : '' }))] }), isShownScrollIcon && (_jsx(Button, { size: "large", type: "secondary", iconProps: { Component: IconCaretUp }, className: `side-sheet__header__scroll-top side-sheet__header__scroll-top__${size}`, dataId: dataId ? `${dataId}-scroll-top` : '', onClick: handleScrollToTop }))] }), _jsx("div", { className: "side-sheet__content scrollbar scrollbar--vertical", "data-id": dataId ? `${dataId}-content` : '', ref: scrollbarContainerRef, children: children }), _jsx(Footer, { footerButtons: footerButtons, isLoading: isLoading, onClose: onClose, onSubmit: onSubmit, checkboxInfo: checkboxInfo, dataId: dataId })] }) })) : null }));
 };

package/components/SideSheet/types.d.ts

@@ -5,7 +5,7 @@ export type TCheckboxInfo = {
     label: string;
     isChecked: boolean;
 };
-export interface TSideSheetPropTypes {
+export interface TSideSheetPropTypes extends IBaseProps {
     closeOnOutsideClick?: boolean;
     shouldRemoveCallback?: boolean;
     size?: TSideSheetSize;

package/components/Skeleton/types.d.ts

@@ -1,7 +1,7 @@
 import { CSSProperties, ReactNode } from 'react';
 export type TSkeletonVariant = 'text' | 'circular' | 'rectangular' | 'rounded';
 export type TSkeletonAnimation = 'pulse' | 'wave' | 'none';
-export interface TSkeletonPropTypes {
+export interface TSkeletonPropTypes extends IBaseProps {
     /** Visual shape of the placeholder. */
     variant?: TSkeletonVariant;
     /** Animation style. Pass `'none'` to disable. */
@@ -20,5 +20,4 @@ export interface TSkeletonPropTypes {
     /** Inline style overrides applied to every rendered skeleton element. */
     style?: CSSProperties;
     className?: string;
-    dataId?: string;
 }

package/components/Status/types.d.ts

@@ -11,5 +11,4 @@ export interface TStatusProps extends IFormCompProps {
     className?: string;
     withCircle?: boolean;
     withBackground?: boolean;
-    dataId?: string;
 }

package/components/Stepper/Stepper.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useState } from 'react';
 export const Stepper = (props) => {
-    const { list, activeStep = 0, setActiveStep } = props;
+    const { list, activeStep = 0, setActiveStep, dataId = '' } = props;
     const [activeStepIndex, setActiveStepIndex] = useState(activeStep);
     const decreaseStepIndex = () => {
         let newIndex = activeStepIndex;
@@ -25,5 +25,5 @@ export const Stepper = (props) => {
         }
     }, [activeStep, activeStepIndex]);
     const Content = list[activeStepIndex];
-    return (_jsx(Content, { activeStepIndex: activeStepIndex, isNextDisabled: activeStepIndex === list.length - 1, isPrevDisabled: activeStepIndex === 0, prevHandler: decreaseStepIndex, nextHandler: increaseStepIndex, stepCount: list.length }));
+    return (_jsx(Content, { activeStepIndex: activeStepIndex, isNextDisabled: activeStepIndex === list.length - 1, isPrevDisabled: activeStepIndex === 0, prevHandler: decreaseStepIndex, nextHandler: increaseStepIndex, stepCount: list.length, dataId: dataId ? `${dataId}-step-${activeStepIndex}` : '' }));
 };

package/components/Stepper/types.d.ts

@@ -1,4 +1,4 @@
-export interface TStepperContentWrapperProps {
+export interface TStepperContentWrapperProps extends IBaseProps {
     isPrevDisabled: boolean;
     isNextDisabled: boolean;
     prevHandler: () => void;
@@ -7,7 +7,7 @@ export interface TStepperContentWrapperProps {
     stepCount: number;
 }
 declare type TComp = (props: TStepperContentWrapperProps) => React.ReactElement;
-export interface TStepperProps {
+export interface TStepperProps extends IBaseProps {
     list: TComp[];
     activeStep?: number;
     setActiveStep?: (step: number) => void;

package/components/Tab/types.d.ts

@@ -1,8 +1,7 @@
 import { TBadgeProps } from '../Badge/types';
-export type TTabItem = {
+export type TTabItem = IBaseProps & {
     value: number | string;
     label: string | React.ReactElement;
-    dataId?: string;
     disabled?: boolean;
     badgeProps?: TBadgeProps;
     iconProps?: {
@@ -25,8 +24,7 @@ export interface TTabProps extends IFormCompProps {
     selectedValue: number | string;
     onSelect: (value: string | number) => void;
 }
-export type TTabItemProps = {
-    dataId?: string;
+export type TTabItemProps = IBaseProps & {
     label?: string | React.ReactElement;
     size?: 'large' | 'medium' | 'small';
     className?: string;

package/components/Table/Header.d.ts

@@ -1,11 +1,11 @@
 import { ReactElement } from 'react';
 import { HeaderGroup } from 'react-table';
-type Props = {
+type Props = IBaseProps & {
     fixedHeader?: boolean;
     withSelect: boolean;
     tableWidth: number;
     headerGroup: HeaderGroup;
     uniqueKey: string;
 };
-export declare function Header({ headerGroup, tableWidth, withSelect, uniqueKey, fixedHeader }: Props): ReactElement;
+export declare function Header({ headerGroup, tableWidth, withSelect, uniqueKey, fixedHeader, dataId }: Props): ReactElement;
 export {};

package/components/Table/Header.js

@@ -15,7 +15,7 @@ import { calcColumnWidth, CHECKBOX_DEFAULT_WIDTH, CHECKBOX_HEADER_ID } from './u
 import { Text } from '../Text';
 import IconArrowDown from '../SVGIcons/IconArrowDown';
 import IconArrowUp from '../SVGIcons/IconArrowUp';
-export function Header({ headerGroup, tableWidth, withSelect, uniqueKey, fixedHeader = false }) {
+export function Header({ headerGroup, tableWidth, withSelect, uniqueKey, fixedHeader = false, dataId = '' }) {
     const _a = headerGroup.getHeaderGroupProps(), { key: keyheaderGroup } = _a, headerGroupProps = __rest(_a, ["key"]);
     return (_jsx("tr", Object.assign({}, headerGroupProps, { className: classNames({ fixed_header: fixedHeader }), children: headerGroup.headers.map(({ id, minWidth, maxWidth, width, widthInPercent, getHeaderProps, fixed, columnProps, render, isSorted, isSortedDesc, getSortByToggleProps }, i, arr) => {
             var _a;
@@ -24,7 +24,7 @@ export function Header({ headerGroup, tableWidth, withSelect, uniqueKey, fixedHe
                     ? CHECKBOX_DEFAULT_WIDTH
                     : calcColumnWidth(widthInPercent, tableWidth), left: !isSelection && withSelect && fixed === 'left' ? CHECKBOX_DEFAULT_WIDTH : 0 }, (!isSelection && minWidth ? { minWidth } : {})), (!isSelection && maxWidth ? { maxWidth } : {})), (!isSelection && width ? { width } : {}));
             const _b = getHeaderProps((columnProps === null || columnProps === void 0 ? void 0 : columnProps.sortable) ? getSortByToggleProps() : undefined), { key: keyHead } = _b, headProps = __rest(_b, ["key"]);
-            return (_jsx("th", Object.assign({}, headProps, { className: classNames({
+            return (_jsx("th", Object.assign({}, headProps, { "data-id": dataId ? `${dataId}-header-${id !== null && id !== void 0 ? id : i}` : '', className: classNames({
                     fixed_column_left: fixed === 'left',
                     fixed_column_right: fixed === 'right',
                     fixed_checkbox: isSelection && ((_a = arr[i + 1]) === null || _a === void 0 ? void 0 : _a.fixed) === 'left',

package/components/Table/IndeterminateCheckbox.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-type IndeterminateCheckboxProps = {
+export declare const IndeterminateCheckbox: React.ForwardRefExoticComponent<IBaseProps & {
     indeterminate: boolean;
     checked: boolean;
     disabled: boolean;
@@ -8,6 +8,4 @@ type IndeterminateCheckboxProps = {
             checked: boolean;
         };
     }) => void;
-};
-export declare const IndeterminateCheckbox: React.ForwardRefExoticComponent<IndeterminateCheckboxProps & React.RefAttributes<HTMLInputElement>>;
-export {};
+} & React.RefAttributes<HTMLInputElement>>;

package/components/Table/IndeterminateCheckbox.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef, useEffect, useRef } from 'react';
 import { Checkbox } from '../Checkbox';
-export const IndeterminateCheckbox = forwardRef(({ indeterminate, checked, onChange, disabled = false }, ref) => {
+export const IndeterminateCheckbox = forwardRef(({ indeterminate, checked, onChange, disabled = false, dataId = '' }, ref) => {
     const defaultRef = useRef(null);
     const resolvedRef = ref || defaultRef;
     useEffect(() => {
@@ -10,6 +10,6 @@ export const IndeterminateCheckbox = forwardRef(({ indeterminate, checked, onCha
     const handleChange = (v) => {
         onChange({ target: { checked: v } });
     };
-    return (_jsx(Checkbox, { disabled: disabled, value: checked, onClick: handleChange, ref: resolvedRef, stopPropagation: true }));
+    return (_jsx(Checkbox, { disabled: disabled, value: checked, onClick: handleChange, ref: resolvedRef, dataId: dataId, stopPropagation: true }));
 });
 IndeterminateCheckbox.displayName = 'IndeterminateCheckbox';

package/components/Table/Row.d.ts

@@ -1,11 +1,11 @@
 import { ReactElement } from 'react';
 import { Row as RowType } from 'react-table';
-type Props = {
+type Props = IBaseProps & {
     row: RowType;
     handleRowClick?: (row: any) => void;
     withSelect: boolean;
     selectedFlatRows: RowType[];
     uniqueKey: string;
 };
-export declare function Row({ row, selectedFlatRows, withSelect, uniqueKey, handleRowClick }: Props): ReactElement;
+export declare function Row({ row, selectedFlatRows, withSelect, uniqueKey, handleRowClick, dataId }: Props): ReactElement;
 export {};

package/components/Table/Row.js

@@ -13,19 +13,19 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useMemo } from 'react';
 import classNames from 'classnames';
 import { CHECKBOX_DEFAULT_WIDTH, CHECKBOX_HEADER_ID } from './utils';
-export function Row({ row, selectedFlatRows, withSelect, uniqueKey, handleRowClick }) {
+export function Row({ row, selectedFlatRows, withSelect, uniqueKey, handleRowClick, dataId = '' }) {
     const isRowSelected = useMemo(() => selectedFlatRows.find((r) => r.id === row.id), [selectedFlatRows]);
     const _a = row.getRowProps(), { key: keyRow } = _a, rowProps = __rest(_a, ["key"]);
-    return (_jsx("tr", Object.assign({}, rowProps, { className: classNames({ selected: Boolean(isRowSelected) }), onClick: () => handleRowClick === null || handleRowClick === void 0 ? void 0 : handleRowClick(row.original), children: row.cells.map(({ getCellProps, column, render }, i, arr) => {
-            var _a;
+    return (_jsx("tr", Object.assign({}, rowProps, { "data-id": dataId ? `${dataId}-row-${row.index}` : '', className: classNames({ selected: Boolean(isRowSelected) }), onClick: () => handleRowClick === null || handleRowClick === void 0 ? void 0 : handleRowClick(row.original), children: row.cells.map(({ getCellProps, column, render }, i, arr) => {
+            var _a, _b;
             const isSelection = column.id === CHECKBOX_HEADER_ID;
-            const _b = getCellProps(), { key: keycell } = _b, cellProps = __rest(_b, ["key"]);
-            return (_jsx("td", Object.assign({}, cellProps, { style: {
+            const _c = getCellProps(), { key: keycell } = _c, cellProps = __rest(_c, ["key"]);
+            return (_jsx("td", Object.assign({}, cellProps, { "data-id": dataId ? `${dataId}-row-${row.index}-cell-${(_a = column.id) !== null && _a !== void 0 ? _a : i}` : '', style: {
                     left: !isSelection && withSelect && (column === null || column === void 0 ? void 0 : column.fixed) === 'left' ? CHECKBOX_DEFAULT_WIDTH : 0
                 }, className: classNames({
                     fixed_column_left: (column === null || column === void 0 ? void 0 : column.fixed) === 'left',
                     fixed_column_right: (column === null || column === void 0 ? void 0 : column.fixed) === 'right',
-                    fixed_checkbox: isSelection && ((_a = arr[i + 1].column) === null || _a === void 0 ? void 0 : _a.fixed) === 'left'
+                    fixed_checkbox: isSelection && ((_b = arr[i + 1].column) === null || _b === void 0 ? void 0 : _b.fixed) === 'left'
                 }), onClick: (event) => {
                     if (isSelection)
                         event.stopPropagation();

package/components/Table/Table.d.ts

@@ -1,3 +1,3 @@
 import { ReactElement } from 'react';
 import { TTableProps } from './types';
-export declare function Table({ columns, data, onChange, fixedHeader, withSelect, handleRowClick, className, language, containerRefHandler, submitButtons }: TTableProps): ReactElement;
+export declare function Table({ columns, data, onChange, fixedHeader, withSelect, handleRowClick, className, language, containerRefHandler, submitButtons, dataId }: TTableProps): ReactElement;

package/components/Table/Table.js

@@ -11,7 +11,7 @@ import { TABLE_LOCALIZATION } from './localization';
 import { setTranslationValue } from '../../utils/helpers';
 import IconCheckmark from '../SVGIcons/IconCheckmark';
 import IconDismiss from '../SVGIcons/IconDismiss';
-export function Table({ columns, data, onChange, fixedHeader, withSelect = false, handleRowClick, className, language = 'en', containerRefHandler, submitButtons }) {
+export function Table({ columns, data, onChange, fixedHeader, withSelect = false, handleRowClick, className, language = 'en', containerRefHandler, submitButtons, dataId = '' }) {
     const tableRef = useRef(null);
     const [tableWidth, setTableWidth] = useState(400);
     const uniqueKey = useId();
@@ -42,7 +42,7 @@ export function Table({ columns, data, onChange, fixedHeader, withSelect = false
     const { getTableProps, getTableBodyProps, selectedFlatRows, headerGroups, rows, prepareRow, toggleAllRowsSelected, state } = useTable({
         columns: sortedColumns,
         data
-    }, useSortBy, useRowSelect, (hooks) => setSelectedRows(hooks, withSelect));
+    }, useSortBy, useRowSelect, (hooks) => setSelectedRows(hooks, withSelect, dataId));
     const handleResize = useCallback(() => {
         var _a;
         if (tableRef.current) {
@@ -65,10 +65,10 @@ export function Table({ columns, data, onChange, fixedHeader, withSelect = false
     const onClearSelectedRows = useCallback(() => {
         toggleAllRowsSelected(false);
     }, []);
-    return (_jsxs("div", { ref: containerRefHandler, children: [withSelect && selectedFlatRows.length > 0 && (_jsxs("div", { className: "table-wrapper__selected-rows", children: [_jsx(Button, { buttonText: setTranslationValue(TABLE_LOCALIZATION[language].n_selected || '', selectedFlatRows.length), onClick: onClearSelectedRows, type: "tertiary", size: "medium", iconProps: { alignment: 'left', Component: IconDismiss } }), submitButtons === null || submitButtons === void 0 ? void 0 : submitButtons.map(({ buttonText, isLoading, onClick, iconProps }) => (_jsx(Button, { iconProps: iconProps || { alignment: 'left', Component: IconCheckmark }, onClick: (event) => {
+    return (_jsxs("div", { ref: containerRefHandler, "data-id": dataId, children: [withSelect && selectedFlatRows.length > 0 && (_jsxs("div", { className: "table-wrapper__selected-rows", children: [_jsx(Button, { buttonText: setTranslationValue(TABLE_LOCALIZATION[language].n_selected || '', selectedFlatRows.length), onClick: onClearSelectedRows, type: "tertiary", size: "medium", iconProps: { alignment: 'left', Component: IconDismiss }, dataId: dataId ? `${dataId}-clear-selected` : '' }), submitButtons === null || submitButtons === void 0 ? void 0 : submitButtons.map(({ buttonText, isLoading, onClick, iconProps }, i) => (_jsx(Button, { iconProps: iconProps || { alignment: 'left', Component: IconCheckmark }, onClick: (event) => {
                             onClick(event, state, onClearSelectedRows);
-                        }, buttonText: buttonText || 'Submit', type: "secondary", size: "medium", className: "mr-8", isLoading: isLoading })))] })), _jsx("div", { onScroll: dispatchScrollEvent, className: classNames('table-wrapper scrollbar scrollbar--horizontal scrollbar--vertical', className, { 'table-row-clickable': !!handleRowClick }), style: { maxHeight: fixedHeader === null || fixedHeader === void 0 ? void 0 : fixedHeader.y }, children: _jsxs("table", Object.assign({}, getTableProps(), { ref: tableRef, children: [_jsx("thead", { children: headerGroups.map((headerGroup, i) => (_jsx(Header, { withSelect: withSelect, fixedHeader: Boolean(fixedHeader), headerGroup: headerGroup, tableWidth: tableWidth, uniqueKey: uniqueKey }, `table_head_${uniqueKey}_${i}`))) }), _jsx("tbody", Object.assign({}, getTableBodyProps(), { children: rows.map((row) => {
+                        }, buttonText: buttonText || 'Submit', type: "secondary", size: "medium", className: "mr-8", isLoading: isLoading, dataId: dataId ? `${dataId}-submit-${i}` : '' })))] })), _jsx("div", { onScroll: dispatchScrollEvent, className: classNames('table-wrapper scrollbar scrollbar--horizontal scrollbar--vertical', className, { 'table-row-clickable': !!handleRowClick }), style: { maxHeight: fixedHeader === null || fixedHeader === void 0 ? void 0 : fixedHeader.y }, children: _jsxs("table", Object.assign({}, getTableProps(), { ref: tableRef, children: [_jsx("thead", { children: headerGroups.map((headerGroup, i) => (_jsx(Header, { withSelect: withSelect, fixedHeader: Boolean(fixedHeader), headerGroup: headerGroup, tableWidth: tableWidth, uniqueKey: uniqueKey, dataId: dataId }, `table_head_${uniqueKey}_${i}`))) }), _jsx("tbody", Object.assign({}, getTableBodyProps(), { children: rows.map((row) => {
                                 prepareRow(row);
-                                return (_jsx(Row, { handleRowClick: handleRowClick, withSelect: withSelect, selectedFlatRows: selectedFlatRows, row: row, uniqueKey: uniqueKey }, `table_row_${uniqueKey}_${row.id}`));
+                                return (_jsx(Row, { handleRowClick: handleRowClick, withSelect: withSelect, selectedFlatRows: selectedFlatRows, row: row, uniqueKey: uniqueKey, dataId: dataId }, `table_row_${uniqueKey}_${row.id}`));
                             }) }))] })) })] }));
 }

package/components/Table/types.d.ts

@@ -15,7 +15,7 @@ export type TColumn = Column & TColumnFields;
 export interface IButtonPropTypes extends Omit<TButtonPropTypes, 'onClick'> {
     onClick: (event: TClickEventType, data: any, clearRowSelection?: () => void) => void;
 }
-export type TTableProps = {
+export type TTableProps = IBaseProps & {
     className?: string;
     columns: TColumn[];
     data: any[];

package/components/Table/utils.d.ts

@@ -1,5 +1,5 @@
 import { Hooks } from 'react-table';
 export declare const CHECKBOX_HEADER_ID = "selection";
 export declare const CHECKBOX_DEFAULT_WIDTH = 48;
-export declare function setSelectedRows(hooks: Hooks, withSelect: boolean): void;
+export declare function setSelectedRows(hooks: Hooks, withSelect: boolean, dataId?: string): void;
 export declare function calcColumnWidth(percent: number, tableWidth: number): number;