hrm_ui_lib 3.2.3 → 3.4.0

package/components/Image/Image.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 export const Image = (props) => {
-    const { name, imagePath = 'static/media/src/assets/images/image-placeholder.png', isBackgroundImage, backgroundSize, className = '', isFullWidth, isFullHeight, ratio } = props;
-    return isBackgroundImage ? (_jsx("div", { className: `image image--bg ${className}`, style: {
+    const { name, imagePath = 'static/media/src/assets/images/image-placeholder.png', isBackgroundImage, backgroundSize, className = '', isFullWidth, isFullHeight, ratio, dataId = '' } = props;
+    return isBackgroundImage ? (_jsx("div", { "data-id": dataId, className: `image image--bg ${className}`, style: {
             backgroundImage: `${imagePath ? `url(${imagePath})` : ''}`,
             backgroundSize: backgroundSize,
             aspectRatio: ratio
-        } })) : (_jsx("img", { className: `image ${className}`, src: imagePath, alt: name, style: {
+        } })) : (_jsx("img", { "data-id": dataId, className: `image ${className}`, src: imagePath, alt: name, style: {
             aspectRatio: ratio,
             width: isFullWidth ? '100%' : '',
             height: isFullHeight ? '100%' : ''

package/components/Image/types.d.ts

@@ -1,4 +1,4 @@
-export interface ImagePropTypes {
+export interface ImagePropTypes extends IBaseProps {
     name?: string;
     imagePath?: string;
     className?: string;

package/components/LineChart/LineChart.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
 import { TLineChartProps } from './types';
-export declare const LineChart: ({ data }: TLineChartProps) => React.ReactElement;
+export declare const LineChart: ({ data, dataId }: TLineChartProps) => React.ReactElement;

package/components/LineChart/LineChart.js

@@ -3,18 +3,18 @@ import classNames from 'classnames';
 import { Text } from '../Text';
 import { Divider } from '../Divider';
 import { generateLinePath, formatWithDots } from './helper';
-export const LineChart = ({ data }) => {
+export const LineChart = ({ data, dataId = '' }) => {
     const linePathes = generateLinePath(data);
     let percent = 0;
-    return (_jsxs("div", { children: [_jsx("div", { className: "bar", children: linePathes.map(({ percentage, color }, i) => {
+    return (_jsxs("div", { "data-id": dataId, children: [_jsx("div", { className: "bar", children: linePathes.map(({ percentage, color }, i) => {
                     const start = percent;
                     const end = start + percentage;
                     percent = end;
-                    return (_jsx("div", { className: classNames('bar__segment', `bar__segment--color-${color}`, {
+                    return (_jsx("div", { "data-id": dataId ? `${dataId}-segment-${i}` : '', className: classNames('bar__segment', `bar__segment--color-${color}`, {
                             'bar__segment--first': i === 0,
                             'bar__segment--last': i === linePathes.length - 1
                         }), style: {
                             flexBasis: `${percentage}%`
                         } }, `line-chart-segment-${i}`));
-                }) }), _jsx("div", { className: "line-chart-status", children: linePathes.map(({ label, dataCurrency, color, quantity, isHidden }, i) => !isHidden && (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flexbox justify-content--between pt-6 pb-6", children: [_jsxs("div", { className: "flexbox align-items--center", children: [_jsx("span", { className: classNames('status__circle', `status__circle--${color}`) }), _jsx(Text, { type: "tertiary", children: label })] }), _jsx("div", { children: _jsxs(Text, { children: [formatWithDots(quantity), " ", dataCurrency] }) })] }, `line-chart-status-${i}`), i !== linePathes.length - 1 && (_jsx(Divider, { type: "primary", isHorizontal: true, color: "grey" }))] }))) })] }));
+                }) }), _jsx("div", { className: "line-chart-status", children: linePathes.map(({ label, dataCurrency, color, quantity, isHidden }, i) => !isHidden && (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flexbox justify-content--between pt-6 pb-6", "data-id": dataId ? `${dataId}-item-${i}` : '', children: [_jsxs("div", { className: "flexbox align-items--center", children: [_jsx("span", { className: classNames('status__circle', `status__circle--${color}`) }), _jsx(Text, { type: "tertiary", dataId: dataId ? `${dataId}-label-${i}` : '', children: label })] }), _jsx("div", { children: _jsxs(Text, { dataId: dataId ? `${dataId}-value-${i}` : '', children: [formatWithDots(quantity), " ", dataCurrency] }) })] }, `line-chart-status-${i}`), i !== linePathes.length - 1 && (_jsx(Divider, { type: "primary", isHorizontal: true, color: "grey" }))] }))) })] }));
 };

package/components/LineChart/types.d.ts

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

package/components/Link/types.d.ts

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

package/components/Menu/types.d.ts

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

package/components/More/More.js

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

package/components/More/types.d.ts

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

package/components/Pagination/Pagination.js

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

package/components/Pagination/types.d.ts

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

package/components/Progress/Progress.js

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

package/components/Progress/types.d.ts

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

package/components/ProgressStep/ProgressStep.js

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

package/components/ProgressStep/Step.js

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

package/components/ProgressStep/types.d.ts

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

package/components/Radio/types.d.ts

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

package/components/Select/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] })] }))] }));
 };