@invoicebox/ui 0.1.0-alpha.292 → 0.1.0-alpha.295

package/dist/components/common/Drawer/styles.js

@@ -4,51 +4,67 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Title = exports.StyledSheetContainer = exports.StyledSheetBackdrop = exports.DragIndicatorWrapper = exports.ChildrenWrapper = void 0;
+exports.Title = exports.Sheet = exports.Root = exports.DragIndicator = exports.DragHandle = exports.ChildrenWrapper = exports.Backdrop = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
-var _reactModalSheet = require("react-modal-sheet");
 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 Title = exports.Title = _styledComponents["default"].div.withConfig({
-  displayName: "styles__Title",
+var Root = exports.Root = _styledComponents["default"].div.withConfig({
+  displayName: "styles__Root",
   componentId: "sc-1kysg49-0"
-})(["background-color:", ";padding:30px;position:relative;text-align:center;border-radius:10px 10px 0 0;"], function (_ref) {
-  var $bg = _ref.$bg;
-  return $bg;
-});
-var DragIndicatorWrapper = exports.DragIndicatorWrapper = _styledComponents["default"].div.withConfig({
-  displayName: "styles__DragIndicatorWrapper",
+})(["position:fixed;inset:0;z-index:1000;display:flex;align-items:flex-end;justify-content:center;"]);
+var Backdrop = exports.Backdrop = _styledComponents["default"].div.withConfig({
+  displayName: "styles__Backdrop",
   componentId: "sc-1kysg49-1"
-})(["position:absolute;top:12px;left:50%;transform:translateX(-50%);"]);
-var ChildrenWrapper = exports.ChildrenWrapper = _styledComponents["default"].div.withConfig({
-  displayName: "styles__ChildrenWrapper",
-  componentId: "sc-1kysg49-2"
-})(["", ";background-color:", ";", ""], function (_ref2) {
-  var $isPadding = _ref2.$isPadding;
-  return $isPadding && 'padding: 32px 16px 36px';
-}, function (_ref3) {
-  var $bgColor = _ref3.$bgColor;
+})(["position:absolute;inset:0;background-color:", ";opacity:", ";transition:opacity 300ms ease;"], function (_ref) {
+  var $bgColor = _ref.$bgColor;
   return $bgColor;
+}, function (_ref2) {
+  var $isVisible = _ref2.$isVisible;
+  return $isVisible ? 1 : 0;
+});
+var Sheet = exports.Sheet = _styledComponents["default"].div.withConfig({
+  displayName: "styles__Sheet",
+  componentId: "sc-1kysg49-2"
+})(["position:relative;width:100%;max-height:90vh;display:flex;flex-direction:column;box-shadow:none;border-radius:10px 10px 0 0;will-change:transform;transition:transform 300ms cubic-bezier(0.32,0.72,0,1);", " ", " ", ""], function (_ref3) {
+  var $isDragging = _ref3.$isDragging;
+  return $isDragging && (0, _styledComponents.css)(["transition:none;"]);
 }, function (_ref4) {
-  var $isBorderRadius = _ref4.$isBorderRadius;
-  return $isBorderRadius && (0, _styledComponents.css)(["border-radius:10px 10px 0 0;"]);
+  var $isErrorBorder = _ref4.$isErrorBorder,
+    $errorColor = _ref4.$errorColor,
+    $borderColor = _ref4.$borderColor;
+  return ($isErrorBorder || $borderColor) && (0, _styledComponents.css)(["border-top:2px solid ", ";"], $borderColor || $errorColor);
+}, function (_ref5) {
+  var $overflow = _ref5.$overflow;
+  return $overflow === 'visible' ? (0, _styledComponents.css)(["overflow:visible;"]) : (0, _styledComponents.css)(["overflow-y:auto;"]);
 });
-var StyledSheetContainer = exports.StyledSheetContainer = (0, _styledComponents["default"])(_reactModalSheet.Sheet.Container).withConfig({
-  displayName: "styles__StyledSheetContainer",
+var DragHandle = exports.DragHandle = _styledComponents["default"].div.withConfig({
+  displayName: "styles__DragHandle",
   componentId: "sc-1kysg49-3"
-})(["box-shadow:none;border-radius:10px 10px 0 0;", " ", ""], function (_ref5) {
-  var $isErrorBorder = _ref5.$isErrorBorder,
-    $errorColor = _ref5.$errorColor,
-    $borderColor = _ref5.$borderColor;
-  return ($isErrorBorder || $borderColor) && (0, _styledComponents.css)(["border-top:2px solid ", ";"], $borderColor || $errorColor);
-}, function (_ref6) {
-  var $overflow = _ref6.$overflow;
-  return $overflow === 'visible' && (0, _styledComponents.css)(["overflow:visible;.react-modal-sheet-content-scroller{overflow-y:visible !important;}"]);
+})(["position:relative;flex:0 0 auto;height:28px;background-color:", ";border-radius:10px 10px 0 0;touch-action:none;cursor:grab;&:active{cursor:grabbing;}"], function (_ref6) {
+  var $bg = _ref6.$bg;
+  return $bg;
 });
-var StyledSheetBackdrop = exports.StyledSheetBackdrop = (0, _styledComponents["default"])(_reactModalSheet.Sheet.Backdrop).withConfig({
-  displayName: "styles__StyledSheetBackdrop",
+var DragIndicator = exports.DragIndicator = _styledComponents["default"].div.withConfig({
+  displayName: "styles__DragIndicator",
   componentId: "sc-1kysg49-4"
-})(["background-color:", " !important;"], function (_ref7) {
-  var $bgColor = _ref7.$bgColor;
+})(["position:absolute;top:12px;left:50%;transform:translateX(-50%);width:40px;height:4px;border-radius:99px;background-color:rgba(53,63,71,0.2);"]);
+var Title = exports.Title = _styledComponents["default"].div.withConfig({
+  displayName: "styles__Title",
+  componentId: "sc-1kysg49-5"
+})(["background-color:", ";padding:30px;position:relative;text-align:center;border-radius:10px 10px 0 0;"], function (_ref7) {
+  var $bg = _ref7.$bg;
+  return $bg;
+});
+var ChildrenWrapper = exports.ChildrenWrapper = _styledComponents["default"].div.withConfig({
+  displayName: "styles__ChildrenWrapper",
+  componentId: "sc-1kysg49-6"
+})(["", ";background-color:", ";", ""], function (_ref8) {
+  var $isPadding = _ref8.$isPadding;
+  return $isPadding && 'padding: 32px 16px 36px';
+}, function (_ref9) {
+  var $bgColor = _ref9.$bgColor;
   return $bgColor;
+}, function (_ref10) {
+  var $isBorderRadius = _ref10.$isBorderRadius;
+  return $isBorderRadius && (0, _styledComponents.css)(["border-radius:10px 10px 0 0;"]);
 });

package/dist/components/common/Dropdown/index.d.ts

@@ -1,4 +1,4 @@
-import { FC, ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 export type TProps = {
     children: ReactNode;
     isOpen: boolean;
@@ -13,4 +13,4 @@ export type TProps = {
     isTopPosition?: boolean;
     usePadding?: boolean;
 };
-export declare const Dropdown: FC<TProps>;
+export declare const Dropdown: React.ForwardRefExoticComponent<TProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/common/Dropdown/index.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Dropdown = void 0;
 var _react = _interopRequireWildcard(require("react"));
+var _reactDom = require("react-dom");
 var S = _interopRequireWildcard(require("./styles"));
 var _palette = require("../../../palette");
 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); }
@@ -16,7 +17,7 @@ function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r)
 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 Dropdown = exports.Dropdown = function Dropdown(_ref) {
+var Dropdown = exports.Dropdown = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, forwardedRef) {
   var children = _ref.children,
     isOpen = _ref.isOpen,
     _ref$isAutoPosition = _ref.isAutoPosition,
@@ -46,6 +47,42 @@ var Dropdown = exports.Dropdown = function Dropdown(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     elRef = _useState2[0],
     setElRef = _useState2[1];
+
+  // Якорь остаётся в потоке на месте поля-триггера; по его родителю (само поле) считаем,
+  // куда поставить вынесенный порталом дропдаун.
+  var anchorRef = (0, _react.useRef)(null);
+  var _useState3 = (0, _react.useState)(null),
+    _useState4 = _slicedToArray(_useState3, 2),
+    layerRect = _useState4[0],
+    setLayerRect = _useState4[1];
+
+  // Дропдаун вынесён в body порталом и спозиционирован `fixed` → НЕ растит документ (баг с
+  // пустой полосой внизу) и не зависит от `overflow`/`transform` предков. Слой-обёртка
+  // (`PositionLayer`) `fixed` точно над полем: внутренний `Wrapper` остаётся `absolute`
+  // относительно него, поэтому ВСЯ старая логика позиционирования (top/bottom/left/right/
+  // translateY) и измерения работают без изменений. Пересчёт на скролл/resize, пока открыт.
+  (0, _react.useLayoutEffect)(function () {
+    var updateRect = function updateRect() {
+      var _anchorRef$current;
+      var field = (_anchorRef$current = anchorRef.current) === null || _anchorRef$current === void 0 ? void 0 : _anchorRef$current.parentElement;
+      if (!field) return;
+      var rect = field.getBoundingClientRect();
+      setLayerRect({
+        top: rect.top,
+        left: rect.left,
+        width: rect.width,
+        height: rect.height
+      });
+    };
+    updateRect();
+    if (!isOpen) return undefined;
+    window.addEventListener('scroll', updateRect, true);
+    window.addEventListener('resize', updateRect);
+    return function () {
+      window.removeEventListener('scroll', updateRect, true);
+      window.removeEventListener('resize', updateRect);
+    };
+  }, [isOpen]);
   var handleCloseTransitionEnd = (0, _react.useCallback)(function (event) {
     if (event.propertyName !== 'opacity') return;
     if (isOpen) return;
@@ -68,18 +105,17 @@ var Dropdown = exports.Dropdown = function Dropdown(_ref) {
     };
     var isMoreSpaceBelowThanAbove = belowHeight >= aboveHeight;
     if (isMoreSpaceBelowThanAbove) {
-      var outOfViewPortHeight = dropdownHeight + dropdownIndent - belowHeight;
+      var _outOfViewPortHeight = dropdownHeight + dropdownIndent - belowHeight;
       return {
         isAbove: false,
-        translateY: "-".concat(outOfViewPortHeight, "px")
-      };
-    } else {
-      var _outOfViewPortHeight = dropdownHeight + dropdownIndent - aboveHeight;
-      return {
-        isAbove: true,
-        translateY: "".concat(_outOfViewPortHeight, "px")
+        translateY: "-".concat(_outOfViewPortHeight, "px")
       };
     }
+    var outOfViewPortHeight = dropdownHeight + dropdownIndent - aboveHeight;
+    return {
+      isAbove: true,
+      translateY: "".concat(outOfViewPortHeight, "px")
+    };
   }, []);
   var openFlagCache = (0, _react.useRef)(null);
   if (elRef) {
@@ -104,8 +140,21 @@ var Dropdown = exports.Dropdown = function Dropdown(_ref) {
       };
     }
   }
-  return /*#__PURE__*/_react["default"].createElement(S.Wrapper, {
-    ref: setElRef,
+  var setWrapperRef = (0, _react.useCallback)(function (node) {
+    setElRef(node);
+    if (typeof forwardedRef === 'function') forwardedRef(node);else if (forwardedRef) forwardedRef.current = node;
+  }, [forwardedRef]);
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(S.Anchor, {
+    ref: anchorRef
+  }), layerRect && /*#__PURE__*/(0, _reactDom.createPortal)(/*#__PURE__*/_react["default"].createElement(S.PositionLayer, {
+    style: {
+      top: layerRect.top,
+      left: layerRect.left,
+      width: layerRect.width,
+      height: layerRect.height
+    }
+  }, /*#__PURE__*/_react["default"].createElement(S.Wrapper, {
+    ref: setWrapperRef,
     $isVisible: isOpen,
     $isAbove: position.current.isAbove,
     $translateY: position.current.translateY,
@@ -118,5 +167,6 @@ var Dropdown = exports.Dropdown = function Dropdown(_ref) {
     onTransitionEnd: handleCloseTransitionEnd,
     $palette: palette,
     $usePadding: usePadding
-  }, children);
-};
+  }, children)), document.body));
+});
+Dropdown.displayName = 'Dropdown';

package/dist/components/common/Dropdown/palette.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.generateDropdownPalette = void 0;
-var _hexToRgba = _interopRequireDefault(require("hex-to-rgba"));
+var _hexToRgba = _interopRequireDefault(require("../../../utils/hexToRgba"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 var generateDropdownPalette = exports.generateDropdownPalette = function generateDropdownPalette(abstractPalette) {
   return {

package/dist/components/common/Dropdown/styles.d.ts

@@ -1,5 +1,7 @@
 /// <reference types="react" />
 import { TDropdownPalette } from './palette';
+export declare const Anchor: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
+export declare const PositionLayer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 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>, {
     $isVisible: boolean;
     $isAbove: boolean;

package/dist/components/common/Dropdown/styles.js

@@ -4,16 +4,30 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Wrapper = void 0;
+exports.Wrapper = exports.PositionLayer = exports.Anchor = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 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; }
+// Невидимый якорь в потоке: по его родителю (поле-триггер) считаем позицию портал-дропдауна.
+// display:none — не влияет на вёрстку, но parentElement (само поле) доступен для измерений.
+var Anchor = exports.Anchor = _styledComponents["default"].span.withConfig({
+  displayName: "styles__Anchor",
+  componentId: "sc-1f1enhf-0"
+})(["display:none;"]);
+
+// Слой-обёртка дропдауна: вынесена порталом в body и спозиционирована fixed точно над полем
+// (через inline top/left/width/height). pointer-events:none — сам слой не перехватывает клики
+// (его площадь = полю), кликабелен только внутренний Wrapper.
+var PositionLayer = exports.PositionLayer = _styledComponents["default"].div.withConfig({
+  displayName: "styles__PositionLayer",
+  componentId: "sc-1f1enhf-1"
+})(["position:fixed;z-index:1000;pointer-events:none;"]);
 var hidden = (0, _styledComponents.css)(["visibility:hidden;opacity:0;transition:visibility 0ms 200ms,opacity 200ms 0ms ease;"]);
 var visible = (0, _styledComponents.css)(["visibility:visible;opacity:1;transition:visibility 0ms 0ms,opacity 200ms 0ms ease;"]);
 var Wrapper = exports.Wrapper = _styledComponents["default"].div.withConfig({
   displayName: "styles__Wrapper",
-  componentId: "sc-1f1enhf-0"
-})(["padding:", ";overflow:hidden;border-radius:20px;box-shadow:0 4px 50px 0 ", ";background:", ";outline:1px solid ", ";min-width:", ";width:", ";position:absolute;left:", ";right:", ";z-index:", ";", ";", ";", ";"], function (_ref) {
+  componentId: "sc-1f1enhf-2"
+})(["pointer-events:auto;padding:", ";overflow:hidden;border-radius:20px;box-shadow:0 4px 50px 0 ", ";background:", ";outline:1px solid ", ";min-width:", ";width:", ";position:absolute;left:", ";right:", ";z-index:", ";", ";", ";", ";"], function (_ref) {
   var $usePadding = _ref.$usePadding;
   return $usePadding ? '8px 0;' : 'none';
 }, function (_ref2) {

package/dist/components/common/EntityAutocompleteOptionsDrawer/index.js

@@ -31,6 +31,10 @@ var EntityAutocompleteOptionsDrawer = exports.EntityAutocompleteOptionsDrawer =
     onChange(option.value, option);
     onClose();
   }, [onClose, onChange, options]);
+
+  // Скелетоны — только на первой загрузке (опций ещё нет). При повторных запросах держим прежние
+  // опции, иначе лоадер мерцает на каждый ввод символа.
+  var showSkeletons = isLoadingOptions && options.length === 0;
   return /*#__PURE__*/_react["default"].createElement(_Drawer.Drawer, {
     isOpen: isOpen,
     onClose: onClose,
@@ -41,7 +45,7 @@ var EntityAutocompleteOptionsDrawer = exports.EntityAutocompleteOptionsDrawer =
   }, promptMessage && /*#__PURE__*/_react["default"].createElement(S.Prompt, {
     $color: palette.prompt,
     variant: "bodyMRegular"
-  }, promptMessage), isLoadingOptions && /*#__PURE__*/_react["default"].createElement(S.SkeletonListWrapper, null, loadingList.map(function (ComponentSkeleton, index) {
+  }, promptMessage), showSkeletons && /*#__PURE__*/_react["default"].createElement(S.SkeletonListWrapper, null, loadingList.map(function (ComponentSkeleton, index) {
     return (
       /*#__PURE__*/
       // eslint-disable-next-line react/no-array-index-key
@@ -50,7 +54,7 @@ var EntityAutocompleteOptionsDrawer = exports.EntityAutocompleteOptionsDrawer =
         height: "64px"
       })
     );
-  })), !isLoadingOptions && !promptMessage && options.map(function (option, index) {
+  })), !showSkeletons && !promptMessage && options.map(function (option, index) {
     return /*#__PURE__*/_react["default"].createElement(S.OptionWrapper, {
       // eslint-disable-next-line react/no-array-index-key
       key: "".concat(option.value).concat(index),

package/dist/components/common/EntityAutocompleteOptionsDrawer/palette.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.generateEntityAutocompleteOptionsDrawerPalette = void 0;
-var _hexToRgba = _interopRequireDefault(require("hex-to-rgba"));
+var _hexToRgba = _interopRequireDefault(require("../../../utils/hexToRgba"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 var generateEntityAutocompleteOptionsDrawerPalette = exports.generateEntityAutocompleteOptionsDrawerPalette = function generateEntityAutocompleteOptionsDrawerPalette(abstractPalette) {
   return {

package/dist/components/common/PointsLoader/palette.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.generatePointsLoaderPalette = void 0;
-var _hexToRgba = _interopRequireDefault(require("hex-to-rgba"));
+var _hexToRgba = _interopRequireDefault(require("../../../utils/hexToRgba"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 var generatePointsLoaderPalette = exports.generatePointsLoaderPalette = function generatePointsLoaderPalette(abstractPalette) {
   return {

package/dist/components/common/Scrollbar/index.js

@@ -1,20 +1,19 @@
 "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.Scrollbar = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _reactCustomScrollbars = require("react-custom-scrollbars-2");
 var _palette = require("../../../palette");
+var S = _interopRequireWildcard(require("./styles"));
+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 _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
-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); }
-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 ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
-function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+// CSS-скроллбар (убрали зависимость `react-custom-scrollbars-2`): нативный overflow + стилизованный
+// тонкий ползунок. Публичный API сохранён (maxHeight/trackWidth/autoHeight). autoHeight=true →
+// контейнер растёт по контенту до maxHeight, затем скроллится; autoHeight=false → высота 100% родителя.
 var Scrollbar = exports.Scrollbar = function Scrollbar(_ref) {
   var children = _ref.children,
     _ref$maxHeight = _ref.maxHeight,
@@ -24,29 +23,10 @@ var Scrollbar = exports.Scrollbar = function Scrollbar(_ref) {
     _ref$autoHeight = _ref.autoHeight,
     autoHeight = _ref$autoHeight === void 0 ? true : _ref$autoHeight;
   var palette = (0, _palette.useComponentPalette)('scrollbar');
-  var renderThumbVertical = function renderThumbVertical(thumbProps) {
-    return /*#__PURE__*/_react["default"].createElement("div", _extends({}, thumbProps, {
-      style: _objectSpread(_objectSpread({}, thumbProps.style), {}, {
-        backgroundColor: palette.thumb,
-        width: trackWidth,
-        borderRadius: '4px'
-      })
-    }));
-  };
-  var renderThumbHorizontal = function renderThumbHorizontal(thumbProps) {
-    return /*#__PURE__*/_react["default"].createElement("div", _extends({}, thumbProps, {
-      style: _objectSpread(_objectSpread({}, thumbProps.style), {}, {
-        backgroundColor: palette.thumb,
-        height: trackWidth,
-        borderRadius: '4px'
-      })
-    }));
-  };
-  return /*#__PURE__*/_react["default"].createElement(_reactCustomScrollbars.Scrollbars, {
-    autoHeight: autoHeight,
-    autoHeightMin: 0,
-    autoHeightMax: maxHeight,
-    renderThumbHorizontal: renderThumbHorizontal,
-    renderThumbVertical: renderThumbVertical
+  return /*#__PURE__*/_react["default"].createElement(S.Wrapper, {
+    $maxHeight: maxHeight,
+    $trackWidth: trackWidth,
+    $thumb: palette.thumb,
+    $autoHeight: autoHeight
   }, children);
 };

package/dist/components/common/Scrollbar/styles.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+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>, {
+    $maxHeight: number | string;
+    $trackWidth: number;
+    $thumb: string;
+    $autoHeight: boolean;
+}>> & string;

package/dist/components/common/Scrollbar/styles.js

@@ -0,0 +1,30 @@
+"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 = void 0;
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+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 Wrapper = exports.Wrapper = _styledComponents["default"].div.withConfig({
+  displayName: "styles__Wrapper",
+  componentId: "sc-1pl0pr3-0"
+})(["overflow-y:auto;overflow-x:hidden;", " scrollbar-width:thin;scrollbar-color:", " transparent;&::-webkit-scrollbar{width:", "px;height:", "px;}&::-webkit-scrollbar-track{background:transparent;}&::-webkit-scrollbar-thumb{background-color:", ";border-radius:4px;}"], function (_ref) {
+  var $autoHeight = _ref.$autoHeight,
+    $maxHeight = _ref.$maxHeight;
+  return $autoHeight ? (0, _styledComponents.css)(["max-height:", ";"], typeof $maxHeight === 'number' ? "".concat($maxHeight, "px") : $maxHeight) : (0, _styledComponents.css)(["height:100%;"]);
+}, function (_ref2) {
+  var $thumb = _ref2.$thumb;
+  return $thumb;
+}, function (_ref3) {
+  var $trackWidth = _ref3.$trackWidth;
+  return $trackWidth;
+}, function (_ref4) {
+  var $trackWidth = _ref4.$trackWidth;
+  return $trackWidth;
+}, function (_ref5) {
+  var $thumb = _ref5.$thumb;
+  return $thumb;
+});

package/dist/components/common/Toast/styles.js

@@ -7,7 +7,7 @@ exports.Container = void 0;
 var _reactToastify = require("react-toastify");
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _breakpoints = require("../../../breakpoints");
-var _hexToRgba = _interopRequireDefault(require("hex-to-rgba"));
+var _hexToRgba = _interopRequireDefault(require("../../../utils/hexToRgba"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 var Container = exports.Container = (0, _styledComponents["default"])(_reactToastify.ToastContainer).withConfig({
   displayName: "styles__Container",

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

@@ -28,6 +28,7 @@ type TControlProps = {
     usePadding?: boolean;
     dropdownWidth?: string;
     useModernStyles?: boolean;
+    isDropdownDisabled?: boolean;
 };
 export type TProps = TFieldProps & TControlProps;
 export declare const Autocomplete: React.ForwardRefExoticComponent<Pick<React.InputHTMLAttributes<HTMLInputElement>, "name" | "readOnly" | "autoFocus" | "onFocus" | "onBlur"> & {

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

@@ -65,12 +65,22 @@ var Autocomplete = exports.Autocomplete = /*#__PURE__*/(0, _react.forwardRef)(fu
     usePadding = _ref$usePadding === void 0 ? false : _ref$usePadding,
     dropdownWidth = _ref.dropdownWidth,
     _ref$useModernStyles = _ref.useModernStyles,
-    useModernStyles = _ref$useModernStyles === void 0 ? false : _ref$useModernStyles;
+    useModernStyles = _ref$useModernStyles === void 0 ? false : _ref$useModernStyles,
+    _ref$isDropdownDisabl = _ref.isDropdownDisabled,
+    isDropdownDisabled = _ref$isDropdownDisabl === void 0 ? false : _ref$isDropdownDisabl;
   var isMobile = (0, _useMedia.useMobile)();
   var _useState = (0, _react.useState)(false),
     _useState2 = _slicedToArray(_useState, 2),
     isOpen = _useState2[0],
     setIsOpen = _useState2[1];
+  // Активная (подсвеченная клавиатурой) опция для combobox-навигации ↑/↓/Enter/Esc.
+  var _useState3 = (0, _react.useState)(-1),
+    _useState4 = _slicedToArray(_useState3, 2),
+    activeIndex = _useState4[0],
+    setActiveIndex = _useState4[1];
+  var baseId = (0, _react.useId)();
+  var listboxId = "".concat(baseId, "-listbox");
+  var activeOptionRef = (0, _react.useRef)(null);
   var palette = (0, _palette.useComponentPalette)('autocompleteDefaultOption');
   var _useInputFocus = (0, _useInputFocus2.useInputFocus)({
       onFocus: onFocus,
@@ -83,10 +93,14 @@ var Autocomplete = exports.Autocomplete = /*#__PURE__*/(0, _react.forwardRef)(fu
     return setIsOpen(true);
   }, []);
   var handleClose = (0, _react.useCallback)(function () {
-    return setIsOpen(false);
+    setIsOpen(false);
+    setActiveIndex(-1);
   }, []);
-  var wrapperRef = (0, _useOutsideClick.useOutsideClick)(handleClose);
+  var dropdownRef = (0, _react.useRef)(null);
+  var wrapperRef = (0, _useOutsideClick.useOutsideClick)(handleClose, [dropdownRef]);
   var handleChange = (0, _react.useCallback)(function (event) {
+    // Ввод нового запроса сбрасывает клавиатурную подсветку (результаты сменятся).
+    setActiveIndex(-1);
     onChange(event.target.value);
   }, [onChange]);
   var handleSelect = (0, _react.useCallback)(function (event) {
@@ -127,6 +141,58 @@ var Autocomplete = exports.Autocomplete = /*#__PURE__*/(0, _react.forwardRef)(fu
   var isModernPlaceholderVisible = (0, _react.useMemo)(function () {
     return !isOpen && !value;
   }, [isOpen, value]);
+  var isDropdownOpen = !isDropdownDisabled && isOpen && (!!options.length || !!isLoading);
+  // Скелетоны показываем ТОЛЬКО когда опций ещё нет (первая загрузка). При повторных запросах
+  // (ввод символов) держим прежние опции — иначе лоадер мерцает на каждое изменение.
+  var showSkeletons = !!isLoading && options.length === 0;
+  var getOptionId = function getOptionId(index) {
+    return "".concat(baseId, "-option-").concat(index);
+  };
+
+  // Активная опция всегда видна в прокручиваемом списке.
+  (0, _react.useEffect)(function () {
+    var _activeOptionRef$curr;
+    (_activeOptionRef$curr = activeOptionRef.current) === null || _activeOptionRef$curr === void 0 || _activeOptionRef$curr.scrollIntoView({
+      block: 'nearest'
+    });
+  }, [activeIndex]);
+  var handleKeyDown = function handleKeyDown(event) {
+    if (disabled || readOnly) return;
+    var count = options.length;
+    switch (event.key) {
+      case 'ArrowDown':
+        event.preventDefault();
+        if (!isOpen) {
+          handleOpen();
+        } else if (count) {
+          setActiveIndex(function (prev) {
+            return (prev + 1) % count;
+          });
+        }
+        break;
+      case 'ArrowUp':
+        event.preventDefault();
+        if (count) setActiveIndex(function (prev) {
+          return prev <= 0 ? count - 1 : prev - 1;
+        });
+        break;
+      case 'Enter':
+        if (isDropdownOpen && activeIndex >= 0 && activeIndex < count && !options[activeIndex].isDisabled) {
+          event.preventDefault();
+          onChange(options[activeIndex].value, options[activeIndex]);
+          handleClose();
+        }
+        break;
+      case 'Escape':
+        if (isDropdownOpen) {
+          event.preventDefault();
+          handleClose();
+        }
+        break;
+      default:
+        break;
+    }
+  };
   return /*#__PURE__*/_react["default"].createElement(S.Wrapper, {
     ref: wrapperRef
   }, /*#__PURE__*/_react["default"].createElement(_InputLabel.InputLabel, {
@@ -159,15 +225,27 @@ var Autocomplete = exports.Autocomplete = /*#__PURE__*/(0, _react.forwardRef)(fu
     isOnlyNumbers: isInputOnlyNumbers,
     autoFocus: autoFocus,
     readOnly: readOnly,
-    useModernStyles: useModernStyles
+    useModernStyles: useModernStyles,
+    onKeyDown: handleKeyDown,
+    role: "combobox",
+    "aria-expanded": isDropdownOpen,
+    "aria-controls": isDropdownOpen ? listboxId : undefined,
+    "aria-autocomplete": "list",
+    "aria-activedescendant": isDropdownOpen && activeIndex >= 0 ? getOptionId(activeIndex) : undefined
   }, paddingOptions)))), /*#__PURE__*/_react["default"].createElement(_Dropdown.Dropdown, {
+    ref: dropdownRef,
     isOpen: isOpen && (!!options.length || !!isLoading),
     isAutoPosition: true,
     width: dropdownWidth || '100%',
     minWidth: isMobile ? '100%' : '340px',
     usePadding: usePadding
-  }, isLoading ? optionsLoader || /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(DefaultSkeletonItem, null), /*#__PURE__*/_react["default"].createElement(DefaultSkeletonItem, null), /*#__PURE__*/_react["default"].createElement(DefaultSkeletonItem, null)) : /*#__PURE__*/_react["default"].createElement(_Scrollbar.Scrollbar, {
+  }, showSkeletons ? /*#__PURE__*/_react["default"].createElement(_Scrollbar.Scrollbar, {
     maxHeight: listHeight
+  }, optionsLoader || /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(DefaultSkeletonItem, null), /*#__PURE__*/_react["default"].createElement(DefaultSkeletonItem, null), /*#__PURE__*/_react["default"].createElement(DefaultSkeletonItem, null))) : /*#__PURE__*/_react["default"].createElement(_Scrollbar.Scrollbar, {
+    maxHeight: listHeight
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    role: "listbox",
+    id: listboxId
   }, options.map(function (option, index) {
     return /*#__PURE__*/_react["default"].createElement(S.OptionWrapperWithPadding, {
       $usePadding: usePadding,
@@ -175,17 +253,23 @@ var Autocomplete = exports.Autocomplete = /*#__PURE__*/(0, _react.forwardRef)(fu
     }, /*#__PURE__*/_react["default"].createElement(S.OptionContainer, {
       $hoverBg: palette.hoverBg,
       $usePadding: usePadding,
-      key: "".concat(option.value).concat(index)
+      $active: index === activeIndex
     }, /*#__PURE__*/_react["default"].createElement(S.OptionWrapper, {
-      key: "".concat(option.value).concat(index),
+      ref: index === activeIndex ? activeOptionRef : undefined,
+      id: getOptionId(index),
+      role: "option",
+      "aria-selected": index === activeIndex,
       tabIndex: -1,
       type: "button",
       disabled: option.isDisabled,
       onClick: handleSelect,
+      onMouseEnter: function onMouseEnter() {
+        return setActiveIndex(index);
+      },
       "data-index": JSON.stringify(index)
     }, renderOption ? renderOption(option) : /*#__PURE__*/_react["default"].createElement(_AutocompleteDefaultOption.AutocompleteDefaultOption, {
       usePadding: usePadding
     }, option.value))));
-  }))));
+  })))));
 });
 Autocomplete.displayName = 'Autocomplete';