hrm_ui_lib 3.3.0 → 3.4.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (34) hide show
  1. package/assets/styles/styles.css +1 -1
  2. package/components/Checkbox/Checkbox.js +4 -4
  3. package/components/Chips/Chips.js +1 -1
  4. package/components/Select/ButtonSelect/ButtonSelect.js +3 -2
  5. package/components/Select/FilterSelect/FilterDropdown.js +4 -3
  6. package/components/Select/FilterSelect/FilterSelect.js +3 -3
  7. package/components/Select/MultiSelect/DesktopWrapper.d.ts +1 -0
  8. package/components/Select/MultiSelect/DesktopWrapper.js +2 -2
  9. package/components/Select/MultiSelect/MobileWrapper.d.ts +1 -0
  10. package/components/Select/MultiSelect/MobileWrapper.js +2 -2
  11. package/components/Select/MultiSelect/MultiBase/MultiBase.js +4 -3
  12. package/components/Select/MultiSelect/MultiSelect.js +3 -3
  13. package/components/Select/MultiSelect/MultiSelectGrouped/MultiSelectGrouped.js +5 -4
  14. package/components/Select/MultiSelect/MultiSelectWithTabs/MultiSelectWithTabs.js +5 -4
  15. package/components/Select/MultiSelect/OptionsWrapper.d.ts +1 -0
  16. package/components/Select/NestedSelect/NestedSelect.js +5 -4
  17. package/components/Select/ProfileDropdown/index.js +2 -2
  18. package/components/Select/Select/Select.js +2 -2
  19. package/components/Select/Select/SelectDesktop/index.js +4 -3
  20. package/components/Select/Select/SelectMobile/MobileTopContent.d.ts +2 -1
  21. package/components/Select/Select/SelectMobile/MobileTopContent.js +2 -2
  22. package/components/Select/Select/SelectMobile/index.js +3 -2
  23. package/components/Select/SharedComponents/ButtonSelectWrapper/ButtonSelectWrapper.js +1 -1
  24. package/components/Select/SharedComponents/ContentTop.d.ts +1 -0
  25. package/components/Select/SharedComponents/ContentTop.js +6 -5
  26. package/components/Select/SharedComponents/Footer.js +2 -2
  27. package/components/Select/SharedComponents/InputSelectWrapper/InputSelectWrapper.js +3 -3
  28. package/components/Select/helper.d.ts +1 -0
  29. package/components/Select/helper.js +7 -1
  30. package/components/Select/types.d.ts +3 -0
  31. package/components/Status/Status.js +3 -3
  32. package/components/Tab/Tab.js +3 -3
  33. package/components/Tab/TabItem.js +1 -1
  34. package/package.json +1 -1
package/components/Checkbox/Checkbox.js CHANGED
@@ -21,7 +21,7 @@ export const Checkbox = forwardRef((props, ref) => {
21
21
  onClick(!isChecked);
22
22
  }
23
23
  };
24
- 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;
24
+ 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;
25
25
  const checkboxLabel = useMemo(() => {
26
26
  if (!label) {
27
27
  return null;
@@ -32,13 +32,13 @@ export const Checkbox = forwardRef((props, ref) => {
32
32
  if (!link) {
33
33
  return (_jsx(Text, { type: disabled ? 'disabled' : 'primary', className: "controller__label", children: _jsxs(_Fragment, { children: [label, required && _jsx("sup", { children: "*" })] }) }));
34
34
  }
35
- 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: "*" })] }) }));
35
+ 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: "*" })] }) }));
36
36
  }, [label, link]);
37
- return (_jsx(_Fragment, { children: _jsxs("label", { className: classnames('controller', {
37
+ return (_jsx(_Fragment, { children: _jsxs("label", { "data-id": dataId, className: classnames('controller', {
38
38
  'controller--checkbox': true,
39
39
  'controller--disabled': disabled,
40
40
  'controller--error': isInvalid,
41
41
  [className]: !!className
42
- }), 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] }) }));
42
+ }), 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] }) }));
43
43
  });
44
44
  Checkbox.displayName = 'Checkbox';
package/components/Chips/Chips.js CHANGED
@@ -21,5 +21,5 @@ export const Chips = (props) => {
21
21
  event.stopPropagation();
22
22
  onRemove === null || onRemove === void 0 ? void 0 : onRemove(event);
23
23
  };
24
- 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 }))] }));
24
+ 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 }))] }));
25
25
  };
package/components/Select/ButtonSelect/ButtonSelect.js CHANGED
@@ -6,6 +6,7 @@ import { useGetElemSizes, useOnOutsideClick } from '../../../hooks';
6
6
  import { Loading, ButtonSelectWrapper } from '../SharedComponents';
