@homecode/ui 4.19.8 → 4.20.0-beta-0

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

@@ -7,7 +7,6 @@ import { Portal } from '../Portal/Portal.js';
 import S from './Popup.styl.js';
 import Time from 'timen';
 import cn from 'classnames';
-import { createStore } from 'justorm/react';
 import debounce from '../../tools/debounce.js';
 import { getCoords } from '../../tools/dom.js';
 import { isBrowser } from '../../tools/env.js';
@@ -37,7 +36,6 @@ class Popup extends Component {
     needDropOffset = false;
     id;
     parentPopupContent;
-    store;
     timers = Time.create();
     scrollParent;
     offset = { ...INITIAL_OFFSET };
@@ -46,18 +44,17 @@ class Popup extends Component {
         direction: '',
         animated: true,
     };
+    state = {
+        rootPopupId: null,
+        isOpen: Boolean(this.props.isOpen),
+        isContentVisible: Boolean(this.props.isOpen),
+        animating: false,
+        direction: this.props.direction,
+        triggerBounds: null,
+    };
     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;
@@ -65,9 +62,9 @@ class Popup extends Component {
         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');
+            const rootPopupId = getPopupId(parentPopupContent, 'data-root-popup-id') ||
+                getPopupId(parentPopupContent, 'data-popup-id');
+            this.setState({ rootPopupId });
         }
         if (focusControl) {
             document.addEventListener('keydown', this.onDocKeyDown, true);
@@ -80,7 +77,7 @@ class Popup extends Component {
     componentDidUpdate(prevProps) {
         const { isOpen, disabled, hoverControl } = this.props;
         if (disabled) {
-            this.store.isOpen = false; // close when receive disabled=true
+            this.setState({ isOpen: false }); // close when receive disabled=true
             return;
         }
         if (!prevProps.hoverControl && hoverControl)
@@ -136,7 +133,7 @@ class Popup extends Component {
         document.removeEventListener('pointerup', this.checkHover);
     }
     updateBounds() {
-        if (this.store.animating || !this.containerElem)
+        if (this.state.animating || !this.containerElem)
             return;
         if (!this.triggerElem.current)
             return;
@@ -153,7 +150,7 @@ class Popup extends Component {
             this.triggerElem.current.style[key] = value;
         });
         this.updateOffset();
-        this.store.triggerBounds = bounds;
+        this.setState({ triggerBounds: bounds });
     }, 200, { trailing: true });
     prevContentBounds = { width: 0, height: 0 };
     updateOffset = () => {
@@ -192,7 +189,7 @@ class Popup extends Component {
     checkHover = debounce((e) => {
         if (this.isPointerPressedInside)
             return;
-        const { isOpen, rootPopupId } = this.store;
+        const { isOpen, rootPopupId } = this.state;
         const overTrigger = this.isPointerOver(e.target, S.trigger);
         const overContent = this.isPointerOver(e.target, S.content);
         if (!isOpen) {
@@ -233,7 +230,7 @@ class Popup extends Component {
         return target.closest(`.${elem}[data-popup-id="${this.id}"]`);
     }
     onScroll = throttle(e => {
-        if (!this.store.isOpen) {
+        if (!this.state.isOpen) {
             const { top, left } = this.offset;
             if (left || top) {
                 this.offset = { ...INITIAL_OFFSET };
@@ -252,7 +249,7 @@ class Popup extends Component {
         this.pointerDownTarget = null;
     };
     onDocKeyUp = (e) => {
-        if (this.store.isOpen && e.key === 'Escape') {
+        if (this.state.isOpen && e.key === 'Escape') {
             e.stopPropagation();
             this.close();
             return;
@@ -293,19 +290,19 @@ class Popup extends Component {
         this.updateBounds();
     };
     open = throttle(() => {
-        const { rootPopupId } = this.store;
-        if (this.store.isOpen)
+        const { rootPopupId } = this.state;
+        if (this.state.isOpen)
             return;
         this.updateBounds();
         this.subscribeSizeChange();
         this.subscribeScroll();
-        this.store.isContentVisible = true;
+        this.setState({ isContentVisible: true });
         this.changeState(true, this.afterOpen);
         if (rootPopupId)
             setChild(rootPopupId, this.id);
     }, 100);
     close = () => {
-        if (!this.store.isOpen)
+        if (!this.state.isOpen)
             return;
         this.unsubscribeSizeChange();
         this.changeState(false, this.afterClose);
@@ -313,12 +310,12 @@ class Popup extends Component {
     changeState(isOpen, callback) {
         const { animated, onOpen, onClose } = this.props;
         this.timers.clear();
-        this.store.isOpen = isOpen;
+        this.setState({ isOpen });
         isOpen ? onOpen?.() : onClose?.();
         if (animated) {
-            this.store.animating = true;
+            this.setState({ animating: true });
             this.timers.after(ANIMATION_DURATION + 500, () => {
-                this.store.animating = false;
+                this.setState({ animating: false });
                 callback();
             });
         }
@@ -330,7 +327,7 @@ class Popup extends Component {
         this.props.onAfterOpen?.();
     };
     afterClose = () => {
-        this.store.isContentVisible = false;
+        this.setState({ isContentVisible: false });
         this.dropOffset();
         this.props.onAfterClose?.();
     };
@@ -341,12 +338,12 @@ class Popup extends Component {
         this.applyOffset();
     }
     toggle = throttle(() => {
-        this.store.isOpen ? this.close() : this.open();
+        this.state.isOpen ? this.close() : this.open();
     }, 100);
     renderTrigger() {
         const { trigger, content, disabled, focusControl, hoverControl, ...rest } = this.props;
         const triggerProps = { ...rest.triggerProps };
-        const { isOpen } = this.store;
+        const { isOpen } = this.state;
         if (!trigger)
             return null;
         const disableTrigger = disabled || !trigger;
@@ -370,7 +367,7 @@ class Popup extends Component {
     }
     renderContent() {
         const { content, contentProps = {}, wrapperProps = {}, size, disabled, inline, outlined, animated, paranja, blur, elevation, } = this.props;
-        const { isOpen, isContentVisible, animating, direction, triggerBounds, rootPopupId, } = this.store;
+        const { isOpen, isContentVisible, animating, direction, triggerBounds, rootPopupId, } = this.state;
         if (disabled)
             return null;
         const wrapperClasses = cn(S.contentWrapper, blur && S.blur, inline && S.inline, isOpen && S.isOpen, wrapperProps.className);

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

@@ -1,13 +1,14 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useRef, useContext, useMemo, useCallback } from 'react';
-import { withStore } from 'justorm/react';
+import { useStore } 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 Link = ({ className, exactClassName, children, href: hrefProp, isClear = false, isDisabled = false, disableExternalIcon = false, inline = false, isPartialExact = false, onClick, ...rest }) => {
+    const { router } = useStore({ router: ['path'] });
     const { path } = router;
     const isFromRoot = isStartFromDoubleSlash(hrefProp);
     const domElem = useRef(null);
@@ -56,6 +57,6 @@ const Link = withStore({ router: ['path'] })(({ className, exactClassName, child
             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/Route.js

@@ -1,4 +1,6 @@
-const Route = (props) => null;
+function Route(props) {
+    return null;
+}
 Route.displayName = 'Route';
 
 export { Route };

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

@@ -1,12 +1,14 @@
 import { jsx, Fragment } from 'react/jsx-runtime';
 import { useContext, useEffect, useMemo } from 'react';
-import { useStore } from 'justorm/dist/esm/src/plugins/react';
+import { useStore } from 'justorm/react';
 import STORE from './store.js';
 import Context from './context.js';
 import { parsePath, replaceParamsInPath } from './Router.helpers.js';
 export { Route } from './Route.js';
 export { Redirect } from './Redirect.js';
-export { Link } from './Link/Link.js';
+import 'classnames';
+import '../Icon/Icon.js';
+import './Link/Link.styl.js';
 
 const Router = (props) => {
     const { router } = useStore({ router: ['path'] });

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

@@ -203,7 +203,7 @@ class Select extends Component {
     };
     onSearchChange = (e, value) => {
         this.setSearchVal(value);
-        this.props.onSeachChange?.(value);
+        this.props.onSearchChange?.(value);
     };
     onExpandClick(e, id) {
         const { expanded } = this.store;
@@ -405,7 +405,7 @@ class Select extends Component {
         return label;
     }
     getFieldLabel(label) {
-        const { showSelectedCount, disableLable, value } = this.props;
+        const { showSelectedCount, disableLabel: disableLable, value } = this.props;
         if (disableLable)
             return null;
         // @ts-ignore
@@ -524,8 +524,8 @@ class Select extends Component {
             onPointerUp: () => this.onItemToggle(id),
             onPointerEnter: () => this.onOptionHover(id),
         };
-        // @ts-ignore
-        if (isFocused)
+        if (isFocused || (isSelected && !this.onFocusedElemRef))
+            // @ts-ignore
             props.ref = this.onFocusedElemRef;
         if (isIndeterminate || (isSelected && !this.isFirstSelectedMeet)) {
             this.isFirstSelectedMeet = true;

package/dist/esm/src/components/Select/Select2.js

@@ -0,0 +1,305 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { mapById, isMultiple, renderLabel } from './Select.helpers.js';
+import { useRef, useState, useMemo, useEffect, useCallback } from 'react';
+import { INTERACTION_MODE, getInteractionMode } from '../../tools/dom.js';
+import cn from 'classnames';
+import omit from 'lodash.omit';
+import { AssistiveText } from '../AssistiveText/AssistiveText.js';
+import { Button } from '../Button/Button.js';
+import { Input } from '../Input/Input.js';
+import { Label } from '../Label/Label.js';
+import { Popup } from '../Popup/Popup.js';
+import { RequiredStar } from '../RequiredStar/RequiredStar.js';
+import S from './Select.styl.js';
+import { Scroll } from '../Scroll/Scroll.js';
+import { useThrottle } from '../../hooks/useThrottle.js';
+import useEvent from '../../hooks/useEvent.js';
+
+function Select2(props) {
+    const { className, value, onChange, onSearchChange, inputProps, popupProps, size = 'm', optionClassName, additionalOptions = [], options, variant, label, error, blur, disabled, trigger, required, hideRequiredStar, isSearchable, presets = [], selectAllButton, clearButton, showSelectedCount, disableLabel, } = props;
+    const isMultiple$1 = isMultiple(value);
+    const closeOnSelect = props.closeOnSelect ?? !isMultiple$1;
+    const contentRef = useRef(null);
+    const scrollInnerRef = useRef(null);
+    const focusedItemId = useRef(null);
+    const focusedElem = useRef(null);
+    const maxIndex = useRef(-1);
+    const isFirstSelectedMeet = useRef(false);
+    const searchValLower = useRef('');
+    const [searchVal, _setSearchVal] = useState('');
+    const setSearchVal = (val) => {
+        _setSearchVal(val);
+        searchValLower.current = val.toLowerCase();
+    };
+    const [isOpen, setIsOpen] = useState(false);
+    const [isFocused, setIsFocused] = useState(false);
+    const [labelClipPath, setLabelClipPath] = useState('');
+    const [focusedItemIndex, setFocusedItemIndex] = useState(-1);
+    // Add tree-related state from Select.tsx
+    const [items, setItems] = useState([]);
+    const ids = useMemo(() => mapById(props.options), [props.options]);
+    // Add basic selection state
+    const [selected, setSelected] = useState(isMultiple$1 ? value : [value]);
+    const [optionsUpdated, setOptionsUpdated] = useState(0);
+    const isErrorVisible = !isOpen && !!error;
+    const triggerProps = useMemo(() => ({
+        label,
+        size,
+        variant,
+        ...props.triggerProps,
+    }), [props.triggerProps, label, size, variant]);
+    // Simplified isSelected check
+    const isSelected = (id) => 
+    // @ts-ignore
+    isMultiple$1 ? selected?.includes(id) : selected === id;
+    const isClickedInside = elem => elem.closest(`.${S.root}`) || elem.closest(`.${S.options}`);
+    const setNewItems = (newItems) => {
+        maxIndex.current = newItems.length - 1;
+        setItems(newItems);
+        setOptionsUpdated(optionsUpdated + 1);
+        if (focusedItemIndex > maxIndex.current && maxIndex.current >= 0) {
+            setFocusedItemIndex(maxIndex.current);
+            focusedItemId.current = newItems[maxIndex.current]?.id;
+        }
+    };
+    const setItemFocus = index => {
+        console.log('setItemFocus::', index);
+        focusedItemId.current = items[index]?.id;
+        setFocusedItemIndex(index);
+    };
+    const handleSearchChange = (e, value) => {
+        setSearchVal(value);
+        onSearchChange?.(value);
+        setNewItems(options.filter(filterOption));
+    };
+    const selectAll = () => {
+        const newValue = options.map(({ id }) => id);
+        setSelected(newValue);
+        onChange?.(newValue);
+    };
+    const dropSelected = () => {
+        setSelected([]);
+        onChange?.([]);
+    };
+    const onFocusedElemRef = elem => {
+        focusedElem.current = elem;
+        if (elem) {
+            const content = contentRef.current;
+            if (!content)
+                return;
+            const { top, bottom } = elem.getBoundingClientRect();
+            const rect = contentRef.current.getBoundingClientRect();
+            const list = scrollInnerRef.current;
+            if (top < rect.top) {
+                list.scrollTop -= rect.top - top;
+            }
+            else if (bottom > rect.bottom) {
+                list.scrollTop += bottom - rect.bottom;
+            }
+        }
+    };
+    const onPopupOpen = () => {
+        setIsOpen(true);
+        if (focusedItemIndex === -1) {
+            setItemFocus(0);
+        }
+    };
+    const onPopupClose = () => {
+        setIsOpen(false);
+        setItemFocus(0);
+    };
+    const onFocus = () => {
+        setIsFocused(true);
+    };
+    const onBlur = () => {
+        setIsFocused(false);
+    };
+    const onOptionHover = useThrottle(id => {
+        const mode = getInteractionMode();
+        if (mode !== INTERACTION_MODE.POINTER)
+            return;
+        const index = items.findIndex(item => item.id === id);
+        setItemFocus(index);
+    }, 100, { trailing: true });
+    const onItemToggle = (id) => {
+        if (isMultiple$1) {
+            const newValue = isSelected(id)
+                ? selected.filter(i => i !== id)
+                : [...selected, id];
+            setSelected(newValue);
+            onChange?.(newValue);
+        }
+        else {
+            // mono select
+            const newValue = isSelected(id) ? null : id;
+            const newSelected = isSelected(id) ? [] : [id];
+            setSelected(newSelected);
+            onChange?.(newValue);
+        }
+        setSearchVal('');
+        if (closeOnSelect)
+            setIsOpen(false);
+    };
+    const getLabel = (id) => ids.items[id]?.label || '';
+    const getFieldLabel = (label) => {
+        if (disableLabel)
+            return null;
+        // @ts-ignore
+        const length = value?.length;
+        if (isMultiple$1 && length && showSelectedCount)
+            return `${label} (${length})`;
+        return label;
+    };
+    const filterOption = ({ label }) => {
+        return label.toLowerCase().includes(searchValLower.current);
+    };
+    const selectedLabel = useMemo(() => {
+        if (!isMultiple$1)
+            return getLabel(value);
+        if (!value)
+            return '';
+        return (value
+            // @ts-ignore
+            .reduce((acc, id) => {
+            const label = getLabel(id);
+            return label ? [...acc, label] : acc;
+        }, [])
+            .join(', '));
+    }, [isMultiple$1, value]);
+    // console.log('selectedLabel::', selectedLabel);
+    const renderTriggerArrow = () => {
+        return null;
+    };
+    const renderTriggerInput = () => {
+        return (jsx(Input, { ...triggerProps, ...inputProps, 
+            // TODO: autoComplete
+            addonRight: renderTriggerArrow(), error: isErrorVisible, value: isFocused ? searchVal : selectedLabel, onChange: handleSearchChange, label: getFieldLabel(label) }));
+    };
+    const renderAdditionalLabel = () => {
+        return null;
+    };
+    const renderTriggerButton = () => {
+        const { label, className, ...rest } = triggerProps;
+        const props = omit(rest, ['name', 'inputProps']);
+        const fullSelectedLabel = [selectedLabel, renderAdditionalLabel()].filter(Boolean);
+        const hasSelected = fullSelectedLabel.length > 0;
+        const displayLabel = hasSelected ? fullSelectedLabel : label;
+        const title = hasSelected ? fullSelectedLabel : null;
+        const triggerArrow = renderTriggerArrow();
+        const isError = isErrorVisible;
+        const classes = cn(S.triggerButton, isError && S.isError, triggerArrow , className);
+        return (jsxs("div", { children: [jsxs(Button, { className: classes, variant: "default", ...props, style: { clipPath: labelClipPath }, title: title?.join?.(', '), children: [jsx("div", { className: cn(S.triggerButtonLabel, hasSelected && S.hasSelected), children: displayLabel }), triggerArrow] }), jsx(Label, { size: size, isOnTop: hasSelected, isError: isError, onClipPathChange: setLabelClipPath, children: getFieldLabel(label) })] }));
+    };
+    const renderTrigger = () => {
+        if (trigger)
+            return trigger;
+        const triggerElem = isSearchable
+            ? renderTriggerInput()
+            : renderTriggerButton();
+        return (jsxs("div", { className: S.trigger, children: [triggerElem, required && !hideRequiredStar && jsx(RequiredStar, { size: size })] }));
+    };
+    const renderPresets = () => {
+        const items = presets.map(({ label, ids }) => ({
+            children: label,
+            onClick: () => setSelected(ids),
+            key: label,
+        }));
+        if (selectAllButton) {
+            items.push({
+                children: 'Select all',
+                onClick: selectAll,
+                key: 'select-all-button',
+            });
+        }
+        if (clearButton) {
+            items.push({
+                children: 'Clear',
+                onClick: dropSelected,
+                key: 'clear-button',
+            });
+        }
+        if (items.length === 0)
+            return null;
+        return (jsx("div", { className: S.presetPanel, children: items.map(props => (jsx(Button, { className: S.presetButton, variant: "clear", ...props }))) }, "preset-panel"));
+    };
+    const renderOption = (item, level = 0) => {
+        const { id, isGroupHeader } = item;
+        const isFocused = id === focusedItemId.current;
+        const isSelected = selected.includes(id);
+        const items = [];
+        const className = cn(S.option, isGroupHeader && S.isGroup, isFocused && S.isFocused, isSelected && S.isSelected, S[`level-${level}`], optionClassName);
+        const optionProps = {
+            className,
+            key: id,
+            onPointerUp: () => onItemToggle(id),
+            onPointerEnter: () => onOptionHover(id),
+        };
+        // @ts-ignore
+        if (isFocused)
+            optionProps.ref = onFocusedElemRef;
+        if (isSelected && !isFirstSelectedMeet.current) {
+            isFirstSelectedMeet.current = true;
+        }
+        if (filterOption(item)) {
+            items.unshift(jsx("div", { ...optionProps, children: renderLabel(item) }));
+        }
+        return items;
+    };
+    const renderOptions = () => {
+        isFirstSelectedMeet.current = false;
+        return [...additionalOptions, ...items]
+            .map(item => renderOption(item))
+            .flat();
+    };
+    useEffect(() => {
+        const items = additionalOptions?.length
+            ? [...additionalOptions, ...options]
+            : options;
+        setNewItems(items);
+    }, [options]);
+    useEffect(() => {
+        const searchVal = props.searchValue;
+        if (searchVal)
+            setSearchVal(searchVal);
+    }, [props.searchValue]);
+    const onKeyDown = useCallback((e) => {
+        const currIndex = focusedItemIndex;
+        if (e.key === 'ArrowUp') {
+            if (currIndex > 0)
+                setItemFocus(currIndex - 1);
+        }
+        if (e.key === 'ArrowDown') {
+            if (currIndex < maxIndex.current)
+                setItemFocus(currIndex + 1);
+        }
+        if (currIndex === -1 || !isOpen)
+            return;
+        if (e.key === 'Enter') {
+            e.preventDefault();
+            e.stopPropagation();
+            onItemToggle(items[currIndex].id);
+        }
+    }, [items, focusedItemIndex, isOpen]);
+    useEvent({
+        event: 'keydown',
+        isActive: isOpen,
+        callback: onKeyDown,
+    });
+    useEvent({
+        event: 'click',
+        // isActive: isMultiple,
+        callback: e => {
+            if (!isClickedInside(e.target)) {
+                setIsOpen(false);
+            }
+        },
+    });
+    const optionsList = useMemo(() => (jsxs("div", { ref: contentRef, children: [renderPresets(), jsx(Scroll, { y: true, offset: { y: { before: 10, after: 10 } }, className: cn(S.options, S[`size-${size}`]), onInnerRef: elem => (scrollInnerRef.current = elem), children: renderOptions() }, "items-scroll")] })), [items, searchVal, focusedItemIndex]);
+    const classes = cn(S.root, className, S[`size-${size}`]);
+    return (jsxs(Fragment, { children: [jsx(Popup, { className: classes, direction: "bottom", size: size, focusControl: true, hoverControl: isFocused, blur: blur, isOpen: isOpen, disabled: disabled, ...popupProps, onOpen: onPopupOpen, onClose: onPopupClose, trigger: renderTrigger(), triggerProps: {
+                    onFocus: onFocus,
+                    onBlur: onBlur,
+                }, content: optionsList }), isErrorVisible && (jsx(AssistiveText, { variant: "danger", size: size, children: error }))] }));
+}
+
+export { Select2 };

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

@@ -0,0 +1,28 @@
+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]);
+}
+
+export { useThrottle };

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

@@ -1,7 +1,8 @@
 import { jsx, Fragment } from 'react/jsx-runtime';
 import { memo } from 'react';
 import { nanoid } from 'nanoid';
-import { createStore, withStore } from 'justorm/react';
+import { useStore } from 'justorm/react';
+import { createStore } from 'justorm';
 import _i18n from 'roddeh-i18n';
 import LS from '../tools/localStorage.js';
 import { queryParams } from '../tools/queryParams.js';
@@ -53,15 +54,20 @@ function init(config) {
         storeName,
         componentStore,
         // hook (update when componentStore._updated changed)
-        withI18N: Component => withStore(storeName)(Component),
+        withI18N: Component => props => {
+            useStore({ [storeName]: true });
+            return jsx(Component, { ...props });
+        },
         i18n: (key, props) => getTrans(key, props),
-        I18N: memo(withStore({
-            i18n: ['lang'],
-            [storeName]: true,
-        })(function I18N({ id, children, props }) {
+        I18N: memo(function I18N({ id, children, props }) {
+            useStore({
+                i18n: ['lang'],
+                [storeName]: true,
+            });
             const key = id ?? children;
+            // @ts-ignore
             return jsx(Fragment, { children: getTrans(key, props) });
-        })),
+        }),
     };
 }
 

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

@@ -1,6 +1,8 @@
 import * as T from './Icon.types';
 export declare const icons: {
     avatar: () => Promise<any>;
+    bookmark: () => Promise<any>;
+    bookmarkAdd: () => Promise<any>;
     brokenImage: () => Promise<any>;
     camera: () => Promise<any>;
     check: () => Promise<any>;