hrm_ui_lib 3.3.0 → 3.4.0

package/components/Checkbox/Checkbox.js

@@ -21,7 +21,7 @@ export const Checkbox = forwardRef((props, ref) => {
             onClick(!isChecked);
         }
     };
-    const checkboxLabelPopover = popoverAddons ? (_jsx(Popover, Object.assign({ id: `${popoverAddons.id}` }, popoverAddons, { children: _jsx("div", { id: `${popoverAddons.id}`, children: _jsx(IconInfo, { dataId: `${dataId}-icon`, type: "information", size: "xsmall", className: 'ml-4 pointer', onClick: changeHandler }) }) }))) : null;
+    const checkboxLabelPopover = popoverAddons ? (_jsx(Popover, Object.assign({ id: `${popoverAddons.id}` }, popoverAddons, { children: _jsx("div", { id: `${popoverAddons.id}`, children: _jsx(IconInfo, { dataId: dataId ? `${dataId}-icon` : '', type: "information", size: "xsmall", className: 'ml-4 pointer', onClick: changeHandler }) }) }))) : null;
     const checkboxLabel = useMemo(() => {
         if (!label) {
             return null;
@@ -32,13 +32,13 @@ export const Checkbox = forwardRef((props, ref) => {
         if (!link) {
             return (_jsx(Text, { type: disabled ? 'disabled' : 'primary', className: "controller__label", children: _jsxs(_Fragment, { children: [label, required && _jsx("sup", { children: "*" })] }) }));
         }
-        return (_jsx(Text, { type: disabled ? 'disabled' : 'primary', className: "controller__label", children: _jsxs(_Fragment, { children: [beforeLink && _jsx("span", { className: "mr-4", children: beforeLink }), _jsx(Link, { dataId: dataId, url: link, target: "_blank", children: label }), afterLink && _jsx("span", { className: "ml-4", children: afterLink }), required && _jsx("sup", { children: "*" })] }) }));
+        return (_jsx(Text, { type: disabled ? 'disabled' : 'primary', className: "controller__label", children: _jsxs(_Fragment, { children: [beforeLink && _jsx("span", { className: "mr-4", children: beforeLink }), _jsx(Link, { dataId: dataId ? `${dataId}-link` : '', url: link, target: "_blank", children: label }), afterLink && _jsx("span", { className: "ml-4", children: afterLink }), required && _jsx("sup", { children: "*" })] }) }));
     }, [label, link]);
-    return (_jsx(_Fragment, { children: _jsxs("label", { className: classnames('controller', {
+    return (_jsx(_Fragment, { children: _jsxs("label", { "data-id": dataId, className: classnames('controller', {
                 'controller--checkbox': true,
                 'controller--disabled': disabled,
                 'controller--error': isInvalid,
                 [className]: !!className
-            }), onClick: (e) => stopPropagation && e.stopPropagation(), children: [_jsx("input", { "data-id": dataId, type: "checkbox", ref: inputRef, tabIndex: 0, onChange: changeHandler, checked: Boolean(isChecked), disabled: disabled }), _jsx("span", { className: "controller__icon", children: _jsx(IconDynamicComponent, { Component: ICONS_MAPPING[iconProps.name], size: "xxsmall", type: disabled ? 'disabled' : 'inverse', className: "controller__mark" }) }), checkboxLabel ? (_jsxs("div", { className: "controller__right", children: [_jsxs("div", { className: "flexbox", children: [checkboxLabel, checkboxLabelPopover] }), helperText ? (_jsx(Text, { size: "small", type: disabled ? 'disabled' : 'secondary', children: helperText })) : null] })) : null] }) }));
+            }), onClick: (e) => stopPropagation && e.stopPropagation(), children: [_jsx("input", { "data-id": dataId ? `${dataId}-input` : '', type: "checkbox", ref: inputRef, tabIndex: 0, onChange: changeHandler, checked: Boolean(isChecked), disabled: disabled }), _jsx("span", { className: "controller__icon", children: _jsx(IconDynamicComponent, { Component: ICONS_MAPPING[iconProps.name], size: "xxsmall", type: disabled ? 'disabled' : 'inverse', className: "controller__mark" }) }), checkboxLabel ? (_jsxs("div", { className: "controller__right", children: [_jsxs("div", { className: "flexbox", children: [checkboxLabel, checkboxLabelPopover] }), helperText ? (_jsx(Text, { size: "small", type: disabled ? 'disabled' : 'secondary', children: helperText })) : null] })) : null] }) }));
 });
 Checkbox.displayName = 'Checkbox';

package/components/Chips/Chips.js

@@ -21,5 +21,5 @@ export const Chips = (props) => {
         event.stopPropagation();
         onRemove === null || onRemove === void 0 ? void 0 : onRemove(event);
     };
-    return (_jsxs("div", { className: classNames(`chips chips--${type} chips--${disabled ? 'disabled' : color} chips--${size}`, className), id: id, onClick: handleClick, children: [(leftIconProps === null || leftIconProps === void 0 ? void 0 : leftIconProps.Component) ? (_jsx(leftIconProps.Component, Object.assign({ dataId: `${dataId}-icon`, size: ICON_SIZE_MAPPING[size], type: customType, className: classNames({ 'mr-6': !!text }) }, leftIconProps))) : null, text ? (_jsx(Text, { dataId: `${dataId}-text`, type: customType, size: TEXT_SIZE_MAPPING[size], className: "chips__label", children: _jsx(_Fragment, { children: text }) })) : null, withAction && (_jsx(IconDismissCircleFilled, { dataId: `${dataId}-icon`, size: ICON_SIZE_MAPPING[size], type: customType, className: "chips__delete ml-6", onClick: handleRemove }))] }));
+    return (_jsxs("div", { className: classNames(`chips chips--${type} chips--${disabled ? 'disabled' : color} chips--${size}`, className), id: id, "data-id": dataId, onClick: handleClick, children: [(leftIconProps === null || leftIconProps === void 0 ? void 0 : leftIconProps.Component) ? (_jsx(leftIconProps.Component, Object.assign({ dataId: `${dataId}-icon`, size: ICON_SIZE_MAPPING[size], type: customType, className: classNames({ 'mr-6': !!text }) }, leftIconProps))) : null, text ? (_jsx(Text, { dataId: `${dataId}-text`, type: customType, size: TEXT_SIZE_MAPPING[size], className: "chips__label", children: _jsx(_Fragment, { children: text }) })) : null, withAction && (_jsx(IconDismissCircleFilled, { dataId: `${dataId}-icon`, size: ICON_SIZE_MAPPING[size], type: customType, className: "chips__delete ml-6", onClick: handleRemove }))] }));
 };

