@homecode/ui 5.1.9 → 5.1.10

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

@@ -1,2 +1,218 @@
-import{Component}from"react";import cn from"classnames";import pick from"lodash.pick";import compare from"compareq";import Time from"timen";import debounce from"../../tools/debounce.js";import throttle from"../../tools/throttle.js";import{getHeight,getIndexes}from"./Virtualized.helpers.js";import S from"./Virtualized.styl.js";class Virtualized extends Component{clearUnfreezeTimer;scrollTopInited=!1;scrollElem;lastScrollEndIndex=0;onScrollThrottled;onScrollDebounced;static defaultProps={overlapCount:10,pageSize:20};constructor(t){super(t),this.state={id:null,height:getHeight(t),first:0,last:0,isFreezed:!1},this.onScrollThrottled=throttle(this._onScroll,150),this.onScrollDebounced=debounce(this._onScroll,150),this.checkIfEnd=debounce(this.checkIfEnd,200)}static getDerivedStateFromProps(t,{height:e}){t=getHeight(t);return t!==e?{height:t}:null}componentDidMount(){var t=this.getIndexes();this.setState(t)}getSnapshotBeforeUpdate(t){var{itemHeight:e,itemsCount:s}=this.props;return 0===s&&s!==t.itemsCount?0:this.scrollElem&&e!==t.itemHeight?e/t.itemHeight*this.scrollElem.scrollTop:null}shouldComponentUpdate(t,e){return t.id!==this.props.id||t.itemsCount!==this.props.itemsCount||t.wrapElem!==this.props.wrapElem||t.renderItem!==this.props.renderItem||t.totalCount!==this.props.totalCount||t.itemHeight!==this.props.itemHeight||t.overlapCount!==this.props.overlapCount||t.getItemProps!==this.props.getItemProps||!compare(e,this.state)}componentDidUpdate(t,e,s){var o={},r=this.scrollElem!==this.props.wrapElem;r&&(this.scrollElem=this.props.wrapElem),this.scrollElem&&"number"==typeof(s=this.getNewScrollTop(t,s))&&(this.scrollElem.scrollTop=s),t.id!==this.props.id&&(o.id=this.props.id),(r||this.needUpdateIndexes(t))&&Object.assign(o,this.getIndexes()),this.needUpdateHeight(t)&&(o.height=getHeight(this.props)),Object.keys(o).length&&this.setState(o)}componentWillUnmount(){this.clearUnfreezeTimer?.()}needUpdateIndexes(e){return["id","itemsCount","totalCount","overlapCount"].some(t=>e[t]!==this.props[t])}needUpdateHeight(e){return["totalCount","offsetAfter"].some(t=>e[t]!==this.props[t])}getNewScrollTop(t,e){var{initialScrollTop:s,scrollTop:o,itemsCount:r}=this.props;if(!this.scrollTopInited){var i=s??o;if(i&&t.itemsCount&&r)return this.scrollTopInited=!0,i}return 0<t.initialScrollTop&&0===s?0:"number"==typeof o&&o!==t.scrollTop?o:"number"==typeof e?e:null}getIndexes(){var t,e;return this.scrollElem?({scrollTop:t,clientHeight:e}=this.scrollElem,getIndexes({scrollTop:t,clientHeight:e,...pick(this.props,["itemsCount","totalCount","itemHeight","overlapCount"])})):null}_onScroll=t=>{this.scrollElem=t.target;var t=this.props["onScroll"],e=this.getIndexes(),s=this.scrollElem["scrollTop"];t&&t({scrollTop:s,...e}),this.checkIfEnd(),compare(e,pick(this.state,["first","last"]))||this.setState({...e}),this.unfreeze()};onScroll=t=>{this.onScrollThrottled(t),this.onScrollDebounced(t)};checkIfEnd=()=>{var{itemsCount:t,totalCount:e,pageSize:s,onScrollEnd:o}=this.props;t!==e&&(t<this.lastScrollEndIndex&&(this.lastScrollEndIndex=0),this.lastScrollEndIndex=Math.min(t+s,e),o?.())};unfreeze=()=>{this.clearUnfreezeTimer?.(),this.clearUnfreezeTimer=Time.after(200,()=>{this.setState({isFreezed:!1})})};getItemProps=t=>{var{getItemProps:e,offsetBefore:s,offsetAfter:o}=this.props,r={className:S.item,key:t};if(e){const{className:i,...l}=e({index:t,offsetBefore:s,offsetAfter:o});r.className=cn(r.className,i),Object.assign(r,l)}return r};renderItems(){var{itemsCount:t,renderItem:e}=this.props,{first:s,last:o}=this.state,r=[];if(0<t)for(let t=s;t<=o;t++)r.push(e(this.getItemProps(t)));return r}render(){const{children:t,className:e,pageSize:s,...o}=this.props;var r=this.state["isFreezed"],i={...pick(this.state,["first","last","height"]),...pick(this.props,["offsetBefore","offsetAfter"])};return t({...o,state:i,className:cn(S.root,r&&S.freezeClicks,e),onScroll:this.onScroll,items:this.renderItems()})}}export{Virtualized as default};
-//# sourceMappingURL=Virtualized.js.map
+import { Component } from 'react';
+import cn from 'classnames';
+import pick from 'lodash.pick';
+import compare from 'compareq';
+import Time from 'timen';
+import debounce from '../../tools/debounce.js';
+import throttle from '../../tools/throttle.js';
+import { getHeight, getIndexes } from './Virtualized.helpers.js';
+import S from './Virtualized.styl.js';
+
+class Virtualized extends Component {
+    clearUnfreezeTimer;
+    scrollTopInited = false;
+    scrollElem;
+    lastScrollEndIndex = 0;
+    onScrollThrottled;
+    onScrollDebounced;
+    static defaultProps = {
+        overlapCount: 10,
+        pageSize: 20,
+    };
+    constructor(props) {
+        super(props);
+        this.state = {
+            id: null,
+            height: getHeight(props),
+            first: 0,
+            last: 0,
+            isFreezed: false,
+        };
+        this.onScrollThrottled = throttle(this._onScroll, 150);
+        this.onScrollDebounced = debounce(this._onScroll, 150);
+        this.checkIfEnd = debounce(this.checkIfEnd, 200);
+    }
+    static getDerivedStateFromProps(props, { height }) {
+        const newHeight = getHeight(props);
+        if (newHeight !== height)
+            return { height: newHeight };
+        return null;
+    }
+    componentDidMount() {
+        const indexes = this.getIndexes();
+        this.setState(indexes); // eslint-disable-line
+        // });
+        // document.addEventListener('scroll', this.onScroll, true);
+    }
+    getSnapshotBeforeUpdate(prevProps) {
+        const { itemHeight, itemsCount } = this.props;
+        if (itemsCount === 0 && itemsCount !== prevProps.itemsCount)
+            return 0;
+        if (this.scrollElem) {
+            if (itemHeight !== prevProps.itemHeight)
+                return (itemHeight / prevProps.itemHeight) * this.scrollElem.scrollTop;
+        }
+        return null;
+    }
+    shouldComponentUpdate(nextProps, nextState) {
+        if (nextProps.id !== this.props.id)
+            return true;
+        if (nextProps.itemsCount !== this.props.itemsCount)
+            return true;
+        if (nextProps.wrapElem !== this.props.wrapElem)
+            return true;
+        if (nextProps.renderItem !== this.props.renderItem)
+            return true;
+        if (nextProps.totalCount !== this.props.totalCount)
+            return true;
+        if (nextProps.itemHeight !== this.props.itemHeight)
+            return true;
+        if (nextProps.overlapCount !== this.props.overlapCount)
+            return true;
+        if (nextProps.getItemProps !== this.props.getItemProps)
+            return true;
+        if (!compare(nextState, this.state))
+            return true;
+        return false;
+    }
+    componentDidUpdate(prevProps, prevState, snapshot) {
+        const state = {};
+        const scrollElemUpdated = this.scrollElem !== this.props.wrapElem;
+        if (scrollElemUpdated)
+            this.scrollElem = this.props.wrapElem;
+        if (this.scrollElem) {
+            const newScrollTop = this.getNewScrollTop(prevProps, snapshot);
+            if (typeof newScrollTop === 'number')
+                this.scrollElem.scrollTop = newScrollTop;
+        }
+        if (prevProps.id !== this.props.id)
+            state.id = this.props.id;
+        if (scrollElemUpdated || this.needUpdateIndexes(prevProps))
+            Object.assign(state, this.getIndexes());
+        if (this.needUpdateHeight(prevProps))
+            state.height = getHeight(this.props);
+        if (Object.keys(state).length)
+            this.setState(state);
+    }
+    componentWillUnmount() {
+        this.clearUnfreezeTimer?.();
+    }
+    needUpdateIndexes(prevProps) {
+        // const { wrapElem } = this.props;
+        // if (!prevProps.wrapElem && wrapElem) return true;
+        return ['id', 'itemsCount', 'totalCount', 'overlapCount'].some(key => prevProps[key] !== this.props[key]);
+    }
+    needUpdateHeight(prevProps) {
+        return ['totalCount', 'offsetAfter'].some(key => prevProps[key] !== this.props[key]);
+    }
+    getNewScrollTop(prevProps, snapshot) {
+        const { initialScrollTop, scrollTop, itemsCount } = this.props;
+        if (!this.scrollTopInited) {
+            const scrollValue = initialScrollTop ?? scrollTop;
+            if (scrollValue && prevProps.itemsCount && itemsCount) {
+                this.scrollTopInited = true;
+                return scrollValue;
+            }
+        }
+        if (prevProps.initialScrollTop > 0 && initialScrollTop === 0)
+            return 0;
+        if (typeof scrollTop === 'number' && scrollTop !== prevProps.scrollTop)
+            return scrollTop;
+        if (typeof snapshot === 'number')
+            return snapshot;
+        return null;
+    }
+    getIndexes() {
+        // const { wrapElem } = this.props;
+        if (!this.scrollElem)
+            return null;
+        const { scrollTop, clientHeight } = this.scrollElem;
+        return getIndexes({
+            scrollTop,
+            clientHeight,
+            ...pick(this.props, [
+                'itemsCount',
+                'totalCount',
+                'itemHeight',
+                'overlapCount',
+            ]),
+        });
+    }
+    _onScroll = e => {
+        this.scrollElem = e.target;
+        const { onScroll } = this.props;
+        const indexes = this.getIndexes();
+        const { scrollTop } = this.scrollElem;
+        if (onScroll)
+            onScroll({ scrollTop, ...indexes });
+        this.checkIfEnd();
+        if (!compare(indexes, pick(this.state, ['first', 'last'])))
+            this.setState({ ...indexes });
+        this.unfreeze();
+    };
+    onScroll = (e) => {
+        this.onScrollThrottled(e);
+        this.onScrollDebounced(e);
+    };
+    checkIfEnd = () => {
+        const { itemsCount, totalCount, pageSize, onScrollEnd } = this.props;
+        if (itemsCount === totalCount)
+            return;
+        if (itemsCount < this.lastScrollEndIndex) {
+            this.lastScrollEndIndex = 0; // Reset when list shrinks (e.g. filter cleared)
+        }
+        this.lastScrollEndIndex = Math.min(itemsCount + pageSize, totalCount);
+        onScrollEnd?.();
+    };
+    unfreeze = () => {
+        this.clearUnfreezeTimer?.();
+        this.clearUnfreezeTimer = Time.after(200, () => {
+            this.setState({ isFreezed: false });
+        });
+    };
+    getItemProps = (index) => {
+        const { getItemProps, offsetBefore, offsetAfter } = this.props;
+        const props = {
+            className: S.item,
+            key: index,
+        };
+        if (getItemProps) {
+            const { className, ...rest } = getItemProps({
+                index,
+                offsetBefore,
+                offsetAfter,
+            });
+            props.className = cn(props.className, className);
+            Object.assign(props, rest);
+        }
+        return props;
+    };
+    renderItems() {
+        const { itemsCount, renderItem } = this.props;
+        const { first, last } = this.state;
+        const items = [];
+        if (itemsCount > 0) {
+            for (let i = first; i <= last; i++) {
+                items.push(renderItem(this.getItemProps(i)));
+            }
+        }
+        return items;
+    }
+    render() {
+        const { children, className, pageSize, ...rest } = this.props;
+        const { isFreezed } = this.state;
+        const state = {
+            ...pick(this.state, ['first', 'last', 'height']),
+            ...pick(this.props, ['offsetBefore', 'offsetAfter']),
+        };
+        return children({
+            ...rest,
+            state,
+            className: cn(S.root, isFreezed && S.freezeClicks, className),
+            onScroll: this.onScroll,
+            items: this.renderItems(),
+        });
+    }
+}
+
+export { Virtualized as default };

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

