@homecode/ui 4.18.16 → 4.18.18

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

@@ -1,2 +1,67 @@
-import{createElement,Component}from"react";import{jsx,jsxs}from"react/jsx-runtime";import cn from"classnames";import{withStore}from"justorm/react";import{Icon}from"../Icon/Icon.js";import{Button}from"../Button/Button.js";import{Scroll}from"../Scroll/Scroll.js";import STORE from"./store.js";import S from"./Notifications.styl.js";function getTouchPos(t){var{clientX:t,clientY:o}=t.targetTouches[0];return{x:t,y:o}}function getDeltaPos(t,o){return{x:Math.abs(o.x-t.x),y:Math.abs(o.y-t.y)}}const TOUCH_MOVE_TRESHOLD=50;class Item extends Component{startPos=null;onTouchStart=t=>{this.startPos=getTouchPos(t)};onTouchMove=t=>{var o=this.props["unpause"];this.startPos&&(t.stopPropagation(),t=getTouchPos(t),(t=getDeltaPos(this.startPos,t)).x>t.y)&&t.x>TOUCH_MOVE_TRESHOLD&&(o(),this.closeMe())};onTouchEnd=()=>{var t=this.props["unpause"];t(),this.startPos=null};onTouchCancel=()=>this.startPos=null;closeMe=()=>{var{id:t,close:o}=this.props;o(t)};render(){var{type:t="default",title:o,content:s,visible:e,pause:n,unpause:i}=this.props,t=cn(S.item,S["type-"+t],e&&S.visible);return jsx("div",{className:t,onMouseOver:n,onFocus:n,onTouchStart:this.onTouchStart,onTouchMove:this.onTouchMove,onMouseOut:i,onBlur:i,onTouchEnd:this.onTouchEnd,onTouchCancel:this.onTouchCancel,children:jsxs("div",{className:S.itemInner,children:[(o||s)&&jsxs("div",{className:S.text,children:[o&&jsx("div",{className:S.title,children:o}),s&&jsx("div",{className:S.content,children:s})]}),jsx(Button,{className:S.close,variant:"clear",square:!0,onClick:this.closeMe,children:jsx(Icon,{type:"close",size:"s"})})]})})}}const NotificationsStore=STORE,Notifications=withStore({notifications:["items","data"]})(function({store:t,...o}){t=t.notifications;const{items:s,data:e,pause:n,unpause:i,close:r}=t,c={pause:n,unpause:i,close:r};t=cn(S.root,0===s.length&&S.empty);return jsx(Scroll,{...o,y:!0,size:"s",className:t,innerClassName:S.inner,offset:{y:{before:22,after:22}},children:s.map(t=>createElement(Item,{...e[t],...c,id:t,key:t}))})});export{Notifications,NotificationsStore};
-//# sourceMappingURL=Notifications.js.map
+import { createElement, Component } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import cn from 'classnames';
+import { withStore } from 'justorm/react';
+import { Icon } from '../Icon/Icon.js';
+import { Button } from '../Button/Button.js';
+import { Scroll } from '../Scroll/Scroll.js';
+import STORE from './store.js';
+import S from './Notifications.styl.js';
+
+function getTouchPos(e) {
+    const { clientX: x, clientY: y } = e.targetTouches[0];
+    return { x, y };
+}
+function getDeltaPos(p1, p2) {
+    return {
+        x: Math.abs(p2.x - p1.x),
+        y: Math.abs(p2.y - p1.y),
+    };
+}
+const TOUCH_MOVE_TRESHOLD = 50;
+class Item extends Component {
+    startPos = null;
+    onTouchStart = e => {
+        this.startPos = getTouchPos(e);
+    };
+    onTouchMove = e => {
+        const { unpause } = this.props;
+        if (!this.startPos)
+            return;
+        // e.preventDefault();
+        e.stopPropagation();
+        const pos = getTouchPos(e);
+        const delta = getDeltaPos(this.startPos, pos);
+        if (delta.x > delta.y && delta.x > TOUCH_MOVE_TRESHOLD) {
+            unpause();
+            this.closeMe();
+        }
+    };
+    onTouchEnd = () => {
+        const { unpause } = this.props;
+        unpause();
+        this.startPos = null;
+    };
+    onTouchCancel = () => (this.startPos = null);
+    closeMe = () => {
+        const { id, close } = this.props;
+        close(id);
+    };
+    render() {
+        const { type = 'default', title, content, visible, pause, unpause, } = this.props;
+        const classes = cn(S.item, S[`type-${type}`], visible && S.visible);
+        return (jsx("div", { className: classes, onMouseOver: pause, onFocus: pause, onTouchStart: this.onTouchStart, onTouchMove: this.onTouchMove, onMouseOut: unpause, onBlur: unpause, onTouchEnd: this.onTouchEnd, onTouchCancel: this.onTouchCancel, children: jsxs("div", { className: S.itemInner, children: [(title || content) && (jsxs("div", { className: S.text, children: [title && jsx("div", { className: S.title, children: title }), content && jsx("div", { className: S.content, children: content })] })), jsx(Button, { className: S.close, variant: "clear", square: true, onClick: this.closeMe, children: jsx(Icon, { type: "close", size: "s" }) })] }) }));
+    }
+}
+const NotificationsStore = STORE;
+const Notifications = withStore({
+    notifications: ['items', 'data'],
+})(function Notifications({ store, ...rest }) {
+    const { notifications } = store;
+    const { items, data, pause, unpause, close } = notifications;
+    const api = { pause, unpause, close };
+    const classes = cn(S.root, items.length === 0 && S.empty);
+    return (jsx(Scroll, { ...rest, y: true, size: "s", className: classes, innerClassName: S.inner, offset: { y: { before: 22, after: 22 } }, children: items.map(id => (createElement(Item, { ...data[id], ...api, id: id, key: id }))) }));
+});
+
+export { Notifications, NotificationsStore };

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