package/components/Select/ButtonSelect/ButtonSelect.js

@@ -6,6 +6,7 @@ import { useGetElemSizes, useOnOutsideClick } from '../../../hooks';
 import { Loading, ButtonSelectWrapper } from '../SharedComponents';
 import { noop } from '../../../utils/helpers';
 import { useIsMobile } from '../../../hooks/useGetIsMobile';
+import { getOptionDataId } from '../helper';
 export const ButtonSelect = (props) => {
     const { size, className, isLoading, options, name, setSelectedItem, setFieldValue, isRequiredField, selectedItem, labelLeftIconProps, tooltipAddons, dropdownWidth, labelRightIconComponent, optionRightIconComponent, align = 'left', value, placeHolder, offsets, dataId, type, isMobileFullScreen = false } = props;
     const currentSelection = value || selectedItem;
@@ -38,8 +39,8 @@ export const ButtonSelect = (props) => {
     };
     return (_jsx(ButtonSelectWrapper, { applySelectedItems: noop, size: size, className: className, dropdownWidth: dropdownWidth, align: align, offsets: offsets, isOpen: isOpen, setIsOpen: setIsOpen, containerRef: containerRef, setContainerRef: setContainerRef, dropdownRef: dropdownRef, setDropdownRef: setDropdownRef, placeHolder: placeHolder, dataId: dataId, type: type, isMobile: isMobile && isMobileFullScreen, children: isLoading ? (_jsx(Loading, {})) : (_jsx(_Fragment, { children: _jsx("div", { ref: scrollRef, className: classNames('select__options__scroll', 'scrollbar', 'scrollbar--vertical', {
                     'mr-6': scrollHeight > 300
-                }), children: options.map((item) => {
+                }), children: options.map((item, index) => {
                     const isSelected = item.value === currentSelection;
-                    return (_jsx(OptionItem, { tooltipAddons: tooltipAddons, data: item, onClick: clickHandler(isSelected), labelLeftIconProps: labelLeftIconProps, OptionRightIconComponent: optionRightIconComponent, LabelRightIconComponent: labelRightIconComponent, disabled: item.disabled, isSelected: isSelected }, item.value));
+                    return (_jsx(OptionItem, { tooltipAddons: tooltipAddons, data: item, dataId: getOptionDataId(dataId, item.value, index) || item.dataId, onClick: clickHandler(isSelected), labelLeftIconProps: labelLeftIconProps, OptionRightIconComponent: optionRightIconComponent, LabelRightIconComponent: labelRightIconComponent, disabled: item.disabled, isSelected: isSelected }, item.value));
                 }) }) })) }));
 };

