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

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

@@ -16,9 +16,15 @@ var _palette = require("../../../palette");
 var _useOptionGroups = require("./hooks/useOptionGroups");
 var _Drawer = require("../../common/Drawer");
 var _Loader = _interopRequireDefault(require("./components/Loader"));
+var _MultipleValue = require("./components/MultipleValue");
+var _Checkbox = require("../Checkbox");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 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 _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; } }
@@ -27,37 +33,43 @@ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" !=
 function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
 var MAX_LIST_HEIGHT = 294;
 var OPTION_IDENTIFIER = 'option-identifier';
-var Select = exports.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;
+var Select = exports.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 = (0, _palette.useComponentPalette)('select');
   var _useInputFocus = (0, _useInputFocus2.useInputFocus)({
       onBlur: onBlur
@@ -84,11 +96,23 @@ var Select = exports.Select = function Select(_ref) {
   */
   var delayBlur = (0, _react.useRef)(null);
   var inputRef = (0, _react.useRef)(null);
+  var multipleValue = (0, _react.useMemo)(function () {
+    var _ref;
+    return isMultiple ? (_ref = value) !== null && _ref !== void 0 ? _ref : [] : [];
+  }, [isMultiple, value]);
   var selectedOption = (0, _react.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 = (0, _react.useMemo)(function () {
+    return isMultiple ? options.filter(function (option) {
+      return multipleValue.includes(option.value);
+    }) : [];
+  }, [isMultiple, options, multipleValue]);
+  var selectedValuesSet = (0, _react.useMemo)(function () {
+    return new Set(multipleValue);
+  }, [multipleValue]);
   var optionGroups = (0, _useOptionGroups.useOptionGroups)(options, groups);
   var handleShow = (0, _react.useCallback)(function () {
     return setIsOpen(true);
@@ -115,16 +139,29 @@ var Select = exports.Select = function Select(_ref) {
   }, [blurHandler]);
   var handleSelect = (0, _react.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 = (0, _react.useCallback)(function (removedValue) {
+    return onChangeMultiple(multipleValue.filter(function (item) {
+      return item !== removedValue;
+    }));
+  }, [multipleValue, onChangeMultiple]);
   var handleReset = (0, _react.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();
@@ -140,8 +177,9 @@ var Select = exports.Select = function Select(_ref) {
       return renderOption(option.entity);
     }
     return /*#__PURE__*/_react["default"].createElement(S.DefaultOptionWrapper, {
-      $usePadding: usePadding
-    }, " ", option.label);
+      $usePadding: usePadding,
+      $isMultiple: isMultiple
+    }, option.label);
   };
   var handleGroupRender = function handleGroupRender(group) {
     if (group) {
@@ -176,8 +214,12 @@ var Select = exports.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["default"].createElement(S.OptionContent, null, /*#__PURE__*/_react["default"].createElement(S.CheckboxWrapper, null, /*#__PURE__*/_react["default"].createElement(_Checkbox.Checkbox, {
+        checked: selectedValuesSet.has(option.value),
+        readOnly: true
+      })), handleOptionRender(option)) : handleOptionRender(option)));
     }));
   }));
   var emptyLabel = /*#__PURE__*/_react["default"].createElement(S.DefaultOptionWrapper, null, /*#__PURE__*/_react["default"].createElement(S.EmptyLabel, {
@@ -208,20 +250,32 @@ var Select = exports.Select = function Select(_ref) {
     return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, dropdownHeader, " ", emptyLabel);
   };
   var renderedValue = (0, _react.useMemo)(function () {
+    if (isMultiple) {
+      if (!selectedOptions.length) return;
+      return /*#__PURE__*/_react["default"].createElement(_MultipleValue.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["default"].createElement(S.Wrapper, {
     ref: isDrawerOptions ? undefined : wrapperRef
   }, /*#__PURE__*/_react["default"].createElement(S.InputWrapper, null, /*#__PURE__*/_react["default"].createElement(_Input.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/components/form/Select/index.stories.d.ts

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { Select, TProps } from '.';
+import { Select, TProps, TMultipleProps } from '.';
 declare const meta: Meta<typeof Select>;
 export default meta;
 export declare const Default: StoryObj<TProps<string>>;
@@ -10,3 +10,5 @@ export declare const WithGroups: StoryObj<TProps<string>>;
 export declare const RenderOptionWithGroups: StoryObj<TProps<string>>;
 export declare const WithCustomGroups: StoryObj<TProps<string>>;
 export declare const WithRenderedValue: StoryObj<TProps<string>>;
+export declare const Multiple: StoryObj<TMultipleProps<string>>;
+export declare const MultipleCollapsed: StoryObj<TMultipleProps<string>>;

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

@@ -4,7 +4,7 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.WithRenderedValue = exports.WithGroups = exports.WithDropdownHeader = exports.WithCustomGroups = exports.RenderOptionWithGroups = exports.RenderOption = exports.EmptyOptions = exports.Default = void 0;
+exports["default"] = exports.WithRenderedValue = exports.WithGroups = exports.WithDropdownHeader = exports.WithCustomGroups = exports.RenderOptionWithGroups = exports.RenderOption = exports.MultipleCollapsed = exports.Multiple = exports.EmptyOptions = exports.Default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _addonActions = require("@storybook/addon-actions");
 var _ = require(".");
@@ -247,4 +247,35 @@ var WithRenderedValue = exports.WithRenderedValue = {
     renderValue: renderValue
   }),
   render: Component
+};
+var MultipleComponent = function MultipleComponent(props) {
+  var _useState3 = (0, _react.useState)([]),
+    _useState4 = _slicedToArray(_useState3, 2),
+    value = _useState4[0],
+    setValue = _useState4[1];
+  var handleChange = (0, _react.useCallback)(function (newValue) {
+    setValue(newValue);
+    (0, _addonActions.action)('onChange')(newValue);
+  }, []);
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      maxWidth: 360
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_.Select, _extends({}, props, {
+    value: value,
+    onChange: handleChange
+  })));
+};
+var Multiple = exports.Multiple = {
+  args: _objectSpread(_objectSpread({}, COMMON_ARGS), {}, {
+    isMultiple: true
+  }),
+  render: MultipleComponent
+};
+var MultipleCollapsed = exports.MultipleCollapsed = {
+  args: _objectSpread(_objectSpread({}, COMMON_ARGS), {}, {
+    isMultiple: true,
+    collapseTags: true
+  }),
+  render: MultipleComponent
 };

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

@@ -2,5 +2,7 @@ import { TAbstractPalette } from '../../../palette';
 export type TSelectPalette = {
     bgHover: string;
     empty: string;
+    tagColor: string;
+    tagBg: string;
 };
 export declare const generateSelectPalette: (abstractPalette: TAbstractPalette) => TSelectPalette;

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

@@ -9,6 +9,8 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default":
 var generateSelectPalette = exports.generateSelectPalette = function generateSelectPalette(abstractPalette) {
   return {
     bgHover: (0, _hexToRgba["default"])(abstractPalette.neutralUsual, 0.5),
-    empty: abstractPalette.neutralFoggy
+    empty: abstractPalette.neutralFoggy,
+    tagColor: '#6590FD',
+    tagBg: (0, _hexToRgba["default"])('#6590FD', 0.16)
   };
 };

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

@@ -9,10 +9,12 @@ export declare const Option: import("styled-components/dist/types").IStyledCompo
     $palette: TSelectPalette;
     $isGrouped: boolean;
     $usePadding: boolean;
+    $isSelected?: boolean | undefined;
 }>> & string & Omit<import("react").FC<import("../../common/Typography").TTypographyProps>, keyof import("react").Component<any, {}, any>>;
 export declare const Group: 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 DefaultOptionWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     $usePadding?: boolean | undefined;
+    $isMultiple?: boolean | undefined;
 }>> & string;
 export declare const DrawerContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const DrawerBottom: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
@@ -20,3 +22,5 @@ export declare const EmptyLabel: import("styled-components/dist/types").IStyledC
     $color: string;
 }>> & string & Omit<import("react").FC<import("../../common/Typography").TTypographyProps>, keyof import("react").Component<any, {}, any>>;
 export declare const ScrollbarContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const OptionContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const CheckboxWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

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

@@ -4,7 +4,7 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Wrapper = exports.ScrollbarContent = exports.OptionWrapper = exports.Option = exports.InputWrapper = exports.Group = exports.EmptyLabel = exports.DrawerContent = exports.DrawerBottom = exports.DefaultOptionWrapper = void 0;
+exports.Wrapper = exports.ScrollbarContent = exports.OptionWrapper = exports.OptionContent = exports.Option = exports.InputWrapper = exports.Group = exports.EmptyLabel = exports.DrawerContent = exports.DrawerBottom = exports.DefaultOptionWrapper = exports.CheckboxWrapper = 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); }
@@ -27,14 +27,18 @@ var OptionWrapper = exports.OptionWrapper = _styledComponents["default"].div.wit
 var Option = exports.Option = (0, _styledComponents["default"])(_Typography.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 && (0, _styledComponents.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 && (0, _styledComponents.css)(["padding-left:30px;"]);
 });
 var Group = exports.Group = (0, _styledComponents["default"])(_Typography.Typography).withConfig({
@@ -44,9 +48,13 @@ var Group = exports.Group = (0, _styledComponents["default"])(_Typography.Typogr
 var DefaultOptionWrapper = exports.DefaultOptionWrapper = _styledComponents["default"].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;
 });
 var DrawerContent = exports.DrawerContent = _styledComponents["default"].div.withConfig({
   displayName: "styles__DrawerContent",
@@ -59,11 +67,19 @@ var DrawerBottom = exports.DrawerBottom = _styledComponents["default"].div.withC
 var EmptyLabel = exports.EmptyLabel = (0, _styledComponents["default"])(_Typography.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;
 });
 var ScrollbarContent = exports.ScrollbarContent = _styledComponents["default"].div.withConfig({
   displayName: "styles__ScrollbarContent",
   componentId: "sc-1x9n0z5-9"
-})([""]);
+})([""]);
+var OptionContent = exports.OptionContent = _styledComponents["default"].div.withConfig({
+  displayName: "styles__OptionContent",
+  componentId: "sc-1x9n0z5-10"
+})(["display:flex;align-items:center;gap:8px;padding-left:16px;"]);
+var CheckboxWrapper = exports.CheckboxWrapper = _styledComponents["default"].div.withConfig({
+  displayName: "styles__CheckboxWrapper",
+  componentId: "sc-1x9n0z5-11"
+})(["flex:0 0 auto;pointer-events:none;"]);

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

