ab-ui-library 1.8.0 → 1.10.0

package/components/SVGIcons/IconBuildingHome.d.ts

@@ -0,0 +1,4 @@
+import type { ReactElement } from 'react';
+import type { ISVGIconProps } from './types';
+export declare const IconBuildingHome: ({ size, type, className, onClick, refHandler, id, dataId }: ISVGIconProps) => ReactElement;
+export default IconBuildingHome;

package/components/SVGIcons/IconBuildingHome.js

@@ -0,0 +1,30 @@
+import { _ as _defineProperty } from '../../defineProperty-dd1f6104.js';
+import React from 'react';
+import classNames from 'classnames';
+import '../../typeof-02239c5f.js';
+
+var IconBuildingHome = function IconBuildingHome(_ref) {
+  var size = _ref.size,
+    type = _ref.type,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className,
+    onClick = _ref.onClick,
+    refHandler = _ref.refHandler,
+    id = _ref.id,
+    dataId = _ref.dataId;
+  return /*#__PURE__*/React.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    className: classNames('svg-icon', _defineProperty(_defineProperty(_defineProperty({}, "svg-icon__size-".concat(size), size), "svg-icon__type-".concat(type), type), className, className)),
+    viewBox: "0 0 24 24",
+    fill: "none",
+    onClick: onClick,
+    ref: refHandler,
+    id: id,
+    "data-id": dataId ? "".concat(dataId, "-svg-icon") : ''
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M3.75 3.5C3.61193 3.5 3.5 3.61193 3.5 3.75V16.25C3.5 16.3881 3.61193 16.5 3.75 16.5H9V18H3.75C2.7835 18 2 17.2165 2 16.25V3.75C2 2.7835 2.7835 2 3.75 2H9.25C10.2165 2 11 2.7835 11 3.75V6.75C11 6.88807 11.1119 7 11.25 7H12.25C13.2165 7 14 7.7835 14 8.75V8.82178L12.5 10.2218V8.75C12.5 8.61193 12.3881 8.5 12.25 8.5H11.25C10.2835 8.5 9.5 7.7165 9.5 6.75V3.75C9.5 3.61193 9.38807 3.5 9.25 3.5H3.75ZM6 5.75C6 6.16421 5.66421 6.5 5.25 6.5C4.83579 6.5 4.5 6.16421 4.5 5.75C4.5 5.33579 4.83579 5 5.25 5C5.66421 5 6 5.33579 6 5.75ZM5.25 9.5C5.66421 9.5 6 9.16421 6 8.75C6 8.33579 5.66421 8 5.25 8C4.83579 8 4.5 8.33579 4.5 8.75C4.5 9.16421 4.83579 9.5 5.25 9.5ZM6 11.75C6 12.1642 5.66421 12.5 5.25 12.5C4.83579 12.5 4.5 12.1642 4.5 11.75C4.5 11.3358 4.83579 11 5.25 11C5.66421 11 6 11.3358 6 11.75ZM7.75 6.5C8.16421 6.5 8.5 6.16421 8.5 5.75C8.5 5.33579 8.16421 5 7.75 5C7.33579 5 7 5.33579 7 5.75C7 6.16421 7.33579 6.5 7.75 6.5ZM8.5 8.75C8.5 9.16421 8.16421 9.5 7.75 9.5C7.33579 9.5 7 9.16421 7 8.75C7 8.33579 7.33579 8 7.75 8C8.16421 8 8.5 8.33579 8.5 8.75ZM7.75 12.5C8.16421 12.5 8.5 12.1642 8.5 11.75C8.5 11.3358 8.16421 11 7.75 11C7.33579 11 7 11.3358 7 11.75C7 12.1642 7.33579 12.5 7.75 12.5ZM17.1941 9.43855C16.5217 8.81101 15.4783 8.81101 14.8059 9.43855L10.5559 13.4052C10.2013 13.7362 10 14.1995 10 14.6846V20.5C10 21.3284 10.6716 22 11.5 22H13.5C14.3284 22 15 21.3284 15 20.5V18.0004H17V20.5C17 21.3284 17.6716 22 18.5 22H20.5C21.3284 22 22 21.3284 22 20.5V14.6846C22 14.1995 21.7987 13.7362 21.4441 13.4052L17.1941 9.43855ZM15.8294 10.5351C15.9255 10.4455 16.0745 10.4455 16.1706 10.5351L20.4206 14.5018C20.4712 14.5491 20.5 14.6153 20.5 14.6846V20.5H18.5V18.0004C18.5 17.172 17.8284 16.5004 17 16.5004H15C14.1716 16.5004 13.5 17.172 13.5 18.0004V20.5H11.5V14.6846C11.5 14.6153 11.5288 14.5491 11.5794 14.5018L15.8294 10.5351Z",
+    fill: "#222222"
+  }));
+};
+
+export { IconBuildingHome, IconBuildingHome as default };

