@canlooks/can-ui 0.0.25 → 0.0.26

package/dist/cjs/components/grid/grid.style.js

@@ -10,7 +10,7 @@ exports.classes = (0, utils_1.defineClasses)('grid', [
 ]);
 function useContainerStyle({ columnCount, columnGap, rowGap }) {
     return (0, utils_1.useCss)(theme => (0, react_1.css) `
-        ${(0, utils_1.responsiveVariables)(theme, k => `
+        ${(0, utils_1.responsiveVariables)(theme.breakpoints, k => `
             ${k in columnCount ? `--grid-columnCount: ${columnCount[k]}` : ''};
             ${k in columnGap ? `--grid-column-gap: ${columnGap[k]}px` : ''};
             ${k in rowGap ? `--grid-row-gap: ${rowGap[k]}px` : ''};
@@ -22,7 +22,7 @@ function useContainerStyle({ columnCount, columnGap, rowGap }) {
 }
 function useItemStyle({ span, offset }) {
     return (0, utils_1.useCss)(theme => (0, react_1.css) `
-        ${(0, utils_1.responsiveVariables)(theme, k => `
+        ${(0, utils_1.responsiveVariables)(theme.breakpoints, k => `
             ${k in span ? `--grid-item-span: ${span[k]}` : ''};
             ${k in offset ? `--grid-item-offset: ${offset[k]}` : ''};
         `)}

package/dist/cjs/components/grid/gridItem.d.ts

@@ -1,7 +1,9 @@
-import { ResponsiveProp } from '../../types';
+import { MergeProps, ResponsiveProp } from '../../types';
 import { TransportStyleProps } from '../transportStyle';
-export interface GridItemProps extends TransportStyleProps {
+import { ElementType, ReactElement } from 'react';
+export type GridItemOwnProps = {
     span?: ResponsiveProp;
     offset?: ResponsiveProp;
-}
-export declare function GridItem({ span, offset, ...props }: GridItemProps): import("@emotion/react/jsx-runtime").JSX.Element;
+};
+export type GridItemProps<C extends ElementType = 'div'> = MergeProps<GridItemOwnProps, TransportStyleProps<C>>;
+export declare const GridItem: <C extends ElementType = 'div'>(props: GridItemProps<C>) => ReactElement;

package/dist/cjs/components/grid/gridItem.js

@@ -1,12 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.GridItem = GridItem;
+exports.GridItem = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const utils_1 = require("../../utils");
 const grid_style_1 = require("./grid.style");
 const transportStyle_1 = require("../transportStyle");
-function GridItem({ span = { xs: 1 }, offset = { xs: 0 }, ...props }) {
+const GridItem = ({ span = { xs: 1 }, offset = { xs: 0 }, ...props }) => {
     span = (0, utils_1.toResponsiveValue)(span);
     offset = (0, utils_1.toResponsiveValue)(offset);
-    return ((0, jsx_runtime_1.jsx)(transportStyle_1.TransportStyle, { ...props, css: (0, grid_style_1.useItemStyle)({ span, offset }), className: (0, utils_1.classnames)(grid_style_1.classes.item, props.className) }));
-}
+    return ((0, jsx_runtime_1.jsx)(transportStyle_1.TransportStyle, { ...props, css: (0, grid_style_1.useItemStyle)({ span, offset }), className: (0, utils_1.clsx)(grid_style_1.classes.item, props.className) }));
+};
+exports.GridItem = GridItem;

package/dist/cjs/components/highlight/highlight.d.ts

@@ -5,5 +5,7 @@ export type HighlightProps = {
     highlightStyle?: CSSProperties;
     renderHighlight?: (text: string) => ReactNode;
     children?: string;
+    /** @alias {@link children} */
+    content?: string;
 };
-export declare const Highlight: import("react").MemoExoticComponent<({ keywords, highlightClassName, highlightStyle, renderHighlight, children }: HighlightProps) => string | ReactNode[] | undefined>;
+export declare const Highlight: import("react").MemoExoticComponent<({ keywords, highlightClassName, highlightStyle, renderHighlight, content, children, }: HighlightProps) => string | ReactNode[] | undefined>;

package/dist/cjs/components/highlight/highlight.js

@@ -5,7 +5,7 @@ const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const react_1 = require("react");
 const typography_1 = require("../typography");
 const theme_1 = require("../theme");
-exports.Highlight = (0, react_1.memo)(({ keywords, highlightClassName, highlightStyle, renderHighlight, children }) => {
+exports.Highlight = (0, react_1.memo)(({ keywords, highlightClassName, highlightStyle, renderHighlight, content, children = content, }) => {
     const { colors } = (0, theme_1.useTheme)();
     if (!children) {
         return children;

package/dist/cjs/components/image/image.d.ts

@@ -1,19 +1,24 @@
-import React, { CSSProperties, ReactNode } from 'react';
-import { DIVProps } from '../../types';
-import { ImagePreviewProps } from './imagePreview';
-export interface ImageProps extends DIVProps {
+import React, { CSSProperties, ReactNode, JSX, ReactElement } from 'react';
+import { DivProps } from '../../types';
+import { ImagePreview, ImagePreviewProps } from './imagePreview';
+export interface ImageProps extends DivProps {
     src?: string;
     fallback?: string;
-    onError?: React.ReactEventHandler;
+    onLoad?: JSX.IntrinsicElements['img']['onLoad'];
+    onError?: JSX.IntrinsicElements['img']['onError'];
+    renderLoading?: ReactNode;
     alt?: string;
     width?: string | number;
     height?: string | number;
     objectFit?: CSSProperties['objectFit'];
     objectPosition?: CSSProperties['objectPosition'];
-    imgProps?: React.JSX.IntrinsicElements['img'];
+    imgProps?: JSX.IntrinsicElements['img'];
     actions?: ReactNode;
     previewable?: boolean;
     previewProps?: ImagePreviewProps;
     onPreview?(e: React.MouseEvent<HTMLDivElement>): void;
 }
-export declare const Image: React.MemoExoticComponent<({ src, fallback, onError, alt, width, height, objectFit, objectPosition, imgProps, actions, previewable, previewProps, onPreview, ...props }: ImageProps) => import("@emotion/react/jsx-runtime").JSX.Element>;
+export declare const Image: {
+    (props: ImageProps): ReactElement;
+    Preview: typeof ImagePreview;
+};

package/dist/cjs/components/image/image.js

@@ -5,13 +5,28 @@ const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const react_1 = require("react");
 const image_style_1 = require("./image.style");
 const utils_1 = require("../../utils");
-const icons_1 = require("@ant-design/icons");
 const imagePreview_1 = require("./imagePreview");
-exports.Image = (0, react_1.memo)(({ src, fallback, onError, alt = '', width, height, objectFit = 'cover', objectPosition = 'center', imgProps, actions, previewable = true, previewProps, onPreview, ...props }) => {
+const __1 = require("../..");
+const faEye_1 = require("@fortawesome/free-regular-svg-icons/faEye");
+exports.Image = (0, react_1.memo)(({ src, fallback, onLoad, onError, renderLoading, alt = '', width, height, objectFit = 'cover', objectPosition = 'center', imgProps, actions, previewable = true, previewProps, onPreview, ...props }) => {
+    const imgRef = (0, react_1.useRef)(null);
+    const [loading, setLoading] = (0, utils_1.useDerivedState)(() => {
+        return renderLoading !== false && renderLoading !== null;
+    }, [src]);
+    const loadHandler = (e) => {
+        imgProps?.onError?.(e);
+        onLoad?.(e);
+        setLoading(false);
+    };
+    (0, react_1.useEffect)(() => {
+        console.log(52, imgRef.current.complete);
+    }, []);
     const [failed, setFailed] = (0, utils_1.useDerivedState)(() => !src, [src]);
     const errorHandler = (e) => {
+        imgProps?.onError?.(e);
         onError?.(e);
-        !failed.current && setFailed(true);
+        setFailed(true);
+        setLoading(false);
     };
     const [previewOpen, setPreviewOpen] = (0, utils_1.useControlled)(!!previewProps?.defaultOpen, previewProps?.open, previewProps?.onOpenChange);
     const previewHandler = (e) => {
@@ -23,15 +38,17 @@ exports.Image = (0, react_1.memo)(({ src, fallback, onError, alt = '', width, he
     };
     const renderedActions = (() => {
         if (typeof actions === 'undefined' && previewable) {
-            return ((0, jsx_runtime_1.jsxs)("div", { className: image_style_1.classes.previewButton, onClick: previewHandler, children: [(0, jsx_runtime_1.jsx)(icons_1.EyeOutlined, {}), (0, jsx_runtime_1.jsx)("div", { children: "\u9884\u89C8" })] }));
+            return ((0, jsx_runtime_1.jsxs)("div", { className: image_style_1.classes.previewButton, onClick: previewHandler, children: [(0, jsx_runtime_1.jsx)(__1.Icon, { icon: faEye_1.faEye }), (0, jsx_runtime_1.jsx)("div", { children: "\u9884\u89C8" })] }));
         }
         return actions;
     })();
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { ...props, css: image_style_1.style, className: (0, utils_1.classnames)(image_style_1.classes.root, props.className), "data-error": failed.current, children: [props.children, (0, jsx_runtime_1.jsx)("img", { className: image_style_1.classes.img, src: failed.current ? fallback : src, alt: alt, width: width, height: height, ...imgProps, style: {
-                            objectFit,
-                            objectPosition,
-                            ...imgProps?.style
-                        }, onError: errorHandler }), !!renderedActions && !failed.current &&
-                        (0, jsx_runtime_1.jsx)("div", { className: image_style_1.classes.mask, children: renderedActions })] }), previewable && src &&
+    return ((0, jsx_runtime_1.jsxs)("div", { ...props, css: image_style_1.style, className: (0, utils_1.clsx)(image_style_1.classes.root, props.className), "data-error": failed.current, children: [props.children, (0, jsx_runtime_1.jsx)("img", { alt: alt, width: width, height: height, ...imgProps, ref: (0, utils_1.cloneRef)(imgRef, imgProps?.ref), className: (0, utils_1.clsx)(image_style_1.classes.img, imgProps?.className), src: failed.current ? fallback : src, style: {
+                    objectFit,
+                    objectPosition,
+                    ...imgProps?.style
+                }, onLoad: loadHandler, onError: errorHandler }), loading.current &&
+                (renderLoading ?? (0, jsx_runtime_1.jsx)(__1.Skeleton, { className: image_style_1.classes.skeleton })), !!renderedActions && !failed.current &&
+                (0, jsx_runtime_1.jsx)("div", { className: image_style_1.classes.mask, children: renderedActions }), previewable && src &&
                 (0, jsx_runtime_1.jsx)(imagePreview_1.ImagePreview, { src: [src], ...previewProps, open: previewOpen.current, onOpenChange: setPreviewOpen })] }));
 });
+exports.Image.Preview = imagePreview_1.ImagePreview;

package/dist/cjs/components/image/image.style.d.ts

@@ -1,6 +1,7 @@
 export declare const classes: {
     img: string;
     mask: string;
+    skeleton: string;
     previewButton: string;
 } & {
     root: string;

package/dist/cjs/components/image/image.style.js

@@ -7,6 +7,7 @@ const utils_1 = require("../../utils");
 const color_1 = tslib_1.__importDefault(require("color"));
 exports.classes = (0, utils_1.defineClasses)('image', [
     'img',
+    'skeleton',
     'mask',
     'previewButton'
 ]);
@@ -27,6 +28,12 @@ exports.style = (0, utils_1.defineCss)(({ background, easing, spacing }) => {
                 opacity: 0;
             }
         }
+
+        .${exports.classes.skeleton} {
+            height: 100%;
+            position: absolute;
+            inset: 0;
+        }
         
         .${exports.classes.mask} {
             background-color: ${maskBg};
@@ -36,7 +43,7 @@ exports.style = (0, utils_1.defineCss)(({ background, easing, spacing }) => {
             align-items: center;
             justify-content: center;
             opacity: 0;
-            transition: opacity .2s ${easing.easeOut};
+            transition: opacity .25s ${easing.easeOut};
 
             .${exports.classes.previewButton} {
                 position: absolute;

package/dist/cjs/components/image/imagePreview.d.ts

@@ -1,6 +1,6 @@
-import { Ref, ReactNode } from 'react';
+import { ReactNode } from 'react';
 import { ModalProps } from '../modal';
-import { ReactZoomPanPinchContentRef, ReactZoomPanPinchProps } from 'react-zoom-pan-pinch';
+import { ReactZoomPanPinchProps } from 'react-zoom-pan-pinch';
 export interface ImagePreviewProps extends ModalProps {
     src?: string | string[];
     defaultIndex?: number;
@@ -8,15 +8,14 @@ export interface ImagePreviewProps extends ModalProps {
     onIndexChange?(index: number): void;
     defaultOpen?: boolean;
     onOpenChange?(open: boolean): void;
-    /** 是否渲染旋转按钮默认为`true` */
-    showRotate?: boolean;
-    /** 是否渲染放大缩小按钮默认为`true` */
+    /** 是否渲染旋转按钮，默认为`true` */
+    showRotation?: boolean;
+    /** 是否渲染放大缩小按钮，默认为`true` */
     showZoom?: boolean;
-    /** 是否渲染关闭按钮默认为`true`*/
+    /** 是否渲染关闭按钮，默认为`true`*/
     showClose?: boolean;
-    /** 自定义右上角控制按钮 */
+    /** 自定义渲染控制按钮 */
     renderControl?: ReactNode;
     transformWrapperProps?: ReactZoomPanPinchProps;
-    transformWrapperRef?: Ref<ReactZoomPanPinchContentRef>;
 }
-export declare const ImagePreview: import("react").MemoExoticComponent<({ src, defaultIndex, index, onIndexChange, defaultOpen, open, onOpenChange, showRotate, showZoom, showClose, renderControl, transformWrapperProps, transformWrapperRef, ...props }: ImagePreviewProps) => import("@emotion/react/jsx-runtime").JSX.Element>;
+export declare const ImagePreview: import("react").MemoExoticComponent<({ src, defaultIndex, index, onIndexChange, defaultOpen, open, onOpenChange, showRotation, showZoom, showClose, renderControl, transformWrapperProps, ...props }: ImagePreviewProps) => import("@emotion/react/jsx-runtime").JSX.Element>;

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

@@ -6,11 +6,19 @@ const react_1 = require("react");
 const modal_1 = require("../modal");
 const utils_1 = require("../../utils");
 const imagePreview_style_1 = require("./imagePreview.style");
-const icons_1 = require("@ant-design/icons");
 const button_1 = require("../button");
 const react_zoom_pan_pinch_1 = require("react-zoom-pan-pinch");
 const tooltip_1 = require("../tooltip");
-exports.ImagePreview = (0, react_1.memo)(({ src = [], defaultIndex = 0, index, onIndexChange, defaultOpen = false, open, onOpenChange, showRotate = true, showZoom = true, showClose = true, renderControl, transformWrapperProps, transformWrapperRef, ...props }) => {
+const __1 = require("../..");
+const faXmark_1 = require("@fortawesome/free-solid-svg-icons/faXmark");
+const faExpand_1 = require("@fortawesome/free-solid-svg-icons/faExpand");
+const faAngleLeft_1 = require("@fortawesome/free-solid-svg-icons/faAngleLeft");
+const faAngleRight_1 = require("@fortawesome/free-solid-svg-icons/faAngleRight");
+const faArrowRotateLeft_1 = require("@fortawesome/free-solid-svg-icons/faArrowRotateLeft");
+const faArrowRotateRight_1 = require("@fortawesome/free-solid-svg-icons/faArrowRotateRight");
+const faMagnifyingGlassPlus_1 = require("@fortawesome/free-solid-svg-icons/faMagnifyingGlassPlus");
+const faMagnifyingGlassMinus_1 = require("@fortawesome/free-solid-svg-icons/faMagnifyingGlassMinus");
+exports.ImagePreview = (0, react_1.memo)(({ src = [], defaultIndex = 0, index, onIndexChange, defaultOpen = false, open, onOpenChange, showRotation = true, showZoom = true, showClose = true, renderControl, transformWrapperProps, ...props }) => {
     const srcArr = (0, utils_1.toArray)(src);
     const [innerOpen, setInnerOpen] = (0, utils_1.useControlled)(defaultOpen, open, onOpenChange);
     const [innerIndex, setInnerIndex] = (0, utils_1.useControlled)(defaultIndex, index, onIndexChange);
@@ -36,14 +44,14 @@ exports.ImagePreview = (0, react_1.memo)(({ src = [], defaultIndex = 0, index, o
         size: 'large',
         color: 'text'
     };
-    return ((0, jsx_runtime_1.jsx)(modal_1.Modal, { ...props, css: imagePreview_style_1.style, className: (0, utils_1.classnames)(imagePreview_style_1.classes.root, props.className), open: innerOpen.current, maskProps: {
+    return ((0, jsx_runtime_1.jsx)(modal_1.Modal, { ...props, css: imagePreview_style_1.style, className: (0, utils_1.clsx)(imagePreview_style_1.classes.root, props.className), open: innerOpen.current, maskProps: {
             ...props.maskProps,
-            children: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: imagePreview_style_1.classes.control, children: [renderControl, showRotate &&
-                                (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { title: "\u65CB\u8F6C-90\u00B0", children: (0, jsx_runtime_1.jsx)(button_1.Button, { ...commonControlProps, onClick: () => setRotate(rotate - 90), children: (0, jsx_runtime_1.jsx)(icons_1.RotateLeftOutlined, {}) }) }), (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { title: "\u65CB\u8F6C90\u00B0", children: (0, jsx_runtime_1.jsx)(button_1.Button, { ...commonControlProps, onClick: () => setRotate(rotate + 90), children: (0, jsx_runtime_1.jsx)(icons_1.RotateRightOutlined, {}) }) })] }), showZoom &&
-                                (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { title: "\u7F29\u5C0F", children: (0, jsx_runtime_1.jsx)(button_1.Button, { ...commonControlProps, onClick: () => innerTransformWrapperRef.current.zoomOut(), children: (0, jsx_runtime_1.jsx)(icons_1.ZoomOutOutlined, {}) }) }), (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { title: "\u653E\u5927", children: (0, jsx_runtime_1.jsx)(button_1.Button, { ...commonControlProps, onClick: () => innerTransformWrapperRef.current.zoomIn(), children: (0, jsx_runtime_1.jsx)(icons_1.ZoomInOutlined, {}) }) }), (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { title: "\u9002\u5E94\u5C4F\u5E55", children: (0, jsx_runtime_1.jsx)(button_1.Button, { ...commonControlProps, onClick: () => innerTransformWrapperRef.current.resetTransform(), children: (0, jsx_runtime_1.jsx)(icons_1.FullscreenOutlined, {}) }) })] }), showClose &&
-                                (0, jsx_runtime_1.jsx)(button_1.Button, { ...commonControlProps, onClick: () => setInnerOpen(false), children: (0, jsx_runtime_1.jsx)(icons_1.CloseOutlined, {}) })] }), srcArr.length > 1 &&
-                        (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: imagePreview_style_1.classes.swap, children: [(0, jsx_runtime_1.jsx)(button_1.Button, { ...commonControlProps, onClick: prev, children: (0, jsx_runtime_1.jsx)(icons_1.LeftOutlined, {}) }), (0, jsx_runtime_1.jsx)(button_1.Button, { ...commonControlProps, onClick: next, children: (0, jsx_runtime_1.jsx)(icons_1.RightOutlined, {}) })] }), (0, jsx_runtime_1.jsxs)("div", { className: imagePreview_style_1.classes.counter, children: [innerIndex.current + 1, " / ", srcArr.length] })] })] }))
-        }, children: (0, jsx_runtime_1.jsx)(react_zoom_pan_pinch_1.TransformWrapper, { smooth: false, ...transformWrapperProps, ref: (0, utils_1.cloneRef)(transformWrapperRef, innerTransformWrapperRef), minScale: .2, onPanning: (ref, e) => {
+            children: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: imagePreview_style_1.classes.control, children: [renderControl, showRotation &&
+                                (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { title: "\u65CB\u8F6C-90\u00B0", children: (0, jsx_runtime_1.jsx)(button_1.Button, { ...commonControlProps, onClick: () => setRotate(rotate - 90), children: (0, jsx_runtime_1.jsx)(__1.Icon, { icon: faArrowRotateLeft_1.faArrowRotateLeft }) }) }), (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { title: "\u65CB\u8F6C90\u00B0", children: (0, jsx_runtime_1.jsx)(button_1.Button, { ...commonControlProps, onClick: () => setRotate(rotate + 90), children: (0, jsx_runtime_1.jsx)(__1.Icon, { icon: faArrowRotateRight_1.faArrowRotateRight }) }) })] }), showZoom &&
+                                (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { title: "\u7F29\u5C0F", children: (0, jsx_runtime_1.jsx)(button_1.Button, { ...commonControlProps, onClick: () => innerTransformWrapperRef.current.zoomOut(), children: (0, jsx_runtime_1.jsx)(__1.Icon, { icon: faMagnifyingGlassMinus_1.faMagnifyingGlassMinus }) }) }), (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { title: "\u653E\u5927", children: (0, jsx_runtime_1.jsx)(button_1.Button, { ...commonControlProps, onClick: () => innerTransformWrapperRef.current.zoomIn(), children: (0, jsx_runtime_1.jsx)(__1.Icon, { icon: faMagnifyingGlassPlus_1.faMagnifyingGlassPlus }) }) }), (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { title: "\u9002\u5E94\u5C4F\u5E55", children: (0, jsx_runtime_1.jsx)(button_1.Button, { ...commonControlProps, onClick: () => innerTransformWrapperRef.current.resetTransform(), children: (0, jsx_runtime_1.jsx)(__1.Icon, { icon: faExpand_1.faExpand }) }) })] }), showClose &&
+                                (0, jsx_runtime_1.jsx)(button_1.Button, { ...commonControlProps, onClick: () => setInnerOpen(false), children: (0, jsx_runtime_1.jsx)(__1.Icon, { icon: faXmark_1.faXmark }) })] }), srcArr.length > 1 &&
+                        (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: imagePreview_style_1.classes.swap, children: [(0, jsx_runtime_1.jsx)(button_1.Button, { ...commonControlProps, onClick: prev, children: (0, jsx_runtime_1.jsx)(__1.Icon, { icon: faAngleLeft_1.faAngleLeft }) }), (0, jsx_runtime_1.jsx)(button_1.Button, { ...commonControlProps, onClick: next, children: (0, jsx_runtime_1.jsx)(__1.Icon, { icon: faAngleRight_1.faAngleRight }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: imagePreview_style_1.classes.counter, children: [innerIndex.current + 1, " / ", srcArr.length] })] })] }))
+        }, children: (0, jsx_runtime_1.jsx)(react_zoom_pan_pinch_1.TransformWrapper, { smooth: false, ...transformWrapperProps, ref: (0, utils_1.cloneRef)(transformWrapperProps?.ref, innerTransformWrapperRef), minScale: .2, onPanning: (ref, e) => {
                 transformWrapperProps?.onPanning?.(ref, e);
                 isPanning.current = true;
             }, onPanningStop: (ref, e) => {
@@ -51,5 +59,5 @@ exports.ImagePreview = (0, react_1.memo)(({ src = [], defaultIndex = 0, index, o
                 isPanning.current && setTimeout(() => isPanning.current = false);
             }, children: (0, jsx_runtime_1.jsx)(react_zoom_pan_pinch_1.TransformComponent, { wrapperClass: imagePreview_style_1.classes.imageWrapper, contentClass: imagePreview_style_1.classes.image, wrapperProps: {
                     onClick: () => !isPanning.current && setInnerOpen(false)
-                }, children: (0, jsx_runtime_1.jsx)("img", { src: srcArr[innerIndex.current], style: { rotate: rotate + 'deg' }, onLoad: imgLoaded, alt: "" }) }) }) }));
+                }, children: (0, jsx_runtime_1.jsx)("img", { src: srcArr[innerIndex.current], style: { rotate: rotate + 'deg' }, onLoad: imgLoaded, alt: "" }, innerIndex.current) }) }) }));
 });

package/dist/cjs/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/cjs/components/image/imagePreview.style.js

@@ -51,7 +51,7 @@ exports.style = (0, utils_1.defineCss)(({ spacing, easing }) => (0, react_1.css)
     .${exports.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/cjs/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/cjs/components/input/input.js

@@ -6,9 +6,9 @@ const utils_1 = require("../../utils");
 const input_style_1 = require("./input.style");
 const react_1 = require("react");
 const inputBase_1 = require("../inputBase");
-exports.Input = (0, react_1.memo)(({ inputProps, inputRef, widthAdaptable, ...props }) => {
-    return ((0, jsx_runtime_1.jsx)(inputBase_1.InputBase, { ...props, css: input_style_1.style, className: (0, utils_1.classnames)(input_style_1.classes.root, props.className), "data-adaptable": widthAdaptable, children: ({ ref, ...rest }) => {
-            return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("input", { size: 1, ...rest, ...inputProps, ref: (0, utils_1.cloneRef)(ref, inputRef), className: (0, utils_1.classnames)(input_style_1.classes.input, inputProps?.className) }), widthAdaptable &&
-                        (0, jsx_runtime_1.jsx)("span", { className: input_style_1.classes.adaptable, children: rest.value })] }));
+exports.Input = (0, react_1.memo)(({ inputProps, widthAdaptable, ...props }) => {
+    return ((0, jsx_runtime_1.jsx)(inputBase_1.InputBase, { ...props, css: input_style_1.style, className: (0, utils_1.clsx)(input_style_1.classes.root, props.className), "data-adaptable": widthAdaptable, children: inputBaseProps => {
+            return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("input", { size: 1, ...inputBaseProps, ...inputProps, className: (0, utils_1.clsx)(input_style_1.classes.input, inputProps?.className) }), widthAdaptable &&
+                        (0, jsx_runtime_1.jsx)("span", { className: input_style_1.classes.adaptable, children: inputBaseProps.value })] }));
         } }));
 });

package/dist/cjs/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/cjs/components/inputBase/inputBase.js

@@ -6,11 +6,12 @@ const react_1 = require("react");
 const inputBase_style_1 = require("./inputBase.style");
 const utils_1 = require("../../utils");
 const theme_1 = require("../theme");
-const icons_1 = require("@ant-design/icons");
 const button_1 = require("../button");
 const loadingIndicator_1 = require("../loadingIndicator");
+const __1 = require("../..");
+const faCircleXmark_1 = require("@fortawesome/free-solid-svg-icons/faCircleXmark");
 exports.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 = (0, theme_1.useTheme)();
     size ??= theme.size;
@@ -46,12 +47,14 @@ min = -Infinity, max = Infinity, step, precision, placeholder, disabled, readOnl
             changeHandler(e);
         }
     };
-    return ((0, jsx_runtime_1.jsxs)("div", { ...props, css: (0, inputBase_style_1.useStyle)({ color }), className: (0, utils_1.classnames)(inputBase_style_1.classes.root, props.className), "data-variant": variant, "data-size": size, "data-shape": shape, onClick: wrapClickHandler, 
+    return ((0, jsx_runtime_1.jsxs)("div", { ...props, css: (0, inputBase_style_1.useStyle)({ color: color || 'primary' }), className: (0, utils_1.clsx)(inputBase_style_1.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 &&
                 (0, jsx_runtime_1.jsx)("div", { className: inputBase_style_1.classes.prefix, children: prefix }), (0, jsx_runtime_1.jsx)("div", { className: inputBase_style_1.classes.content, children: children({
                     ref: innerInputRef,
@@ -73,6 +76,6 @@ min = -Infinity, max = Infinity, step, precision, placeholder, disabled, readOnl
                     onKeyDown: (e) => e.key === 'Enter' && blurHandler(e)
                 }) }), loading &&
                 (0, jsx_runtime_1.jsx)(loadingIndicator_1.LoadingIndicator, {}), clearable && !disabled && !readOnly && (Array.isArray(innerValue.current) ? !!innerValue.current.length : !!innerValue.current) &&
-                (0, jsx_runtime_1.jsx)(button_1.Button, { className: inputBase_style_1.classes.clear, variant: "plain", color: "disabled", onClick: clear, children: (0, jsx_runtime_1.jsx)(icons_1.CloseCircleFilled, {}) }), !!suffix &&
+                (0, jsx_runtime_1.jsx)(button_1.Button, { className: inputBase_style_1.classes.clear, variant: "plain", color: "text.disabled", onClick: clear, children: (0, jsx_runtime_1.jsx)(__1.Icon, { icon: faCircleXmark_1.faCircleXmark }) }), !!suffix &&
                 (0, jsx_runtime_1.jsx)("div", { className: inputBase_style_1.classes.suffix, children: suffix })] }));
 });

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

@@ -17,7 +17,7 @@ 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] {
@@ -72,7 +72,7 @@ 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)};` : ''}
             }
     
@@ -104,12 +104,12 @@ 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%;
                 }
@@ -157,9 +157,9 @@ 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;
             }
     
@@ -184,9 +184,9 @@ 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/cjs/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/cjs/components/loading/loading.js

@@ -6,6 +6,6 @@ const react_1 = require("react");
 const utils_1 = require("../../utils");
 const loading_style_1 = require("./loading.style");
 const loadingMask_1 = require("../loadingMask");
-exports.Loading = (0, react_1.memo)(({ open = false, text = '加载中...', progress, color, indicatorProps, progressProps, ...props }) => {
-    return ((0, jsx_runtime_1.jsxs)("div", { ...props, css: loading_style_1.style, className: (0, utils_1.classnames)(loading_style_1.classes.root, props.className), children: [(0, jsx_runtime_1.jsx)("div", { className: loading_style_1.classes.container, children: props.children }), (0, jsx_runtime_1.jsx)(loadingMask_1.LoadingMask, { open, text, progress, color, indicatorProps, progressProps, className: loading_style_1.classes.mask })] }));
+exports.Loading = (0, react_1.memo)(({ containerProps, open = false, text = '加载中...', progress, color, indicatorProps, progressProps, ...props }) => {
+    return ((0, jsx_runtime_1.jsxs)("div", { ...props, css: loading_style_1.style, className: (0, utils_1.clsx)(loading_style_1.classes.root, props.className), children: [(0, jsx_runtime_1.jsx)("div", { ...containerProps, className: (0, utils_1.clsx)(loading_style_1.classes.container, containerProps?.className), children: props.children }), (0, jsx_runtime_1.jsx)(loadingMask_1.LoadingMask, { open, text, progress, color, indicatorProps, progressProps, className: loading_style_1.classes.mask })] }));
 });

package/dist/cjs/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/cjs/components/loadingIndicator/loadingIndicator.js

@@ -6,7 +6,7 @@ const utils_1 = require("../../utils");
 const loadingIndicator_style_1 = require("./loadingIndicator.style");
 const react_1 = require("react");
 exports.LoadingIndicator = (0, react_1.memo)(({ size, width = 2, color = 'primary', ...props }) => {
-    return ((0, jsx_runtime_1.jsx)("div", { ...props, css: (0, loadingIndicator_style_1.useStyle)({ color, width }), className: (0, utils_1.classnames)(loadingIndicator_style_1.classes.root, props.className), style: {
+    return ((0, jsx_runtime_1.jsx)("div", { ...props, css: (0, loadingIndicator_style_1.useStyle)({ color: color || 'primary', width }), className: (0, utils_1.clsx)(loadingIndicator_style_1.classes.root, props.className), style: {
             width: size ?? '1em',
             height: size ?? '1em',
             ...props.style

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

@@ -22,7 +22,7 @@ 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/cjs/components/loadingMask/loadingMask.js

@@ -19,7 +19,7 @@ exports.LoadingMask = (0, react_1.memo)(({ open = false, text = '加载中...',
     };
     const showProgress = typeof progress === 'number';
     return open || visible.current
-        ? (0, jsx_runtime_1.jsxs)(backdrop_1.Backdrop, { variant: "light", ...props, css: loadingMask_style_1.style, open: open, className: (0, utils_1.classnames)(loadingMask_style_1.classes.root, props.className), onExited: onExited, "data-show-progress": showProgress, children: [(0, jsx_runtime_1.jsxs)("div", { className: loadingMask_style_1.classes.indicator, children: [(0, jsx_runtime_1.jsx)(loadingIndicator_1.LoadingIndicator, { size: showProgress ? 14 : 30, width: showProgress ? 2 : 3, color: color, ...indicatorProps }), (0, jsx_runtime_1.jsx)("div", { className: loadingMask_style_1.classes.text, children: text })] }), showProgress &&
+        ? (0, jsx_runtime_1.jsxs)(backdrop_1.Backdrop, { variant: "light", ...props, css: loadingMask_style_1.style, open: open, className: (0, utils_1.clsx)(loadingMask_style_1.classes.root, props.className), onExited: onExited, "data-show-progress": showProgress, children: [(0, jsx_runtime_1.jsxs)("div", { className: loadingMask_style_1.classes.indicator, children: [(0, jsx_runtime_1.jsx)(loadingIndicator_1.LoadingIndicator, { size: showProgress ? 14 : 30, width: showProgress ? 2 : 3, color: color, ...indicatorProps }), (0, jsx_runtime_1.jsx)("div", { className: loadingMask_style_1.classes.text, children: text })] }), showProgress &&
                     (0, jsx_runtime_1.jsx)(progress_1.Progress, { className: loadingMask_style_1.classes.progress, value: progress, ...progressProps })] })
         : null;
 });

package/dist/cjs/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/cjs/components/menu/menu.js

@@ -16,7 +16,7 @@ function useMenuContext() {
     return { size, ellipsis, indent, ...context };
 }
 exports.Menu = (0, react_1.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] = (0, utils_1.useControlled)(defaultExpanded, expanded);
     const expandedSet = (0, react_1.useMemo)(() => {
@@ -35,10 +35,10 @@ size = 'large', showCheckbox, ellipsis, indent, ...props }) => {
     };
     return ((0, jsx_runtime_1.jsx)("div", { ...props, css: menu_style_1.style, children: (0, jsx_runtime_1.jsx)(MenuContext, { value: (0, react_1.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/cjs/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;