@invoicebox/ui 0.1.0-alpha.294 → 0.1.0-alpha.296

package/dist/components/form/common/DrawerHeader/components/Cross24Icon/index.stories.d.ts

@@ -1,5 +1,5 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { Cross24Icon } from './index';
-declare const meta: Meta<typeof Cross24Icon>;
-export default meta;
-export declare const Default: StoryObj<typeof Cross24Icon>;
+import type { Meta, StoryObj } from '@storybook/react';
+import { Cross24Icon } from './index';
+declare const meta: Meta<typeof Cross24Icon>;
+export default meta;
+export declare const Default: StoryObj<typeof Cross24Icon>;

package/dist/components/form/common/DrawerHeader/index.d.ts

@@ -1,8 +1,8 @@
-import { FC } from 'react';
-export type TProps = {
-    onClose: () => void;
-    onSubmit?: () => void;
-    label: string;
-    isSubmitDisabled?: boolean;
-};
-export declare const DrawerHeader: FC<TProps>;
+import { FC } from 'react';
+export type TProps = {
+    onClose: () => void;
+    onSubmit?: () => void;
+    label: string;
+    isSubmitDisabled?: boolean;
+};
+export declare const DrawerHeader: FC<TProps>;

package/dist/components/form/common/DrawerHeader/index.stories.d.ts

@@ -1,5 +1,5 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { DrawerHeader, TProps } from './index';
-declare const meta: Meta<typeof DrawerHeader>;
-export default meta;
-export declare const Default: StoryObj<TProps>;
+import type { Meta, StoryObj } from '@storybook/react';
+import { DrawerHeader, TProps } from './index';
+declare const meta: Meta<typeof DrawerHeader>;
+export default meta;
+export declare const Default: StoryObj<TProps>;

package/dist/components/form/common/DrawerHeader/palette.d.ts

@@ -1,7 +1,7 @@
-import { TAbstractPalette } from '../../../../palette';
-export type TDrawerHeaderPalette = {
-    headLabel: string;
-    applyButton: string;
-    border: string;
-};
-export declare const generateDrawerHeaderPalette: (abstractPalette: TAbstractPalette) => TDrawerHeaderPalette;
+import { TAbstractPalette } from '../../../../palette';
+export type TDrawerHeaderPalette = {
+    headLabel: string;
+    applyButton: string;
+    border: string;
+};
+export declare const generateDrawerHeaderPalette: (abstractPalette: TAbstractPalette) => TDrawerHeaderPalette;

package/dist/components/form/common/DrawerHeader/styles.d.ts

@@ -1,11 +1,11 @@
-/// <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>, {
-    $borderColor: string;
-}>> & string;
-export declare const CloseButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>> & string;
-export declare const HeadLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("../../../common/Typography").TTypographyProps & import("styled-components/dist/types").BaseObject, {
-    $color: string;
-}>> & string & Omit<import("react").FC<import("../../../common/Typography").TTypographyProps>, keyof import("react").Component<any, {}, any>>;
-export declare const ApplyButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
-    $color: string;
-}>> & string;
+/// <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>, {
+    $borderColor: string;
+}>> & string;
+export declare const CloseButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>> & string;
+export declare const HeadLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("../../../common/Typography").TTypographyProps & import("styled-components/dist/types").BaseObject, {
+    $color: string;
+}>> & string & Omit<import("react").FC<import("../../../common/Typography").TTypographyProps>, keyof import("react").Component<any, {}, any>>;
+export declare const ApplyButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
+    $color: string;
+}>> & string;

package/dist/components/form/constants.d.ts