package/components/SVGIcons/IconBuildingHomeFilled.d.ts

@@ -0,0 +1,4 @@
+import type { ReactElement } from 'react';
+import type { ISVGIconProps } from './types';
+export declare const IconBuildingHomeFilled: ({ size, type, className, onClick, refHandler, id, dataId }: ISVGIconProps) => ReactElement;
+export default IconBuildingHomeFilled;

package/components/SVGIcons/IconBuildingHomeFilled.js

@@ -0,0 +1,30 @@
+import { _ as _defineProperty } from '../../defineProperty-dd1f6104.js';
+import React from 'react';
+import classNames from 'classnames';
+import '../../typeof-02239c5f.js';
+
+var IconBuildingHomeFilled = function IconBuildingHomeFilled(_ref) {
+  var size = _ref.size,
+    type = _ref.type,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className,
+    onClick = _ref.onClick,
+    refHandler = _ref.refHandler,
+    id = _ref.id,
+    dataId = _ref.dataId;
+  return /*#__PURE__*/React.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    className: classNames('svg-icon', _defineProperty(_defineProperty(_defineProperty({}, "svg-icon__size-".concat(size), size), "svg-icon__type-".concat(type), type), className, className)),
+    viewBox: "0 0 24 24",
+    fill: "none",
+    onClick: onClick,
+    ref: refHandler,
+    id: id,
+    "data-id": dataId ? "".concat(dataId, "-svg-icon") : ''
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M3.5 2C2.67157 2 2 2.67157 2 3.5V16.5C2 17.3284 2.67157 18 3.5 18H9V14.6835C9 13.9212 9.31638 13.1932 9.87362 12.6731L14 8.82178V8.5C14 7.67157 13.3284 7 12.5 7H11V3.5C11 2.67157 10.3284 2 9.5 2H3.5ZM6 5.75C6 6.16421 5.66421 6.5 5.25 6.5C4.83579 6.5 4.5 6.16421 4.5 5.75C4.5 5.33579 4.83579 5 5.25 5C5.66421 5 6 5.33579 6 5.75ZM5.25 9.5C4.83579 9.5 4.5 9.16421 4.5 8.75C4.5 8.33579 4.83579 8 5.25 8C5.66421 8 6 8.33579 6 8.75C6 9.16421 5.66421 9.5 5.25 9.5ZM6 11.75C6 12.1642 5.66421 12.5 5.25 12.5C4.83579 12.5 4.5 12.1642 4.5 11.75C4.5 11.3358 4.83579 11 5.25 11C5.66421 11 6 11.3358 6 11.75ZM7.75 6.5C7.33579 6.5 7 6.16421 7 5.75C7 5.33579 7.33579 5 7.75 5C8.16421 5 8.5 5.33579 8.5 5.75C8.5 6.16421 8.16421 6.5 7.75 6.5ZM8.5 8.75C8.5 9.16421 8.16421 9.5 7.75 9.5C7.33579 9.5 7 9.16421 7 8.75C7 8.33579 7.33579 8 7.75 8C8.16421 8 8.5 8.33579 8.5 8.75ZM7.75 12.5C7.33579 12.5 7 12.1642 7 11.75C7 11.3358 7.33579 11 7.75 11C8.16421 11 8.5 11.3358 8.5 11.75C8.5 12.1642 8.16421 12.5 7.75 12.5ZM17.1941 9.43855C16.5217 8.81101 15.4783 8.81101 14.8059 9.43855L10.5559 13.4052C10.2013 13.7362 10 14.1995 10 14.6846V20.5C10 21.3284 10.6716 22 11.5 22H13.5C14.3284 22 15 21.3284 15 20.5V18.0004H17V20.5C17 21.3284 17.6716 22 18.5 22H20.5C21.3284 22 22 21.3284 22 20.5V14.6846C22 14.1995 21.7987 13.7362 21.4441 13.4052L17.1941 9.43855ZM15.8294 10.5351C15.9255 10.4455 16.0745 10.4455 16.1706 10.5351L20.4206 14.5018C20.4712 14.5491 20.5 14.6153 20.5 14.6846V20.5H18.5V18.0004C18.5 17.172 17.8284 16.5004 17 16.5004H15C14.1716 16.5004 13.5 17.172 13.5 18.0004V20.5H11.5V14.6846C11.5 14.6153 11.5288 14.5491 11.5794 14.5018L15.8294 10.5351ZM9.25 2H3.75H9.25Z",
+    fill: "#222222"
+  }));
+};
+
+export { IconBuildingHomeFilled, IconBuildingHomeFilled as default };