7
7
  import { noop } from '../../../utils/helpers';
8
8
  import { useIsMobile } from '../../../hooks/useGetIsMobile';
9
+ import { getOptionDataId } from '../helper';
9
10
  export const ButtonSelect = (props) => {
10
11
  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;
11
12
  const currentSelection = value || selectedItem;
@@ -38,8 +39,8 @@ export const ButtonSelect = (props) => {
38
39
  };
39
40
  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', {
40
41
  'mr-6': scrollHeight > 300
41
- }), children: options.map((item) => {
42
+ }), children: options.map((item, index) => {
42
43
  const isSelected = item.value === currentSelection;
43
- return (_jsx(OptionItem, { tooltipAddons: tooltipAddons, data: item, onClick: clickHandler(isSelected), labelLeftIconProps: labelLeftIconProps, OptionRightIconComponent: optionRightIconComponent, LabelRightIconComponent: labelRightIconComponent, disabled: item.disabled, isSelected: isSelected }, item.value));
44
+ 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));
44
45
  }) }) })) }));
45
46
  };
package/components/Select/FilterSelect/FilterDropdown.js CHANGED
@@ -1,15 +1,16 @@
1
1
  import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
2
2
  import { useMemo } from 'react';
3
3
  import { OptionItem } from '../../../helperComponents/OptionItem';
4
+ import { getOptionDataId } from '../helper';
4
5
  export const FilterDropdownContent = (props) => {
5
- const { checkIsSelected, filterValue, options, onItemSelect, onItemDeselect, labelLeftIconProps, optionRightIconComponent, labelRightIconComponent } = props;
6
+ const { checkIsSelected, filterValue, options, onItemSelect, onItemDeselect, labelLeftIconProps, optionRightIconComponent, labelRightIconComponent, dataId } = props;
6
7
  const filteredOptions = useMemo(() => {
7
8
  return options.filter((option) => {
8
9
  return option.label.toString().includes(filterValue);
9
10
  });
10
11
  }, [filterValue, options]);
11
- return (_jsx(_Fragment, { children: filteredOptions.map((item) => {
12
+ return (_jsx(_Fragment, { children: filteredOptions.map((item, index) => {
12
13
  const isSelected = checkIsSelected(item.value);
13
- return (_jsx(OptionItem, { data: item, onClick: isSelected ? onItemDeselect : onItemSelect, labelLeftIconProps: labelLeftIconProps, OptionRightIconComponent: optionRightIconComponent, LabelRightIconComponent: labelRightIconComponent, isCheckbox: true, disabled: item.disabled, isSelected: isSelected }, item.value));
14
+ 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));
14
15
  }) }));
15
16
  };
package/components/Select/FilterSelect/FilterSelect.js CHANGED
@@ -20,7 +20,7 @@ import { Input } from '../../Input';
20
20
  import IconSearchFilled from '../../SVGIcons/IconSearchFilled';
21
21
  import IconDismissFilled from '../../SVGIcons/IconDismissFilled';
22
22
  export const FilterSelect = (props) => {
23
- 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"]);
23
+ 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"]);
24
24
  const [containerRef, setContainerRef] = useState(null);
25
25
  const [selectedValues, setSelectedValues] = useState(selectedItems);
26
26
  const [filterValue, setFilterValue] = useState('');
@@ -64,9 +64,9 @@ export const FilterSelect = (props) => {
64
64
  if (!isOpen) {
65
65
  return null;
66
66
  }
67
- 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: {
67
+ 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: {
68
68
  size: filterValue === '' ? 'small' : 'xsmall',
69
69
  Component: filterValue === '' ? IconSearchFilled : IconDismissFilled,
70
70
  onClick: removeFilterValue
71
- } }), _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) }));
71
+ } }), _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) }));
72
72
  };