@@ -1,2 +1,7 @@
-import styleInject from"../../../node_modules/style-inject/dist/style-inject.es.js";var css_248z=".Virtualized_root__SX71a{display:block;height:100%;max-height:100%;overflow-y:auto;position:relative}.Virtualized_item__1vSN0{animation:Virtualized_show__2WhkK .1s ease-out;-webkit-backface-visibility:hidden;backface-visibility:hidden;transform:translateZ(0)}.Virtualized_freezeClicks__SCBdy .Virtualized_item__1vSN0{pointer-events:none}@keyframes Virtualized_show__2WhkK{0%{opacity:0}to{opacity:1}}",S={root:"Virtualized_root__SX71a",item:"Virtualized_item__1vSN0",show:"Virtualized_show__2WhkK",freezeClicks:"Virtualized_freezeClicks__SCBdy"};styleInject(css_248z);export{S as default};
-//# sourceMappingURL=Virtualized.styl.js.map
+import styleInject from '../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".Virtualized_root__SX71a{display:block;height:100%;max-height:100%;overflow-y:auto;position:relative}.Virtualized_item__1vSN0{animation:Virtualized_show__2WhkK .1s ease-out;-webkit-backface-visibility:hidden;backface-visibility:hidden;transform:translateZ(0)}.Virtualized_freezeClicks__SCBdy .Virtualized_item__1vSN0{pointer-events:none}@keyframes Virtualized_show__2WhkK{0%{opacity:0}to{opacity:1}}";
+var S = {"root":"Virtualized_root__SX71a","item":"Virtualized_item__1vSN0","show":"Virtualized_show__2WhkK","freezeClicks":"Virtualized_freezeClicks__SCBdy"};
+styleInject(css_248z);
+
+export { S as default };

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