package/components/Select/FilterSelect/FilterDropdown.js

@@ -1,15 +1,16 @@
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import { useMemo } from 'react';
 import { OptionItem } from '../../../helperComponents/OptionItem';
+import { getOptionDataId } from '../helper';
 export const FilterDropdownContent = (props) => {
-    const { checkIsSelected, filterValue, options, onItemSelect, onItemDeselect, labelLeftIconProps, optionRightIconComponent, labelRightIconComponent } = props;
+    const { checkIsSelected, filterValue, options, onItemSelect, onItemDeselect, labelLeftIconProps, optionRightIconComponent, labelRightIconComponent, dataId } = props;
     const filteredOptions = useMemo(() => {
         return options.filter((option) => {
             return option.label.toString().includes(filterValue);
         });
     }, [filterValue, options]);
-    return (_jsx(_Fragment, { children: filteredOptions.map((item) => {
+    return (_jsx(_Fragment, { children: filteredOptions.map((item, index) => {
             const isSelected = checkIsSelected(item.value);
-            return (_jsx(OptionItem, { data: item, onClick: isSelected ? onItemDeselect : onItemSelect, labelLeftIconProps: labelLeftIconProps, OptionRightIconComponent: optionRightIconComponent, LabelRightIconComponent: labelRightIconComponent, isCheckbox: true, disabled: item.disabled, isSelected: isSelected }, item.value));
+            return (_jsx(OptionItem, { data: item, dataId: getOptionDataId(dataId, item.value, index) || item.dataId, onClick: isSelected ? onItemDeselect : onItemSelect, labelLeftIconProps: labelLeftIconProps, OptionRightIconComponent: optionRightIconComponent, LabelRightIconComponent: labelRightIconComponent, isCheckbox: true, disabled: item.disabled, isSelected: isSelected }, item.value));
         }) }));
 };

package/components/Select/FilterSelect/FilterSelect.js

@@ -20,7 +20,7 @@ import { Input } from '../../Input';
 import IconSearchFilled from '../../SVGIcons/IconSearchFilled';
 import IconDismissFilled from '../../SVGIcons/IconDismissFilled';
 export const FilterSelect = (props) => {
-    const { isLoading, isGrouped, options, isOpen, setFieldValue, name, footerButtonProps, selectedItems, setSelectedItems, closeHandler, parentRef, language = 'en' } = props, rest = __rest(props, ["isLoading", "isGrouped", "options", "isOpen", "setFieldValue", "name", "footerButtonProps", "selectedItems", "setSelectedItems", "closeHandler", "parentRef", "language"]);
+    const { isLoading, isGrouped, options, isOpen, setFieldValue, name, footerButtonProps, selectedItems, setSelectedItems, closeHandler, parentRef, language = 'en', dataId } = props, rest = __rest(props, ["isLoading", "isGrouped", "options", "isOpen", "setFieldValue", "name", "footerButtonProps", "selectedItems", "setSelectedItems", "closeHandler", "parentRef", "language", "dataId"]);
     const [containerRef, setContainerRef] = useState(null);
     const [selectedValues, setSelectedValues] = useState(selectedItems);
     const [filterValue, setFilterValue] = useState('');
@@ -64,9 +64,9 @@ export const FilterSelect = (props) => {
     if (!isOpen) {
         return null;
     }
-    return (_jsx(_Fragment, { children: createPortal(_jsx("div", { className: "select filter", children: _jsxs("div", { className: "select__options", ref: setContainerRef, children: [_jsx(Input, { onChange: onFilter, className: "filter__input", size: "small", currentValue: filterValue, rightIconProps: {
+    return (_jsx(_Fragment, { children: createPortal(_jsx("div", { className: "select filter", "data-id": dataId, children: _jsxs("div", { className: "select__options", "data-id": dataId ? `${dataId}-content` : '', ref: setContainerRef, children: [_jsx(Input, { dataId: dataId ? `${dataId}-search` : '', onChange: onFilter, className: "filter__input", size: "small", currentValue: filterValue, rightIconProps: {
                             size: filterValue === '' ? 'small' : 'xsmall',
                             Component: filterValue === '' ? IconSearchFilled : IconDismissFilled,
                             onClick: removeFilterValue
-                        } }), _jsx("div", { className: 'select__options__scroll scrollbar scrollbar--vertical ', children: isLoading ? (_jsx(Loading, {})) : isGrouped ? (_jsx(FilterGroupDropdownContent, Object.assign({ checkIsSelected: checkIsSelected, onItemDeselect: onItemDeselect, filterValue: filterValue, onItemSelect: onItemSelect, options: options }, rest))) : (_jsx(FilterDropdownContent, Object.assign({ checkIsSelected: checkIsSelected, onItemDeselect: onItemDeselect, filterValue: filterValue, onItemSelect: onItemSelect, options: options }, rest))) }), isLoading ? null : (_jsx(Footer, { buttonProps: footerButtonProps, onCancel: cancelSelectedItems, onApply: applySelectedItems, language: language }))] }) }), document.body) }));
+                        } }), _jsx("div", { className: 'select__options__scroll scrollbar scrollbar--vertical ', children: isLoading ? (_jsx(Loading, {})) : isGrouped ? (_jsx(FilterGroupDropdownContent, Object.assign({ checkIsSelected: checkIsSelected, onItemDeselect: onItemDeselect, filterValue: filterValue, onItemSelect: onItemSelect, dataId: dataId, options: options }, rest))) : (_jsx(FilterDropdownContent, Object.assign({ checkIsSelected: checkIsSelected, onItemDeselect: onItemDeselect, filterValue: filterValue, onItemSelect: onItemSelect, dataId: dataId, options: options }, rest))) }), isLoading ? null : (_jsx(Footer, { dataId: dataId, buttonProps: footerButtonProps, onCancel: cancelSelectedItems, onApply: applySelectedItems, language: language }))] }) }), document.body) }));
 };

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

@@ -1,5 +1,6 @@
 import { LegacyRef, ReactElement } from 'react';
 type TProps = {
+    dataId?: string;
     isOpen: boolean;
     children: ReactElement;
     setDropdownRef: LegacyRef<HTMLDivElement>;

package/components/Select/MultiSelect/DesktopWrapper.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { DROPDOWN_AND_INPUT_GAP } from '../../../consts';
 import { useGetElemPositions, useGetElemSizes, useGetHasBottomSpace, useGetHasTopSpace } from '../../../hooks';
 export const DesktopWrapper = (props) => {
-    const { offsets, setDropdownRef, align, isOpen, children, inputRef, dropdownRef, containerRef, dropdownWidth } = props;
+    const { offsets, setDropdownRef, align, isOpen, children, inputRef, dropdownRef, containerRef, dropdownWidth, dataId } = props;
     const { bottom, left, top, right } = useGetElemPositions(inputRef);
     const { width: containerWidth } = useGetElemSizes(containerRef);
     const hasTopSpace = useGetHasTopSpace({
@@ -13,7 +13,7 @@ export const DesktopWrapper = (props) => {
         element: dropdownRef,
         input: inputRef
     });
-    return isOpen ? (_jsx("div", { className: "select__options", ref: setDropdownRef, style: Object.assign({ left: align === 'left' ? (offsets === null || offsets === void 0 ? void 0 : offsets.left) || left : right - (dropdownWidth || containerWidth), right: align === 'right' ? (offsets === null || offsets === void 0 ? void 0 : offsets.right) || left : right - (dropdownWidth || containerWidth), width: dropdownWidth || containerWidth }, (hasBottomSpace || !hasTopSpace
+    return isOpen ? (_jsx("div", { "data-id": dataId ? `${dataId}-content` : '', className: "select__options", ref: setDropdownRef, style: Object.assign({ left: align === 'left' ? (offsets === null || offsets === void 0 ? void 0 : offsets.left) || left : right - (dropdownWidth || containerWidth), right: align === 'right' ? (offsets === null || offsets === void 0 ? void 0 : offsets.right) || left : right - (dropdownWidth || containerWidth), width: dropdownWidth || containerWidth }, (hasBottomSpace || !hasTopSpace
             ? { top: (offsets === null || offsets === void 0 ? void 0 : offsets.top) || bottom }
             : { bottom: window.innerHeight - top + DROPDOWN_AND_INPUT_GAP })), children: children })) : null;
 };

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

@@ -5,6 +5,7 @@ type TProps = {
     closeDrodown: () => void;
     modalApplyButtonText?: string;
     applySelectedItems: (isChecked: boolean) => void;
+    dataId?: string;
 };
 export declare const MobileWrapper: (props: TProps) => ReactElement;
 export {};

package/components/Select/MultiSelect/MobileWrapper.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Modal } from '../../Modal';
 export const MobileWrapper = (props) => {
-    const { applySelectedItems, isOpen, closeDrodown, children, modalApplyButtonText = 'Apply' } = props;
+    const { applySelectedItems, isOpen, closeDrodown, children, modalApplyButtonText = 'Apply', dataId } = props;
     const submitSelection = () => {
         applySelectedItems(false);
     };
-    return (_jsx(Modal, { isOpen: isOpen, onClose: closeDrodown, onSubmit: submitSelection, isMobileFullScreen: true, className: 'select__modal', buttonProps: {
+    return (_jsx(Modal, { isOpen: isOpen, onClose: closeDrodown, onSubmit: submitSelection, isMobileFullScreen: true, dataIdPrefix: dataId, className: 'select__modal', buttonProps: {
             confirm: {
                 buttonText: modalApplyButtonText
             }

package/components/Select/MultiSelect/MultiBase/MultiBase.js

@@ -8,8 +8,9 @@ import { DROPDOWN_HEIGHT, DROPDOWN_WIDTH, ITEM_SIZE, ITEM_SIZE_MOBILE } from '..
 import classNames from 'classnames';
 import { noop } from '../../../../utils/helpers';
 import { filterSearchData } from '../../Select/helpers';
+import { getOptionDataId } from '../../helper';
 export const MultiBase = (props) => {
-    const { isMobile, closeDropdown, scrollableContentStyle, options, helperText, translations, onItemSelect, onItemDeselect, isSearchAvailable, setSelectedValues, selectedValues, labelLeftIconProps, labelRightIconComponent, optionRightIconComponent, maxSelectCount, menuOptions, dataIdPrefix, dropdownWidth, applySelectedItems } = props;
+    const { isMobile, closeDropdown, scrollableContentStyle, options, helperText, translations, onItemSelect, onItemDeselect, isSearchAvailable, setSelectedValues, selectedValues, labelLeftIconProps, labelRightIconComponent, optionRightIconComponent, maxSelectCount, menuOptions, dataIdPrefix, dataId, dropdownWidth, applySelectedItems } = props;
     const { emptyListMainMessage, emptyListSecondaryMessage } = translations || {};
     const [navigationMode, setNavigationMode] = useState(false);
     const [searchValue, setSearchValue] = useState('');
@@ -104,7 +105,7 @@ export const MultiBase = (props) => {
             labelRightIconComponent
         };
     }, [labelLeftIconProps, optionRightIconComponent, labelRightIconComponent]);
-    return (_jsxs(_Fragment, { children: [_jsx(ContentTop, { closeDropdown: closeDropdown, dataIdPrefix: dataIdPrefix, menuOptions: menuOptions, selectAll: selectAll, clearAll: clearAll, hasLimitation: !!maxSelectCount, isAnySelected: selectedValues.length !== 0, helperText: helperText, isSearchAvailable: isSearchAvailable, isSelectAllDisabled: isAllSelected || filteredData.length === 0, setSearchValue: setSearchValue, searchValue: searchValue, translations: translations, handleKeyDown: handleKeyDown }), _jsx("div", { className: classNames('select__options__scroll scrollbar', {
+    return (_jsxs(_Fragment, { children: [_jsx(ContentTop, { closeDropdown: closeDropdown, dataId: dataId, dataIdPrefix: dataIdPrefix, menuOptions: menuOptions, selectAll: selectAll, clearAll: clearAll, hasLimitation: !!maxSelectCount, isAnySelected: selectedValues.length !== 0, helperText: helperText, isSearchAvailable: isSearchAvailable, isSelectAllDisabled: isAllSelected || filteredData.length === 0, setSearchValue: setSearchValue, searchValue: searchValue, translations: translations, handleKeyDown: handleKeyDown }), _jsx("div", { className: classNames('select__options__scroll scrollbar', {
                     select__options__scroll_mobile: isMobile
                 }), style: scrollableContentStyle, ref: dropdownRef, tabIndex: 0, onKeyDown: isSearchAvailable ? noop : handleKeyDown, children: filteredData.length > 0 && (_jsx(List, { ref: listRef, height: isMobile
                         ? window.innerHeight - 80 - 73 - 24
@@ -114,7 +115,7 @@ export const MultiBase = (props) => {
                         const item = filteredData[index];
                         const isSelected = checkIsSelected(item.value);
                         const isActive = index === activeIndex;
-                        return (_jsx(OptionItem, Object.assign({ size: isMobile ? 'large' : 'small', data: item, dataId: item.dataId, onClick: isSelected ? onDeselect : onItemSelect, disabled: item.disabled || (!isSelected && selectedValues.length === maxSelectCount), isSelected: isSelected, style: style, className: classNames('option', {
+                        return (_jsx(OptionItem, Object.assign({ size: isMobile ? 'large' : 'small', data: item, dataId: getOptionDataId(dataId, item.value, index) || item.dataId, onClick: isSelected ? onDeselect : onItemSelect, disabled: item.disabled || (!isSelected && selectedValues.length === maxSelectCount), isSelected: isSelected, style: style, className: classNames('option', {
                                 'option--active': isActive
                             }) }, optionProps)));
                     } })) }), filteredData.length === 0 ? (_jsx(Empty, { size: "small", mainMessage: emptyListMainMessage, paragraphMessage: emptyListSecondaryMessage })) : null] }));

package/components/Select/MultiSelect/MultiSelect.js

@@ -17,7 +17,7 @@ import { useOnOutsideClick } from '../../../hooks';
 import { useIsMobile } from '../../../hooks/useGetIsMobile';
 import { SELECT_TRANSLATIONS } from '../localization';
 export const MultiSelect = forwardRef((props, _ref) => {
-    const { isMobileFullScreen = true, options, footerButtonProps, selectedItems, setSelectedItems, name, setFieldValue, value, label, placeHolder, isRequiredField, labelAddons, className = '', disabled, dropdownWidth, align = 'left', size, isButtonSelect, checkboxInfo, translations, hasError, language = 'en', hideSelectedOptions = false } = props, rest = __rest(props, ["isMobileFullScreen", "options", "footerButtonProps", "selectedItems", "setSelectedItems", "name", "setFieldValue", "value", "label", "placeHolder", "isRequiredField", "labelAddons", "className", "disabled", "dropdownWidth", "align", "size", "isButtonSelect", "checkboxInfo", "translations", "hasError", "language", "hideSelectedOptions"]);
+    const { isMobileFullScreen = true, options, footerButtonProps, selectedItems, setSelectedItems, name, setFieldValue, value, label, placeHolder, isRequiredField, labelAddons, className = '', disabled, dropdownWidth, align = 'left', size, isButtonSelect, checkboxInfo, translations, hasError, language = 'en', hideSelectedOptions = false, dataId } = props, rest = __rest(props, ["isMobileFullScreen", "options", "footerButtonProps", "selectedItems", "setSelectedItems", "name", "setFieldValue", "value", "label", "placeHolder", "isRequiredField", "labelAddons", "className", "disabled", "dropdownWidth", "align", "size", "isButtonSelect", "checkboxInfo", "translations", "hasError", "language", "hideSelectedOptions", "dataId"]);
     const [dropdownRef, setDropdownRef] = useState(null);
     const initialSelected = value || selectedItems || [];
     const [isOpen, setIsOpen] = useState(false);
@@ -59,10 +59,10 @@ export const MultiSelect = forwardRef((props, _ref) => {
     const WrapperComponent = isButtonSelect ? ButtonSelectWrapper : InputSelectWrapper;
     const localizations = Object.assign(Object.assign({}, SELECT_TRANSLATIONS[language]), translations);
     const isMobile = useIsMobile();
-    return (_jsx(WrapperComponent, { dropdownRef: dropdownRef, isOpen: isOpen, setIsOpen: setIsOpen, containerRef: containerRef, setContainerRef: setContainerRef, dropdownWidth: dropdownWidth, setDropdownRef: setDropdownRef, size: size, label: label, align: align, disabled: disabled, className: className, labelAddons: labelAddons, placeHolder: placeHolder, selectedValues: selectedValues, isRequiredField: isRequiredField, overflowText: localizations.overflowText, hasError: hasError, applySelectedItems: applySelectedItems, isMobile: isMobile && isMobileFullScreen, hideSelectedOptions: hideSelectedOptions, children: _jsxs(_Fragment, { children: [_jsx(OptionsWrapper
+    return (_jsx(WrapperComponent, { dataId: dataId, dropdownRef: dropdownRef, isOpen: isOpen, setIsOpen: setIsOpen, containerRef: containerRef, setContainerRef: setContainerRef, dropdownWidth: dropdownWidth, setDropdownRef: setDropdownRef, size: size, label: label, align: align, disabled: disabled, className: className, labelAddons: labelAddons, placeHolder: placeHolder, selectedValues: selectedValues, isRequiredField: isRequiredField, overflowText: localizations.overflowText, hasError: hasError, applySelectedItems: applySelectedItems, isMobile: isMobile && isMobileFullScreen, hideSelectedOptions: hideSelectedOptions, children: _jsxs(_Fragment, { children: [_jsx(OptionsWrapper
                 // @ts-ignore
                 , Object.assign({ 
                     // @ts-ignore
-                    options: options, isOpen: isOpen, translations: localizations, setIsOpen: setIsOpen, dropdownRef: dropdownRef, openDropdown: openDropdown, selectedValues: selectedValues, setSelectedValues: setSelectedValues, containerRef: containerRef, dropdownWidth: dropdownWidth, isMobileFullScreen: isMobileFullScreen, applySelectedItems: applySelectedItems }, rest)), options.length && !(isMobile && isMobileFullScreen) ? (_jsx(Footer, { checkboxInfo: checkboxInfo, hasChange: hasChange, buttonProps: footerButtonProps, onCancel: cancelSelectedItems, onApply: applySelectedItems, language: language })) : null] }) }));
+                    options: options, dataId: dataId, isOpen: isOpen, translations: localizations, setIsOpen: setIsOpen, dropdownRef: dropdownRef, openDropdown: openDropdown, selectedValues: selectedValues, setSelectedValues: setSelectedValues, containerRef: containerRef, dropdownWidth: dropdownWidth, isMobileFullScreen: isMobileFullScreen, applySelectedItems: applySelectedItems }, rest)), options.length && !(isMobile && isMobileFullScreen) ? (_jsx(Footer, { dataId: dataId, checkboxInfo: checkboxInfo, hasChange: hasChange, buttonProps: footerButtonProps, onCancel: cancelSelectedItems, onApply: applySelectedItems, language: language })) : null] }) }));
 });
 MultiSelect.displayName = 'MultiSelect';

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

@@ -10,8 +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';
 export const MultiSelectGrouped = (props) => {
-    const { isMobile, options, helperText, translations, selectedValues, onItemSelect, onItemDeselect, setSelectedValues, isSearchAvailable, labelLeftIconProps, scrollableContentStyle, optionRightIconComponent, labelRightIconComponent, maxSelectCount, menuOptions, dataIdPrefix, closeDropdown } = props;
+    const { isMobile, options, helperText, translations, selectedValues, onItemSelect, onItemDeselect, setSelectedValues, isSearchAvailable, labelLeftIconProps, scrollableContentStyle, optionRightIconComponent, labelRightIconComponent, maxSelectCount, menuOptions, dataIdPrefix, dataId, closeDropdown } = props;
     const { emptyListMainMessage, emptyListSecondaryMessage } = translations;
     const [searchValue, setSearchValue] = useState('');
     const [activeGroupId, setActiveGroupId] = useState(0);
@@ -82,15 +83,15 @@ export const MultiSelectGrouped = (props) => {
         };
     }, [labelLeftIconProps, optionRightIconComponent, labelRightIconComponent]);
     const hasTopContent = isSearchAvailable || helperText;
-    return (_jsxs(_Fragment, { children: [hasTopContent ? (_jsx(ContentTop, { closeDropdown: closeDropdown, 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, 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 (_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;
                             const isActive = index === activeGroupId;
                             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) => {
+                                        data.map((item, itemIndex) => {
                                             const isSelected = selectedValues.findIndex((s) => s.value === item.value) !== -1;
-                                            return (_jsx(OptionItem, Object.assign({ data: item, dataId: 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, dataId: getOptionDataId(dataId, item.value, itemIndex) || item.dataId, 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,8 +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';
 export const MultiSelectWithTabs = (props) => {
-    const { options, scrollableContentStyle, selectedValues, onItemSelect, onItemDeselect, setSelectedValues, labelLeftIconProps, optionRightIconComponent, labelRightIconComponent, helperText, translations, isSearchAvailable, maxSelectCount, menuOptions, dataIdPrefix, closeDropdown } = props;
+    const { options, scrollableContentStyle, selectedValues, onItemSelect, onItemDeselect, setSelectedValues, labelLeftIconProps, optionRightIconComponent, labelRightIconComponent, helperText, translations, isSearchAvailable, maxSelectCount, menuOptions, dataIdPrefix, dataId, closeDropdown } = props;
     const { emptyListMainMessage, emptyListSecondaryMessage } = translations;
     const [contentContainerRef, setContentContainerRef] = useState(null);
     const [activeTab, setActiveTab] = useState(0);
@@ -62,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, 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, 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 (_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) => {
+                        }) })), _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: 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, dataId: getOptionDataId(dataId, item.value, index) || item.dataId, 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,6 +1,7 @@
 import { ReactElement } from 'react';
 import { TSelectTranslations } from '../types';
 type TProps = {
+    dataId?: string;
     isLoading?: boolean;
     withTabs?: boolean;
     isGrouped?: boolean;

package/components/Select/NestedSelect/NestedSelect.js

@@ -5,9 +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';
 const LEVEL_LEFT_MARGIN = 10;
 export const NestedSelect = (props) => {
-    const { label, options, selected, placeHolder, isRequiredField, setSelectedValue, initialSelectedFolderIds, optionRightIconComponent, labelRightIconComponent, labelAddons } = props;
+    const { label, options, selected, placeHolder, isRequiredField, setSelectedValue, initialSelectedFolderIds, optionRightIconComponent, labelRightIconComponent, labelAddons, dataId } = props;
     const [isDropdownOpen, setIsOpen] = useState(false);
     const [containerRef, setContainerRef] = useState(null);
     const [selectedValues, setSelectedValues] = useState(initialSelectedFolderIds || []);
@@ -45,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, 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, 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) }));
         if (isOpen && children) {
             acc.push(...generateFolders(children, level + 1));
         }
         return acc;
     }, []);
-    return (_jsxs("div", { className: "select select--multi", ref: setContainerRef, children: [_jsx("div", { onClick: toggleDropdown, children: _jsx(Input, { ref: inputRef, className: "select__input", label: label, required: isRequiredField, rightIconProps: {
+    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: {
                         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", 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-id": dataId ? `${dataId}-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 } = props;
+    const { avatar, name, email, bodyItems, footerItems, className, dataId } = props;
     const [isOpen, setIsOpen] = React.useState(false);
     const closeDropdown = () => setIsOpen(false);
     useOnOutsideClick(menuRef.current, closeDropdown, isOpen, useId());
-    return (_jsxs("div", { ref: menuRef, className: `relative ${className}`, children: [_jsx("div", { onClick: () => setIsOpen(!isOpen), children: avatar }), isOpen && (_jsxs("div", { 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", { 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", { 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-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] })] }))] }));
 };

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;
@@ -164,6 +165,7 @@ export interface ISingleSelectDesktopProps extends ISingleSelectResponsiveProps
     setActiveIndex: (index: number) => void;
 }
 export type TSelectFooterPropTypes = {
+    dataId?: string;
     checkboxInfo?: TCheckboxInfo;
     hasChange?: boolean;
     buttonProps?: {
@@ -266,6 +268,7 @@ declare type TNavItemValue = {
     children: ReactNode;
 };
 export type TProfileDropdownProps = {
+    dataId?: string;
     avatar: ReactElement;
     email: string;
     name: 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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hrm_ui_lib",
-  "version": "3.3.0",
+  "version": "3.4.0",
   "description": "UI library for Dino",
   "main": "./index.cjs",
   "module": "./index.js",