@ioca/react 1.3.73 → 1.3.75

package/lib/index.js

@@ -2,7 +2,7 @@ import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import classNames from 'classnames';
 import { debounce, uid, throttle, pick, title } from 'radash';
 import { createElement, useEffect, useMemo, Children, cloneElement, isValidElement, useState, useRef, Fragment as Fragment$1, useLayoutEffect, useImperativeHandle, createContext, useContext } from 'react';
-import { SkipPreviousRound, CloseRound, MinusRound, PlusRound, InboxTwotone, FormatBoldRound, FormatItalicRound, FormatUnderlinedRound, StrikethroughSRound, RedoRound, UndoRound, ClearAllRound, PauseRound, PlayArrowRound, StopRound, VolumeOffRound, VolumeDownRound, FullscreenExitRound, FullscreenRound, FeedOutlined, AspectRatioRound, OpenInNewRound, FileDownloadOutlined, RotateRightRound, RotateLeftRound, KeyboardArrowLeftRound, KeyboardArrowRightRound, HideImageTwotone, VisibilityRound, VisibilityOffRound, SyncAltRound, MoreHorizRound, SearchRound, CheckRound, UnfoldMoreRound, CalendarMonthTwotone, AccessTimeRound, InfoOutlined, KeyboardArrowDownRound, ListAltRound, PlusSharp } from '@ricons/material';
+import { SkipPreviousRound, CloseRound, MinusRound, PlusRound, InboxTwotone, FormatBoldRound, FormatItalicRound, FormatUnderlinedRound, StrikethroughSRound, RedoRound, UndoRound, ClearAllRound, PauseRound, PlayArrowRound, StopRound, VolumeOffRound, VolumeDownRound, FullscreenExitRound, FullscreenRound, FeedOutlined, AspectRatioRound, OpenInNewRound, FileDownloadOutlined, RotateRightRound, RotateLeftRound, KeyboardArrowLeftRound, KeyboardArrowRightRound, HideImageTwotone, SyncAltRound, VisibilityRound, VisibilityOffRound, MoreHorizRound, SearchRound, CheckRound, UnfoldMoreRound, CalendarMonthTwotone, AccessTimeRound, InfoOutlined, KeyboardArrowDownRound, ListAltRound, PlusSharp } from '@ricons/material';
 import { useReactive, useCreation, useSize } from 'ahooks';
 import { createRoot } from 'react-dom/client';
 import { createPortal } from 'react-dom';
@@ -173,8 +173,8 @@ function Toggle(props) {
             }), children: state.active ? after ?? children : children }) }));
 }
 
-Button.Toggle = Toggle;
 Button.Group = Group;