@@ -1,2 +1 @@
 
-//# sourceMappingURL=Virtualized.types.js.map

package/dist/esm/src/hooks/useDebounce.js

@@ -1,2 +1,11 @@
-import{useCallback}from"react";import debounce from"../tools/debounce.js";function useDebounce(e,u){return useCallback(debounce(e,u),[e,u])}function useDebounceCallback(e,u,o){return useCallback(debounce(e,u),o)}export{useDebounce,useDebounceCallback};
-//# sourceMappingURL=useDebounce.js.map
+import { useCallback } from 'react';
+import debounce from '../tools/debounce.js';
+
+function useDebounce(fn, delay) {
+    return useCallback(debounce(fn, delay), [fn, delay]);
+}
+function useDebounceCallback(fn, delay, deps) {
+    return useCallback(debounce(fn, delay), deps);
+}
+
+export { useDebounce, useDebounceCallback };

package/dist/esm/src/hooks/useEvent.js

@@ -1,2 +1,27 @@
-import{useEffect}from"react";function useEvent({elem:t,event:a,callback:c,isActive:s=!0,isCapture:u=!1}){useEffect(()=>{const e=Array.isArray(a)?a:[a],n=t?Array.isArray(t)?t:[t]:[document],r=t=>{e.forEach(r=>{n.forEach(e=>{return t((e=e)&&("current"in e?e.current:e),r)})})};return s&&r((e,r)=>e?.addEventListener(r,c,u)),()=>{r((e,r)=>e?.removeEventListener(r,c))}},[s,t,c])}export{useEvent as default};
-//# sourceMappingURL=useEvent.js.map
+import { useEffect } from 'react';
+
+function useEvent({ elem, event, callback, isActive = true, isCapture = false, }) {
+    useEffect(() => {
+        const events = Array.isArray(event) ? event : [event];
+        const elems = elem ? (Array.isArray(elem) ? elem : [elem]) : [document];
+        const getElem = (el) => el && ('current' in el ? el.current : el);
+        const each = (cb) => {
+            events.forEach(ev => {
+                elems.forEach(el => cb(getElem(el), ev));
+            });
+        };
+        const enable = () => {
+            each((el, ev) => el?.addEventListener(ev, callback, isCapture));
+        };
+        const disable = () => {
+            each((el, ev) => el?.removeEventListener(ev, callback));
+        };
+        if (isActive)
+            enable();
+        return () => {
+            disable();
+        };
+    }, [isActive, elem, callback]);
+}
+
+export { useEvent as default };

