@via-profit/ui-kit 0.11.0 → 0.12.1

package/CHANGELOG.md

@@ -4,6 +4,23 @@
 
 ## Не выпущено
 
+## 0.12.1 — 2026-11-06
+
+### Исправлено
+
+- **Popper**: автоматически закрывается при удалении элемента привязки из DOM или при передаче `anchorElement={null}`.
+
+## 0.12.0 — 2026-11-05
+
+### Добавлено
+
+- **Tooltip**: свойство `interactive` — указатель можно перевести на подсказку, чтобы выделить текст или нажать ссылку внутри. Без него подсказка не перехватывает указатель.
+
+### Изменено
+
+- **Tooltip**: по умолчанию подсказка не получает события указателя. Раньше указатель, попавший на подсказку, удерживал её открытой: в плотном списке подсказка нижней кнопки перекрывала кнопку выше, и навести на неё было нельзя. Если подсказку нужно выделять или нажимать в ней, передайте `interactive`;
+- **Popper**: явный `pointerEvents` в `style` больше не затирается — скрытый поппер по-прежнему не перехватывает указатель.
+
 ## 0.11.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,
@@ -81,19 +99,24 @@ const Popper = (props, ref) => {
         }
     }, [actualPlacement]);
     const childrenMemo = react_1.default.useMemo(() => children, [children]);