@@ -1,2 +1,7 @@
-import styleInject from"../../../node_modules/style-inject/dist/style-inject.es.js";var css_248z=".Notifications_root__S3ujN{max-height:calc(var(--vh)*100);overflow:hidden;position:fixed;right:0;top:0;transform:translateZ(0);transition:right .3s ease-out;width:320px;z-index:20}.Notifications_inner__6v9e3{padding:var(--indent-m)}.Notifications_empty__zCpOA{pointer-events:none}.Notifications_itemInner__nEYAl,.Notifications_item__I3Up4{border-radius:var(--border-radius-l)}.Notifications_item__I3Up4{-webkit-backface-visibility:hidden;backface-visibility:hidden;left:100%;max-height:0;max-width:100%;opacity:0;position:relative;transition:all .3s ease-out;width:300px}.Notifications_item__I3Up4+.Notifications_item__I3Up4{padding-top:10px}.Notifications_item__I3Up4:hover{transform:translateX(-2px)}.Notifications_visible__ln4-n{left:0;max-height:500px;opacity:1}.Notifications_itemInner__nEYAl{align-items:center;-webkit-backdrop-filter:blur(30px);backdrop-filter:blur(30px);background-color:var(--decent-color-alpha-500);box-shadow:inset 0 0 1px var(--accent-color-alpha-300),0 0 20px var(--decent-color);box-sizing:border-box;display:flex;padding:16px 32px 16px 20px;position:relative;transition:.3s ease-out;transition-property:transform}.Notifications_type-warning__Nxg6C .Notifications_itemInner__nEYAl{background-color:var(--warning-color-alpha-300)}.Notifications_type-danger__zeIMt .Notifications_itemInner__nEYAl{background-color:var(--danger-color-alpha-300)}.Notifications_icon__nKs-X{background:no-repeat 50%;height:24px;margin-right:10px;min-width:24px;width:24px}.Notifications_type-loading__N4EE5 .Notifications_icon__nKs-X{transform:translateY(-20px)}.Notifications_text__7QZL6{display:flex;flex-direction:column;flex-grow:1;z-index:1}.Notifications_title__Gu9bs{font-size:16px;font-weight:700}.Notifications_content__Zrvw2{font-size:12px;margin-top:calc(var(--indent-s)/2)}.Notifications_content__Zrvw2:first-child{margin-top:0}.Notifications_close__-IUH3{background-color:transparent;border-radius:50%;cursor:pointer;height:40px!important;max-height:40px!important;max-width:40px!important;opacity:0;position:absolute;right:-5px;top:-5px;transform:scale(.8);transition:.1s ease-out;transition-property:opacity,transform;width:40px!important}.Notifications_item__I3Up4:hover .Notifications_close__-IUH3{opacity:.8}.Notifications_close__-IUH3:hover{background-color:transparent;background-color:initial;opacity:1;transform:scale(1)}@media (max-width:700px){.Notifications_item__I3Up4,.Notifications_root__S3ujN{width:100%}.Notifications_title__Gu9bs{font-size:20px}.Notifications_content__Zrvw2{font-size:16px}.Notifications_close__-IUH3{transform:scale(1.2)}}",S={root:"Notifications_root__S3ujN",inner:"Notifications_inner__6v9e3",empty:"Notifications_empty__zCpOA",item:"Notifications_item__I3Up4",itemInner:"Notifications_itemInner__nEYAl",visible:"Notifications_visible__ln4-n","type-warning":"Notifications_type-warning__Nxg6C","type-danger":"Notifications_type-danger__zeIMt",icon:"Notifications_icon__nKs-X","type-loading":"Notifications_type-loading__N4EE5",text:"Notifications_text__7QZL6",title:"Notifications_title__Gu9bs",content:"Notifications_content__Zrvw2",close:"Notifications_close__-IUH3"};styleInject(css_248z);export{S as default};
-//# sourceMappingURL=Notifications.styl.js.map
+import styleInject from '../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".Notifications_root__S3ujN{max-height:calc(var(--vh)*100);overflow:hidden;position:fixed;right:0;top:0;transform:translateZ(0);transition:right .3s ease-out;width:320px;z-index:20}.Notifications_inner__6v9e3{padding:var(--indent-m)}.Notifications_empty__zCpOA{pointer-events:none}.Notifications_itemInner__nEYAl,.Notifications_item__I3Up4{border-radius:var(--border-radius-l)}.Notifications_item__I3Up4{-webkit-backface-visibility:hidden;backface-visibility:hidden;left:100%;max-height:0;max-width:100%;opacity:0;position:relative;transition:all .3s ease-out;width:300px}.Notifications_item__I3Up4+.Notifications_item__I3Up4{padding-top:10px}.Notifications_item__I3Up4:hover{transform:translateX(-2px)}.Notifications_visible__ln4-n{left:0;max-height:500px;opacity:1}.Notifications_itemInner__nEYAl{align-items:center;-webkit-backdrop-filter:blur(30px);backdrop-filter:blur(30px);background-color:var(--decent-color-alpha-500);box-shadow:inset 0 0 1px var(--accent-color-alpha-300),0 0 20px var(--decent-color);box-sizing:border-box;display:flex;padding:16px 32px 16px 20px;position:relative;transition:.3s ease-out;transition-property:transform}.Notifications_type-warning__Nxg6C .Notifications_itemInner__nEYAl{background-color:var(--warning-color-alpha-300)}.Notifications_type-danger__zeIMt .Notifications_itemInner__nEYAl{background-color:var(--danger-color-alpha-300)}.Notifications_icon__nKs-X{background:no-repeat 50%;height:24px;margin-right:10px;min-width:24px;width:24px}.Notifications_type-loading__N4EE5 .Notifications_icon__nKs-X{transform:translateY(-20px)}.Notifications_text__7QZL6{display:flex;flex-direction:column;flex-grow:1;z-index:1}.Notifications_title__Gu9bs{font-size:16px;font-weight:700}.Notifications_content__Zrvw2{font-size:12px;margin-top:calc(var(--indent-s)/2)}.Notifications_content__Zrvw2:first-child{margin-top:0}.Notifications_close__-IUH3{background-color:transparent;border-radius:50%;cursor:pointer;height:40px!important;max-height:40px!important;max-width:40px!important;opacity:0;position:absolute;right:-5px;top:-5px;transform:scale(.8);transition:.1s ease-out;transition-property:opacity,transform;width:40px!important}.Notifications_item__I3Up4:hover .Notifications_close__-IUH3{opacity:.8}.Notifications_close__-IUH3:hover{background-color:transparent;background-color:initial;opacity:1;transform:scale(1)}@media (max-width:700px){.Notifications_item__I3Up4,.Notifications_root__S3ujN{width:100%}.Notifications_title__Gu9bs{font-size:20px}.Notifications_content__Zrvw2{font-size:16px}.Notifications_close__-IUH3{transform:scale(1.2)}}";
+var S = {"root":"Notifications_root__S3ujN","inner":"Notifications_inner__6v9e3","empty":"Notifications_empty__zCpOA","item":"Notifications_item__I3Up4","itemInner":"Notifications_itemInner__nEYAl","visible":"Notifications_visible__ln4-n","type-warning":"Notifications_type-warning__Nxg6C","type-danger":"Notifications_type-danger__zeIMt","icon":"Notifications_icon__nKs-X","type-loading":"Notifications_type-loading__N4EE5","text":"Notifications_text__7QZL6","title":"Notifications_title__Gu9bs","content":"Notifications_content__Zrvw2","close":"Notifications_close__-IUH3"};
+styleInject(css_248z);
+
+export { S as default };