+Button.Toggle = Toggle;
 
 const Icon = (props) => {
     const { ref, icon, size = "1.425em", rotate, style, className, ...restProps } = props;
@@ -763,9 +763,9 @@ function useKeydown(listener, options) {
     }, [listener]);
 }
 const defaultObserver = {
-    observe: () => { },
-    unobserve: () => { },
-    disconnect: () => { },
+    observe: undefined,
+    unobserve: undefined,
+    disconnect: undefined,
 };
 function useIntersectionObserver(configs) {
     if (typeof window === "undefined") {
@@ -1076,16 +1076,17 @@ function Drawer(props) {
 }
 
 const Item$4 = (props) => {
-    const { ref, active, type, align, disabled, label, style, className, children, ...restProps } = props;
+    const { ref, active, type, align, disabled, label, style, border, className, children, ...restProps } = props;
     return (jsxs("li", { ref: ref, className: classNames("i-list-item", className, {
             "i-list-item-active": active,
             "i-list-option": type === "option",
+            "i-list-item-bordered": border,
             disabled,
         }), style: { alignItems: align, ...style }, ...restProps, children: [label !== undefined && (jsx("span", { className: 'i-list-item-label', children: label })), children] }));
 };
 
 const List$1 = (props) => {
-    const { label, type, className, children, ...restProps } = props;
+    const { label, type, border, className, children, ...restProps } = props;
     return (jsx("ul", { className: classNames("i-list", className), ...restProps, children: Children.map(children, (node, i) => {
             const renderLabel = typeof label === "function" ? label(i) : label;
             const { type, props: nodeProps } = node;
@@ -1093,7 +1094,8 @@ const List$1 = (props) => {
                 return cloneElement(node, {
                     label: renderLabel,
                     ...nodeProps,
-                    type,
+                    type: props.type,
+                    border,
                 });
             }
             return node;
@@ -1300,10 +1302,10 @@ function Popup(props) {
             arrowProps: { left: arrowX, top: arrowY, pos: arrowPos },
         });
     };
+    const { observe, unobserve, disconnect } = useResizeObserver();
     useEffect(() => {
-        if (trigger === "contextmenu")
+        if (trigger === "contextmenu" || !observe)
             return;
-        const { observe, unobserve, disconnect } = useResizeObserver();
         triggerRef.current && observe(triggerRef.current, computePosition);
         if (!watchResize || !contentRef.current)
             return;
@@ -1911,28 +1913,6 @@ const HookModal = (props) => {
     return jsx(Modal, { ...mergedProps });
 };
 
-const Text = (props) => {
-    const { as: Tag = "span", size, weight, decoration, gradient, wave, style, className, children, } = props;
-    const gradients = useMemo(() => {
-        if (!gradient || !Array.isArray(gradient))
-            return {};
-        return {
-            backgroundImage: `-webkit-linear-gradient(${gradient.join(",")})`,
-            backgroundClip: "text",
-        };
-    }, [gradient]);
-    return (jsx(Tag, { style: {
-            fontSize: size,
-            fontWeight: weight,
-            textDecoration: decoration,
-            ...gradients,
-            ...style,
-        }, className: classNames(className, {
-            "i-text-gradient": gradient,
-            "i-text-gradient-wave": wave,
-        }), children: children }));
-};
-
 function HighLight(props) {
     const { keyword, text, escape, caseSensitive, renderWord = (word) => jsx("mark", { children: word }), ...restProps } = props;
     const content = useMemo(() => {
@@ -1987,6 +1967,27 @@ function Number$1(props) {
     return jsx(Text, { ...restProps, children: text });
 }
 
+const Text = (props) => {
+    const { as: Tag = "span", size, weight, decoration, gradient, wave, style, className, children, } = props;
+    const gradients = useMemo(() => {
+        if (!gradient || !Array.isArray(gradient))
+            return {};
+        return {
+            backgroundImage: `-webkit-linear-gradient(${gradient.join(",")})`,
+            backgroundClip: "text",
+        };
+    }, [gradient]);
+    return (jsx(Tag, { style: {
+            fontSize: size,
+            fontWeight: weight,
+            textDecoration: decoration,
+            ...gradients,
+            ...style,
+        }, className: classNames(className, {
+            "i-text-gradient": gradient,
+            "i-text-gradient-wave": wave,
+        }), children: children }));
+};
 Text.Number = Number$2;
 Text.Time = Number$1;
 Text.HighLight = HighLight;
@@ -2405,6 +2406,40 @@ function usePreview() {
     return preview;
 }
 
+function List(props) {
+    const { items = [], gap = 8, columns, wrap, direction, usePreview: previewable, onClick, ...restProps } = props;
+    const preview = usePreview();
+    const files = useMemo(() => {
+        return items.map((item) => {
+            const o = {
+                src: "",
+            };
+            if (typeof item === "string") {
+                o.src = item;
+            }
+            else {
+                Object.assign(o, item);
+            }
+            o.suffix = getSuffixByUrl(o.src) || "";
+            o.type = getFileType(o.suffix, item["type"]);
+            return o;
+        });
+    }, [items]);
+    const handleClick = (e, i) => {
+        onClick?.(e);
+        previewable &&
+            preview({
+                items: files,
+                initial: i,
+            });
+    };
+    if (!files.length)
+        return "";
+    return (jsx(Flex, { className: 'i-image-list', gap: gap, columns: columns, wrap: wrap, direction: direction, children: files.map((img, i) => {
+            return (jsx(Image, { src: img.src, size: 60, usePreview: false, onClick: (e) => handleClick(e, i), ...restProps }, i));
+        }) }));
+}
+
 const Image = (props) => {
     const { src, round, size, initSize, lazyload, fallback = (jsx(Icon, { icon: jsx(HideImageTwotone, {}), size: '2em', className: 'color-5' })), fit, style, className, cover, coverClass, usePreview: previewable, onLoad, onError, onClick, ...restProps } = props;
     const state = useReactive({
@@ -2441,7 +2476,7 @@ const Image = (props) => {
         if (!ref.current?.complete) {
             state.status = "loading";
         }
-        if (!lazyload || !ref.current)
+        if (!lazyload || !ref.current || !observe)
             return;
         observe(ref.current, (tar, visible) => {
             if (!visible)
@@ -2452,7 +2487,7 @@ const Image = (props) => {
         return () => {
             ref.current && unobserve(ref.current);
         };
-    }, [src]);
+    }, [src, observe]);
     restProps[lazyload ? "data-src" : "src"] = src;
     const iSize = state.status === "loading" ? initSize : undefined;
     return (jsx("div", { style: {
@@ -2464,41 +2499,6 @@ const Image = (props) => {
             [`i-image-${state.status}`]: state.status,
         }), children: state.status === "error" ? (fallback) : (jsxs(Fragment, { children: [src && (jsx("img", { ref: ref, style: { objectFit: fit, width: wh, height: wh }, ...restProps, onLoad: handleLoad, onError: handleError, onClick: handleClick })), src && state.status === "loading" && jsx(Loading, { absolute: true }), cover && (jsx("div", { className: classNames("i-image-cover", coverClass), onClick: handleClick, children: cover }))] })) }));
 };
-
-function List(props) {
-    const { items = [], gap = 8, columns, wrap, direction, usePreview: previewable, onClick, ...restProps } = props;
-    const preview = usePreview();
-    const files = useMemo(() => {
-        return items.map((item) => {
-            const o = {
-                src: "",
-            };
-            if (typeof item === "string") {
-                o.src = item;
-            }
-            else {
-                Object.assign(o, item);
-            }
-            o.suffix = getSuffixByUrl(o.src) || "";
-            o.type = getFileType(o.suffix, item["type"]);
-            return o;
-        });
-    }, [items]);
-    const handleClick = (e, i) => {
-        onClick?.(e);
-        previewable &&
-            preview({
-                items: files,
-                initial: i,
-            });
-    };
-    if (!files.length)
-        return "";
-    return (jsx(Flex, { className: 'i-image-list', gap: gap, columns: columns, wrap: wrap, direction: direction, children: files.map((img, i) => {
-            return (jsx(Image, { src: img.src, size: 60, usePreview: false, onClick: (e) => handleClick(e, i), ...restProps }, i));
-        }) }));
-}
-
 Image.List = List;
 
 function InputContainer(props) {
@@ -2510,59 +2510,6 @@ function InputContainer(props) {
                 }), children: tip }))] }));
 }
 
-const Input = ((props) => {
-    const { ref, type = "text", label, name, value = props.initValue ?? "", initValue = "", prepend, append, labelInline, className, status = "normal", message, tip, clear, hideVisible, border, required, onChange, onEnter, style, ...restProps } = props;
-    const state = useReactive({
-        value,
-        type,
-        visible: false,
-    });
-    const handleChange = (e) => {
-        const v = e.target.value;
-        state.value = v;
-        onChange?.(v, e);
-    };
-    const handleKeydown = (e) => {
-        e.code === "Enter" && onEnter?.(e);
-    };
-    const handleHelperClick = () => {
-        if (type === "password" && !hideVisible) {
-            Object.assign(state, {
-                visible: !state.visible,
-                type: !state.visible ? "text" : "password",
-            });
-            return;
-        }
-        const v = "";
-        onChange?.(v);
-    };
-    const HelperIcon = useMemo(() => {
-        if (type === "password") {
-            return state.visible ? jsx(VisibilityRound, {}) : jsx(VisibilityOffRound, {});
-        }
-        return undefined;
-    }, [state.visible]);
-    useEffect(() => {
-        state.value = value;
-    }, [value]);
-    const inputProps = {
-        ref,
-        type: state.type,
-        name,
-        value: state.value,
-        className: classNames("i-input", `i-input-${type}`),
-        onChange: handleChange,
-        onKeyDown: handleKeydown,
-        ...restProps,
-    };
-    const clearable = clear && state.value;
-    const showHelper = type === "password" && !!state.value;
-    return (jsx(InputContainer, { label: label, labelInline: labelInline, className: className, style: style, tip: message ?? tip, status: status, required: required, children: jsxs("div", { className: classNames("i-input-item", {
-                [`i-input-${status}`]: status !== "normal",
-                "i-input-borderless": !border,
-            }), children: [prepend && jsx("div", { className: 'i-input-prepend', children: prepend }), jsx("input", { ...inputProps }), jsx(Helpericon, { active: !!clearable || showHelper, icon: HelperIcon, onClick: handleHelperClick }), append && jsx("div", { className: 'i-input-append', children: append })] }) }));
-});
-
 const Number = (props) => {
     const { ref, label, name, value = props.initValue ?? "", initValue, labelInline, step = 1, min = -Infinity, max = Infinity, thousand, precision, type, className, status = "normal", append, border, prepend, message, tip, hideControl, style, onChange, onEnter, onInput, onBlur, ...restProps } = props;
     const state = useReactive({
@@ -2701,6 +2648,58 @@ const Textarea = (props) => {
             }), children: jsx("textarea", { ...inputProps }) }) }));
 };
 
+const Input = ((props) => {
+    const { ref, type = "text", label, name, value = props.initValue ?? "", initValue = "", prepend, append, labelInline, className, status = "normal", message, tip, clear, hideVisible, border, required, onChange, onEnter, style, ...restProps } = props;
+    const state = useReactive({
+        value,
+        type,
+        visible: false,
+    });
+    const handleChange = (e) => {
+        const v = e.target.value;
+        state.value = v;
+        onChange?.(v, e);
+    };
+    const handleKeydown = (e) => {
+        e.code === "Enter" && onEnter?.(e);
+    };
+    const handleHelperClick = () => {
+        if (type === "password" && !hideVisible) {
+            Object.assign(state, {
+                visible: !state.visible,
+                type: !state.visible ? "text" : "password",
+            });
+            return;
+        }
+        const v = "";
+        onChange?.(v);
+    };
+    const HelperIcon = useMemo(() => {
+        if (type === "password") {
+            return state.visible ? jsx(VisibilityRound, {}) : jsx(VisibilityOffRound, {});
+        }
+        return undefined;
+    }, [state.visible]);
+    useEffect(() => {
+        state.value = value;
+    }, [value]);
+    const inputProps = {
+        ref,
+        type: state.type,
+        name,
+        value: state.value,
+        className: classNames("i-input", `i-input-${type}`),
+        onChange: handleChange,
+        onKeyDown: handleKeydown,
+        ...restProps,
+    };
+    const clearable = clear && state.value;
+    const showHelper = type === "password" && !!state.value;
+    return (jsx(InputContainer, { label: label, labelInline: labelInline, className: className, style: style, tip: message ?? tip, status: status, required: required, children: jsxs("div", { className: classNames("i-input-item", {
+                [`i-input-${status}`]: status !== "normal",
+                "i-input-borderless": !border,
+            }), children: [prepend && jsx("div", { className: 'i-input-prepend', children: prepend }), jsx("input", { ...inputProps }), jsx(Helpericon, { active: !!clearable || showHelper, icon: HelperIcon, onClick: handleHelperClick }), append && jsx("div", { className: 'i-input-append', children: append })] }) }));
+});
 Input.Textarea = Textarea;
 Input.Number = Number;
 Input.Range = Range;
@@ -3925,7 +3924,7 @@ const Tabs = ((props) => {
         state.active = key;
     };
     useEffect(() => {
-        if (!size || hideMore)
+        if (!size || hideMore || !observe)
             return;
         const { scrollHeight, scrollWidth } = navsRef.current;
         const { width, height } = size;
@@ -3971,7 +3970,7 @@ const Tabs = ((props) => {
         open(active);
     }, [active]);
     useEffect(() => {
-        if (hideMore)
+        if (hideMore || !unobserve)
             return;
         return () => {
             navRefs.current?.map(unobserve);

package/lib/types/components/button/merged.d.ts

@@ -0,0 +1,5 @@
+import _default from './button.js';
+
+
+
+export { _default as default };

package/lib/types/components/list/type.d.ts

@@ -3,8 +3,9 @@ import { HTMLAttributes, ReactNode, RefObject } from 'react';
 interface IList extends HTMLAttributes<HTMLUListElement> {
     label?: ReactNode | ((i: number) => ReactNode);
     type?: "option" | "default";
+    border?: boolean;
 }
-interface IListItem extends HTMLAttributes<HTMLLIElement>, Pick<IList, "type"> {
+interface IListItem extends HTMLAttributes<HTMLLIElement>, Pick<IList, "type" | "border"> {
     ref?: RefObject<HTMLLIElement | null>;
     active?: boolean;
     align?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@ioca/react",
-	"version": "1.3.73",
+	"version": "1.3.75",
 	"type": "module",
 	"scripts": {
 		"dev": "vite",
@@ -44,7 +44,7 @@
 		"rollup-plugin-dts": "^6.1.1",
 		"rollup-plugin-peer-deps-external": "^2.2.4",
 		"rollup-plugin-scss": "^4.0.0",
-		"sass": "^1.18.0",
+		"sass": "^1.86.0",
 		"typescript": "^5.7.2",
 		"vite": "^6.0.2",
 		"vite-plugin-dynamic-import": "^1.6.0"