package/dist/esm/src/hooks/useIsMounted.js

@@ -1,2 +1,11 @@
-import{useRef,useEffect}from"react";const useIsMounted=()=>{const e=useRef(!1);return useEffect(()=>{e.current=!0},[]),e};export{useIsMounted};
-//# sourceMappingURL=useIsMounted.js.map
+import { useRef, useEffect } from 'react';
+
+const useIsMounted = () => {
+    const isMounted = useRef(false);
+    useEffect(() => {
+        isMounted.current = true;
+    }, []);
+    return isMounted;
+};
+
+export { useIsMounted };

package/dist/esm/src/hooks/useListKeyboardControl.js

@@ -1,2 +1,50 @@
-import{useState,useCallback,useEffect}from"react";import useEvent from"./useEvent.js";const useListKeyboardControl=({isActive:e,itemsCount:s,onSelect:r})=>{const[n,u]=useState(-1);var t=useCallback(t=>{let e=n;var o=e=>{t.preventDefault(),t.stopPropagation(),u(e)};"ArrowDown"===t.key?o(e=++e>=s?0:e):"ArrowUp"===t.key?o(e=--e<0?s-1:e):"Enter"===t.key&&r(e)},[n,s,r]);return useEvent({elem:document,event:"keydown",callback:t,isActive:e}),useEffect(()=>{s<n&&u(s-1)},[s]),{focusedIndex:n,setFocusedIndex:u}};export{useListKeyboardControl};
-//# sourceMappingURL=useListKeyboardControl.js.map
+import { useState, useCallback, useEffect } from 'react';
+import useEvent from './useEvent.js';
+
+const useListKeyboardControl = ({ isActive, itemsCount, onSelect, }) => {
+    const [focusedIndex, setFocusedIndex] = useState(-1);
+    const handleKeyDown = useCallback((e) => {
+        let newIndex = focusedIndex;
+        const set = (index) => {
+            e.preventDefault();
+            e.stopPropagation();
+            setFocusedIndex(index);
+            return;
+        };
+        if (e.key === 'ArrowDown') {
+            newIndex++;
+            if (newIndex >= itemsCount)
+                newIndex = 0;
+            set(newIndex);
+            return;
+        }
+        if (e.key === 'ArrowUp') {
+            newIndex--;
+            if (newIndex < 0)
+                newIndex = itemsCount - 1;
+            set(newIndex);
+            return;
+        }
+        if (e.key === 'Enter') {
+            onSelect(newIndex);
+            return;
+        }
+    }, [focusedIndex, itemsCount, onSelect]);
+    useEvent({
+        elem: document,
+        event: 'keydown',
+        callback: handleKeyDown,
+        isActive,
+    });
+    useEffect(() => {
+        if (itemsCount < focusedIndex) {
+            setFocusedIndex(itemsCount - 1);
+        }
+    }, [itemsCount]);
+    return {
+        focusedIndex,
+        setFocusedIndex,
+    };
+};
+
+export { useListKeyboardControl };