package/dist/esm/src/components/Notifications/store.js

@@ -1,2 +1,62 @@
-import{createStore}from"justorm/react";import Time from"timen";import{spliceWhere}from"../../tools/array.js";import{generateUID}from"../../tools/uid.js";import C from"./Notifications.constants.json.js";const SHOW_TIME=5e3,STORE=createStore("notifications",{items:[],autohide:[],data:{},paused:!1,show(e){const t=generateUID();return this.items.push(t),this.data[t]={...e,createdAt:Date.now()},Time.after(C.ANIMATION_DURATION,()=>this.data[t].visible=!0),!1!==e.autohide&&this.autohide.push(t),t},pause(){this.paused=!0,this.pausedAt=Date.now()},unpause(){const t=Date.now()-this.pausedAt;this.autohide.forEach(e=>{this.data[e].createdAt+=t}),this.paused=!1},close(e){this.data[e].visible=!1,Time.after(C.ANIMATION_DURATION,()=>this.remove(e))},remove(e){spliceWhere(this.autohide,e),spliceWhere(this.items,e),delete this.data[e]}});Time.every(50,function(){var{paused:e,autohide:t,data:i}=STORE;if(!e&&0!==t.length){const s=t[0];e=i[s],t=Date.now()-e.createdAt>SHOW_TIME;e.visible&&t&&(e.visible=!1,Time.after(C.ANIMATION_DURATION,()=>STORE.remove(s)))}});export{STORE as default};
-//# sourceMappingURL=store.js.map
+import { createStore } from 'justorm/react';
+import Time from 'timen';
+import { spliceWhere } from '../../tools/array.js';
+import { generateUID } from '../../tools/uid.js';
+import C from './Notifications.constants.json.js';
+
+const SHOW_TIME = 5000;
+const STORE = createStore('notifications', {
+    items: [],
+    autohide: [],
+    data: {},
+    paused: false,
+    show(data) {
+        const id = generateUID();
+        this.items.push(id);
+        this.data[id] = {
+            ...data,
+            createdAt: Date.now(),
+        };
+        Time.after(C.ANIMATION_DURATION, () => (this.data[id].visible = true));
+        if (data.autohide !== false) {
+            this.autohide.push(id);
+        }
+        return id;
+    },
+    pause() {
+        this.paused = true;
+        this.pausedAt = Date.now();
+    },
+    unpause() {
+        const pauseTime = Date.now() - this.pausedAt;
+        this.autohide.forEach(id => {
+            this.data[id].createdAt += pauseTime;
+        });
+        this.paused = false;
+    },
+    close(id) {
+        this.data[id].visible = false;
+        Time.after(C.ANIMATION_DURATION, () => this.remove(id));
+    },
+    remove(id) {
+        spliceWhere(this.autohide, id);
+        spliceWhere(this.items, id);
+        delete this.data[id];
+    },
+});
+// worker
+Time.every(50, function tick() {
+    const { paused, autohide, data } = STORE;
+    if (paused || autohide.length === 0) {
+        return;
+    }
+    const id = autohide[0]; // TODO: move trough all autohide until some will !readyToHide
+    const item = data[id];
+    const readyToHide = Date.now() - item.createdAt > SHOW_TIME;
+    if (item.visible && readyToHide) {
+        item.visible = false;
+        Time.after(C.ANIMATION_DURATION, () => STORE.remove(id));
+    }
+});
+
+export { STORE as default };

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

