@ioca/react 1.5.11 → 1.5.13

package/lib/index.js

@@ -494,53 +494,62 @@ const Icon = (props) => {
 
 function ToTop(props) {
     const { style, className, onClick } = props;
-    return (jsx(Button, { square: true, className: classNames("i-affix-totop", className), style: { ...style }, onClick: onClick, children: jsx(Icon, { icon: jsx(SkipPreviousRound, {}), rotate: 90 }) }));
+    return (jsx(Button, { square: true, className: classNames("i-affix-totop", "i-affix-target", className), style: { ...style }, onClick: onClick, children: jsx(Icon, { icon: jsx(SkipPreviousRound, {}), rotate: 90 }) }));
 }
 
+const defaultGetContainer = () => {
+    if (typeof window === "undefined")
+        return null;
+    return window;
+};
 const Affix = (props) => {
-    const { position = "fixed", left, top, right, bottom, offset, style, className, children, getContainer = () => {
-        if (typeof document === "undefined")
-            return null;
-        return document.body;
-    }, } = props;
-    const [hidden, setHidden] = useState(false);
+    const { position = "fixed", left, top, right, bottom, offset, style, className, children, getContainer = defaultGetContainer, } = props;
+    const [hidden, setHidden] = useState(() => {
+        if (!offset)
+            return false;
+        if (typeof window === "undefined")
+            return false;
+        return (window.scrollY ?? 0) < offset;
+    });
+    const getContainerRef = useRef(getContainer);
+    getContainerRef.current = getContainer;
     const hijackChildren = useMemo(() => {
         return Children.map(children, (node) => {
-            if (node.type === ToTop) {
-                const { onClick } = node.props;
-                return cloneElement(node, {
-                    key: node.key,
-                    ...node.props,
-                    onClick: (e) => {
-                        const container = getContainer();
-                        onClick?.(e);
-                        container?.scrollTo({
-                            top: 0,
-                            left: 0,
-                            behavior: "smooth",
-                        });
-                    },
-                });
-            }
-            return node;
+            if (node.type !== ToTop)
+                return node;
+            const { onClick } = node.props;
+            return cloneElement(node, {
+                onClick: (e) => {
+                    const container = getContainerRef.current();
+                    onClick?.(e);
+                    container?.scrollTo({
+                        top: 0,
+                        left: 0,
+                        behavior: "smooth",
+                    });
+                },
+            });
         });
-    }, [children, getContainer]);
+    }, [children]);
     useEffect(() => {
-        const container = getContainer();
+        const container = getContainerRef.current();
         if (!offset || !container)
             return;
+        const getScrollTop = () => container instanceof Window
+            ? container.scrollY
+            : container.scrollTop;
         const listener = debounce({ delay: 160 }, () => {
-            const top = container.scrollTop;
-            setHidden(top < offset);
+            setHidden(getScrollTop() < offset);
         });
         listener();
         container.addEventListener("scroll", listener);
         return () => {
+            listener.cancel();
             container.removeEventListener("scroll", listener);
         };
-    }, [offset, getContainer]);
+    }, [offset]);
     return (jsx("div", { className: classNames("i-affix", className, {
-            "i-affix-hidden": hidden,
+            "i-affix-visible": !hidden,
         }), style: {
             ...style,
             position,
@@ -1752,9 +1761,9 @@ const Item$4 = (props) => {
         }), style: { alignItems: align, ...style }, ...restProps, children: [label !== undefined && (jsx("span", { className: 'i-list-item-label', children: label })), children] }));
 };
 
