@homecode/ui 4.11.1

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

@@ -0,0 +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 = 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

@@ -0,0 +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, 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

@@ -0,0 +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)}";
+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

@@ -0,0 +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;
+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

@@ -0,0 +1,396 @@
+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)) {
+            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(80, () => {
+            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 };

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

@@ -0,0 +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{pointer-events:none;position:absolute}.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-100);max-width:70vw;min-width:100%;opacity:0;overflow:hidden;pointer-events:none;position:relative;transform-origin:top center;z-index:11}.Popup_blur__1hfU8 .Popup_content__e8Qyu{-webkit-backdrop-filter:blur(50px);backdrop-filter:blur(50px);background-color:var(--decent-color-alpha-500)}.Popup_content__e8Qyu.Popup_size-s__UmixP{border-radius:4px}.Popup_content__e8Qyu.Popup_size-m__FYpTL{border-radius:6px}.Popup_content__e8Qyu.Popup_size-l__BTS57{border-radius:8px}.Popup_content__e8Qyu.Popup_elevation-1__vmP3e{box-shadow:inset 0 0 0 1px var(--accent-color-alpha-100),0 0 var(--indent-s) 2px var(--decent-color)}.Popup_content__e8Qyu.Popup_elevation-2__Ci4sI{box-shadow:inset 0 0 0 1px var(--accent-color-alpha-100),0 0 var(--indent-m) 2px var(--decent-color)}.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","inline":"Popup_inline__1-l1S","isOpen":"Popup_isOpen__BRIdP","content":"Popup_content__e8Qyu","trigger":"Popup_trigger__jQNaQ","disabled":"Popup_disabled__DlE9y","blur":"Popup_blur__1hfU8","size-s":"Popup_size-s__UmixP","size-m":"Popup_size-m__FYpTL","size-l":"Popup_size-l__BTS57","elevation-1":"Popup_elevation-1__vmP3e","elevation-2":"Popup_elevation-2__Ci4sI","outlined":"Popup_outlined__g3cJV","animating":"Popup_animating__kR0qF","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

@@ -0,0 +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, 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

@@ -0,0 +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}";
+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

@@ -0,0 +1,19 @@
+import { jsx, Fragment } from 'react/jsx-runtime';
+import { useState, useEffect } from 'react';
+import { createPortal } from 'react-dom';
+import { config } from '../../tools/config.js';
+
+const DEFAULT_SELECTOR = `#${config.appOverlayId}`;
+function Portal(props) {
+    const { selector = DEFAULT_SELECTOR, children } = props;
+    const [isMounted, setMounted] = useState(false);
+    useEffect(() => {
+        // prevent HTML mismatch between server and client
+        setMounted(true);
+    }, []);
+    if (!isMounted)
+        return null;
+    return createPortal(jsx(Fragment, { children: children }), document.querySelector(selector));
+}
+
+export { Portal };

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

@@ -0,0 +1,12 @@
+import { jsx } from 'react/jsx-runtime';
+import cn from 'classnames';
+import { Icon } from '../Icon/Icon.js';
+import S from './RequiredStar.styl.js';
+
+function RequiredStar(props) {
+    const { className, inline, ...rest } = props;
+    const classes = cn(S.root, className, inline && S.inline);
+    return jsx(Icon, { ...rest, type: "requiredStar", className: classes });
+}
+
+export { RequiredStar };

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

@@ -0,0 +1,7 @@
+import styleInject from '../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".RequiredStar_root__qZpQW{color:var(--danger-color)!important;pointer-events:none;position:absolute;right:2px;top:2px;transform:scale(.6)}.RequiredStar_inline__328Ou{position:relative;transform:translateY(-.5em)}";
+var S = {"root":"RequiredStar_root__qZpQW","inline":"RequiredStar_inline__328Ou"};
+styleInject(css_248z);
+
+export { S as default };

package/dist/esm/src/components/Router/Link/Link.js