package/dist/esm/src/hooks/useResizeObserver.js

@@ -1,2 +1,15 @@
-import{useEffect}from"react";const useResizeObserver=(r,s)=>{useEffect(()=>{if(r.current){const e=new ResizeObserver(e=>{s(e[0])});return e.observe(r.current),()=>e.disconnect()}},[r,s])};export{useResizeObserver};
-//# sourceMappingURL=useResizeObserver.js.map
+import { useEffect } from 'react';
+
+const useResizeObserver = (ref, callback) => {
+    useEffect(() => {
+        if (!ref.current)
+            return;
+        const observer = new ResizeObserver(entries => {
+            callback(entries[0]);
+        });
+        observer.observe(ref.current);
+        return () => observer.disconnect();
+    }, [ref, callback]);
+};
+
+export { useResizeObserver };

package/dist/esm/src/hooks/useThrottle.js

@@ -1,2 +1,31 @@
-import{useRef,useEffect,useCallback}from"react";function useThrottle(l,c,n={trailing:!1},e=[]){const a=useRef(0),o=useRef(null);return useEffect(()=>()=>{clearTimeout(o.current)},e),useCallback((...e)=>{const t=Date.now();var r=()=>{l(...e),a.current=t},u=c-(t-a.current);u<=0?(clearTimeout(o.current),r()):n.trailing&&!o.current&&(o.current=setTimeout(r,u))},[c,n.trailing,...e])}function useThrottleCallback(e,t,r=[]){return useCallback(useThrottle(e,t,{trailing:!0},r),r)}export{useThrottle,useThrottleCallback};
-//# sourceMappingURL=useThrottle.js.map
+import { useRef, useEffect, useCallback } from 'react';
+
+function useThrottle(cb, limit, options = { trailing: false }, deps = []) {
+    const lastRun = useRef(0);
+    const timeoutId = useRef(null);
+    useEffect(() => {
+        return () => {
+            clearTimeout(timeoutId.current);
+        };
+    }, deps);
+    return useCallback((...args) => {
+        const now = Date.now();
+        const execute = () => {
+            cb(...args);
+            lastRun.current = now;
+        };
+        const remaining = limit - (now - lastRun.current);
+        if (remaining <= 0) {
+            clearTimeout(timeoutId.current);
+            execute();
+        }
+        else if (options.trailing && !timeoutId.current) {
+            timeoutId.current = setTimeout(execute, remaining);
+        }
+    }, [limit, options.trailing, ...deps]);
+}
+function useThrottleCallback(cb, limit, deps = []) {
+    return useCallback(useThrottle(cb, limit, { trailing: true }, deps), deps);
+}
+
+export { useThrottle, useThrottleCallback };

