hrm_ui_lib 3.2.2 → 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/Modal/ModalContent.d.ts

@@ -1,6 +1,6 @@
-import { ReactElement, ReactNode } from 'react';
+import React, { ReactElement, ReactNode } from 'react';
 import { TButtonPropTypes } from '../Button/types';
-import { TTitleSize } from './types';
+import { TModalHeaderIconColor, TTitleSize } from './types';
 type TProps = {
     title?: string;
     subtitle?: string;
@@ -17,6 +17,9 @@ type TProps = {
     };
     onSubmit?: () => void;
     titleSize?: TTitleSize;
+    headerIcon?: React.ReactNode;
+    headerIconColor?: TModalHeaderIconColor;
+    headerStatus?: React.ReactNode;
 };
-export declare const ModalContent: ({ title, subtitle, dataIdPrefix, closeIcon, onClose, children, withFooter, confirmBtnTooltipText, buttonProps, onSubmit, titleSize }: TProps) => ReactElement;
+export declare const ModalContent: ({ title, subtitle, dataIdPrefix, closeIcon, onClose, children, withFooter, confirmBtnTooltipText, buttonProps, onSubmit, headerIcon, headerIconColor, headerStatus, titleSize }: TProps) => ReactElement;
 export {};

package/components/Modal/ModalContent.js

@@ -1,10 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import classNames from 'classnames';
 import IconDismiss from '../SVGIcons/IconDismiss';
 import { Positions } from '../Tooltip/types';
 import { Button } from '../Button';
 import { Text } from '../Text';
 import { Tooltip } from '../Tooltip';
 import { noop } from '../../utils/helpers';
