ab-ui-library 1.0.1

package/components/Select/SharedComponents/ButtonSelectWrapper/ButtonSelectWrapper.js

@@ -0,0 +1,102 @@
+import { _ as _defineProperty } from '../../../../defineProperty-7db32082.js';
+import React, { useRef, useMemo } from 'react';
+import classNames from 'classnames';
+import { Button } from './Button/Button.js';
+import { useGetElemSizes } from '../../../../hooks/useGetElemSizes.js';
+import { useGetElemPositions } from '../../../../hooks/useGetElemPositions.js';
+import { DROPDOWN_AND_INPUT_GAP } from '../../../../consts/index.js';
+import { noop } from '../../../../utils/helpers.js';
+import '../../../../hooks/useScreenSize.js';
+import { useGetHasBottomSpace, useGetHasTopSpace } from '../../../../hooks/useGetHasBottomSpace.js';
+import 'react-hook-form';
+import { useChangePositionsOnScroll } from '../../../../hooks/useChangePositionsOnScroll.js';
+import '../../../../typeof-ecd92d7f.js';
+import '../../../Text/Text.js';
+import 'dayjs';
+import '../../../SVGIcons/IconCaretDownFilled.js';
+import '../../../SVGIcons/IconCaretUpFilled.js';
+import '../../../../slicedToArray-0c706912.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 ButtonSelectWrapper = function ButtonSelectWrapper(props) {
+  var children = props.children,
+    size = props.size,
+    className = props.className,
+    dropdownWidth = props.dropdownWidth,
+    _props$align = props.align,
+    align = _props$align === void 0 ? 'left' : _props$align,
+    offsets = props.offsets,
+    isOpen = props.isOpen,
+    setIsOpen = props.setIsOpen,
+    containerRef = props.containerRef,
+    setContainerRef = props.setContainerRef,
+    dropdownRef = props.dropdownRef,
+    setDropdownRef = props.setDropdownRef,
+    selectedValues = props.selectedValues,
+    placeHolder = props.placeHolder,
+    dataId = props.dataId,
+    disabled = props.disabled,
+    _props$type = props.type,
+    type = _props$type === void 0 ? 'secondary' : _props$type;
+  var buttonRef = useRef(null);
+  var changeOpenState = function changeOpenState() {
+    return setIsOpen(!isOpen);
+  };
+  var _useGetElemPositions = useGetElemPositions(buttonRef.current),
+    bottom = _useGetElemPositions.bottom,
+    left = _useGetElemPositions.left,
+    top = _useGetElemPositions.top,
+    right = _useGetElemPositions.right;
+  var _useGetElemSizes = useGetElemSizes(containerRef),
+    containerWidth = _useGetElemSizes.width;
+  var _useGetHasBottomSpace = useGetHasBottomSpace({
+      element: dropdownRef,
+      input: buttonRef.current
+    }),
+    hasBottomSpace = _useGetHasBottomSpace.hasBottomSpace;
+  var hasTopSpace = useGetHasTopSpace({
+    element: dropdownRef,
+    input: buttonRef.current
+  });
+  var selectedItemsLabels = useMemo(function () {
+    if (!selectedValues) return '';
+    if ((selectedValues === null || selectedValues === void 0 ? void 0 : selectedValues.length) === 0) return '';
+    if ((selectedValues === null || selectedValues === void 0 ? void 0 : selectedValues.length) === 1) return "".concat(selectedValues[0].label);
+    return " ".concat(selectedValues[0].label, " +").concat(selectedValues.length - 1);
+  }, [selectedValues]);
+  useChangePositionsOnScroll({
+    parentElement: buttonRef === null || buttonRef === void 0 ? void 0 : buttonRef.current,
+    childElement: dropdownRef,
+    hasBottomSpace: hasBottomSpace,
+    checkPositionsOnScroll: !(typeof (offsets === null || offsets === void 0 ? void 0 : offsets.top) === 'number')
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames("select select--".concat(size), className),
+    ref: setContainerRef
+  }, /*#__PURE__*/React.createElement(Button, {
+    size: size,
+    type: type,
+    dataId: dataId,
+    isOpen: isOpen,
+    buttonText: placeHolder || '',
+    selectedItemsLabels: selectedItemsLabels,
+    onClick: disabled ? noop : changeOpenState,
+    refHandler: buttonRef,
+    className: "select_button"
+  }), isOpen && /*#__PURE__*/React.createElement("div", {
+    className: "select__options",
+    style: _objectSpread({
+      left: align === 'left' ? (offsets === null || offsets === void 0 ? void 0 : offsets.left) || left : right - (dropdownWidth || containerWidth),
+      right: align === 'right' ? (offsets === null || offsets === void 0 ? void 0 : offsets.right) || left : right - (dropdownWidth || containerWidth),
+      width: dropdownWidth || containerWidth
+    }, hasBottomSpace || !hasTopSpace ? {
+      top: (offsets === null || offsets === void 0 ? void 0 : offsets.top) || bottom
+    } : {
+      bottom: window.innerHeight - top + DROPDOWN_AND_INPUT_GAP
+    }),
+    ref: setDropdownRef
+  }, children));
+};
+
+export { ButtonSelectWrapper };