package/components/Select/MultiSelect/DesktopWrapper.d.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  import { LegacyRef, ReactElement } from 'react';
2
2
  type TProps = {
3
+ dataId?: string;
3
4
  isOpen: boolean;
4
5
  children: ReactElement;
5
6
  setDropdownRef: LegacyRef<HTMLDivElement>;
package/components/Select/MultiSelect/DesktopWrapper.js CHANGED
@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
2
2
  import { DROPDOWN_AND_INPUT_GAP } from '../../../consts';
3
3
  import { useGetElemPositions, useGetElemSizes, useGetHasBottomSpace, useGetHasTopSpace } from '../../../hooks';
4
4
  export const DesktopWrapper = (props) => {
5
- const { offsets, setDropdownRef, align, isOpen, children, inputRef, dropdownRef, containerRef, dropdownWidth } = props;
5
+ const { offsets, setDropdownRef, align, isOpen, children, inputRef, dropdownRef, containerRef, dropdownWidth, dataId } = props;
6
6
  const { bottom, left, top, right } = useGetElemPositions(inputRef);
7
7
  const { width: containerWidth } = useGetElemSizes(containerRef);
8
8
  const hasTopSpace = useGetHasTopSpace({
@@ -13,7 +13,7 @@ export const DesktopWrapper = (props) => {
13
13
  element: dropdownRef,
14
14
  input: inputRef
15
15
  });
16
- 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
16
+ 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
17
17
  ? { top: (offsets === null || offsets === void 0 ? void 0 : offsets.top) || bottom }
18
18
  : { bottom: window.innerHeight - top + DROPDOWN_AND_INPUT_GAP })), children: children })) : null;
19
19
  };
package/components/Select/MultiSelect/MobileWrapper.d.ts CHANGED
@@ -5,6 +5,7 @@ type TProps = {
5
5
  closeDrodown: () => void;
6
6
  modalApplyButtonText?: string;
7
7
  applySelectedItems: (isChecked: boolean) => void;
8
+ dataId?: string;
8
9
  };
9
10
  export declare const MobileWrapper: (props: TProps) => ReactElement;
10
11
  export {};
package/components/Select/MultiSelect/MobileWrapper.js CHANGED
@@ -1,11 +1,11 @@
1
1
  import { jsx as _jsx } from "react/jsx-runtime";
2
2
  import { Modal } from '../../Modal';
3
3
  export const MobileWrapper = (props) => {
4
- const { applySelectedItems, isOpen, closeDrodown, children, modalApplyButtonText = 'Apply' } = props;
4
+ const { applySelectedItems, isOpen, closeDrodown, children, modalApplyButtonText = 'Apply', dataId } = props;
5
5
  const submitSelection = () => {
6
6
  applySelectedItems(false);
7
7
  };
8
- return (_jsx(Modal, { isOpen: isOpen, onClose: closeDrodown, onSubmit: submitSelection, isMobileFullScreen: true, className: 'select__modal', buttonProps: {
8
+ return (_jsx(Modal, { isOpen: isOpen, onClose: closeDrodown, onSubmit: submitSelection, isMobileFullScreen: true, dataIdPrefix: dataId, className: 'select__modal', buttonProps: {
9
9
  confirm: {
10
10
  buttonText: modalApplyButtonText
11
11
  }
package/components/Select/MultiSelect/MultiBase/MultiBase.js CHANGED
@@ -8,8 +8,9 @@ import { DROPDOWN_HEIGHT, DROPDOWN_WIDTH, ITEM_SIZE, ITEM_SIZE_MOBILE } from '..
8
8
  import classNames from 'classnames';
9
9
  import { noop } from '../../../../utils/helpers';
10
10
  import { filterSearchData } from '../../Select/helpers';
11
+ import { getOptionDataId } from '../../helper';
11
12
  export const MultiBase = (props) => {
12
- const { isMobile, closeDropdown, scrollableContentStyle, options, helperText, translations, onItemSelect, onItemDeselect, isSearchAvailable, setSelectedValues, selectedValues, labelLeftIconProps, labelRightIconComponent, optionRightIconComponent, maxSelectCount, menuOptions, dataIdPrefix, dropdownWidth, applySelectedItems } = props;
13
+ const { isMobile, closeDropdown, scrollableContentStyle, options, helperText, translations, onItemSelect, onItemDeselect, isSearchAvailable, setSelectedValues, selectedValues, labelLeftIconProps, labelRightIconComponent, optionRightIconComponent, maxSelectCount, menuOptions, dataIdPrefix, dataId, dropdownWidth, applySelectedItems } = props;
13
14
  const { emptyListMainMessage, emptyListSecondaryMessage } = translations || {};
14
15
  const [navigationMode, setNavigationMode] = useState(false);
15
16
  const [searchValue, setSearchValue] = useState('');
@@ -104,7 +105,7 @@ export const MultiBase = (props) => {
104
105
  labelRightIconComponent
105
106
  };
106
107
  }, [labelLeftIconProps, optionRightIconComponent, labelRightIconComponent]);
107
- 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', {
108
+ 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', {
108
109
  select__options__scroll_mobile: isMobile
109
110
  }), style: scrollableContentStyle, ref: dropdownRef, tabIndex: 0, onKeyDown: isSearchAvailable ? noop : handleKeyDown, children: filteredData.length > 0 && (_jsx(List, { ref: listRef, height: isMobile
110
111
  ? window.innerHeight - 80 - 73 - 24
@@ -114,7 +115,7 @@ export const MultiBase = (props) => {
114
115
  const item = filteredData[index];
115
116
  const isSelected = checkIsSelected(item.value);
116
117
  const isActive = index === activeIndex;
117
- 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', {
118
+ 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', {
118
119
  'option--active': isActive
119
120
  }) }, optionProps)));
120
121
  } })) }), filteredData.length === 0 ? (_jsx(Empty, { size: "small", mainMessage: emptyListMainMessage, paragraphMessage: emptyListSecondaryMessage })) : null] }));