package/dist/esm/src/hooks/useToggleState.js

@@ -1,2 +1,35 @@
-import{useState,useCallback}from"react";import{generateUID}from"../tools/uid.js";function useToggleState(o={}){var e=o.id||generateUID();const[t,a]=useState(!1),[s,u]=useState(!1);return{id:e,isActive:t,isFocused:s,handlers:{onPointerDown:useCallback(()=>{a(!0)},[]),onPointerUp:useCallback(()=>{a(!1)},[]),onFocus:useCallback(e=>{u(!0),o.onFocus?.(e)},[o.onFocus]),onBlur:useCallback(e=>{u(!1),o.onBlur?.(e)},[o.onBlur])}}}export{useToggleState};
-//# sourceMappingURL=useToggleState.js.map
+import { useState, useCallback } from 'react';
+import { generateUID } from '../tools/uid.js';
+
+function useToggleState(props = {}) {
+    const id = props.id || generateUID();
+    const [isActive, setIsActive] = useState(false);
+    const [isFocused, setIsFocused] = useState(false);
+    const onPointerDown = useCallback(() => {
+        setIsActive(true);
+    }, []);
+    const onPointerUp = useCallback(() => {
+        setIsActive(false);
+    }, []);
+    const onFocus = useCallback((e) => {
+        setIsFocused(true);
+        props.onFocus?.(e);
+    }, [props.onFocus]);
+    const onBlur = useCallback((e) => {
+        setIsFocused(false);
+        props.onBlur?.(e);
+    }, [props.onBlur]);
+    return {
+        id,
+        isActive,
+        isFocused,
+        handlers: {
+            onPointerDown,
+            onPointerUp,
+            onFocus,
+            onBlur,
+        },
+    };
+}
+
+export { useToggleState };

package/dist/esm/src/services/i18n.js

