@homecode/ui 5.1.3 → 5.1.5

package/dist/esm/src/components/Popup/Popup.helpers.js

@@ -6,6 +6,105 @@ import 'compareq';
 import 'lodash.pick';
 import '../../tools/queryParams.js';
 
+const ZERO_BOUNDARY_FIT = {
+    left: 0,
+    top: 0,
+    maxWidth: null,
+};
+function viewportClientRectEdges() {
+    const vv = typeof window !== 'undefined' && window.visualViewport
+        ? window.visualViewport
+        : null;
+    if (vv) {
+        return {
+            left: vv.offsetLeft,
+            top: vv.offsetTop,
+            right: vv.offsetLeft + vv.width,
+            bottom: vv.offsetTop + vv.height,
+        };
+    }
+    const d = document.documentElement;
+    return {
+        left: 0,
+        top: 0,
+        right: d.clientWidth,
+        bottom: d.clientHeight,
+    };
+}
+function domRectToEdges(r) {
+    return {
+        left: r.left,
+        top: r.top,
+        right: r.right,
+        bottom: r.bottom,
+    };
+}
+function intersectEdges(a, b) {
+    const left = Math.max(a.left, b.left);
+    const top = Math.max(a.top, b.top);
+    const right = Math.min(a.right, b.right);
+    const bottom = Math.min(a.bottom, b.bottom);
+    if (left >= right || top >= bottom)
+        return undefined;
+    return { left, top, right, bottom };
+}
+function shrinkEdgesUniform(outer, top, right, bottom, left) {
+    return {
+        left: outer.left + left,
+        top: outer.top + top,
+        right: outer.right - right,
+        bottom: outer.bottom - bottom,
+    };
+}
+function edgesWidth(edges) {
+    return Math.max(0, edges.right - edges.left);
+}
+function popupBoundaryPadding(baseGap, offset) {
+    const n = (num) => Number(num) || 0;
+    return {
+        top: baseGap + n(offset?.top),
+        right: baseGap + n(offset?.right),
+        bottom: baseGap + n(offset?.bottom),
+        left: baseGap + n(offset?.left),
+    };
+}
+function popupBoundaryEdges({ boundary, boundaryMountSelector, inline, padding, }) {
+    let outer = viewportClientRectEdges();
+    const mode = boundary ?? (inline ? 'viewport' : 'clipping');
+    if (mode === 'clipping' && !inline) {
+        const mountElem = document.querySelector(boundaryMountSelector);
+        if (mountElem instanceof Element) {
+            outer =
+                intersectEdges(outer, domRectToEdges(mountElem.getBoundingClientRect())) ?? outer;
+        }
+    }
+    const inner = shrinkEdgesUniform(outer, padding.top, padding.right, padding.bottom, padding.left);
+    return inner.left < inner.right && inner.top < inner.bottom ? inner : outer;
+}
+function constrainAxisShift(pref, lo, hi) {
+    if (lo > hi)
+        return lo;
+    return Math.min(Math.max(pref, lo), hi);
+}
+/** Minimal shift to move `rect` into `inner`, preferring zero. */
+function shiftMarginsIntoBounds(rect, inner) {
+    const dxMin = inner.left - rect.left;
+    const dxMax = inner.right - rect.right;
+    const dyMin = inner.top - rect.top;
+    const dyMax = inner.bottom - rect.bottom;
+    return {
+        marginLeft: constrainAxisShift(0, dxMin, dxMax),
+        marginTop: constrainAxisShift(0, dyMin, dyMax),
+    };
+}
+function fitRectToBoundary(rect, boundary, maxWidth) {
+    const { marginLeft, marginTop } = shiftMarginsIntoBounds(rect, boundary);
+    return {
+        left: Number.isFinite(marginLeft) ? marginLeft : 0,
+        top: Number.isFinite(marginTop) ? marginTop : 0,
+        maxWidth,
+    };
+}
 const childs = {};
 let popupIds = 0;
 const getId = () => ++popupIds;
@@ -28,4 +127,4 @@ function unsetChild(rootId, id) {
         delete childs[rootId];
 }
 
-export { childs, getId, getPopupId, isLastChild, setChild, unsetChild };
+export { ZERO_BOUNDARY_FIT, childs, constrainAxisShift, domRectToEdges, edgesWidth, fitRectToBoundary, getId, getPopupId, intersectEdges, isLastChild, popupBoundaryEdges, popupBoundaryPadding, setChild, shiftMarginsIntoBounds, shrinkEdgesUniform, unsetChild, viewportClientRectEdges };

package/dist/esm/src/components/Popup/Popup.js

@@ -1,9 +1,10 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { getId, getPopupId, isLastChild, unsetChild, childs, setChild } from './Popup.helpers.js';
+import { ZERO_BOUNDARY_FIT, getId, getPopupId, popupBoundaryEdges, popupBoundaryPadding, edgesWidth, fitRectToBoundary, isLastChild, unsetChild, childs, setChild } from './Popup.helpers.js';
 import { observe, unobserve } from '../../tools/resizeObserver.js';
 import { Component, createRef } from 'react';
 import { Paranja } from '../Paranja/Paranja.js';
 import { Portal } from '../Portal/Portal.js';
