@homecode/ui 5.1.9 → 5.1.11

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

@@ -1,2 +1,484 @@
-import{jsx,jsxs,Fragment}from"react/jsx-runtime";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";import debounce from"../../tools/debounce.js";import{getCoords}from"../../tools/dom.js";import{isBrowser}from"../../tools/env.js";import throttle from"../../tools/throttle.js";const ANIMATION_DURATION=100,OFFSET_GAP=10,BOUNDARY_FIT_EPSILON=1;class Popup extends Component{rootElem=createRef();triggerElem=createRef();containerElem=null;onContainerElemRef=t=>{(this.containerElem=t)&&(this.unsubscribeSizeChange(),this.subscribeSizeChange(),this.state.isOpen)&&this.updateBounds()};focused=!1;pointerPressed=!1;subscribedHoverControl=!1;subscribedSizeChange=!1;pointerDownTarget=null;isPointerPressedInside=!1;id;parentPopupContent;timers=Time.create();scrollParent;shiftOuterRafId=0;shiftInnerRafId=0;static defaultProps={size:"m",direction:"",animated:!0};state={rootPopupId:null,isOpen:Boolean(this.props.isOpen),isContentVisible:Boolean(this.props.isOpen),animating:!1,direction:this.props.direction,triggerBounds:null,boundaryFit:ZERO_BOUNDARY_FIT};constructor(t){super(t),this.id=getId()}componentDidMount(){var{hoverControl:t,focusControl:e}=this.props,s=isBrowser?window.visualViewport:null,s=(s&&(s.addEventListener("resize",this.onBoundaryGeometryChange),s.addEventListener("scroll",this.onBoundaryGeometryChange)),this.triggerElem.current.closest("."+S.content));document.addEventListener("pointerdown",this.onDocPointerDown,!0),document.addEventListener("pointerup",this.onDocPointerUp,!0),s&&(s=getPopupId(s,"data-root-popup-id")||getPopupId(s,"data-popup-id"),this.setState({rootPopupId:s})),e&&(document.addEventListener("keydown",this.onDocKeyDown,!0),document.addEventListener("keyup",this.onDocKeyUp)),t&&this.subscribeHoverControl(),this.subscribeScroll(),this.state.isOpen&&this.state.isContentVisible&&this.containerElem&&this.scheduleComputeShift()}onBoundaryGeometryChange=throttle(()=>{this.state.isOpen&&this.scheduleComputeShift()},100);componentDidUpdate(t,e){var{isOpen:s,disabled:i,hoverControl:o}=this.props;i!==t.disabled?this.setState({isOpen:!1}):(!t.hoverControl&&o&&this.subscribeHoverControl(),t.hoverControl&&!o&&this.unsubscribeHoverControl(),"boolean"==typeof s&&s!==t.isOpen&&(s?this.open():this.close()),i=!e.isOpen&&this.state.isOpen&&this.state.isContentVisible&&Boolean(this.containerElem),o=this.state.isOpen&&this.state.isContentVisible&&Boolean(this.containerElem)&&null===e.triggerBounds&&null!==this.state.triggerBounds,(i||o)&&this.scheduleComputeShift())}componentWillUnmount(){this.timers.clear(),cancelAnimationFrame(this.shiftOuterRafId),cancelAnimationFrame(this.shiftInnerRafId);var t=isBrowser?window.visualViewport:null;t&&(t.removeEventListener("resize",this.onBoundaryGeometryChange),t.removeEventListener("scroll",this.onBoundaryGeometryChange)),document.removeEventListener("keyup",this.onDocKeyUp),this.scrollParent&&this.scrollParent.removeEventListener("scroll",this.close),this.unsubscribeHoverControl(),this.unsubscribeSizeChange(),this.unsubscribeScroll()}subscribeSizeChange(){this.subscribedSizeChange||(this.subscribedSizeChange=!0,observe(this.triggerElem.current,this.onTriggerResize),observe(this.containerElem,this.onContainerResize))}subscribeScroll(){isBrowser&&!this.props.inline&&document.addEventListener("scroll",this.onScroll,!0)}unsubscribeScroll(){document.removeEventListener("scroll",this.onScroll,!0)}unsubscribeSizeChange(){this.subscribedSizeChange=!1,unobserve(this.triggerElem.current),unobserve(this.containerElem)}subscribeHoverControl(){this.subscribedHoverControl||(this.subscribedHoverControl=!0,document.addEventListener("pointermove",this.checkHover),document.addEventListener("pointerup",this.checkHover))}unsubscribeHoverControl(){this.subscribedHoverControl&&(this.subscribedHoverControl=!1,document.removeEventListener("pointermove",this.checkHover),document.removeEventListener("pointerup",this.checkHover))}updateBounds(){this.containerElem&&this.triggerElem.current&&this.updateBoundsThrottled()}updateBoundsThrottled=throttle(()=>{var t=this.triggerElem.current,e=this.props.offset||{},s=t=>t||0,s={minHeight:t.offsetHeight-s(e.top)-s(e.bottom),minWidth:t.offsetWidth-s(e.left)-s(e.right),...getCoords(t,this.props.direction,this.props.offset)};Object.entries(s).forEach(([t,e])=>{this.triggerElem.current.style[t]=e}),this.setState({triggerBounds:s}),this.scheduleComputeShift()},200,{trailing:!0});scheduleComputeShift(){isBrowser&&(cancelAnimationFrame(this.shiftOuterRafId),cancelAnimationFrame(this.shiftInnerRafId),this.shiftOuterRafId=window.requestAnimationFrame(()=>{this.shiftOuterRafId=0,this.shiftInnerRafId=window.requestAnimationFrame(()=>{this.shiftInnerRafId=0,this.computeBoundaryShift()})}))}computeBoundaryShift=()=>{var t,e,s,i,o,r,n;this.containerElem&&this.state.isOpen&&this.state.isContentVisible&&(e=(t=this.containerElem).parentElement)instanceof HTMLElement&&({boundary:i,boundaryMountSelector:o,inline:r,shiftPadding:n,offset:s}=this.props,i=popupBoundaryEdges({boundary:i,boundaryMountSelector:o??"#"+config.appOverlayId,inline:r,padding:popupBoundaryPadding(OFFSET_GAP+(n??0),s)}),r=(o=edgesWidth(i))>=BOUNDARY_FIT_EPSILON?Math.floor(o):null,n=this.measureBoundaryRect(t,e,r,i),this.setBoundaryFit(fitRectToBoundary(n.rect,i,n.maxWidth)))};measureBoundaryRect(t,e,s,i){var o=e.style.transform,r=t.style.maxWidth,n=t.style.overflowX,a=t.style.overflowY;e.style.transform="",t.style.maxWidth="",t.style.overflowX="",t.style.overflowY="",e.offsetHeight;let h=t.getBoundingClientRect();i=null!==s&&h.width>edgesWidth(i)+BOUNDARY_FIT_EPSILON;return i&&(t.style.maxWidth=s+"px",t.style.overflowX="auto",t.style.overflowY="hidden",t.offsetHeight,h=t.getBoundingClientRect()),e.style.transform=o,t.style.maxWidth=r,t.style.overflowX=n,t.style.overflowY=a,{rect:h,maxWidth:i?s:null}}setBoundaryFit(t){var e=this.state.boundaryFit;e.left===t.left&&e.top===t.top&&e.maxWidth===t.maxWidth||this.setState({boundaryFit:t})}checkHover=debounce(t=>{var e,s,i,o;this.isPointerPressedInside||({isOpen:e,rootPopupId:s}=this.state,i=this.isPointerOver(t.target,S.trigger),o=this.isPointerOver(t.target,S.content),e?i||o||("number"==typeof s?isLastChild(s,this.id)&&(this.close(),unsetChild(s,this.id)):t.target.closest("."+S.content)&&childs[this.id]?.length||this.close()):i&&this.open())},100);isControllable=()=>"boolean"==typeof this.props.isOpen;isLastClickInside=()=>this.pointerDownTarget&&(this.pointerDownTarget.closest("."+S.trigger)||this.pointerDownTarget.closest("."+S.content));onDocPointerDown=t=>{this.pointerDownTarget=t.target,this.isPointerPressedInside=this.isLastClickInside(),this.timers.after(100,()=>this.pointerDownTarget=null)};onDocPointerUp=t=>{this.isPointerPressedInside||this.close(),this.isPointerPressedInside=!1};isPointerOver(t,e){return t.closest(`.${e}[data-popup-id="${this.id}"]`)}onScroll=throttle(t=>{var e,s;this.state.isOpen?this.isPointerOver(t.target,S.content)||childs[this.id]?.length||this.close():({top:t,left:e,maxWidth:s}=this.state.boundaryFit,(e||t||null!==s)&&this.setState({boundaryFit:ZERO_BOUNDARY_FIT}))},200);onDocKeyDown=t=>{this.pointerDownTarget=null};onDocKeyUp=t=>{this.state.isOpen&&"Escape"===t.key?(t.stopPropagation(),this.close()):this.focused&&/Enter| /.test(t.key)&&(t.stopPropagation(),this.toggle())};onTriggerPointerDown=t=>{this.pointerDownTarget=t.target,this.pointerPressed=!0};onTriggerPointerUp=t=>{this.pointerPressed=!1,t.traget===this.pointerDownTarget&&this.toggle()};onFocus=t=>{this.focused=!0,this.props.triggerProps?.onFocus?.(t),this.pointerPressed||this.state.isOpen||this.open()};onBlur=t=>{this.focused=!1,this.props.triggerProps?.onBlur?.(t),this.isControllable()&&this.props.isOpen||this.timers.after(60,()=>{this.isLastClickInside()||this.close()})};onTriggerResize=()=>{this.updateBounds()};onContainerResize=()=>{this.updateBounds()};open=throttle(()=>{var t=this.state["rootPopupId"];this.state.isOpen||(this.updateBounds(),this.subscribeSizeChange(),this.subscribeScroll(),this.setState({isContentVisible:!0,boundaryFit:ZERO_BOUNDARY_FIT}),this.changeState(!0,this.afterOpen),t&&setChild(t,this.id))},100);close=()=>{this.state.isOpen&&(this.unsubscribeSizeChange(),this.changeState(!1,this.afterClose))};changeState(t,e){var{animated:s,onOpen:i,onClose:o}=this.props;this.timers.clear(),this.setState({isOpen:t}),(t?i:o)?.(),s?(this.setState({animating:!0}),this.timers.after(ANIMATION_DURATION+500,()=>{this.setState({animating:!1}),e()})):e()}afterOpen=()=>{this.props.onAfterOpen?.()};afterClose=()=>{this.setState({isContentVisible:!1,boundaryFit:ZERO_BOUNDARY_FIT}),this.props.onAfterClose?.()};toggle=throttle(()=>{this.state.isOpen?this.close():this.open()},100);renderTrigger(){const{trigger:t,content:e,disabled:s,focusControl:i,hoverControl:o,...r}=this.props;var n,a={...r.triggerProps},h=this.state["isOpen"];return t?(n=cn(S.trigger,h&&S.isOpen,(h=s||!t)&&S.disabled,a.className),h||(a.role="button",o&&Object.assign(a,{onPointerDown:this.onTriggerPointerDown,onPointerUp:this.onTriggerPointerUp}),i&&Object.assign(a,{onFocus:this.onFocus,onBlur:this.onBlur})),jsx("div",{className:n,...a,suppressHydrationWarning:!0,"data-popup-id":this.id,ref:this.triggerElem,children:t})):null}renderContent(){var t,{content:e,contentProps:s={},wrapperProps:i={},size:o,disabled:r,inline:n,outlined:a,animated:h,paranja:l,blur:d,round:p,elevation:u}=this.props,{isOpen:c,isContentVisible:m,animating:g,direction:f,triggerBounds:b,rootPopupId:v,boundaryFit:C}=this.state;return r?null:(r=cn(S.contentWrapper,n&&S.inline,c&&S.isOpen,g&&S.animating,i.className),c=this.triggerElem.current,[f,t]=f.split("-"),a=cn(S.content,a&&S.outlined,h&&g&&S.animating,u&&S["elevation-"+u],S["size-"+o],S["axis-"+f],S["float-"+(t||"middle")],d&&S.blur,p&&S.round,s.className),c&&!n&&b&&(h=0!==C.left||0!==C.top?`translate3d(${C.left}px, ${C.top}px, 0)`:void 0,i.style={...b,...i.style,...h?{transform:h}:{}}),g=jsx("div",{...i,className:r,children:jsxs("div",{...s,ref:this.onContainerElemRef,className:a,suppressHydrationWarning:!0,"data-popup-id":this.id,"data-root-popup-id":v,style:{...s.style??{},...null!==C.maxWidth&&0<C.maxWidth?{maxWidth:C.maxWidth,overflowX:"auto",overflowY:"hidden"}:{}},children:[l&&!v&&jsx(Paranja,{visible:m,blur:d}),m&&jsx(Fragment,{children:e})]})}),n?g:jsx(Portal,{children:g}))}render(){var t=this.props["className"],t=cn(S.root,t);return jsxs("div",{className:t,ref:this.rootElem,children:[this.renderTrigger(),this.renderContent()]})}}export{ANIMATION_DURATION,Popup};
-//# sourceMappingURL=Popup.js.map
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+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';
+import debounce from '../../tools/debounce.js';
+import { getCoords } from '../../tools/dom.js';
+import { isBrowser } from '../../tools/env.js';
+import throttle from '../../tools/throttle.js';
+
+const ANIMATION_DURATION = 100;
+const OFFSET_GAP = 10;
+const BOUNDARY_FIT_EPSILON = 1;
+class Popup extends Component {
+    rootElem = createRef();
+    triggerElem = createRef();
+    containerElem = null;
+    onContainerElemRef = elem => {
+        this.containerElem = elem;
+        // TODO: useElemResize(elem, callback)
+        if (elem) {
+            this.unsubscribeSizeChange();
+            this.subscribeSizeChange();
+            if (this.state.isOpen) {
+                this.updateBounds();
+            }
+        }
+    };
+    focused = false;
+    pointerPressed = false;
+    subscribedHoverControl = false;
+    subscribedSizeChange = false;
+    pointerDownTarget = null;
+    isPointerPressedInside = false;
+    id;
+    parentPopupContent;
+    timers = Time.create();
+    scrollParent;
+    shiftOuterRafId = 0;
+    shiftInnerRafId = 0;
+    static defaultProps = {
+        size: 'm',
+        direction: '',
+        animated: true,
+    };
+    state = {
+        rootPopupId: null,
+        isOpen: Boolean(this.props.isOpen),
+        isContentVisible: Boolean(this.props.isOpen),
+        animating: false,
+        direction: this.props.direction,
+        triggerBounds: null,
+        boundaryFit: ZERO_BOUNDARY_FIT,
+    };
+    constructor(props) {
+        super(props);
+        this.id = getId();
+    }
+    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);
+        if (parentPopupContent) {
+            const rootPopupId = getPopupId(parentPopupContent, 'data-root-popup-id') ||
+                getPopupId(parentPopupContent, 'data-popup-id');
+            this.setState({ rootPopupId });
+        }
+        if (focusControl) {
+            document.addEventListener('keydown', this.onDocKeyDown, true);
+            document.addEventListener('keyup', this.onDocKeyUp);
+        }
+        if (hoverControl)
+            this.subscribeHoverControl();
+        this.subscribeScroll();
+        if (this.state.isOpen &&
+            this.state.isContentVisible &&
+            this.containerElem) {
+            this.scheduleComputeShift();
+        }
+    }
+    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
+            return;
+        }
+        if (!prevProps.hoverControl && hoverControl)
+            this.subscribeHoverControl();
+        if (prevProps.hoverControl && !hoverControl)
+            this.unsubscribeHoverControl();
+        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();
+        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);
+        }
+        this.unsubscribeHoverControl();
+        this.unsubscribeSizeChange();
+        this.unsubscribeScroll();
+    }
+    subscribeSizeChange() {
+        if (this.subscribedSizeChange)
+            return;
+        this.subscribedSizeChange = true;
+        observe(this.triggerElem.current, this.onTriggerResize);
+        observe(this.containerElem, this.onContainerResize);
+    }
+    subscribeScroll() {
+        if (isBrowser && !this.props.inline) {
+            document.addEventListener('scroll', this.onScroll, true);
+        }
+    }
+    unsubscribeScroll() {
+        document.removeEventListener('scroll', this.onScroll, true);
+    }
+    unsubscribeSizeChange() {
+        this.subscribedSizeChange = false;
+        unobserve(this.triggerElem.current);
+        unobserve(this.containerElem);
+    }
+    subscribeHoverControl() {
+        if (this.subscribedHoverControl)
+            return;
+        this.subscribedHoverControl = true;
+        document.addEventListener('pointermove', this.checkHover);
+        document.addEventListener('pointerup', this.checkHover);
+    }
+    unsubscribeHoverControl() {
+        if (!this.subscribedHoverControl)
+            return;
+        this.subscribedHoverControl = false;
+        document.removeEventListener('pointermove', this.checkHover);
+        document.removeEventListener('pointerup', this.checkHover);
+    }
+    updateBounds() {
+        if (!this.containerElem)
+            return;
+        if (!this.triggerElem.current)
+            return;
+        this.updateBoundsThrottled();
+    }
+    updateBoundsThrottled = throttle(() => {
+        const trigger = this.triggerElem.current;
+        const offset = this.props.offset || {};
+        const n = (num) => num || 0;
+        const bounds = {
+            minHeight: trigger.offsetHeight - n(offset.top) - n(offset.bottom),
+            minWidth: trigger.offsetWidth - n(offset.left) - n(offset.right),
+            ...getCoords(trigger, this.props.direction, this.props.offset),
+        };
+        Object.entries(bounds).forEach(([key, value]) => {
+            this.triggerElem.current.style[key] = value;
+        });
+        this.setState({ triggerBounds: bounds });
+        this.scheduleComputeShift();
+    }, 200, { trailing: true });
+    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 el = this.containerElem;
+        const wrapper = el.parentElement;
+        if (!(wrapper instanceof HTMLElement)) {
+            return;
+        }
+        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();
+        }
+        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 });
+        }
+    }
+    checkHover = debounce((e) => {
+        if (this.isPointerPressedInside)
+            return;
+        const { isOpen, rootPopupId } = this.state;
+        const overTrigger = this.isPointerOver(e.target, S.trigger);
+        const overContent = this.isPointerOver(e.target, S.content);
+        if (!isOpen) {
+            if (overTrigger)
+                this.open();
+            return;
+        }
+        // isOpen
+        if (overTrigger || overContent)
+            return;
+        if (typeof rootPopupId === 'number') {
+            if (isLastChild(rootPopupId, this.id)) {
+                this.close();
+                unsetChild(rootPopupId, this.id);
+            }
+        }
+        else {
+            const isOverAnyPopupContent = e.target.closest(`.${S.content}`);
+            if (!isOverAnyPopupContent || !childs[this.id]?.length) {
+                this.close();
+            }
+        }
+    }, 100);
+    isControllable = () => typeof this.props.isOpen === 'boolean';
+    isLastClickInside = () => this.pointerDownTarget &&
+        (this.pointerDownTarget.closest(`.${S.trigger}`) ||
+            this.pointerDownTarget.closest(`.${S.content}`));
+    onDocPointerDown = (e) => {
+        this.pointerDownTarget = e.target;
+        this.isPointerPressedInside = this.isLastClickInside();
+        this.timers.after(100, () => (this.pointerDownTarget = null));
+    };
+    onDocPointerUp = (e) => {
+        if (!this.isPointerPressedInside)
+            this.close();
+        this.isPointerPressedInside = false;
+    };
+    isPointerOver(target, elem) {
+        return target.closest(`.${elem}[data-popup-id="${this.id}"]`);
+    }
+    onScroll = throttle(e => {
+        if (!this.state.isOpen) {
+            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.close();
+        }
+    }, 200);
+    onDocKeyDown = (e) => {
+        this.pointerDownTarget = null;
+    };
+    onDocKeyUp = (e) => {
+        if (this.state.isOpen && e.key === 'Escape') {
+            e.stopPropagation();
+            this.close();
+            return;
+        }
+        if (this.focused && /Enter| /.test(e.key)) {
+            e.stopPropagation();
+            this.toggle();
+        }
+    };
+    onTriggerPointerDown = e => {
+        this.pointerDownTarget = e.target;
+        this.pointerPressed = true;
+    };
+    onTriggerPointerUp = e => {
+        this.pointerPressed = false;
+        if (e.traget === this.pointerDownTarget)
+            this.toggle();
+    };
+    onFocus = e => {
+        this.focused = true;
+        this.props.triggerProps?.onFocus?.(e);
+        if (!this.pointerPressed && !this.state.isOpen)
+            this.open();
+    };
+    onBlur = e => {
+        this.focused = false;
+        this.props.triggerProps?.onBlur?.(e);
+        if (this.isControllable() && this.props.isOpen)
+            return;
+        // give time to fire clicks inside popup
+        this.timers.after(60, () => {
+            if (!this.isLastClickInside())
+                this.close();
+        });
+    };
+    onTriggerResize = () => {
+        this.updateBounds();
+    };
+    onContainerResize = () => {
+        this.updateBounds();
+    };
+    open = throttle(() => {
+        const { rootPopupId } = this.state;
+        if (this.state.isOpen)
+            return;
+        this.updateBounds();
+        this.subscribeSizeChange();
+        this.subscribeScroll();
+        this.setState({
+            isContentVisible: true,
+            boundaryFit: ZERO_BOUNDARY_FIT,
+        });
+        this.changeState(true, this.afterOpen);
+        if (rootPopupId)
+            setChild(rootPopupId, this.id);
+    }, 100);
+    close = () => {
+        if (!this.state.isOpen)
+            return;
+        this.unsubscribeSizeChange();
+        this.changeState(false, this.afterClose);
+    };
+    changeState(isOpen, callback) {
+        const { animated, onOpen, onClose } = this.props;
+        this.timers.clear();
+        this.setState({ isOpen });
+        isOpen ? onOpen?.() : onClose?.();
+        if (animated) {
+            this.setState({ animating: true });
+            this.timers.after(ANIMATION_DURATION + 500, () => {
+                this.setState({ animating: false });
+                callback();
+            });
+        }
+        else {
+            callback();
+        }
+    }
+    afterOpen = () => {
+        this.props.onAfterOpen?.();
+    };
+    afterClose = () => {
+        this.setState({
+            isContentVisible: false,
+            boundaryFit: ZERO_BOUNDARY_FIT,
+        });
+        this.props.onAfterClose?.();
+    };
+    toggle = throttle(() => {
+        this.state.isOpen ? this.close() : this.open();
+    }, 100);
+    renderTrigger() {
+        const { trigger, content, disabled, focusControl, hoverControl, ...rest } = this.props;
+        const triggerProps = { ...rest.triggerProps };
+        const { isOpen } = this.state;
+        if (!trigger)
+            return null;
+        const disableTrigger = disabled || !trigger;
+        const classesTrigger = cn(S.trigger, isOpen && S.isOpen, disableTrigger && S.disabled, triggerProps.className);
+        if (!disableTrigger) {
+            triggerProps.role = 'button';
+            if (hoverControl) {
+                Object.assign(triggerProps, {
+                    onPointerDown: this.onTriggerPointerDown,
+                    onPointerUp: this.onTriggerPointerUp,
+                });
+            }
+            if (focusControl) {
+                Object.assign(triggerProps, {
+                    onFocus: this.onFocus,
+                    onBlur: this.onBlur,
+                });
+            }
+        }
+        return (jsx("div", { className: classesTrigger, ...triggerProps, suppressHydrationWarning: true, "data-popup-id": this.id, ref: this.triggerElem, children: trigger }));
+    }
+    renderContent() {
+        const { content, contentProps = {}, wrapperProps = {}, size, disabled, inline, outlined, animated, paranja, blur, round, elevation, } = this.props;
+        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);
+        const trigger = this.triggerElem.current;
+        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) {
+            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: {
+                    ...(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;
+        return jsx(Portal, { children: contentNode });
+    }
+    render() {
+        const { className } = this.props;
+        const classes = cn(S.root, className);
+        return (jsxs("div", { className: classes, ref: this.rootElem, children: [this.renderTrigger(), this.renderContent()] }));
+    }
+}
+
+export { ANIMATION_DURATION, Popup };

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

@@ -1,2 +1,7 @@
-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);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}',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);export{S as default};
-//# sourceMappingURL=Popup.styl.js.map
+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);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);
+
+export { S as default };

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