@@ -1,14 +1,14 @@
-import { typography } from '../common/Typography/typography';
-export type TSizes = 'L' | 'M' | 'XS';
-export declare const SIZE_PARAMS_MAP: Record<TSizes, {
-    paddingTop: number;
-    paddingBottom: number;
-    variant: keyof typeof typography;
-}>;
-export declare const MODERN_STYLE_SIZE_PARAMS_MAP: Record<TSizes, {
-    paddingTop: number;
-    paddingBottom: number;
-    variant: keyof typeof typography;
-    labelVariant: keyof typeof typography;
-    labelPaddingTop: number;
-}>;
+import { typography } from '../common/Typography/typography';
+export type TSizes = 'L' | 'M' | 'XS';
+export declare const SIZE_PARAMS_MAP: Record<TSizes, {
+    paddingTop: number;
+    paddingBottom: number;
+    variant: keyof typeof typography;
+}>;
+export declare const MODERN_STYLE_SIZE_PARAMS_MAP: Record<TSizes, {
+    paddingTop: number;
+    paddingBottom: number;
+    variant: keyof typeof typography;
+    labelVariant: keyof typeof typography;
+    labelPaddingTop: number;
+}>;

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,41 +26,107 @@ 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"
   }, title)), /*#__PURE__*/React.createElement(S.ChildrenWrapper, {
-    $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,58 @@
 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;"], 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;
 });

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

@@ -4,10 +4,11 @@ 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, { useCallback, useRef, useState } from 'react';
+import React, { forwardRef, useCallback, useLayoutEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
 import * as S from './styles';
 import { useComponentPalette } from '../../../palette';
-export var Dropdown = function Dropdown(_ref) {
+export var Dropdown = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
   var children = _ref.children,
     isOpen = _ref.isOpen,
     _ref$isAutoPosition = _ref.isAutoPosition,
@@ -37,6 +38,42 @@ export var Dropdown = function Dropdown(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     elRef = _useState2[0],
     setElRef = _useState2[1];
+
+  // Якорь остаётся в потоке на месте поля-триггера; по его родителю (само поле) считаем,
+  // куда поставить вынесенный порталом дропдаун.
+  var anchorRef = useRef(null);
+  var _useState3 = 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, пока открыт.
+  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 = useCallback(function (event) {
     if (event.propertyName !== 'opacity') return;
     if (isOpen) return;
@@ -59,18 +96,17 @@ export var 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 = useRef(null);
   if (elRef) {
@@ -95,8 +131,21 @@ export var Dropdown = function Dropdown(_ref) {
       };
     }
   }
-  return /*#__PURE__*/React.createElement(S.Wrapper, {
-    ref: setElRef,
+  var setWrapperRef = useCallback(function (node) {
+    setElRef(node);
+    if (typeof forwardedRef === 'function') forwardedRef(node);else if (forwardedRef) forwardedRef.current = node;
+  }, [forwardedRef]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(S.Anchor, {
+    ref: anchorRef
+  }), layerRect && /*#__PURE__*/createPortal(/*#__PURE__*/React.createElement(S.PositionLayer, {
+    style: {
+      top: layerRect.top,
+      left: layerRect.left,
+      width: layerRect.width,
+      height: layerRect.height
+    }
+  }, /*#__PURE__*/React.createElement(S.Wrapper, {
+    ref: setWrapperRef,
     $isVisible: isOpen,
     $isAbove: position.current.isAbove,
     $translateY: position.current.translateY,
@@ -109,5 +158,6 @@ export var Dropdown = function Dropdown(_ref) {
     onTransitionEnd: handleCloseTransitionEnd,
     $palette: palette,
     $usePadding: usePadding
-  }, children);
-};
+  }, children)), document.body));
+});
+Dropdown.displayName = 'Dropdown';

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

@@ -1,10 +1,24 @@
 import styled, { css } from 'styled-components';
+// Невидимый якорь в потоке: по его родителю (поле-триггер) считаем позицию портал-дропдауна.
+// display:none — не влияет на вёрстку, но parentElement (само поле) доступен для измерений.
+export var Anchor = styled.span.withConfig({
+  displayName: "styles__Anchor",
+  componentId: "sc-1f1enhf-0"
+})(["display:none;"]);
+
+// Слой-обёртка дропдауна: вынесена порталом в body и спозиционирована fixed точно над полем
+// (через inline top/left/width/height). pointer-events:none — сам слой не перехватывает клики
+// (его площадь = полю), кликабелен только внутренний Wrapper.
+export var PositionLayer = styled.div.withConfig({
+  displayName: "styles__PositionLayer",
+  componentId: "sc-1f1enhf-1"
+})(["position:fixed;z-index:1000;pointer-events:none;"]);
 var hidden = css(["visibility:hidden;opacity:0;transition:visibility 0ms 200ms,opacity 200ms 0ms ease;"]);
 var visible = css(["visibility:visible;opacity:1;transition:visibility 0ms 0ms,opacity 200ms 0ms ease;"]);
 export var Wrapper = styled.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/esm/components/form/Autocomplete/components/Autocomplete/index.js

@@ -87,7 +87,8 @@ export var Autocomplete = /*#__PURE__*/forwardRef(function (_ref, ref) {
     setIsOpen(false);
     setActiveIndex(-1);
   }, []);
-  var wrapperRef = useOutsideClick(handleClose);
+  var dropdownRef = useRef(null);
+  var wrapperRef = useOutsideClick(handleClose, [dropdownRef]);
   var handleChange = useCallback(function (event) {
     // Ввод нового запроса сбрасывает клавиатурную подсветку (результаты сменятся).
     setActiveIndex(-1);
@@ -223,6 +224,7 @@ export var Autocomplete = /*#__PURE__*/forwardRef(function (_ref, ref) {
     "aria-autocomplete": "list",
     "aria-activedescendant": isDropdownOpen && activeIndex >= 0 ? getOptionId(activeIndex) : undefined
   }, paddingOptions)))), /*#__PURE__*/React.createElement(Dropdown, {
+    ref: dropdownRef,
     isOpen: isOpen && (!!options.length || !!isLoading),
     isAutoPosition: true,
     width: dropdownWidth || '100%',

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

@@ -12,7 +12,7 @@ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" !=
 function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
-import React, { useCallback, useMemo, useState } from 'react';
+import React, { useCallback, useMemo, useRef, useState } from 'react';
 import * as S from './stlyes';
 import { CountryItem } from './components/CountryItem';
 import { SearchInput } from '../SearchInput';
@@ -57,7 +57,8 @@ export var CountrySelect = function CountrySelect(_ref) {
       return !flag;
     });
   }, []);
