@invoicebox/ui 0.1.0-alpha.313 → 0.1.0-alpha.315

package/dist/esm/components/form/Checkbox/index.js

@@ -0,0 +1,38 @@
+var _excluded = ["disabled", "className", "checked", "disabledText", "label"];
+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); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
+import React, { useMemo } from 'react';
+import { Typography } from '../../common/Typography';
+import { Tooltip } from '../../common/Tooltip';
+import { useComponentPalette } from '../../../palette';
+import * as S from './styles';
+export var Checkbox = function Checkbox(_ref) {
+  var _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    className = _ref.className,
+    _ref$checked = _ref.checked,
+    checked = _ref$checked === void 0 ? false : _ref$checked,
+    disabledText = _ref.disabledText,
+    label = _ref.label,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var palette = useComponentPalette('checkbox');
+  var content = useMemo(function () {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(S.HiddenCheckbox, _extends({
+      type: "checkbox",
+      disabled: disabled,
+      checked: checked
+    }, props)), /*#__PURE__*/React.createElement(S.StyledCheckbox, null, /*#__PURE__*/React.createElement(S.CheckboxIcon, null)));
+  }, [checked, disabled, props]);
+  return /*#__PURE__*/React.createElement(S.CheckboxLabel, {
+    $checked: checked,
+    $disabled: disabled,
+    $palette: palette,
+    className: className
+  }, /*#__PURE__*/React.createElement(S.CheckboxContainer, null, disabled && disabledText ? /*#__PURE__*/React.createElement(Tooltip, {
+    overlay: disabledText
+  }, content) : content), label && /*#__PURE__*/React.createElement(Typography, {
+    variant: "bodyMRegular"
+  }, label));
+};
+export default /*#__PURE__*/React.memo(Checkbox);

package/dist/esm/components/form/Checkbox/index.stories.js

@@ -0,0 +1,60 @@
+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); }
+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; }
+import React, { useState } from 'react';
+import { Checkbox } from '.';
+var meta = {
+  title: 'form/Checkbox',
+  component: Checkbox,
+  tags: ['autodocs']
+};
+export default meta;
+var Component = function Component(props) {
+  var _useState = useState(props.checked),
+    _useState2 = _slicedToArray(_useState, 2),
+    checked = _useState2[0],
+    setChecked = _useState2[1];
+  return /*#__PURE__*/React.createElement(Checkbox, _extends({}, props, {
+    checked: checked,
+    onChange: function onChange() {
+      return setChecked(function (prev) {
+        return !prev;
+      });
+    }
+  }));
+};
+export var Default = {
+  args: {
+    checked: false,
+    label: 'Label'
+  },
+  render: Component
+};
+export var Checked = {
+  args: {
+    checked: true,
+    label: 'Label'
+  },
+  render: Component
+};
+export var Disabled = {
+  args: {
+    checked: false,
+    disabled: true,
+    label: 'Label',
+    disabledText: 'Недоступно'
+  },
+  render: Component
+};
+export var DisabledChecked = {
+  args: {
+    checked: true,
+    disabled: true,
+    label: 'Label'
+  },
+  render: Component
+};

package/dist/esm/components/form/Checkbox/palette.js

@@ -0,0 +1,13 @@
+import hexToRgba from '../../../utils/hexToRgba';
+export var generateCheckboxPalette = function generateCheckboxPalette(abstractPalette) {
+  return {
+    labelColor: abstractPalette.primary,
+    mark: abstractPalette.base,
+    borderDefault: hexToRgba(abstractPalette.primary, 0.3),
+    borderHover: hexToRgba(abstractPalette.primary, 0.5),
+    checkedBg: abstractPalette.secondary,
+    checkedHoverBg: '#EDC743',
+    disabledBg: hexToRgba(abstractPalette.neutralBrutal, 0.3),
+    disabledBorder: hexToRgba(abstractPalette.neutralBrutal, 0.3)
+  };
+};

package/dist/esm/components/form/Checkbox/styles.js