@@ -1,2 +1,15 @@
-import{jsx}from"react/jsx-runtime";import{createElement}from"react";import cn from"classnames";import{Button}from"../Button/Button.js";import{Popup}from"../Popup/Popup.js";import S from"./PopupMenu.styl.js";function PopupMenu({items:t,onClose:e,...o}){if(0===t.length)return null;const r=o["size"];return jsx(Popup,{...o,content:jsx("div",{className:S.list,children:t.map(({id:t,title:e,className:o,...n})=>createElement(Button,{variant:"clear",size:r,...n,className:cn(S.item,o),key:t},e))})})}export{PopupMenu};
-//# sourceMappingURL=PopupMenu.js.map
+import { jsx } from 'react/jsx-runtime';
+import { createElement } from 'react';
+import cn from 'classnames';
+import { Button } from '../Button/Button.js';
+import { Popup } from '../Popup/Popup.js';
+import S from './PopupMenu.styl.js';
+
+function PopupMenu({ items, onClose, ...props }) {
+    if (items.length === 0)
+        return null;
+    const { size } = props;
+    return (jsx(Popup, { ...props, content: jsx("div", { className: S.list, children: items.map(({ id, title, className, ...rest }) => (createElement(Button, { variant: "clear", size: size, ...rest, className: cn(S.item, className), key: id }, title))) }) }));
+}
+
+export { PopupMenu };

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

