@via-profit/ui-kit 0.12.0 → 0.12.1

package/CHANGELOG.md

@@ -4,6 +4,12 @@
 
 ## Не выпущено
 
+## 0.12.1 — 2026-11-06
+
+### Исправлено
+
+- **Popper**: автоматически закрывается при удалении элемента привязки из DOM или при передаче `anchorElement={null}`.
+
 ## 0.12.0 — 2026-11-05
 
 ### Добавлено

package/Popper/Popper.d.ts

@@ -16,7 +16,7 @@ export interface PopperProps extends React.HTMLAttributes<HTMLDivElement> {
     readonly isOpen: boolean;
     /**
      * The HTML element to which the popper will be attached and positioned relative to.
-     * While it is `null`, the popper stays hidden even if `isOpen` is `true`.
+     * The popper closes if the element is removed from the DOM or becomes `null`.
      *
      * @required
      * @example

package/Popper/Popper.js

@@ -33,11 +33,29 @@ const react_1 = __importDefault(require("react"));
 const react_dom_1 = __importDefault(require("react-dom"));
 const PopperContainer_1 = __importDefault(require("./PopperContainer"));
 const usePopper_1 = require("./usePopper");
+const getServerAnchorConnected = () => false;
 __exportStar(require("./usePopper"), exports);
 exports.PORTAL_ID = 'ui-kit-portal';
 const Popper = (props, ref) => {
     const { isOpen, children, anchorElement, zIndex, overrides, anchorPos = 'auto', positionStrategy = 'fixed', viewportMargin = 30, autoFlip = false, alternativePlacements, offset = 0, onAnchorPosChanged } = props, nativeProps = __rest(props, ["isOpen", "children", "anchorElement", "zIndex", "overrides", "anchorPos", "positionStrategy", "viewportMargin", "autoFlip", "alternativePlacements", "offset", "onAnchorPosChanged"]);
     const [domLoaded, setDomLoaded] = react_1.default.useState(false);
+    const subscribeToAnchor = react_1.default.useCallback((onChange) => {
+        if (!isOpen || !anchorElement) {
+            return () => { };
+        }
+        const observer = new MutationObserver(onChange);
+        const options = { childList: true, subtree: true };
+        observer.observe(anchorElement.ownerDocument, options);
+        // Mutations inside a shadow root are not reported by the document observer.
+        let root = anchorElement.getRootNode();
+        while (root instanceof ShadowRoot) {
+            observer.observe(root, options);
+            root = root.host.getRootNode();
+        }
+        return () => observer.disconnect();
+    }, [isOpen, anchorElement]);
+    const getAnchorConnected = react_1.default.useCallback(() => isOpen && Boolean(anchorElement === null || anchorElement === void 0 ? void 0 : anchorElement.isConnected), [isOpen, anchorElement]);
+    const canOpen = react_1.default.useSyncExternalStore(subscribeToAnchor, getAnchorConnected, getServerAnchorConnected);
     const { actualPlacement, style, popperRef, isVisible } = (0, usePopper_1.usePopper)({
         anchorElement,
         anchorPos,
@@ -46,7 +64,7 @@ const Popper = (props, ref) => {
         offset,
         viewportMargin,
         alternativePlacements,
-        isOpen,
+        isOpen: canOpen,
     });
     const overridesMap = react_1.default.useMemo(() => ({
         Container: (overrides === null || overrides === void 0 ? void 0 : overrides.Container) || PopperContainer_1.default,
@@ -111,7 +129,7 @@ const Popper = (props, ref) => {
         popperRef,
         ref,
     ]);
-    if (!isOpen) {
+    if (!canOpen) {
         return null;
     }
     if (positionStrategy === 'fixed') {

package/Popper/usePopper.js

@@ -380,7 +380,7 @@ const usePopper = (props) => {
     ]);
     // #region Calculate Position
     const calculatePosition = react_1.default.useCallback(() => {
-        if (!anchorElement || !popperRef.current) {
+        if (!(anchorElement === null || anchorElement === void 0 ? void 0 : anchorElement.isConnected) || !popperRef.current) {
             return;
         }
         const anchorRect = anchorElement.getBoundingClientRect();

package/esm/Popper/Popper.js

@@ -13,11 +13,29 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import Container from './PopperContainer';
 import { usePopper } from './usePopper';
+const getServerAnchorConnected = () => false;
 export * from './usePopper';
 export const PORTAL_ID = 'ui-kit-portal';
 const Popper = (props, ref) => {
     const { isOpen, children, anchorElement, zIndex, overrides, anchorPos = 'auto', positionStrategy = 'fixed', viewportMargin = 30, autoFlip = false, alternativePlacements, offset = 0, onAnchorPosChanged } = props, nativeProps = __rest(props, ["isOpen", "children", "anchorElement", "zIndex", "overrides", "anchorPos", "positionStrategy", "viewportMargin", "autoFlip", "alternativePlacements", "offset", "onAnchorPosChanged"]);
     const [domLoaded, setDomLoaded] = React.useState(false);
+    const subscribeToAnchor = React.useCallback((onChange) => {
+        if (!isOpen || !anchorElement) {
+            return () => { };
+        }
+        const observer = new MutationObserver(onChange);
+        const options = { childList: true, subtree: true };
+        observer.observe(anchorElement.ownerDocument, options);
+        // Mutations inside a shadow root are not reported by the document observer.
+        let root = anchorElement.getRootNode();
+        while (root instanceof ShadowRoot) {
+            observer.observe(root, options);
+            root = root.host.getRootNode();
+        }
+        return () => observer.disconnect();
+    }, [isOpen, anchorElement]);
+    const getAnchorConnected = React.useCallback(() => isOpen && Boolean(anchorElement === null || anchorElement === void 0 ? void 0 : anchorElement.isConnected), [isOpen, anchorElement]);
+    const canOpen = React.useSyncExternalStore(subscribeToAnchor, getAnchorConnected, getServerAnchorConnected);
     const { actualPlacement, style, popperRef, isVisible } = usePopper({
         anchorElement,
         anchorPos,
@@ -26,7 +44,7 @@ const Popper = (props, ref) => {
         offset,
         viewportMargin,
         alternativePlacements,
-        isOpen,
+        isOpen: canOpen,
     });
     const overridesMap = React.useMemo(() => ({
         Container: (overrides === null || overrides === void 0 ? void 0 : overrides.Container) || Container,
@@ -91,7 +109,7 @@ const Popper = (props, ref) => {
         popperRef,
         ref,
     ]);
-    if (!isOpen) {
+    if (!canOpen) {
         return null;
     }
     if (positionStrategy === 'fixed') {

package/esm/Popper/usePopper.js

@@ -373,7 +373,7 @@ export const usePopper = (props) => {
     ]);
     // #region Calculate Position
     const calculatePosition = React.useCallback(() => {
-        if (!anchorElement || !popperRef.current) {
+        if (!(anchorElement === null || anchorElement === void 0 ? void 0 : anchorElement.isConnected) || !popperRef.current) {
             return;
         }
         const anchorRect = anchorElement.getBoundingClientRect();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@via-profit/ui-kit",
-  "version": "0.12.0",
+  "version": "0.12.1",
   "description": "UI Kit",
   "repository": {
     "type": "git",