hrm_ui_lib 3.2.3 → 3.4.0

package/components/Select/Select/Select.js

@@ -117,8 +117,8 @@ export const Select = forwardRef((props, _ref) => {
     useEffect(() => {
         setCurrentSelectedLabel();
     }, [setCurrentSelectedLabel]);
-    return (_jsxs("div", { "data-id": `${dataId}-content`, className: classNames(`select select--${size}`, className, {
+    return (_jsxs("div", { "data-id": dataId, className: classNames(`select select--${size}`, className, {
             'select--opened': isOpen
-        }), ref: containerRef, children: [!isButtonSelect && (_jsx(Input, { onClick: disabled ? noop : onOpenOptions, size: size, dataId: dataId, hasError: hasError, className: "select__input", label: label, onChange: onSearch, required: isRequiredField, leftIconProps: leftIconProps, rightIconProps: isOpen ? selectRightIconOpenedProps : selectRightIconProps, placeholder: placeHolder, currentValue: searchValue || (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label.toString()) || '', isValid: isValid, disabled: disabled, helperText: isOpen ? '' : outerHelperText, ref: inputRef, labelAddons: labelAddons, autoComplete: "false", readOnly: (isMobile && isMobileFullScreen) || !isWithSearch, onKeyDown: handleKeyDown })), isButtonSelect && (_jsx(Button, { size: size, type: "secondary", dataId: dataId, iconProps: selectRightIconProps, buttonText: placeHolder || '', onClick: disabled ? noop : openDropdown, className: "select_button" })), isMobile && isMobileFullScreen ? (_jsx(SelectMobile, Object.assign({}, rest, { isOpen: isOpen, filteredData: filteredData, closeDropdown: closeDropdown, currentSelection: currentSelection, isRequiredField: isRequiredField, onItemDeselect: onItemDeselect, onItemSelect: onItemSelect, translations: localizations, withSearch: withSearch, searchValue: searchValue, setSearchValue: setSearchValue }))) : (_jsx(SelectDesktop, Object.assign({}, rest, { onItemDeselect: onItemDeselect, onItemSelect: onItemSelect, currentSelection: currentSelection, isRequiredField: isRequiredField, filteredData: filteredData, inputRef: inputRef.current, containerRef: containerRef.current, isOpen: isOpen, closeDropdown: closeDropdown, setCurrentSelectedLabel: setCurrentSelectedLabel, searchValue: searchValue, setSearchValue: setSearchValue, translations: localizations, activeIndex: activeIndex, setActiveIndex: setActiveIndex })))] }));
+        }), ref: containerRef, children: [!isButtonSelect && (_jsx(Input, { onClick: disabled ? noop : onOpenOptions, size: size, dataId: dataId ? `${dataId}-trigger` : '', hasError: hasError, className: "select__input", label: label, onChange: onSearch, required: isRequiredField, leftIconProps: leftIconProps, rightIconProps: isOpen ? selectRightIconOpenedProps : selectRightIconProps, placeholder: placeHolder, currentValue: searchValue || (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label.toString()) || '', isValid: isValid, disabled: disabled, helperText: isOpen ? '' : outerHelperText, ref: inputRef, labelAddons: labelAddons, autoComplete: "false", readOnly: (isMobile && isMobileFullScreen) || !isWithSearch, onKeyDown: handleKeyDown })), isButtonSelect && (_jsx(Button, { size: size, type: "secondary", dataId: dataId ? `${dataId}-trigger` : '', iconProps: selectRightIconProps, buttonText: placeHolder || '', onClick: disabled ? noop : openDropdown, className: "select_button" })), isMobile && isMobileFullScreen ? (_jsx(SelectMobile, Object.assign({}, rest, { dataId: dataId, isOpen: isOpen, filteredData: filteredData, closeDropdown: closeDropdown, currentSelection: currentSelection, isRequiredField: isRequiredField, onItemDeselect: onItemDeselect, onItemSelect: onItemSelect, translations: localizations, withSearch: withSearch, searchValue: searchValue, setSearchValue: setSearchValue }))) : (_jsx(SelectDesktop, Object.assign({}, rest, { dataId: dataId, onItemDeselect: onItemDeselect, onItemSelect: onItemSelect, currentSelection: currentSelection, isRequiredField: isRequiredField, filteredData: filteredData, inputRef: inputRef.current, containerRef: containerRef.current, isOpen: isOpen, closeDropdown: closeDropdown, setCurrentSelectedLabel: setCurrentSelectedLabel, searchValue: searchValue, setSearchValue: setSearchValue, translations: localizations, activeIndex: activeIndex, setActiveIndex: setActiveIndex })))] }));
 });
 Select.displayName = 'Select';