@@ -1,2 +1,7 @@
-import styleInject from"../../../node_modules/style-inject/dist/style-inject.es.js";var css_248z=".PopupMenu_list__G7xP3{align-items:stretch;border-radius:inherit;display:flex;flex-direction:column;padding:2px}.PopupMenu_item__wxay-+.PopupMenu_item__wxay-{margin-top:2px}.PopupMenu_item__wxay-:first-child{border-top-left-radius:inherit;border-top-right-radius:inherit}.PopupMenu_item__wxay-:last-child{border-bottom-left-radius:inherit;border-bottom-right-radius:inherit}",S={list:"PopupMenu_list__G7xP3",item:"PopupMenu_item__wxay-"};styleInject(css_248z);export{S as default};
-//# sourceMappingURL=PopupMenu.styl.js.map
+import styleInject from '../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".PopupMenu_list__G7xP3{align-items:stretch;border-radius:inherit;display:flex;flex-direction:column;padding:2px}.PopupMenu_item__wxay-+.PopupMenu_item__wxay-{margin-top:2px}.PopupMenu_item__wxay-:first-child{border-top-left-radius:inherit;border-top-right-radius:inherit}.PopupMenu_item__wxay-:last-child{border-bottom-left-radius:inherit;border-bottom-right-radius:inherit}";
+var S = {"list":"PopupMenu_list__G7xP3","item":"PopupMenu_item__wxay-"};
+styleInject(css_248z);
+
+export { S as default };

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