package/components/Select/SharedComponents/ContentTop.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import type { TMenuItem } from '../../Menu/types';
+import type { TSelectTranslations } from '../types';
+type TProps = {
+    searchValue?: string;
+    helperText?: string;
+    selectAll?: TCallBackFn;
+    setSearchValue?: (value: string) => void;
+    clearAll?: TCallBackFn;
+    isSelectAllDisabled?: boolean;
+    isAnySelected?: boolean;
+    translations?: TSelectTranslations;
+    isSearchAvailable?: boolean;
+    hasLimitation?: boolean;
+    menuOptions?: TMenuItem[];
+    dataIdPrefix?: string;
+};
+export declare const ContentTop: React.NamedExoticComponent<TProps>;
+export {};

package/components/Select/SharedComponents/ContentTop.js

@@ -0,0 +1,158 @@
+import { _ as _toConsumableArray } from '../../../toConsumableArray-e0031ed3.js';
+import React, { useRef, useMemo, useEffect } from 'react';
+import { Text } from '../../Text/Text.js';
+import { Input } from '../../Input/Input.js';
+import '../../Input/InputPassword.js';
+import { Actions } from './Actions.js';
+import { IconDismissFilled } from '../../SVGIcons/IconDismissFilled.js';
+import { IconSearchFilled } from '../../SVGIcons/IconSearchFilled.js';
+import { IconSelectAllOff } from '../../SVGIcons/IconSelectAllOff.js';
+import '../../../slicedToArray-0c706912.js';
+import 'classnames';
+import '../../../utils/helpers.js';
+import 'dayjs';
+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 '../../../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/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 '../../../hooks/useScreenSize.js';
+import 'react-hook-form';
+import '../../Link/Link.js';
+import '../../SVGIcons/IconInfo.js';
+import 'react-syntax-highlighter';
+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 '../../Button/Button.js';
+import '../../../helperComponents/Loader/Loader.js';
+import '../../Button/consts.js';
+import '../../Menu/Menu.js';
+import 'react-dom';
+import '../../../helperComponents/OptionItem/OptionItem.js';
+import '../../Avatar/Avatar.js';
+import '../../FileUpload/FileUpload.js';
+import '../../FileUpload/types.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';
+import 'framer-motion';
+import '../../Collapse/CollapseGroup/CollapseGroup.js';
+import '../../Collapse/CollapseItem/CollapseItem.js';
+import '../../SVGIcons/IconChevronRight.js';
+import '../../../helperComponents/AnimatePresenceWrapper/AnimatePresenceWrapper.js';
+import '../../SVGIcons/IconChevronDown.js';
+import '../../SVGIcons/IconMore.js';
+
+var ContentTop = /*#__PURE__*/React.memo(function (props) {
+  var clearAll = props.clearAll,
+    selectAll = props.selectAll,
+    helperText = props.helperText,
+    searchValue = props.searchValue,
+    translations = props.translations,
+    isAnySelected = props.isAnySelected,
+    setSearchValue = props.setSearchValue,
+    _props$isSearchAvaila = props.isSearchAvailable,
+    isSearchAvailable = _props$isSearchAvaila === void 0 ? false : _props$isSearchAvaila,
+    _props$hasLimitation = props.hasLimitation,
+    hasLimitation = _props$hasLimitation === void 0 ? false : _props$hasLimitation,
+    _props$isSelectAllDis = props.isSelectAllDisabled,
+    isSelectAllDisabled = _props$isSelectAllDis === void 0 ? false : _props$isSelectAllDis,
+    _props$menuOptions = props.menuOptions,
+    menuOptions = _props$menuOptions === void 0 ? [] : _props$menuOptions,
+    dataIdPrefix = props.dataIdPrefix;
+  var inputRef = useRef(null);
+  var _ref = translations || {},
+    searchInputPlaceHolder = _ref.searchInputPlaceHolder,
+    innerLabel = _ref.innerLabel,
+    clearAllLabel = _ref.clearAllLabel,
+    selectAllLabel = _ref.selectAllLabel;
+  var selectActions = useMemo(function () {
+    var options = menuOptions;
+    if (selectAll && selectAllLabel && !hasLimitation) {
+      options = [{
+        label: selectAllLabel,
+        value: 1,
+        handler: selectAll,
+        disabled: isSelectAllDisabled,
+        iconProps: {
+          Component: IconSelectAllOff
+        },
+        dataId: dataIdPrefix ? "".concat(dataIdPrefix, "-select-all") : ''
+      }];
+    }
+    if (clearAll && clearAllLabel) {
+      options = [].concat(_toConsumableArray(options), [{
+        label: clearAllLabel,
+        value: 2,
+        handler: clearAll,
+        disabled: !isAnySelected,
+        iconProps: {
+          Component: IconDismissFilled
+        },
+        dataId: dataIdPrefix ? "".concat(dataIdPrefix, "-clear-all") : ''
+      }]);
+    }
+    return options;
+  }, [menuOptions, selectAllLabel, selectAll, clearAll, clearAllLabel, isSelectAllDisabled, isAnySelected, dataIdPrefix]);
+  var onSearch = function onSearch(e) {
+    setSearchValue && setSearchValue(e.target.value);
+  };
+  var removeFilter = function removeFilter() {
+    return setSearchValue && setSearchValue('');
+  };
+  useEffect(function () {
+    if (inputRef && inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, [inputRef]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "content-top"
+  }, helperText ? /*#__PURE__*/React.createElement(Text, {
+    size: "xsmall",
+    type: "secondary",
+    className: "content-top__label"
+  }, helperText) : null, isSearchAvailable && /*#__PURE__*/React.createElement(Input, {
+    ref: inputRef,
+    className: "content-top__search",
+    size: "small",
+    placeholder: searchInputPlaceHolder,
+    handleChange: onSearch,
+    currentValue: searchValue,
+    rightIconProps: {
+      Component: searchValue ? IconDismissFilled : IconSearchFilled,
+      size: searchValue ? 'xsmall' : 'small',
+      onClick: removeFilter
+    }
+  }), /*#__PURE__*/React.createElement(Actions, {
+    selectActions: selectActions,
+    innerLabel: innerLabel
+  }));
+});
+ContentTop.displayName = 'ContentTop';
+
+export { ContentTop };

package/components/Select/SharedComponents/Footer.d.ts

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

package/components/Select/SharedComponents/Footer.js

@@ -0,0 +1,67 @@
+import { _ as _extends } from '../../../extends-e8ef956f.js';
+import { _ as _slicedToArray } from '../../../slicedToArray-0c706912.js';
+import React from 'react';
+import { Button } from '../../Button/Button.js';
+import { Checkbox } from '../../Checkbox/Checkbox.js';
+import '../../../defineProperty-7db32082.js';
+import '../../../typeof-ecd92d7f.js';
+import '../../../objectWithoutProperties-fcd64cc7.js';
+import 'classnames';
+import 'dayjs';
+import '../../../helperComponents/Loader/Loader.js';
+import '../../../hooks/useScreenSize.js';
+import '../../../consts/index.js';
+import 'react-hook-form';
+import 'react-syntax-highlighter';
+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 '../../../hooks/useOnOutsideClick.js';
+import '../../Text/Text.js';
+import '../../../utils/helpers.js';
+import '../../Link/Link.js';
+import '../../SVGIcons/IconInfo.js';
+import '../../../helperComponents/IconDynamicComponent/IconDynamicComponent.js';
+import '../../../helperComponents/IconDynamicComponent/constants.js';
+
+var Footer = function Footer(props) {
+  var buttonProps = props.buttonProps,
+    onApply = props.onApply,
+    onCancel = props.onCancel,
+    _props$hasChange = props.hasChange,
+    hasChange = _props$hasChange === void 0 ? true : _props$hasChange,
+    checkboxInfo = props.checkboxInfo;
+  var _React$useState = React.useState((checkboxInfo === null || checkboxInfo === void 0 ? void 0 : checkboxInfo.isChecked) || false),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    isSelected = _React$useState2[0],
+    setIsSelected = _React$useState2[1];
+  return /*#__PURE__*/React.createElement("div", {
+    className: "select__footer"
+  }, /*#__PURE__*/React.createElement("div", null, checkboxInfo ? /*#__PURE__*/React.createElement(Checkbox, {
+    label: checkboxInfo.label,
+    selectedValue: isSelected,
+    onClick: setIsSelected
+  }) : null), /*#__PURE__*/React.createElement("div", {
+    className: 'select__footer__right flexbox'
+  }, /*#__PURE__*/React.createElement(Button, _extends({}, buttonProps.cancel || {}, {
+    type: "tertiary",
+    size: "medium",
+    className: "mr-12",
+    onClick: onCancel
+  })), /*#__PURE__*/React.createElement(Button, _extends({
+    disabled: !hasChange && isSelected === !!(checkboxInfo !== null && checkboxInfo !== void 0 && checkboxInfo.isChecked)
+  }, buttonProps.confirm, {
+    type: "primary",
+    size: "medium",
+    onClick: function onClick() {
+      return onApply(isSelected);
+    }
+  }))));
+};
+
+export { Footer };

package/components/Select/SharedComponents/InputSelectWrapper/InputSelectWrapper.d.ts

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

package/components/Select/SharedComponents/InputSelectWrapper/InputSelectWrapper.js

@@ -0,0 +1,154 @@
+import { _ as _defineProperty } from '../../../../defineProperty-7db32082.js';
+import React, { useRef, useCallback, useMemo } from 'react';
+import classNames from 'classnames';
+import { Input } from '../../../Input/Input.js';
+import '../../../Input/InputPassword.js';
+import { useGetElemSizes } from '../../../../hooks/useGetElemSizes.js';
+import { useGetElemPositions } from '../../../../hooks/useGetElemPositions.js';
+import { DROPDOWN_AND_INPUT_GAP } from '../../../../consts/index.js';
+import { getStringWidth, setTranslationValue, noop } from '../../../../utils/helpers.js';
+import '../../../../hooks/useScreenSize.js';
+import { useGetHasBottomSpace, useGetHasTopSpace } from '../../../../hooks/useGetHasBottomSpace.js';
+import 'react-hook-form';
+import { useChangePositionsOnScroll } from '../../../../hooks/useChangePositionsOnScroll.js';
+import { IconCaretDownFilled } from '../../../SVGIcons/IconCaretDownFilled.js';
+import { IconCaretUpFilled } from '../../../SVGIcons/IconCaretUpFilled.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 'dayjs';
+import '../../../../helperComponents/ErrorMessage/ErrorMessage.js';
+import '../../../../helperComponents/IconDynamicComponent/IconDynamicComponent.js';
+import '../../../../helperComponents/IconDynamicComponent/constants.js';
+import '../../../Checkbox/Checkbox.js';
+import '../../../Popover/Popover.js';
+import '../../../../slicedToArray-0c706912.js';
+import '../../../../hooks/useGetTooltipStyles.js';
+import '../../../../hooks/useGetTooltipPosition.js';
+import '../../../Tooltip/types.js';
+import '../../../../hooks/useHideOnScroll.js';
+import '../../../../hooks/useOnOutsideClick.js';
+import '../../../Link/Link.js';
+import '../../../SVGIcons/IconInfo.js';
+import 'react-syntax-highlighter';
+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';
+
+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 InputSelectWrapper = function InputSelectWrapper(props) {
+  var children = props.children,
+    options = props.options,
+    label = props.label,
+    placeHolder = props.placeHolder,
+    isRequiredField = props.isRequiredField,
+    labelAddons = props.labelAddons,
+    disabled = props.disabled,
+    _props$className = props.className,
+    className = _props$className === void 0 ? '' : _props$className,
+    dropdownWidth = props.dropdownWidth,
+    _props$align = props.align,
+    align = _props$align === void 0 ? 'left' : _props$align,
+    size = props.size,
+    dropdownRef = props.dropdownRef,
+    setDropdownRef = props.setDropdownRef,
+    containerRef = props.containerRef,
+    setIsOpen = props.setIsOpen,
+    isOpen = props.isOpen,
+    selectedValues = props.selectedValues,
+    setContainerRef = props.setContainerRef,
+    overflowText = props.overflowText,
+    hasError = props.hasError;
+  var inputRef = useRef(null);
+  var _useGetElemSizes = useGetElemSizes(containerRef),
+    width = _useGetElemSizes.width;
+  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 selectedItemsLabels = useMemo(function () {
+    if (!selectedValues || !selectedValues.length) {
+      return '';
+    }
+    var onlyLabels = selectedValues.map(function (selected) {
+      return selected.label;
+    });
+    var joinedLabel = onlyLabels.join(', ');
+    return checkIsValueOverflowed(joinedLabel) ? setTranslationValue(overflowText || '', selectedValues.length) : joinedLabel;
+  }, [options, selectedValues, checkIsValueOverflowed]);
+  var _useGetElemPositions = useGetElemPositions(inputRef.current),
+    bottom = _useGetElemPositions.bottom,
+    left = _useGetElemPositions.left,
+    top = _useGetElemPositions.top,
+    right = _useGetElemPositions.right;
+  var _useGetElemSizes2 = useGetElemSizes(containerRef),
+    containerWidth = _useGetElemSizes2.width;
+  var _useGetHasBottomSpace = useGetHasBottomSpace({
+      element: dropdownRef,
+      input: inputRef.current
+    }),
+    hasBottomSpace = _useGetHasBottomSpace.hasBottomSpace;
+  var hasTopSpace = useGetHasTopSpace({
+    element: dropdownRef,
+    input: inputRef.current
+  });
+  useChangePositionsOnScroll({
+    parentElement: inputRef === null || inputRef === void 0 ? void 0 : inputRef.current,
+    childElement: dropdownRef,
+    hasBottomSpace: hasBottomSpace
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames('select select--multi', className),
+    ref: setContainerRef
+  }, /*#__PURE__*/React.createElement("div", {
+    onClick: disabled ? noop : toggleDropdown
+  }, /*#__PURE__*/React.createElement(Input, {
+    readonly: true,
+    label: label,
+    ref: inputRef,
+    hasError: hasError,
+    className: "select__input",
+    placeholder: placeHolder,
+    required: isRequiredField,
+    currentValue: selectedItemsLabels,
+    rightIconProps: {
+      Component: isOpen ? IconCaretUpFilled : IconCaretDownFilled,
+      size: 'xsmall'
+    },
+    labelAddons: labelAddons,
+    disabled: disabled,
+    size: size === 'large' ? 'large' : 'small'
+  })), /*#__PURE__*/React.createElement(React.Fragment, null, isOpen && /*#__PURE__*/React.createElement("div", {
+    className: "select__options",
+    ref: setDropdownRef,
+    style: _objectSpread({
+      left: align === 'left' ? left : right - (dropdownWidth || containerWidth),
+      width: dropdownWidth || containerWidth
+    }, hasBottomSpace || !hasTopSpace ? {
+      top: bottom
+    } : {
+      bottom: window.innerHeight - top + DROPDOWN_AND_INPUT_GAP
+    })
+  }, children)));
+};
+
+export { InputSelectWrapper };

package/components/Select/SharedComponents/Loading.d.ts

@@ -0,0 +1,6 @@
+import type { JSX } from 'react';
+type TLoadingProps = {
+    loadingText?: string;
+};
+export declare const Loading: (props: TLoadingProps) => JSX.Element;
+export {};

package/components/Select/SharedComponents/Loading.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { Text } from '../../Text/Text.js';
+import 'classnames';
+import '../../../utils/helpers.js';
+import 'dayjs';
+
+var Loading = function Loading(props) {
+  var _props$loadingText = props.loadingText,
+    loadingText = _props$loadingText === void 0 ? 'Results loading ...' : _props$loadingText;
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      padding: 20
+    }
+  }, /*#__PURE__*/React.createElement(Text, null, loadingText));
+};
+
+export { Loading };

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