package/components/Select/MultiSelect/MultiSelect.js CHANGED
@@ -17,7 +17,7 @@ import { useOnOutsideClick } from '../../../hooks';
17
17
  import { useIsMobile } from '../../../hooks/useGetIsMobile';
18
18
  import { SELECT_TRANSLATIONS } from '../localization';
19
19
  export const MultiSelect = forwardRef((props, _ref) => {
20
- 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"]);
20
+ 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"]);
21
21
  const [dropdownRef, setDropdownRef] = useState(null);
22
22
  const initialSelected = value || selectedItems || [];
23
23
  const [isOpen, setIsOpen] = useState(false);
@@ -59,10 +59,10 @@ export const MultiSelect = forwardRef((props, _ref) => {
59
59
  const WrapperComponent = isButtonSelect ? ButtonSelectWrapper : InputSelectWrapper;
60
60
  const localizations = Object.assign(Object.assign({}, SELECT_TRANSLATIONS[language]), translations);
61
61
  const isMobile = useIsMobile();
62
- 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
62
+ 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
63
63
  // @ts-ignore
64
64
  , Object.assign({
65
65
  // @ts-ignore
66
- 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] }) }));
66
+ 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] }) }));
67
67
  });
68
68
  MultiSelect.displayName = 'MultiSelect';
package/components/Select/MultiSelect/MultiSelectGrouped/MultiSelectGrouped.js CHANGED
@@ -10,8 +10,9 @@ import { DROPDOWN_MAX_HEIGHT } from '../../constants';
10
10
  import IconCaretUpFilled from '../../../SVGIcons/IconCaretUpFilled';
11
11
  import IconCaretDownFilled from '../../../SVGIcons/IconCaretDownFilled';
12
12
  import { filterSearchData } from '../../Select/helpers';
13
+ import { getOptionDataId } from '../../helper';
13
14
  export const MultiSelectGrouped = (props) => {
14
- const { isMobile, options, helperText, translations, selectedValues, onItemSelect, onItemDeselect, setSelectedValues, isSearchAvailable, labelLeftIconProps, scrollableContentStyle, optionRightIconComponent, labelRightIconComponent, maxSelectCount, menuOptions, dataIdPrefix, closeDropdown } = props;
15
+ const { isMobile, options, helperText, translations, selectedValues, onItemSelect, onItemDeselect, setSelectedValues, isSearchAvailable, labelLeftIconProps, scrollableContentStyle, optionRightIconComponent, labelRightIconComponent, maxSelectCount, menuOptions, dataIdPrefix, dataId, closeDropdown } = props;
15
16
  const { emptyListMainMessage, emptyListSecondaryMessage } = translations;
16
17
  const [searchValue, setSearchValue] = useState('');
17
18
  const [activeGroupId, setActiveGroupId] = useState(0);
@@ -82,15 +83,15 @@ export const MultiSelectGrouped = (props) => {
82
83
  };
83
84
  }, [labelLeftIconProps, optionRightIconComponent, labelRightIconComponent]);
84
85
  const hasTopContent = isSearchAvailable || helperText;
85
- 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) => {
86
+ 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) => {
86
87
  return (_jsx(OptionItem, Object.assign({ isSelected: true, data: selectedItem, onClick: onDeselect, disabled: selectedItem.disabled }, optionProps), selectedItem.value));
87
88
  }) })), hasTopContent ? _jsx(Divider, { type: "primary", isHorizontal: true }) : null, filteredData.map(({ title, data }, index) => {
88
89
  var _a;
89
90
  const isActive = index === activeGroupId;
90
91
  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 &&
91
- data.map((item) => {
92
+ data.map((item, itemIndex) => {
92
93
  const isSelected = selectedValues.findIndex((s) => s.value === item.value) !== -1;
93
- 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));
94
+ 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));
94
95
  })] }, `${(_a = data[0]) === null || _a === void 0 ? void 0 : _a.value}_${index}`));