package/components/SVGIcons/index.d.ts

@@ -70,6 +70,8 @@ export * from './IconBuilding';
 export * from './IconBuildingBank';
 export * from './IconBuildingBankFilled';
 export * from './IconBuildingFilled';
+export * from './IconBuildingHome';
+export * from './IconBuildingHomeFilled';
 export * from './IconBuildingShop';
 export * from './IconBuildingShopFilled';
 export * from './IconBulletListAdd';

package/components/SVGIcons/index.js

@@ -70,6 +70,8 @@ export { IconBuilding } from './IconBuilding.js';
 export { IconBuildingBank } from './IconBuildingBank.js';
 export { IconBuildingBankFilled } from './IconBuildingBankFilled.js';
 export { IconBuildingFilled } from './IconBuildingFilled.js';
+export { IconBuildingHome } from './IconBuildingHome.js';
+export { IconBuildingHomeFilled } from './IconBuildingHomeFilled.js';
 export { IconBuildingShop } from './IconBuildingShop.js';
 export { IconBuildingShopFilled } from './IconBuildingShopFilled.js';
 export { IconBulletListAdd } from './IconBulletListAdd.js';

package/components/Select/MultiSelect/MultiSelect.js

@@ -70,6 +70,7 @@ import '../../SVGIcons/IconAttach.js';
 import '../../SVGIcons/IconCheckmark.js';
 import '../../SVGIcons/IconCaretDownFilled.js';
 import '../../SVGIcons/IconCaretUpFilled.js';
+import './MultiSelectTree/MultiSelectTree.js';
 import './MultiBase/MultiBase.js';
 import '../../Collapse/CollapseItem/CollapseItem.js';
 import '../../../helperComponents/AnimatePresenceWrapper/AnimatePresenceWrapper.js';

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

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

package/components/Select/MultiSelect/MultiSelectTree/MultiSelectTree.js