@@ -0,0 +1,6 @@
+export * from './Footer';
+export * from './Actions';
+export * from './ContentTop';
+export * from './Loading';
+export * from './InputSelectWrapper/InputSelectWrapper';
+export * from './ButtonSelectWrapper/ButtonSelectWrapper';

package/components/Select/SharedComponents/index.js

@@ -0,0 +1,79 @@
+export { Footer } from './Footer.js';
+export { Actions } from './Actions.js';
+export { ContentTop } from './ContentTop.js';
+export { Loading } from './Loading.js';
+export { InputSelectWrapper } from './InputSelectWrapper/InputSelectWrapper.js';
+export { ButtonSelectWrapper } from './ButtonSelectWrapper/ButtonSelectWrapper.js';
+import '../../../extends-e8ef956f.js';
+import '../../../slicedToArray-0c706912.js';
+import 'react';
+import '../../Button/Button.js';
+import '../../../defineProperty-7db32082.js';
+import '../../../typeof-ecd92d7f.js';
+import '../../../objectWithoutProperties-fcd64cc7.js';
+import 'classnames';
+import 'dayjs';
+import '../../../helperComponents/Loader/Loader.js';
+import '../../Checkbox/Checkbox.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 '../../../hooks/useScreenSize.js';
+import 'react-hook-form';
+import '../../Text/Text.js';
+import '../../../utils/helpers.js';
+import '../../Link/Link.js';
+import '../../SVGIcons/IconInfo.js';
+import '../../../helperComponents/IconDynamicComponent/IconDynamicComponent.js';
+import '../../../helperComponents/IconDynamicComponent/constants.js';
+import 'react-syntax-highlighter';
+import '../../Button/consts.js';
+import '../../Menu/Menu.js';
+import 'react-dom';
+import '../../../helperComponents/OptionItem/OptionItem.js';
+import '../../Avatar/Avatar.js';
+import '../../FileUpload/FileUpload.js';
+import '../../../toConsumableArray-e0031ed3.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 'framer-motion';
+import '../../Collapse/CollapseGroup/CollapseGroup.js';
+import '../../Collapse/CollapseItem/CollapseItem.js';
+import '../../SVGIcons/IconChevronRight.js';
+import '../../Divider/Divider.js';
+import '../../../helperComponents/AnimatePresenceWrapper/AnimatePresenceWrapper.js';
+import '../../SVGIcons/IconChevronDown.js';
+import '../../SVGIcons/IconMore.js';
+import '../../Input/Input.js';
+import 'react-input-mask';
+import 'react-number-format';
+import '../../SVGIcons/IconCheckmarkCircleFilled.js';
+import '../../Input/InputPassword.js';
+import '../../SVGIcons/IconDismissCircle.js';
+import '../../SVGIcons/IconDismissCircleFilled.js';
+import '../../SVGIcons/IconEyeOff.js';
+import '../../SVGIcons/IconEyeOn.js';
+import '../../SVGIcons/IconDismissFilled.js';
+import '../../SVGIcons/IconSearchFilled.js';
+import '../../SVGIcons/IconSelectAllOff.js';
+import '../../../hooks/useGetHasBottomSpace.js';
+import '../../../hooks/useChangePositionsOnScroll.js';
+import '../../SVGIcons/IconCaretDownFilled.js';
+import '../../SVGIcons/IconCaretUpFilled.js';
+import './ButtonSelectWrapper/Button/Button.js';

