ab-ui-library 1.0.1

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

@@ -0,0 +1,244 @@
+import { _ as _extends } from '../../../../extends-e8ef956f.js';
+import { _ as _toConsumableArray } from '../../../../toConsumableArray-e0031ed3.js';
+import { _ as _slicedToArray } from '../../../../slicedToArray-0c706912.js';
+import React, { useState, useMemo, useCallback } from 'react';
+import { Divider } from '../../../Divider/Divider.js';
+import { Empty } from '../../../Empty/Empty.js';
+import { Tab } from '../../../Tab/Tab.js';
+import { useGetElemSizes } from '../../../../hooks/useGetElemSizes.js';
+import 'dayjs';
+import '../../../../hooks/useScreenSize.js';
+import 'react-hook-form';
+import 'classnames';
+import { OptionItem } from '../../../../helperComponents/OptionItem/OptionItem.js';
+import 'react-syntax-highlighter';
+import '../../../Checkbox/Checkbox.js';
+import 'react-dom';
+import 'framer-motion';
+import '../../../Collapse/CollapseGroup/CollapseGroup.js';
+import { ContentTop } from '../../SharedComponents/ContentTop.js';
+import '../../../Input/Input.js';
+import '../../../Input/InputPassword.js';
+import { DROPDOWN_MAX_HEIGHT } from '../../constants.js';
+import '../../../Text/Text.js';
+import '../../../../utils/helpers.js';
+import '../../../Image/Image.js';
+import '../../../Button/Button.js';
+import '../../../../defineProperty-7db32082.js';
+import '../../../../typeof-ecd92d7f.js';
+import '../../../../objectWithoutProperties-fcd64cc7.js';
+import '../../../../helperComponents/Loader/Loader.js';
+import '../../../Button/consts.js';
+import '../../../Popover/Popover.js';
+import '../../../../hooks/useGetTooltipStyles.js';
+import '../../../../hooks/useGetElemPositions.js';
+import '../../../../hooks/useGetTooltipPosition.js';
+import '../../../Tooltip/types.js';
+import '../../../../hooks/useHideOnScroll.js';
+import '../../../../consts/index.js';
+import '../../../../hooks/useOnOutsideClick.js';
+import '../../../Link/Link.js';
+import '../../../SVGIcons/IconInfo.js';
+import '../../../../helperComponents/IconDynamicComponent/IconDynamicComponent.js';
+import '../../../../helperComponents/IconDynamicComponent/constants.js';
+import '../../../Tab/TabItem.js';
+import '../../../Badge/Badge.js';
+import '../../../Badge/consts.js';
+import '../../../Tab/consts.js';
+import '../../../Avatar/Avatar.js';
+import '../../../FileUpload/FileUpload.js';
+import '../../../FileUpload/types.js';
+import '../../../../helperComponents/Label/Label.js';
+import '../../../FileUpload/UploadItems.js';
+import '../../../../hooks/useFormProps.js';
+import '../../../../context/types.js';
+import '../../../../helperComponents/ErrorMessage/ErrorMessage.js';
+import '../../../SVGIcons/IconDelete.js';
+import '../../../SVGIcons/IconEditFilled.js';
+import '../../../SVGIcons/IconEdit.js';
+import '../../../SVGIcons/IconAttach.js';
+import '../../../Tooltip/Tooltip.js';
+import '../../../SVGIcons/IconCheckmark.js';
+import '../../../Collapse/CollapseItem/CollapseItem.js';
+import '../../../SVGIcons/IconChevronRight.js';
+import '../../../../helperComponents/AnimatePresenceWrapper/AnimatePresenceWrapper.js';
+import '../../../SVGIcons/IconChevronDown.js';
+import '../../SharedComponents/Actions.js';
+import '../../../Menu/Menu.js';
+import '../../../SVGIcons/IconMore.js';
+import '../../../SVGIcons/IconDismissFilled.js';
+import '../../../SVGIcons/IconSearchFilled.js';
+import '../../../SVGIcons/IconSelectAllOff.js';
+import 'react-input-mask';
+import 'react-number-format';
+import '../../../SVGIcons/IconCheckmarkCircleFilled.js';
+import '../../../SVGIcons/IconDismissCircle.js';
+import '../../../SVGIcons/IconDismissCircleFilled.js';
+import '../../../SVGIcons/IconEyeOff.js';
+import '../../../SVGIcons/IconEyeOn.js';
+
+var MultiSelectWithTabs = function MultiSelectWithTabs(props) {
+  var avatar = props.avatar,
+    options = props.options,
+    scrollableContentStyle = props.scrollableContentStyle,
+    selectedValues = props.selectedValues,
+    onItemSelect = props.onItemSelect,
+    onItemDeselect = props.onItemDeselect,
+    setSelectedValues = props.setSelectedValues,
+    labelLeftIconProps = props.labelLeftIconProps,
+    optionRightIconComponent = props.optionRightIconComponent,
+    labelRightIconComponent = props.labelRightIconComponent,
+    helperText = props.helperText,
+    translations = props.translations,
+    isSearchAvailable = props.isSearchAvailable,
+    maxSelectCount = props.maxSelectCount,
+    menuOptions = props.menuOptions,
+    dataIdPrefix = props.dataIdPrefix;
+  var emptyListMainMessage = translations.emptyListMainMessage,
+    emptyListSecondaryMessage = translations.emptyListSecondaryMessage;
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    contentContainerRef = _useState2[0],
+    setContentContainerRef = _useState2[1];
+  var _useState3 = useState(0),
+    _useState4 = _slicedToArray(_useState3, 2),
+    activeTab = _useState4[0],
+    setActiveTab = _useState4[1];
+  var _useGetElemSizes = useGetElemSizes(contentContainerRef),
+    scrollHeight = _useGetElemSizes.scrollHeight;
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    isAllSelected = _useState6[0],
+    setAllSelected = _useState6[1];
+  var _useState7 = useState(''),
+    _useState8 = _slicedToArray(_useState7, 2),
+    searchValue = _useState8[0],
+    setSearchValue = _useState8[1];
+  var currentTabData = options[activeTab].data;
+  var filteredData = useMemo(function () {
+    if (!searchValue) {
+      return currentTabData;
+    }
+    return currentTabData.filter(function (dataItem) {
+      return typeof dataItem.label === 'string' && dataItem.label.toLocaleLowerCase().includes(searchValue.toLocaleLowerCase());
+    });
+  }, [searchValue, currentTabData]);
+  var clearAll = useCallback(function () {
+    setAllSelected(false);
+    var filteredValues = selectedValues.filter(function (selectedItem) {
+      var currentTabValues = currentTabData.map(function (item) {
+        return item.value;
+      });
+      return currentTabValues.indexOf(selectedItem.value) === -1;
+    });
+    setSelectedValues(filteredValues);
+  }, [selectedValues, activeTab, currentTabData]);
+  var onDeselect = function onDeselect(item) {
+    setAllSelected(false);
+    onItemDeselect(item);
+  };
+  var selectAll = useCallback(function () {
+    setAllSelected(true);
+    var allValues = filteredData.map(function (item) {
+      var value = item.value,
+        label = item.label;
+      return {
+        value: value,
+        label: label
+      };
+    });
+    setSelectedValues(selectedValues.concat(allValues));
+  }, [activeTab, selectedValues, filteredData]);
+  var tabs = useMemo(function () {
+    return options.map(function (option, index) {
+      return {
+        label: option.title,
+        value: index
+      };
+    });
+  }, [options]);
+  var onTabSelect = function onTabSelect(selected) {
+    setActiveTab(selected);
+    setSearchValue('');
+  };
+  var selectedOptions = useMemo(function () {
+    return options.reduce(function (acc, option) {
+      var data = option.data;
+      var selectedItems = data.filter(function (item) {
+        return selectedValues.findIndex(function (s) {
+          return s.value === item.value;
+        }) !== -1;
+      });
+      return [].concat(_toConsumableArray(acc), _toConsumableArray(selectedItems));
+    }, []);
+  }, [options, selectedValues]);
+  var optionProps = useMemo(function () {
+    return {
+      isCheckbox: true,
+      avatar: avatar,
+      labelLeftIconProps: labelLeftIconProps,
+      optionRightIconComponent: optionRightIconComponent,
+      labelRightIconComponent: labelRightIconComponent
+    };
+  }, [avatar, labelLeftIconProps, optionRightIconComponent, labelRightIconComponent]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: "tab_container",
+    style: {
+      padding: '0 20px',
+      width: '100%'
+    }
+  }, /*#__PURE__*/React.createElement(Tab, {
+    selectedValue: activeTab,
+    tabItems: tabs,
+    onSelect: onTabSelect,
+    size: "small"
+  })), /*#__PURE__*/React.createElement(ContentTop, {
+    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
+  }), /*#__PURE__*/React.createElement("div", {
+    ref: setContentContainerRef,
+    className: "select__options__scroll scrollbar scrollbar--vertical ".concat(scrollHeight > DROPDOWN_MAX_HEIGHT ? 'mr-6' : ''),
+    style: scrollableContentStyle
+  }, isSearchAvailable && /*#__PURE__*/React.createElement("div", {
+    className: "selected_container"
+  }, selectedOptions.map(function (selectedItem) {
+    return /*#__PURE__*/React.createElement(OptionItem, _extends({
+      data: selectedItem,
+      key: selectedItem.value,
+      onClick: onDeselect,
+      disabled: selectedItem.disabled,
+      isSelected: true
+    }, optionProps));
+  })), /*#__PURE__*/React.createElement(Divider, {
+    type: "primary",
+    isHorizontal: true
+  }), filteredData.map(function (item) {
+    var isSelected = selectedValues.findIndex(function (s) {
+      return s.value === item.value;
+    }) !== -1;
+    return /*#__PURE__*/React.createElement(OptionItem, _extends({
+      data: item,
+      dataId: item.dataId,
+      key: item.value,
+      onClick: isSelected ? onDeselect : onItemSelect,
+      disabled: item.disabled || !isSelected && selectedValues.length === maxSelectCount,
+      isSelected: isSelected
+    }, optionProps));
+  }), filteredData.length === 0 ? /*#__PURE__*/React.createElement(Empty, {
+    size: "small",
+    mainMessage: emptyListMainMessage,
+    paragraphMessage: emptyListSecondaryMessage
+  }) : null));
+};
+
+export { MultiSelectWithTabs };

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

