@ioca/react 1.4.81 → 1.5.1

package/lib/index.js

@@ -35,12 +35,12 @@ function triggerRipple(target, e) {
     const [$box, $ripple] = createRipple();
     const rect = target.getBoundingClientRect();
     const size = Math.max(rect.width, rect.height) * 2;
-    $ripple.style.cssText = `
-        left: ${e.pageX - rect.left}px;
-        top: ${e.pageY - rect.top}px;
-        width: ${size}px;
-        height: ${size}px;
-        transition: all ${TIMEOUT / 1000}s;
+    $ripple.style.cssText = `
+        left: ${e.pageX - rect.left}px;
+        top: ${e.pageY - rect.top}px;
+        width: ${size}px;
+        height: ${size}px;
+        transition: all ${TIMEOUT / 1000}s;
     `;
     target.insertAdjacentElement("afterbegin", $box);
     target.offsetHeight;
@@ -192,69 +192,6 @@ function useReactive(initialState) {
     }
     return proxyRef.current;
 }
-function useLocalStorageState(key, options) {
-    const { defaultValue, listenStorageChange } = options ?? {};
-    const getDefault = () => {
-        return typeof defaultValue === "function"
-            ? defaultValue()
-            : defaultValue;
-    };
-    const read = () => {
-        if (typeof window === "undefined")
-            return getDefault();
-        const raw = window.localStorage.getItem(key);
-        if (raw === null)
-            return getDefault();
-        try {
-            return JSON.parse(raw);
-        }
-        catch (e) {
-            return raw;
-        }
-    };
-    const [state, setState] = useState(() => read());
-    const set = (value) => {
-        setState((prev) => {
-            const next = typeof value === "function"
-                ? value(prev)
-                : value;
-            if (typeof window !== "undefined") {
-                if (next === undefined) {
-                    window.localStorage.removeItem(key);
-                }
-                else {
-                    window.localStorage.setItem(key, JSON.stringify(next));
-                }
-            }
-            return next;
-        });
-    };
-    useEffect(() => {
-        if (!listenStorageChange)
-            return;
-        if (typeof window === "undefined")
-            return;
-        const onStorage = (e) => {
-            if (e.key !== key)
-                return;
-            if (e.newValue === null) {
-                setState(getDefault());
-                return;
-            }
-            try {
-                setState(JSON.parse(e.newValue));
-            }
-            catch (err) {
-                setState(e.newValue);
-            }
-        };
-        window.addEventListener("storage", onStorage);
-        return () => {
-            window.removeEventListener("storage", onStorage);
-        };
-    }, [key, listenStorageChange]);
-    return [state, set];
-}
 function useSize(target) {
     const [size, setSize] = useState();
     useEffect(() => {
@@ -1361,6 +1298,20 @@ const Content$2 = forwardRef((props, ref) => {
     return createPortal(content, container);
 });
 
+const REACT_FORWARD_REF = Symbol.for("react.forward_ref");
+const REACT_FRAGMENT = Symbol.for("react.fragment");
+const canAttachRef = (el) => {
+    if (!isValidElement(el))
+        return false;
+    const t = el.type;
+    if (typeof t === "string")
+        return true;
+    if (t?.prototype?.isReactComponent)
+        return true;
+    if (t?.$$typeof === REACT_FORWARD_REF)
+        return true;
+    return false;
+};
 function Popup(props) {
     const { visible = false, content, trigger = "hover", gap = 12, offset = 8, position = "top", showDelay = 16, hideDelay = 12, touchable, arrow = true, align = "center", fitSize, disabled, style, className, children, onVisibleChange, } = props;
     const triggerRef = useRef(null);
@@ -1624,55 +1575,135 @@ function Popup(props) {
     toggleRef.current = handleToggle;
     const doHide = useMemo(() => () => hideRef.current(), []);
     const doToggle = useMemo(() => (action) => toggleRef.current(action), []);
-    const eventMaps = useMemo(() => {
-        return {
-            click: {
-                onClick: () => doToggle(true),
-            },
-            hover: {
-                onMouseEnter: () => doToggle(true),
-                onMouseLeave: () => doToggle(false),
-            },
-            focus: {
-                onFocus: () => doToggle(true),
-                onBlur: () => doToggle(false),
-            },
-            contextmenu: {
-                onContextMenu: (e) => {
-                    e.preventDefault();
-                    e.stopPropagation();
-                    pointRef.current = {
-                        pageX: e.pageX,
-                        pageY: e.pageY,
-                    };
-                    if (showRef.current) {
-                        ensureBaseStyle();
-                        computePointPosition();
-                        return;
+    const mergeRefs = useMemo(() => {
+        return (...refs) => {
+            return (node) => {
+                for (const ref of refs) {
+                    if (!ref)
+                        continue;
+                    if (typeof ref === "function") {
+                        ref(node);
                     }
-                    clearAllTimers();
-                    phaseRef.current = "showing";
-                    lastPosRef.current = null;
-                    lastArrowRef.current = null;
-                    arrowElRef.current = null;
-                    setShow(true);
-                    timerRef.current = setTimeout(() => {
-                        if (phaseRef.current !== "showing")
-                            return;
-                        if (!contentRef.current)
-                            return;
-                        ensureBaseStyle();
-                        computePointPosition();
-                        setContentVisible(true);
-                        clearTimer();
-                        latestRef.current.onVisibleChange?.(true);
-                        phaseRef.current = "";
-                    }, latestRef.current.showDelay);
-                },
-            },
-            none: {},
+                    else {
+                        ref.current = node;
+                    }
+                }
+            };
         };
+    }, []);
+    const triggerEvents = useMemo(() => {
+        const setTriggerEl = (e) => {
+            const el = e?.currentTarget;
+            if (el)
+                triggerRef.current = el;
+        };
+        switch (trigger) {
+            case "click":
+                return {
+                    onClick: (e) => {
+                        setTriggerEl(e);
+                        doToggle(true);
+                    },
+                };
+            case "hover":
+                return {
+                    onMouseEnter: (e) => {
+                        setTriggerEl(e);
+                        doToggle(true);
+                    },
+                    onMouseLeave: (e) => {
+                        setTriggerEl(e);
+                        doToggle(false);
+                    },
+                };
+            case "focus":
+                return {
+                    onFocus: (e) => {
+                        setTriggerEl(e);
+                        doToggle(true);
+                    },
+                    onBlur: (e) => {
+                        setTriggerEl(e);
+                        doToggle(false);
+                    },
+                };
+            case "contextmenu":
+                return {
+                    onContextMenu: (e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        setTriggerEl(e);
+                        pointRef.current = {
+                            pageX: e.pageX,
+                            pageY: e.pageY,
+                        };
+                        if (showRef.current) {
+                            ensureBaseStyle();
+                            computePointPosition();
+                            return;
+                        }
+                        clearAllTimers();
+                        phaseRef.current = "showing";
+                        lastPosRef.current = null;
+                        lastArrowRef.current = null;
+                        arrowElRef.current = null;
+                        setShow(true);
+                        timerRef.current = setTimeout(() => {
+                            if (phaseRef.current !== "showing")
+                                return;
+                            if (!contentRef.current)
+                                return;
+                            ensureBaseStyle();
+                            computePointPosition();
+                            setContentVisible(true);
+                            clearTimer();
+                            latestRef.current.onVisibleChange?.(true);
+                            phaseRef.current = "";
+                        }, latestRef.current.showDelay);
+                    },
+                };
+            default:
+                return {};
+        }
     }, [doToggle]);
+    const triggerNode = useMemo(() => {
+        const events = triggerEvents;
+        const eventKeys = Object.keys(events);
+        const items = Children.toArray(children);
+        let attachedRef = false;
+        let cloned = false;
+        const nextItems = items.map((item) => {
+            if (!isValidElement(item))
+                return item;
+            if (item.type === REACT_FRAGMENT)
+                return item;
+            const attachRef = !attachedRef && canAttachRef(item);
+            if (attachRef)
+                attachedRef = true;
+            if (!attachRef && eventKeys.length === 0)
+                return item;
+            const patchedProps = {};
+            for (const evt of eventKeys) {
+                const ours = events[evt];
+                const theirs = item.props?.[evt];
+                patchedProps[evt] =
+                    typeof theirs === "function"
+                        ? (e) => {
+                            ours(e);
+                            theirs(e);
+                        }
+                        : ours;
+            }
+            if (attachRef) {
+                patchedProps.ref = mergeRefs(item.ref, triggerRef);
+            }
+            cloned = true;
+            return cloneElement(item, patchedProps);
+        });
+        if (!cloned)
+            return children;
+        return nextItems.length === 1 ? nextItems[0] : jsx(Fragment, { children: nextItems });
+    }, [children, triggerEvents, mergeRefs]);
     const contentTouch = useMemo(() => {
         if (!touchable)
             return {};
@@ -1753,61 +1784,7 @@ function Popup(props) {
             window.removeEventListener("scroll", onScrollOrResize, true);
         };
     }, [show]);
-    const mergeRefs = (...refs) => {
-        return (node) => {
-            for (const ref of refs) {
-                if (!ref)
-                    continue;
-                if (typeof ref === "function") {
-                    ref(node);
-                }
-                else {
-                    ref.current = node;
-                }
-            }
-        };
-    };
-    return (jsxs(Fragment, { children: [(() => {
-                const events = eventMaps[trigger];
-                const items = Children.toArray(children);
-                const canAttachRef = (el) => {
-                    if (!isValidElement(el))
-                        return false;
-                    const t = el.type;
-                    if (typeof t === "string")
-                        return true;
-                    if (t?.prototype?.isReactComponent)
-                        return true;
-                    if (t?.$$typeof === Symbol.for("react.forward_ref"))
-                        return true;
-                    return false;
-                };
-                if (items.length !== 1) {
-                    return (jsx("div", { ref: triggerRef, ...events, className: 'i-popup-trigger', style: { display: "inline-block" }, children: children }));
-                }
-                const only = items[0];
-                if (!isValidElement(only) || !canAttachRef(only)) {
-                    return (jsx("div", { ref: triggerRef, ...events, className: 'i-popup-trigger', style: { display: "inline-block" }, children: only }));
-                }
-                const { className: childClassName, ...restProps } = only.props;
-                const nextProps = { ...restProps };
-                for (const evt of Object.keys(events)) {
-                    const theirs = restProps[evt];
-                    const ours = events[evt];
-                    nextProps[evt] =
-                        typeof theirs === "function"
-                            ? (e) => {
-                                ours(e);
-                                theirs(e);
-                            }
-                            : ours;
-                }
-                return cloneElement(only, {
-                    ref: mergeRefs(only.ref, triggerRef),
-                    className: childClassName,
-                    ...nextProps,
-                });
-            })(), show && (jsx(Content$2, { ref: contentRef, arrow: arrow && trigger !== "contextmenu", style: {
+    return (jsxs(Fragment, { children: [triggerNode, show && (jsx(Content$2, { ref: contentRef, arrow: arrow && trigger !== "contextmenu", style: {
                     ...style,
                     position: "fixed",
                 }, className: className, ...contentTouch, trigger: triggerRef.current, children: content }))] }));
@@ -3058,7 +3035,7 @@ function InputContainer(props) {
 }
 
 const Number$1 = (props) => {
-    const { ref, label, name, value = "", labelInline, step = 1, min = -Infinity, max = Infinity, thousand, precision, type, className, width, status = "normal", append, border, prepend, disabled, message, tip, hideControl, showMax, style, onChange, onEnter, onInput, onBlur, ...restProps } = props;
+    const { ref, label, name, value = "", labelInline, step = 1, min = -Infinity, max = Infinity, thousand, precision, type, className, width, status = "normal", append, border, underline, prepend, disabled, message, tip, hideControl, showMax, style, onChange, onEnter, onInput, onBlur, ...restProps } = props;
     const [inputValue, setInputValue] = useState(value === undefined || value === null ? "" : String(value));
     const formatOut = (num) => {
         const v = clamp(num, min, max);
@@ -3153,11 +3130,12 @@ const Number$1 = (props) => {
     return (jsx(InputContainer, { label: label, labelInline: labelInline, className: className, style: { width, ...style }, tip: message ?? tip, status: status, children: jsxs("div", { className: classNames("i-input-item", {
                 [`i-input-${status}`]: status !== "normal",
                 "i-input-borderless": !border,
+                "i-input-underline": underline,
             }), children: [prepend && jsx("div", { className: 'i-input-prepend', children: prepend }), !hideControl && !disabled && (jsx(Helpericon, { active: true, icon: jsx(MinusRound, {}), onClick: () => handleOperate(-step) })), jsx("input", { ...inputProps }), !hideControl && !disabled && (jsx(Helpericon, { active: true, icon: jsx(PlusRound, {}), onClick: () => handleOperate(step) })), showMax && max && !disabled && (jsx(Helpericon, { active: true, icon: jsx(KeyboardDoubleArrowUpRound, {}), onClick: handleMax })), append && jsx("div", { className: 'i-input-append', children: append })] }) }));
 };
 
 const Range = (props) => {
-    const { label, name, value, labelInline, min = -Infinity, max = Infinity, type, className, status = "normal", message, tip, append, prepend, step = 1, width, thousand, precision, hideControl, placeholder, border, autoSwitch, onChange, onBlur, style, ...restProps } = props;
+    const { label, name, value, labelInline, min = -Infinity, max = Infinity, type, className, status = "normal", message, tip, append, prepend, step = 1, width, thousand, precision, hideControl, placeholder, border, underline, autoSwitch, onChange, onBlur, style, ...restProps } = props;
     const [rangeValue, setRangeValue] = useState(value);
     const getRangeNumber = (v) => clamp(v, min, max);
     const getFormatNumber = (v) => formatNumber(v, { precision, thousand });
@@ -3216,6 +3194,7 @@ const Range = (props) => {
     return (jsx(InputContainer, { label: label, labelInline: labelInline, className: className, style: { width, ...style }, tip: message ?? tip, status: status, children: jsxs("div", { className: classNames("i-input-item", {
                 [`i-input-${status}`]: status !== "normal",
                 "i-input-borderless": !border,
+                "i-input-underline": underline,
             }), children: [prepend && jsx("div", { className: 'i-input-prepend', children: prepend }), !hideControl && (jsx(Helpericon, { active: true, icon: jsx(MinusRound, {}), onClick: (e) => handleOperate(e, -step, 0) })), jsx("input", { value: rangeValue?.[0] || "", placeholder: placeholder?.[0], ...inputProps, onBlur: handleBlur, onChange: (e) => handleChange(e, 0) }), !hideControl && (jsx(Helpericon, { active: true, icon: jsx(PlusRound, {}), onClick: (e) => handleOperate(e, step, 0) })), jsx(Helpericon, { active: true, icon: jsx(SyncAltRound, {}), style: { margin: 0 }, onClick: handleSwitch }), !hideControl && (jsx(Helpericon, { active: true, icon: jsx(MinusRound, {}), onClick: (e) => handleOperate(e, -step, 1) })), jsx("input", { value: rangeValue?.[1] || "", placeholder: placeholder?.[1], ...inputProps, onBlur: handleBlur, onChange: (e) => handleChange(e, 1) }), !hideControl && (jsx(Helpericon, { active: true, icon: jsx(PlusRound, {}), onClick: (e) => handleOperate(e, step, 1) })), append && jsx("div", { className: 'i-input-append', children: append })] }) }));
 };
 
@@ -5115,31 +5094,150 @@ const Upload = (props) => {
                     }) }), uploadMessage && (jsx("span", { className: 'i-upload-message', children: uploadMessage })), fileList.length < limit && (jsxs("label", { children: [jsx("input", { ...restProps, disabled: disabled, ref: inputRef, type: 'file', className: 'i-input-file-hidden', multiple: multiple, onChange: handleChange }), trigger] }))] }) }));
 };
 
+const stores = new Map();
+function readTheme(key, defaultValue) {
+    if (typeof window === "undefined")
+        return defaultValue;
+    const raw = window.localStorage.getItem(key);
+    if (raw === null)
+        return defaultValue;
+    try {
+        return JSON.parse(raw);
+    }
+    catch {
+        return raw;
+    }
+}
+function writeTheme(key, value) {
+    if (typeof window === "undefined")
+        return;
+    if (value === undefined) {
+        window.localStorage.removeItem(key);
+    }
+    else {
+        window.localStorage.setItem(key, JSON.stringify(value));
+    }
+}
+function applyThemeToDocument(theme) {
+    if (typeof document === "undefined")
+        return;
+    if (!theme)
+        return;
+    const cls = document.documentElement.classList;
+    const prev = Array.from(cls).find((n) => n.startsWith("theme-"));
+    if (prev) {
+        if (prev !== theme)
+            cls.replace(prev, theme);
+    }
+    else {
+        cls.add(theme);
+    }
+}
+function ensureStore(key, defaultValue) {
+    const existed = stores.get(key);
+    if (existed) {
+        return existed;
+    }
+    const theme = readTheme(key, defaultValue);
+    const store = {
+        key,
+        defaultValue,
+        theme,
+        listeners: new Set(),
+        storageSubscribers: 0,
+    };
+    stores.set(key, store);
+    applyThemeToDocument(theme);
+    return store;
+}
+function notify(store) {
+    for (const listener of store.listeners) {
+        listener(store.theme);
+    }
+}
+function setStoreTheme(store, value) {
+    const prev = store.theme;
+    const next = typeof value === "function"
+        ? value(prev)
+        : value;
+    const resolved = next ?? store.defaultValue;
+    if (resolved === store.theme)
+        return;
+    store.theme = resolved;
+    writeTheme(store.key, next);
+    applyThemeToDocument(resolved);
+    notify(store);
+}
+function ensureStorageListener(store) {
+    if (typeof window === "undefined")
+        return;
+    if (store.storageListener)
+        return;
+    store.storageListener = (e) => {
+        if (e.key !== store.key)
+            return;
+        if (e.newValue === null) {
+            store.theme = store.defaultValue;
+            applyThemeToDocument(store.theme);
+            notify(store);
+            return;
+        }
+        try {
+            store.theme = JSON.parse(e.newValue);
+        }
+        catch {
+            store.theme = e.newValue;
+        }
+        applyThemeToDocument(store.theme);
+        notify(store);
+    };
+    window.addEventListener("storage", store.storageListener);
+}
+function cleanupStorageListener(store) {
+    if (typeof window === "undefined")
+        return;
+    if (store.storageSubscribers > 0)
+        return;
+    if (!store.storageListener)
+        return;
+    window.removeEventListener("storage", store.storageListener);
+    store.storageListener = undefined;
+}
 const useTheme = (props) => {
     const { key = "ioca-react-theme", defaultValue = "theme-auto", listenStorageChange, } = props ?? {};
-    const [mounted, setMounted] = useState(false);
-    const [theme, setTheme] = useLocalStorageState(key, {
-        defaultValue,
-        listenStorageChange,
-    });
+    if (typeof window === "undefined") {
+        return {
+            theme: defaultValue,
+            setTheme: () => { },
+        };
+    }
+    const store = useMemo(() => ensureStore(key, defaultValue), [key]);
+    const [theme, setThemeState] = useState(() => store.theme);
     useEffect(() => {
-        setMounted(true);
-    }, []);
+        store.defaultValue = defaultValue;
+        applyThemeToDocument(store.theme);
+    }, [store, defaultValue]);
     useEffect(() => {
-        if (!mounted || !theme)
-            return;
-        const cls = document.documentElement.classList;
-        const prev = Array.from(cls).find((n) => n.startsWith("theme-"));
-        if (prev) {
-            cls.replace(prev, theme);
-        }
-        else {
-            cls.add(theme);
+        store.listeners.add(setThemeState);
+        setThemeState(store.theme);
+        if (listenStorageChange) {
+            store.storageSubscribers += 1;
+            ensureStorageListener(store);
         }
-    }, [theme, mounted]);
+        return () => {
+            store.listeners.delete(setThemeState);
+            if (listenStorageChange) {
+                store.storageSubscribers = Math.max(0, store.storageSubscribers - 1);
+                cleanupStorageListener(store);
+            }
+        };
+    }, [store, listenStorageChange]);
+    const setTheme = (value) => {
+        setStoreTheme(store, value);
+    };
     return {
-        theme: mounted ? theme : defaultValue,
-        setTheme: mounted ? setTheme : () => { },
+        theme,
+        setTheme,
     };
 };
 

package/lib/types/components/drawer/drawer.d.ts

@@ -1,5 +1,6 @@
+import * as react from 'react';
 import { IDrawer } from './type.js';
 
-declare function Drawer(props: IDrawer): any;
+declare function Drawer(props: IDrawer): react.ReactPortal;
 
 export { Drawer as default };

package/lib/types/js/useTheme/index.d.ts

@@ -1,8 +1,9 @@
 import { ITheme } from './type.js';
 
+type TSetTheme = (value: string | undefined | ((prev: string) => string | undefined)) => void;
 declare const useTheme: (props?: ITheme) => {
     theme: string;
-    setTheme: (value: string | ((prev: string) => string)) => void;
+    setTheme: TSetTheme;
 };
 
 export { useTheme as default };