95
96
  })] }) }), filteredData.length === 0 ? (_jsx(Empty, { size: "small", mainMessage: emptyListMainMessage, paragraphMessage: emptyListSecondaryMessage })) : null] }));
96
97
  };
package/components/Select/MultiSelect/MultiSelectWithTabs/MultiSelectWithTabs.js CHANGED
@@ -8,8 +8,9 @@ import { OptionItem } from '../../../../helperComponents/OptionItem';
8
8
  import { ContentTop } from '../../SharedComponents';
9
9
  import { DROPDOWN_MAX_HEIGHT } from '../../constants';
10
10
  import { filterSearchData } from '../../Select/helpers';
11
+ import { getOptionDataId } from '../../helper';
11
12
  export const MultiSelectWithTabs = (props) => {
12
- const { options, scrollableContentStyle, selectedValues, onItemSelect, onItemDeselect, setSelectedValues, labelLeftIconProps, optionRightIconComponent, labelRightIconComponent, helperText, translations, isSearchAvailable, maxSelectCount, menuOptions, dataIdPrefix, closeDropdown } = props;
13
+ const { options, scrollableContentStyle, selectedValues, onItemSelect, onItemDeselect, setSelectedValues, labelLeftIconProps, optionRightIconComponent, labelRightIconComponent, helperText, translations, isSearchAvailable, maxSelectCount, menuOptions, dataIdPrefix, dataId, closeDropdown } = props;
13
14
  const { emptyListMainMessage, emptyListSecondaryMessage } = translations;
14
15
  const [contentContainerRef, setContentContainerRef] = useState(null);
15
16
  const [activeTab, setActiveTab] = useState(0);
@@ -62,10 +63,10 @@ export const MultiSelectWithTabs = (props) => {
62
63
  labelRightIconComponent
63
64
  };
64
65
  }, [labelLeftIconProps, optionRightIconComponent, labelRightIconComponent]);
65
- 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) => {
66
+ 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) => {
66
67
  return (_jsx(OptionItem, Object.assign({ data: selectedItem, onClick: onDeselect, disabled: selectedItem.disabled, isSelected: true }, optionProps), selectedItem.value));
67
- }) })), _jsx(Divider, { type: "primary", isHorizontal: true }), filteredData.map((item) => {
68
+ }) })), _jsx(Divider, { type: "primary", isHorizontal: true }), filteredData.map((item, index) => {
68
69
  const isSelected = selectedValues.findIndex((s) => s.value === item.value) !== -1;
69
- 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));
70
+ 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));
70
71
  }), filteredData.length === 0 ? (_jsx(Empty, { size: "small", mainMessage: emptyListMainMessage, paragraphMessage: emptyListSecondaryMessage })) : null] })] }));
71
72
  };
package/components/Select/MultiSelect/OptionsWrapper.d.ts CHANGED
@@ -1,6 +1,7 @@
1
1
  import { ReactElement } from 'react';
2
2
  import { TSelectTranslations } from '../types';
3
3
  type TProps = {
4
+ dataId?: string;
4
5
  isLoading?: boolean;
5
6
  withTabs?: boolean;
6
7
  isGrouped?: boolean;
package/components/Select/NestedSelect/NestedSelect.js CHANGED
@@ -5,9 +5,10 @@ import { OptionItem } from '../../../helperComponents/OptionItem';
5
5
  import { useGetElemPositions, useGetElemSizes, useOnOutsideClick } from '../../../hooks';
6
6
  import IconChevronUp from '../../SVGIcons/IconChevronUp';
7
7
  import IconChevronDown from '../../SVGIcons/IconChevronDown';
8
+ import { getOptionDataId } from '../helper';
8
9
  const LEVEL_LEFT_MARGIN = 10;
9
10
  export const NestedSelect = (props) => {
10
- const { label, options, selected, placeHolder, isRequiredField, setSelectedValue, initialSelectedFolderIds, optionRightIconComponent, labelRightIconComponent, labelAddons } = props;
11
+ const { label, options, selected, placeHolder, isRequiredField, setSelectedValue, initialSelectedFolderIds, optionRightIconComponent, labelRightIconComponent, labelAddons, dataId } = props;
11
12
  const [isDropdownOpen, setIsOpen] = useState(false);
12
13
  const [containerRef, setContainerRef] = useState(null);
13
14
  const [selectedValues, setSelectedValues] = useState(initialSelectedFolderIds || []);
@@ -45,14 +46,14 @@ export const NestedSelect = (props) => {
45
46
  const { value, children, disabled } = option;
46
47
  const isOpen = selectedValues.indexOf(option.value) !== -1;
47
48
  const isSelected = option.value === (selected === null || selected === void 0 ? void 0 : selected.value);
48
- 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) }));
49
+ 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) }));
49
50
  if (isOpen && children) {
50
51
  acc.push(...generateFolders(children, level + 1));
51
52
  }
