@evergis/uilib-gl 1.0.136 → 1.0.137

package/dist/organisms/Popover/Popover.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="lodash" />
 import { Component } from "react";
-import { Flip, PopoverPosition, PopoverProps, PopoverPropsDefault } from "./types";
+import { ContentObserver, Flip, PopoverPosition, PopoverProps, PopoverPropsDefault } from "./types";
 export declare class Popover extends Component<PopoverProps> {
     static defaultProps: PopoverPropsDefault;
     anchorNode: HTMLElement | null;
@@ -8,9 +8,29 @@ export declare class Popover extends Component<PopoverProps> {
     popoverAnchorNode: HTMLElement | null;
     flip: Flip | null;
     childrenClicked: boolean;
+    contentObservers: ContentObserver[];
+    heightSyncFrame: number | null;
     saveAnchor: (ref: HTMLElement | null) => null;
     savePopoverAnchor: (ref: HTMLElement | null) => void;
     saveContainer: (ref: HTMLElement | null) => void;
+    /**
+     * Содержимое меняет размер и после открытия: форма раскрывает новые поля, список догружается.
+     * Обрезку по окну пересчитываем вслед за ним, а не только на открытии и ресайзе окна — иначе
+     * выросшее содержимое уезжало бы за край экрана.
+     *
+     * Размер контейнера ловит ResizeObserver, но под обрезкой он замирает: высота ребёнка задана
+     * явно, и рост или сжатие содержимого контейнер уже не меняют. Эти случаи ловит MutationObserver —
+     * по вставке и удалению узлов, то есть ровно когда форма меняет свой состав.
+     */
+    observeContent: (node: HTMLElement | null) => void;
+    disconnectContent: () => void;
+    /**
+     * Пересчёт — в следующем кадре, а не прямо в колбэке: правка высоты внутри колбэка
+     * ResizeObserver зациклила бы его («ResizeObserver loop completed…»), а пачка мутаций одного
+     * рендера схлопывается в один пересчёт.
+     */
+    scheduleHeightSync: () => void;
+    syncContainerHeight: () => void;
     getContainerPosition: (anchorNode: HTMLElement, containerNode: HTMLElement) => PopoverPosition;
     setPositions: import("lodash").DebouncedFunc<() => void>;
     closePopover: (e: Event | MouseEvent | TouchEvent) => void;

package/dist/organisms/Popover/types.d.ts

@@ -40,3 +40,14 @@ export declare type AnchorProps = {
     withTime?: boolean;
     width?: string | number;
 };
+/** Наблюдатель за содержимым поповера — ResizeObserver либо MutationObserver. */
+export interface ContentObserver {
+    disconnect: () => void;
+}
+/**
+ * Конструктор ResizeObserver структурно: сборка (tsdx) идёт своим TypeScript 3.9, в DOM-типах
+ * которого ResizeObserver ещё нет, и прямое имя класса валит сборку.
+ */
+export declare type ResizeObserverConstructor = new (callback: () => void) => ContentObserver & {
+    observe: (target: Element) => void;
+};

package/dist/organisms/Popover/utils.d.ts

@@ -7,5 +7,13 @@ export declare const checkFit: (anchorNode: HTMLElement, containerNode: HTMLElem
     y: boolean;
 };
 export declare const syncPosition: (anchor: HTMLElement, node: HTMLElement) => void;
+/**
+ * Урезает высоту содержимого до места в окне по направлению раскрытия.
+ *
+ * Прошлая обрезка перед замером снимается: иначе мерилась бы уже урезанная высота, и содержимое,
+ * которое с тех пор выросло или сжалось, так и жило бы с устаревшей — выросшее уезжало бы за край
+ * окна, сжавшееся оставляло бы пустоту. Своей прокрутки обрезка не даёт: её включает содержимое.
+ */
+export declare const setPopupContainerHeight: (anchorNode: HTMLElement, node: HTMLElement, targetY: number) => void;
 export declare const getOriginPosition: (flip: Flip | null, origin: Origin) => Position;
 export declare const setPopupContainerPosition: (anchorNode: HTMLElement, node: HTMLElement, { anchorOriginPosition: [anchorX, anchorY], targetOriginPosition: [targetX, targetY], paddingSide }: PopoverPosition, animateAppearance: boolean, animateX: boolean, animateY: boolean) => void;

package/dist/uilib-gl.esm.js

@@ -17667,11 +17667,43 @@ const syncPosition = (anchor, node) => {
   node.style.top = `${top}px`;
   node.style.left = `${newLeft}px`;
 };
+/**
+ * Метки обрезки в data-атрибутах самого ребёнка: что высоту поставил Popover, и какой она была до
+ * него. Обрезку нужно уметь снять, не затерев собственную инлайн-высоту содержимого.
+ */
+
+const CLAMPED_HEIGHT_KEY = "popoverClampedHeight";
+const OWN_HEIGHT_KEY = "popoverOwnHeight";
+
+const releaseClampedHeight = childNode => {
+  if (childNode.dataset[CLAMPED_HEIGHT_KEY] === undefined) return;
+  childNode.style.height = childNode.dataset[OWN_HEIGHT_KEY] ?? "";
+  delete childNode.dataset[CLAMPED_HEIGHT_KEY];
+  delete childNode.dataset[OWN_HEIGHT_KEY];
+};
+
+const clampHeight = (childNode, height) => {
+  if (childNode.dataset[CLAMPED_HEIGHT_KEY] === undefined) {
+    childNode.dataset[OWN_HEIGHT_KEY] = childNode.style.height;
+    childNode.dataset[CLAMPED_HEIGHT_KEY] = "";
+  }
+
+  childNode.style.height = `${height}px`;
+};
+/**
+ * Урезает высоту содержимого до места в окне по направлению раскрытия.
+ *
+ * Прошлая обрезка перед замером снимается: иначе мерилась бы уже урезанная высота, и содержимое,
+ * которое с тех пор выросло или сжалось, так и жило бы с устаревшей — выросшее уезжало бы за край
+ * окна, сжавшееся оставляло бы пустоту. Своей прокрутки обрезка не даёт: её включает содержимое.
+ */
+
 
 const setPopupContainerHeight = (anchorNode, node, targetY) => {
-  if (!node.firstChild) return;
+  if (!(node.firstChild instanceof HTMLElement)) return;
   const clientHeight = window.innerHeight;
   const childNode = node.firstChild;
+  releaseClampedHeight(childNode);
   const childNodeHeight = childNode.offsetHeight;
   const anchorBounds = anchorNode.getBoundingClientRect();
   const anchorPosY = anchorBounds.top;
@@ -17680,16 +17712,15 @@ const setPopupContainerHeight = (anchorNode, node, targetY) => {
   const downDirection = 0;
 
   if (targetY === upDirection && childNodeHeight > anchorPosY) {
-    childNode.style.height = `${anchorPosY}px`;
+    clampHeight(childNode, anchorPosY);
   }
 
   if (targetY === downDirection && childNodeHeight + anchorPosY > clientHeight) {
     const heightWithTopIndent = childNodeHeight + anchorPosY;
     const delta = heightWithTopIndent - clientHeight;
-    childNode.style.height = `${childNodeHeight - delta - anchorIndent}px`;
+    clampHeight(childNode, childNodeHeight - delta - anchorIndent);
   }
 };
-
 const getOriginPosition = (flip, origin) => flip ? flipPosition(flip, positions[origin]) : positions[origin];
 const setPopupContainerPosition = (anchorNode, node, _ref6, animateAppearance, animateX, animateY) => {
   let {
@@ -17726,6 +17757,8 @@ class Popover extends Component {
     this.flip = null; // Click inside react tree on case when children uses Portal
 
     this.childrenClicked = false;
+    this.contentObservers = [];
+    this.heightSyncFrame = null;
 
     this.saveAnchor = ref => {
       this.anchorNode = ref;
@@ -17738,6 +17771,73 @@ class Popover extends Component {
 
     this.saveContainer = ref => {
       this.containerNode = ref;
+      this.observeContent(ref);
+    };
+    /**
+     * Содержимое меняет размер и после открытия: форма раскрывает новые поля, список догружается.
+     * Обрезку по окну пересчитываем вслед за ним, а не только на открытии и ресайзе окна — иначе
+     * выросшее содержимое уезжало бы за край экрана.
+     *
+     * Размер контейнера ловит ResizeObserver, но под обрезкой он замирает: высота ребёнка задана
+     * явно, и рост или сжатие содержимого контейнер уже не меняют. Эти случаи ловит MutationObserver —
+     * по вставке и удалению узлов, то есть ровно когда форма меняет свой состав.
+     */
+
+
+    this.observeContent = node => {
+      this.disconnectContent();
+      if (!node) return;
+      const {
+        ResizeObserver: ResizeObserverClass
+      } = window;
+
+      if (ResizeObserverClass) {
+        const resizeObserver = new ResizeObserverClass(this.scheduleHeightSync);
+        resizeObserver.observe(node);
+        this.contentObservers.push(resizeObserver);
+      }
+
+      if (typeof MutationObserver !== "undefined") {
+        const mutationObserver = new MutationObserver(this.scheduleHeightSync);
+        mutationObserver.observe(node, {
+          childList: true,
+          subtree: true
+        });
+        this.contentObservers.push(mutationObserver);
+      }
+    };
+
+    this.disconnectContent = () => {
+      this.contentObservers.forEach(observer => observer.disconnect());
+      this.contentObservers = [];
+
+      if (this.heightSyncFrame !== null) {
+        cancelAnimationFrame(this.heightSyncFrame);
+        this.heightSyncFrame = null;
+      }
+    };
+    /**
+     * Пересчёт — в следующем кадре, а не прямо в колбэке: правка высоты внутри колбэка
+     * ResizeObserver зациклила бы его («ResizeObserver loop completed…»), а пачка мутаций одного
+     * рендера схлопывается в один пересчёт.
+     */
+
+
+    this.scheduleHeightSync = () => {
+      if (this.heightSyncFrame !== null) return;
+      this.heightSyncFrame = requestAnimationFrame(() => {
+        this.heightSyncFrame = null;
+        this.syncContainerHeight();
+      });
+    }; // Только высота: полный `setPositions` заново проигрывал бы анимацию появления на каждом изменении.
+
+
+    this.syncContainerHeight = () => {
+      if (!this.anchorNode || !this.containerNode) return;
+      const {
+        targetOriginPosition: [, targetY]
+      } = this.getContainerPosition(this.anchorNode, this.containerNode);
+      setPopupContainerHeight(this.anchorNode, this.containerNode, targetY);
     };
 
     this.getContainerPosition = (anchorNode, containerNode) => {
@@ -17840,6 +17940,7 @@ class Popover extends Component {
 
   componentWillUnmount() {
     this.removeListeners();
+    this.disconnectContent();
   }
 
   componentDidUpdate(prevProps) {