package/components/Select/Select/SelectDesktop/index.js

@@ -10,6 +10,7 @@ import { Empty } from '../../../Empty';
 import { Text } from '../../../Text';
 import { Loading } from '../../SharedComponents';
 import { DROPDOWN_HEIGHT, DROPDOWN_WIDTH, ITEM_SIZE } from '../../constants';
+import { getOptionDataId } from '../../helper';
 export const SelectDesktop = (props) => {
     const { currentSelection, isLoading, dataId = '', innerHelperText, isRequiredField, labelLeftIconProps, labelRightIconComponent, optionRightIconComponent, tooltipAddons, dropdownWidth, isOpen, closeDropdown, inputRef, containerRef, onItemSelect, onItemDeselect, searchValue, setSearchValue, translations, filteredData, activeIndex, setActiveIndex, setCurrentSelectedLabel } = props;
     const listRef = useRef(null);
@@ -60,10 +61,10 @@ export const SelectDesktop = (props) => {
         input: inputRef
     });
     useChangePositionsOnScroll(inputRef, dropdownRef, hasBottomSpace);
-    return (_jsx(_Fragment, { children: isOpen && (_jsx("div", { className: "select__options", style: Object.assign({ left,
+    return (_jsx(_Fragment, { children: isOpen && (_jsx("div", { "data-id": dataId ? `${dataId}-content` : '', className: "select__options", style: Object.assign({ left,
                 width }, (hasBottomSpace || !hasTopSpace
                 ? { top: bottom }
-                : { bottom: window.innerHeight - top + DROPDOWN_AND_INPUT_GAP })), ref: setDropdownRef, children: isLoading ? (_jsx(Loading, {})) : (_jsx(_Fragment, { children: _jsxs("div", { "data-id": `${dataId}-options-content`, className: classNames('select__options__scroll', 'scrollbar'), children: [innerHelperText ? (_jsx("div", { className: "content-top", children: _jsx(Text, { size: "xsmall", type: "secondary", className: "content-top__label", children: innerHelperText }) })) : null, filteredData.length > 0 && (_jsx(List, { ref: listRef, height: filteredData.length * ITEM_SIZE > DROPDOWN_HEIGHT
+                : { bottom: window.innerHeight - top + DROPDOWN_AND_INPUT_GAP })), ref: setDropdownRef, children: isLoading ? (_jsx(Loading, {})) : (_jsx(_Fragment, { children: _jsxs("div", { className: classNames('select__options__scroll', 'scrollbar'), children: [innerHelperText ? (_jsx("div", { className: "content-top", children: _jsx(Text, { size: "xsmall", type: "secondary", className: "content-top__label", children: innerHelperText }) })) : null, filteredData.length > 0 && (_jsx(List, { ref: listRef, height: filteredData.length * ITEM_SIZE > DROPDOWN_HEIGHT
                                 ? DROPDOWN_HEIGHT
                                 : filteredData.length * ITEM_SIZE, itemCount: filteredData.length, itemSize: ITEM_SIZE, width: dropdownWidth || DROPDOWN_WIDTH, style: {
                                 width: dropdownWidth || '100%',
@@ -74,7 +75,7 @@ export const SelectDesktop = (props) => {
                                 const item = filteredData[index];
                                 const isSelected = item.value === currentSelection;
                                 const isActive = activeIndex === index;
-                                return (_jsx(OptionItem, { tooltipAddons: tooltipAddons, data: item, onClick: clickHandler(isSelected), labelLeftIconProps: labelLeftIconProps, OptionRightIconComponent: optionRightIconComponent, LabelRightIconComponent: labelRightIconComponent, disabled: item.disabled, isSelected: isSelected, dataId: item.dataId, style: style, className: classNames('option', {
+                                return (_jsx(OptionItem, { tooltipAddons: tooltipAddons, data: item, onClick: clickHandler(isSelected), labelLeftIconProps: labelLeftIconProps, OptionRightIconComponent: optionRightIconComponent, LabelRightIconComponent: labelRightIconComponent, disabled: item.disabled, isSelected: isSelected, dataId: getOptionDataId(dataId, item.value, index) || item.dataId, style: style, className: classNames('option', {
                                         'option--active': isActive
                                     }) }, item.value));
                             } })), filteredData.length === 0 ? (_jsx(Empty, { size: "small", mainMessage: translations === null || translations === void 0 ? void 0 : translations.emptyListMainMessage })) : null] }) })) })) }));

package/components/Select/Select/SelectMobile/MobileTopContent.d.ts

@@ -5,6 +5,7 @@ type TProps = {
     onBack: () => void;
     withSearch: boolean;
     isOpen: boolean;
+    dataId?: string;
 };
-export declare const MobileTopContent: ({ onBack, setSearchValue, searchValue, withSearch, isOpen }: TProps) => ReactElement;
+export declare const MobileTopContent: ({ onBack, setSearchValue, searchValue, withSearch, isOpen, dataId }: TProps) => ReactElement;
 export {};

package/components/Select/Select/SelectMobile/MobileTopContent.js

@@ -4,7 +4,7 @@ import IconChevronLeft from '../../../SVGIcons/IconChevronLeft';
 import { Input } from '../../../Input';
 import IconDismissFilled from '../../../SVGIcons/IconDismissFilled';
 import IconSearchFilled from '../../../SVGIcons/IconSearchFilled';
-export const MobileTopContent = ({ onBack, setSearchValue, searchValue, withSearch, isOpen }) => {
+export const MobileTopContent = ({ onBack, setSearchValue, searchValue, withSearch, isOpen, dataId }) => {
     const inputRef = useRef(null);
     const onSearch = (e) => {
         setSearchValue(e.target.value);
@@ -17,7 +17,7 @@ export const MobileTopContent = ({ onBack, setSearchValue, searchValue, withSear
             inputRef.current.focus();
         }
     }, [inputRef.current]);
-    return (_jsxs("div", { className: "flexbox mobile_top_content", children: [_jsx(IconChevronLeft, { onClick: onBack, size: "large" }), withSearch && (_jsx(Input, { currentValue: searchValue, handleChange: onSearch, className: "ml-8", size: "small", ref: inputRef, rightIconProps: {
+    return (_jsxs("div", { className: "flexbox mobile_top_content", children: [_jsx(IconChevronLeft, { onClick: onBack, size: "large" }), withSearch && (_jsx(Input, { dataId: dataId ? `${dataId}-search` : '', currentValue: searchValue, handleChange: onSearch, className: "ml-8", size: "small", ref: inputRef, rightIconProps: {
                     Component: searchValue ? IconDismissFilled : IconSearchFilled,
                     size: searchValue ? 'xsmall' : 'small',
                     onClick: removeFilter

package/components/Select/Select/SelectMobile/index.js

@@ -7,6 +7,7 @@ import { ITEM_SIZE_MOBILE } from '../../constants';
 import { Loading } from '../../SharedComponents';
 import { MobileTopContent } from './MobileTopContent';
 import { FixedSizeList as List } from 'react-window';
+import { getOptionDataId } from '../../helper';
 export const SelectMobile = (props) => {
     const { translations, currentSelection, isOpen, closeDropdown, isLoading, dataId, innerHelperText, filteredData, isRequiredField, onItemSelect, onItemDeselect, tooltipAddons, labelLeftIconProps, optionRightIconComponent, labelRightIconComponent, withSearch, searchValue, setSearchValue } = props;
     const clickHandler = (isSelected) => ({ value }) => {
@@ -25,7 +26,7 @@ export const SelectMobile = (props) => {
     };
     const windowHeight = window.innerHeight;
     const windowWidth = window.innerWidth;
-    return (_jsxs(Modal, { isOpen: isOpen, onClose: closeDropdown, isMobileFullScreen: true, children: [_jsx(MobileTopContent, { searchValue: searchValue, setSearchValue: setSearchValue, onBack: closeModal, withSearch: withSearch, isOpen: isOpen }), _jsxs("div", { className: "mobile_options_content", children: [innerHelperText ? (_jsx(Text, { size: "xsmall", type: "secondary", className: "mobile_options_content__label", children: innerHelperText })) : null, isLoading ? (_jsx(Loading, {})) : (_jsxs("div", { "data-id": `${dataId}-options-content`, children: [filteredData.length > 0 && (_jsx(List, { height: windowHeight - 30 - 32 - 24, itemCount: filteredData.length, itemSize: ITEM_SIZE_MOBILE, width: windowWidth, style: {
+    return (_jsxs(Modal, { isOpen: isOpen, onClose: closeDropdown, isMobileFullScreen: true, children: [_jsx(MobileTopContent, { dataId: dataId, searchValue: searchValue, setSearchValue: setSearchValue, onBack: closeModal, withSearch: withSearch, isOpen: isOpen }), _jsxs("div", { className: "mobile_options_content", children: [innerHelperText ? (_jsx(Text, { size: "xsmall", type: "secondary", className: "mobile_options_content__label", children: innerHelperText })) : null, isLoading ? (_jsx(Loading, {})) : (_jsxs("div", { "data-id": dataId ? `${dataId}-content` : '', children: [filteredData.length > 0 && (_jsx(List, { height: windowHeight - 30 - 32 - 24, itemCount: filteredData.length, itemSize: ITEM_SIZE_MOBILE, width: windowWidth, style: {
                                     width: '100%',
                                     overflowX: 'hidden',
                                     overflowY: 'auto',
@@ -33,6 +34,6 @@ export const SelectMobile = (props) => {
                                 }, children: ({ index, style }) => {
                                     const item = filteredData[index];
                                     const isSelected = item.value === currentSelection;
-                                    return (_jsx(OptionItem, { size: "large", tooltipAddons: tooltipAddons, data: item, onClick: clickHandler(isSelected), labelLeftIconProps: labelLeftIconProps, OptionRightIconComponent: optionRightIconComponent, LabelRightIconComponent: labelRightIconComponent, disabled: item.disabled, isSelected: isSelected, dataId: item.dataId, style: style }, item.value));
+                                    return (_jsx(OptionItem, { size: "large", tooltipAddons: tooltipAddons, data: item, onClick: clickHandler(isSelected), labelLeftIconProps: labelLeftIconProps, OptionRightIconComponent: optionRightIconComponent, LabelRightIconComponent: labelRightIconComponent, disabled: item.disabled, isSelected: isSelected, dataId: getOptionDataId(dataId, item.value, index) || item.dataId, style: style }, item.value));
                                 } })), filteredData.length === 0 ? (_jsx(Empty, { size: "small", mainMessage: translations === null || translations === void 0 ? void 0 : translations.emptyListMainMessage })) : null] }))] })] }));
 };

package/components/Select/SharedComponents/ButtonSelectWrapper/ButtonSelectWrapper.js

@@ -25,5 +25,5 @@ export const ButtonSelectWrapper = (props) => {
         return ` ${selectedValues[0].label} +${selectedValues.length - 1}`;
     }, [selectedValues]);
     useChangePositionsOnScroll(buttonRef === null || buttonRef === void 0 ? void 0 : buttonRef.current, dropdownRef, hasBottomSpace);
-    return (_jsxs("div", { className: classNames(`select select--${size}`, className), ref: setContainerRef, children: [_jsx(Button, { size: size, type: type, dataId: dataId, isOpen: isOpen, buttonText: placeHolder || '', selectedItemsLabels: selectedItemsLabels, onClick: disabled ? noop : openDropdown, refHandler: buttonRef, className: "select_button" }), _jsx(_Fragment, { children: isMobile ? (_jsx(MobileWrapper, { applySelectedItems: applySelectedItems, isOpen: isOpen, closeDrodown: () => setIsOpen(false), modalApplyButtonText: modalApplyButtonText, children: children })) : (_jsx(DesktopWrapper, { offsets: offsets, setDropdownRef: setDropdownRef, isOpen: isOpen, align: align, dropdownWidth: dropdownWidth, inputRef: buttonRef.current, dropdownRef: dropdownRef, containerRef: containerRef, children: children })) })] }));
+    return (_jsxs("div", { "data-id": dataId, className: classNames(`select select--${size}`, className), ref: setContainerRef, children: [_jsx(Button, { size: size, type: type, dataId: dataId ? `${dataId}-trigger` : '', isOpen: isOpen, buttonText: placeHolder || '', selectedItemsLabels: selectedItemsLabels, onClick: disabled ? noop : openDropdown, refHandler: buttonRef, className: "select_button" }), _jsx(_Fragment, { children: isMobile ? (_jsx(MobileWrapper, { dataId: dataId, applySelectedItems: applySelectedItems, isOpen: isOpen, closeDrodown: () => setIsOpen(false), modalApplyButtonText: modalApplyButtonText, children: children })) : (_jsx(DesktopWrapper, { dataId: dataId, offsets: offsets, setDropdownRef: setDropdownRef, isOpen: isOpen, align: align, dropdownWidth: dropdownWidth, inputRef: buttonRef.current, dropdownRef: dropdownRef, containerRef: containerRef, children: children })) })] }));
 };

package/components/Select/SharedComponents/ContentTop.d.ts

@@ -14,6 +14,7 @@ type TProps = {
     hasLimitation?: boolean;
     menuOptions?: TMenuItem[];
     dataIdPrefix?: string;
+    dataId?: string;
     closeDropdown?: () => void;
     handleKeyDown?: (e: React.KeyboardEvent) => void;
 };

package/components/Select/SharedComponents/ContentTop.js

@@ -10,8 +10,9 @@ import { useIsMobile } from '../../../hooks/useGetIsMobile';
 import IconChevronLeft from '../../SVGIcons/IconChevronLeft';
 import { noop } from '../../../utils/helpers';
 export const ContentTop = React.memo((props) => {
-    const { clearAll, selectAll, helperText, searchValue, translations, isAnySelected, setSearchValue, isSearchAvailable = false, hasLimitation = false, isSelectAllDisabled = false, menuOptions = [], dataIdPrefix, closeDropdown, handleKeyDown } = props;
+    const { clearAll, selectAll, helperText, searchValue, translations, isAnySelected, setSearchValue, isSearchAvailable = false, hasLimitation = false, isSelectAllDisabled = false, menuOptions = [], dataIdPrefix, dataId, closeDropdown, handleKeyDown } = props;
     const inputRef = useRef(null);
+    const baseDataId = dataId || dataIdPrefix;
     const { searchInputPlaceHolder, innerLabel, clearAllLabel, selectAllLabel } = translations || {};
     const selectActions = useMemo(() => {
         let options = menuOptions;
@@ -23,7 +24,7 @@ export const ContentTop = React.memo((props) => {
                     handler: selectAll,
                     disabled: isSelectAllDisabled,
                     iconProps: { Component: IconSelectAllOff },
-                    dataId: dataIdPrefix ? `${dataIdPrefix}-select-all` : ''
+                    dataId: baseDataId ? `${baseDataId}-select-all` : ''
                 }
             ];
         }
@@ -36,7 +37,7 @@ export const ContentTop = React.memo((props) => {
                     handler: clearAll,
                     disabled: !isAnySelected,
                     iconProps: { Component: IconDismissFilled },
-                    dataId: dataIdPrefix ? `${dataIdPrefix}-clear-all` : ''
+                    dataId: baseDataId ? `${baseDataId}-clear` : ''
                 }
             ];
         }
@@ -49,7 +50,7 @@ export const ContentTop = React.memo((props) => {
         clearAllLabel,
         isSelectAllDisabled,
         isAnySelected,
-        dataIdPrefix
+        baseDataId
     ]);
     const onSearch = (e) => {
         setSearchValue && setSearchValue(e.target.value);
@@ -64,7 +65,7 @@ export const ContentTop = React.memo((props) => {
     const onBack = () => {
         closeDropdown && closeDropdown();
     };
-    return (_jsxs("div", { className: "content-top", children: [helperText && !isMobile ? (_jsx(Text, { size: "xsmall", type: "secondary", className: "content-top__label", children: helperText })) : null, _jsxs("div", { className: "flexbox search-container", children: [isMobile && _jsx(IconChevronLeft, { onClick: onBack, size: "large" }), isSearchAvailable && (_jsx(Input, { onKeyDown: handleKeyDown || noop, ref: inputRef, className: "content-top__search", size: "small", placeholder: searchInputPlaceHolder, handleChange: onSearch, currentValue: searchValue, rightIconProps: {
+    return (_jsxs("div", { className: "content-top", children: [helperText && !isMobile ? (_jsx(Text, { size: "xsmall", type: "secondary", className: "content-top__label", children: helperText })) : null, _jsxs("div", { className: "flexbox search-container", children: [isMobile && _jsx(IconChevronLeft, { onClick: onBack, size: "large" }), isSearchAvailable && (_jsx(Input, { dataId: baseDataId ? `${baseDataId}-search` : '', onKeyDown: handleKeyDown || noop, ref: inputRef, className: "content-top__search", size: "small", placeholder: searchInputPlaceHolder, handleChange: onSearch, currentValue: searchValue, rightIconProps: {
                             Component: searchValue ? IconDismissFilled : IconSearchFilled,
                             size: searchValue ? 'xsmall' : 'small',
                             onClick: removeFilter

package/components/Select/SharedComponents/Footer.js

@@ -4,9 +4,9 @@ import { Button } from '../../Button';
 import { Checkbox } from '../../Checkbox';
 import { SELECT_TRANSLATIONS } from '../localization';
 export const Footer = (props) => {
-    const { language, buttonProps, onApply, onCancel, hasChange = true, checkboxInfo } = props;
+    const { language, buttonProps, onApply, onCancel, hasChange = true, checkboxInfo, dataId } = props;
     const [isSelected, setIsSelected] = React.useState((checkboxInfo === null || checkboxInfo === void 0 ? void 0 : checkboxInfo.isChecked) || false);
     const confirmButtonProps = Object.assign({ buttonText: SELECT_TRANSLATIONS[language].confirmButtonText }, ((buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.confirm) || {}));
     const cancelButtonProps = Object.assign({ buttonText: SELECT_TRANSLATIONS[language].cancelButtonText }, ((buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.cancel) || {}));
-    return (_jsxs("div", { className: "select__footer", children: [_jsx("div", { children: checkboxInfo ? (_jsx(Checkbox, { label: checkboxInfo.label, selectedValue: isSelected, onClick: setIsSelected })) : null }), _jsxs("div", { className: 'select__footer__right flexbox', children: [_jsx(Button, Object.assign({}, cancelButtonProps, { type: "tertiary", size: "medium", className: "mr-12", onClick: onCancel })), _jsx(Button, Object.assign({ disabled: !hasChange && isSelected === !!(checkboxInfo === null || checkboxInfo === void 0 ? void 0 : checkboxInfo.isChecked) }, confirmButtonProps, { type: "primary", size: "medium", onClick: () => onApply(isSelected) }))] })] }));
+    return (_jsxs("div", { className: "select__footer", children: [_jsx("div", { children: checkboxInfo ? (_jsx(Checkbox, { label: checkboxInfo.label, selectedValue: isSelected, onClick: setIsSelected })) : null }), _jsxs("div", { className: 'select__footer__right flexbox', children: [_jsx(Button, Object.assign({}, cancelButtonProps, { dataId: dataId ? `${dataId}-cancel` : '', type: "tertiary", size: "medium", className: "mr-12", onClick: onCancel })), _jsx(Button, Object.assign({ disabled: !hasChange && isSelected === !!(checkboxInfo === null || checkboxInfo === void 0 ? void 0 : checkboxInfo.isChecked) }, confirmButtonProps, { dataId: dataId ? `${dataId}-apply` : '', type: "primary", size: "medium", onClick: () => onApply(isSelected) }))] })] }));
 };

package/components/Select/SharedComponents/InputSelectWrapper/InputSelectWrapper.js

@@ -10,7 +10,7 @@ import { DesktopWrapper } from '../../MultiSelect/DesktopWrapper';
 import IconChevronUp from '../../../SVGIcons/IconChevronUp';
 import IconChevronDown from '../../../SVGIcons/IconChevronDown';
 export const InputSelectWrapper = (props) => {
-    const { isMobile, children, options, label, placeHolder, isRequiredField, labelAddons, disabled, className = '', dropdownWidth, align = 'left', size = 'small', dropdownRef, setDropdownRef, containerRef, setIsOpen, isOpen, selectedValues, setContainerRef, overflowText, hasError, modalApplyButtonText, applySelectedItems, hideSelectedOptions = false } = props;
+    const { isMobile, children, options, label, placeHolder, isRequiredField, labelAddons, disabled, className = '', dropdownWidth, align = 'left', size = 'small', dropdownRef, setDropdownRef, containerRef, setIsOpen, isOpen, selectedValues, setContainerRef, overflowText, hasError, modalApplyButtonText, applySelectedItems, hideSelectedOptions = false, dataId } = props;
     const inputRef = useRef(null);
     const { width } = useGetElemSizes(containerRef);
     const checkIsValueOverflowed = useCallback((value) => {
@@ -53,8 +53,8 @@ export const InputSelectWrapper = (props) => {
         input: inputRef.current
     });
     useChangePositionsOnScroll(inputRef === null || inputRef === void 0 ? void 0 : inputRef.current, dropdownRef, hasBottomSpace);
-    return (_jsxs("div", { className: classNames('select select--multi', className), ref: setContainerRef, children: [_jsx("div", { onClick: disabled ? noop : toggleDropdown, children: _jsx(Input, { readonly: true, label: label, ref: inputRef, hasError: hasError, className: "select__input", placeholder: placeHolder, required: isRequiredField, currentValue: hideSelectedOptions ? '' : selectedItemsLabels, rightIconProps: {
+    return (_jsxs("div", { "data-id": dataId, className: classNames('select select--multi', className), ref: setContainerRef, children: [_jsx("div", { onClick: disabled ? noop : toggleDropdown, children: _jsx(Input, { dataId: dataId ? `${dataId}-trigger` : '', readonly: true, label: label, ref: inputRef, hasError: hasError, className: "select__input", placeholder: placeHolder, required: isRequiredField, currentValue: hideSelectedOptions ? '' : selectedItemsLabels, rightIconProps: {
                         Component: isOpen ? IconChevronUp : IconChevronDown,
                         size: 'small'
-                    }, labelAddons: labelAddons, disabled: disabled, size: size, title: inputTitle }) }), _jsx(_Fragment, { children: isMobile ? (_jsx(MobileWrapper, { applySelectedItems: applySelectedItems, isOpen: isOpen, closeDrodown: () => setIsOpen(false), modalApplyButtonText: modalApplyButtonText, children: children })) : (_jsx(DesktopWrapper, { setDropdownRef: setDropdownRef, isOpen: isOpen, align: align, dropdownWidth: dropdownWidth, inputRef: inputRef.current, dropdownRef: dropdownRef, containerRef: containerRef, children: children })) })] }));
+                    }, labelAddons: labelAddons, disabled: disabled, size: size, title: inputTitle }) }), _jsx(_Fragment, { children: isMobile ? (_jsx(MobileWrapper, { dataId: dataId, applySelectedItems: applySelectedItems, isOpen: isOpen, closeDrodown: () => setIsOpen(false), modalApplyButtonText: modalApplyButtonText, children: children })) : (_jsx(DesktopWrapper, { dataId: dataId, setDropdownRef: setDropdownRef, isOpen: isOpen, align: align, dropdownWidth: dropdownWidth, inputRef: inputRef.current, dropdownRef: dropdownRef, containerRef: containerRef, children: children })) })] }));
 };

package/components/Select/helper.d.ts

@@ -0,0 +1 @@
+export declare const getOptionDataId: (dataId: string | undefined, value: TItemValue, index: number) => string;

package/components/Select/helper.js

@@ -1 +1,7 @@
-"use strict";
+export const getOptionDataId = (dataId, value, index) => {
+    if (!dataId) {
+        return '';
+    }
+    const key = typeof value === 'string' || typeof value === 'number' ? value : index;
+    return `${dataId}-option-${key}`;
+};

package/components/Select/types.d.ts

@@ -26,6 +26,7 @@ interface TSelectBaseProps {
     language?: string;
 }
 export interface TNestedSelectProps {
+    dataId?: string;
     options: TSelectOptions;
     isRequiredField?: boolean;
     label?: string | ReactElement;
@@ -100,7 +101,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 +129,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;
@@ -166,6 +165,7 @@ export interface ISingleSelectDesktopProps extends ISingleSelectResponsiveProps
     setActiveIndex: (index: number) => void;
 }
 export type TSelectFooterPropTypes = {
+    dataId?: string;
     checkboxInfo?: TCheckboxInfo;
     hasChange?: boolean;
     buttonProps?: {
@@ -227,7 +227,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 +255,6 @@ export type TSelectWrapperProps = {
     dropdownRef: HTMLDivElement | null;
     setDropdownRef: LegacyRef<HTMLDivElement>;
     selectedValues?: TSelectedValue[];
-    dataId?: string;
     type?: 'primary' | 'secondary' | 'tertiary';
     modalApplyButtonText?: string;
     hideSelectedOptions?: boolean;
@@ -269,6 +268,7 @@ declare type TNavItemValue = {
     children: ReactNode;
 };
 export type TProfileDropdownProps = {
+    dataId?: string;
     avatar: ReactElement;
     email: string;
     name: string;

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/Status.js

@@ -8,11 +8,11 @@ var StatusTextSize;
     StatusTextSize["small"] = "xsmall";
 })(StatusTextSize || (StatusTextSize = {}));
 export const Status = (props) => {
-    const { type = 'primary', size = 'large', text = '', children, className = '', leftIconProps, rightIconProps, withCircle = true, withBackground = false, dataId } = props;
-    return (_jsxs("div", { className: classNames(`status status--${size}`, className, {
+    const { type = 'primary', size = 'large', text = '', children, className = '', leftIconProps, rightIconProps, withCircle = true, withBackground = false, dataId = '' } = props;
+    return (_jsxs("div", { "data-id": dataId, className: classNames(`status status--${size}`, className, {
             status__withBackground: withBackground,
             [`status__withBackground--${type}`]: withBackground
         }), children: [withCircle ? (_jsx("span", { className: classNames('status__circle', 'mr-6', {
                     [`status__circle--${type}`]: true
-                }) })) : null, (leftIconProps === null || leftIconProps === void 0 ? void 0 : leftIconProps.Component) ? (_jsx(leftIconProps.Component, Object.assign({ size: "xsmall", type: type, className: "mr-6" }, leftIconProps))) : null, _jsxs("div", { className: "status__label", children: [_jsx(Text, { className: "status__label-text", dataId: `${dataId}-text`, weight: withBackground ? 'semibold' : 'regular', type: !withCircle || withBackground ? type : 'primary', size: StatusTextSize[size], children: text }), children] }), rightIconProps] }));
+                }) })) : null, (leftIconProps === null || leftIconProps === void 0 ? void 0 : leftIconProps.Component) ? (_jsx(leftIconProps.Component, Object.assign({ size: "xsmall", type: type, className: "mr-6" }, leftIconProps))) : null, _jsxs("div", { className: "status__label", children: [_jsx(Text, { className: "status__label-text", dataId: dataId ? `${dataId}-text` : '', weight: withBackground ? 'semibold' : 'regular', type: !withCircle || withBackground ? type : 'primary', size: StatusTextSize[size], children: text }), children] }), rightIconProps] }));
 };

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/Tab.js

@@ -13,8 +13,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { TabItem } from './TabItem';
 import classNames from 'classnames';
 export const Tab = (props) => {
-    const { selectedValue, tabItems, onSelect, className } = props, rest = __rest(props, ["selectedValue", "tabItems", "onSelect", "className"]);
-    return (_jsx("div", { className: "tabs-container", children: _jsx("div", { className: classNames('tabs-header-container', className), children: tabItems.map((tabInfo) => {
-                return (_jsx(TabItem, Object.assign({ label: tabInfo.label, badgeProps: tabInfo.badgeProps, onClick: () => onSelect(tabInfo.value), val: tabInfo.value, isSelected: selectedValue === tabInfo.value, dataId: (tabInfo === null || tabInfo === void 0 ? void 0 : tabInfo.dataId) || '', disabled: tabInfo.disabled }, rest), tabInfo.value));
+    const { selectedValue, tabItems, onSelect, className, dataId = '' } = props, rest = __rest(props, ["selectedValue", "tabItems", "onSelect", "className", "dataId"]);
+    return (_jsx("div", { className: "tabs-container", "data-id": dataId, children: _jsx("div", { className: classNames('tabs-header-container', className), children: tabItems.map((tabInfo, index) => {
+                return (_jsx(TabItem, Object.assign({ label: tabInfo.label, badgeProps: tabInfo.badgeProps, onClick: () => onSelect(tabInfo.value), val: tabInfo.value, isSelected: selectedValue === tabInfo.value, dataId: (tabInfo === null || tabInfo === void 0 ? void 0 : tabInfo.dataId) || (dataId ? `${dataId}-item-${index}` : ''), disabled: tabInfo.disabled }, rest), tabInfo.value));
             }) }) }));
 };

package/components/Tab/TabItem.js

@@ -4,7 +4,7 @@ import { noop } from '../../utils/helpers';
 import classNames from 'classnames';
 export const TabItem = (props) => {
     const { size = 'large', iconProps, badgeProps, label, className = '', disabled = false, isSelected, rightIconProps, val, onClick, dataId } = props;
-    return (_jsxs("div", { onClick: disabled ? noop : onClick, className: classNames('tab', { [`tab--${size}`]: size }, { 'tab--disabled': disabled }, { 'tab--selected': isSelected }, className), children: [(iconProps === null || iconProps === void 0 ? void 0 : iconProps.Component) ? (_jsx(iconProps.Component, Object.assign({ className: "tab__icon mr-8", size: `${size == 'small' ? 'xsmall' : 'small'}` }, iconProps))) : null, _jsx("span", { className: "tab__label", "data-id": dataId, children: label }), (rightIconProps === null || rightIconProps === void 0 ? void 0 : rightIconProps.Component) ? (_jsx(rightIconProps.Component, Object.assign({ onClick: (e) => {
+    return (_jsxs("div", { "data-id": dataId, onClick: disabled ? noop : onClick, className: classNames('tab', { [`tab--${size}`]: size }, { 'tab--disabled': disabled }, { 'tab--selected': isSelected }, className), children: [(iconProps === null || iconProps === void 0 ? void 0 : iconProps.Component) ? (_jsx(iconProps.Component, Object.assign({ className: "tab__icon mr-8", size: `${size == 'small' ? 'xsmall' : 'small'}` }, iconProps))) : null, _jsx("span", { className: "tab__label", "data-id": dataId ? `${dataId}-label` : '', children: label }), (rightIconProps === null || rightIconProps === void 0 ? void 0 : rightIconProps.Component) ? (_jsx(rightIconProps.Component, Object.assign({ onClick: (e) => {
                     if (rightIconProps === null || rightIconProps === void 0 ? void 0 : rightIconProps.action) {
                         e.stopPropagation();
                         rightIconProps === null || rightIconProps === void 0 ? void 0 : rightIconProps.action(val);

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();