52
53
  return acc;
53
54
  }, []);
54
- 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: {
55
+ 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: {
55
56
  Component: isDropdownOpen ? IconChevronUp : IconChevronDown,
56
57
  size: 'small'
57
- }, 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) }) }))] }));
58
+ }, 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) }) }))] }));
58
59
  };
package/components/Select/ProfileDropdown/index.js CHANGED
@@ -5,9 +5,9 @@ import { useOnOutsideClick } from '../../../hooks';
5
5
  import { Link } from '../../Link';
6
6
  export const ProfileDropdown = (props) => {
7
7
  const menuRef = useRef(null);
8
- const { avatar, name, email, bodyItems, footerItems, className } = props;
8
+ const { avatar, name, email, bodyItems, footerItems, className, dataId } = props;
9
9
  const [isOpen, setIsOpen] = React.useState(false);
10
10
  const closeDropdown = () => setIsOpen(false);
11
11
  useOnOutsideClick(menuRef.current, closeDropdown, isOpen, useId());
12
- 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] })] }))] }));
12
+ 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] })] }))] }));
13
13
  };
package/components/Select/Select/Select.js CHANGED
@@ -117,8 +117,8 @@ export const Select = forwardRef((props, _ref) => {
117
117
  useEffect(() => {
118
118
  setCurrentSelectedLabel();
119
119
  }, [setCurrentSelectedLabel]);
120
- return (_jsxs("div", { "data-id": `${dataId}-content`, className: classNames(`select select--${size}`, className, {
120
+ return (_jsxs("div", { "data-id": dataId, className: classNames(`select select--${size}`, className, {
121
121
  'select--opened': isOpen
122
- }), 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 })))] }));
122
+ }), 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 })))] }));
123
123
  });
124
124
  Select.displayName = 'Select';
package/components/Select/Select/SelectDesktop/index.js CHANGED
@@ -10,6 +10,7 @@ import { Empty } from '../../../Empty';
10
10
  import { Text } from '../../../Text';
11
11
  import { Loading } from '../../SharedComponents';
12
12
  import { DROPDOWN_HEIGHT, DROPDOWN_WIDTH, ITEM_SIZE } from '../../constants';
13
+ import { getOptionDataId } from '../../helper';
13
14
  export const SelectDesktop = (props) => {
14
15
  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;
15
16
  const listRef = useRef(null);
@@ -60,10 +61,10 @@ export const SelectDesktop = (props) => {
60
61
  input: inputRef
61
62
  });
62
63
  useChangePositionsOnScroll(inputRef, dropdownRef, hasBottomSpace);
