@canlooks/can-ui 0.0.24 → 0.0.26

package/dist/esm/components/image/imagePreview.js

@@ -1,13 +1,21 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { memo, useRef, useState } from 'react';
 import { Modal } from '../modal';
-import { classnames, cloneRef, toArray, useControlled } from '../../utils';
+import { clsx, cloneRef, toArray, useControlled } from '../../utils';
 import { classes, style } from './imagePreview.style';
-import { CloseOutlined, FullscreenOutlined, LeftOutlined, RightOutlined, RotateLeftOutlined, RotateRightOutlined, ZoomInOutlined, ZoomOutOutlined } from '@ant-design/icons';
 import { Button } from '../button';
 import { TransformComponent, TransformWrapper } from 'react-zoom-pan-pinch';
 import { Tooltip } from '../tooltip';
-export const ImagePreview = memo(({ src = [], defaultIndex = 0, index, onIndexChange, defaultOpen = false, open, onOpenChange, showRotate = true, showZoom = true, showClose = true, renderControl, transformWrapperProps, transformWrapperRef, ...props }) => {
+import { Icon } from '../..';
+import { faXmark } from '@fortawesome/free-solid-svg-icons/faXmark';
+import { faExpand } from '@fortawesome/free-solid-svg-icons/faExpand';
+import { faAngleLeft } from '@fortawesome/free-solid-svg-icons/faAngleLeft';
+import { faAngleRight } from '@fortawesome/free-solid-svg-icons/faAngleRight';
+import { faArrowRotateLeft } from '@fortawesome/free-solid-svg-icons/faArrowRotateLeft';
+import { faArrowRotateRight } from '@fortawesome/free-solid-svg-icons/faArrowRotateRight';
+import { faMagnifyingGlassPlus } from '@fortawesome/free-solid-svg-icons/faMagnifyingGlassPlus';
+import { faMagnifyingGlassMinus } from '@fortawesome/free-solid-svg-icons/faMagnifyingGlassMinus';
+export const ImagePreview = memo(({ src = [], defaultIndex = 0, index, onIndexChange, defaultOpen = false, open, onOpenChange, showRotation = true, showZoom = true, showClose = true, renderControl, transformWrapperProps, ...props }) => {
     const srcArr = toArray(src);
     const [innerOpen, setInnerOpen] = useControlled(defaultOpen, open, onOpenChange);
     const [innerIndex, setInnerIndex] = useControlled(defaultIndex, index, onIndexChange);
@@ -33,14 +41,14 @@ export const ImagePreview = memo(({ src = [], defaultIndex = 0, index, onIndexCh
         size: 'large',
         color: 'text'
     };
-    return (_jsx(Modal, { ...props, css: style, className: classnames(classes.root, props.className), open: innerOpen.current, maskProps: {
+    return (_jsx(Modal, { ...props, css: style, className: clsx(classes.root, props.className), open: innerOpen.current, maskProps: {
             ...props.maskProps,
-            children: (_jsxs(_Fragment, { children: [_jsxs("div", { className: classes.control, children: [renderControl, showRotate &&
-                                _jsxs(_Fragment, { children: [_jsx(Tooltip, { title: "\u65CB\u8F6C-90\u00B0", children: _jsx(Button, { ...commonControlProps, onClick: () => setRotate(rotate - 90), children: _jsx(RotateLeftOutlined, {}) }) }), _jsx(Tooltip, { title: "\u65CB\u8F6C90\u00B0", children: _jsx(Button, { ...commonControlProps, onClick: () => setRotate(rotate + 90), children: _jsx(RotateRightOutlined, {}) }) })] }), showZoom &&
-                                _jsxs(_Fragment, { children: [_jsx(Tooltip, { title: "\u7F29\u5C0F", children: _jsx(Button, { ...commonControlProps, onClick: () => innerTransformWrapperRef.current.zoomOut(), children: _jsx(ZoomOutOutlined, {}) }) }), _jsx(Tooltip, { title: "\u653E\u5927", children: _jsx(Button, { ...commonControlProps, onClick: () => innerTransformWrapperRef.current.zoomIn(), children: _jsx(ZoomInOutlined, {}) }) }), _jsx(Tooltip, { title: "\u9002\u5E94\u5C4F\u5E55", children: _jsx(Button, { ...commonControlProps, onClick: () => innerTransformWrapperRef.current.resetTransform(), children: _jsx(FullscreenOutlined, {}) }) })] }), showClose &&
-                                _jsx(Button, { ...commonControlProps, onClick: () => setInnerOpen(false), children: _jsx(CloseOutlined, {}) })] }), srcArr.length > 1 &&
-                        _jsxs(_Fragment, { children: [_jsxs("div", { className: classes.swap, children: [_jsx(Button, { ...commonControlProps, onClick: prev, children: _jsx(LeftOutlined, {}) }), _jsx(Button, { ...commonControlProps, onClick: next, children: _jsx(RightOutlined, {}) })] }), _jsxs("div", { className: classes.counter, children: [innerIndex.current + 1, " / ", srcArr.length] })] })] }))
-        }, children: _jsx(TransformWrapper, { smooth: false, ...transformWrapperProps, ref: cloneRef(transformWrapperRef, innerTransformWrapperRef), minScale: .2, onPanning: (ref, e) => {
+            children: (_jsxs(_Fragment, { children: [_jsxs("div", { className: classes.control, children: [renderControl, showRotation &&
+                                _jsxs(_Fragment, { children: [_jsx(Tooltip, { title: "\u65CB\u8F6C-90\u00B0", children: _jsx(Button, { ...commonControlProps, onClick: () => setRotate(rotate - 90), children: _jsx(Icon, { icon: faArrowRotateLeft }) }) }), _jsx(Tooltip, { title: "\u65CB\u8F6C90\u00B0", children: _jsx(Button, { ...commonControlProps, onClick: () => setRotate(rotate + 90), children: _jsx(Icon, { icon: faArrowRotateRight }) }) })] }), showZoom &&
+                                _jsxs(_Fragment, { children: [_jsx(Tooltip, { title: "\u7F29\u5C0F", children: _jsx(Button, { ...commonControlProps, onClick: () => innerTransformWrapperRef.current.zoomOut(), children: _jsx(Icon, { icon: faMagnifyingGlassMinus }) }) }), _jsx(Tooltip, { title: "\u653E\u5927", children: _jsx(Button, { ...commonControlProps, onClick: () => innerTransformWrapperRef.current.zoomIn(), children: _jsx(Icon, { icon: faMagnifyingGlassPlus }) }) }), _jsx(Tooltip, { title: "\u9002\u5E94\u5C4F\u5E55", children: _jsx(Button, { ...commonControlProps, onClick: () => innerTransformWrapperRef.current.resetTransform(), children: _jsx(Icon, { icon: faExpand }) }) })] }), showClose &&
+                                _jsx(Button, { ...commonControlProps, onClick: () => setInnerOpen(false), children: _jsx(Icon, { icon: faXmark }) })] }), srcArr.length > 1 &&
+                        _jsxs(_Fragment, { children: [_jsxs("div", { className: classes.swap, children: [_jsx(Button, { ...commonControlProps, onClick: prev, children: _jsx(Icon, { icon: faAngleLeft }) }), _jsx(Button, { ...commonControlProps, onClick: next, children: _jsx(Icon, { icon: faAngleRight }) })] }), _jsxs("div", { className: classes.counter, children: [innerIndex.current + 1, " / ", srcArr.length] })] })] }))
+        }, children: _jsx(TransformWrapper, { smooth: false, ...transformWrapperProps, ref: cloneRef(transformWrapperProps?.ref, innerTransformWrapperRef), minScale: .2, onPanning: (ref, e) => {
                 transformWrapperProps?.onPanning?.(ref, e);
                 isPanning.current = true;
             }, onPanningStop: (ref, e) => {
@@ -48,5 +56,5 @@ export const ImagePreview = memo(({ src = [], defaultIndex = 0, index, onIndexCh
                 isPanning.current && setTimeout(() => isPanning.current = false);
             }, children: _jsx(TransformComponent, { wrapperClass: classes.imageWrapper, contentClass: classes.image, wrapperProps: {
                     onClick: () => !isPanning.current && setInnerOpen(false)
-                }, children: _jsx("img", { src: srcArr[innerIndex.current], style: { rotate: rotate + 'deg' }, onLoad: imgLoaded, alt: "" }) }) }) }));
+                }, children: _jsx("img", { src: srcArr[innerIndex.current], style: { rotate: rotate + 'deg' }, onLoad: imgLoaded, alt: "" }, innerIndex.current) }) }) }));
 });

package/dist/esm/components/image/imagePreview.style.d.ts

@@ -2,8 +2,8 @@ export declare const classes: {
     button: string;
     image: string;
     counter: string;
-    control: string;
     swap: string;
+    control: string;
     imageWrapper: string;
 } & {
     root: string;

package/dist/esm/components/image/imagePreview.style.js

@@ -48,7 +48,7 @@ export const style = defineCss(({ spacing, easing }) => css `
     .${classes.button} {
         background-image: none !important;
         background-color: rgba(0, 0, 0, .4);
-        transition: background-color .2s ${easing.easeOut};
+        transition: background-color .25s ${easing.easeOut};
     
         &:hover {
             background-color: rgba(0, 0, 0, .3);

package/dist/esm/components/input/input.d.ts

@@ -1,9 +1,8 @@
-import React, { Ref } from 'react';
+import { JSX } from 'react';
 import { InputBaseProps } from '../inputBase';
 export interface InputProps extends Omit<InputBaseProps<'input'>, 'children'> {
-    inputProps?: React.JSX.IntrinsicElements['input'];
-    inputRef?: Ref<HTMLInputElement>;
+    inputProps?: JSX.IntrinsicElements['input'];
     /** 是否根据内容自动调整宽度 */
     widthAdaptable?: boolean;
 }
-export declare const Input: React.MemoExoticComponent<({ inputProps, inputRef, widthAdaptable, ...props }: InputProps) => import("@emotion/react/jsx-runtime").JSX.Element>;
+export declare const Input: import("react").MemoExoticComponent<({ inputProps, widthAdaptable, ...props }: InputProps) => import("@emotion/react/jsx-runtime").JSX.Element>;

package/dist/esm/components/input/input.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-import { classnames, cloneRef } from '../../utils';
+import { clsx } from '../../utils';
 import { classes, style } from './input.style';
 import { memo } from 'react';
 import { InputBase } from '../inputBase';
-export const Input = memo(({ inputProps, inputRef, widthAdaptable, ...props }) => {
-    return (_jsx(InputBase, { ...props, css: style, className: classnames(classes.root, props.className), "data-adaptable": widthAdaptable, children: ({ ref, ...rest }) => {
-            return (_jsxs(_Fragment, { children: [_jsx("input", { size: 1, ...rest, ...inputProps, ref: cloneRef(ref, inputRef), className: classnames(classes.input, inputProps?.className) }), widthAdaptable &&
-                        _jsx("span", { className: classes.adaptable, children: rest.value })] }));
+export const Input = memo(({ inputProps, widthAdaptable, ...props }) => {
+    return (_jsx(InputBase, { ...props, css: style, className: clsx(classes.root, props.className), "data-adaptable": widthAdaptable, children: inputBaseProps => {
+            return (_jsxs(_Fragment, { children: [_jsx("input", { size: 1, ...inputBaseProps, ...inputProps, className: clsx(classes.input, inputProps?.className) }), widthAdaptable &&
+                        _jsx("span", { className: classes.adaptable, children: inputBaseProps.value })] }));
         } }));
 });

package/dist/esm/components/inputBase/inputBase.d.ts

@@ -1,6 +1,6 @@
-import React, { ReactElement, ReactNode } from 'react';
-import { ColorPropsValue, DIVProps, Size } from '../../types';
-export interface InputBaseProps<T extends 'input' | 'textarea'> extends Omit<DIVProps, 'prefix' | 'onChange' | 'children'> {
+import { JSX, ReactElement, ReactNode } from 'react';
+import { ColorPropsValue, DivProps, Size } from '../../types';
+export interface InputBaseProps<T extends 'input' | 'textarea'> extends Omit<DivProps, 'prefix' | 'onChange' | 'children'> {
     variant?: 'outlined' | 'underlined' | 'plain';
     size?: Size;
     shape?: 'square' | 'rounded';
@@ -10,18 +10,18 @@ export interface InputBaseProps<T extends 'input' | 'textarea'> extends Omit<DIV
     clearable?: boolean;
     onClear?(): void;
     loading?: boolean;
-    type?: T extends 'input' ? React.JSX.IntrinsicElements[T]['type'] : never;
-    min?: T extends 'input' ? React.JSX.IntrinsicElements[T]['min'] : never;
-    max?: T extends 'input' ? React.JSX.IntrinsicElements[T]['max'] : never;
-    step?: T extends 'input' ? React.JSX.IntrinsicElements[T]['step'] : never;
+    type?: T extends 'input' ? JSX.IntrinsicElements[T]['type'] : never;
+    min?: T extends 'input' ? JSX.IntrinsicElements[T]['min'] : never;
+    max?: T extends 'input' ? JSX.IntrinsicElements[T]['max'] : never;
+    step?: T extends 'input' ? JSX.IntrinsicElements[T]['step'] : never;
     precision?: T extends 'input' ? number : never;
     placeholder?: string;
     disabled?: boolean;
     readOnly?: boolean;
-    autoFocus?: React.JSX.IntrinsicElements[T]['autoFocus'];
-    defaultValue?: React.JSX.IntrinsicElements[T]['defaultValue'];
-    value?: React.JSX.IntrinsicElements[T]['value'];
-    onChange?: React.JSX.IntrinsicElements[T]['onChange'];
-    children(childProps: React.JSX.IntrinsicElements[T]): ReactNode;
+    autoFocus?: JSX.IntrinsicElements[T]['autoFocus'];
+    defaultValue?: JSX.IntrinsicElements[T]['defaultValue'];
+    value?: JSX.IntrinsicElements[T]['value'];
+    onChange?: JSX.IntrinsicElements[T]['onChange'];
+    children(childProps: JSX.IntrinsicElements[T]): ReactNode;
 }
 export declare const InputBase: <T extends "input" | "textarea">(props: InputBaseProps<T>) => ReactElement;

package/dist/esm/components/inputBase/inputBase.js

@@ -1,13 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { useRef } from 'react';
 import { classes, useStyle } from './inputBase.style';
-import { classnames, fixInputNumber, useControlled } from '../../utils';
+import { clsx, fixInputNumber, useControlled } from '../../utils';
 import { useTheme } from '../theme';
-import { CloseCircleFilled } from '@ant-design/icons';
 import { Button } from '../button';
 import { LoadingIndicator } from '../loadingIndicator';
+import { Icon } from '../..';
+import { faCircleXmark } from '@fortawesome/free-solid-svg-icons/faCircleXmark';
 export const InputBase = (({ variant = 'outlined', size, shape, color = 'primary', children, prefix, suffix, onClear, loading, type, clearable = type !== 'number', 
-// 以下属性传递给<input />
+// 以下属性传递给<input/>
 min = -Infinity, max = Infinity, step, precision, placeholder, disabled, readOnly, autoFocus, defaultValue, value, onChange, ...props }) => {
     const theme = useTheme();
     size ??= theme.size;
@@ -43,12 +44,14 @@ min = -Infinity, max = Infinity, step, precision, placeholder, disabled, readOnl
             changeHandler(e);
         }
     };
-    return (_jsxs("div", { ...props, css: useStyle({ color }), className: classnames(classes.root, props.className), "data-variant": variant, "data-size": size, "data-shape": shape, onClick: wrapClickHandler, 
+    return (_jsxs("div", { ...props, css: useStyle({ color: color || 'primary' }), className: clsx(classes.root, props.className), "data-variant": variant, "data-size": size, "data-shape": shape, onClick: wrapClickHandler, 
         // 防止点击wrap时，输入框失去焦点
         onPointerDown: e => {
             props.onPointerDown?.(e);
-            const tagName = e.target?.tagName;
-            tagName !== 'TEXTAREA' && tagName !== 'INPUT' && e.preventDefault();
+            const { target } = e;
+            if (!(target instanceof HTMLInputElement) && !(target instanceof HTMLTextAreaElement)) {
+                e.preventDefault();
+            }
         }, children: [!!prefix &&
                 _jsx("div", { className: classes.prefix, children: prefix }), _jsx("div", { className: classes.content, children: children({
                     ref: innerInputRef,
@@ -70,6 +73,6 @@ min = -Infinity, max = Infinity, step, precision, placeholder, disabled, readOnl
                     onKeyDown: (e) => e.key === 'Enter' && blurHandler(e)
                 }) }), loading &&
                 _jsx(LoadingIndicator, {}), clearable && !disabled && !readOnly && (Array.isArray(innerValue.current) ? !!innerValue.current.length : !!innerValue.current) &&
-                _jsx(Button, { className: classes.clear, variant: "plain", color: "disabled", onClick: clear, children: _jsx(CloseCircleFilled, {}) }), !!suffix &&
+                _jsx(Button, { className: classes.clear, variant: "plain", color: "text.disabled", onClick: clear, children: _jsx(Icon, { icon: faCircleXmark }) }), !!suffix &&
                 _jsx("div", { className: classes.suffix, children: suffix })] }));
 });

package/dist/esm/components/inputBase/inputBase.style.js

@@ -13,7 +13,7 @@ export function useStyle({ color }) {
         gap: ${spacing[2]}px;
         align-items: center;
         cursor: text;
-        transition: border-color .2s ${easing.easeOut};
+        transition: border-color .25s ${easing.easeOut};
         position: relative;
 
         &[data-variant=outlined] {
@@ -68,7 +68,7 @@ export function useStyle({ color }) {
                 border-right-color: ${colorValue};
             }
     
-            &:not(:has([data-read-only=true])):not(:has([data-disabled=true])):hover {
+            &:not(:has([data-disabled=true])):hover {
                 ${color === 'primary' ? `border-color: ${gray(.5)};` : ''}
             }
     
@@ -100,12 +100,12 @@ export function useStyle({ color }) {
                 position: absolute;
                 bottom: -1px;
                 left: 0;
-                transition: width .2s ${easing.easeOut};
+                transition: width .25s ${easing.easeOut};
                 z-index: 3;
             }
-            
-            &[data-focused=true],
-            &:has(:focus) {
+
+            &:not(:has([data-read-only=true]))[data-focused=true],
+            &:not(:has([data-read-only=true])):has(:focus) {
                 &:after {
                     width: 100%;
                 }
@@ -153,9 +153,9 @@ export function useStyle({ color }) {
             &:hover {
                 z-index: 1;
             }
-    
-            &[data-focused=true],
-            &:has(:focus) {
+
+            &:not(:has([data-read-only=true]))[data-focused=true],
+            &:not(:has([data-read-only=true])):has(:focus) {
                 z-index: 2;
             }
     
@@ -180,9 +180,9 @@ export function useStyle({ color }) {
             &:hover {
                 z-index: 1;
             }
-    
-            &[data-focused=true],
-            &:has(:focus) {
+
+            &:not(:has([data-read-only=true]))[data-focused=true],
+            &:not(:has([data-read-only=true])):has(:focus) {
                 z-index: 2;
             }
     

package/dist/esm/components/loading/loading.d.ts

@@ -1,5 +1,6 @@
-import { DIVProps } from '../../types';
+import { DivProps } from '../../types';
 import { LoadingMaskProps } from '../loadingMask';
-export interface LoadingProps extends Omit<LoadingMaskProps, 'children'>, DIVProps {
+export interface LoadingProps extends Omit<LoadingMaskProps, 'children'>, DivProps {
+    containerProps?: DivProps;
 }
-export declare const Loading: import("react").MemoExoticComponent<({ open, text, progress, color, indicatorProps, progressProps, ...props }: LoadingProps) => import("@emotion/react/jsx-runtime").JSX.Element>;
+export declare const Loading: import("react").MemoExoticComponent<({ containerProps, open, text, progress, color, indicatorProps, progressProps, ...props }: LoadingProps) => import("@emotion/react/jsx-runtime").JSX.Element>;

package/dist/esm/components/loading/loading.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { memo } from 'react';
-import { classnames } from '../../utils';
+import { clsx } from '../../utils';
 import { classes, style } from './loading.style';
 import { LoadingMask } from '../loadingMask';
-export const Loading = memo(({ open = false, text = '加载中...', progress, color, indicatorProps, progressProps, ...props }) => {
-    return (_jsxs("div", { ...props, css: style, className: classnames(classes.root, props.className), children: [_jsx("div", { className: classes.container, children: props.children }), _jsx(LoadingMask, { open, text, progress, color, indicatorProps, progressProps, className: classes.mask })] }));
+export const Loading = memo(({ containerProps, open = false, text = '加载中...', progress, color, indicatorProps, progressProps, ...props }) => {
+    return (_jsxs("div", { ...props, css: style, className: clsx(classes.root, props.className), children: [_jsx("div", { ...containerProps, className: clsx(classes.container, containerProps?.className), children: props.children }), _jsx(LoadingMask, { open, text, progress, color, indicatorProps, progressProps, className: classes.mask })] }));
 });

package/dist/esm/components/loadingIndicator/loadingIndicator.d.ts

@@ -1,5 +1,5 @@
-import { ColorPropsValue, DIVProps } from '../../types';
-export interface LoadingIndicatorProps extends DIVProps {
+import { ColorPropsValue, DivProps } from '../../types';
+export interface LoadingIndicatorProps extends DivProps {
     size?: number;
     width?: number;
     color?: ColorPropsValue;

package/dist/esm/components/loadingIndicator/loadingIndicator.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-import { classnames } from '../../utils';
+import { clsx } from '../../utils';
 import { classes, useStyle } from './loadingIndicator.style';
 import { memo } from 'react';
 export const LoadingIndicator = memo(({ size, width = 2, color = 'primary', ...props }) => {
-    return (_jsx("div", { ...props, css: useStyle({ color, width }), className: classnames(classes.root, props.className), style: {
+    return (_jsx("div", { ...props, css: useStyle({ color: color || 'primary', width }), className: clsx(classes.root, props.className), style: {
             width: size ?? '1em',
             height: size ?? '1em',
             ...props.style

package/dist/esm/components/loadingIndicator/loadingIndicator.style.js

@@ -17,7 +17,7 @@ export function useStyle({ color, width }) {
                 border-radius: 50%;
                 border: ${borderWidth}px solid;
                 border-color: ${borderColor} transparent;
-                animation: ${spinning} 1.2s infinite;
+                animation: ${spinning} 1.25s infinite;
             }
         `;
     }, [colorValue, borderWidth]);

package/dist/esm/components/loadingMask/loadingMask.js

@@ -3,7 +3,7 @@ import { memo } from 'react';
 import { classes, style } from './loadingMask.style';
 import { LoadingIndicator } from '../loadingIndicator';
 import { Progress } from '../progress';
-import { classnames, useDerivedState } from '../../utils';
+import { clsx, useDerivedState } from '../../utils';
 import { Backdrop } from '../backdrop';
 export const LoadingMask = memo(({ open = false, text = '加载中...', progress, color, indicatorProps, progressProps, ...props }) => {
     const [visible, setVisible] = useDerivedState((prevLoading) => {
@@ -16,7 +16,7 @@ export const LoadingMask = memo(({ open = false, text = '加载中...', progress
     };
     const showProgress = typeof progress === 'number';
     return open || visible.current
-        ? _jsxs(Backdrop, { variant: "light", ...props, css: style, open: open, className: classnames(classes.root, props.className), onExited: onExited, "data-show-progress": showProgress, children: [_jsxs("div", { className: classes.indicator, children: [_jsx(LoadingIndicator, { size: showProgress ? 14 : 30, width: showProgress ? 2 : 3, color: color, ...indicatorProps }), _jsx("div", { className: classes.text, children: text })] }), showProgress &&
+        ? _jsxs(Backdrop, { variant: "light", ...props, css: style, open: open, className: clsx(classes.root, props.className), onExited: onExited, "data-show-progress": showProgress, children: [_jsxs("div", { className: classes.indicator, children: [_jsx(LoadingIndicator, { size: showProgress ? 14 : 30, width: showProgress ? 2 : 3, color: color, ...indicatorProps }), _jsx("div", { className: classes.text, children: text })] }), showProgress &&
                     _jsx(Progress, { className: classes.progress, value: progress, ...progressProps })] })
         : null;
 });

package/dist/esm/components/menu/menu.d.ts

@@ -1,5 +1,5 @@
 import { ReactElement } from 'react';
-import { DIVProps, Id, Obj, SelectableProps, Size } from '../../types';
+import { DivProps, Id, Obj, SelectableProps, Size } from '../../types';
 import { MenuItemProps } from '../menuItem';
 export type ForwardProps = {
     size?: Size;
@@ -10,7 +10,7 @@ export type ForwardProps = {
 export interface ItemPropType extends Omit<MenuItemProps, 'children'>, Obj {
     children?: ItemPropType[];
 }
-interface MenuBaseProps<I extends ItemPropType, V extends Id = Id> extends ForwardProps, Omit<DIVProps, 'defaultValue' | 'onChange'> {
+interface MenuBaseProps<I extends ItemPropType, V extends Id = Id> extends ForwardProps, Omit<DivProps, 'defaultValue' | 'onChange'> {
     items?: I[];
     primaryKey?: keyof I;
     labelKey?: keyof I;

package/dist/esm/components/menu/menu.js

@@ -12,7 +12,7 @@ export function useMenuContext() {
     return { size, ellipsis, indent, ...context };
 }
 export const Menu = memo(({ items, primaryKey = 'value', labelKey = 'label', childrenKey = 'children', defaultExpanded = [], expanded, onExpandedChange, multiple, defaultValue, value, onChange, 
-// 以下属性传递给<MenuItem />
+// 以下属性传递给<MenuItem/>
 size = 'large', showCheckbox, ellipsis, indent, ...props }) => {
     const [innerExpanded, setInnerExpanded] = useControlled(defaultExpanded, expanded);
     const expandedSet = useMemo(() => {
@@ -31,10 +31,10 @@ size = 'large', showCheckbox, ellipsis, indent, ...props }) => {
     };
     return (_jsx("div", { ...props, css: style, children: _jsx(MenuContext, { value: useMemo(() => ({
                 inMenu: true,
-                expandedSet, setExpanded, multiple, selected: innerValue.current, toggleSelected,
+                expandedSet, setExpanded, multiple, selected: innerValue, toggleSelected,
                 size, showCheckbox, ellipsis, indent
             }), [
-                expandedSet, multiple, innerValue.current,
+                expandedSet, multiple, innerValue,
                 size, showCheckbox, ellipsis, indent
             ]), children: props.children ?? renderItems(items) }) }));
 });

package/dist/esm/components/menuItem/menuItem.d.ts

@@ -1,7 +1,7 @@
 import { ReactNode } from 'react';
-import { ColorPropsValue, DIVProps, Size } from '../../types';
+import { ColorPropsValue, DivProps, Size } from '../../types';
 import { CheckboxProps } from '../checkbox';
-export interface MenuItemProps extends Omit<DIVProps, 'prefix'> {
+export interface MenuItemProps extends Omit<DivProps, 'prefix'> {
     value?: string | number;
     size?: Size;
     color?: ColorPropsValue;

package/dist/esm/components/menuItem/menuItem.js

@@ -1,12 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@emotion/react/jsx-runtime";
 import { Children, cloneElement, isValidElement, memo } from 'react';
 import { menuListPadding, childrenStyle, classes, paddingHorizontal, useStyle } from './menuItem.style';
-import { classnames, isUnset, toArray, useControlled } from '../../utils';
+import { clsx, isUnset, toArray, useControlled } from '../../utils';
 import { Checkbox } from '../checkbox';
 import { usePopperContext } from '../popper';
-import { CaretDownOutlined } from '@ant-design/icons';
 import { useMenuContext } from '../menu';
 import { Collapse } from '../transitionBase';
+import { Icon } from '../..';
+import { faChevronDown } from '@fortawesome/free-solid-svg-icons/faChevronDown';
 export const MenuItem = memo(({ value, size, color = 'primary', emphasized = false, selected, focused = false, disabled = false, showCheckbox, checkboxProps, ellipsis, prefix, label, suffix, searchToken, _level = 0, indent, expandIcon, defaultExpanded = false, expanded, onExpandedChange, ...props }) => {
     const context = useMenuContext();
     size ??= context.size;
@@ -39,14 +40,14 @@ export const MenuItem = memo(({ value, size, color = 'primary', emphasized = fal
             return;
         }
         if (!expandIcon) {
-            return (_jsx("div", { className: classes.arrow, "data-open": innerExpanded.current, children: _jsx(CaretDownOutlined, {}) }));
+            return (_jsx("div", { className: classes.arrow, "data-open": innerExpanded.current, children: _jsx(Icon, { icon: faChevronDown }) }));
         }
         if (typeof expandIcon === 'function') {
             return expandIcon(innerExpanded.current);
         }
         return expandIcon;
     };
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { ...props, css: useStyle({ color }), className: classnames(classes.root, props.className), style: {
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { ...props, css: useStyle({ color: color || 'primary' }), className: clsx(classes.root, props.className), style: {
                     paddingLeft: _level > 0
                         ? _level * indent + paddingHorizontal[size] - menuListPadding
                         : void 0,

package/dist/esm/components/menuItem/menuItem.style.d.ts

@@ -1,7 +1,7 @@
 import { MenuItemProps } from './menuItem';
 export declare const classes: {
-    content: string;
     children: string;
+    content: string;
     prefix: string;
     checkbox: string;
     suffix: string;

package/dist/esm/components/menuItem/menuItem.style.js

@@ -28,22 +28,24 @@ export function useStyle({ color }) {
         return css `
             display: flex;
             align-items: center;
-            gap: ${spacing[2]}px;
+            gap: ${spacing[3]}px;
             border-radius: ${borderRadius}px;
             cursor: pointer;
             color: ${text.primary};
-        
             padding: ${paddingHorizontal.medium}px 12px;
+            -webkit-tap-highlight-color: transparent;
             
             &[data-size=small] {
+                gap: ${spacing[2]}px;
                 padding: ${paddingHorizontal.small}px 6px;
             }
         
             &[data-size=large] {
+                gap: ${spacing[4]}px;
                 padding: ${paddingHorizontal.large}px 15px;
             }
         
-            transition: background-color .2s ${easing.easeOut};
+            transition: background-color .25s ${easing.easeOut};
         
             &:hover,
             &[data-focused=true] {
@@ -129,7 +131,7 @@ export function useStyle({ color }) {
 
             .${classes.arrow} {
                 color: ${text.placeholder};
-                transition: transform .2s ${easing.easeOut};
+                transition: transform .25s ${easing.easeOut};
         
                 &[data-open=true] {
                     transform: rotate(180deg);

package/dist/esm/components/modal/modal.js

@@ -1,20 +1,23 @@
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-import { useMemo } from 'react';
+import { useMemo, useRef } from 'react';
 import { OverlayBase, overlayBaseTransitionDuration } from '../overlayBase';
 import { classes, style } from './modal.style';
-import { classnames } from '../../utils';
+import { clsx } from '../../utils';
 import { Grow } from '../transitionBase';
 import { useTheme } from '../theme';
+import { useEventDelegation } from '../app/globalEventDelegation';
 export function Modal({ modalProps, ...props }) {
     const { zoom } = useTheme();
-    const transformOrigin = useMemo(() => {
-        if (props.open && typeof event === 'object' && 'clientX' in event && 'clientY' in event) {
-            return `${event.clientX / zoom}px ${event.clientY / zoom}px`;
+    const transformOrigin = useRef(void 0);
+    const eventDelegation = useEventDelegation();
+    useMemo(() => {
+        const e = eventDelegation.current || event;
+        if (props.open && typeof e === 'object' && e.clientX && e.clientY) {
+            transformOrigin.current = `${e.clientX / zoom}px ${e.clientY / zoom}px`;
         }
-        return;
     }, [props.open, zoom]);
-    return (_jsx(OverlayBase, { ...props, css: style, className: classnames(classes.root, props.className), children: _jsx(Grow, { timeout: overlayBaseTransitionDuration, ...modalProps, in: props.open, className: classnames(classes.modal, modalProps?.className), style: {
-                transformOrigin,
+    return (_jsx(OverlayBase, { ...props, css: style, className: clsx(classes.root, props.className), children: _jsx(Grow, { timeout: overlayBaseTransitionDuration, ...modalProps, in: props.open, className: clsx(classes.modal, modalProps?.className), style: {
+                transformOrigin: transformOrigin.current,
                 ...modalProps?.style
             }, children: props.children }) }));
 }

package/dist/esm/components/optionsBase/optionsBase.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-import { useMemo, memo, Children, isValidElement, cloneElement } from 'react';
+import { useMemo, memo, Children, isValidElement, cloneElement, useRef } from 'react';
 import { Highlight } from '../highlight';
 import { MenuItem } from '../menuItem';
 import { Placeholder } from '../placeholder';
-import { classnames, isSelected, useKeyboard, useSync } from '../../utils';
+import { clsx, isSelected, useKeyboard, useSync } from '../../utils';
 import { classes, style } from './optionsBase.style';
 import { Loading } from '../loading';
 import { usePopperContext, useScrollToSelected } from '../popper';
@@ -64,7 +64,8 @@ searchValue, selectedValue, onToggleSelected, ...props }) => {
      * ------------------------------------------------------------------
      * 渲染部分
      */
-    const selectedItemRef = useScrollToSelected();
+    const scrollerRef = useRef(null);
+    const selectedItemRef = useScrollToSelected(scrollerRef);
     const syncOnToggleSelected = useSync(onToggleSelected);
     const renderedOptions = useMemo(() => {
         if (!filteredOptions?.length) {
@@ -118,5 +119,5 @@ searchValue, selectedValue, onToggleSelected, ...props }) => {
             }));
         });
     }, [filteredOptions, selectedValue, verticalIndex.current, showCheckbox]);
-    return (_jsx(Loading, { ...props, css: style, className: classnames(classes.root, props.className), loading: loading, children: _jsx("div", { className: classes.optionsList, children: renderedOptions }) }));
+    return (_jsx(Loading, { ...props, css: style, className: clsx(classes.root, props.className), open: loading, children: _jsx("div", { ref: scrollerRef, className: classes.optionsList, children: renderedOptions }) }));
 });

package/dist/esm/components/overlayBase/overlayBase.d.ts

@@ -1,9 +1,9 @@
 import React from 'react';
-import { DIVProps, DefineElement } from '../../types';
+import { DivProps, DefineElement } from '../../types';
 import { TransitionBaseProps } from '../transitionBase';
-export interface OverlayBaseProps extends DIVProps {
+export interface OverlayBaseProps extends DivProps {
     /** 模态的容器元素，默认为document.body */
-    container?: DefineElement;
+    container?: DefineElement<HTMLElement>;
     /**
      * @enum {true} 跟随父组件强制渲染
      * @enum {false} 打开时渲染，关闭后销毁

package/dist/esm/components/overlayBase/overlayBase.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { useEffect } from 'react';
 import { classes, style } from './overlayBase.style';
-import { classnames, useDerivedState } from '../../utils';
+import { clsx, useDerivedState } from '../../utils';
 import { createPortal } from 'react-dom';
 import { Fade } from '../transitionBase';
 export const overlayBaseTransitionDuration = 300;
@@ -14,16 +14,14 @@ export function OverlayBase({ container, forceRender, open, onMaskClick, singleL
     }, [open, forceRender]);
     const containerEl = (typeof container === 'function' ? container() : container) || document.body;
     useEffect(() => {
-        const scrollable = typeof container === 'undefined' ? document.documentElement : containerEl;
-        if (open) {
-            removeFocusOnOpen && document.activeElement?.blur?.();
-            scrollable.style.overflow = 'hidden';
-            return () => {
-                scrollable.style.overflow = '';
-            };
+        if (!open) {
+            return;
         }
-        scrollable.style.overflow = '';
-        return;
+        removeFocusOnOpen && document.activeElement?.blur?.();
+        containerEl.style.overflow = 'hidden';
+        return () => {
+            containerEl.style.overflow = '';
+        };
     }, [open]);
     const clickHandler = (e) => {
         maskProps?.onClick?.(e);
@@ -38,5 +36,5 @@ export function OverlayBase({ container, forceRender, open, onMaskClick, singleL
         onClosed?.();
         forceRender === false && setShouldRender(false);
     };
-    return shouldRender.current && createPortal(_jsxs("div", { ...props, css: style, className: classnames(classes.root, props.className), "data-open": open, "data-custom-container": typeof container !== 'undefined', children: [_jsx(Fade, { timeout: overlayBaseTransitionDuration, ...maskProps, in: open, className: classnames(classes.mask, maskProps?.className), onClick: clickHandler, onEntered: onEntered, onExited: onExited }), props.children] }), containerEl);
+    return shouldRender.current && createPortal(_jsxs("div", { ...props, css: style, className: clsx(classes.root, props.className), "data-open": open, "data-custom-container": typeof container !== 'undefined', children: [_jsx(Fade, { timeout: overlayBaseTransitionDuration, ...maskProps, in: open, className: clsx(classes.mask, maskProps?.className), onClick: clickHandler, onEntered: onEntered, onExited: onExited }), props.children] }), containerEl);
 }

package/dist/esm/components/pagination/counter.d.ts

@@ -1,4 +1,4 @@
-import { DIVProps } from '../../types';
-export interface PaginationCounterProps extends DIVProps {
+import { DivProps } from '../../types';
+export interface PaginationCounterProps extends DivProps {
 }
 export declare const PaginationCounter: import("react").MemoExoticComponent<(props: PaginationCounterProps) => import("@emotion/react/jsx-runtime").JSX.Element>;

package/dist/esm/components/pagination/counter.js

@@ -1,11 +1,11 @@
 import { jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { memo } from 'react';
-import { classnames } from '../../utils';
+import { clsx } from '../../utils';
 import { classes } from './pagination.style';
 import { usePaginationContext } from './pagination';
 export const PaginationCounter = memo((props) => {
     const { total, page, pageSize } = usePaginationContext();
     const start = (page - 1) * pageSize + 1;
     const end = Math.min(start + pageSize - 1, total);
-    return (_jsxs("div", { ...props, className: classnames(classes.counter, props.className), children: ["\u7B2C ", start, "-", end, " \u6761/\u5171 ", total, " \u6761"] }));
+    return (_jsxs("div", { ...props, className: clsx(classes.counter, props.className), children: ["\u7B2C ", start, "-", end, " \u6761/\u5171 ", total, " \u6761"] }));
 });

package/dist/esm/components/pagination/index.d.ts

@@ -1 +1,5 @@
 export * from './pagination';
+export * from './counter';
+export * from './jumper';
+export * from './pager';
+export * from './sizer';