@@ -0,0 +1,17 @@
+import type { ReactElement } from 'react';
+import type { TSelectTranslations } from '../types';
+type TProps = {
+    isLoading?: boolean;
+    withTabs?: boolean;
+    isGrouped?: boolean;
+    isOpen: boolean;
+    translations: TSelectTranslations;
+    containerRef: HTMLDivElement | null;
+    setIsOpen: (isOpen: boolean) => void;
+    dropdownRef: HTMLDivElement | null;
+    options: TSelectOptions;
+    selectedValues: TSelectedValue[];
+    setSelectedValues: (values: TSelectedValue[]) => void;
+};
+export declare const OptionsWrapper: (props: TProps) => ReactElement;
+export {};

package/components/Select/MultiSelect/OptionsWrapper.js

@@ -0,0 +1,176 @@
+import { _ as _extends } from '../../../extends-e8ef956f.js';
+import { _ as _toConsumableArray } from '../../../toConsumableArray-e0031ed3.js';
+import { _ as _defineProperty } from '../../../defineProperty-7db32082.js';
+import { _ as _objectWithoutProperties } from '../../../objectWithoutProperties-fcd64cc7.js';
+import React, { useRef, useCallback, useMemo } from 'react';
+import 'classnames';
+import { getStringWidth } from '../../../utils/helpers.js';
+import '../../Checkbox/Checkbox.js';
+import { useGetElemSizes } from '../../../hooks/useGetElemSizes.js';
+import '../../../hooks/useScreenSize.js';
+import { useGetHasBottomSpace, useGetHasTopSpace } from '../../../hooks/useGetHasBottomSpace.js';
+import 'react-hook-form';
+import 'react-syntax-highlighter';
+import 'react-dom';
+import 'framer-motion';
+import '../../Collapse/CollapseGroup/CollapseGroup.js';
+import '../SharedComponents/ContentTop.js';
+import { Loading } from '../SharedComponents/Loading.js';
+import '../../Input/Input.js';
+import '../../Input/InputPassword.js';
+import { MultiSelectGrouped } from './MultiSelectGrouped/MultiSelectGrouped.js';
+import { MultiBase } from './MultiBase/MultiBase.js';
+import { MultiSelectWithTabs } from './MultiSelectWithTabs/MultiSelectWithTabs.js';
+import { TRANSLATIONS_DEFAULT_VALUES, SELECTED_VISIBLE_MIN_COUNT } from '../constants.js';
+import '../../../slicedToArray-0c706912.js';
+import '../../../typeof-ecd92d7f.js';
+import 'dayjs';
+import '../../Popover/Popover.js';
+import '../../../hooks/useGetTooltipStyles.js';
+import '../../../hooks/useGetElemPositions.js';
+import '../../../hooks/useGetTooltipPosition.js';
+import '../../Tooltip/types.js';
+import '../../../hooks/useHideOnScroll.js';
+import '../../../consts/index.js';
+import '../../../hooks/useOnOutsideClick.js';
+import '../../Text/Text.js';
+import '../../Link/Link.js';
+import '../../SVGIcons/IconInfo.js';
+import '../../../helperComponents/IconDynamicComponent/IconDynamicComponent.js';
+import '../../../helperComponents/IconDynamicComponent/constants.js';
+import '../../Collapse/CollapseItem/CollapseItem.js';
+import '../../SVGIcons/IconChevronRight.js';
+import '../../Divider/Divider.js';
+import '../../../helperComponents/AnimatePresenceWrapper/AnimatePresenceWrapper.js';
+import '../../SVGIcons/IconChevronDown.js';
+import '../SharedComponents/Actions.js';
+import '../../Button/Button.js';
+import '../../../helperComponents/Loader/Loader.js';
+import '../../Button/consts.js';
+import '../../Menu/Menu.js';
+import '../../../helperComponents/OptionItem/OptionItem.js';
+import '../../Avatar/Avatar.js';
+import '../../FileUpload/FileUpload.js';
+import '../../FileUpload/types.js';
+import '../../../helperComponents/Label/Label.js';
+import '../../FileUpload/UploadItems.js';
+import '../../../hooks/useFormProps.js';
+import '../../../context/types.js';
+import '../../../helperComponents/ErrorMessage/ErrorMessage.js';
+import '../../SVGIcons/IconDelete.js';
+import '../../SVGIcons/IconEditFilled.js';
+import '../../SVGIcons/IconEdit.js';
+import '../../SVGIcons/IconAttach.js';
+import '../../Tooltip/Tooltip.js';
+import '../../SVGIcons/IconCheckmark.js';
+import '../../SVGIcons/IconMore.js';
+import '../../SVGIcons/IconDismissFilled.js';
+import '../../SVGIcons/IconSearchFilled.js';
+import '../../SVGIcons/IconSelectAllOff.js';
+import 'react-input-mask';
+import 'react-number-format';
+import '../../SVGIcons/IconCheckmarkCircleFilled.js';
+import '../../SVGIcons/IconDismissCircle.js';
+import '../../SVGIcons/IconDismissCircleFilled.js';
+import '../../SVGIcons/IconEyeOff.js';
+import '../../SVGIcons/IconEyeOn.js';
+import '../../Empty/Empty.js';
+import '../../Image/Image.js';
+import '../../SVGIcons/IconCaretDownFilled.js';
+import '../../SVGIcons/IconCaretUpFilled.js';
+import '../../Tab/Tab.js';
+import '../../Tab/TabItem.js';
+import '../../Badge/Badge.js';
+import '../../Badge/consts.js';
+import '../../Tab/consts.js';
+
+var _excluded = ["isLoading", "withTabs", "isGrouped", "isOpen", "translations", "containerRef", "options", "selectedValues", "setSelectedValues", "setIsOpen", "dropdownRef"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var OptionsWrapper = function OptionsWrapper(props) {
+  var isLoading = props.isLoading,
+    withTabs = props.withTabs,
+    isGrouped = props.isGrouped,
+    isOpen = props.isOpen,
+    translations = props.translations,
+    containerRef = props.containerRef,
+    options = props.options,
+    selectedValues = props.selectedValues,
+    setSelectedValues = props.setSelectedValues,
+    setIsOpen = props.setIsOpen,
+    dropdownRef = props.dropdownRef,
+    rest = _objectWithoutProperties(props, _excluded);
+  var _useGetElemSizes = useGetElemSizes(containerRef),
+    width = _useGetElemSizes.width;
+  var localizations = _objectSpread(_objectSpread({}, TRANSLATIONS_DEFAULT_VALUES), translations);
+  var inputRef = useRef(null);
+  var SelectComp = withTabs ? MultiSelectWithTabs : isGrouped ? MultiSelectGrouped : MultiBase;
+  var checkIsValueOverflowed = useCallback(function (value) {
+    var elemWidth = getStringWidth(value, 14);
+    return elemWidth > width - 80; // padding and width of (+number)
+  }, [width]);
+  var toggleDropdown = function toggleDropdown(e) {
+    var clickedElement = e === null || e === void 0 ? void 0 : e.target;
+    var className = clickedElement === null || clickedElement === void 0 ? void 0 : clickedElement.getAttribute('class');
+    if (e && className && (className.indexOf('icon-') !== -1 || className.indexOf('svg-icon') !== -1)) {
+      setIsOpen(!isOpen);
+      e.preventDefault();
+    } else {
+      setIsOpen(true);
+    }
+  };
+  var onItemSelect = function onItemSelect(item) {
+    setSelectedValues([].concat(_toConsumableArray(selectedValues), [item]));
+  };
+  var onItemDeselect = function onItemDeselect(item) {
+    setSelectedValues(selectedValues.filter(function (optionValue) {
+      return optionValue.value !== item.value;
+    }));
+  };
+  var optionsCount = useMemo(function () {
+    if (isGrouped || withTabs) {
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      var typed_options = options;
+      return typed_options.reduce(function (acc, option) {
+        var data = option.data;
+        return acc + data.length;
+      }, 0);
+    }
+    return options.length;
+  }, [options]);
+  var _useGetHasBottomSpace = useGetHasBottomSpace({
+      element: dropdownRef,
+      input: inputRef.current
+    }),
+    hasBottomSpace = _useGetHasBottomSpace.hasBottomSpace,
+    bottomSpace = _useGetHasBottomSpace.bottomSpace;
+  var hasTopSpace = useGetHasTopSpace({
+    element: dropdownRef,
+    input: inputRef.current
+  });
+  if (isLoading) {
+    return /*#__PURE__*/React.createElement(Loading, null);
+  }
+  return /*#__PURE__*/React.createElement(SelectComp
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  , _extends({
+    options: options,
+    isOpen: isOpen,
+    hasBottomSpace: hasBottomSpace,
+    translations: localizations,
+    selectedValues: selectedValues,
+    onItemSelect: onItemSelect,
+    onItemDeselect: onItemDeselect,
+    toggleDropdown: toggleDropdown,
+    setSelectedValues: setSelectedValues,
+    checkIsValueOverflowed: checkIsValueOverflowed,
+    isSearchAvailable: optionsCount > SELECTED_VISIBLE_MIN_COUNT,
+    scrollableContentStyle: _objectSpread({}, !hasBottomSpace && !hasTopSpace ? {
+      maxHeight: bottomSpace - 65 - 56
+    } : {}) // 65 - height of the top content, 56 - height of the footer
+  }, rest));
+};
+
+export { OptionsWrapper };

package/components/Select/NestedSelect/NestedSelect.d.ts

@@ -0,0 +1,3 @@
+import type { JSX } from 'react';
+import type { TNestedSelectProps } from '../types';
+export declare const NestedSelect: (props: TNestedSelectProps) => JSX.Element | null;

package/components/Select/NestedSelect/NestedSelect.js

@@ -0,0 +1,190 @@
+import { _ as _toConsumableArray } from '../../../toConsumableArray-e0031ed3.js';
+import { _ as _slicedToArray } from '../../../slicedToArray-0c706912.js';
+import React, { useState, useRef, useId, useCallback } from 'react';
+import { Input } from '../../Input/Input.js';
+import '../../Input/InputPassword.js';
+import 'classnames';
+import 'dayjs';
+import { OptionItem } from '../../../helperComponents/OptionItem/OptionItem.js';
+import 'react-syntax-highlighter';
+import { useGetElemSizes } from '../../../hooks/useGetElemSizes.js';
+import { useGetElemPositions } from '../../../hooks/useGetElemPositions.js';
+import { useOnOutsideClick } from '../../../hooks/useOnOutsideClick.js';
+import '../../../hooks/useScreenSize.js';
+import 'react-hook-form';
+import { IconCaretUpFilled } from '../../SVGIcons/IconCaretUpFilled.js';
+import { IconCaretDownFilled } from '../../SVGIcons/IconCaretDownFilled.js';
+import '../../../defineProperty-7db32082.js';
+import '../../../typeof-ecd92d7f.js';
+import '../../../extends-e8ef956f.js';
+import '../../../objectWithoutProperties-fcd64cc7.js';
+import 'react-input-mask';
+import 'react-number-format';
+import '../../../helperComponents/Label/Label.js';
+import '../../Text/Text.js';
+import '../../../utils/helpers.js';
+import '../../../helperComponents/ErrorMessage/ErrorMessage.js';
+import '../../../helperComponents/IconDynamicComponent/IconDynamicComponent.js';
+import '../../../helperComponents/IconDynamicComponent/constants.js';
+import '../../Checkbox/Checkbox.js';
+import '../../Popover/Popover.js';
+import '../../../hooks/useGetTooltipStyles.js';
+import '../../../hooks/useGetTooltipPosition.js';
+import '../../Tooltip/types.js';
+import '../../../hooks/useHideOnScroll.js';
+import '../../../consts/index.js';
+import '../../Link/Link.js';
+import '../../SVGIcons/IconInfo.js';
+import '../../SVGIcons/IconCheckmarkCircleFilled.js';
+import '../../SVGIcons/IconDismissCircle.js';
+import '../../SVGIcons/IconDismissCircleFilled.js';
+import '../../SVGIcons/IconEyeOff.js';
+import '../../SVGIcons/IconEyeOn.js';
+import '../../Divider/Divider.js';
+import '../../Tooltip/Tooltip.js';
+import '../../Avatar/Avatar.js';
+import '../../FileUpload/FileUpload.js';
+import '../../FileUpload/types.js';
+import '../../Button/Button.js';
+import '../../../helperComponents/Loader/Loader.js';
+import '../../Button/consts.js';
+import '../../FileUpload/UploadItems.js';
+import '../../../hooks/useFormProps.js';
+import '../../../context/types.js';
+import '../../SVGIcons/IconDelete.js';
+import '../../SVGIcons/IconEditFilled.js';
+import '../../SVGIcons/IconEdit.js';
+import '../../SVGIcons/IconAttach.js';
+import '../../SVGIcons/IconCheckmark.js';
+
+var LEVEL_LEFT_MARGIN = 10;
+var NestedSelect = function NestedSelect(props) {
+  var label = props.label,
+    avatar = props.avatar,
+    options = props.options,
+    selected = props.selected,
+    placeHolder = props.placeHolder,
+    isRequiredField = props.isRequiredField,
+    setSelectedValue = props.setSelectedValue,
+    initialSelectedFolderIds = props.initialSelectedFolderIds,
+    optionRightIconComponent = props.optionRightIconComponent,
+    labelRightIconComponent = props.labelRightIconComponent,
+    labelAddons = props.labelAddons;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isDropdownOpen = _useState2[0],
+    setIsOpen = _useState2[1];
+  var _useState3 = useState(null),
+    _useState4 = _slicedToArray(_useState3, 2),
+    containerRef = _useState4[0],
+    setContainerRef = _useState4[1];
+  var _useState5 = useState(initialSelectedFolderIds || []),
+    _useState6 = _slicedToArray(_useState5, 2),
+    selectedValues = _useState6[0],
+    setSelectedValues = _useState6[1];
+  var inputRef = useRef(null);
+  var _useGetElemPositions = useGetElemPositions(inputRef.current),
+    bottom = _useGetElemPositions.bottom,
+    left = _useGetElemPositions.left;
+  var _useGetElemSizes = useGetElemSizes(containerRef),
+    width = _useGetElemSizes.width;
+  var openDropdown = function openDropdown() {
+    return setIsOpen(true);
+  };
+  var closeDropdown = function closeDropdown() {
+    return setIsOpen(false);
+  };
+  var toggleDropdown = function toggleDropdown(e) {
+    var clickedElement = e === null || e === void 0 ? void 0 : e.target;
+    if (e && clickedElement.className && clickedElement.className.indexOf('icon-') !== -1) {
+      setIsOpen(!isDropdownOpen);
+      e.preventDefault();
+    } else {
+      openDropdown();
+    }
+  };
+  useOnOutsideClick(containerRef, closeDropdown, isDropdownOpen, useId());
+  var onSelect = useCallback(function (option, hasChildren) {
+    var optionValue = option.value;
+    if (!hasChildren) {
+      setSelectedValue(optionValue === (selected === null || selected === void 0 ? void 0 : selected.value) ? null : option);
+      return;
+    }
+    var isSelected = selectedValues.findIndex(function (i) {
+      return i === optionValue;
+    }) !== -1;
+    if (isSelected) {
+      setSelectedValues(selectedValues.filter(function (i) {
+        return i !== optionValue;
+      }));
+    } else {
+      setSelectedValues([].concat(_toConsumableArray(selectedValues), [optionValue]));
+    }
+  }, [selected, selectedValues]);
+  var _generateFolders = function generateFolders(foldersArr, level) {
+    return foldersArr.reduce(function (acc, option) {
+      var value = option.value,
+        children = option.children,
+        disabled = option.disabled;
+      var isOpen = selectedValues.indexOf(option.value) !== -1;
+      var isSelected = option.value === (selected === null || selected === void 0 ? void 0 : selected.value);
+      acc.push(/*#__PURE__*/React.createElement("div", {
+        style: {
+          paddingLeft: LEVEL_LEFT_MARGIN * level
+        }
+      }, /*#__PURE__*/React.createElement(OptionItem, {
+        data: option,
+        key: value,
+        isSelected: isSelected,
+        onClick: function onClick() {
+          return onSelect({
+            value: value,
+            label: option.label
+          }, !!children);
+        },
+        avatar: avatar,
+        disabled: disabled,
+        OptionRightIconComponent: optionRightIconComponent,
+        LabelRightIconComponent: labelRightIconComponent,
+        labelLeftIconProps: children ? {
+          Component: IconCaretDownFilled,
+          size: 'xxsmall'
+        } : undefined
+      })));
+      if (isOpen && children) {
+        acc.push.apply(acc, _toConsumableArray(_generateFolders(children, level + 1)));
+      }
+      return acc;
+    }, []);
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: "select select--multi",
+    ref: setContainerRef
+  }, /*#__PURE__*/React.createElement("div", {
+    onClick: toggleDropdown
+  }, /*#__PURE__*/React.createElement(Input, {
+    ref: inputRef,
+    className: "select__input",
+    label: label,
+    required: isRequiredField,
+    rightIconProps: {
+      Component: isDropdownOpen ? IconCaretUpFilled : IconCaretDownFilled,
+      size: 'xsmall'
+    },
+    placeholder: placeHolder,
+    currentValue: (selected === null || selected === void 0 ? void 0 : selected.label.toString()) || '',
+    readonly: true,
+    labelAddons: labelAddons
+  })), isDropdownOpen && /*#__PURE__*/React.createElement("div", {
+    className: "select__options",
+    style: {
+      left: left,
+      width: width,
+      top: bottom
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "select__options__scroll scrollbar scrollbar--vertical"
+  }, _generateFolders(options, 0))));
+};
+
+export { NestedSelect };

package/components/Select/ProfileDropdown/index.d.ts

@@ -0,0 +1,4 @@
+import type { JSX } from 'react';
+import type { TProfileDropdownProps } from '../types';
+import './styles.scss';
+export declare const ProfileDropdown: (props: TProfileDropdownProps) => JSX.Element;