@@ -46,6 +46,7 @@ var TagsInput = exports.TagsInput = function TagsInput(_ref) {
     inFocus = _useInputFocus.inFocus,
     handleFocus = _useInputFocus.handleFocus,
     handleBlur = _useInputFocus.handleBlur;
+  var inputId = (0, _react.useId)();
   var inputRef = (0, _react.useRef)(null);
   var pureInputPalette = (0, _palette.useComponentPalette)('pureInput');
   var tagsInputPalette = (0, _palette.useComponentPalette)('tagsInput', palette);
@@ -117,7 +118,8 @@ var TagsInput = exports.TagsInput = function TagsInput(_ref) {
     (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 || _inputRef$current2.focus();
   };
   return /*#__PURE__*/_react["default"].createElement(_InputLabel.InputLabel, {
-    label: label
+    label: label,
+    htmlFor: inputId
   }, /*#__PURE__*/_react["default"].createElement(S.PureInputStyledWrapper, {
     $palette: pureInputPalette,
     $hasBorder: true,
@@ -151,6 +153,7 @@ var TagsInput = exports.TagsInput = function TagsInput(_ref) {
       bgColor: tagsInputPalette.chipBg
     });
   }), /*#__PURE__*/_react["default"].createElement(S.InputWithSaveButtonWrapper, null, /*#__PURE__*/_react["default"].createElement(_PureInput.PureInput, {
+    id: inputId,
     ref: inputRef,
     hasBorder: inFocus,
     paddingBottom: 0,

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

@@ -53,6 +53,8 @@ var TextInput = exports.TextInput = /*#__PURE__*/_react["default"].forwardRef(fu
     inFocus = _useInputFocus.inFocus,
     handleFocus = _useInputFocus.handleFocus,
     handleBlur = _useInputFocus.handleBlur;
+  var fallbackId = (0, _react.useId)();
+  var inputId = id !== null && id !== void 0 ? id : fallbackId;
   var _useElementWidth = (0, _useElementWidth2.useElementWidth)(),
     childrenRef = _useElementWidth.ref,
     childrenWidth = _useElementWidth.width;
@@ -80,9 +82,11 @@ var TextInput = exports.TextInput = /*#__PURE__*/_react["default"].forwardRef(fu
     disabled: disabled,
     required: required,
     size: fieldSize,
-    useModernStyles: useModernStyles
+    useModernStyles: useModernStyles,
+    htmlFor: inputId
   }, /*#__PURE__*/_react["default"].createElement(S.InputLabelContent, null, modernPlaceholder, /*#__PURE__*/_react["default"].createElement(_PureInput.PureInput, _extends({
-    id: id,
+    id: inputId,
+    "aria-label": label && !inputLabel ? label : undefined,
     ref: ref,
     name: name,
     disabled: disabled,

package/dist/esm/components/common/Tooltip/index.js

@@ -0,0 +1,51 @@
+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, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { Typography } from '../Typography';
+import { useComponentPalette } from '../../../palette';
+import * as S from './styles';
+export var Tooltip = function Tooltip(_ref) {
+  var overlay = _ref.overlay,
+    _ref$placement = _ref.placement,
+    placement = _ref$placement === void 0 ? 'top' : _ref$placement,
+    _ref$gap = _ref.gap,
+    gap = _ref$gap === void 0 ? 8 : _ref$gap,
+    children = _ref.children;
+  var palette = useComponentPalette('tooltip');
+  var triggerRef = useRef(null);
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    coords = _useState2[0],
+    setCoords = _useState2[1];
+  var show = useCallback(function () {
+    var el = triggerRef.current;
+    if (!el || !overlay) return;
+    var rect = el.getBoundingClientRect();
+    setCoords({
+      top: placement === 'top' ? rect.top - gap : rect.bottom + gap,
+      left: rect.left + rect.width / 2
+    });
+  }, [overlay, placement, gap]);
+  var hide = useCallback(function () {
+    return setCoords(null);
+  }, []);
+  return /*#__PURE__*/React.createElement(S.Trigger, {
+    ref: triggerRef,
+    onMouseEnter: show,
+    onMouseLeave: hide,
+    onFocus: show,
+    onBlur: hide
+  }, children, coords && /*#__PURE__*/createPortal(/*#__PURE__*/React.createElement(S.Overlay, {
+    $palette: palette,
+    $top: coords.top,
+    $left: coords.left,
+    $placement: placement
+  }, typeof overlay === 'string' ? /*#__PURE__*/React.createElement(Typography, {
+    variant: "captionRegular"
+  }, overlay) : overlay), document.body));
+};

package/dist/esm/components/common/Tooltip/index.stories.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import { Tooltip } from '.';
+var meta = {
+  title: 'common/Tooltip',
+  component: Tooltip,
+  tags: ['autodocs']
+};
+export default meta;
+var Component = function Component(props) {
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      padding: 80,
+      display: 'flex',
+      justifyContent: 'center'
+    }
+  }, /*#__PURE__*/React.createElement(Tooltip, props, /*#__PURE__*/React.createElement("span", {
+    style: {
+      border: '1px dashed #999',
+      padding: 8
+    }
+  }, "\u041D\u0430\u0432\u0435\u0434\u0438 \u043D\u0430 \u043C\u0435\u043D\u044F")));
+};
+export var Top = {
+  args: {
+    overlay: 'Подсказка сверху',
+    placement: 'top'
+  },
+  render: Component
+};
+export var Bottom = {
+  args: {
+    overlay: 'Подсказка снизу',
+    placement: 'bottom'
+  },
+  render: Component
+};

package/dist/esm/components/common/Tooltip/palette.js

@@ -0,0 +1,7 @@
+export var generateTooltipPalette = function generateTooltipPalette(abstractPalette) {
+  return {
+    bg: abstractPalette.base,
+    color: abstractPalette.primary,
+    shadow: '0px 8px 21px rgba(53, 63, 71, 0.16)'
+  };
+};

package/dist/esm/components/common/Tooltip/styles.js

@@ -0,0 +1,27 @@
+import styled from 'styled-components';
+export var Trigger = styled.span.withConfig({
+  displayName: "styles__Trigger",
+  componentId: "sc-153dwvc-0"
+})(["display:inline-flex;"]);
+export var Overlay = styled.div.withConfig({
+  displayName: "styles__Overlay",
+  componentId: "sc-153dwvc-1"
+})(["position:fixed;z-index:9999;top:", "px;left:", "px;transform:", ";box-sizing:border-box;min-height:28px;padding:4px 6px;border-radius:10px;background-color:", ";color:", ";box-shadow:", ";pointer-events:none;max-width:240px;"], function (_ref) {
+  var $top = _ref.$top;
+  return $top;
+}, function (_ref2) {
+  var $left = _ref2.$left;
+  return $left;
+}, function (_ref3) {
+  var $placement = _ref3.$placement;
+  return $placement === 'top' ? 'translate(-50%, -100%)' : 'translate(-50%, 0)';
+}, function (_ref4) {
+  var $palette = _ref4.$palette;
+  return $palette.bg;
+}, function (_ref5) {
+  var $palette = _ref5.$palette;
+  return $palette.color;
+}, function (_ref6) {
+  var $palette = _ref6.$palette;
+  return $palette.shadow;
+});

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

@@ -72,6 +72,7 @@ export var Autocomplete = /*#__PURE__*/forwardRef(function (_ref, ref) {
     setActiveIndex = _useState4[1];
   var baseId = useId();
   var listboxId = "".concat(baseId, "-listbox");
+  var inputId = "".concat(baseId, "-input");
   var activeOptionRef = useRef(null);
   var palette = useComponentPalette('autocompleteDefaultOption');
   var _useInputFocus = useInputFocus({
@@ -180,7 +181,8 @@ export var Autocomplete = /*#__PURE__*/forwardRef(function (_ref, ref) {
     required: required,
     useModernStyles: useModernStyles,
     size: fieldSize,
-    left: useModernStyles && typeof inputPaddingLeft === 'number' ? inputPaddingLeft - LABEL_PADDING : undefined
+    left: useModernStyles && typeof inputPaddingLeft === 'number' ? inputPaddingLeft - LABEL_PADDING : undefined,
+    htmlFor: inputId
   }, /*#__PURE__*/React.createElement(S.InputLabelContent, null, children ? /*#__PURE__*/React.createElement(S.ChildrenWrapper, null, children) : null, useModernStyles && modernInputPlaceholder && /*#__PURE__*/React.createElement(ModernPlaceholder, {
     visible: !isHideModernPlaceholder,
     paddingLeft: typeof inputPaddingLeft === 'number' ? inputPaddingLeft : 20,
@@ -188,6 +190,8 @@ export var Autocomplete = /*#__PURE__*/forwardRef(function (_ref, ref) {
     size: fieldSize,
     required: required
   }, modernInputPlaceholder), /*#__PURE__*/React.createElement(PureInput, _extends({
+    id: inputId,
+    "aria-label": label && !inputLabel ? label : undefined,
     ref: ref,
     hasError: hasError,
     inFocus: inFocus,

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

@@ -0,0 +1,16 @@
+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); }
+import React from 'react';
+export var CheckIcon = function CheckIcon(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    width: "12",
+    height: "11",
+    viewBox: "0 0 12 11",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M5.43158 10.0674C5.22406 10.3745 4.94736 10.5156 4.62744 10.5156C4.3075 10.5156 4.0481 10.3911 3.78006 10.0757L0.442444 6.19092C0.295471 6.0166 0.208984 5.79248 0.208984 5.58496C0.208984 5.14502 0.563507 4.82129 0.987183 4.82129C1.26389 4.82129 1.49734 4.9209 1.72217 5.19482L4.5842 8.63965L9.9624 0.430176C10.1526 0.147949 10.4034 0.00683594 10.6541 0.00683594C11.0778 0.00683594 11.4842 0.280762 11.4842 0.720703C11.4842 0.919922 11.3718 1.14404 11.2421 1.32666L5.43158 10.0674Z",
+    fill: "white"
+  }));
+};