@@ -0,0 +1,64 @@
+import styled from 'styled-components';
+import { CheckIcon } from './CheckIcon';
+var TRANSITION = 'all .2s ease-in-out';
+var BORDER_RADIUS_MIN = 4;
+export var CheckboxContainer = styled.div.withConfig({
+  displayName: "styles__CheckboxContainer",
+  componentId: "sc-11prdl0-0"
+})(["display:inline-block;vertical-align:middle;"]);
+export var HiddenCheckbox = styled.input.withConfig({
+  displayName: "styles__HiddenCheckbox",
+  componentId: "sc-11prdl0-1"
+})(["display:none;"]);
+export var CheckboxIcon = styled(CheckIcon).withConfig({
+  displayName: "styles__CheckboxIcon",
+  componentId: "sc-11prdl0-2"
+})(["transition:", ";"], TRANSITION);
+export var StyledCheckbox = styled.div.withConfig({
+  displayName: "styles__StyledCheckbox",
+  componentId: "sc-11prdl0-3"
+})(["display:flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:", "px;transition:", ";"], BORDER_RADIUS_MIN, TRANSITION);
+var getStylesCheckbox = function getStylesCheckbox(palette, disabled, checked) {
+  if (disabled) {
+    if (checked) {
+      return "background-color: ".concat(palette.disabledBg, "; border: none");
+    }
+    return "border: 1px solid ".concat(palette.disabledBorder);
+  }
+  if (checked) {
+    return "background-color: ".concat(palette.checkedBg, "; border: none");
+  }
+  return "border: 1px solid ".concat(palette.borderDefault);
+};
+var getHoverStylesCheckbox = function getHoverStylesCheckbox(palette, disabled, checked) {
+  if (disabled) {
+    if (checked) {
+      return "background-color: ".concat(palette.disabledBg, "; border: none");
+    }
+    return "border: 1px solid ".concat(palette.disabledBg);
+  }
+  if (checked) {
+    return "background-color: ".concat(palette.checkedHoverBg, "; border: none");
+  }
+  return "border: 1px solid ".concat(palette.borderHover);
+};
+export var CheckboxLabel = styled.label.withConfig({
+  displayName: "styles__CheckboxLabel",
+  componentId: "sc-11prdl0-4"
+})(["display:flex;align-items:center;grid-column-gap:10px;user-select:none;width:fit-content;cursor:pointer;color:", ";", "{", ";", "{opacity:", ";}}&:hover{", "{", ";}}"], function (_ref) {
+  var $palette = _ref.$palette;
+  return $palette.labelColor;
+}, StyledCheckbox, function (_ref2) {
+  var $checked = _ref2.$checked,
+    $disabled = _ref2.$disabled,
+    $palette = _ref2.$palette;
+  return getStylesCheckbox($palette, $disabled, $checked);
+}, CheckboxIcon, function (_ref3) {
+  var $checked = _ref3.$checked;
+  return $checked ? 1 : 0;
+}, StyledCheckbox, function (_ref4) {
+  var $checked = _ref4.$checked,
+    $disabled = _ref4.$disabled,
+    $palette = _ref4.$palette;
+  return getHoverStylesCheckbox($palette, $disabled, $checked);
+});

package/dist/esm/components/form/CurrencyInput/CoreCurrencyInput/index.js