@@ -1,2 +1,33 @@
-import{jsx,Fragment}from"react/jsx-runtime";import{useState,useLayoutEffect,useMemo}from"react";import{createPortal}from"react-dom";import{config}from"../../tools/config.js";import{isBrowser}from"../../tools/env.js";const DEFAULT_SELECTOR="#"+config.appOverlayId;function Portal(e){const{selector:o=DEFAULT_SELECTOR,children:t}=e,[r,n]=useState(isBrowser);useLayoutEffect(()=>{n(!0)},[]);e=useMemo(()=>r?document.querySelector(o):null,[o,r]);return r?e?createPortal(jsx(Fragment,{children:t}),e):(console.warn("Portal target element not found: "+o),null):null}export{Portal};
-//# sourceMappingURL=Portal.js.map
+import { jsx, Fragment } from 'react/jsx-runtime';
+import { useState, useLayoutEffect, useMemo } from 'react';
+import { createPortal } from 'react-dom';
+import { config } from '../../tools/config.js';
+import { isBrowser } from '../../tools/env.js';
+
+const DEFAULT_SELECTOR = `#${config.appOverlayId}`;
+function Portal(props) {
+    const { selector = DEFAULT_SELECTOR, children } = props;
+    // Start with immediate rendering if we're in browser
+    const [isMounted, setMounted] = useState(isBrowser);
+    useLayoutEffect(() => {
+        // Ensure we're mounted on client side (handles SSR edge cases)
+        setMounted(true);
+    }, []);
+    // Cache target element to avoid DOM queries on every render
+    const targetElement = useMemo(() => {
+        if (!isMounted)
+            return null;
+        return document.querySelector(selector);
+    }, [selector, isMounted]);
+    // Don't render if not mounted (prevents SSR hydration mismatch)
+    if (!isMounted)
+        return null;
+    // Check if target element exists before rendering
+    if (!targetElement) {
+        console.warn(`Portal target element not found: ${selector}`);
+        return null;
+    }
+    return createPortal(jsx(Fragment, { children: children }), targetElement);
+}
+
+export { Portal };

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