@@ -1,2 +1,14 @@
-import{jsx}from"react/jsx-runtime";import cn from"classnames";import{Portal}from"../Portal/Portal.js";import S from"./Paranja.styl.js";const Paranja=({className:r,children:a,visible:s=!0,inline:l=!1,blur:o=!1})=>{s=cn(S.root,s&&S.visible,o&&S.blur,r),o=jsx("div",{className:s,children:a});return l?o:jsx(Portal,{children:o})};export{Paranja};
-//# sourceMappingURL=Paranja.js.map
+import { jsx } from 'react/jsx-runtime';
+import cn from 'classnames';
+import { Portal } from '../Portal/Portal.js';
+import S from './Paranja.styl.js';
+
+const Paranja = ({ className, children, visible = true, inline = false, blur = false, }) => {
+    const classes = cn(S.root, visible && S.visible, blur && S.blur, className);
+    const node = jsx("div", { className: classes, children: children });
+    if (inline)
+        return node;
+    return jsx(Portal, { children: node });
+};
+
+export { Paranja };

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

@@ -1,2 +1,7 @@
-import styleInject from"../../../node_modules/style-inject/dist/style-inject.es.js";var css_248z=".Paranja_root__ddboV{align-items:center;background-color:var(--decent-color-alpha-900);bottom:0;display:flex;justify-content:center;left:0;opacity:0;pointer-events:none;position:absolute;right:0;top:0;transition:opacity .2s ease-out;z-index:10}.Paranja_visible__xZukG{opacity:1;pointer-events:all}.Paranja_visible__xZukG.Paranja_blur__Hg0SQ{-webkit-backdrop-filter:blur(50px);backdrop-filter:blur(50px);background-color:var(--decent-color-alpha-500)}",S={root:"Paranja_root__ddboV",visible:"Paranja_visible__xZukG",blur:"Paranja_blur__Hg0SQ"};styleInject(css_248z);export{S as default};
-//# sourceMappingURL=Paranja.styl.js.map
+import styleInject from '../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".Paranja_root__ddboV{align-items:center;background-color:var(--decent-color-alpha-900);bottom:0;display:flex;justify-content:center;left:0;opacity:0;pointer-events:none;position:absolute;right:0;top:0;transition:opacity .2s ease-out;z-index:10}.Paranja_visible__xZukG{opacity:1;pointer-events:all}.Paranja_visible__xZukG.Paranja_blur__Hg0SQ{-webkit-backdrop-filter:blur(50px);backdrop-filter:blur(50px);background-color:var(--decent-color-alpha-500)}";
+var S = {"root":"Paranja_root__ddboV","visible":"Paranja_visible__xZukG","blur":"Paranja_blur__Hg0SQ"};
+styleInject(css_248z);
+
+export { S as default };

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