-const List$1 = (props) => {
+const List$1 = forwardRef((props, ref) => {
     const { label, type, border, className, children, ...restProps } = props;
-    return (jsx("ul", { className: classNames("i-list", className), ...restProps, children: Children.map(children, (node, i) => {
+    return (jsx("ul", { ref: ref, 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;
             if (type === Item$4) {
@@ -1767,7 +1776,7 @@ const List$1 = (props) => {
             }
             return node;
         }) }));
-};
+});
 List$1.Item = Item$4;
 
 const Content$2 = forwardRef((props, ref) => {
@@ -2605,15 +2614,56 @@ const removeAdjacentMemtionTag = (editor, key) => {
     editor.focus();
     return true;
 };
+const makeRectSource = (rect) => {
+    const { left, top, width, height } = rect;
+    return {
+        offsetParent: null,
+        offsetLeft: left,
+        offsetTop: top,
+        getBoundingClientRect: () => ({
+            left,
+            top,
+            right: left + width,
+            bottom: top + height,
+            width,
+            height,
+            x: left,
+            y: top,
+            toJSON: () => ({}),
+        }),
+    };
+};
 const Memtion = (props) => {
     const { visible, rect, options, activeIndex, onActiveChange, onSelect } = props;
+    const containerRef = useRef(null);
+    const [pos, setPos] = useState({ left: 0, top: 0 });
+    const [ready, setReady] = useState(false);
+    useLayoutEffect(() => {
+        if (!visible || !rect || !options?.length) {
+            setReady(false);
+            return;
+        }
+        const el = containerRef.current;
+        if (!el)
+            return;
+        const [left, top] = getPosition(makeRectSource(rect), el, {
+            position: "bottom",
+            gap: 4,
+            offset: 0,
+            align: "start",
+            refWindow: true,
+        });
+        setPos({ left, top });
+        setReady(true);
+    }, [visible, rect, options]);
     if (!visible || !rect || !options?.length) {
         return null;
     }
-    const content = (jsx(List$1, { className: "i-editor-memtion", type: "option", style: {
+    const content = (jsx(List$1, { ref: containerRef, className: "i-editor-memtion", type: "option", style: {
             position: "fixed",
-            top: rect.bottom,
-            left: rect.left,
+            left: pos.left,
+            top: pos.top,
+            opacity: ready ? 1 : 0,
         }, children: options.map((option, i) => (jsx(List$1.Item, { type: "option", active: i === activeIndex, onMouseDown: (e) => e.preventDefault(), onMouseEnter: () => onActiveChange?.(i), onClick: () => onSelect?.(option), children: option.label }, `${option.value}-${i}`))) }));
     if (typeof document === "undefined") {
         return content;
@@ -2732,6 +2782,8 @@ const Editor = (props) => {
     };
     const handleKeyDown = (e) => {
         onKeyDown?.(e);
+        if (e.defaultPrevented)
+            return;
         if (!isPlaintextMode &&
             (e.key === "Backspace" || e.key === "Delete") &&
             removeAdjacentMemtionTag(editorRef.current, e.key)) {
@@ -2772,6 +2824,9 @@ const Editor = (props) => {
                 exec(isRichMode ? "insertHTML" : "insertText", false, isRichMode ? "&#09;" : "\t");
                 break;
             case "Enter":
+                if (e.shiftKey) {
+                    break;
+                }
                 if (!onEnter)
                     break;
                 e.preventDefault();
@@ -3392,9 +3447,9 @@ Text.HighLight = HighLight;
 
 function Circle(props) {
     const { value, circleSize = 40, lineWidth = 8 } = props;
-    return (jsxs("div", { className: 'i-progress-circle', children: [jsxs("svg", { width: circleSize, height: circleSize, children: [jsx("circle", { cx: circleSize / 2, cy: circleSize / 2, r: circleSize / 2 - lineWidth / 2, fill: 'none', stroke: 'var(--background-opacity-2)', strokeWidth: lineWidth }), jsx("circle", { cx: circleSize / 2, cy: circleSize / 2, r: circleSize / 2 - lineWidth / 2, fill: 'none', stroke: 'var(--color-main)', strokeWidth: lineWidth, strokeDasharray: 100, pathLength: 100, className: 'i-progress-circle-path', strokeLinecap: 'round', style: {
-                            strokeDashoffset: `calc(100 - ${value})`,
-                        } })] }), jsxs("span", { className: 'i-progress-circle-value', children: [jsx("span", { children: value }), jsx(Text, { size: '.81em', className: 'color-7', children: "%" })] })] }));
+    return (jsxs("div", { className: "i-progress-circle", children: [jsxs("svg", { width: circleSize, height: circleSize, children: [jsx("circle", { cx: circleSize / 2, cy: circleSize / 2, r: circleSize / 2 - lineWidth / 2, fill: "none", stroke: "var(--color-main-0)", strokeWidth: lineWidth }), jsx("circle", { cx: circleSize / 2, cy: circleSize / 2, r: circleSize / 2 - lineWidth / 2, fill: "none", stroke: "var(--color-main)", strokeWidth: lineWidth, strokeDasharray: 100, pathLength: 100, className: "i-progress-circle-path", strokeLinecap: "round", style: {
+                            strokeDashoffset: 100 - (value ?? 0),
+                        } })] }), jsxs("span", { className: "i-progress-circle-value", children: [jsx("span", { children: value }), jsx(Text, { size: ".81em", className: "color-5", children: "%" })] })] }));
 }
 
 const Line = (props) => {
@@ -4615,7 +4670,7 @@ const Handle = (props) => {
 };
 
 function ColorPicker(props) {
-    const { value, type = "HEX", disabledAlpha, children, usePanel, handle = "both", placeholder = "Colors", popupProps, onChange, label, required, ...restProps } = props;
+    const { value, type = "HEX", disabledAlpha, children, usePanel, handle = "both", placeholder = "Colors", popupProps, onChange, label, required, className, style, ...restProps } = props;
     const [colorType, setColorType] = useState(type);
     const [colorValue, setColorValue] = useState(value);
     const [syncValue, setSyncValue] = useState(value);
@@ -4659,9 +4714,11 @@ function ColorPicker(props) {
     if (usePanel) {
         return (jsx(InputContainer, { label: label, required: required, children: jsx(ColorsPanel, { ...restProps, value: value, onChange: onChange }) }));
     }
-    return (jsx(InputContainer, { label: label, required: required, children: jsx(Popup, { trigger: "click", touchable: true, position: "bottom", ...popupProps, visible: visible, content: jsx(ColorsPanel, { ...restProps, value: syncValue, disabledAlpha: disabledAlpha, panelRender: (panel) => {
+    return (jsx(InputContainer, { label: label, required: required, className: classNames("i-colorpicker", className), style: style, children: jsx(Popup, { trigger: "click", touchable: true, position: "bottom", ...popupProps, visible: visible, content: jsx(ColorsPanel, { ...restProps, value: syncValue, disabledAlpha: disabledAlpha, panelRender: (panel) => {
                     return (jsxs(Fragment, { children: [panel, jsx(Footer, { value: colorValue, type: colorType, onTypeChange: handleTypeChange, onChange: handleValueChange, onOk: handleOk })] }));
-                }, onChange: handleChange, onChangeComplete: handleComplete }), onVisibleChange: handleVisibleChange, children: children ?? (jsx(Handle, { color: value, handle: handle, placeholder: placeholder })) }) }));
+                }, onChange: handleChange, onChangeComplete: handleComplete }), onVisibleChange: handleVisibleChange, children: typeof children === "function"
+                ? children({ type: colorType, value: colorValue })
+                : (children ?? (jsx(Handle, { color: value, handle: handle, placeholder: placeholder }))) }) }));
 }
 
 const Dates = (props) => {
@@ -6094,7 +6151,7 @@ const normalizeFiles = (files) => (files ?? []).map((item) => {
     };
 });
 const Upload = (props) => {
-    const { label, labelInline, value, files, placeholder, status = "normal", message, className, style, children, droppable, dropbox, defaultButtonProps, mode = "default", cardSize = "3.2em", disabled, sortable, limit = props.multiple ? Infinity : 1, multiple, renderItem, shouldUpload = () => true, uploader, onChange, onFilesChange, onUpload, onRemove, ...restProps } = props;
+    const { label, labelInline, value, files, placeholder, status = "normal", message, className, style, children, droppable, dropbox, getDropboxContainer, defaultButtonProps, mode = "default", cardSize = "3.2em", disabled, sortable, limit = props.multiple ? Infinity : 1, multiple, renderItem, shouldUpload = () => true, uploader, onChange, onFilesChange, onUpload, onRemove, ...restProps } = props;
     const [internalFileList, setInternalFileList] = useState([]);
     const isControlled = useMemo(() => value !== undefined || files !== undefined, [value, files]);
     const fileList = isControlled
@@ -6204,7 +6261,12 @@ const Upload = (props) => {
                             return node;
                         return jsx(SortableItem, { children: node }, key);
                     }) }), uploadMessage && (jsx("span", { className: "i-upload-message", children: uploadMessage })), fileList.length < limit &&
-                    (droppable ? (jsx(Dropbox, { multiple: multiple, accept: restProps.accept, disabled: disabled, onChange: handleChange, onDropFiles: handleDropFiles, children: dropbox })) : (jsxs("label", { children: [jsx("input", { ...restProps, disabled: disabled, ref: inputRef, type: "file", className: "i-input-file-hidden", multiple: multiple, onChange: handleChange }), trigger] })))] }) }));
+                    (droppable ? ((() => {
+                        const node = (jsx(Dropbox, { multiple: multiple, accept: restProps.accept, disabled: disabled, onChange: handleChange, onDropFiles: handleDropFiles, children: dropbox }));
+                        return getDropboxContainer
+                            ? createPortal(node, getDropboxContainer())
+                            : node;
+                    })()) : (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();

package/lib/types/components/affix/totop.d.ts

@@ -1,6 +1,11 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { IAffix } from './type.js';
+import { CSSProperties, MouseEventHandler } from 'react';
 
-declare function ToTop(props: IAffix): react_jsx_runtime.JSX.Element;
+interface IToTopProps {
+    style?: CSSProperties;
+    className?: string;
+    onClick?: MouseEventHandler<HTMLElement>;
+}
+declare function ToTop(props: IToTopProps): react_jsx_runtime.JSX.Element;
 
 export { ToTop as default };

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

@@ -7,7 +7,7 @@ interface IAffix extends HTMLAttributes<HTMLElement> {
     right?: string | number;
     bottom?: string | number;
     offset?: number;
-    getContainer?: () => HTMLElement | null;
+    getContainer?: () => HTMLElement | Window | null;
 }
 
 export type { IAffix };

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

@@ -0,0 +1,6 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { IListItem } from './type.js';
+
+declare const Item: (props: IListItem) => react_jsx_runtime.JSX.Element;
+
+export { Item as default };

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

@@ -1,9 +1,7 @@
-import { IList, IListItem } from './type.js';
-import * as react_jsx_runtime from 'react/jsx-runtime';
+import Item from './item.js';
 
-declare const List: {
-    (props: IList): react_jsx_runtime.JSX.Element;
-    Item: (props: IListItem) => react_jsx_runtime.JSX.Element;
+declare const List: typeof List & {
+    Item: typeof Item;
 };
 
 export { List as default };

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

@@ -32,7 +32,10 @@ interface IColorPicker extends Omit<ColorPickerProps, "value" | "onChange"> {
     label?: ReactNode;
     required?: boolean;
     type?: "HEX" | "RGB" | "HSB";
-    children?: ReactNode;
+    children?: ReactNode | ((params: {
+        type: string;
+        value: any;
+    }) => ReactNode);
     popupProps?: IPopup;
     usePanel?: boolean;
     handle?: "text" | "square" | "both";

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

@@ -34,7 +34,7 @@ interface RefTabs {
     open: (key: string) => void;
     close: (key: string) => void;
     add: (tab: ITabItem, position?: number) => void;
-    navs: RefObject<HTMLDivElement>;
+    navs: RefObject<HTMLDivElement | null>;
 }
 interface CompositionTabs extends ForwardRefExoticComponent<ITabs> {
     Item: typeof Item;

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

@@ -12,6 +12,7 @@ interface IUpload extends Omit<BaseInput, "ref">, Omit<InputHTMLAttributes<HTMLI
     mode?: "default" | "card";
     droppable?: boolean;
     dropbox?: (dragging?: boolean) => ReactNode;
+    getDropboxContainer?: () => HTMLElement;
     cardSize?: string;
     defaultButtonProps?: IButton;
     shouldUpload?: (file: IFile) => boolean;

package/package.json

@@ -1,99 +1,99 @@
 {
-	"name": "@ioca/react",
-	"version": "1.5.11",
-	"type": "module",
-	"scripts": {
-		"dev": "vite",
-		"build": "tsc && vite build",
-		"preview": "vite preview",
-		"make": "node templates/index.js",
-		"lib": "rimraf lib && npx rollup -c"
-	},
-	"dependencies": {
-		"@rc-component/color-picker": "^2.0.1",
-		"@ricons/material": "^0.12.0",
-		"classnames": "^2.5.1",
-		"dayjs": "^1.11.13",
-		"highlight-words-core": "^1.2.3",
-		"pubsub-js": "^1.9.5",
-		"radash": "^12.1.0",
-		"react": ">=16.8.0",
-		"react-dom": ">=16.8.0",
-		"react-easy-sort": "^1.6.0",
-		"react-router": "^7.1.1",
-		"react-window": "^2.2.7",
-		"xss": "^1.0.15"
-	},
-	"devDependencies": {
-		"@rollup/plugin-commonjs": "^28.0.3",
-		"@rollup/plugin-node-resolve": "^15.3.0",
-		"@rollup/plugin-terser": "^0.4.4",
-		"@rollup/plugin-typescript": "^12.1.1",
-		"@types/mockjs": "^1.0.10",
-		"@types/node": "^22.10.1",
-		"@types/pubsub-js": "^1.8.5",
-		"@types/react": "^19.0.4",
-		"@types/react-dom": "^19.2.3",
-		"@vitejs/plugin-react": "^6.0.1",
-		"chalk": "^5.4.1",
-		"mockjs": "^1.1.0",
-		"react-syntax-highlighter": "^15.6.1",
-		"rimraf": "^6.0.1",
-		"rollup": "^4.59.0",
-		"rollup-plugin-dts": "^6.1.1",
-		"rollup-plugin-peer-deps-external": "^2.2.4",
-		"rollup-plugin-postcss": "^4.0.2",
-		"typescript": "^5.7.2",
-		"vite": "^8.0.0",
-		"vite-plugin-dynamic-import": "^1.6.0"
-	},
-	"peerDependencies": {
-		"react": ">=16.8.0",
-		"react-dom": ">=16.8.0"
-	},
-	"main": "lib/cjs/index.js",
-	"module": "lib/es/index.js",
-	"types": "lib/types/index.d.ts",
-	"exports": {
-		".": {
-			"types": "./lib/types/index.d.ts",
-			"import": "./lib/es/index.js",
-			"require": "./lib/cjs/index.js"
-		},
-		"./index.css": "./lib/css/index.css",
-		"./*": {
-			"types": "./lib/types/*.d.ts",
-			"import": "./lib/es/*.js",
-			"require": "./lib/cjs/*.js"
-		}
-	},
-	"files": [
-		"lib"
-	],
-	"publishConfig": {
-		"access": "public"
-	},
-	"license": "MIT",
-	"description": "ioca react ui components",
-	"directories": {
-		"doc": "docs"
-	},
-	"repository": {
-		"type": "git",
-		"url": "git+https://github.com/MunGaaKei/ioca-react.git"
-	},
-	"keywords": [
-		"ioca",
-		"react ui",
-		"components"
-	],
-	"author": "iannman",
-	"bugs": {
-		"url": "https://github.com/MunGaaKei/ioca-react/issues"
-	},
-	"homepage": "https://github.com/MunGaaKei/ioca-react#readme",
-	"sideEffects": [
-		"*.css"
-	],
-	"packageManager": "pnpm@10.32.1"
+    "name": "@ioca/react",
+    "version": "1.5.13",
+    "type": "module",
+    "scripts": {
+        "dev": "vite",
+        "build": "tsc && vite build",
+        "preview": "vite preview",
+        "make": "node templates/index.js",
+        "lib": "rimraf lib && npx rollup -c"
+    },
+    "dependencies": {
+        "@rc-component/color-picker": "^2.0.1",
+        "@ricons/material": "^0.12.0",
+        "classnames": "^2.5.1",
+        "dayjs": "^1.11.13",
+        "highlight-words-core": "^1.2.3",
+        "pubsub-js": "^1.9.5",
+        "radash": "^12.1.0",
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0",
+        "react-easy-sort": "^1.6.0",
+        "react-router": "^7.1.1",
+        "react-window": "^2.2.7",
+        "xss": "^1.0.15"
+    },
+    "devDependencies": {
+        "@rollup/plugin-commonjs": "^28.0.3",
+        "@rollup/plugin-node-resolve": "^15.3.0",
+        "@rollup/plugin-terser": "^0.4.4",
+        "@rollup/plugin-typescript": "^12.1.1",
+        "@types/mockjs": "^1.0.10",
+        "@types/node": "^22.10.1",
+        "@types/pubsub-js": "^1.8.5",
+        "@types/react": "^19.0.4",
+        "@types/react-dom": "^19.2.3",
+        "@vitejs/plugin-react": "^6.0.1",
+        "chalk": "^5.4.1",
+        "mockjs": "^1.1.0",
+        "react-syntax-highlighter": "^15.6.1",
+        "rimraf": "^6.0.1",
+        "rollup": "^4.59.0",
+        "rollup-plugin-dts": "^6.1.1",
+        "rollup-plugin-peer-deps-external": "^2.2.4",
+        "rollup-plugin-postcss": "^4.0.2",
+        "typescript": "^5.7.2",
+        "vite": "^8.0.0",
+        "vite-plugin-dynamic-import": "^1.6.0"
+    },
+    "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+    },
+    "main": "lib/cjs/index.js",
+    "module": "lib/es/index.js",
+    "types": "lib/types/index.d.ts",
+    "exports": {
+        ".": {
+            "types": "./lib/types/index.d.ts",
+            "import": "./lib/es/index.js",
+            "require": "./lib/cjs/index.js"
+        },
+        "./index.css": "./lib/css/index.css",
+        "./*": {
+            "types": "./lib/types/*.d.ts",
+            "import": "./lib/es/*.js",
+            "require": "./lib/cjs/*.js"
+        }
+    },
+    "files": [
+        "lib"
+    ],
+    "publishConfig": {
+        "access": "public"
+    },
+    "license": "MIT",
+    "description": "ioca react ui components",
+    "directories": {
+        "doc": "docs"
+    },
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/MunGaaKei/ioca-react.git"
+    },
+    "keywords": [
+        "ioca",
+        "react ui",
+        "components"
+    ],
+    "author": "iannman",
+    "bugs": {
+        "url": "https://github.com/MunGaaKei/ioca-react/issues"
+    },
+    "homepage": "https://github.com/MunGaaKei/ioca-react#readme",
+    "sideEffects": [
+        "*.css"
+    ],
+    "packageManager": "pnpm@10.32.1"
 }