@@ -1,2 +1,5 @@
-const calculateProgress=a=>Math.min(100,Math.max(0,a));export{calculateProgress};
-//# sourceMappingURL=Progress.helpers.js.map
+const calculateProgress = (value) => {
+    return Math.min(100, Math.max(0, value));
+};
+
+export { calculateProgress };

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

@@ -1,2 +1,12 @@
-import{jsxs,jsx}from"react/jsx-runtime";import cn from"classnames";import{calculateProgress}from"./Progress.helpers.js";import S from"./Progress.styl.js";function Progress({value:s,showPercentage:r,size:e="m",alignText:a="center",className:o}){var t=calculateProgress(s),e=cn(S.root,S["size-"+e],S["align-"+a],0<s&&S.animated,o);return jsxs("div",{className:e,children:[jsx("div",{className:S.bar,style:{width:t+"%"}}),r&&jsxs("div",{className:S.label,children:[Math.round(t),"%"]})]})}export{Progress};
-//# sourceMappingURL=Progress.js.map
+import { jsxs, jsx } from 'react/jsx-runtime';
+import cn from 'classnames';
+import { calculateProgress } from './Progress.helpers.js';
+import S from './Progress.styl.js';
+
+function Progress({ value, showPercentage, size = 'm', alignText = 'center', className, }) {
+    const progress = calculateProgress(value);
+    const classes = cn(S.root, S[`size-${size}`], S[`align-${alignText}`], value > 0 && S.animated, className);
+    return (jsxs("div", { className: classes, children: [jsx("div", { className: S.bar, style: { width: `${progress}%` } }), showPercentage && jsxs("div", { className: S.label, children: [Math.round(progress), "%"] })] }));
+}
+
+export { Progress };

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