@@ -1,2 +1,31 @@
-import{spliceWhere}from"../../tools/array.js";import"nanoid";import"../../tools/dom.js";import"timen";import"compareq";import"lodash.pick";import"../../tools/queryParams.js";const childs={};let popupIds=0;const getId=()=>++popupIds,getPopupId=(t,i="data-popup-id")=>{t=t.getAttribute(i);return t?parseInt(t,10):null};function isLastChild(t,i){t=childs[t];return t&&t[t.length-1]===i}function setChild(t,i){childs[t]||(childs[t]=[]),childs[t].push(i)}function unsetChild(t,i){spliceWhere(childs[t],i),childs[t].length||delete childs[t]}export{childs,getId,getPopupId,isLastChild,setChild,unsetChild};
-//# sourceMappingURL=Popup.helpers.js.map
+import { spliceWhere } from '../../tools/array.js';
+import 'nanoid';
+import '../../tools/dom.js';
+import 'timen';
+import 'compareq';
+import 'lodash.pick';
+import '../../tools/queryParams.js';
+
+const childs = {};
+let popupIds = 0;
+const getId = () => ++popupIds;
+const getPopupId = (elem, attr = 'data-popup-id') => {
+    const id = elem.getAttribute(attr);
+    return id ? parseInt(id, 10) : null;
+};
+function isLastChild(rootId, id) {
+    const ids = childs[rootId];
+    return ids && ids[ids.length - 1] === id;
+}
+function setChild(rootId, id) {
+    if (!childs[rootId])
+        childs[rootId] = [];
+    childs[rootId].push(id);
+}
+function unsetChild(rootId, id) {
+    spliceWhere(childs[rootId], id);
+    if (!childs[rootId].length)
+        delete childs[rootId];
+}
+
+export { childs, getId, getPopupId, isLastChild, setChild, unsetChild };

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