+import { config } from '../../tools/config.js';
 import S from './Popup.styl.js';
 import Time from 'timen';
 import cn from 'classnames';
@@ -14,7 +15,7 @@ import throttle from '../../tools/throttle.js';
 
 const ANIMATION_DURATION = 100;
 const OFFSET_GAP = 10;
-const INITIAL_OFFSET = { top: 0, left: 0 };
+const BOUNDARY_FIT_EPSILON = 1;
 class Popup extends Component {
     rootElem = createRef();
     triggerElem = createRef();
@@ -25,6 +26,9 @@ class Popup extends Component {
         if (elem) {
             this.unsubscribeSizeChange();
             this.subscribeSizeChange();
+            if (this.state.isOpen) {
+                this.updateBounds();
+            }
         }
     };
     focused = false;
@@ -33,12 +37,12 @@ class Popup extends Component {
     subscribedSizeChange = false;
     pointerDownTarget = null;
     isPointerPressedInside = false;
-    needDropOffset = false;
     id;
     parentPopupContent;
     timers = Time.create();
     scrollParent;
-    offset = { ...INITIAL_OFFSET };
+    shiftOuterRafId = 0;
+    shiftInnerRafId = 0;
     static defaultProps = {
         size: 'm',
         direction: '',
@@ -51,6 +55,7 @@ class Popup extends Component {
         animating: false,
         direction: this.props.direction,
         triggerBounds: null,
+        boundaryFit: ZERO_BOUNDARY_FIT,
     };
     constructor(props) {
         super(props);
@@ -58,6 +63,11 @@ class Popup extends Component {
     }
     componentDidMount() {
         const { hoverControl, focusControl } = this.props;
+        const vv = isBrowser ? window.visualViewport : null;
+        if (vv) {
+            vv.addEventListener('resize', this.onBoundaryGeometryChange);
+            vv.addEventListener('scroll', this.onBoundaryGeometryChange);
+        }
         const parentPopupContent = this.triggerElem.current.closest(`.${S.content}`);
         document.addEventListener('pointerdown', this.onDocPointerDown, true);
         document.addEventListener('pointerup', this.onDocPointerUp, true);
@@ -73,8 +83,17 @@ class Popup extends Component {
         if (hoverControl)
             this.subscribeHoverControl();
         this.subscribeScroll();
+        if (this.state.isOpen &&
+            this.state.isContentVisible &&
+            this.containerElem) {
+            this.scheduleComputeShift();
+        }
     }
-    componentDidUpdate(prevProps) {
+    onBoundaryGeometryChange = throttle(() => {
+        if (this.state.isOpen)
+            this.scheduleComputeShift();
+    }, 100);
+    componentDidUpdate(prevProps, prevState) {
         const { isOpen, disabled, hoverControl } = this.props;
         if (disabled !== prevProps.disabled) {
             this.setState({ isOpen: false }); // close when receive disabled=true
@@ -87,10 +106,29 @@ class Popup extends Component {
         if (typeof isOpen === 'boolean' && isOpen !== prevProps.isOpen) {
             isOpen ? this.open() : this.close();
         }
+        const justOpened = !prevState.isOpen &&
+            this.state.isOpen &&
+            this.state.isContentVisible &&
+            Boolean(this.containerElem);
+        const triggerBoundsCommitted = this.state.isOpen &&
+            this.state.isContentVisible &&
+            Boolean(this.containerElem) &&
+            prevState.triggerBounds === null &&
+            this.state.triggerBounds !== null;
+        if (justOpened || triggerBoundsCommitted) {
+            this.scheduleComputeShift();
+        }
     }
     componentWillUnmount() {
         this.timers.clear();
-        document.removeEventListener('keyup', this.onDocKeyUp, true);
+        cancelAnimationFrame(this.shiftOuterRafId);
+        cancelAnimationFrame(this.shiftInnerRafId);
+        const vv = isBrowser ? window.visualViewport : null;
+        if (vv) {
+            vv.removeEventListener('resize', this.onBoundaryGeometryChange);
+            vv.removeEventListener('scroll', this.onBoundaryGeometryChange);
+        }
+        document.removeEventListener('keyup', this.onDocKeyUp);
         if (this.scrollParent) {
             this.scrollParent.removeEventListener('scroll', this.close);
         }
@@ -133,7 +171,7 @@ class Popup extends Component {
         document.removeEventListener('pointerup', this.checkHover);
     }
     updateBounds() {
-        if (this.state.animating || !this.containerElem)
+        if (!this.containerElem)
             return;
         if (!this.triggerElem.current)
             return;
@@ -151,42 +189,78 @@ class Popup extends Component {
         Object.entries(bounds).forEach(([key, value]) => {
             this.triggerElem.current.style[key] = value;
         });
-        this.updateOffset();
         this.setState({ triggerBounds: bounds });
+        this.scheduleComputeShift();
     }, 200, { trailing: true });
-    prevContentBounds = { width: 0, height: 0 };
-    updateOffset = () => {
-        const content = this.containerElem.getBoundingClientRect();
-        if (!content.height ||
-            !content.width ||
-            this.prevContentBounds.width !== content.width ||
-            this.prevContentBounds.height !== content.height) {
-            this.prevContentBounds = content;
-            Time.after(100, this.updateOffset);
+    scheduleComputeShift() {
+        if (!isBrowser)
+            return;
+        cancelAnimationFrame(this.shiftOuterRafId);
+        cancelAnimationFrame(this.shiftInnerRafId);
+        this.shiftOuterRafId = window.requestAnimationFrame(() => {
+            this.shiftOuterRafId = 0;
+            this.shiftInnerRafId = window.requestAnimationFrame(() => {
+                this.shiftInnerRafId = 0;
+                this.computeBoundaryShift();
+            });
+        });
+    }
+    computeBoundaryShift = () => {
+        if (!this.containerElem ||
+            !this.state.isOpen ||
+            !this.state.isContentVisible) {
             return;
         }
-        const { offset } = this;
-        const { innerHeight, innerWidth } = window;
-        const bottom = content.top + content.height + OFFSET_GAP - offset.top;
-        const right = content.left + content.width + OFFSET_GAP - offset.left;
-        if (content.top < 0) {
-            offset.top = -content.top + OFFSET_GAP;
-        }
-        else if (bottom > innerHeight) {
-            offset.top = innerHeight - bottom;
+        const el = this.containerElem;
+        const wrapper = el.parentElement;
+        if (!(wrapper instanceof HTMLElement)) {
+            return;
         }
-        if (content.left < 0) {
-            offset.left = -content.left + OFFSET_GAP;
+        const { boundary, boundaryMountSelector, inline, shiftPadding, offset } = this.props;
+        const bounds = popupBoundaryEdges({
+            boundary,
+            boundaryMountSelector: boundaryMountSelector ?? `#${config.appOverlayId}`,
+            inline,
+            padding: popupBoundaryPadding(OFFSET_GAP + (shiftPadding ?? 0), offset),
+        });
+        const availWidth = edgesWidth(bounds);
+        const fitWidth = availWidth >= BOUNDARY_FIT_EPSILON ? Math.floor(availWidth) : null;
+        const measured = this.measureBoundaryRect(el, wrapper, fitWidth, bounds);
+        this.setBoundaryFit(fitRectToBoundary(measured.rect, bounds, measured.maxWidth));
+    };
+    measureBoundaryRect(el, wrapper, fitWidth, bounds) {
+        const transform = wrapper.style.transform;
+        const maxWidth = el.style.maxWidth;
+        const overflowX = el.style.overflowX;
+        const overflowY = el.style.overflowY;
+        wrapper.style.transform = '';
+        el.style.maxWidth = '';
+        el.style.overflowX = '';
+        el.style.overflowY = '';
+        void wrapper.offsetHeight;
+        let rect = el.getBoundingClientRect();
+        const shouldClamp = fitWidth !== null &&
+            rect.width > edgesWidth(bounds) + BOUNDARY_FIT_EPSILON;
+        if (shouldClamp) {
+            el.style.maxWidth = `${fitWidth}px`;
+            el.style.overflowX = 'auto';
+            el.style.overflowY = 'hidden';
+            void el.offsetHeight;
+            rect = el.getBoundingClientRect();
         }
-        else if (right > innerWidth) {
-            offset.left = innerWidth - right;
+        wrapper.style.transform = transform;
+        el.style.maxWidth = maxWidth;
+        el.style.overflowX = overflowX;
+        el.style.overflowY = overflowY;
+        return { rect, maxWidth: shouldClamp ? fitWidth : null };
+    }
+    setBoundaryFit(boundaryFit) {
+        const prev = this.state.boundaryFit;
+        if (prev.left !== boundaryFit.left ||
+            prev.top !== boundaryFit.top ||
+            prev.maxWidth !== boundaryFit.maxWidth) {
+            this.setState({ boundaryFit });
         }
-        this.applyOffset();
-    };
-    applyOffset() {
-        const { left, top } = this.offset;
-        this.containerElem.style.marginTop = `${top}px`;
-        this.containerElem.style.marginLeft = `${left}px`;
     }
     checkHover = debounce((e) => {
         if (this.isPointerPressedInside)
@@ -234,17 +308,15 @@ class Popup extends Component {
     }
     onScroll = throttle(e => {
         if (!this.state.isOpen) {
-            const { top, left } = this.offset;
-            if (left || top) {
-                this.offset = { ...INITIAL_OFFSET };
-                this.applyOffset();
+            const { top, left, maxWidth } = this.state.boundaryFit;
+            if (left || top || maxWidth !== null) {
+                this.setState({ boundaryFit: ZERO_BOUNDARY_FIT });
             }
             return;
         }
         // if scrolling outside this popup - close it
         if (!this.isPointerOver(e.target, S.content) &&
             !childs[this.id]?.length) {
-            this.needDropOffset = true;
             this.close();
         }
     }, 200);
@@ -301,7 +373,10 @@ class Popup extends Component {
         this.updateBounds();
         this.subscribeSizeChange();
         this.subscribeScroll();
-        this.setState({ isContentVisible: true });
+        this.setState({
+            isContentVisible: true,
+            boundaryFit: ZERO_BOUNDARY_FIT,
+        });
         this.changeState(true, this.afterOpen);
         if (rootPopupId)
             setChild(rootPopupId, this.id);
@@ -332,16 +407,12 @@ class Popup extends Component {
         this.props.onAfterOpen?.();
     };
     afterClose = () => {
-        this.setState({ isContentVisible: false });
-        this.dropOffset();
+        this.setState({
+            isContentVisible: false,
+            boundaryFit: ZERO_BOUNDARY_FIT,
+        });
         this.props.onAfterClose?.();
     };
-    dropOffset() {
-        if (!this.needDropOffset)
-            return;
-        this.offset = { ...INITIAL_OFFSET };
-        this.applyOffset();
-    }
     toggle = throttle(() => {
         this.state.isOpen ? this.close() : this.open();
     }, 100);
@@ -372,7 +443,7 @@ class Popup extends Component {
     }
     renderContent() {
         const { content, contentProps = {}, wrapperProps = {}, size, disabled, inline, outlined, animated, paranja, blur, round, elevation, } = this.props;
-        const { isOpen, isContentVisible, animating, direction, triggerBounds, rootPopupId, } = this.state;
+        const { isOpen, isContentVisible, animating, direction, triggerBounds, rootPopupId, boundaryFit, } = this.state;
         if (disabled)
             return null;
         const wrapperClasses = cn(S.contentWrapper, inline && S.inline, isOpen && S.isOpen, animating && S.animating, wrapperProps.className);
@@ -380,11 +451,24 @@ class Popup extends Component {
         const [axis, float] = direction.split('-');
         const classes = cn(S.content, outlined && S.outlined, animated && animating && S.animating, elevation && S[`elevation-${elevation}`], S[`size-${size}`], S[`axis-${axis}`], S[`float-${float || 'middle'}`], blur && S.blur, round && S.round, contentProps.className);
         if (trigger && !inline && triggerBounds) {
-            wrapperProps.style = { ...triggerBounds };
+            const shiftTf = boundaryFit.left !== 0 || boundaryFit.top !== 0
+                ? `translate3d(${boundaryFit.left}px, ${boundaryFit.top}px, 0)`
+                : undefined;
+            wrapperProps.style = {
+                ...triggerBounds,
+                ...wrapperProps.style,
+                ...(shiftTf ? { transform: shiftTf } : {}),
+            };
         }
         const contentNode = (jsx("div", { ...wrapperProps, className: wrapperClasses, children: jsxs("div", { ...contentProps, ref: this.onContainerElemRef, className: classes, suppressHydrationWarning: true, "data-popup-id": this.id, "data-root-popup-id": rootPopupId, style: {
-                    marginTop: 100,
-                    marginLeft: this.offset.left,
+                    ...(contentProps.style ?? {}),
+                    ...(boundaryFit.maxWidth !== null && boundaryFit.maxWidth > 0
+                        ? {
+                            maxWidth: boundaryFit.maxWidth,
+                            overflowX: 'auto',
+                            overflowY: 'hidden',
+                        }
+                        : {}),
                 }, children: [paranja && !rootPopupId && (jsx(Paranja, { visible: isContentVisible, blur: blur })), isContentVisible && jsx(Fragment, { children: content })] }) }));
         if (inline)
             return contentNode;

package/dist/esm/src/components/Popup/Popup.styl.js

@@ -1,6 +1,6 @@
 import styleInject from '../../../node_modules/style-inject/dist/style-inject.es.js';
 
-var css_248z = ".Popup_root__uQ-fP{display:inline-block;position:relative}.Popup_contentWrapper__2yi-2{opacity:0;pointer-events:none;position:absolute}.Popup_contentWrapper__2yi-2.Popup_animating__kR0qF{transition:opacity .1s ease-out}.Popup_contentWrapper__2yi-2.Popup_isOpen__BRIdP{opacity:1;pointer-events:all}.Popup_contentWrapper__2yi-2.Popup_inline__1-l1S.Popup_isOpen__BRIdP{position:relative}.Popup_contentWrapper__2yi-2:not(.Popup_inline__1-l1S),.Popup_contentWrapper__2yi-2:not(.Popup_inline__1-l1S)>.Popup_content__e8Qyu{position:absolute}.Popup_trigger__jQNaQ{cursor:pointer}.Popup_trigger__jQNaQ.Popup_isOpen__BRIdP{position:relative;z-index:11}.Popup_trigger__jQNaQ.Popup_disabled__DlE9y{opacity:.4;pointer-events:none}.Popup_content__e8Qyu{-webkit-backface-visibility:hidden;backface-visibility:hidden;background-color:var(--decent-color);box-shadow:inset 0 0 0 1px var(--accent-color-alpha-50);max-width:70vw;min-width:100%;overflow:hidden;position:relative;transform-origin:top center;z-index:11}.Popup_content__e8Qyu:before{background-color:var(--accent-color-alpha-50);bottom:0;content:\"\";left:0;pointer-events:none;position:absolute;right:0;top:0}.Popup_content__e8Qyu.Popup_blur__1hfU8{-webkit-backdrop-filter:blur(50px);backdrop-filter:blur(50px);background-color:var(--decent-color-alpha-500)}.Popup_content__e8Qyu.Popup_size-xs__7QR-d{border-radius:4px}.Popup_content__e8Qyu.Popup_size-xs__7QR-d.Popup_round__7rD1m{border-radius:12px}.Popup_content__e8Qyu.Popup_size-s__UmixP{border-radius:4px}.Popup_content__e8Qyu.Popup_size-s__UmixP.Popup_round__7rD1m{border-radius:16px}.Popup_content__e8Qyu.Popup_size-m__FYpTL{border-radius:6px}.Popup_content__e8Qyu.Popup_size-m__FYpTL.Popup_round__7rD1m{border-radius:20px}.Popup_content__e8Qyu.Popup_size-l__BTS57{border-radius:8px}.Popup_content__e8Qyu.Popup_size-l__BTS57.Popup_round__7rD1m{border-radius:24px}.Popup_content__e8Qyu.Popup_size-xl__fSfCc{border-radius:10px}.Popup_content__e8Qyu.Popup_size-xl__fSfCc.Popup_round__7rD1m{border-radius:28px}.Popup_content__e8Qyu.Popup_elevation-1__vmP3e{box-shadow:inset 0 0 0 1px var(--accent-color-alpha-50),0 0 var(--p-3) 2px var(--decent-color-alpha-500)}.Popup_content__e8Qyu.Popup_elevation-2__Ci4sI{box-shadow:inset 0 0 0 1px var(--accent-color-alpha-50),0 0 var(--p-5) 2px var(--decent-color-alpha-500)}.Popup_content__e8Qyu.Popup_outlined__g3cJV:after{border-radius:inherit;bottom:0;content:\"\";left:0;pointer-events:none;position:absolute;right:0;top:0}.Popup_isOpen__BRIdP .Popup_content__e8Qyu{opacity:1;pointer-events:all;transform:scaleX(1)}.Popup_animating__kR0qF{transition:70ms ease-out;transition-property:transform,opacity,margin}.Popup_axis-top__BaLgG{bottom:100%}.Popup_axis-bottom__hZwwr{top:100%}.Popup_axis-right__LMYVy{left:100%}.Popup_axis-left__SFKm-{right:100%}.Popup_float-top__8SQAu{bottom:0}.Popup_float-right__mdm-3{left:0}.Popup_float-bottom__7flve{top:0}.Popup_float-left__tz7fX{right:0}.Popup_axis-bottom__hZwwr,.Popup_axis-top__BaLgG{transform:scaleY(.5)}.Popup_axis-bottom__hZwwr.Popup_float-middle__Dmnn1,.Popup_axis-top__BaLgG.Popup_float-middle__Dmnn1{left:50%;transform:translateX(-50%) scaleY(.5)}.Popup_isOpen__BRIdP .Popup_axis-bottom__hZwwr.Popup_float-middle__Dmnn1,.Popup_isOpen__BRIdP .Popup_axis-top__BaLgG.Popup_float-middle__Dmnn1{transform:translateX(-50%) scaleX(1)}.Popup_axis-left__SFKm-,.Popup_axis-right__LMYVy{transform:scaleX(.5)}.Popup_axis-left__SFKm-.Popup_float-middle__Dmnn1,.Popup_axis-right__LMYVy.Popup_float-middle__Dmnn1{top:50%;transform:translateY(-50%) scaleX(.5)}.Popup_isOpen__BRIdP .Popup_axis-left__SFKm-.Popup_float-middle__Dmnn1,.Popup_isOpen__BRIdP .Popup_axis-right__LMYVy.Popup_float-middle__Dmnn1{transform:translateY(-50%) scaleX(1)}.Popup_axis-top__BaLgG.Popup_float-middle__Dmnn1{transform-origin:bottom center}.Popup_axis-top__BaLgG.Popup_float-right__mdm-3{transform-origin:bottom left}.Popup_axis-top__BaLgG.Popup_float-left__tz7fX{transform-origin:bottom right}.Popup_axis-bottom__hZwwr.Popup_float-middle__Dmnn1{transform-origin:top center}.Popup_axis-bottom__hZwwr.Popup_float-right__mdm-3{transform-origin:top left}.Popup_axis-bottom__hZwwr.Popup_float-left__tz7fX{transform-origin:top right}.Popup_axis-right__LMYVy.Popup_float-middle__Dmnn1{transform-origin:center left}.Popup_axis-right__LMYVy.Popup_float-top__8SQAu{transform-origin:bottom left}.Popup_axis-right__LMYVy.Popup_float-bottom__7flve{transform-origin:top left}.Popup_axis-left__SFKm-.Popup_float-middle__Dmnn1{transform-origin:center right}.Popup_axis-left__SFKm-.Popup_float-top__8SQAu{transform-origin:bottom right}.Popup_axis-left__SFKm-.Popup_float-bottom__7flve{transform-origin:top right}";
+var css_248z = ".Popup_root__uQ-fP{display:inline-block;position:relative}.Popup_contentWrapper__2yi-2{opacity:0;pointer-events:none;position:absolute}.Popup_contentWrapper__2yi-2.Popup_animating__kR0qF{transition:opacity .1s ease-out}.Popup_contentWrapper__2yi-2.Popup_isOpen__BRIdP{opacity:1;pointer-events:all}.Popup_contentWrapper__2yi-2.Popup_inline__1-l1S.Popup_isOpen__BRIdP{position:relative}.Popup_contentWrapper__2yi-2:not(.Popup_inline__1-l1S),.Popup_contentWrapper__2yi-2:not(.Popup_inline__1-l1S)>.Popup_content__e8Qyu{position:absolute}.Popup_trigger__jQNaQ{cursor:pointer}.Popup_trigger__jQNaQ.Popup_isOpen__BRIdP{position:relative;z-index:11}.Popup_trigger__jQNaQ.Popup_disabled__DlE9y{opacity:.4;pointer-events:none}.Popup_content__e8Qyu{-webkit-backface-visibility:hidden;backface-visibility:hidden;background-color:var(--decent-color);box-shadow:inset 0 0 0 1px var(--accent-color-alpha-50);box-sizing:border-box;max-width:min(min(560px,70vw),calc(100svw - 16px));min-width:100%;overflow:hidden;position:relative;transform-origin:top center;z-index:11}.Popup_content__e8Qyu:before{background-color:var(--accent-color-alpha-50);bottom:0;content:\"\";left:0;pointer-events:none;position:absolute;right:0;top:0}.Popup_content__e8Qyu.Popup_blur__1hfU8{-webkit-backdrop-filter:blur(50px);backdrop-filter:blur(50px);background-color:var(--decent-color-alpha-500)}.Popup_content__e8Qyu.Popup_size-xs__7QR-d{border-radius:4px}.Popup_content__e8Qyu.Popup_size-xs__7QR-d.Popup_round__7rD1m{border-radius:12px}.Popup_content__e8Qyu.Popup_size-s__UmixP{border-radius:4px}.Popup_content__e8Qyu.Popup_size-s__UmixP.Popup_round__7rD1m{border-radius:16px}.Popup_content__e8Qyu.Popup_size-m__FYpTL{border-radius:6px}.Popup_content__e8Qyu.Popup_size-m__FYpTL.Popup_round__7rD1m{border-radius:20px}.Popup_content__e8Qyu.Popup_size-l__BTS57{border-radius:8px}.Popup_content__e8Qyu.Popup_size-l__BTS57.Popup_round__7rD1m{border-radius:24px}.Popup_content__e8Qyu.Popup_size-xl__fSfCc{border-radius:10px}.Popup_content__e8Qyu.Popup_size-xl__fSfCc.Popup_round__7rD1m{border-radius:28px}.Popup_content__e8Qyu.Popup_elevation-1__vmP3e{box-shadow:inset 0 0 0 1px var(--accent-color-alpha-50),0 0 var(--p-3) 2px var(--decent-color-alpha-500)}.Popup_content__e8Qyu.Popup_elevation-2__Ci4sI{box-shadow:inset 0 0 0 1px var(--accent-color-alpha-50),0 0 var(--p-5) 2px var(--decent-color-alpha-500)}.Popup_content__e8Qyu.Popup_outlined__g3cJV:after{border-radius:inherit;bottom:0;content:\"\";left:0;pointer-events:none;position:absolute;right:0;top:0}.Popup_isOpen__BRIdP .Popup_content__e8Qyu{opacity:1;pointer-events:all;transform:scaleX(1)}.Popup_animating__kR0qF{transition:70ms ease-out;transition-property:transform,opacity,margin}.Popup_axis-top__BaLgG{bottom:100%}.Popup_axis-bottom__hZwwr{top:100%}.Popup_axis-right__LMYVy{left:100%}.Popup_axis-left__SFKm-{right:100%}.Popup_float-top__8SQAu{bottom:0}.Popup_float-right__mdm-3{left:0}.Popup_float-bottom__7flve{top:0}.Popup_float-left__tz7fX{right:0}.Popup_axis-bottom__hZwwr,.Popup_axis-top__BaLgG{transform:scaleY(.5)}.Popup_axis-bottom__hZwwr.Popup_float-middle__Dmnn1,.Popup_axis-top__BaLgG.Popup_float-middle__Dmnn1{left:50%;transform:translateX(-50%) scaleY(.5)}.Popup_isOpen__BRIdP .Popup_axis-bottom__hZwwr.Popup_float-middle__Dmnn1,.Popup_isOpen__BRIdP .Popup_axis-top__BaLgG.Popup_float-middle__Dmnn1{transform:translateX(-50%) scaleX(1)}.Popup_axis-left__SFKm-,.Popup_axis-right__LMYVy{transform:scaleX(.5)}.Popup_axis-left__SFKm-.Popup_float-middle__Dmnn1,.Popup_axis-right__LMYVy.Popup_float-middle__Dmnn1{top:50%;transform:translateY(-50%) scaleX(.5)}.Popup_isOpen__BRIdP .Popup_axis-left__SFKm-.Popup_float-middle__Dmnn1,.Popup_isOpen__BRIdP .Popup_axis-right__LMYVy.Popup_float-middle__Dmnn1{transform:translateY(-50%) scaleX(1)}.Popup_axis-top__BaLgG.Popup_float-middle__Dmnn1{transform-origin:bottom center}.Popup_axis-top__BaLgG.Popup_float-right__mdm-3{transform-origin:bottom left}.Popup_axis-top__BaLgG.Popup_float-left__tz7fX{transform-origin:bottom right}.Popup_axis-bottom__hZwwr.Popup_float-middle__Dmnn1{transform-origin:top center}.Popup_axis-bottom__hZwwr.Popup_float-right__mdm-3{transform-origin:top left}.Popup_axis-bottom__hZwwr.Popup_float-left__tz7fX{transform-origin:top right}.Popup_axis-right__LMYVy.Popup_float-middle__Dmnn1{transform-origin:center left}.Popup_axis-right__LMYVy.Popup_float-top__8SQAu{transform-origin:bottom left}.Popup_axis-right__LMYVy.Popup_float-bottom__7flve{transform-origin:top left}.Popup_axis-left__SFKm-.Popup_float-middle__Dmnn1{transform-origin:center right}.Popup_axis-left__SFKm-.Popup_float-top__8SQAu{transform-origin:bottom right}.Popup_axis-left__SFKm-.Popup_float-bottom__7flve{transform-origin:top right}";
 var S = {"root":"Popup_root__uQ-fP","contentWrapper":"Popup_contentWrapper__2yi-2","animating":"Popup_animating__kR0qF","isOpen":"Popup_isOpen__BRIdP","inline":"Popup_inline__1-l1S","content":"Popup_content__e8Qyu","trigger":"Popup_trigger__jQNaQ","disabled":"Popup_disabled__DlE9y","blur":"Popup_blur__1hfU8","size-xs":"Popup_size-xs__7QR-d","round":"Popup_round__7rD1m","size-s":"Popup_size-s__UmixP","size-m":"Popup_size-m__FYpTL","size-l":"Popup_size-l__BTS57","size-xl":"Popup_size-xl__fSfCc","elevation-1":"Popup_elevation-1__vmP3e","elevation-2":"Popup_elevation-2__Ci4sI","outlined":"Popup_outlined__g3cJV","axis-top":"Popup_axis-top__BaLgG","axis-bottom":"Popup_axis-bottom__hZwwr","axis-right":"Popup_axis-right__LMYVy","axis-left":"Popup_axis-left__SFKm-","float-top":"Popup_float-top__8SQAu","float-right":"Popup_float-right__mdm-3","float-bottom":"Popup_float-bottom__7flve","float-left":"Popup_float-left__tz7fX","float-middle":"Popup_float-middle__Dmnn1"};
 styleInject(css_248z);
 

package/dist/esm/src/components/Virtualized/Virtualized.js

@@ -61,6 +61,16 @@ class Virtualized extends Component {
             return true;
         if (nextProps.wrapElem !== this.props.wrapElem)
             return true;
+        if (nextProps.renderItem !== this.props.renderItem)
+            return true;
+        if (nextProps.totalCount !== this.props.totalCount)
+            return true;
+        if (nextProps.itemHeight !== this.props.itemHeight)
+            return true;
+        if (nextProps.overlapCount !== this.props.overlapCount)
+            return true;
+        if (nextProps.getItemProps !== this.props.getItemProps)
+            return true;
         if (!compare(nextState, this.state))
             return true;
         return false;

package/dist/esm/types/src/components/Popup/Popup.d.ts

@@ -1,8 +1,9 @@
+import * as H from './Popup.helpers';
 import * as T from './Popup.types';
 import { Component } from 'react';
 export declare const ANIMATION_DURATION = 100;
 export type PopupProps = T.Props;
-export declare class Popup extends Component<T.Props> {
+export declare class Popup extends Component<T.Props, T.State> {
     rootElem: import("react").RefObject<HTMLDivElement>;
     triggerElem: import("react").RefObject<HTMLDivElement>;
     containerElem: HTMLDivElement;
@@ -13,31 +14,22 @@ export declare class Popup extends Component<T.Props> {
     subscribedSizeChange: boolean;
     pointerDownTarget: any;
     isPointerPressedInside: boolean;
-    needDropOffset: boolean;
     id: any;
     parentPopupContent: any;
     timers: any;
     scrollParent: any;
-    offset: {
-        top: number;
-        left: number;
-    };
+    shiftOuterRafId: number;
+    shiftInnerRafId: number;
     static defaultProps: {
         size: string;
         direction: string;
         animated: boolean;
     };
-    state: {
-        rootPopupId: any;
-        isOpen: boolean;
-        isContentVisible: boolean;
-        animating: boolean;
-        direction: T.Direction;
-        triggerBounds: any;
-    };
+    state: T.State;
     constructor(props: any);
     componentDidMount(): void;
-    componentDidUpdate(prevProps: T.Props): void;
+    onBoundaryGeometryChange: any;
+    componentDidUpdate(prevProps: T.Props, prevState: T.State): void;
     componentWillUnmount(): void;
     subscribeSizeChange(): void;
     subscribeScroll(): void;
@@ -47,12 +39,13 @@ export declare class Popup extends Component<T.Props> {
     unsubscribeHoverControl(): void;
     updateBounds(): void;
     updateBoundsThrottled: any;
-    prevContentBounds: {
-        width: number;
-        height: number;
+    scheduleComputeShift(): void;
+    computeBoundaryShift: () => void;
+    measureBoundaryRect(el: HTMLDivElement, wrapper: HTMLElement, fitWidth: number | null, bounds: H.ClientRectEdges): {
+        rect: DOMRect;
+        maxWidth: number | null;
     };
-    updateOffset: () => void;
-    applyOffset(): void;
+    setBoundaryFit(boundaryFit: H.BoundaryFit): void;
     checkHover: any;
     isControllable: () => boolean;
     isLastClickInside: () => any;
@@ -73,7 +66,6 @@ export declare class Popup extends Component<T.Props> {
     changeState(isOpen: boolean, callback: any): void;
     afterOpen: () => void;
     afterClose: () => void;
-    dropOffset(): void;
     toggle: any;
     renderTrigger(): JSX.Element;
     renderContent(): JSX.Element;

package/dist/esm/types/src/components/Popup/Popup.helpers.d.ts

@@ -1,4 +1,47 @@
 type Id = number;
+export type ClientRectEdges = {
+    readonly left: number;
+    readonly top: number;
+    readonly right: number;
+    readonly bottom: number;
+};
+type Offset = {
+    top?: number;
+    right?: number;
+    bottom?: number;
+    left?: number;
+};
+type BoundaryPadding = {
+    readonly top: number;
+    readonly right: number;
+    readonly bottom: number;
+    readonly left: number;
+};
+export type BoundaryFit = {
+    readonly left: number;
+    readonly top: number;
+    readonly maxWidth: number | null;
+};
+export declare const ZERO_BOUNDARY_FIT: BoundaryFit;
+export declare function viewportClientRectEdges(): ClientRectEdges;
+export declare function domRectToEdges(r: DOMRectReadOnly): ClientRectEdges;
+export declare function intersectEdges(a: ClientRectEdges, b: ClientRectEdges): ClientRectEdges | undefined;
+export declare function shrinkEdgesUniform(outer: ClientRectEdges, top: number, right: number, bottom: number, left: number): ClientRectEdges;
+export declare function edgesWidth(edges: ClientRectEdges): number;
+export declare function popupBoundaryPadding(baseGap: number, offset?: Offset): BoundaryPadding;
+export declare function popupBoundaryEdges({ boundary, boundaryMountSelector, inline, padding, }: {
+    boundary?: 'viewport' | 'clipping';
+    boundaryMountSelector: string;
+    inline?: boolean;
+    padding: BoundaryPadding;
+}): ClientRectEdges;
+export declare function constrainAxisShift(pref: number, lo: number, hi: number): number;
+/** Minimal shift to move `rect` into `inner`, preferring zero. */
+export declare function shiftMarginsIntoBounds(rect: DOMRectReadOnly, inner: ClientRectEdges): {
+    marginLeft: number;
+    marginTop: number;
+};
+export declare function fitRectToBoundary(rect: DOMRectReadOnly, boundary: ClientRectEdges, maxWidth: number | null): BoundaryFit;
 export declare const childs: Record<Id, Id[]>;
 export declare const getId: () => number;
 export declare const getPopupId: (elem: any, attr?: string) => number;

package/dist/esm/types/src/components/Popup/Popup.types.d.ts

@@ -1,5 +1,6 @@
 import { ComponentType, Size } from '../../types';
 import { DetailedHTMLProps, HTMLAttributes, ReactNode } from 'react';
+import type { BoundaryFit } from './Popup.helpers';
 export type TriggerPropsType = DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> & {
     className?: string;
 };
@@ -26,6 +27,9 @@ export type Props = ComponentType & {
         bottom?: number;
         left?: number;
     };
+    shiftPadding?: number;
+    boundary?: 'viewport' | 'clipping';
+    boundaryMountSelector?: string;
     direction?: Direction;
     trigger?: ReactNode;
     triggerProps?: TriggerPropsType;
@@ -38,6 +42,11 @@ export type Props = ComponentType & {
     onAfterClose?: () => void;
 };
 export type State = {
+    rootPopupId: number | null;
     isOpen: boolean;
     isContentVisible: boolean;
+    animating: boolean;
+    direction: Direction | string;
+    triggerBounds: Record<string, number> | null;
+    boundaryFit: BoundaryFit;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homecode/ui",
-  "version": "5.1.3",
+  "version": "5.1.5",
   "description": "React UI components library",
   "scripts": {
     "tests": "jest",