@@ -1,2 +1,112 @@
-import{jsx,Fragment}from"react/jsx-runtime";import{memo}from"react";import{nanoid}from"nanoid";import{createStore,useStore}from"justorm/react";import _i18n from"roddeh-i18n";import LS from"../tools/localStorage.js";import{queryParams}from"../tools/queryParams.js";const DEFAULT_LANG="en",modules={},queryLang=queryParams.lang,store=(queryLang&&LS.set("lang",queryLang),createStore("i18n",{lang:LS.get("lang")??DEFAULT_LANG,async changeLang(e){var r=modules[e].map(e=>e());await Promise.all(r),modules[e]=[],this.lang=e,LS.set("lang",e)}}));function init(e){const a=Object.keys(e).reduce((e,r)=>({...e,[r]:_i18n.create({values:{}})}),{}),n=(e,r,t)=>a[e]?.translator.data.values[r]?a[e](r,...t):null;function o(e,r){var t;return r?"number"==typeof r?n(store.lang,e,[r])||e:"object"==typeof r?(t=[],"plural"in r&&t.push(r.plural),"params"in r?t.push(r.params):"plural"in r&&"params"in r||"plural"in r||"context"in r||t.push(r),"context"in r&&("params"in r||"plural"in r||t.push({}),t.push(r.context)),n(store.lang,e,t)||e):Array.isArray(r)&&n(store.lang,e,r)||e:n(store.lang,e,[])||e}const s="i18n-"+nanoid(),t=createStore(s,{_updated:""}),u=async(e,r)=>{e="function"==typeof e?(await e()).default:e;a[r].translator.add({values:e}),t._updated=nanoid()};return Object.entries(e).forEach(([e,r])=>{if(modules[e]||(modules[e]=[]),e===store.lang)return u(r,e);modules[e].push(()=>u(r,e))}),{storeName:s,componentStore:t,withI18N:r=>e=>(useStore({[s]:["_updated"]}),jsx(r,{...e})),i18n:(e,r)=>o(e,r),I18N:memo(function({id:e,children:r,props:t}){return useStore({i18n:["lang"],[s]:["_updated"]}),jsx(Fragment,{children:o(e??r,t)})})}}const useI18N=(e="lang")=>useStore({i18n:[e]}).i18n;export{init,store,useI18N};
-//# sourceMappingURL=i18n.js.map
+import { jsx, Fragment } from 'react/jsx-runtime';
+import { memo } from 'react';
+import { nanoid } from 'nanoid';
+import { createStore, useStore } from 'justorm/react';
+import _i18n from 'roddeh-i18n';
+import LS from '../tools/localStorage.js';
+import { queryParams } from '../tools/queryParams.js';
+
+const DEFAULT_LANG = 'en';
+const modules = {};
+const queryLang = queryParams.lang;
+if (queryLang)
+    LS.set('lang', queryLang);
+const store = createStore('i18n', {
+    lang: LS.get('lang') ?? DEFAULT_LANG,
+    async changeLang(lang) {
+        // TODO: use WebWorker for requests?
+        const requests = modules[lang].map(loader => loader());
+        await Promise.all(requests);
+        modules[lang] = [];
+        this.lang = lang;
+        LS.set('lang', lang);
+    },
+});
+function init(config) {
+    const langs = Object.keys(config);
+    const texts = langs.reduce((acc, lang) => ({ ...acc, [lang]: _i18n.create({ values: {} }) }), {});
+    const _getText = (lang, key, props) => {
+        if (texts[lang]?.translator.data.values[key]) {
+            return texts[lang](key, ...props);
+        }
+        return null;
+    };
+    function getTrans(key, props) {
+        // Handle different prop formats according to roddeh-i18n
+        if (!props) {
+            return _getText(store.lang, key, []) || key;
+        }
+        // If props is a number, it's for pluralization
+        if (typeof props === 'number') {
+            return _getText(store.lang, key, [props]) || key;
+        }
+        // If props is an object, handle different cases
+        if (typeof props === 'object') {
+            const args = [];
+            // For plural forms with parameters
+            if ('plural' in props) {
+                args.push(props.plural);
+            }
+            // For parameters/formatting
+            if ('params' in props) {
+                args.push(props.params);
+            }
+            else if ('plural' in props && 'params' in props) ;
+            else if (!('plural' in props) && !('context' in props)) {
+                // If it's just a plain object without our special keys, treat it as params
+                args.push(props);
+            }
+            // Context comes last
+            if ('context' in props) {
+                // If we don't have params but have context, add empty params
+                if (!('params' in props) && !('plural' in props)) {
+                    args.push({});
+                }
+                args.push(props.context);
+            }
+            return _getText(store.lang, key, args) || key;
+        }
+        // For backward compatibility with array format
+        if (Array.isArray(props)) {
+            return _getText(store.lang, key, props) || key;
+        }
+        return key;
+    }
+    const storeName = `i18n-${nanoid()}`;
+    const componentStore = createStore(storeName, { _updated: '' });
+    const callLoader = async (loader, lang) => {
+        const values = typeof loader === 'function' ? (await loader()).default : loader;
+        texts[lang].translator.add({ values });
+        componentStore._updated = nanoid();
+    };
+    Object.entries(config).forEach(([lang, loader]) => {
+        if (!modules[lang])
+            modules[lang] = [];
+        if (lang === store.lang)
+            return callLoader(loader, lang);
+        modules[lang].push(() => callLoader(loader, lang));
+    });
+    // TODO: bring back the ability to register modules
+    return {
+        storeName,
+        componentStore,
+        // hook (update when componentStore._updated changed)
+        withI18N: Component => props => {
+            useStore({ [storeName]: ['_updated'] });
+            return jsx(Component, { ...props });
+        },
+        i18n: (key, props) => getTrans(key, props),
+        I18N: memo(function I18N({ id, children, props }) {
+            useStore({
+                i18n: ['lang'],
+                [storeName]: ['_updated'], // explicitly subscribe to _updated
+            });
+            const key = id ?? children;
+            // @ts-ignore
+            return jsx(Fragment, { children: getTrans(key, props) });
+        }),
+    };
+}
+const useI18N = (fields = 'lang') => useStore({ i18n: [fields] }).i18n;
+
+export { init, store, useI18N };

package/dist/esm/src/tools/array.js