-  var wrapperRef = useOutsideClick(handleDropdownClose);
+  var dropdownRef = useRef(null);
+  var wrapperRef = useOutsideClick(handleDropdownClose, [dropdownRef]);
   var sortedOptions = useMemo(function () {
     return [selectedOption].concat(_toConsumableArray(options.filter(function (option) {
       return option !== selectedOption;
@@ -84,6 +85,7 @@ export var CountrySelect = function CountrySelect(_ref) {
   }), !disabled && /*#__PURE__*/React.createElement(Arrow, {
     isOpen: isOpen
   })), /*#__PURE__*/React.createElement(Dropdown, _extends({
+    ref: dropdownRef,
     isOpen: isOpen,
     onCloseTransitionEnd: handleClear,
     zIndex: 6,

package/dist/esm/components/form/CurrencyInput/README.md

@@ -1,24 +1,24 @@
-# Компоненты для ввода валюты
-
-## CoreCurrencyInput
-
-Служебный компонент, необходим для реализации иных компонентов. Недопустимо его прямое использование в компонентах вне текущей директории.
-
-## CurrencyInputNumber
-
-Компонент реализует неконтролируемый инпут. Возвращает в onChange число.
-
-## CurrencyInputString
-
-Компонент реализует контролируемый инпут. Возвращает в onChange строку.
-
-## Причины разной реализации инпута валюты
-
-Мы не можем сделать инпут CurrencyInputNumber контролируемым т.к. нам нужно сохранять разделения разрядов и делитель целой и дробной части - это хранится
-в строке. И вы будем вынуждены каждый раз в сабмите конвертировать число в строку.
-
-CurrencyInputNumber необходим для типовых сценариев, когда мы хотим что-то ввести в инпут и на выходе (в сабмите) получать число. 
-Обратная стороны заключается в том, что мы не можем влияя на форму, менять значение инпута т.к. инпут неконтролируемый. 
-Для влияния на значение придётся обновить defaultValue и вызвать перерендер.
-
-CurrencyInputString необходим для сценариев когда мы хотим влияя на форму изменять значение инпута без сложностей. Недостатком является строка на выходе (в сабмите).
+# Компоненты для ввода валюты
+
+## CoreCurrencyInput
+
+Служебный компонент, необходим для реализации иных компонентов. Недопустимо его прямое использование в компонентах вне текущей директории.
+
+## CurrencyInputNumber
+
+Компонент реализует неконтролируемый инпут. Возвращает в onChange число.
+
+## CurrencyInputString
+
+Компонент реализует контролируемый инпут. Возвращает в onChange строку.
+
+## Причины разной реализации инпута валюты
+
+Мы не можем сделать инпут CurrencyInputNumber контролируемым т.к. нам нужно сохранять разделения разрядов и делитель целой и дробной части - это хранится
+в строке. И вы будем вынуждены каждый раз в сабмите конвертировать число в строку.
+
+CurrencyInputNumber необходим для типовых сценариев, когда мы хотим что-то ввести в инпут и на выходе (в сабмите) получать число. 
+Обратная стороны заключается в том, что мы не можем влияя на форму, менять значение инпута т.к. инпут неконтролируемый. 
+Для влияния на значение придётся обновить defaultValue и вызвать перерендер.
+
+CurrencyInputString необходим для сценариев когда мы хотим влияя на форму изменять значение инпута без сложностей. Недостатком является строка на выходе (в сабмите).

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

@@ -54,7 +54,8 @@ export var DateInput = function DateInput(_ref) {
   var handleClose = useCallback(function () {
     return setOpenFlag(false);
   }, []);
-  var elRef = useOutsideClick(handleClose);
+  var dropdownRef = useRef(null);
+  var elRef = useOutsideClick(handleClose, [dropdownRef]);
   var _useInputFocus = useInputFocus({
       onFocus: onFocus,
       onBlur: onBlur
@@ -160,6 +161,7 @@ export var DateInput = function DateInput(_ref) {
     minDate: minDate,
     maxDate: maxDate
   }) : /*#__PURE__*/React.createElement(Dropdown, _extends({
+    ref: dropdownRef,
     isOpen: isOpen,
     isAutoPosition: true
   }, dropdownProps), /*#__PURE__*/React.createElement(S.CalendarWrapper, null, /*#__PURE__*/React.createElement(Calendar, {

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

@@ -69,7 +69,8 @@ export var DateTimeInput = function DateTimeInput(_ref) {
   var handleTrigger = useCallback(function () {
     return isOpen ? handleCloseAndSkipDropdownValue() : setOpenFlag(true);
   }, [handleCloseAndSkipDropdownValue, isOpen]);
-  var elRef = useOutsideClick(handleCloseAndSkipDropdownValue);
+  var dropdownRef = useRef(null);
+  var elRef = useOutsideClick(handleCloseAndSkipDropdownValue, [dropdownRef]);
   var _useTimePickerHeight = useTimePickerHeight(isOpen),
     calendarRef = _useTimePickerHeight.calendarRef,
     handleTimePickerSetHeight = _useTimePickerHeight.handleTimePickerSetHeight,
@@ -180,6 +181,7 @@ export var DateTimeInput = function DateTimeInput(_ref) {
     onClick: handleTrigger,
     $color: palette.icon
   }, /*#__PURE__*/React.createElement(CalendarIcon, null)))), !isMobile ? /*#__PURE__*/React.createElement(Dropdown, _extends({
+    ref: dropdownRef,
     isOpen: isOpen,
     isAutoPosition: true
   }, dropdownProps), /*#__PURE__*/React.createElement(S.CalendarWithTimePicker, {