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

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/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, {

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

@@ -85,7 +85,8 @@ export var Select = function Select(_ref) {
   var handleHide = useCallback(function () {
     return setIsOpen(false);
   }, []);
-  var wrapperRef = useOutsideClick(handleHide);
+  var dropdownRef = useRef(null);
+  var wrapperRef = useOutsideClick(handleHide, [dropdownRef]);
   var handleFocus = useCallback(function (event) {
     handleShow();
     focusHandler(event);
@@ -234,6 +235,7 @@ export var Select = function Select(_ref) {
     isOpen: isOpen,
     isPadding: false
   }, /*#__PURE__*/React.createElement(S.DrawerContent, null, handleDrawerContentRender())) : /*#__PURE__*/React.createElement(Dropdown, {
+    ref: dropdownRef,
     isOpen: isOpen,
     isAutoPosition: true,
     width: dropdownWidth || '100%',

package/dist/esm/hooks/useOutsideClick/index.js

@@ -1,16 +1,27 @@
 import { useEffect, useRef } from 'react';
+
+// extraRefs — узлы, которые физически вне основного ref (например, дропдаун, вынесенный порталом
+// в document.body), но логически ему принадлежат: клик по ним НЕ считается «снаружи». Без этого
+// портал-дропдаун ловил бы клик как outside и схлопывался. По умолчанию пусто — обратная
+// совместимость со старыми вызовами `const ref = useOutsideClick(onClick)`.
 export var useOutsideClick = function useOutsideClick(onClick) {
+  var extraRefs = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
   var ref = useRef(null);
+  var extraRefsRef = useRef(extraRefs);
+  extraRefsRef.current = extraRefs;
   useEffect(function () {
     var handleOutsideClick = function handleOutsideClick(event) {
-      if (ref.current && !ref.current.contains(event.target)) {
-        onClick();
-      }
+      var target = event.target;
+      if (ref.current && ref.current.contains(target)) return;
+      if (extraRefsRef.current.some(function (extra) {
+        return extra.current && extra.current.contains(target);
+      })) return;
+      onClick();
     };
     document.addEventListener('mousedown', handleOutsideClick);
     return function () {
       document.removeEventListener('mousedown', handleOutsideClick);
     };
-  }, [ref, onClick]);
+  }, [onClick]);
   return ref;
 };

package/dist/hooks/useOutsideClick/index.d.ts

@@ -1,2 +1,2 @@
-/// <reference types="react" />
-export declare const useOutsideClick: (onClick: () => void) => import("react").RefObject<HTMLDivElement>;
+import { RefObject } from 'react';
+export declare const useOutsideClick: (onClick: () => void, extraRefs?: ReadonlyArray<RefObject<HTMLElement>>) => RefObject<HTMLDivElement>;

package/dist/hooks/useOutsideClick/index.js

@@ -5,18 +5,28 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useOutsideClick = void 0;
 var _react = require("react");
+// extraRefs — узлы, которые физически вне основного ref (например, дропдаун, вынесенный порталом
+// в document.body), но логически ему принадлежат: клик по ним НЕ считается «снаружи». Без этого
+// портал-дропдаун ловил бы клик как outside и схлопывался. По умолчанию пусто — обратная
+// совместимость со старыми вызовами `const ref = useOutsideClick(onClick)`.
 var useOutsideClick = exports.useOutsideClick = function useOutsideClick(onClick) {
+  var extraRefs = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
   var ref = (0, _react.useRef)(null);
+  var extraRefsRef = (0, _react.useRef)(extraRefs);
+  extraRefsRef.current = extraRefs;
   (0, _react.useEffect)(function () {
     var handleOutsideClick = function handleOutsideClick(event) {
-      if (ref.current && !ref.current.contains(event.target)) {
-        onClick();
-      }
+      var target = event.target;
+      if (ref.current && ref.current.contains(target)) return;
+      if (extraRefsRef.current.some(function (extra) {
+        return extra.current && extra.current.contains(target);
+      })) return;
+      onClick();
     };
     document.addEventListener('mousedown', handleOutsideClick);
     return function () {
       document.removeEventListener('mousedown', handleOutsideClick);
     };
-  }, [ref, onClick]);
+  }, [onClick]);
   return ref;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@invoicebox/ui",
-    "version": "0.1.0-alpha.294",
+    "version": "0.1.0-alpha.295",
     "description": "Invoicebox UI",
     "license": "Apache License 2.0",
     "scripts": {
@@ -32,6 +32,7 @@
         "@storybook/react-webpack5": "^7.6.13",
         "@storybook/test": "^7.6.13",
         "@types/jest": "^29.5.8",
+        "@types/react-dom": "^18.3.7",
         "@typescript-eslint/eslint-plugin": "^5.62.0",
         "@typescript-eslint/parser": "^5.62.0",
         "babel-plugin-inline-json-import": "^0.3.2",
@@ -56,7 +57,6 @@
         "qrcode.react": "^3.1.0",
         "react-calendar": "^4.8.0",
         "react-currency-input-field": "^3.10.0",
-        "react-modal-sheet": "^5.6.0",
         "react-toastify": "^9.1.3"
     },
     "peerDependencies": {