@@ -0,0 +1,252 @@
+import { _ as _extends } from '../../../../extends-bf54b05e.js';
+import { _ as _defineProperty } from '../../../../defineProperty-dd1f6104.js';
+import { _ as _toConsumableArray } from '../../../../toConsumableArray-5ef8a63e.js';
+import { _ as _slicedToArray } from '../../../../slicedToArray-356787eb.js';
+import React, { useState, useMemo } from 'react';
+import { Text } from '../../../Text/Text.js';
+import { Empty } from '../../../Empty/Empty.js';
+import { OptionItem } from '../../../../helperComponents/OptionItem/OptionItem.js';
+import 'react-syntax-highlighter';
+import 'classnames';
+import { Checkbox } from '../../../Checkbox/Checkbox.js';
+import 'react-dom';
+import 'dayjs';
+import '../../../../hooks/useScreenSize.js';
+import 'react-hook-form';
+import 'framer-motion';
+import '../../../Collapse/CollapseGroup/CollapseGroup.js';
+import { ContentTop } from '../../SharedComponents/ContentTop.js';
+import '../../../Input/Input.js';
+import '../../../Input/InputPassword.js';
+import { IconCaretDownFilled } from '../../../SVGIcons/IconCaretDownFilled.js';
+import { IconCaretUpFilled } from '../../../SVGIcons/IconCaretUpFilled.js';
+import '../../../../typeof-02239c5f.js';
+import '../../../../utils/helpers.js';
+import '../../../Image/Image.js';
+import '../../../Button/Button.js';
+import '../../../../objectWithoutProperties-1a9e6a07.js';
+import '../../../../helperComponents/Loader/Loader.js';
+import '../../../Button/consts.js';
+import '../../../Popover/Popover.js';
+import '../../../../hooks/useGetTooltipStyles.js';
+import '../../../../hooks/useGetElemSizes.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 '../../../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 '../../../../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';
+import '../../../Divider/Divider.js';
+
+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 MultiSelectTree = function MultiSelectTree(props) {
+  var avatar = props.avatar,
+    options = props.options,
+    helperText = props.helperText,
+    translations = props.translations,
+    selectedValues = props.selectedValues,
+    onItemSelect = props.onItemSelect,
+    onItemDeselect = props.onItemDeselect,
+    setSelectedValues = props.setSelectedValues,
+    isSearchAvailable = props.isSearchAvailable,
+    labelLeftIconProps = props.labelLeftIconProps,
+    scrollableContentStyle = props.scrollableContentStyle,
+    optionRightIconComponent = props.optionRightIconComponent,
+    labelRightIconComponent = props.labelRightIconComponent,
+    maxSelectCount = props.maxSelectCount,
+    menuOptions = props.menuOptions,
+    dataIdPrefix = props.dataIdPrefix;
+  var emptyListMainMessage = translations.emptyListMainMessage,
+    emptyListSecondaryMessage = translations.emptyListSecondaryMessage;
+  var _useState = useState(''),
+    _useState2 = _slicedToArray(_useState, 2),
+    searchValue = _useState2[0],
+    setSearchValue = _useState2[1];
+  var _useState3 = useState({
+      0: true
+    }),
+    _useState4 = _slicedToArray(_useState3, 2),
+    openGroups = _useState4[0],
+    setOpenGroups = _useState4[1];
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    isAllSelected = _useState6[0],
+    setAllSelected = _useState6[1];
+  var filteredData = useMemo(function () {
+    if (!searchValue) {
+      return options;
+    }
+    return options.reduce(function (acc, group) {
+      var data = group.data,
+        title = group.title;
+      var groupData = data.filter(function (dataItem) {
+        return typeof dataItem.label === 'string' && dataItem.label.toLocaleLowerCase().includes(searchValue.toLocaleLowerCase());
+      });
+      if (groupData.length) {
+        return [].concat(_toConsumableArray(acc), [{
+          title: title,
+          data: groupData
+        }]);
+      }
+      return acc;
+    }, []);
+  }, [searchValue, options]);
+  var onDeselect = function onDeselect(item) {
+    setAllSelected(false);
+    onItemDeselect(item);
+  };
+  var onGroupClick = function onGroupClick(index) {
+    setOpenGroups(function (prev) {
+      return _objectSpread(_objectSpread({}, prev), {}, _defineProperty({}, index, !prev[index]));
+    });
+  };
+  var optionProps = useMemo(function () {
+    return {
+      isCheckbox: true,
+      avatar: avatar,
+      labelLeftIconProps: labelLeftIconProps,
+      optionRightIconComponent: optionRightIconComponent,
+      labelRightIconComponent: labelRightIconComponent,
+      className: 'group-item__option'
+    };
+  }, [avatar, labelLeftIconProps, optionRightIconComponent, labelRightIconComponent]);
+  var hasTopContent = isSearchAvailable || helperText;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, hasTopContent ? /*#__PURE__*/React.createElement(ContentTop, {
+    dataIdPrefix: dataIdPrefix,
+    menuOptions: menuOptions,
+    isSearchAvailable: isSearchAvailable,
+    hasLimitation: !!maxSelectCount,
+    isAnySelected: selectedValues.length !== 0,
+    helperText: helperText,
+    isSelectAllDisabled: isAllSelected || filteredData.length === 0,
+    setSearchValue: setSearchValue,
+    searchValue: searchValue,
+    translations: translations
+  }) : null, /*#__PURE__*/React.createElement("div", {
+    className: 'select__options__scroll scrollbar scrollbar--vertical',
+    style: scrollableContentStyle
+  }, /*#__PURE__*/React.createElement("div", null, filteredData.map(function (_ref, index) {
+    var _data$;
+    var title = _ref.title,
+      data = _ref.data;
+    var isActive = !!openGroups[index];
+    var groupHasSelected = data.some(function (item) {
+      return selectedValues.find(function (s) {
+        return s.value === item.value;
+      });
+    });
+    var handleGroupCheckboxChange = function handleGroupCheckboxChange(checked) {
+      var groupValues = data.filter(function (item) {
+        return !item.disabled;
+      }).map(function (item) {
+        return {
+          value: item.value,
+          label: item.label,
+          parentId: item.parentId
+        };
+      });
+      if (checked) {
+        var newSelected = _toConsumableArray(selectedValues);
+        groupValues.forEach(function (item) {
+          if (!newSelected.find(function (s) {
+            return s.value === item.value;
+          })) {
+            newSelected.push(item);
+          }
+        });
+        setSelectedValues(newSelected);
+      } else {
+        var _newSelected = selectedValues.filter(function (s) {
+          return !data.find(function (item) {
+            return item.value === s.value;
+          });
+        });
+        setSelectedValues(_newSelected);
+      }
+    };
+    return /*#__PURE__*/React.createElement("div", {
+      className: "select__group group-item",
+      key: "".concat((_data$ = data[0]) === null || _data$ === void 0 ? void 0 : _data$.value, "_").concat(index)
+    }, /*#__PURE__*/React.createElement("div", {
+      onClick: function onClick() {
+        return onGroupClick(index);
+      },
+      className: "group-item__top"
+    }, /*#__PURE__*/React.createElement(Checkbox, {
+      className: "mr-8",
+      onClick: function onClick(checked) {
+        handleGroupCheckboxChange(checked);
+      },
+      selectedValue: groupHasSelected
+    }), /*#__PURE__*/React.createElement(Text, {
+      size: "xxsmall",
+      type: "tertiary",
+      className: "group-item__title pr-4"
+    }, title), isActive ? /*#__PURE__*/React.createElement(IconCaretUpFilled, {
+      size: "xxsmall",
+      className: "group-item__icon"
+    }) : /*#__PURE__*/React.createElement(IconCaretDownFilled, {
+      size: "xxsmall",
+      className: "group-item__icon"
+    })), isActive && data.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,
+        isSelected: isSelected,
+        disabled: item.disabled || !isSelected && selectedValues.length === maxSelectCount
+        // onClick={isSelected ? onDeselect : onItemSelect}
+        ,
+        onClick: isSelected ? function () {
+          return onDeselect(item);
+        } : function () {
+          return onItemSelect(item);
+        }
+      }, optionProps));
+    }));
+  }))), filteredData.length === 0 ? /*#__PURE__*/React.createElement(Empty, {
+    size: "small",
+    mainMessage: emptyListMainMessage,
+    paragraphMessage: emptyListSecondaryMessage
+  }) : null);
+};
+
+export { MultiSelectTree };

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