@@ -1,2 +1,397 @@
-import{jsx,jsxs,Fragment}from"react/jsx-runtime";import{Component,createRef}from"react";import cn from"classnames";import{createStore}from"justorm/react";import Time from"timen";import{Paranja}from"../Paranja/Paranja.js";import{Portal}from"../Portal/Portal.js";import{getCoords}from"../../tools/dom.js";import{observe,unobserve}from"../../tools/resizeObserver.js";import{isBrowser}from"../../tools/env.js";import debounce from"../../tools/debounce.js";import throttle from"../../tools/throttle.js";import S from"./Popup.styl.js";import{getId,getPopupId,isLastChild,unsetChild,childs,setChild}from"./Popup.helpers.js";const ANIMATION_DURATION=100,OFFSET_GAP=10,INITIAL_OFFSET={top:0,left:0};class Popup extends Component{rootElem=createRef();triggerElem=createRef();containerElem=null;onContainerElemRef=e=>{(this.containerElem=e)&&(this.unsubscribeSizeChange(),this.subscribeSizeChange())};focused=!1;pointerPressed=!1;subscribedHoverControl=!1;subscribedSizeChange=!1;pointerDownTarget=null;isPointerPressedInside=!1;needDropOffset=!1;id;parentPopupContent;store;timers=Time.create();scrollParent;offset={...INITIAL_OFFSET};static defaultProps={size:"m",direction:"",animated:!0};constructor(e){super(e);var t=Boolean(e.isOpen);this.id=getId(),this.store=createStore(this,{rootPopupId:null,isOpen:t,isContentVisible:t,animating:!1,direction:e.direction,triggerBounds:null})}componentDidMount(){var{hoverControl:e,focusControl:t}=this.props,s=this.triggerElem.current.closest("."+S.content);document.addEventListener("pointerdown",this.onDocPointerDown,!0),document.addEventListener("pointerup",this.onDocPointerUp,!0),s&&(this.store.rootPopupId=getPopupId(s,"data-root-popup-id")||getPopupId(s,"data-popup-id")),t&&(document.addEventListener("keydown",this.onDocKeyDown,!0),document.addEventListener("keyup",this.onDocKeyUp)),e&&this.subscribeHoverControl(),this.subscribeScroll()}componentDidUpdate(e){var{isOpen:t,disabled:s,hoverControl:i}=this.props;s?this.store.isOpen=!1:(!e.hoverControl&&i&&this.subscribeHoverControl(),e.hoverControl&&!i&&this.unsubscribeHoverControl(),"boolean"==typeof t&&t!==e.isOpen&&(t?this.open():this.close()))}componentWillUnmount(){this.timers.clear(),document.removeEventListener("keyup",this.onDocKeyUp,!0),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.store.animating&&this.containerElem&&this.triggerElem.current&&this.updateBoundsThrottled()}updateBoundsThrottled=throttle(()=>{var e=this.triggerElem.current,e={minHeight:e.offsetHeight,minWidth:e.offsetWidth,...getCoords(e)};Object.entries(e).forEach(([e,t])=>{this.triggerElem.current.style[e]=t}),this.updateOffset(),this.store.triggerBounds=e},200,{trailing:!0});prevContentBounds={width:0,height:0};updateOffset=()=>{var e,t,s,i,o,r=this.containerElem.getBoundingClientRect();r.height&&r.width&&this.prevContentBounds.width===r.width&&this.prevContentBounds.height===r.height?(e=this.offset,{innerHeight:t,innerWidth:s}=window,i=r.top+r.height+OFFSET_GAP-e.top,o=r.left+r.width+OFFSET_GAP-e.left,r.top<0?e.top=-r.top+OFFSET_GAP:t<i&&(e.top=t-i),r.left<0?e.left=-r.left+OFFSET_GAP:s<o&&(e.left=s-o),this.applyOffset()):(this.prevContentBounds=r,Time.after(100,this.updateOffset))};applyOffset(){var{left:e,top:t}=this.offset;this.containerElem.style.marginTop=t+"px",this.containerElem.style.marginLeft=e+"px"}checkHover=debounce(e=>{var t,s,i,o;this.isPointerPressedInside||({isOpen:t,rootPopupId:s}=this.store,i=this.isPointerOver(e.target,S.trigger),o=this.isPointerOver(e.target,S.content),t?i||o||("number"==typeof s?isLastChild(s,this.id)&&(this.close(),unsetChild(s,this.id)):e.target.closest("."+S.content)&&childs[this.id]?.length||this.close()):i&&this.open())},100);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=>{this.isPointerPressedInside||this.close(),this.isPointerPressedInside=!1};isPointerOver(e,t){return e.closest(`.${t}[data-popup-id="${this.id}"]`)}onScroll=throttle(e=>{var t;this.store.isOpen?this.isPointerOver(e.target,S.content)||childs[this.id]?.length||(this.needDropOffset=!0,this.close()):({top:e,left:t}=this.offset,(t||e)&&(this.offset={...INITIAL_OFFSET},this.applyOffset()))},200);onDocKeyDown=e=>{this.pointerDownTarget=null};onDocKeyUp=e=>{this.store.isOpen&&"Escape"===e.key?(e.stopPropagation(),this.close()):this.focused&&/Enter| /.test(e.key)&&(e.stopPropagation(),this.toggle())};onTriggerPointerDown=e=>{this.pointerDownTarget=e.target,this.pointerPressed=!0};onTriggerPointerUp=e=>{this.pointerPressed=!1,e.traget===this.pointerDownTarget&&this.toggle()};onFocus=e=>{this.focused=!0,this.props.triggerProps?.onFocus?.(e),this.pointerPressed||this.open()};onBlur=e=>{this.focused=!1,this.props.triggerProps?.onBlur?.(e),this.timers.after(60,()=>{this.isLastClickInside()||this.close()})};onTriggerResize=()=>{this.updateBounds()};onContainerResize=()=>{this.updateBounds()};open=throttle(()=>{var e=this.store["rootPopupId"];this.store.isOpen||(this.updateBounds(),this.subscribeSizeChange(),this.subscribeScroll(),this.store.isContentVisible=!0,this.changeState(!0,this.afterOpen),e&&setChild(e,this.id))},100);close=()=>{this.store.isOpen&&(this.unsubscribeSizeChange(),this.changeState(!1,this.afterClose))};changeState(e,t){var s=this.props["animated"];this.timers.clear(),this.store.isOpen=e,s?(this.store.animating=!0,this.timers.after(ANIMATION_DURATION+500,()=>{this.store.animating=!1,t()})):t()}afterOpen=()=>{this.props.onOpen?.()};afterClose=()=>{this.store.isContentVisible=!1,this.dropOffset(),this.props.onClose?.()};dropOffset(){this.needDropOffset&&(this.offset={...INITIAL_OFFSET},this.applyOffset())}toggle=throttle(()=>{this.store.isOpen?this.close():this.open()},100);renderTrigger(){const{trigger:e,content:t,disabled:s,focusControl:i,hoverControl:o,...r}=this.props;var n,h={...r.triggerProps},p=this.store["isOpen"];return e?(n=cn(S.trigger,p&&S.isOpen,(p=s||!t)&&S.disabled,h.className),p||(h.role="button",o&&Object.assign(h,{onPointerDown:this.onTriggerPointerDown,onPointerUp:this.onTriggerPointerUp}),i&&Object.assign(h,{onFocus:this.onFocus,onBlur:this.onBlur})),jsx("div",{className:n,...h,suppressHydrationWarning:!0,"data-popup-id":this.id,ref:this.triggerElem,children:e})):null}renderContent(){var e,{content:t,contentProps:s={},wrapperProps:i={},size:o,disabled:r,inline:n,outlined:h,animated:p,paranja:a,blur:l,elevation:d}=this.props,{isOpen:c,isContentVisible:u,animating:g,direction:m,triggerBounds:f,rootPopupId:b}=this.store;return r?null:(r=cn(S.contentWrapper,l&&S.blur,n&&S.inline,c&&S.isOpen,i.className),c=this.triggerElem.current,[m,e]=m.split("-"),h=cn(S.content,h&&S.outlined,p&&g&&S.animating,d&&S["elevation-"+d],S["size-"+o],S["axis-"+m],S["float-"+(e||"middle")],s.className),c&&!n&&f&&(i.style={...f}),p=jsx("div",{...i,className:r,children:jsxs("div",{...s,ref:this.onContainerElemRef,className:h,suppressHydrationWarning:!0,"data-popup-id":this.id,"data-root-popup-id":b,style:{marginTop:this.offset.top,marginLeft:this.offset.left},children:[a&&!b&&jsx(Paranja,{visible:u,blur:l}),u&&jsx(Fragment,{children:t})]})}),n?p:jsx(Portal,{children:p}))}render(){var e=this.props["className"],e=cn(S.root,e);return jsxs("div",{className:e,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 { Component, createRef } from 'react';
+import cn from 'classnames';
+import { createStore } from 'justorm/react';
+import Time from 'timen';
+import { Paranja } from '../Paranja/Paranja.js';
+import { Portal } from '../Portal/Portal.js';
+import { getCoords } from '../../tools/dom.js';
+import { observe, unobserve } from '../../tools/resizeObserver.js';
+import { isBrowser } from '../../tools/env.js';
+import debounce from '../../tools/debounce.js';
+import throttle from '../../tools/throttle.js';
+import S from './Popup.styl.js';
+import { getId, getPopupId, isLastChild, unsetChild, childs, setChild } from './Popup.helpers.js';
+
+const ANIMATION_DURATION = 100;
+const OFFSET_GAP = 10;
+const INITIAL_OFFSET = { top: 0, left: 0 };
+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();
+        }
+    };
+    focused = false;
+    pointerPressed = false;
+    subscribedHoverControl = false;
+    subscribedSizeChange = false;
+    pointerDownTarget = null;
+    isPointerPressedInside = false;
+    needDropOffset = false;
+    id;
+    parentPopupContent;
+    store;
+    timers = Time.create();
+    scrollParent;
+    offset = { ...INITIAL_OFFSET };
+    static defaultProps = {
+        size: 'm',
+        direction: '',
+        animated: true,
+    };
+    constructor(props) {
+        super(props);
+        const isOpen = Boolean(props.isOpen);
+        this.id = getId();
+        this.store = createStore(this, {
+            rootPopupId: null,
+            isOpen,
+            isContentVisible: isOpen,
+            animating: false,
+            direction: props.direction,
+            triggerBounds: null,
+        });
+    }
+    componentDidMount() {
+        const { hoverControl, focusControl } = this.props;
+        const parentPopupContent = this.triggerElem.current.closest(`.${S.content}`);
+        document.addEventListener('pointerdown', this.onDocPointerDown, true);
+        document.addEventListener('pointerup', this.onDocPointerUp, true);
+        if (parentPopupContent) {
+            this.store.rootPopupId =
+                getPopupId(parentPopupContent, 'data-root-popup-id') ||
+                    getPopupId(parentPopupContent, 'data-popup-id');
+        }
+        if (focusControl) {
+            document.addEventListener('keydown', this.onDocKeyDown, true);
+            document.addEventListener('keyup', this.onDocKeyUp);
+        }
+        if (hoverControl)
+            this.subscribeHoverControl();
+        this.subscribeScroll();
+    }
+    componentDidUpdate(prevProps) {
+        const { isOpen, disabled, hoverControl } = this.props;
+        if (disabled) {
+            this.store.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();
+        }
+    }
+    componentWillUnmount() {
+        this.timers.clear();
+        document.removeEventListener('keyup', this.onDocKeyUp, true);
+        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.store.animating || !this.containerElem)
+            return;
+        if (!this.triggerElem.current)
+            return;
+        this.updateBoundsThrottled();
+    }
+    updateBoundsThrottled = throttle(() => {
+        const trigger = this.triggerElem.current;
+        const bounds = {
+            minHeight: trigger.offsetHeight,
+            minWidth: trigger.offsetWidth,
+            ...getCoords(trigger),
+        };
+        Object.entries(bounds).forEach(([key, value]) => {
+            this.triggerElem.current.style[key] = value;
+        });
+        this.updateOffset();
+        this.store.triggerBounds = bounds;
+    }, 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);
+            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;
+        }
+        if (content.left < 0) {
+            offset.left = -content.left + OFFSET_GAP;
+        }
+        else if (right > innerWidth) {
+            offset.left = innerWidth - right;
+        }
+        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)
+            return;
+        const { isOpen, rootPopupId } = this.store;
+        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);
+    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.store.isOpen) {
+            const { top, left } = this.offset;
+            if (left || top) {
+                this.offset = { ...INITIAL_OFFSET };
+                this.applyOffset();
+            }
+            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);
+    onDocKeyDown = (e) => {
+        this.pointerDownTarget = null;
+    };
+    onDocKeyUp = (e) => {
+        if (this.store.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.open();
+    };
+    onBlur = e => {
+        this.focused = false;
+        this.props.triggerProps?.onBlur?.(e);
+        // 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.store;
+        if (this.store.isOpen)
+            return;
+        this.updateBounds();
+        this.subscribeSizeChange();
+        this.subscribeScroll();
+        this.store.isContentVisible = true;
+        this.changeState(true, this.afterOpen);
+        if (rootPopupId)
+            setChild(rootPopupId, this.id);
+    }, 100);
+    close = () => {
+        if (!this.store.isOpen)
+            return;
+        this.unsubscribeSizeChange();
+        this.changeState(false, this.afterClose);
+    };
+    changeState(isOpen, callback) {
+        const { animated } = this.props;
+        this.timers.clear();
+        this.store.isOpen = isOpen;
+        if (animated) {
+            this.store.animating = true;
+            this.timers.after(ANIMATION_DURATION + 500, () => {
+                this.store.animating = false;
+                callback();
+            });
+        }
+        else {
+            callback();
+        }
+    }
+    afterOpen = () => {
+        this.props.onOpen?.();
+    };
+    afterClose = () => {
+        this.store.isContentVisible = false;
+        this.dropOffset();
+        this.props.onClose?.();
+    };
+    dropOffset() {
+        if (!this.needDropOffset)
+            return;
+        this.offset = { ...INITIAL_OFFSET };
+        this.applyOffset();
+    }
+    toggle = throttle(() => {
+        this.store.isOpen ? this.close() : this.open();
+    }, 100);
+    renderTrigger() {
+        const { trigger, content, disabled, focusControl, hoverControl, ...rest } = this.props;
+        const triggerProps = { ...rest.triggerProps };
+        const { isOpen } = this.store;
+        if (!trigger)
+            return null;
+        const disableTrigger = disabled || !content;
+        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, elevation, } = this.props;
+        const { isOpen, isContentVisible, animating, direction, triggerBounds, rootPopupId, } = this.store;
+        if (disabled)
+            return null;
+        const wrapperClasses = cn(S.contentWrapper, blur && S.blur, inline && S.inline, isOpen && S.isOpen, 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'}`], contentProps.className);
+        if (trigger && !inline && triggerBounds) {
+            wrapperProps.style = { ...triggerBounds };
+        }
+        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: this.offset.top,
+                    marginLeft: this.offset.left,
+                }, 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 };