@invoicebox/ui 0.1.0-alpha.294 → 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/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/form/Autocomplete/components/Autocomplete/index.js

@@ -96,7 +96,8 @@ var Autocomplete = exports.Autocomplete = /*#__PURE__*/(0, _react.forwardRef)(fu
     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);
@@ -232,6 +233,7 @@ var Autocomplete = exports.Autocomplete = /*#__PURE__*/(0, _react.forwardRef)(fu
     "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%',

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

@@ -66,7 +66,8 @@ var CountrySelect = exports.CountrySelect = function CountrySelect(_ref) {
       return !flag;
     });
   }, []);
-  var wrapperRef = (0, _useOutsideClick.useOutsideClick)(handleDropdownClose);
+  var dropdownRef = (0, _react.useRef)(null);
+  var wrapperRef = (0, _useOutsideClick.useOutsideClick)(handleDropdownClose, [dropdownRef]);
   var sortedOptions = (0, _react.useMemo)(function () {
     return [selectedOption].concat(_toConsumableArray(options.filter(function (option) {
       return option !== selectedOption;
@@ -93,6 +94,7 @@ var CountrySelect = exports.CountrySelect = function CountrySelect(_ref) {
   }), !disabled && /*#__PURE__*/_react["default"].createElement(_Arrow.Arrow, {
     isOpen: isOpen
   })), /*#__PURE__*/_react["default"].createElement(_Dropdown.Dropdown, _extends({
+    ref: dropdownRef,
     isOpen: isOpen,
     onCloseTransitionEnd: handleClear,
     zIndex: 6,

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

@@ -63,7 +63,8 @@ var DateInput = exports.DateInput = function DateInput(_ref) {
   var handleClose = (0, _react.useCallback)(function () {
     return setOpenFlag(false);
   }, []);
-  var elRef = (0, _useOutsideClick.useOutsideClick)(handleClose);
+  var dropdownRef = (0, _react.useRef)(null);
+  var elRef = (0, _useOutsideClick.useOutsideClick)(handleClose, [dropdownRef]);
   var _useInputFocus = (0, _useInputFocus2.useInputFocus)({
       onFocus: onFocus,
       onBlur: onBlur
@@ -169,6 +170,7 @@ var DateInput = exports.DateInput = function DateInput(_ref) {
     minDate: minDate,
     maxDate: maxDate
   }) : /*#__PURE__*/_react["default"].createElement(_Dropdown.Dropdown, _extends({
+    ref: dropdownRef,
     isOpen: isOpen,
     isAutoPosition: true
   }, dropdownProps), /*#__PURE__*/_react["default"].createElement(S.CalendarWrapper, null, /*#__PURE__*/_react["default"].createElement(_Calendar.Calendar, {

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

@@ -78,7 +78,8 @@ var DateTimeInput = exports.DateTimeInput = function DateTimeInput(_ref) {
   var handleTrigger = (0, _react.useCallback)(function () {
     return isOpen ? handleCloseAndSkipDropdownValue() : setOpenFlag(true);
   }, [handleCloseAndSkipDropdownValue, isOpen]);
-  var elRef = (0, _useOutsideClick.useOutsideClick)(handleCloseAndSkipDropdownValue);
+  var dropdownRef = (0, _react.useRef)(null);
+  var elRef = (0, _useOutsideClick.useOutsideClick)(handleCloseAndSkipDropdownValue, [dropdownRef]);
   var _useTimePickerHeight = (0, _useTimePickerHeight2.useTimePickerHeight)(isOpen),
     calendarRef = _useTimePickerHeight.calendarRef,
     handleTimePickerSetHeight = _useTimePickerHeight.handleTimePickerSetHeight,
@@ -189,6 +190,7 @@ var DateTimeInput = exports.DateTimeInput = function DateTimeInput(_ref) {
     onClick: handleTrigger,
     $color: palette.icon
   }, /*#__PURE__*/_react["default"].createElement(_CalendarIcon.CalendarIcon, null)))), !isMobile ? /*#__PURE__*/_react["default"].createElement(_Dropdown.Dropdown, _extends({
+    ref: dropdownRef,
     isOpen: isOpen,
     isAutoPosition: true
   }, dropdownProps), /*#__PURE__*/_react["default"].createElement(S.CalendarWithTimePicker, {

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

@@ -95,7 +95,8 @@ var Select = exports.Select = function Select(_ref) {
   var handleHide = (0, _react.useCallback)(function () {
     return setIsOpen(false);
   }, []);
-  var wrapperRef = (0, _useOutsideClick.useOutsideClick)(handleHide);
+  var dropdownRef = (0, _react.useRef)(null);
+  var wrapperRef = (0, _useOutsideClick.useOutsideClick)(handleHide, [dropdownRef]);
   var handleFocus = (0, _react.useCallback)(function (event) {
     handleShow();
     focusHandler(event);
@@ -244,6 +245,7 @@ var Select = exports.Select = function Select(_ref) {
     isOpen: isOpen,
     isPadding: false
   }, /*#__PURE__*/_react["default"].createElement(S.DrawerContent, null, handleDrawerContentRender())) : /*#__PURE__*/_react["default"].createElement(_Dropdown.Dropdown, {
+    ref: dropdownRef,
     isOpen: isOpen,
     isAutoPosition: true,
     width: dropdownWidth || '100%',

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

@@ -4,11 +4,12 @@ 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; }
-import React, { useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import * as S from './styles';
 import { Typography } from '../Typography';
 import { useComponentPalette } from '../../../palette';
-import { Sheet } from 'react-modal-sheet';
+var ANIMATION_MS = 300;
+var DRAG_CLOSE_THRESHOLD = 80;
 export var Drawer = function Drawer(_ref) {
   var isOpen = _ref.isOpen,
     children = _ref.children,
@@ -25,32 +26,102 @@ export var Drawer = function Drawer(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     shouldRender = _useState2[0],
     setShouldRender = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isEntered = _useState4[0],
+    setIsEntered = _useState4[1];
+  var _useState5 = useState(0),
+    _useState6 = _slicedToArray(_useState5, 2),
+    dragOffset = _useState6[0],
+    setDragOffset = _useState6[1];
+  var dragStartYRef = useRef(null);
+  var sheetRef = useRef(null);
 
-  // delay for close drawer and unmount
+  // Монтируем при открытии, размонтируем после анимации закрытия (как раньше — задержка 300мс).
   useEffect(function () {
     if (isOpen) {
       setShouldRender(true);
     } else {
+      setIsEntered(false);
       var timer = setTimeout(function () {
         return setShouldRender(false);
-      }, 300);
+      }, ANIMATION_MS);
       return function () {
         return clearTimeout(timer);
       };
     }
+    return undefined;
   }, [isOpen]);
+
+  // Запускаем enter-переход на кадр позже маунта: сначала лист за экраном (translateY 100%), затем 0.
+  useEffect(function () {
+    if (!shouldRender || !isOpen) return undefined;
+    var raf = requestAnimationFrame(function () {
+      return setIsEntered(true);
+    });
+    return function () {
+      return cancelAnimationFrame(raf);
+    };
+  }, [shouldRender, isOpen]);
+
+  // Блокируем скролл фона, пока боттомшит открыт (как делал react-modal-sheet).
+  useEffect(function () {
+    if (!shouldRender) return undefined;
+    var prev = document.body.style.overflow;
+    document.body.style.overflow = 'hidden';
+    return function () {
+      document.body.style.overflow = prev;
+    };
+  }, [shouldRender]);
+  var handleTransitionEnd = useCallback(function (event) {
+    if (event.target !== sheetRef.current || event.propertyName !== 'transform') return;
+    if (isOpen && isEntered && onOpenEnd) onOpenEnd();
+  }, [isOpen, isEntered, onOpenEnd]);
+  var handlePointerDown = useCallback(function (event) {
+    var _event$currentTarget$, _event$currentTarget;
+    dragStartYRef.current = event.clientY;
+    (_event$currentTarget$ = (_event$currentTarget = event.currentTarget).setPointerCapture) === null || _event$currentTarget$ === void 0 || _event$currentTarget$.call(_event$currentTarget, event.pointerId);
+  }, []);
+  var handlePointerMove = useCallback(function (event) {
+    if (dragStartYRef.current === null) return;
+    var delta = event.clientY - dragStartYRef.current;
+    setDragOffset(delta > 0 ? delta : 0);
+  }, []);
+  var handlePointerUp = useCallback(function () {
+    if (dragStartYRef.current === null) return;
+    var offset = dragOffset;
+    dragStartYRef.current = null;
+    setDragOffset(0);
+    if (offset > DRAG_CLOSE_THRESHOLD) onClose();
+  }, [dragOffset, onClose]);
   if (!shouldRender) return null;
-  return /*#__PURE__*/React.createElement(Sheet, {
-    detent: "content",
-    isOpen: isOpen,
-    onClose: onClose,
-    onOpenEnd: onOpenEnd
-  }, /*#__PURE__*/React.createElement(S.StyledSheetContainer, {
+  var isDragging = dragOffset > 0;
+  var translateY = !isEntered ? '100%' : "".concat(dragOffset, "px");
+  return /*#__PURE__*/React.createElement(S.Root, {
+    role: "dialog",
+    "aria-modal": "true"
+  }, /*#__PURE__*/React.createElement(S.Backdrop, {
+    $bgColor: palette.backdropBg,
+    $isVisible: isEntered,
+    onClick: onClose
+  }), /*#__PURE__*/React.createElement(S.Sheet, {
+    ref: sheetRef,
+    style: {
+      transform: "translateY(".concat(translateY, ")")
+    },
+    $isDragging: isDragging,
     $isErrorBorder: isErrorBorder,
     $errorColor: palette.error,
     $borderColor: borderColor,
-    $overflow: overflow
-  }, /*#__PURE__*/React.createElement(Sheet.Content, null, /*#__PURE__*/React.createElement(S.DragIndicatorWrapper, null, /*#__PURE__*/React.createElement(Sheet.DragIndicator, null)), title && /*#__PURE__*/React.createElement(S.Title, {
+    $overflow: overflow,
+    onTransitionEnd: handleTransitionEnd
+  }, /*#__PURE__*/React.createElement(S.DragHandle, {
+    $bg: title ? palette.titleBg : palette.bg,
+    onPointerDown: handlePointerDown,
+    onPointerMove: handlePointerMove,
+    onPointerUp: handlePointerUp,
+    onPointerCancel: handlePointerUp
+  }, /*#__PURE__*/React.createElement(S.DragIndicator, null)), title && /*#__PURE__*/React.createElement(S.Title, {
     $bg: palette.titleBg
   }, /*#__PURE__*/React.createElement(Typography, {
     variant: "headline4"
@@ -58,8 +129,5 @@ export var Drawer = function Drawer(_ref) {
     $isBorderRadius: !title,
     $bgColor: palette.bg,
     $isPadding: isPadding
-  }, children))), /*#__PURE__*/React.createElement(S.StyledSheetBackdrop, {
-    onTap: onClose,
-    $bgColor: palette.backdropBg
-  }));
+  }, children)));
 };

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

@@ -1,45 +1,61 @@
 import styled, { css } from 'styled-components';
-import { Sheet } from 'react-modal-sheet';
-export var Title = styled.div.withConfig({
-  displayName: "styles__Title",
+export var Root = styled.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;
-});
-export var DragIndicatorWrapper = styled.div.withConfig({
-  displayName: "styles__DragIndicatorWrapper",
+})(["position:fixed;inset:0;z-index:1000;display:flex;align-items:flex-end;justify-content:center;"]);
+export var Backdrop = styled.div.withConfig({
+  displayName: "styles__Backdrop",
   componentId: "sc-1kysg49-1"
-})(["position:absolute;top:12px;left:50%;transform:translateX(-50%);"]);
-export var ChildrenWrapper = styled.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;
+});
+export var Sheet = styled.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 && css(["transition:none;"]);
 }, function (_ref4) {
-  var $isBorderRadius = _ref4.$isBorderRadius;
-  return $isBorderRadius && css(["border-radius:10px 10px 0 0;"]);
+  var $isErrorBorder = _ref4.$isErrorBorder,
+    $errorColor = _ref4.$errorColor,
+    $borderColor = _ref4.$borderColor;
+  return ($isErrorBorder || $borderColor) && css(["border-top:2px solid ", ";"], $borderColor || $errorColor);
+}, function (_ref5) {
+  var $overflow = _ref5.$overflow;
+  return $overflow === 'visible' ? css(["overflow:visible;"]) : css(["overflow-y:auto;"]);
 });
-export var StyledSheetContainer = styled(Sheet.Container).withConfig({
-  displayName: "styles__StyledSheetContainer",
+export var DragHandle = styled.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) && css(["border-top:2px solid ", ";"], $borderColor || $errorColor);
-}, function (_ref6) {
-  var $overflow = _ref6.$overflow;
-  return $overflow === 'visible' && 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;
 });
-export var StyledSheetBackdrop = styled(Sheet.Backdrop).withConfig({
-  displayName: "styles__StyledSheetBackdrop",
+export var DragIndicator = styled.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);"]);
+export var Title = styled.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;
+});
+export var ChildrenWrapper = styled.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 && css(["border-radius:10px 10px 0 0;"]);
 });