@@ -4,6 +4,7 @@ type TProps = {
     isLoading?: boolean;
     withTabs?: boolean;
     isGrouped?: boolean;
+    isMultiSelectTree?: boolean;
     isOpen: boolean;
     translations: TSelectTranslations;
     containerRef: HTMLDivElement | null;

package/components/Select/MultiSelect/OptionsWrapper.js

@@ -19,6 +19,7 @@ import { Loading } from '../SharedComponents/Loading.js';
 import '../../Input/Input.js';
 import '../../Input/InputPassword.js';
 import { MultiSelectGrouped } from './MultiSelectGrouped/MultiSelectGrouped.js';
+import { MultiSelectTree } from './MultiSelectTree/MultiSelectTree.js';
 import { MultiBase } from './MultiBase/MultiBase.js';
 import { MultiSelectWithTabs } from './MultiSelectWithTabs/MultiSelectWithTabs.js';
 import { TRANSLATIONS_DEFAULT_VALUES, SELECTED_VISIBLE_MIN_COUNT } from '../constants.js';
@@ -83,13 +84,14 @@ 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"];
+var _excluded = ["isLoading", "withTabs", "isGrouped", "isMultiSelectTree", "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,
+    isMultiSelectTree = props.isMultiSelectTree,
     isOpen = props.isOpen,
     translations = props.translations,
     containerRef = props.containerRef,
@@ -103,7 +105,7 @@ var OptionsWrapper = function OptionsWrapper(props) {
     width = _useGetElemSizes.width;
   var localizations = _objectSpread(_objectSpread({}, TRANSLATIONS_DEFAULT_VALUES), translations);
   var inputRef = useRef(null);
-  var SelectComp = withTabs ? MultiSelectWithTabs : isGrouped ? MultiSelectGrouped : MultiBase;
+  var SelectComp = isMultiSelectTree ? MultiSelectTree : withTabs ? MultiSelectWithTabs : isGrouped ? MultiSelectGrouped : MultiBase;
   var checkIsValueOverflowed = useCallback(function (value) {
     var elemWidth = getStringWidth(value, 14);
     return elemWidth > width - 80; // padding and width of (+number)
@@ -169,6 +171,8 @@ var OptionsWrapper = function OptionsWrapper(props) {
     scrollableContentStyle: _objectSpread({}, !hasBottomSpace && !hasTopSpace ? {
       maxHeight: bottomSpace - 65 - 56
     } : {}) // 65 - height of the top content, 56 - height of the footer
+    ,
+    isMultiSelectTree: isMultiSelectTree
   }, rest));
 };
 

package/components/Select/index.js

@@ -82,6 +82,7 @@ import './MultiSelect/MultiSelectGrouped/MultiSelectGrouped.js';
 import '../Empty/Empty.js';
 import '../Image/Image.js';
 import './constants.js';
+import './MultiSelect/MultiSelectTree/MultiSelectTree.js';
 import './MultiSelect/MultiBase/MultiBase.js';
 import './MultiSelect/MultiSelectWithTabs/MultiSelectWithTabs.js';
 import '../Tab/Tab.js';

package/components/Select/types.d.ts

@@ -60,6 +60,7 @@ interface TMultiSelectCompProps extends IFormCompProps, TSelectBaseProps {
     onItemSelect: (item: TSelectedValue) => void;
     onItemDeselect: (item: TSelectedValue) => void;
     menuOptions?: TMenuItem[];
+    isMultiSelectTree?: boolean;
 }
 export interface TMultySingleTabPropTypes extends TMultiSelectCompProps {
     options: TSelectOptions;
@@ -67,6 +68,9 @@ export interface TMultySingleTabPropTypes extends TMultiSelectCompProps {
 export interface TMultiSelectGroupedProps extends TMultiSelectCompProps {
     options: TSelectGroupOptions;
 }
+export interface TMultiSelectTreeProps extends TMultiSelectCompProps {
+    options: TSelectTreeOptions;
+}
 export type TCheckboxInfo = {
     label: string;
     isChecked: boolean;
@@ -79,6 +83,7 @@ export interface TMultiSelectPropTypes extends IFormCompProps, TSelectBaseProps
     isSearchAvailable?: boolean;
     withTabs?: boolean;
     isGrouped?: boolean;
+    isMultiSelectTree?: boolean;
     checkboxInfo?: TCheckboxInfo;
     selectedItems?: TSelectedValue[];
     translations: TSelectTranslations;

package/index.js

@@ -136,6 +136,8 @@ export { IconBuilding } from './components/SVGIcons/IconBuilding.js';
 export { IconBuildingBank } from './components/SVGIcons/IconBuildingBank.js';
 export { IconBuildingBankFilled } from './components/SVGIcons/IconBuildingBankFilled.js';
 export { IconBuildingFilled } from './components/SVGIcons/IconBuildingFilled.js';
+export { IconBuildingHome } from './components/SVGIcons/IconBuildingHome.js';
+export { IconBuildingHomeFilled } from './components/SVGIcons/IconBuildingHomeFilled.js';
 export { IconBuildingShop } from './components/SVGIcons/IconBuildingShop.js';
 export { IconBuildingShopFilled } from './components/SVGIcons/IconBuildingShopFilled.js';
 export { IconBulletListAdd } from './components/SVGIcons/IconBulletListAdd.js';
@@ -500,6 +502,7 @@ import './components/ProgressStep/consts.js';
 import './components/Select/MultiSelect/OptionsWrapper.js';
 import './components/Select/MultiSelect/MultiSelectGrouped/MultiSelectGrouped.js';
 import './components/Select/constants.js';
+import './components/Select/MultiSelect/MultiSelectTree/MultiSelectTree.js';
 import './components/Select/MultiSelect/MultiBase/MultiBase.js';
 import './components/Select/MultiSelect/MultiSelectWithTabs/MultiSelectWithTabs.js';
 import './components/Tab/TabItem.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ab-ui-library",
-  "version": "1.8.0",
+  "version": "1.10.0",
   "description": "UI library for AM",
   "main": "./index.js",
   "module": "./index.js",