hrm_ui_lib 3.4.2 → 4.0.0

package/components/Select/MultiSelect/MultiSelectGrouped/MultiSelectGrouped.js

@@ -10,9 +10,9 @@ import { DROPDOWN_MAX_HEIGHT } from '../../constants';
 import IconCaretUpFilled from '../../../SVGIcons/IconCaretUpFilled';
 import IconCaretDownFilled from '../../../SVGIcons/IconCaretDownFilled';
 import { filterSearchData } from '../../Select/helpers';
-import { getOptionDataId } from '../../helper';
+import { getOptionDataTestId } from '../../helper';
 export const MultiSelectGrouped = (props) => {
-    const { isMobile, options, helperText, translations, selectedValues, onItemSelect, onItemDeselect, setSelectedValues, isSearchAvailable, labelLeftIconProps, scrollableContentStyle, optionRightIconComponent, labelRightIconComponent, maxSelectCount, menuOptions, dataIdPrefix, dataId, closeDropdown } = props;
+    const { isMobile, options, helperText, translations, selectedValues, onItemSelect, onItemDeselect, setSelectedValues, isSearchAvailable, labelLeftIconProps, scrollableContentStyle, optionRightIconComponent, labelRightIconComponent, maxSelectCount, menuOptions, dataTestIdPrefix, dataTestId, closeDropdown } = props;
     const { emptyListMainMessage, emptyListSecondaryMessage } = translations;
     const [searchValue, setSearchValue] = useState('');
     const [activeGroupId, setActiveGroupId] = useState(0);
@@ -83,7 +83,7 @@ export const MultiSelectGrouped = (props) => {
         };
     }, [labelLeftIconProps, optionRightIconComponent, labelRightIconComponent]);
     const hasTopContent = isSearchAvailable || helperText;