@@ -1,2 +1,60 @@
-function indexWhere(e,i,t){if(!t)return e.indexOf(i);const c="object"==typeof i;let a=-1;return e.some((e,r)=>{var n=c?i?.[t]:i;return e?.[t]===n&&(a=r,!0)}),a}function sliceWhere([...e],r,n){return spliceWhere(e,r,n),e}function spliceWhere(e,r,n){r=indexWhere(e,r,n);-1<r&&e.splice(r,1)}function _addUniq({arr:r,val:e,fieldName:n},i){Array.isArray(e)?e.forEach(e=>addUniq(r,e,n)):-1===indexWhere(r,e,n)&&i(e)}function addUniq(r,e,n){_addUniq({arr:r,val:e,fieldName:n},e=>r.push(e))}function unshiftUniq(r,e,n){_addUniq({arr:r,val:e,fieldName:n},e=>r.unshift(e))}function insert(e,r,n){return[...e.slice(0,n),...r,...e.slice(n+r.length)]}function getIndexCircular(e,r){var n=e.length;return e[(r%n+n)%n]}function circularSlice(r,n,i){var t=[];for(let e=0;e<i;e++)t.push(getIndexCircular(r,n+e));return t}export{addUniq,circularSlice,getIndexCircular,indexWhere,insert,sliceWhere,spliceWhere,unshiftUniq};
-//# sourceMappingURL=array.js.map
+function indexWhere(arr, val, fieldName) {
+    if (!fieldName) {
+        return arr.indexOf(val);
+    }
+    const isValObj = typeof val === 'object';
+    let index = -1;
+    arr.some((d, i) => {
+        const dVal = isValObj ? val?.[fieldName] : val;
+        if (d?.[fieldName] === dVal) {
+            index = i;
+            return true;
+        }
+        return false;
+    });
+    return index;
+}
+function sliceWhere([...arr], val, fieldName) {
+    spliceWhere(arr, val, fieldName);
+    return arr;
+}
+function spliceWhere(arr, val, fieldName) {
+    const index = indexWhere(arr, val, fieldName);
+    if (index > -1)
+        arr.splice(index, 1);
+}
+function _addUniq({ arr, val, fieldName }, action) {
+    if (Array.isArray(val)) {
+        val.forEach(v => addUniq(arr, v, fieldName));
+        return;
+    }
+    const index = indexWhere(arr, val, fieldName);
+    if (index === -1)
+        action(val);
+}
+function addUniq(arr, val, fieldName) {
+    _addUniq({ arr, val, fieldName }, value => arr.push(value));
+}
+function unshiftUniq(arr, val, fieldName) {
+    _addUniq({ arr, val, fieldName }, value => arr.unshift(value));
+}
+function insert(baseArr, targetArr, startIndex) {
+    return [
+        ...baseArr.slice(0, startIndex),
+        ...targetArr,
+        ...baseArr.slice(startIndex + targetArr.length),
+    ];
+}
+function getIndexCircular(arr, index) {
+    const l = arr.length;
+    return arr[((index % l) + l) % l];
+}
+function circularSlice(arr, startIndex, count) {
+    const newArr = [];
+    for (let i = 0; i < count; i++) {
+        newArr.push(getIndexCircular(arr, startIndex + i));
+    }
+    return newArr;
+}
+
+export { addUniq, circularSlice, getIndexCircular, indexWhere, insert, sliceWhere, spliceWhere, unshiftUniq };

package/dist/esm/src/tools/config.js

@@ -1,2 +1,9 @@
-const config={appRootId:"app-root",appOverlayId:"app-modal",configure(o){Object.assign(this,o)}};export{config};
-//# sourceMappingURL=config.js.map
+const config = {
+    appRootId: 'app-root',
+    appOverlayId: 'app-modal',
+    configure(params) {
+        Object.assign(this, params);
+    },
+};
+
+export { config };

package/dist/esm/src/tools/date.js

@@ -1,2 +1,11 @@
-const strToDate=t=>{var[t,e,r]=t.split("-").map(Number);return new Date(t,e-1,r)};export{strToDate};
-//# sourceMappingURL=date.js.map
+/**
+ * Convert ISO 8601 format ("YYYY-MM-DD") to Date object
+ * @param str
+ * @returns Date
+ */
+const strToDate = (str) => {
+    const [year, month, day] = str.split('-').map(Number);
+    return new Date(year, month - 1, day);
+};
+
+export { strToDate };