@@ -51,7 +51,7 @@ export var CoreCurrencyInput = function CoreCurrencyInput(_ref) {
     size: fieldSize
   }, /*#__PURE__*/React.createElement(InputWrapper, null, modernPlaceholder, /*#__PURE__*/React.createElement(StyledCurrencyInputFromLibrary, {
     $palette: palette,
-    $hasBorder: !useModernStyles,
+    $hasBorder: !useModernStyles || hasError,
     $paddingLeft: 18,
     $paddingRight: 18,
     $borderRadius: 10,

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

@@ -0,0 +1,120 @@
+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; }
+import React, { useCallback, useLayoutEffect, useRef, useState } from 'react';
+import * as S from './styles';
+import { useComponentPalette } from '../../../../../palette';
+import { Chip } from '../../../../common/Chip';
+var CHIP_SIZE = 'xs';
+export var 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 = 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 = useRef(null);
+  var tagRefs = useRef([]);
+  var counterRef = useRef(null);
+  var _useState = useState(selectedOptions.length),
+    _useState2 = _slicedToArray(_useState, 2),
+    visibleCount = _useState2[0],
+    setVisibleCount = _useState2[1];
+  var handleRemove = useCallback(function (event, value) {
+    event.preventDefault();
+    event.stopPropagation();
+    onRemove(value);
+  }, [onRemove]);
+  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.createElement(S.Wrapper, {
+    ref: wrapperRef,
+    $collapse: collapse
+  }, selectedOptions.map(function (option, index) {
+    return /*#__PURE__*/React.createElement(S.ItemWrapper, {
+      key: option.value,
+      ref: function ref(el) {
+        tagRefs.current[index] = el;
+      },
+      style: collapse && index >= safeVisibleCount ? hiddenStyle : undefined
+    }, /*#__PURE__*/React.createElement(Chip, {
+      size: chipSize,
+      color: chipColor,
+      bgColor: chipBgColor,
+      label: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(S.TagLabel, {
+        variant: "smallMedium"
+      }, option.label), /*#__PURE__*/React.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.createElement(S.ItemWrapper, {
+    ref: counterRef,
+    style: hiddenCount > 0 ? undefined : hiddenStyle
+  }, /*#__PURE__*/React.createElement(Chip, {
+    size: chipSize,
+    color: chipColor,
+    bgColor: chipBgColor,
+    label: "+".concat(hiddenCount)
+  })));
+};

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

@@ -0,0 +1,22 @@
+import styled, { css } from 'styled-components';
+import { Typography } from '../../../../common/Typography';
+export var TAGS_GAP = 6;
+export var Wrapper = styled.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 ? css(["flex-wrap:nowrap;overflow:hidden;"]) : css(["flex-wrap:wrap;"]);
+});
+export var ItemWrapper = styled.div.withConfig({
+  displayName: "styles__ItemWrapper",
+  componentId: "sc-gzjw07-1"
+})(["display:inline-flex;flex:0 0 auto;max-width:100%;"]);
+export var TagLabel = styled(Typography).withConfig({
+  displayName: "styles__TagLabel",
+  componentId: "sc-gzjw07-2"
+})(["overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"]);
+export var TagRemove = styled.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/esm/components/form/Select/index.js

@@ -1,3 +1,7 @@
+function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
+function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
 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; } }
@@ -15,39 +19,47 @@ import { useComponentPalette } from '../../../palette';
 import { useOptionGroups } from './hooks/useOptionGroups';
 import { Drawer } from '../../common/Drawer';
 import Loader from './components/Loader';
+import { MultipleValue } from './components/MultipleValue';
+import { Checkbox } from '../Checkbox';
 var MAX_LIST_HEIGHT = 294;
 var OPTION_IDENTIFIER = 'option-identifier';
-export var Select = function Select(_ref) {
-  var label = _ref.label,
-    hasError = _ref.hasError,
-    placeholder = _ref.placeholder,
-    name = _ref.name,
-    value = _ref.value,
-    renderValue = _ref.renderValue,
-    onChange = _ref.onChange,
-    options = _ref.options,
-    _ref$groups = _ref.groups,
-    groups = _ref$groups === void 0 ? [] : _ref$groups,
-    _ref$isResetButtonEna = _ref.isResetButtonEnabled,
-    isResetButtonEnabled = _ref$isResetButtonEna === void 0 ? false : _ref$isResetButtonEna,
-    size = _ref.size,
-    renderOption = _ref.renderOption,
-    dropdownHeader = _ref.dropdownHeader,
-    _ref$isDrawerOptions = _ref.isDrawerOptions,
-    isDrawerOptions = _ref$isDrawerOptions === void 0 ? false : _ref$isDrawerOptions,
-    renderGroup = _ref.renderGroup,
-    _ref$scrollbarMaxHeig = _ref.scrollbarMaxHeight,
-    scrollbarMaxHeight = _ref$scrollbarMaxHeig === void 0 ? MAX_LIST_HEIGHT : _ref$scrollbarMaxHeig,
-    scrollbarHeader = _ref.scrollbarHeader,
-    emptyOptionsLabel = _ref.emptyOptionsLabel,
-    isLoading = _ref.isLoading,
-    onBlur = _ref.onBlur,
-    required = _ref.required,
-    _ref$usePadding = _ref.usePadding,
-    usePadding = _ref$usePadding === void 0 ? false : _ref$usePadding,
-    dropdownWidth = _ref.dropdownWidth,
-    _ref$useModernStyles = _ref.useModernStyles,
-    useModernStyles = _ref$useModernStyles === void 0 ? false : _ref$useModernStyles;
+export var Select = function Select(props) {
+  var _collapseTags;
+  var label = props.label,
+    hasError = props.hasError,
+    placeholder = props.placeholder,
+    name = props.name,
+    value = props.value,
+    renderValue = props.renderValue,
+    onChange = props.onChange,
+    options = props.options,
+    _props$groups = props.groups,
+    groups = _props$groups === void 0 ? [] : _props$groups,
+    _props$isResetButtonE = props.isResetButtonEnabled,
+    isResetButtonEnabled = _props$isResetButtonE === void 0 ? false : _props$isResetButtonE,
+    size = props.size,
+    renderOption = props.renderOption,
+    dropdownHeader = props.dropdownHeader,
+    _props$isDrawerOption = props.isDrawerOptions,
+    isDrawerOptions = _props$isDrawerOption === void 0 ? false : _props$isDrawerOption,
+    renderGroup = props.renderGroup,
+    _props$scrollbarMaxHe = props.scrollbarMaxHeight,
+    scrollbarMaxHeight = _props$scrollbarMaxHe === void 0 ? MAX_LIST_HEIGHT : _props$scrollbarMaxHe,
+    scrollbarHeader = props.scrollbarHeader,
+    emptyOptionsLabel = props.emptyOptionsLabel,
+    isLoading = props.isLoading,
+    onBlur = props.onBlur,
+    required = props.required,
+    _props$usePadding = props.usePadding,
+    usePadding = _props$usePadding === void 0 ? false : _props$usePadding,
+    dropdownWidth = props.dropdownWidth,
+    _props$useModernStyle = props.useModernStyles,
+    useModernStyles = _props$useModernStyle === void 0 ? false : _props$useModernStyle;
+  var isMultiple = props.isMultiple === true;
+  var collapseTags = isMultiple ? (_collapseTags = props.collapseTags) !== null && _collapseTags !== void 0 ? _collapseTags : false : false;
+  var chipProps = isMultiple ? props.chipProps : undefined;
+  var onChangeSingle = onChange;
+  var onChangeMultiple = onChange;
   var palette = useComponentPalette('select');
   var _useInputFocus = useInputFocus({
       onBlur: onBlur
@@ -74,11 +86,23 @@ export var Select = function Select(_ref) {
   */
   var delayBlur = useRef(null);
   var inputRef = useRef(null);
+  var multipleValue = useMemo(function () {
+    var _ref;
+    return isMultiple ? (_ref = value) !== null && _ref !== void 0 ? _ref : [] : [];
+  }, [isMultiple, value]);
   var selectedOption = useMemo(function () {
-    return options.find(function (option) {
+    return isMultiple ? undefined : options.find(function (option) {
       return option.value === value;
     });
-  }, [options, value]);
+  }, [isMultiple, options, value]);
+  var selectedOptions = useMemo(function () {
+    return isMultiple ? options.filter(function (option) {
+      return multipleValue.includes(option.value);
+    }) : [];
+  }, [isMultiple, options, multipleValue]);
+  var selectedValuesSet = useMemo(function () {
+    return new Set(multipleValue);
+  }, [multipleValue]);
   var optionGroups = useOptionGroups(options, groups);
   var handleShow = useCallback(function () {
     return setIsOpen(true);
@@ -105,16 +129,29 @@ export var Select = function Select(_ref) {
   }, [blurHandler]);
   var handleSelect = useCallback(function (event) {
     var newValue = JSON.parse(event.currentTarget.dataset.value);
-    onChange(newValue);
+    if (isMultiple) {
+      var next = multipleValue.includes(newValue) ? multipleValue.filter(function (item) {
+        return item !== newValue;
+      }) : [].concat(_toConsumableArray(multipleValue), [newValue]);
+      onChangeMultiple(next);
+      // при множественном выборе дропдаун остаётся открытым
+      return;
+    }
+    onChangeSingle(newValue);
     handleHide();
     if (delayBlur.current) {
       delayBlur.current();
       delayBlur.current = null;
     }
-  }, [handleHide, onChange]);
+  }, [handleHide, isMultiple, multipleValue, onChangeMultiple, onChangeSingle]);
+  var handleRemoveTag = useCallback(function (removedValue) {
+    return onChangeMultiple(multipleValue.filter(function (item) {
+      return item !== removedValue;
+    }));
+  }, [multipleValue, onChangeMultiple]);
   var handleReset = useCallback(function () {
-    return onChange(null);
-  }, [onChange]);
+    return isMultiple ? onChangeMultiple([]) : onChangeSingle(null);
+  }, [isMultiple, onChangeMultiple, onChangeSingle]);
   var handleInputClick = function handleInputClick() {
     var _inputRef$current;
     (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.blur();
@@ -130,8 +167,9 @@ export var Select = function Select(_ref) {
       return renderOption(option.entity);
     }
     return /*#__PURE__*/React.createElement(S.DefaultOptionWrapper, {
-      $usePadding: usePadding
-    }, " ", option.label);
+      $usePadding: usePadding,
+      $isMultiple: isMultiple
+    }, option.label);
   };
   var handleGroupRender = function handleGroupRender(group) {
     if (group) {
@@ -166,8 +204,12 @@ export var Select = function Select(_ref) {
         "data-value": JSON.stringify(option.value),
         "data-option-identifier": OPTION_IDENTIFIER,
         $isGrouped: !!group && !renderOption,
-        $usePadding: usePadding
-      }, handleOptionRender(option)));
+        $usePadding: usePadding,
+        $isSelected: !isMultiple && option.value === value
+      }, isMultiple ? /*#__PURE__*/React.createElement(S.OptionContent, null, /*#__PURE__*/React.createElement(S.CheckboxWrapper, null, /*#__PURE__*/React.createElement(Checkbox, {
+        checked: selectedValuesSet.has(option.value),
+        readOnly: true
+      })), handleOptionRender(option)) : handleOptionRender(option)));
     }));
   }));
   var emptyLabel = /*#__PURE__*/React.createElement(S.DefaultOptionWrapper, null, /*#__PURE__*/React.createElement(S.EmptyLabel, {
@@ -198,20 +240,32 @@ export var Select = function Select(_ref) {
     return /*#__PURE__*/React.createElement(React.Fragment, null, dropdownHeader, " ", emptyLabel);
   };
   var renderedValue = useMemo(function () {
+    if (isMultiple) {
+      if (!selectedOptions.length) return;
+      return /*#__PURE__*/React.createElement(MultipleValue, {
+        selectedOptions: selectedOptions,
+        onRemove: handleRemoveTag,
+        collapse: collapseTags,
+        chipProps: chipProps
+      });
+    }
     if (!renderValue || !(selectedOption !== null && selectedOption !== void 0 && selectedOption.entity)) return;
     return renderValue(selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.entity);
-  }, [renderValue, selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.entity]);
+  }, [isMultiple, selectedOptions, handleRemoveTag, collapseTags, chipProps, renderValue, selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.entity]);
+  var inputValue = isMultiple ? selectedOptions.map(function (option) {
+    return option.label;
+  }).join(', ') : (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label) || '';
   return /*#__PURE__*/React.createElement(S.Wrapper, {
     ref: isDrawerOptions ? undefined : wrapperRef
   }, /*#__PURE__*/React.createElement(S.InputWrapper, null, /*#__PURE__*/React.createElement(Input, {
     ref: inputRef,
     label: label,
     hasError: hasError,
-    inFocus: inFocus,
+    inFocus: isMultiple ? isOpen : inFocus,
     placeholder: placeholder,
     onFocus: isDrawerOptions ? undefined : handleFocus,
     onBlur: isDrawerOptions ? undefined : handleBlur,
-    value: (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label) || '',
+    value: inputValue,
     renderedValue: renderedValue,
     name: name,
     isOpen: isOpen,

package/dist/esm/components/form/Select/index.stories.js

@@ -239,4 +239,35 @@ export var WithRenderedValue = {
     renderValue: renderValue
   }),
   render: Component
+};
+var MultipleComponent = function MultipleComponent(props) {
+  var _useState3 = useState([]),
+    _useState4 = _slicedToArray(_useState3, 2),
+    value = _useState4[0],
+    setValue = _useState4[1];
+  var handleChange = useCallback(function (newValue) {
+    setValue(newValue);
+    action('onChange')(newValue);
+  }, []);
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      maxWidth: 360
+    }
+  }, /*#__PURE__*/React.createElement(Select, _extends({}, props, {
+    value: value,
+    onChange: handleChange
+  })));
+};
+export var Multiple = {
+  args: _objectSpread(_objectSpread({}, COMMON_ARGS), {}, {
+    isMultiple: true
+  }),
+  render: MultipleComponent
+};
+export var MultipleCollapsed = {
+  args: _objectSpread(_objectSpread({}, COMMON_ARGS), {}, {
+    isMultiple: true,
+    collapseTags: true
+  }),
+  render: MultipleComponent
 };