@@ -1,2 +1,7 @@
-import styleInject from"../../../node_modules/style-inject/dist/style-inject.es.js";var css_248z=".Progress_root__gGPO9{background-color:var(--accent-color-alpha-100);border-radius:50px;position:relative;width:100%}.Progress_size-xs__C0q44{font-size:12px;height:1px}.Progress_size-s__Xl7Vl{font-size:14px;height:2px}.Progress_size-m__2vNe8{font-size:16px;height:8px}.Progress_size-l__GYI3y{font-size:18px;height:12px}.Progress_size-xl__Rl8GA{font-size:20px;height:16px}.Progress_bar__guoEx{background-color:var(--active-color);border-radius:inherit;height:100%}.Progress_animated__rfWjG .Progress_bar__guoEx{transition:width .3s ease}.Progress_hasLabel__1Xx16{margin-top:1em}.Progress_label__rQqsN{bottom:100%;color:var(--accent-color);font-weight:700;margin-bottom:4px;position:absolute}.Progress_align-left__p45c1 .Progress_label__rQqsN{left:var(--p-3)}.Progress_align-center__HheKi .Progress_label__rQqsN{left:50%;transform:translate(-50%)}.Progress_align-right__lIRT2 .Progress_label__rQqsN{right:var(--p-3)}",S={root:"Progress_root__gGPO9","size-xs":"Progress_size-xs__C0q44","size-s":"Progress_size-s__Xl7Vl","size-m":"Progress_size-m__2vNe8","size-l":"Progress_size-l__GYI3y","size-xl":"Progress_size-xl__Rl8GA",bar:"Progress_bar__guoEx",animated:"Progress_animated__rfWjG",hasLabel:"Progress_hasLabel__1Xx16",label:"Progress_label__rQqsN","align-left":"Progress_align-left__p45c1","align-center":"Progress_align-center__HheKi","align-right":"Progress_align-right__lIRT2"};styleInject(css_248z);export{S as default};
-//# sourceMappingURL=Progress.styl.js.map
+import styleInject from '../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".Progress_root__gGPO9{background-color:var(--accent-color-alpha-100);border-radius:50px;position:relative;width:100%}.Progress_size-xs__C0q44{font-size:12px;height:1px}.Progress_size-s__Xl7Vl{font-size:14px;height:2px}.Progress_size-m__2vNe8{font-size:16px;height:8px}.Progress_size-l__GYI3y{font-size:18px;height:12px}.Progress_size-xl__Rl8GA{font-size:20px;height:16px}.Progress_bar__guoEx{background-color:var(--active-color);border-radius:inherit;height:100%}.Progress_animated__rfWjG .Progress_bar__guoEx{transition:width .3s ease}.Progress_hasLabel__1Xx16{margin-top:1em}.Progress_label__rQqsN{bottom:100%;color:var(--accent-color);font-weight:700;margin-bottom:4px;position:absolute}.Progress_align-left__p45c1 .Progress_label__rQqsN{left:var(--p-3)}.Progress_align-center__HheKi .Progress_label__rQqsN{left:50%;transform:translate(-50%)}.Progress_align-right__lIRT2 .Progress_label__rQqsN{right:var(--p-3)}";
+var S = {"root":"Progress_root__gGPO9","size-xs":"Progress_size-xs__C0q44","size-s":"Progress_size-s__Xl7Vl","size-m":"Progress_size-m__2vNe8","size-l":"Progress_size-l__GYI3y","size-xl":"Progress_size-xl__Rl8GA","bar":"Progress_bar__guoEx","animated":"Progress_animated__rfWjG","hasLabel":"Progress_hasLabel__1Xx16","label":"Progress_label__rQqsN","align-left":"Progress_align-left__p45c1","align-center":"Progress_align-center__HheKi","align-right":"Progress_align-right__lIRT2"};
+styleInject(css_248z);
+
+export { S as default };