63
- return (_jsx(_Fragment, { children: isOpen && (_jsx("div", { className: "select__options", style: Object.assign({ left,
64
+ return (_jsx(_Fragment, { children: isOpen && (_jsx("div", { "data-id": dataId ? `${dataId}-content` : '', className: "select__options", style: Object.assign({ left,
64
65
  width }, (hasBottomSpace || !hasTopSpace
65
66
  ? { top: bottom }
66
- : { 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
67
+ : { 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
67
68
  ? DROPDOWN_HEIGHT
68
69
  : filteredData.length * ITEM_SIZE, itemCount: filteredData.length, itemSize: ITEM_SIZE, width: dropdownWidth || DROPDOWN_WIDTH, style: {
69
70
  width: dropdownWidth || '100%',
@@ -74,7 +75,7 @@ export const SelectDesktop = (props) => {
74
75
  const item = filteredData[index];
75
76
  const isSelected = item.value === currentSelection;
76
77
  const isActive = activeIndex === index;
77
- 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', {
78
+ 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', {
78
79
  'option--active': isActive
79
80
  }) }, item.value));
80
81
  } })), 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 CHANGED
@@ -5,6 +5,7 @@ type TProps = {
5
5
  onBack: () => void;
6
6
  withSearch: boolean;
7
7
  isOpen: boolean;
8
+ dataId?: string;
8
9
  };
9
- export declare const MobileTopContent: ({ onBack, setSearchValue, searchValue, withSearch, isOpen }: TProps) => ReactElement;
10
+ export declare const MobileTopContent: ({ onBack, setSearchValue, searchValue, withSearch, isOpen, dataId }: TProps) => ReactElement;
10
11
  export {};
package/components/Select/Select/SelectMobile/MobileTopContent.js CHANGED
@@ -4,7 +4,7 @@ import IconChevronLeft from '../../../SVGIcons/IconChevronLeft';
4
4
  import { Input } from '../../../Input';
5
5
  import IconDismissFilled from '../../../SVGIcons/IconDismissFilled';
6
6
  import IconSearchFilled from '../../../SVGIcons/IconSearchFilled';
7
- export const MobileTopContent = ({ onBack, setSearchValue, searchValue, withSearch, isOpen }) => {
7
+ export const MobileTopContent = ({ onBack, setSearchValue, searchValue, withSearch, isOpen, dataId }) => {
8
8
  const inputRef = useRef(null);
9
9
  const onSearch = (e) => {
10
10
  setSearchValue(e.target.value);
@@ -17,7 +17,7 @@ export const MobileTopContent = ({ onBack, setSearchValue, searchValue, withSear
17
17
  inputRef.current.focus();
18
18
  }
19
19
  }, [inputRef.current]);
20
- 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: {
20
+ 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: {
21
21
  Component: searchValue ? IconDismissFilled : IconSearchFilled,
22
22
  size: searchValue ? 'xsmall' : 'small',
23
23
  onClick: removeFilter
package/components/Select/Select/SelectMobile/index.js CHANGED
@@ -7,6 +7,7 @@ import { ITEM_SIZE_MOBILE } from '../../constants';
7
7
  import { Loading } from '../../SharedComponents';
8
8
  import { MobileTopContent } from './MobileTopContent';
9
9
  import { FixedSizeList as List } from 'react-window';
10
+ import { getOptionDataId } from '../../helper';
10
11
  export const SelectMobile = (props) => {
11
12
  const { translations, currentSelection, isOpen, closeDropdown, isLoading, dataId, innerHelperText, filteredData, isRequiredField, onItemSelect, onItemDeselect, tooltipAddons, labelLeftIconProps, optionRightIconComponent, labelRightIconComponent, withSearch, searchValue, setSearchValue } = props;
12
13
  const clickHandler = (isSelected) => ({ value }) => {
@@ -25,7 +26,7 @@ export const SelectMobile = (props) => {
25
26
  };
26
27
  const windowHeight = window.innerHeight;
27
28
  const windowWidth = window.innerWidth;
28
- 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: {
29
+ 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: {
29
30
  width: '100%',
30
31
  overflowX: 'hidden',
31
32
  overflowY: 'auto',
@@ -33,6 +34,6 @@ export const SelectMobile = (props) => {
33
34
  }, children: ({ index, style }) => {
34
35
  const item = filteredData[index];
35
36
  const isSelected = item.value === currentSelection;
36
- 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));
37
+ 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));
37
38
  } })), filteredData.length === 0 ? (_jsx(Empty, { size: "small", mainMessage: translations === null || translations === void 0 ? void 0 : translations.emptyListMainMessage })) : null] }))] })] }));
38
39
  };
package/components/Select/SharedComponents/ButtonSelectWrapper/ButtonSelectWrapper.js CHANGED
@@ -25,5 +25,5 @@ export const ButtonSelectWrapper = (props) => {
25
25
  return ` ${selectedValues[0].label} +${selectedValues.length - 1}`;
26
26
  }, [selectedValues]);
27
27
  useChangePositionsOnScroll(buttonRef === null || buttonRef === void 0 ? void 0 : buttonRef.current, dropdownRef, hasBottomSpace);
28
- 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 })) })] }));
28
+ 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 })) })] }));
29
29
  };
package/components/Select/SharedComponents/ContentTop.d.ts CHANGED
@@ -14,6 +14,7 @@ type TProps = {
14
14
  hasLimitation?: boolean;
15
15
  menuOptions?: TMenuItem[];
16
16
  dataIdPrefix?: string;
17
+ dataId?: string;
17
18
  closeDropdown?: () => void;
18
19
  handleKeyDown?: (e: React.KeyboardEvent) => void;
19
20
  };
package/components/Select/SharedComponents/ContentTop.js CHANGED
@@ -10,8 +10,9 @@ import { useIsMobile } from '../../../hooks/useGetIsMobile';
10
10
  import IconChevronLeft from '../../SVGIcons/IconChevronLeft';
11
11
  import { noop } from '../../../utils/helpers';
