@invoicebox/ui 0.1.0-alpha.314 → 0.1.0-alpha.316

package/dist/components/form/DateInput/index.js

@@ -45,9 +45,12 @@ var DateInput = exports.DateInput = function DateInput(_ref) {
     _ref$useModernStyles = _ref.useModernStyles,
     useModernStyles = _ref$useModernStyles === void 0 ? false : _ref$useModernStyles,
     _ref$required = _ref.required,
-    required = _ref$required === void 0 ? false : _ref$required;
+    required = _ref$required === void 0 ? false : _ref$required,
+    id = _ref.id;
   var palette = (0, _palette.useComponentPalette)('dateInput');
   var inputRef = (0, _react.useRef)(null);
+  var fallbackId = (0, _react.useId)();
+  var inputId = id !== null && id !== void 0 ? id : fallbackId;
   var isMobile = (0, _index.useMobile)();
   var _useState = (0, _react.useState)(false),
     _useState2 = _slicedToArray(_useState, 2),
@@ -124,8 +127,11 @@ var DateInput = exports.DateInput = function DateInput(_ref) {
     label: inputLabel,
     useModernStyles: useModernStyles,
     size: fieldSize,
-    required: required
+    required: required,
+    htmlFor: inputId
   }, /*#__PURE__*/_react["default"].createElement(S.InputWrapper, null, modernPlaceholder, /*#__PURE__*/_react["default"].createElement(_PureInput.PureInput, _extends({
+    id: inputId,
+    "aria-label": label && !inputLabel ? label : undefined,
     onClick: handleTrigger,
     ref: inputRef,
     hasError: hasError,

package/dist/components/form/DateTimeInput/index.d.ts

@@ -13,7 +13,7 @@ export type TProps = {
     cancelLabel?: string;
     required?: boolean;
     useModernStyles?: boolean;
-} & Pick<TPureInputProps, 'hasError' | 'name' | 'onBlur' | 'onFocus'> & Pick<TInputLabelProps, 'label'> & Pick<TCalendarProps, 'maxDate' | 'minDate'> & {
+} & Pick<TPureInputProps, 'hasError' | 'name' | 'onBlur' | 'onFocus' | 'id'> & Pick<TInputLabelProps, 'label'> & Pick<TCalendarProps, 'maxDate' | 'minDate'> & {
     size?: TSizes;
 };
 export declare const DateTimeInput: FC<TProps>;

package/dist/components/form/DateTimeInput/index.js

@@ -49,9 +49,12 @@ var DateTimeInput = exports.DateTimeInput = function DateTimeInput(_ref) {
     _ref$required = _ref.required,
     required = _ref$required === void 0 ? false : _ref$required,
     _ref$useModernStyles = _ref.useModernStyles,
-    useModernStyles = _ref$useModernStyles === void 0 ? false : _ref$useModernStyles;
+    useModernStyles = _ref$useModernStyles === void 0 ? false : _ref$useModernStyles,
+    id = _ref.id;
   var palette = (0, _palette.useComponentPalette)('dateTimeInput');
   var inputRef = (0, _react.useRef)(null);
+  var fallbackId = (0, _react.useId)();
+  var inputId = id !== null && id !== void 0 ? id : fallbackId;
   var isMobile = (0, _index.useMobile)();
   var withTime = true;
   var _useState = (0, _react.useState)(false),
@@ -151,8 +154,11 @@ var DateTimeInput = exports.DateTimeInput = function DateTimeInput(_ref) {
     label: inputLabel,
     required: required,
     useModernStyles: useModernStyles,
-    size: fieldSize
+    size: fieldSize,
+    htmlFor: inputId
   }, /*#__PURE__*/_react["default"].createElement(S.InputWrapper, null, modernPlaceholder, /*#__PURE__*/_react["default"].createElement(_PureInput.PureInput, _extends({
+    id: inputId,
+    "aria-label": label && !inputLabel ? label : undefined,
     onClick: handleTrigger,
     ref: inputRef,
     hasError: hasError,

package/dist/components/form/InputLabel/index.d.ts

@@ -9,5 +9,6 @@ export type TProps = {
     useModernStyles?: boolean;
     size?: TSizes;
     left?: number;
+    htmlFor?: string;
 };
 export declare const InputLabel: FC<TProps>;

package/dist/components/form/InputLabel/index.js

@@ -25,7 +25,8 @@ var InputLabel = exports.InputLabel = function InputLabel(_ref) {
     useModernStyles = _ref$useModernStyles === void 0 ? false : _ref$useModernStyles,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? 'M' : _ref$size,
-    left = _ref.left;
+    left = _ref.left,
+    htmlFor = _ref.htmlFor;
   var palette = (0, _palette.useComponentPalette)('inputLabel');
   return /*#__PURE__*/_react["default"].createElement(S.Wrapper, {
     $palette: palette,
@@ -35,6 +36,8 @@ var InputLabel = exports.InputLabel = function InputLabel(_ref) {
     $marginTop: useModernStyles && _constants.MODERN_STYLE_SIZE_PARAMS_MAP[size].$labelPaddingTop < 0 && !!label ? -_constants.MODERN_STYLE_SIZE_PARAMS_MAP[size].$labelPaddingTop : undefined,
     $paddingTop: useModernStyles ? 0 : 10
   }, label && /*#__PURE__*/_react["default"].createElement(S.Label, {
+    element: "label",
+    htmlFor: htmlFor,
     $palette: palette,
     $inFocus: inFocus,
     variant: size && useModernStyles ? _constants.MODERN_STYLE_SIZE_PARAMS_MAP[size].$labelVariant : 'captionRegular',

package/dist/components/form/PhoneInput/index.js

@@ -55,6 +55,8 @@ var PhoneInput = exports.PhoneInput = function PhoneInput(_ref) {
     useModernStyles = _ref$useModernStyles === void 0 ? false : _ref$useModernStyles;
   var inputRef = (0, _react.useRef)();
   var isMobile = (0, _useMedia.useMobile)();
+  var fallbackId = (0, _react.useId)();
+  var inputId = id !== null && id !== void 0 ? id : fallbackId;
   var phoneInputLogic = (0, _react.useMemo)(function () {
     return new _phoneInputLogic.PhoneInputLogic(isSupportCityRusPhoneNumber);
   }, [isSupportCityRusPhoneNumber]);
@@ -192,7 +194,8 @@ var PhoneInput = exports.PhoneInput = function PhoneInput(_ref) {
     required: required,
     useModernStyles: useModernStyles,
     size: fieldSize,
-    left: isHaveSelectCountries && useModernStyles ? 65 : undefined
+    left: isHaveSelectCountries && useModernStyles ? 65 : undefined,
+    htmlFor: inputId
   }, /*#__PURE__*/_react["default"].createElement(S.InputLabelContent, null, useModernStyles && /*#__PURE__*/_react["default"].createElement(_ModernPlaceholder.ModernPlaceholder, {
     visible: !isHideModernPlaceholder,
     paddingLeft: isHaveSelectCountries ? 75 : 18,
@@ -222,7 +225,8 @@ var PhoneInput = exports.PhoneInput = function PhoneInput(_ref) {
     placeholder: inputPlaceholder,
     ref: inputRef
   }, /*#__PURE__*/_react["default"].createElement(_PureInput.PureInput, _extends({
-    id: id,
+    id: inputId,
+    "aria-label": label && !inputLabel ? label : undefined,
     hasError: hasPureInputError,
     inFocus: inFocus,
     name: name,

package/dist/components/form/PositiveIntegerInput/index.d.ts

@@ -7,7 +7,7 @@ export type TProps = {
     onChange: (value: number | null) => void;
     max?: number;
     upAndDown?: boolean;
-} & Pick<TInputLabelProps, 'label'> & Pick<TPureInputProps, 'placeholder' | 'hasError' | 'onFocus' | 'onBlur' | 'disabled' | 'name' | 'useModernStyles'> & {
+} & Pick<TInputLabelProps, 'label'> & Pick<TPureInputProps, 'placeholder' | 'hasError' | 'onFocus' | 'onBlur' | 'disabled' | 'name' | 'useModernStyles' | 'id'> & {
     size?: TSizes;
 };
 export declare const PositiveIntegerInput: FC<TProps>;

package/dist/components/form/PositiveIntegerInput/index.js

@@ -34,7 +34,8 @@ var PositiveIntegerInput = exports.PositiveIntegerInput = function PositiveInteg
     name = _ref.name,
     size = _ref.size,
     _ref$useModernStyles = _ref.useModernStyles,
-    useModernStyles = _ref$useModernStyles === void 0 ? false : _ref$useModernStyles;
+    useModernStyles = _ref$useModernStyles === void 0 ? false : _ref$useModernStyles,
+    id = _ref.id;
   var _useInputFocus = (0, _useInputFocus2.useInputFocus)({
       onFocus: onFocus,
       onBlur: onBlur
@@ -42,6 +43,8 @@ var PositiveIntegerInput = exports.PositiveIntegerInput = function PositiveInteg
     inFocus = _useInputFocus.inFocus,
     handleFocus = _useInputFocus.handleFocus,
     handleBlur = _useInputFocus.handleBlur;
+  var fallbackId = (0, _react.useId)();
+  var inputId = id !== null && id !== void 0 ? id : fallbackId;
   var _useInputStyles = (0, _useInputStyles2.useInputStyles)({
       isHaveValue: typeof value === 'number',
       useModernStyles: useModernStyles,
@@ -86,8 +89,11 @@ var PositiveIntegerInput = exports.PositiveIntegerInput = function PositiveInteg
     inFocus: inFocus,
     label: inputLabel,
     useModernStyles: useModernStyles,
-    size: fieldSize
+    size: fieldSize,
+    htmlFor: inputId
   }, /*#__PURE__*/_react["default"].createElement(S.ControlWrapper, null, modernPlaceholder, /*#__PURE__*/_react["default"].createElement(_PureInput.PureInput, _extends({
+    id: inputId,
+    "aria-label": label && !inputLabel ? label : undefined,
     name: name,
     hasError: hasError,
     inFocus: inFocus,

package/dist/components/form/PureInput/index.js

@@ -8,7 +8,7 @@ exports.PureInput = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var S = _interopRequireWildcard(require("./styles"));
 var _palette = require("../../../palette");
-var _excluded = ["paddingLeft", "paddingRight", "paddingTop", "paddingBottom", "borderRadius", "hasError", "inFocus", "hasBorder", "isOnlyNumbers", "className", "onChange", "element", "variant", "renderedValue", "useModernStyles"];
+var _excluded = ["paddingLeft", "paddingRight", "paddingTop", "paddingBottom", "borderRadius", "hasError", "inFocus", "hasBorder", "isOnlyNumbers", "className", "onChange", "element", "variant", "renderedValue", "useModernStyles", "id"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
@@ -42,8 +42,10 @@ var PureInput = exports.PureInput = /*#__PURE__*/_react["default"].forwardRef(fu
     renderedValue = _ref.renderedValue,
     _ref$useModernStyles = _ref.useModernStyles,
     useModernStyles = _ref$useModernStyles === void 0 ? false : _ref$useModernStyles,
+    id = _ref.id,
     rest = _objectWithoutProperties(_ref, _excluded);
   var palette = (0, _palette.useComponentPalette)('pureInput');
+  var fallbackId = (0, _react.useId)();
   var handleChange = (0, _react.useCallback)(function (event) {
     var inputValue = event.target.value;
     event.target.value = isOnlyNumbers ? inputValue.replace(/[^0-9]/g, '') : inputValue;
@@ -65,7 +67,8 @@ var PureInput = exports.PureInput = /*#__PURE__*/_react["default"].forwardRef(fu
     $palette: palette,
     $borderRadius: borderRadius,
     onChange: handleChange,
-    $useModernStyles: useModernStyles
+    $useModernStyles: useModernStyles,
+    id: id !== null && id !== void 0 ? id : fallbackId
   }, rest), renderedValue);
 });
 PureInput.displayName = 'PureInput';

package/dist/components/form/SearchInput/index.d.ts

@@ -1,13 +1,13 @@
 import React from 'react';
 import { TProps as PureInputProps } from '../PureInput';
 import { TSizes } from '../constants';
-export type TProps = Pick<PureInputProps, 'placeholder' | 'hasBorder' | 'autoFocus' | 'name' | 'onFocus' | 'onBlur' | 'isOnlyNumbers' | 'maxLength'> & {
+export type TProps = Pick<PureInputProps, 'placeholder' | 'hasBorder' | 'autoFocus' | 'name' | 'onFocus' | 'onBlur' | 'isOnlyNumbers' | 'maxLength' | 'id'> & {
     value: string;
     onChange: (value: string) => void;
     size?: TSizes;
     useModernStyles?: boolean;
 };
-export declare const SearchInput: React.ForwardRefExoticComponent<Pick<PureInputProps, "name" | "maxLength" | "placeholder" | "autoFocus" | "onFocus" | "onBlur" | "hasBorder" | "isOnlyNumbers"> & {
+export declare const SearchInput: React.ForwardRefExoticComponent<Pick<PureInputProps, "id" | "name" | "maxLength" | "placeholder" | "autoFocus" | "onFocus" | "onBlur" | "hasBorder" | "isOnlyNumbers"> & {
     value: string;
     onChange: (value: string) => void;
     size?: TSizes | undefined;

package/dist/components/form/SearchInput/index.js

@@ -30,7 +30,8 @@ var SearchInput = exports.SearchInput = /*#__PURE__*/(0, _react.forwardRef)(func
     maxLength = _ref.maxLength,
     size = _ref.size,
     _ref$useModernStyles = _ref.useModernStyles,
-    useModernStyles = _ref$useModernStyles === void 0 ? false : _ref$useModernStyles;
+    useModernStyles = _ref$useModernStyles === void 0 ? false : _ref$useModernStyles,
+    id = _ref.id;
   var _useInputFocus = (0, _useInputFocus2.useInputFocus)({
       onFocus: onFocus,
       onBlur: onBlur
@@ -38,6 +39,8 @@ var SearchInput = exports.SearchInput = /*#__PURE__*/(0, _react.forwardRef)(func
     inFocus = _useInputFocus.inFocus,
     handleFocus = _useInputFocus.handleFocus,
     handleBlur = _useInputFocus.handleBlur;
+  var fallbackId = (0, _react.useId)();
+  var inputId = id !== null && id !== void 0 ? id : fallbackId;
   var palette = (0, _palette.useComponentPalette)('searchInput');
   var _useInputStyles = (0, _useInputStyles2.useInputStyles)({
       isHaveValue: !!value,
@@ -61,9 +64,12 @@ var SearchInput = exports.SearchInput = /*#__PURE__*/(0, _react.forwardRef)(func
   return /*#__PURE__*/_react["default"].createElement(_InputLabel.InputLabel, {
     useModernStyles: useModernStyles,
     size: fieldSize,
-    label: useModernStyles ? inputLabel : undefined
+    label: useModernStyles ? inputLabel : undefined,
+    htmlFor: inputId
   }, modernPlaceholder, /*#__PURE__*/_react["default"].createElement(_PureInput.PureInput, _extends({
     ref: ref,
+    id: inputId,
+    "aria-label": useModernStyles && inputLabel ? undefined : placeholder,
     paddingRight: 56,
     hasBorder: hasBorder,
     onChange: handleInputChange,

package/dist/components/form/Select/components/Input/index.d.ts

@@ -3,13 +3,13 @@ import { TProps as TInputLabelProps } from '../../../InputLabel';
 import { TProps as TPureInputProps } from '../../../PureInput';
 import { TProps as TArrowProps } from '../../../../common/Arrow';
 import { TSizes } from '../../../constants';
-export type TProps = Pick<TInputLabelProps, 'inFocus' | 'label' | 'required'> & Pick<TPureInputProps, 'hasError' | 'placeholder' | 'name' | 'onFocus' | 'onBlur' | 'value' | 'onClick'> & Pick<TArrowProps, 'isOpen'> & {
+export type TProps = Pick<TInputLabelProps, 'inFocus' | 'label' | 'required'> & Pick<TPureInputProps, 'hasError' | 'placeholder' | 'name' | 'onFocus' | 'onBlur' | 'value' | 'onClick' | 'id'> & Pick<TArrowProps, 'isOpen'> & {
     onReset?: () => void;
     size?: TSizes;
     renderedValue?: React.ReactNode;
     useModernStyles?: boolean;
 };
-export declare const Input: React.ForwardRefExoticComponent<Pick<TInputLabelProps, "required" | "label" | "inFocus"> & Pick<TPureInputProps, "name" | "value" | "placeholder" | "onFocus" | "onBlur" | "onClick" | "hasError"> & Pick<TArrowProps, "isOpen"> & {
+export declare const Input: React.ForwardRefExoticComponent<Pick<TInputLabelProps, "required" | "label" | "inFocus"> & Pick<TPureInputProps, "id" | "name" | "value" | "placeholder" | "onFocus" | "onBlur" | "onClick" | "hasError"> & Pick<TArrowProps, "isOpen"> & {
     onReset?: (() => void) | undefined;
     size?: TSizes | undefined;
     renderedValue?: React.ReactNode;

package/dist/components/form/Select/components/Input/index.js

@@ -32,7 +32,10 @@ var Input = exports.Input = /*#__PURE__*/(0, _react.forwardRef)(function (_ref,
     onClick = _ref.onClick,
     required = _ref.required,
     _ref$useModernStyles = _ref.useModernStyles,
-    useModernStyles = _ref$useModernStyles === void 0 ? false : _ref$useModernStyles;
+    useModernStyles = _ref$useModernStyles === void 0 ? false : _ref$useModernStyles,
+    id = _ref.id;
+  var fallbackId = (0, _react.useId)();
+  var inputId = id !== null && id !== void 0 ? id : fallbackId;
   var _useInputStyles = (0, _useInputStyles2.useInputStyles)({
       isHaveValue: !!value,
       useModernStyles: useModernStyles,
@@ -53,8 +56,11 @@ var Input = exports.Input = /*#__PURE__*/(0, _react.forwardRef)(function (_ref,
     label: inputLabel,
     required: required,
     useModernStyles: useModernStyles,
-    size: fieldSize
+    size: fieldSize,
+    htmlFor: inputId
   }, /*#__PURE__*/_react["default"].createElement(S.ControlWrapper, null, modernPlaceholder, /*#__PURE__*/_react["default"].createElement(_PureInput.PureInput, _extends({
+    id: inputId,
+    "aria-label": label && !inputLabel ? label : undefined,
     ref: ref,
     hasError: hasError,
     inFocus: inFocus,

package/dist/components/form/Select/components/MultipleValue/index.d.ts

@@ -0,0 +1,9 @@
+import { TOption } from '../..';
+import { TProps as TChipProps } from '../../../../common/Chip';
+export type TProps<TValue> = {
+    selectedOptions: TOption<TValue>[];
+    onRemove: (value: TValue) => void;
+    collapse?: boolean;
+    chipProps?: Partial<Omit<TChipProps, 'label'>>;
+};
+export declare const MultipleValue: <TValue extends string | number>({ selectedOptions, onRemove, collapse, chipProps, }: TProps<TValue>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/form/Select/components/MultipleValue/index.js

@@ -0,0 +1,129 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MultipleValue = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var S = _interopRequireWildcard(require("./styles"));
+var _palette = require("../../../../../palette");
+var _Chip = require("../../../../common/Chip");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+var CHIP_SIZE = 'xs';
+var MultipleValue = exports.MultipleValue = function MultipleValue(_ref) {
+  var _chipProps$color, _chipProps$bgColor, _chipProps$size;
+  var selectedOptions = _ref.selectedOptions,
+    onRemove = _ref.onRemove,
+    _ref$collapse = _ref.collapse,
+    collapse = _ref$collapse === void 0 ? false : _ref$collapse,
+    chipProps = _ref.chipProps;
+  var palette = (0, _palette.useComponentPalette)('select');
+  var chipColor = (_chipProps$color = chipProps === null || chipProps === void 0 ? void 0 : chipProps.color) !== null && _chipProps$color !== void 0 ? _chipProps$color : palette.tagColor;
+  var chipBgColor = (_chipProps$bgColor = chipProps === null || chipProps === void 0 ? void 0 : chipProps.bgColor) !== null && _chipProps$bgColor !== void 0 ? _chipProps$bgColor : palette.tagBg;
+  var chipSize = (_chipProps$size = chipProps === null || chipProps === void 0 ? void 0 : chipProps.size) !== null && _chipProps$size !== void 0 ? _chipProps$size : CHIP_SIZE;
+  var wrapperRef = (0, _react.useRef)(null);
+  var tagRefs = (0, _react.useRef)([]);
+  var counterRef = (0, _react.useRef)(null);
+  var _useState = (0, _react.useState)(selectedOptions.length),
+    _useState2 = _slicedToArray(_useState, 2),
+    visibleCount = _useState2[0],
+    setVisibleCount = _useState2[1];
+  var handleRemove = (0, _react.useCallback)(function (event, value) {
+    event.preventDefault();
+    event.stopPropagation();
+    onRemove(value);
+  }, [onRemove]);
+  (0, _react.useLayoutEffect)(function () {
+    if (!collapse) {
+      setVisibleCount(selectedOptions.length);
+      return undefined;
+    }
+    var wrapper = wrapperRef.current;
+    if (!wrapper) return undefined;
+    var recalculate = function recalculate() {
+      var _counterRef$current;
+      var total = selectedOptions.length;
+      var containerWidth = wrapper.clientWidth;
+      var widths = tagRefs.current.slice(0, total).map(function (el) {
+        return (el === null || el === void 0 ? void 0 : el.offsetWidth) || 0;
+      });
+      var counterWidth = ((_counterRef$current = counterRef.current) === null || _counterRef$current === void 0 ? void 0 : _counterRef$current.offsetWidth) || 0;
+      var countFitting = function countFitting(reserve) {
+        var used = 0;
+        var count = 0;
+        for (var i = 0; i < total; i += 1) {
+          var width = widths[i] + (count > 0 ? S.TAGS_GAP : 0);
+          if (used + width <= containerWidth - reserve) {
+            used += width;
+            count += 1;
+          } else {
+            break;
+          }
+        }
+        return count;
+      };
+      var count = countFitting(0);
+      // если влезли не все теги, оставляем место под счётчик "+N"
+      if (count < total) {
+        count = Math.max(countFitting(counterWidth + S.TAGS_GAP), 1);
+      }
+      setVisibleCount(count);
+    };
+    recalculate();
+    var observer = new ResizeObserver(recalculate);
+    observer.observe(wrapper);
+    return function () {
+      return observer.disconnect();
+    };
+  }, [collapse, selectedOptions]);
+  var safeVisibleCount = collapse ? visibleCount : selectedOptions.length;
+  var hiddenCount = selectedOptions.length - safeVisibleCount;
+  var hiddenStyle = {
+    position: 'absolute',
+    visibility: 'hidden',
+    pointerEvents: 'none'
+  };
+  return /*#__PURE__*/_react["default"].createElement(S.Wrapper, {
+    ref: wrapperRef,
+    $collapse: collapse
+  }, selectedOptions.map(function (option, index) {
+    return /*#__PURE__*/_react["default"].createElement(S.ItemWrapper, {
+      key: option.value,
+      ref: function ref(el) {
+        tagRefs.current[index] = el;
+      },
+      style: collapse && index >= safeVisibleCount ? hiddenStyle : undefined
+    }, /*#__PURE__*/_react["default"].createElement(_Chip.Chip, {
+      size: chipSize,
+      color: chipColor,
+      bgColor: chipBgColor,
+      label: /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(S.TagLabel, {
+        variant: "smallMedium"
+      }, option.label), /*#__PURE__*/_react["default"].createElement(S.TagRemove, {
+        type: "button",
+        onMouseDown: function onMouseDown(event) {
+          return event.preventDefault();
+        },
+        onClick: function onClick(event) {
+          return handleRemove(event, option.value);
+        }
+      }, "\xD7"))
+    }));
+  }), collapse && /*#__PURE__*/_react["default"].createElement(S.ItemWrapper, {
+    ref: counterRef,
+    style: hiddenCount > 0 ? undefined : hiddenStyle
+  }, /*#__PURE__*/_react["default"].createElement(_Chip.Chip, {
+    size: chipSize,
+    color: chipColor,
+    bgColor: chipBgColor,
+    label: "+".concat(hiddenCount)
+  })));
+};

package/dist/components/form/Select/components/MultipleValue/styles.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+export declare const TAGS_GAP = 6;
+export declare const Wrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $collapse: boolean;
+}>> & string;
+export declare const ItemWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const TagLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("../../../../common/Typography").TTypographyProps & import("styled-components/dist/types").BaseObject, import("styled-components/dist/types").BaseObject>> & string & Omit<import("react").FC<import("../../../../common/Typography").TTypographyProps>, keyof import("react").Component<any, {}, any>>;
+export declare const TagRemove: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>> & string;

package/dist/components/form/Select/components/MultipleValue/styles.js

@@ -0,0 +1,31 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Wrapper = exports.TagRemove = exports.TagLabel = exports.TAGS_GAP = exports.ItemWrapper = void 0;
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _Typography = require("../../../../common/Typography");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+var TAGS_GAP = exports.TAGS_GAP = 6;
+var Wrapper = exports.Wrapper = _styledComponents["default"].div.withConfig({
+  displayName: "styles__Wrapper",
+  componentId: "sc-gzjw07-0"
+})(["display:flex;align-items:center;gap:", "px;width:100%;min-width:0;", ""], TAGS_GAP, function (_ref) {
+  var $collapse = _ref.$collapse;
+  return $collapse ? (0, _styledComponents.css)(["flex-wrap:nowrap;overflow:hidden;"]) : (0, _styledComponents.css)(["flex-wrap:wrap;"]);
+});
+var ItemWrapper = exports.ItemWrapper = _styledComponents["default"].div.withConfig({
+  displayName: "styles__ItemWrapper",
+  componentId: "sc-gzjw07-1"
+})(["display:inline-flex;flex:0 0 auto;max-width:100%;"]);
+var TagLabel = exports.TagLabel = (0, _styledComponents["default"])(_Typography.Typography).withConfig({
+  displayName: "styles__TagLabel",
+  componentId: "sc-gzjw07-2"
+})(["overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"]);
+var TagRemove = exports.TagRemove = _styledComponents["default"].button.withConfig({
+  displayName: "styles__TagRemove",
+  componentId: "sc-gzjw07-3"
+})(["display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:14px;height:14px;padding:0;border:none;background:none;color:inherit;font-size:16px;line-height:1;cursor:pointer;"]);

package/dist/components/form/Select/index.d.ts

@@ -1,5 +1,6 @@
 import { ReactNode } from 'react';
 import { TProps as TInputProps } from './components/Input';
+import { TProps as TChipProps } from '../../common/Chip';
 export type TOption<TValue> = {
     label: string;
     value: TValue;
@@ -11,9 +12,7 @@ export type TGroup = {
     id: string;
     entity?: unknown;
 };
-export type TProps<TValue> = Pick<TInputProps, 'label' | 'hasError' | 'placeholder' | 'name' | 'size' | 'onBlur' | 'required'> & {
-    value: TValue | null;
-    onChange: (value: TValue | null) => void;
+type TSharedProps<TValue> = Pick<TInputProps, 'label' | 'hasError' | 'placeholder' | 'name' | 'size' | 'onBlur' | 'required'> & {
     options: TOption<TValue>[];
     groups?: TGroup[];
     isResetButtonEnabled?: boolean;
@@ -31,4 +30,18 @@ export type TProps<TValue> = Pick<TInputProps, 'label' | 'hasError' | 'placehold
     dropdownWidth?: string;
     useModernStyles?: boolean;
 };
-export declare const Select: <TValue extends string | number>({ label, hasError, placeholder, name, value, renderValue, onChange, options, groups, isResetButtonEnabled, size, renderOption, dropdownHeader, isDrawerOptions, renderGroup, scrollbarMaxHeight, scrollbarHeader, emptyOptionsLabel, isLoading, onBlur, required, usePadding, dropdownWidth, useModernStyles, }: TProps<TValue>) => import("react/jsx-runtime").JSX.Element;
+export type TProps<TValue> = TSharedProps<TValue> & {
+    isMultiple?: false;
+    value: TValue | null;
+    onChange: (value: TValue | null) => void;
+};
+export type TMultipleProps<TValue> = TSharedProps<TValue> & {
+    isMultiple: true;
+    value: TValue[];
+    onChange: (value: TValue[]) => void;
+    collapseTags?: boolean;
+    chipProps?: Partial<Omit<TChipProps, 'label'>>;
+};
+type TAllProps<TValue> = TProps<TValue> | TMultipleProps<TValue>;
+export declare const Select: <TValue extends string | number>(props: TAllProps<TValue>) => import("react/jsx-runtime").JSX.Element;
+export {};