package/dist/esm/components/form/Select/palette.js

@@ -2,6 +2,8 @@ import hexToRgba from '../../../utils/hexToRgba';
 export var generateSelectPalette = function generateSelectPalette(abstractPalette) {
   return {
     bgHover: hexToRgba(abstractPalette.neutralUsual, 0.5),
-    empty: abstractPalette.neutralFoggy
+    empty: abstractPalette.neutralFoggy,
+    tagColor: '#6590FD',
+    tagBg: hexToRgba('#6590FD', 0.16)
   };
 };

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

@@ -18,14 +18,18 @@ export var OptionWrapper = styled.div.withConfig({
 export var Option = styled(Typography).withConfig({
   displayName: "styles__Option",
   componentId: "sc-1x9n0z5-3"
-})(["overflow:hidden;width:100%;text-align:left;transition:all 0.2s ease-in-out 0s;box-sizing:border-box;cursor:pointer;border-radius:", ";&:hover{background-color:", ";}", ""], function (_ref2) {
+})(["overflow:hidden;width:100%;text-align:left;transition:all 0.2s ease-in-out 0s;box-sizing:border-box;cursor:pointer;border-radius:", ";", " &:hover{background-color:", ";}", ""], function (_ref2) {
   var $usePadding = _ref2.$usePadding;
   return $usePadding ? '12px' : 'none';
 }, function (_ref3) {
-  var $palette = _ref3.$palette;
-  return $palette.bgHover;
+  var $isSelected = _ref3.$isSelected,
+    $palette = _ref3.$palette;
+  return $isSelected && css(["background-color:", ";border-radius:8px;"], $palette.bgHover);
 }, function (_ref4) {
-  var $isGrouped = _ref4.$isGrouped;
+  var $palette = _ref4.$palette;
+  return $palette.bgHover;
+}, function (_ref5) {
+  var $isGrouped = _ref5.$isGrouped;
   return $isGrouped && css(["padding-left:30px;"]);
 });
 export var Group = styled(Typography).withConfig({
@@ -35,9 +39,13 @@ export var Group = styled(Typography).withConfig({
 export var DefaultOptionWrapper = styled.div.withConfig({
   displayName: "styles__DefaultOptionWrapper",
   componentId: "sc-1x9n0z5-5"
-})(["padding:", ";"], function (_ref5) {
-  var $usePadding = _ref5.$usePadding;
+})(["padding:", ";padding-left:", ";"], function (_ref6) {
+  var $usePadding = _ref6.$usePadding;
   return $usePadding ? '12px' : '12px 20px';
+}, function (_ref7) {
+  var $isMultiple = _ref7.$isMultiple,
+    $usePadding = _ref7.$usePadding;
+  return $isMultiple && !$usePadding ? '6px' : undefined;
 });
 export var DrawerContent = styled.div.withConfig({
   displayName: "styles__DrawerContent",
@@ -50,11 +58,19 @@ export var DrawerBottom = styled.div.withConfig({
 export var EmptyLabel = styled(Typography).withConfig({
   displayName: "styles__EmptyLabel",
   componentId: "sc-1x9n0z5-8"
-})(["color:", ";"], function (_ref6) {
-  var $color = _ref6.$color;
+})(["color:", ";"], function (_ref8) {
+  var $color = _ref8.$color;
   return $color;
 });
 export var ScrollbarContent = styled.div.withConfig({
   displayName: "styles__ScrollbarContent",
   componentId: "sc-1x9n0z5-9"
-})([""]);
+})([""]);
+export var OptionContent = styled.div.withConfig({
+  displayName: "styles__OptionContent",
+  componentId: "sc-1x9n0z5-10"
+})(["display:flex;align-items:center;gap:8px;padding-left:16px;"]);
+export var CheckboxWrapper = styled.div.withConfig({
+  displayName: "styles__CheckboxWrapper",
+  componentId: "sc-1x9n0z5-11"
+})(["flex:0 0 auto;pointer-events:none;"]);