12
12
  export const ContentTop = React.memo((props) => {
13
- const { clearAll, selectAll, helperText, searchValue, translations, isAnySelected, setSearchValue, isSearchAvailable = false, hasLimitation = false, isSelectAllDisabled = false, menuOptions = [], dataIdPrefix, closeDropdown, handleKeyDown } = props;
13
+ const { clearAll, selectAll, helperText, searchValue, translations, isAnySelected, setSearchValue, isSearchAvailable = false, hasLimitation = false, isSelectAllDisabled = false, menuOptions = [], dataIdPrefix, dataId, closeDropdown, handleKeyDown } = props;
14
14
  const inputRef = useRef(null);
15
+ const baseDataId = dataId || dataIdPrefix;
15
16
  const { searchInputPlaceHolder, innerLabel, clearAllLabel, selectAllLabel } = translations || {};
16
17
  const selectActions = useMemo(() => {
17
18
  let options = menuOptions;
@@ -23,7 +24,7 @@ export const ContentTop = React.memo((props) => {
23
24
  handler: selectAll,
24
25
  disabled: isSelectAllDisabled,
25
26
  iconProps: { Component: IconSelectAllOff },
26
- dataId: dataIdPrefix ? `${dataIdPrefix}-select-all` : ''
27
+ dataId: baseDataId ? `${baseDataId}-select-all` : ''
27
28
  }
28
29
  ];
29
30
  }
@@ -36,7 +37,7 @@ export const ContentTop = React.memo((props) => {
36
37
  handler: clearAll,
37
38
  disabled: !isAnySelected,
38
39
  iconProps: { Component: IconDismissFilled },
39
- dataId: dataIdPrefix ? `${dataIdPrefix}-clear-all` : ''
40
+ dataId: baseDataId ? `${baseDataId}-clear` : ''
40
41
  }
41
42
  ];
42
43
  }
@@ -49,7 +50,7 @@ export const ContentTop = React.memo((props) => {
49
50
  clearAllLabel,
50
51
  isSelectAllDisabled,
51
52
  isAnySelected,
52
- dataIdPrefix
53
+ baseDataId
53
54
  ]);
54
55
  const onSearch = (e) => {
55
56
  setSearchValue && setSearchValue(e.target.value);
@@ -64,7 +65,7 @@ export const ContentTop = React.memo((props) => {
64
65
  const onBack = () => {
65
66
  closeDropdown && closeDropdown();
66
67
  };
67
- 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: {
68
+ 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: {
68
69
  Component: searchValue ? IconDismissFilled : IconSearchFilled,
69
70
  size: searchValue ? 'xsmall' : 'small',
70
71
  onClick: removeFilter
package/components/Select/SharedComponents/Footer.js CHANGED
@@ -4,9 +4,9 @@ import { Button } from '../../Button';
4
4
  import { Checkbox } from '../../Checkbox';
5
5
  import { SELECT_TRANSLATIONS } from '../localization';
6
6
  export const Footer = (props) => {
7
- const { language, buttonProps, onApply, onCancel, hasChange = true, checkboxInfo } = props;
7
+ const { language, buttonProps, onApply, onCancel, hasChange = true, checkboxInfo, dataId } = props;
8
8
  const [isSelected, setIsSelected] = React.useState((checkboxInfo === null || checkboxInfo === void 0 ? void 0 : checkboxInfo.isChecked) || false);
9
9
  const confirmButtonProps = Object.assign({ buttonText: SELECT_TRANSLATIONS[language].confirmButtonText }, ((buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.confirm) || {}));
10
10
  const cancelButtonProps = Object.assign({ buttonText: SELECT_TRANSLATIONS[language].cancelButtonText }, ((buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.cancel) || {}));
11
- 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) }))] })] }));
11
+ 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) }))] })] }));
12
12
  };
package/components/Select/SharedComponents/InputSelectWrapper/InputSelectWrapper.js CHANGED
@@ -10,7 +10,7 @@ import { DesktopWrapper } from '../../MultiSelect/DesktopWrapper';
10
10
  import IconChevronUp from '../../../SVGIcons/IconChevronUp';
11
11
  import IconChevronDown from '../../../SVGIcons/IconChevronDown';
12
12
  export const InputSelectWrapper = (props) => {
13
- 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;
13
+ 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;
14
14
  const inputRef = useRef(null);
15
15
  const { width } = useGetElemSizes(containerRef);
16
16
  const checkIsValueOverflowed = useCallback((value) => {
@@ -53,8 +53,8 @@ export const InputSelectWrapper = (props) => {
53
53
  input: inputRef.current
54
54
  });
55
55
  useChangePositionsOnScroll(inputRef === null || inputRef === void 0 ? void 0 : inputRef.current, dropdownRef, hasBottomSpace);
56
- 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: {
56
+ 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: {
57
57
  Component: isOpen ? IconChevronUp : IconChevronDown,
58
58
  size: 'small'
59
- }, 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 })) })] }));
59
+ }, 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 })) })] }));
60
60
  };