@@ -0,0 +1,61 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useRef, useContext, useMemo, useCallback } from 'react';
+import { withStore } from 'justorm/react';
+import cn from 'classnames';
+import { Icon } from '../../Icon/Icon.js';
+import Context from '../context.js';
+import S from './Link.styl.js';
+
+const isStartFromDoubleSlash = href => /^\/\//.test(href);
+const Link = withStore({ router: ['path'] })(({ className, exactClassName, children, href: hrefProp, isClear = false, isDisabled = false, disableExternalIcon = false, inline = false, store: { router }, isPartialExact = false, onClick, ...rest }) => {
+    const { path } = router;
+    const isFromRoot = isStartFromDoubleSlash(hrefProp);
+    const domElem = useRef(null);
+    const { basePath } = useContext(Context);
+    const isExternal = useMemo(() => /\./.test(hrefProp), [hrefProp]);
+    const rootPath = useMemo(() => {
+        if (isExternal || isFromRoot)
+            return '';
+        return basePath ?? '';
+    }, [isExternal, isFromRoot, basePath]);
+    const href = useMemo(() => {
+        let str = hrefProp;
+        if (isFromRoot)
+            str = str.replace(/^\//, '');
+        if (str === '/')
+            str = '';
+        return `${rootPath}${str}`;
+    }, [hrefProp, rootPath]);
+    const handleClick = useCallback(e => {
+        onClick?.(e, href);
+        if (!isExternal && router.path !== href) {
+            e.preventDefault();
+            if (e.ctrlKey || e.metaKey) {
+                window.open(href, '_blank');
+            }
+            else {
+                router.go(href);
+            }
+            domElem.current?.blur();
+        }
+    }, [href, isExternal, onClick]);
+    const isExact = useMemo(() => {
+        if (isPartialExact)
+            return path.startsWith(href);
+        return path === href;
+    }, [path, href, isPartialExact]);
+    const props = { ...rest, href };
+    const isNested = !/^\//.test(href) && !isExternal;
+    const classes = cn(S.root, isDisabled && S.disabled, isExternal && S.external, isExact && cn(S.exact, exactClassName), isClear && S.clear, inline && S.inline, className);
+    if (isNested) {
+        props.href = `${path.replace(/\/$/, '')}/${href}`;
+    }
+    if (isExternal) {
+        props.target = '_blank';
+        if (!/^http/.test(href))
+            props.href = `http://${href}`;
+    }
+    return (jsxs("a", { className: classes, ...props, onClick: handleClick, ref: domElem, children: [children, isExternal && !disableExternalIcon && (jsx(Icon, { type: "externalLink", className: S.externalIcon }))] }));
+});
+
+export { Link };

package/dist/esm/src/components/Router/Link/Link.styl.js

@@ -0,0 +1,7 @@
+import styleInject from '../../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".Link_root__KhBI1{align-items:center;box-shadow:inset 0 0 0 2px none;color:var(--link-color);cursor:pointer;display:inline-flex;padding:5px;position:relative;text-decoration:none;transition:color .1s ease-out;white-space:nowrap}.Link_root__KhBI1:before{background-color:var(--accent-color);bottom:0;content:\"\";height:2px;left:5px;pointer-events:none;position:absolute;right:5px;transform:scale(0);transition:transform .1s ease-out}.Link_root__KhBI1.Link_clear__abVgJ:before{content:none}.Link_root__KhBI1.Link_inline__iuNov{padding:0}.Link_root__KhBI1.Link_inline__iuNov:before{bottom:-2px;left:0;right:0}.Link_root__KhBI1.Link_exact__3MNoz{color:var(--accent-color);pointer-events:none}.Link_root__KhBI1.Link_external__drijI:before{background-color:var(--active-color)}.Link_root__KhBI1:active,.Link_root__KhBI1:focus,.Link_root__KhBI1:hover{color:var(--accent-color)}.Link_root__KhBI1:active.Link_external__drijI,.Link_root__KhBI1:focus.Link_external__drijI,.Link_root__KhBI1:hover.Link_external__drijI{color:var(--active-color)}.Link_root__KhBI1:active::-moz-selection,.Link_root__KhBI1:focus::-moz-selection,.Link_root__KhBI1:hover::-moz-selection{color:var(--accent-color)}.Link_root__KhBI1:active::selection,.Link_root__KhBI1:focus::selection,.Link_root__KhBI1:hover::selection{color:var(--accent-color)}.Link_root__KhBI1:active:before,.Link_root__KhBI1:focus:before,.Link_root__KhBI1:hover:before{transform:scale(1)}.Link_root__KhBI1.Link_disabled__wkAeH{color:var(--accent-color);opacity:.4;pointer-events:none}.Link_externalIcon__YDRJG{display:inline-block;height:1em;margin-bottom:-2px;margin-left:3px;width:1em}";
+var S = {"root":"Link_root__KhBI1","clear":"Link_clear__abVgJ","inline":"Link_inline__iuNov","exact":"Link_exact__3MNoz","external":"Link_external__drijI","disabled":"Link_disabled__wkAeH","externalIcon":"Link_externalIcon__YDRJG"};
+styleInject(css_248z);
+
+export { S as default };