package/components/Select/constants.d.ts

@@ -0,0 +1,7 @@
+export declare const TRANSLATIONS_DEFAULT_VALUES: {
+    emptyListMainMessage: string;
+    overflowText: string;
+};
+export declare const SELECTED_VISIBLE_MIN_COUNT = 15;
+export declare const DROPDOWN_MAX_HEIGHT = 260;
+export declare const DROPDOWN_MAX_HEIGHT_PART = 106;

package/components/Select/constants.js

@@ -0,0 +1,9 @@
+var TRANSLATIONS_DEFAULT_VALUES = {
+  emptyListMainMessage: "Sorry, we couldn't find any results",
+  overflowText: '%s selected'
+};
+var SELECTED_VISIBLE_MIN_COUNT = 15;
+var DROPDOWN_MAX_HEIGHT = 260;
+var DROPDOWN_MAX_HEIGHT_PART = 106;
+
+export { DROPDOWN_MAX_HEIGHT, DROPDOWN_MAX_HEIGHT_PART, SELECTED_VISIBLE_MIN_COUNT, TRANSLATIONS_DEFAULT_VALUES };

package/components/Select/index.d.ts

@@ -0,0 +1,5 @@
+export * from './Select/Select';
+export * from './MultiSelect/MultiSelect';
+export * from './NestedSelect/NestedSelect';
+export * from './ButtonSelect/ButtonSelect';
+export * from './ProfileDropdown';