-    const renderNode = react_1.default.useCallback(() => (react_1.default.createElement(overridesMap.Container, Object.assign({}, nativeProps, { style: Object.assign(Object.assign(Object.assign(Object.assign({}, style), nativeProps.style), { opacity: isVisible ? 1 : 0, pointerEvents: isVisible ? 'auto' : 'none' }), (positionStrategy === 'fixed' && {
-            position: 'fixed',
-        })), zIndex: zIndex, positionStrategy: positionStrategy, "data-popper-placement": actualPlacement, "data-popper-strategy": positionStrategy, ref: el => {
-            popperRef.current = el;
-            if (ref) {
-                if (typeof ref === 'function') {
-                    ref(el);
-                }
-                if (typeof ref === 'object') {
-                    ref.current = el;
+    const renderNode = react_1.default.useCallback(() => {
+        var _a, _b;
+        return (react_1.default.createElement(overridesMap.Container, Object.assign({}, nativeProps, { style: Object.assign(Object.assign(Object.assign(Object.assign({}, style), nativeProps.style), { opacity: isVisible ? 1 : 0, 
+                // A hidden popper never intercepts the pointer; a visible one lets the caller opt out
+                pointerEvents: !isVisible ? 'none' : ((_b = (_a = nativeProps.style) === null || _a === void 0 ? void 0 : _a.pointerEvents) !== null && _b !== void 0 ? _b : 'auto') }), (positionStrategy === 'fixed' && {
+                position: 'fixed',
+            })), zIndex: zIndex, positionStrategy: positionStrategy, "data-popper-placement": actualPlacement, "data-popper-strategy": positionStrategy, ref: el => {
+                popperRef.current = el;
+                if (ref) {
+                    if (typeof ref === 'function') {
+                        ref(el);
+                    }
+                    if (typeof ref === 'object') {
+                        ref.current = el;
+                    }
                 }
-            }
-        } }), childrenMemo)), [
+            } }), childrenMemo));
+    }, [
         overridesMap,
         nativeProps,
         style,
@@ -106,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/Tooltip/index.d.ts

@@ -49,6 +49,12 @@ export type TooltipProps = {
      * Default: false
      */
     readonly describeChild?: boolean;
+    /**
+     * Lets the pointer move onto the tooltip, e.g. to select its text or click a link inside.
+     * When `false`, the tooltip does not receive pointer events and cannot block the elements under it
+     * Default: false
+     */
+    readonly interactive?: boolean;
     /**
      * Default: 8
      */

package/Tooltip/index.js

@@ -45,7 +45,7 @@ const setRef = (ref, value) => {
 const isEmptyTitle = (title) => title === null || typeof title === 'undefined' || title === false || title === '';
 const Tooltip = props => {
     var _a;
-    const { title, children, placement = 'top', arrow = false, enterDelay = 400, leaveDelay = 100, isOpen, onOpenChange, describeChild = false, offset = 8, zIndex, id, overrides, } = props;
+    const { title, children, placement = 'top', arrow = false, enterDelay = 400, leaveDelay = 100, isOpen, onOpenChange, describeChild = false, interactive = false, offset = 8, zIndex, id, overrides, } = props;
     const theme = (0, react_2.useTheme)();
     const generatedId = `tooltip-${react_1.default.useId().replace(/:/g, '')}`;
     const tooltipId = id || generatedId;
@@ -182,12 +182,15 @@ const Tooltip = props => {
     return (react_1.default.createElement(react_1.default.Fragment, null,
         anchor,
         react_1.default.createElement(Popper_1.default, { isOpen: open, anchorElement: anchorElement, anchorPos: placement, autoFlip: true, offset: offset, viewportMargin: 8, zIndex: zIndex !== null && zIndex !== void 0 ? zIndex : theme.zIndex.modal + 1, onAnchorPosChanged: setActualPlacement, id: tooltipId, role: "tooltip", 
-            // The pointer can move from the element onto the tooltip without hiding it
-            onPointerEnter: clearTimer, onPointerLeave: event => {
-                if (isHoverPointer(event)) {
-                    hide(leaveDelay);
+            // Without `interactive` the tooltip must not intercept the pointer: otherwise it
+            // blocks the elements under it and sticks under the cursor that moves across it
+            style: interactive ? undefined : { pointerEvents: 'none' }, onPointerEnter: interactive ? clearTimer : undefined, onPointerLeave: interactive
+                ? event => {
+                    if (isHoverPointer(event)) {
+                        hide(leaveDelay);
+                    }
                 }
-            } },
+                : undefined },
             react_1.default.createElement(overridesMap.Container, null,
                 title,
                 arrow && react_1.default.createElement(overridesMap.Arrow, { placement: actualPlacement })))));

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,
@@ -61,19 +79,24 @@ const Popper = (props, ref) => {
         }
     }, [actualPlacement]);
     const childrenMemo = React.useMemo(() => children, [children]);
-    const renderNode = React.useCallback(() => (React.createElement(overridesMap.Container, Object.assign({}, nativeProps, { style: Object.assign(Object.assign(Object.assign(Object.assign({}, style), nativeProps.style), { opacity: isVisible ? 1 : 0, pointerEvents: isVisible ? 'auto' : 'none' }), (positionStrategy === 'fixed' && {
-            position: 'fixed',
-        })), zIndex: zIndex, positionStrategy: positionStrategy, "data-popper-placement": actualPlacement, "data-popper-strategy": positionStrategy, ref: el => {
-            popperRef.current = el;
-            if (ref) {
-                if (typeof ref === 'function') {
-                    ref(el);
-                }
-                if (typeof ref === 'object') {
-                    ref.current = el;
+    const renderNode = React.useCallback(() => {
+        var _a, _b;
+        return (React.createElement(overridesMap.Container, Object.assign({}, nativeProps, { style: Object.assign(Object.assign(Object.assign(Object.assign({}, style), nativeProps.style), { opacity: isVisible ? 1 : 0, 
+                // A hidden popper never intercepts the pointer; a visible one lets the caller opt out
+                pointerEvents: !isVisible ? 'none' : ((_b = (_a = nativeProps.style) === null || _a === void 0 ? void 0 : _a.pointerEvents) !== null && _b !== void 0 ? _b : 'auto') }), (positionStrategy === 'fixed' && {
+                position: 'fixed',
+            })), zIndex: zIndex, positionStrategy: positionStrategy, "data-popper-placement": actualPlacement, "data-popper-strategy": positionStrategy, ref: el => {
+                popperRef.current = el;
+                if (ref) {
+                    if (typeof ref === 'function') {
+                        ref(el);
+                    }
+                    if (typeof ref === 'object') {
+                        ref.current = el;
+                    }
                 }
-            }
-        } }), childrenMemo)), [
+            } }), childrenMemo));
+    }, [
         overridesMap,
         nativeProps,
         style,
@@ -86,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/esm/Tooltip/index.js

@@ -40,7 +40,7 @@ const setRef = (ref, value) => {
 const isEmptyTitle = (title) => title === null || typeof title === 'undefined' || title === false || title === '';
 const Tooltip = props => {
     var _a;
-    const { title, children, placement = 'top', arrow = false, enterDelay = 400, leaveDelay = 100, isOpen, onOpenChange, describeChild = false, offset = 8, zIndex, id, overrides, } = props;
+    const { title, children, placement = 'top', arrow = false, enterDelay = 400, leaveDelay = 100, isOpen, onOpenChange, describeChild = false, interactive = false, offset = 8, zIndex, id, overrides, } = props;
     const theme = useTheme();
     const generatedId = `tooltip-${React.useId().replace(/:/g, '')}`;
     const tooltipId = id || generatedId;
@@ -177,12 +177,15 @@ const Tooltip = props => {
     return (React.createElement(React.Fragment, null,
         anchor,
         React.createElement(Popper, { isOpen: open, anchorElement: anchorElement, anchorPos: placement, autoFlip: true, offset: offset, viewportMargin: 8, zIndex: zIndex !== null && zIndex !== void 0 ? zIndex : theme.zIndex.modal + 1, onAnchorPosChanged: setActualPlacement, id: tooltipId, role: "tooltip", 
-            // The pointer can move from the element onto the tooltip without hiding it
-            onPointerEnter: clearTimer, onPointerLeave: event => {
-                if (isHoverPointer(event)) {
-                    hide(leaveDelay);
+            // Without `interactive` the tooltip must not intercept the pointer: otherwise it
+            // blocks the elements under it and sticks under the cursor that moves across it
+            style: interactive ? undefined : { pointerEvents: 'none' }, onPointerEnter: interactive ? clearTimer : undefined, onPointerLeave: interactive
+                ? event => {
+                    if (isHoverPointer(event)) {
+                        hide(leaveDelay);
+                    }
                 }
-            } },
+                : undefined },
             React.createElement(overridesMap.Container, null,
                 title,
                 arrow && React.createElement(overridesMap.Arrow, { placement: actualPlacement })))));

package/package.json

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