-export const ModalContent = ({ title, subtitle, dataIdPrefix, closeIcon, onClose, children, withFooter = true, confirmBtnTooltipText, buttonProps, onSubmit, titleSize = 'large' }) => {
-    return (_jsxs(_Fragment, { children: [title ? (_jsxs("div", { className: "modal__header", children: [_jsxs("div", { children: [_jsx(Text, { lineHeight: "large", size: titleSize, weight: 'bolder', dataId: dataIdPrefix ? `${dataIdPrefix}-modal-title` : '', children: title }), subtitle ? (_jsx(Text, { className: 'mt-12', dataId: dataIdPrefix ? `${dataIdPrefix}-modal-title` : '', children: subtitle })) : null] }), closeIcon ? (_jsx(Button, { className: 'modal__close ml-16', dataId: dataIdPrefix ? `${dataIdPrefix}-modal-close-button` : '', iconProps: { Component: IconDismiss }, onClick: onClose, type: "tertiary", size: titleSize === 'medium' ? 'small' : 'large' })) : null] })) : null, _jsx("div", { className: "modal__content scrollbar scrollbar--vertical", children: children }), withFooter && buttonProps ? (_jsxs("div", { className: "modal__footer", children: [buttonProps.cancel && (_jsx(Button, Object.assign({ type: "tertiary", className: "modal__footer__btn mr-16", onClick: onClose, dataId: dataIdPrefix ? `${dataIdPrefix}-modal-cancel-button` : '' }, (buttonProps.cancel || {})))), confirmBtnTooltipText ? (_jsx(Tooltip, { text: confirmBtnTooltipText, id: 'confirm-btn-tooltip', position: Positions.TOP_CENTER })) : null, _jsx(Button, Object.assign({ id: 'confirm-btn-tooltip', className: 'modal__footer__btn', type: "primary", onClick: onSubmit ? onSubmit : noop, dataId: dataIdPrefix ? `${dataIdPrefix}-modal-confirm-button` : '' }, buttonProps.confirm))] })) : null] }));
+export const ModalContent = ({ title, subtitle, dataIdPrefix, closeIcon, onClose, children, withFooter = true, confirmBtnTooltipText, buttonProps, onSubmit, headerIcon, headerIconColor = 'brand', headerStatus, titleSize = 'large' }) => {
+    return (_jsxs(_Fragment, { children: [title ? (_jsxs("div", { className: "modal__header", children: [_jsxs("div", { className: "modal__header-content", children: [headerIcon ? (_jsx("div", { className: classNames('modal__header-icon', `modal__header-icon--${headerIconColor}`), children: headerIcon })) : null, _jsxs("div", { className: "modal__header-text", children: [_jsxs("div", { className: "modal__header-title-row", children: [_jsx(Text, { className: "modal__header-title", lineHeight: "large", size: titleSize, weight: 'bolder', dataId: dataIdPrefix ? `${dataIdPrefix}-modal-title` : '', children: title }), headerStatus ? _jsx("div", { className: "modal__header-status", children: headerStatus }) : null] }), subtitle ? (_jsx(Text, { className: 'mt-12', dataId: dataIdPrefix ? `${dataIdPrefix}-modal-title` : '', children: subtitle })) : null] })] }), closeIcon ? (_jsx(Button, { className: 'modal__close ml-16', dataId: dataIdPrefix ? `${dataIdPrefix}-modal-close-button` : '', iconProps: { Component: IconDismiss }, onClick: onClose, type: "tertiary", size: titleSize === 'medium' ? 'small' : 'large' })) : null] })) : null, _jsx("div", { className: "modal__content scrollbar scrollbar--vertical", children: children }), withFooter && buttonProps ? (_jsxs("div", { className: "modal__footer", children: [buttonProps.cancel && (_jsx(Button, Object.assign({ type: "tertiary", className: "modal__footer__btn mr-16", onClick: onClose, dataId: dataIdPrefix ? `${dataIdPrefix}-modal-cancel-button` : '' }, (buttonProps.cancel || {})))), confirmBtnTooltipText ? (_jsx(Tooltip, { text: confirmBtnTooltipText, id: 'confirm-btn-tooltip', position: Positions.TOP_CENTER })) : null, _jsx(Button, Object.assign({ id: 'confirm-btn-tooltip', className: 'modal__footer__btn', type: "primary", onClick: onSubmit ? onSubmit : noop, dataId: dataIdPrefix ? `${dataIdPrefix}-modal-confirm-button` : '' }, buttonProps.confirm))] })) : null] }));
 };

package/components/Modal/types.d.ts

@@ -1,6 +1,7 @@
 import { ReactNode } from 'react';
 import { TButtonPropTypes } from '../Button/types';
 export type TTitleSize = 'medium' | 'large';
+export type TModalHeaderIconColor = 'brand' | 'green' | 'blue' | 'red' | 'purple' | 'yellow';
 export interface TModalPropTypes {
     dataIdPrefix?: string;
     closeOnOutsideClick?: boolean;
@@ -21,6 +22,8 @@ export interface TModalPropTypes {
     className?: string;
     confirmBtnTooltipText?: string;
     isMobileFullScreen?: boolean;
+    headerIcon?: ReactNode;
+    headerStatus?: ReactNode;
 }
 export interface TModalConfirmationPropTypes {
     dataIdPrefix?: string;

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/SVGIcons/IconCoins.d.ts

@@ -0,0 +1,4 @@
+import { ReactElement } from 'react';
+import { ISVGIconProps } from '../../type';
+declare const IconCoins: ({ size, type, className, onClick, refHandler, id, dataId }: ISVGIconProps) => ReactElement;
+export default IconCoins;

package/components/SVGIcons/IconCoins.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from 'classnames';
+const IconCoins = ({ size, type, className = '', onClick, refHandler, id, dataId }) => (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", className: classNames('svg-icon', {
+        [`svg-icon__size-${size}`]: size,
+        [`svg-icon__type-${type}`]: type,
+        [className]: className
+    }), viewBox: "0 0 24 24", fill: "none", onClick: onClick, ref: refHandler, id: id, "data-id": dataId ? `${dataId}-svg-icon` : '', stroke: "#717784", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [_jsx("circle", { cx: "8", cy: "8", r: "6" }), _jsx("path", { d: "M18.09 10.37A6 6 0 1 1 10.34 18" }), _jsx("path", { d: "M7 6h1v4" }), _jsx("path", { d: "m16.71 13.88.7.71-2.82 2.82" })] }));
+export default IconCoins;

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 {};