-    return (_jsxs(_Fragment, { children: [hasTopContent ? (_jsx(ContentTop, { closeDropdown: closeDropdown, dataId: dataId, dataIdPrefix: dataIdPrefix, menuOptions: menuOptions, isSearchAvailable: isSearchAvailable || isMobile, hasLimitation: !!maxSelectCount, selectAll: selectAll, clearAll: clearAll, isAnySelected: selectedValues.length !== 0, helperText: helperText, isSelectAllDisabled: isAllSelected || filteredData.length === 0, setSearchValue: setSearchValue, searchValue: searchValue, translations: translations })) : null, _jsx("div", { ref: setContentContainerRef, className: `select__options__scroll scrollbar scrollbar--vertical ${scrollHeight > DROPDOWN_MAX_HEIGHT ? 'mr-6' : ''}`, style: scrollableContentStyle, children: _jsxs("div", { children: [isSearchAvailable && (_jsx("div", { className: "selected-items", children: selectedOptions.map((selectedItem) => {
+    return (_jsxs(_Fragment, { children: [hasTopContent ? (_jsx(ContentTop, { closeDropdown: closeDropdown, dataTestId: dataTestId, dataTestIdPrefix: dataTestIdPrefix, menuOptions: menuOptions, isSearchAvailable: isSearchAvailable || isMobile, hasLimitation: !!maxSelectCount, selectAll: selectAll, clearAll: clearAll, isAnySelected: selectedValues.length !== 0, helperText: helperText, isSelectAllDisabled: isAllSelected || filteredData.length === 0, setSearchValue: setSearchValue, searchValue: searchValue, translations: translations })) : null, _jsx("div", { ref: setContentContainerRef, className: `select__options__scroll scrollbar scrollbar--vertical ${scrollHeight > DROPDOWN_MAX_HEIGHT ? 'mr-6' : ''}`, style: scrollableContentStyle, children: _jsxs("div", { children: [isSearchAvailable && (_jsx("div", { className: "selected-items", children: selectedOptions.map((selectedItem) => {
                                 return (_jsx(OptionItem, Object.assign({ isSelected: true, data: selectedItem, onClick: onDeselect, disabled: selectedItem.disabled }, optionProps), selectedItem.value));
                             }) })), hasTopContent ? _jsx(Divider, { type: "primary", isHorizontal: true }) : null, filteredData.map(({ title, data }, index) => {
                             var _a;
@@ -91,7 +91,7 @@ export const MultiSelectGrouped = (props) => {
                             return (_jsxs("div", { className: "select__group group-item", children: [_jsxs("div", { onClick: () => onGroupClick(index), className: "group-item__top", children: [_jsx(Text, { size: "xxsmall", type: "tertiary", className: "group-item__title pr-4", children: title }), isActive ? (_jsx(IconCaretUpFilled, { size: "xxsmall", className: "group-item__icon" })) : (_jsx(IconCaretDownFilled, { size: "xxsmall", className: "group-item__icon" }))] }), isActive &&
                                         data.map((item, itemIndex) => {
                                             const isSelected = selectedValues.findIndex((s) => s.value === item.value) !== -1;
-                                            return (_jsx(OptionItem, Object.assign({ data: item, dataId: getOptionDataId(dataId, item.value, itemIndex) || item.dataId, isSelected: isSelected, disabled: item.disabled || (!isSelected && selectedValues.length === maxSelectCount), onClick: isSelected ? onDeselect : onItemSelect }, optionProps), item.value));
+                                            return (_jsx(OptionItem, Object.assign({ data: item, dataTestId: getOptionDataTestId(dataTestId, item.value, itemIndex) || item.dataTestId, isSelected: isSelected, disabled: item.disabled || (!isSelected && selectedValues.length === maxSelectCount), onClick: isSelected ? onDeselect : onItemSelect }, optionProps), item.value));
                                         })] }, `${(_a = data[0]) === null || _a === void 0 ? void 0 : _a.value}_${index}`));
                         })] }) }), filteredData.length === 0 ? (_jsx(Empty, { size: "small", mainMessage: emptyListMainMessage, paragraphMessage: emptyListSecondaryMessage })) : null] }));
 };

package/components/Select/MultiSelect/MultiSelectWithTabs/MultiSelectWithTabs.js

@@ -8,9 +8,9 @@ import { OptionItem } from '../../../../helperComponents/OptionItem';
 import { ContentTop } from '../../SharedComponents';
 import { DROPDOWN_MAX_HEIGHT } from '../../constants';
 import { filterSearchData } from '../../Select/helpers';
-import { getOptionDataId } from '../../helper';
+import { getOptionDataTestId } from '../../helper';
 export const MultiSelectWithTabs = (props) => {
-    const { options, scrollableContentStyle, selectedValues, onItemSelect, onItemDeselect, setSelectedValues, labelLeftIconProps, optionRightIconComponent, labelRightIconComponent, helperText, translations, isSearchAvailable, maxSelectCount, menuOptions, dataIdPrefix, dataId, closeDropdown } = props;
+    const { options, scrollableContentStyle, selectedValues, onItemSelect, onItemDeselect, setSelectedValues, labelLeftIconProps, optionRightIconComponent, labelRightIconComponent, helperText, translations, isSearchAvailable, maxSelectCount, menuOptions, dataTestIdPrefix, dataTestId, closeDropdown } = props;
     const { emptyListMainMessage, emptyListSecondaryMessage } = translations;
     const [contentContainerRef, setContentContainerRef] = useState(null);
     const [activeTab, setActiveTab] = useState(0);
@@ -63,10 +63,10 @@ export const MultiSelectWithTabs = (props) => {
             labelRightIconComponent
         };
     }, [labelLeftIconProps, optionRightIconComponent, labelRightIconComponent]);
-    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "tab_container", style: { padding: '0 20px', width: '100%' }, children: _jsx(Tab, { selectedValue: activeTab, tabItems: tabs, onSelect: onTabSelect, size: "small" }) }), _jsx(ContentTop, { closeDropdown: closeDropdown, dataId: dataId, dataIdPrefix: dataIdPrefix, menuOptions: menuOptions, isSearchAvailable: isSearchAvailable, clearAll: clearAll, selectAll: selectAll, helperText: helperText, searchValue: searchValue, translations: translations, setSearchValue: setSearchValue, hasLimitation: !!maxSelectCount, isAnySelected: selectedValues.length === 0, isSelectAllDisabled: isAllSelected || filteredData.length === 0 }), _jsxs("div", { ref: setContentContainerRef, className: `select__options__scroll scrollbar scrollbar--vertical ${scrollHeight > DROPDOWN_MAX_HEIGHT ? 'mr-6' : ''}`, style: scrollableContentStyle, children: [isSearchAvailable && (_jsx("div", { className: "selected_container", children: selectedOptions.map((selectedItem) => {
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "tab_container", style: { padding: '0 20px', width: '100%' }, children: _jsx(Tab, { selectedValue: activeTab, tabItems: tabs, onSelect: onTabSelect, size: "small" }) }), _jsx(ContentTop, { closeDropdown: closeDropdown, dataTestId: dataTestId, dataTestIdPrefix: dataTestIdPrefix, menuOptions: menuOptions, isSearchAvailable: isSearchAvailable, clearAll: clearAll, selectAll: selectAll, helperText: helperText, searchValue: searchValue, translations: translations, setSearchValue: setSearchValue, hasLimitation: !!maxSelectCount, isAnySelected: selectedValues.length === 0, isSelectAllDisabled: isAllSelected || filteredData.length === 0 }), _jsxs("div", { ref: setContentContainerRef, className: `select__options__scroll scrollbar scrollbar--vertical ${scrollHeight > DROPDOWN_MAX_HEIGHT ? 'mr-6' : ''}`, style: scrollableContentStyle, children: [isSearchAvailable && (_jsx("div", { className: "selected_container", children: selectedOptions.map((selectedItem) => {
                             return (_jsx(OptionItem, Object.assign({ data: selectedItem, onClick: onDeselect, disabled: selectedItem.disabled, isSelected: true }, optionProps), selectedItem.value));
                         }) })), _jsx(Divider, { type: "primary", isHorizontal: true }), filteredData.map((item, index) => {
                         const isSelected = selectedValues.findIndex((s) => s.value === item.value) !== -1;
-                        return (_jsx(OptionItem, Object.assign({ data: item, dataId: getOptionDataId(dataId, item.value, index) || item.dataId, onClick: isSelected ? onDeselect : onItemSelect, disabled: item.disabled || (!isSelected && selectedValues.length === maxSelectCount), isSelected: isSelected }, optionProps), item.value));
+                        return (_jsx(OptionItem, Object.assign({ data: item, dataTestId: getOptionDataTestId(dataTestId, item.value, index) || item.dataTestId, onClick: isSelected ? onDeselect : onItemSelect, disabled: item.disabled || (!isSelected && selectedValues.length === maxSelectCount), isSelected: isSelected }, optionProps), item.value));
                     }), filteredData.length === 0 ? (_jsx(Empty, { size: "small", mainMessage: emptyListMainMessage, paragraphMessage: emptyListSecondaryMessage })) : null] })] }));
 };

package/components/Select/MultiSelect/OptionsWrapper.d.ts

@@ -1,7 +1,7 @@
 import { ReactElement } from 'react';
 import { TSelectTranslations } from '../types';
 type TProps = {
-    dataId?: string;
+    dataTestId?: string;
     isLoading?: boolean;
     withTabs?: boolean;
     isGrouped?: boolean;

package/components/Select/NestedSelect/NestedSelect.js

@@ -5,10 +5,10 @@ import { OptionItem } from '../../../helperComponents/OptionItem';
 import { useGetElemPositions, useGetElemSizes, useOnOutsideClick } from '../../../hooks';
 import IconChevronUp from '../../SVGIcons/IconChevronUp';
 import IconChevronDown from '../../SVGIcons/IconChevronDown';
-import { getOptionDataId } from '../helper';
+import { getOptionDataTestId } from '../helper';
 const LEVEL_LEFT_MARGIN = 10;
 export const NestedSelect = (props) => {
-    const { label, options, selected, placeHolder, isRequiredField, setSelectedValue, initialSelectedFolderIds, optionRightIconComponent, labelRightIconComponent, labelAddons, dataId } = props;
+    const { label, options, selected, placeHolder, isRequiredField, setSelectedValue, initialSelectedFolderIds, optionRightIconComponent, labelRightIconComponent, labelAddons, dataTestId } = props;
     const [isDropdownOpen, setIsOpen] = useState(false);
     const [containerRef, setContainerRef] = useState(null);
     const [selectedValues, setSelectedValues] = useState(initialSelectedFolderIds || []);
@@ -46,14 +46,14 @@ export const NestedSelect = (props) => {
         const { value, children, disabled } = option;
         const isOpen = selectedValues.indexOf(option.value) !== -1;
         const isSelected = option.value === (selected === null || selected === void 0 ? void 0 : selected.value);
-        acc.push(_jsx("div", { style: { paddingLeft: LEVEL_LEFT_MARGIN * level }, children: _jsx(OptionItem, { data: option, dataId: getOptionDataId(dataId, value, acc.length) || option.dataId, isSelected: isSelected, onClick: () => onSelect({ value, label: option.label }, !!children), disabled: disabled, OptionRightIconComponent: optionRightIconComponent, LabelRightIconComponent: labelRightIconComponent, labelLeftIconProps: children ? { Component: IconChevronDown, size: 'xsmall' } : undefined }, value) }));
+        acc.push(_jsx("div", { style: { paddingLeft: LEVEL_LEFT_MARGIN * level }, children: _jsx(OptionItem, { data: option, dataTestId: getOptionDataTestId(dataTestId, value, acc.length) || option.dataTestId, isSelected: isSelected, onClick: () => onSelect({ value, label: option.label }, !!children), disabled: disabled, OptionRightIconComponent: optionRightIconComponent, LabelRightIconComponent: labelRightIconComponent, labelLeftIconProps: children ? { Component: IconChevronDown, size: 'xsmall' } : undefined }, value) }));
         if (isOpen && children) {
             acc.push(...generateFolders(children, level + 1));
         }
         return acc;
     }, []);
-    return (_jsxs("div", { className: "select select--multi", "data-id": dataId, ref: setContainerRef, children: [_jsx("div", { onClick: toggleDropdown, children: _jsx(Input, { dataId: dataId ? `${dataId}-trigger` : '', ref: inputRef, className: "select__input", label: label, required: isRequiredField, rightIconProps: {
+    return (_jsxs("div", { className: "select select--multi", "data-test-id": dataTestId, ref: setContainerRef, children: [_jsx("div", { onClick: toggleDropdown, children: _jsx(Input, { dataTestId: dataTestId ? `${dataTestId}-trigger` : '', ref: inputRef, className: "select__input", label: label, required: isRequiredField, rightIconProps: {
                         Component: isDropdownOpen ? IconChevronUp : IconChevronDown,
                         size: 'small'
-                    }, placeholder: placeHolder, currentValue: (selected === null || selected === void 0 ? void 0 : selected.label.toString()) || '', readonly: true, labelAddons: labelAddons }) }), isDropdownOpen && (_jsx("div", { className: "select__options", "data-id": dataId ? `${dataId}-content` : '', style: { left, width, top: bottom }, children: _jsx("div", { className: "select__options__scroll scrollbar scrollbar--vertical", children: generateFolders(options, 0) }) }))] }));
+                    }, placeholder: placeHolder, currentValue: (selected === null || selected === void 0 ? void 0 : selected.label.toString()) || '', readonly: true, labelAddons: labelAddons }) }), isDropdownOpen && (_jsx("div", { className: "select__options", "data-test-id": dataTestId ? `${dataTestId}-content` : '', style: { left, width, top: bottom }, children: _jsx("div", { className: "select__options__scroll scrollbar scrollbar--vertical", children: generateFolders(options, 0) }) }))] }));
 };

package/components/Select/ProfileDropdown/index.js

@@ -5,9 +5,9 @@ import { useOnOutsideClick } from '../../../hooks';
 import { Link } from '../../Link';
 export const ProfileDropdown = (props) => {
     const menuRef = useRef(null);
-    const { avatar, name, email, bodyItems, footerItems, className, dataId } = props;
+    const { avatar, name, email, bodyItems, footerItems, className, dataTestId } = props;
     const [isOpen, setIsOpen] = React.useState(false);
     const closeDropdown = () => setIsOpen(false);
     useOnOutsideClick(menuRef.current, closeDropdown, isOpen, useId());
-    return (_jsxs("div", { ref: menuRef, "data-id": dataId, className: `relative ${className}`, children: [_jsx("div", { "data-id": dataId ? `${dataId}-trigger` : '', onClick: () => setIsOpen(!isOpen), children: avatar }), isOpen && (_jsxs("div", { "data-id": dataId ? `${dataId}-content` : '', className: "profile-dropdown", children: [_jsxs("div", { className: "profile-dropdown__top", children: [avatar, _jsxs("div", { className: 'pl-12', children: [_jsx(Text, { size: 'medium', weight: 'bold', lineHeight: 'large', children: name }), _jsx(Text, { type: 'tertiary', children: email })] })] }), _jsxs("div", { className: "profile-dropdown__menu", children: [_jsx("ul", { className: 'profile-dropdown__nav', children: bodyItems === null || bodyItems === void 0 ? void 0 : bodyItems.map((item, index) => (_jsx("li", { "data-id": dataId ? `${dataId}-item-${index}` : '', children: item.text ? (_jsx(Link, { url: item.url, onclick: item.onclick, className: 'profile-dropdown__nav__link', children: _jsxs(_Fragment, { children: [_jsx("span", { className: 'flexbox align-items--center', children: _jsxs(_Fragment, { children: [item.icon, item.text] }) }), item.rightInfoProps] }) })) : (_jsx("div", { onClick: closeDropdown, children: item.children })) }, index))) }), (footerItems === null || footerItems === void 0 ? void 0 : footerItems.length) ? (_jsx("div", { className: 'profile-dropdown__bottom', children: _jsx("ul", { className: 'profile-dropdown__nav', children: footerItems === null || footerItems === void 0 ? void 0 : footerItems.map((item, index) => (_jsx("li", { "data-id": dataId ? `${dataId}-footer-item-${index}` : '', children: item.text ? (_jsx(Link, { url: item.url, onclick: item.onclick, className: 'profile-dropdown__nav__link', children: _jsxs(_Fragment, { children: [_jsx("span", { className: 'flexbox align-items--center', children: _jsxs(_Fragment, { children: [item.icon, item.text] }) }), item.rightInfoProps] }) })) : (item.children) }, index))) }) })) : null] })] }))] }));
+    return (_jsxs("div", { ref: menuRef, "data-test-id": dataTestId, className: `relative ${className}`, children: [_jsx("div", { "data-test-id": dataTestId ? `${dataTestId}-trigger` : '', onClick: () => setIsOpen(!isOpen), children: avatar }), isOpen && (_jsxs("div", { "data-test-id": dataTestId ? `${dataTestId}-content` : '', className: "profile-dropdown", children: [_jsxs("div", { className: "profile-dropdown__top", children: [avatar, _jsxs("div", { className: 'pl-12', children: [_jsx(Text, { size: 'medium', weight: 'bold', lineHeight: 'large', children: name }), _jsx(Text, { type: 'tertiary', children: email })] })] }), _jsxs("div", { className: "profile-dropdown__menu", children: [_jsx("ul", { className: 'profile-dropdown__nav', children: bodyItems === null || bodyItems === void 0 ? void 0 : bodyItems.map((item, index) => (_jsx("li", { "data-test-id": dataTestId ? `${dataTestId}-item-${index}` : '', children: item.text ? (_jsx(Link, { url: item.url, onclick: item.onclick, className: 'profile-dropdown__nav__link', children: _jsxs(_Fragment, { children: [_jsx("span", { className: 'flexbox align-items--center', children: _jsxs(_Fragment, { children: [item.icon, item.text] }) }), item.rightInfoProps] }) })) : (_jsx("div", { onClick: closeDropdown, children: item.children })) }, index))) }), (footerItems === null || footerItems === void 0 ? void 0 : footerItems.length) ? (_jsx("div", { className: 'profile-dropdown__bottom', children: _jsx("ul", { className: 'profile-dropdown__nav', children: footerItems === null || footerItems === void 0 ? void 0 : footerItems.map((item, index) => (_jsx("li", { "data-test-id": dataTestId ? `${dataTestId}-footer-item-${index}` : '', children: item.text ? (_jsx(Link, { url: item.url, onclick: item.onclick, className: 'profile-dropdown__nav__link', children: _jsxs(_Fragment, { children: [_jsx("span", { className: 'flexbox align-items--center', children: _jsxs(_Fragment, { children: [item.icon, item.text] }) }), item.rightInfoProps] }) })) : (item.children) }, index))) }) })) : null] })] }))] }));
 };

package/components/Select/Select/Select.js

@@ -25,13 +25,13 @@ import { Button } from '../../Button';
 import { filterSearchData } from './helpers';
 export const Select = forwardRef((props, _ref) => {
     var _a, _b;
-    const { labelAddons, dataId, className, size = 'small', label, hasError, isValid, disabled, outerHelperText, isRequiredField, placeHolder, selectRightIconProps = {
+    const { labelAddons, dataTestId, className, size = 'small', label, hasError, isValid, disabled, outerHelperText, isRequiredField, placeHolder, selectRightIconProps = {
         Component: IconChevronDown,
         size: 'small'
     }, selectRightIconOpenedProps = {
         Component: IconChevronUp,
         size: 'small'
-    }, options, withSearch = false, setSelectedItem, setFieldValue, name, selectedItem, value, isMobileFullScreen = true, language = 'en', translations, isButtonSelect } = props, rest = __rest(props, ["labelAddons", "dataId", "className", "size", "label", "hasError", "isValid", "disabled", "outerHelperText", "isRequiredField", "placeHolder", "selectRightIconProps", "selectRightIconOpenedProps", "options", "withSearch", "setSelectedItem", "setFieldValue", "name", "selectedItem", "value", "isMobileFullScreen", "language", "translations", "isButtonSelect"]);
+    }, options, withSearch = false, setSelectedItem, setFieldValue, name, selectedItem, value, isMobileFullScreen = true, language = 'en', translations, isButtonSelect } = props, rest = __rest(props, ["labelAddons", "dataTestId", "className", "size", "label", "hasError", "isValid", "disabled", "outerHelperText", "isRequiredField", "placeHolder", "selectRightIconProps", "selectRightIconOpenedProps", "options", "withSearch", "setSelectedItem", "setFieldValue", "name", "selectedItem", "value", "isMobileFullScreen", "language", "translations", "isButtonSelect"]);
     const isMobile = useIsMobile();
     const containerRef = useRef(null);
     const inputRef = useRef(null);
@@ -117,8 +117,8 @@ export const Select = forwardRef((props, _ref) => {
     useEffect(() => {
         setCurrentSelectedLabel();
     }, [setCurrentSelectedLabel]);
-    return (_jsxs("div", { "data-id": dataId, className: classNames(`select select--${size}`, className, {
+    return (_jsxs("div", { "data-test-id": dataTestId, className: classNames(`select select--${size}`, className, {
             'select--opened': isOpen
-        }), 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 })))] }));
+        }), ref: containerRef, children: [!isButtonSelect && (_jsx(Input, { onClick: disabled ? noop : onOpenOptions, size: size, dataTestId: dataTestId ? `${dataTestId}-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", dataTestId: dataTestId ? `${dataTestId}-trigger` : '', iconProps: selectRightIconProps, buttonText: placeHolder || '', onClick: disabled ? noop : openDropdown, className: "select_button" })), isMobile && isMobileFullScreen ? (_jsx(SelectMobile, Object.assign({}, rest, { dataTestId: dataTestId, 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, { dataTestId: dataTestId, 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,9 +10,9 @@ 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';
+import { getOptionDataTestId } 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 { currentSelection, isLoading, dataTestId = '', 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);
     const [dropdownRef, setDropdownRef] = useState(null);
     const setFocusForKeyboardNavigation = () => {
@@ -61,7 +61,7 @@ export const SelectDesktop = (props) => {
         input: inputRef
     });
     useChangePositionsOnScroll(inputRef, dropdownRef, hasBottomSpace);
-    return (_jsx(_Fragment, { children: isOpen && (_jsx("div", { "data-id": dataId ? `${dataId}-content` : '', className: "select__options", style: Object.assign({ left,
+    return (_jsx(_Fragment, { children: isOpen && (_jsx("div", { "data-test-id": dataTestId ? `${dataTestId}-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", { 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
@@ -75,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: getOptionDataId(dataId, item.value, index) || 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, dataTestId: getOptionDataTestId(dataTestId, item.value, index) || item.dataTestId, 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,7 +5,7 @@ type TProps = {
     onBack: () => void;
     withSearch: boolean;
     isOpen: boolean;
-    dataId?: string;
+    dataTestId?: string;
 };
-export declare const MobileTopContent: ({ onBack, setSearchValue, searchValue, withSearch, isOpen, dataId }: TProps) => ReactElement;
+export declare const MobileTopContent: ({ onBack, setSearchValue, searchValue, withSearch, isOpen, dataTestId }: 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, dataId }) => {
+export const MobileTopContent = ({ onBack, setSearchValue, searchValue, withSearch, isOpen, dataTestId }) => {
     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, { dataId: dataId ? `${dataId}-search` : '', 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, { dataTestId: dataTestId ? `${dataTestId}-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,9 +7,9 @@ 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';
+import { getOptionDataTestId } 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 { translations, currentSelection, isOpen, closeDropdown, isLoading, dataTestId, innerHelperText, filteredData, isRequiredField, onItemSelect, onItemDeselect, tooltipAddons, labelLeftIconProps, optionRightIconComponent, labelRightIconComponent, withSearch, searchValue, setSearchValue } = props;
     const clickHandler = (isSelected) => ({ value }) => {
         setSearchValue('');
         if (!isSelected) {
@@ -26,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, { 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: {
+    return (_jsxs(Modal, { isOpen: isOpen, onClose: closeDropdown, isMobileFullScreen: true, children: [_jsx(MobileTopContent, { dataTestId: dataTestId, 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-test-id": dataTestId ? `${dataTestId}-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',
@@ -34,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: getOptionDataId(dataId, item.value, index) || 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, dataTestId: getOptionDataTestId(dataTestId, item.value, index) || item.dataTestId, 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/Button/Button.d.ts

@@ -4,7 +4,7 @@ type TProps = {
     size?: 'small' | 'medium' | 'large';
     className?: string;
     disabled?: boolean;
-    dataId?: string;
+    dataTestId?: string;
     onClick: () => void;
     refHandler?: LegacyRef<HTMLButtonElement> | undefined;
     selectedItemsLabels: string;

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

@@ -4,6 +4,6 @@ import { Text } from '../../../../Text';
 import IconChevronUp from '../../../../SVGIcons/IconChevronUp';
 import IconChevronDown from '../../../../SVGIcons/IconChevronDown';
 export const Button = (props) => {
-    const { type, buttonText, size = 'large', className = '', isOpen, disabled, dataId = '', onClick, refHandler = null, selectedItemsLabels } = props;
-    return (_jsx("button", { type: "button", ref: refHandler, "data-id": dataId, disabled: disabled, className: classnames('btn', `btn--${type}`, `btn--${size}`, `btn--${size}`, className), onClick: onClick, children: _jsxs(_Fragment, { children: [_jsx(Text, { className: "btn__text mr-4", type: selectedItemsLabels ? 'tertiary' : 'secondary', children: `${buttonText}${selectedItemsLabels ? '  |' : ''}` }), selectedItemsLabels ? (_jsx(Text, { className: "btn__text ml-4 mr-4", children: selectedItemsLabels })) : null, isOpen ? _jsx(IconChevronUp, { size: "small" }) : _jsx(IconChevronDown, { size: "small" })] }) }));
+    const { type, buttonText, size = 'large', className = '', isOpen, disabled, dataTestId = '', onClick, refHandler = null, selectedItemsLabels } = props;
+    return (_jsx("button", { type: "button", ref: refHandler, "data-test-id": dataTestId, disabled: disabled, className: classnames('btn', `btn--${type}`, `btn--${size}`, `btn--${size}`, className), onClick: onClick, children: _jsxs(_Fragment, { children: [_jsx(Text, { className: "btn__text mr-4", type: selectedItemsLabels ? 'tertiary' : 'secondary', children: `${buttonText}${selectedItemsLabels ? '  |' : ''}` }), selectedItemsLabels ? (_jsx(Text, { className: "btn__text ml-4 mr-4", children: selectedItemsLabels })) : null, isOpen ? _jsx(IconChevronUp, { size: "small" }) : _jsx(IconChevronDown, { size: "small" })] }) }));
 };

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

@@ -8,7 +8,7 @@ import { useChangePositionsOnScroll } from '../../../../hooks/useChangePositions
 import { MobileWrapper } from '../../MultiSelect/MobileWrapper';
 import { DesktopWrapper } from '../../MultiSelect/DesktopWrapper';
 export const ButtonSelectWrapper = (props) => {
-    const { offsets, children, size, className, dropdownWidth, align = 'left', isOpen, setIsOpen, containerRef, setContainerRef, dropdownRef, setDropdownRef, selectedValues, placeHolder, dataId, disabled, modalApplyButtonText, type = 'secondary', applySelectedItems, isMobile } = props;
+    const { offsets, children, size, className, dropdownWidth, align = 'left', isOpen, setIsOpen, containerRef, setContainerRef, dropdownRef, setDropdownRef, selectedValues, placeHolder, dataTestId, disabled, modalApplyButtonText, type = 'secondary', applySelectedItems, isMobile } = props;
     const buttonRef = useRef(null);
     const openDropdown = () => setIsOpen(true);
     const { hasBottomSpace } = useGetHasBottomSpace({
@@ -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", { "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 })) })] }));
+    return (_jsxs("div", { "data-test-id": dataTestId, className: classNames(`select select--${size}`, className), ref: setContainerRef, children: [_jsx(Button, { size: size, type: type, dataTestId: dataTestId ? `${dataTestId}-trigger` : '', isOpen: isOpen, buttonText: placeHolder || '', selectedItemsLabels: selectedItemsLabels, onClick: disabled ? noop : openDropdown, refHandler: buttonRef, className: "select_button" }), _jsx(_Fragment, { children: isMobile ? (_jsx(MobileWrapper, { dataTestId: dataTestId, applySelectedItems: applySelectedItems, isOpen: isOpen, closeDrodown: () => setIsOpen(false), modalApplyButtonText: modalApplyButtonText, children: children })) : (_jsx(DesktopWrapper, { dataTestId: dataTestId, 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

@@ -13,8 +13,8 @@ type TProps = {
     isSearchAvailable?: boolean;
     hasLimitation?: boolean;
     menuOptions?: TMenuItem[];
-    dataIdPrefix?: string;
-    dataId?: string;
+    dataTestIdPrefix?: string;
+    dataTestId?: string;
     closeDropdown?: () => void;
     handleKeyDown?: (e: React.KeyboardEvent) => void;
 };

package/components/Select/SharedComponents/ContentTop.js

@@ -10,9 +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, dataId, closeDropdown, handleKeyDown } = props;
+    const { clearAll, selectAll, helperText, searchValue, translations, isAnySelected, setSearchValue, isSearchAvailable = false, hasLimitation = false, isSelectAllDisabled = false, menuOptions = [], dataTestIdPrefix, dataTestId, closeDropdown, handleKeyDown } = props;
     const inputRef = useRef(null);
-    const baseDataId = dataId || dataIdPrefix;
+    const baseDataTestId = dataTestId || dataTestIdPrefix;
     const { searchInputPlaceHolder, innerLabel, clearAllLabel, selectAllLabel } = translations || {};
     const selectActions = useMemo(() => {
         let options = menuOptions;
@@ -24,7 +24,7 @@ export const ContentTop = React.memo((props) => {
                     handler: selectAll,
                     disabled: isSelectAllDisabled,
                     iconProps: { Component: IconSelectAllOff },
-                    dataId: baseDataId ? `${baseDataId}-select-all` : ''
+                    dataTestId: baseDataTestId ? `${baseDataTestId}-select-all` : ''
                 }
             ];
         }
@@ -37,7 +37,7 @@ export const ContentTop = React.memo((props) => {
                     handler: clearAll,
                     disabled: !isAnySelected,
                     iconProps: { Component: IconDismissFilled },
-                    dataId: baseDataId ? `${baseDataId}-clear` : ''
+                    dataTestId: baseDataTestId ? `${baseDataTestId}-clear` : ''
                 }
             ];
         }
@@ -50,7 +50,7 @@ export const ContentTop = React.memo((props) => {
         clearAllLabel,
         isSelectAllDisabled,
         isAnySelected,
-        baseDataId
+        baseDataTestId
     ]);
     const onSearch = (e) => {
         setSearchValue && setSearchValue(e.target.value);
@@ -65,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, { dataId: baseDataId ? `${baseDataId}-search` : '', 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, { dataTestId: baseDataTestId ? `${baseDataTestId}-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, dataId } = props;
+    const { language, buttonProps, onApply, onCancel, hasChange = true, checkboxInfo, dataTestId } = 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, { 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) }))] })] }));
+    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, { dataTestId: dataTestId ? `${dataTestId}-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, { dataTestId: dataTestId ? `${dataTestId}-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, dataId } = 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, dataTestId } = 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", { "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: {
+    return (_jsxs("div", { "data-test-id": dataTestId, className: classNames('select select--multi', className), ref: setContainerRef, children: [_jsx("div", { onClick: disabled ? noop : toggleDropdown, children: _jsx(Input, { dataTestId: dataTestId ? `${dataTestId}-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, { 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 })) })] }));
+                    }, labelAddons: labelAddons, disabled: disabled, size: size, title: inputTitle }) }), _jsx(_Fragment, { children: isMobile ? (_jsx(MobileWrapper, { dataTestId: dataTestId, applySelectedItems: applySelectedItems, isOpen: isOpen, closeDrodown: () => setIsOpen(false), modalApplyButtonText: modalApplyButtonText, children: children })) : (_jsx(DesktopWrapper, { dataTestId: dataTestId, setDropdownRef: setDropdownRef, isOpen: isOpen, align: align, dropdownWidth: dropdownWidth, inputRef: inputRef.current, dropdownRef: dropdownRef, containerRef: containerRef, children: children })) })] }));
 };

package/components/Select/helper.d.ts

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

package/components/Select/helper.js

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

package/components/Select/types.d.ts

@@ -1,9 +1,10 @@
+import { IBaseProps, IFormCompProps } from '../../type';
 import { LegacyRef, ReactElement, ReactNode } from 'react';
 import { TButtonPropTypes } from '../Button/types';
 import { TMenuItem } from '../Menu/types';
 import { TTooltipProps } from '../Tooltip/types';
 interface TSelectBaseProps {
-    dataIdPrefix?: string;
+    dataTestIdPrefix?: string;
     error?: string;
     isLoading?: boolean;
     disabled?: boolean;
@@ -26,7 +27,7 @@ interface TSelectBaseProps {
     language?: string;
 }
 export interface TNestedSelectProps {
-    dataId?: string;
+    dataTestId?: string;
     options: TSelectOptions;
     isRequiredField?: boolean;
     label?: string | ReactElement;
@@ -165,7 +166,7 @@ export interface ISingleSelectDesktopProps extends ISingleSelectResponsiveProps
     setActiveIndex: (index: number) => void;
 }
 export type TSelectFooterPropTypes = {
-    dataId?: string;
+    dataTestId?: string;
     checkboxInfo?: TCheckboxInfo;
     hasChange?: boolean;
     buttonProps?: {
@@ -268,7 +269,7 @@ declare type TNavItemValue = {
     children: ReactNode;
 };
 export type TProfileDropdownProps = {
-    dataId?: string;
+    dataTestId?: string;
     avatar: ReactElement;
     email: string;
     name: string;

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

@@ -11,7 +11,7 @@ type TProps = {
     onClose: (e?: TClickEventType) => void;
     onSubmit?: (isSelected: boolean) => void;
     checkboxInfo?: TCheckboxInfo;
-    dataId?: string;
+    dataTestId?: string;
 };
-export declare const Footer: ({ isLoading, footerButtons, onClose, onSubmit, checkboxInfo, dataId }: TProps) => ReactElement | null;
+export declare const Footer: ({ isLoading, footerButtons, onClose, onSubmit, checkboxInfo, dataTestId }: 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, dataId = '' }) => {
+export const Footer = ({ isLoading, footerButtons, onClose, onSubmit, checkboxInfo, dataTestId = '' }) => {
     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", "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` : '' }))] })] }));
+    return (_jsxs("div", { className: "side-sheet__footer", "data-test-id": dataTestId ? `${dataTestId}-footer` : '', children: [checkboxInfo ? (_jsx("div", { className: "side-sheet__footer_checkbox", children: _jsx(Checkbox, { label: checkboxInfo.label, selectedValue: isSelected, onClick: setIsSelected, dataTestId: dataTestId ? `${dataTestId}-checkbox` : '' }) })) : null, _jsxs("div", { className: "side-sheet__footer_buttons", children: [extraButton ? (_jsx(Button, Object.assign({ size: "large", type: "secondary" }, footerButtons.extraButton, { className: "mr-12", dataTestId: dataTestId ? `${dataTestId}-extra` : '' }))) : null, _jsx(Button, Object.assign({ type: "secondary", size: "large", className: "mr-12", onClick: onClose }, cancel, { dataTestId: dataTestId ? `${dataTestId}-cancel` : '' })), _jsx(Button, Object.assign({ type: "primary", size: "large", onClick: handleSubmit, disabled: isLoading }, confirm, { dataTestId: dataTestId ? `${dataTestId}-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, dataId = '' } = props;
+    const { size = 'small', isLoading, isOpen, onClose, onSubmit, title, position = 'right', shouldRemoveCallback, className = '', headerButtons, footerButtons, scrollToTopOptions, children, closeOnOutsideClick = true, checkboxInfo, dataTestId = '' } = 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", "data-id": dataId, initial: {
+    return (_jsx(AnimatePresenceWrapper, { children: isOpen ? (_jsx(motion.div, { className: "side-sheet", "data-test-id": dataTestId, 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), "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 }));
+                    } }), transition: { duration: 0.5 }, className: classnames('side-sheet__container', `side-sheet__${position}`, `side-sheet__container--${size}`, className), "data-test-id": dataTestId ? `${dataTestId}-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", dataTestId: dataTestId ? `${dataTestId}-back` : '' }))) : null, _jsx(Text, { className: "side-sheet__title", weight: "bolder", lineHeight: "large", size: "medium", dataTestId: dataTestId ? `${dataTestId}-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", dataTestId: dataTestId ? `${dataTestId}-pin` : '' }))) : null, (headerButtons === null || headerButtons === void 0 ? void 0 : headerButtons.close) ? (_jsx(Button, Object.assign({ size: "small", type: "tertiary" }, headerButtons.close, { onClick: onClose, dataTestId: dataTestId ? `${dataTestId}-close` : '' }))) : (_jsx(Button, { size: "small", type: "tertiary", iconProps: { Component: IconDismissFilled }, onClick: onClose, dataTestId: dataTestId ? `${dataTestId}-close` : '' }))] }), isShownScrollIcon && (_jsx(Button, { size: "large", type: "secondary", iconProps: { Component: IconCaretUp }, className: `side-sheet__header__scroll-top side-sheet__header__scroll-top__${size}`, dataTestId: dataTestId ? `${dataTestId}-scroll-top` : '', onClick: handleScrollToTop }))] }), _jsx("div", { className: "side-sheet__content scrollbar scrollbar--vertical", "data-test-id": dataTestId ? `${dataTestId}-content` : '', ref: scrollbarContainerRef, children: children }), _jsx(Footer, { footerButtons: footerButtons, isLoading: isLoading, onClose: onClose, onSubmit: onSubmit, checkboxInfo: checkboxInfo, dataTestId: dataTestId })] }) })) : null }));
 };

package/components/SideSheet/types.d.ts

@@ -1,3 +1,4 @@
+import { IBaseProps } from '../../type';
 import { ReactNode } from 'react';
 import { TButtonPropTypes } from '../Button/types';
 export type TSideSheetSize = 'small' | 'large' | 'mobile';

package/components/Skeleton/Skeleton.js

@@ -8,7 +8,7 @@ const toCSSSize = (value) => {
     return typeof value === 'number' ? `${value}px` : value;
 };
 export const Skeleton = (props) => {
-    const { variant = DEFAULT_VARIANT, animation = DEFAULT_ANIMATION, width, height, count = 1, children, style, className = '', dataId = '' } = props;
+    const { variant = DEFAULT_VARIANT, animation = DEFAULT_ANIMATION, width, height, count = 1, children, style, className = '', dataTestId = '' } = props;
     const hasChildren = children !== undefined && children !== null;
     const safeCount = count > 1 ? count : 1;
     const inlineStyle = Object.assign(Object.assign(Object.assign({}, (width !== undefined ? { width: toCSSSize(width) } : null)), (height !== undefined ? { height: toCSSSize(height) } : null)), style);
@@ -18,14 +18,14 @@ export const Skeleton = (props) => {
         'skeleton--auto-width': hasChildren && width === undefined
     }, className);
     if (hasChildren) {
-        return (_jsx("span", { className: rootClassName, style: inlineStyle, "data-id": dataId, children: _jsx("span", { className: "skeleton__children", "aria-hidden": "true", children: children }) }));
+        return (_jsx("span", { className: rootClassName, style: inlineStyle, "data-test-id": dataTestId, children: _jsx("span", { className: "skeleton__children", "aria-hidden": "true", children: children }) }));
     }
     if (safeCount === 1) {
-        return (_jsx("span", { className: rootClassName, style: inlineStyle, "data-id": dataId, role: "status", "aria-label": "Loading" }));
+        return (_jsx("span", { className: rootClassName, style: inlineStyle, "data-test-id": dataTestId, role: "status", "aria-label": "Loading" }));
     }
     const items = [];
     for (let i = 0; i < safeCount; i += 1) {
-        items.push(_jsx("span", { className: rootClassName, style: inlineStyle, "data-id": dataId ? `${dataId}-${i}` : '', "aria-hidden": i === 0 ? undefined : true, role: i === 0 ? 'status' : undefined, "aria-label": i === 0 ? 'Loading' : undefined }, i));
+        items.push(_jsx("span", { className: rootClassName, style: inlineStyle, "data-test-id": dataTestId ? `${dataTestId}-${i}` : '', "aria-hidden": i === 0 ? undefined : true, role: i === 0 ? 'status' : undefined, "aria-label": i === 0 ? 'Loading' : undefined }, i));
     }
     return _jsx("span", { className: "skeleton-group", children: items });
 };

package/components/Skeleton/types.d.ts

@@ -1,3 +1,4 @@
+import { IBaseProps } from '../../type';
 import { CSSProperties, ReactNode } from 'react';
 export type TSkeletonVariant = 'text' | 'circular' | 'rectangular' | 'rounded';
 export type TSkeletonAnimation = 'pulse' | 'wave' | 'none';