@canlooks/can-ui 0.0.25 → 0.0.27

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

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
-import { DIVProps, Size } from '../../types';
-export interface AccordionProps extends Omit<DIVProps, 'title' | 'prefix'> {
+import { DivProps, Size } from '../../types';
+export interface AccordionProps extends Omit<DivProps, 'title' | 'prefix'> {
     size?: Size;
     title?: ReactNode;
     prefix?: ReactNode;

package/dist/cjs/components/accordion/accordion.js

@@ -4,9 +4,10 @@ exports.Accordion = Accordion;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const accordion_style_1 = require("./accordion.style");
 const utils_1 = require("../../utils");
-const icons_1 = require("@ant-design/icons");
 const theme_1 = require("../theme");
 const transitionBase_1 = require("../transitionBase");
+const __1 = require("../..");
+const faCaretRight_1 = require("@fortawesome/free-solid-svg-icons/faCaretRight");
 function Accordion({ size, title, prefix, suffix, expandIcon, defaultExpanded = false, expanded, onExpandedChange, readOnly, disabled, ...props }) {
     const theme = (0, theme_1.useTheme)();
     size ??= theme.size;
@@ -16,13 +17,13 @@ function Accordion({ size, title, prefix, suffix, expandIcon, defaultExpanded =
     };
     const renderExpandIcon = () => {
         if (!expandIcon) {
-            return (0, jsx_runtime_1.jsx)(icons_1.CaretRightOutlined, { className: accordion_style_1.classes.expandIcon });
+            return (0, jsx_runtime_1.jsx)(__1.Icon, { icon: faCaretRight_1.faCaretRight, className: accordion_style_1.classes.expandIcon });
         }
         if (typeof expandIcon === 'function') {
             return expandIcon(innerExpanded.current);
         }
         return expandIcon;
     };
-    return ((0, jsx_runtime_1.jsxs)("div", { ...props, css: accordion_style_1.style, className: (0, utils_1.classnames)(accordion_style_1.classes.root, props.className), "data-size": size, "data-expanded": innerExpanded.current, "data-read-only": readOnly, "data-disabled": disabled, children: [(0, jsx_runtime_1.jsxs)("div", { className: accordion_style_1.classes.titleRow, onClick: toggleExpanded, children: [renderExpandIcon(), !!prefix && (0, jsx_runtime_1.jsx)("div", { className: accordion_style_1.classes.prefix, children: prefix }), (0, jsx_runtime_1.jsx)("div", { className: accordion_style_1.classes.title, children: title }), !!suffix && (0, jsx_runtime_1.jsx)("div", { className: accordion_style_1.classes.suffix, children: suffix })] }), !!props.children &&
+    return ((0, jsx_runtime_1.jsxs)("div", { ...props, css: accordion_style_1.style, className: (0, utils_1.clsx)(accordion_style_1.classes.root, props.className), "data-size": size, "data-expanded": innerExpanded.current, "data-read-only": readOnly, "data-disabled": disabled, children: [(0, jsx_runtime_1.jsxs)("div", { className: accordion_style_1.classes.titleRow, onClick: toggleExpanded, children: [renderExpandIcon(), !!prefix && (0, jsx_runtime_1.jsx)("div", { className: accordion_style_1.classes.prefix, children: prefix }), (0, jsx_runtime_1.jsx)("div", { className: accordion_style_1.classes.title, children: title }), !!suffix && (0, jsx_runtime_1.jsx)("div", { className: accordion_style_1.classes.suffix, children: suffix })] }), !!props.children &&
                 (0, jsx_runtime_1.jsx)(transitionBase_1.Collapse, { in: innerExpanded.current, children: (0, jsx_runtime_1.jsx)("div", { className: accordion_style_1.classes.content, children: props.children }) })] }));
 }

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

@@ -15,18 +15,18 @@ exports.style = (0, utils_1.defineCss)(({ divider, borderRadius, background, spa
     border: 1px solid ${divider};
     border-radius: ${borderRadius}px;
     background-color: ${background.content};
-    transition: margin .2s ${easing.easeOut};
+    transition: margin .25s ${easing.easeOut};
 
     .${exports.classes.titleRow} {
         display: flex;
         align-items: center;
         gap: ${spacing[2]}px;
         padding: 9px ${spacing[5]}px;
-        transition: padding .2s ${easing.easeOut};
+        transition: padding .25s ${easing.easeOut};
 
         .${exports.classes.expandIcon} {
             color: ${text.disabled};
-            transition: transform .2s ${easing.easeOut};
+            transition: transform .25s ${easing.easeOut};
         }
 
         .${exports.classes.title} {

package/dist/cjs/components/actionSheet/actionSheet.js

@@ -27,14 +27,14 @@ exports.ActionSheet = (0, react_1.memo)(({ ref, title, actions, placement = 'bot
         onCancel?.(e);
         close('canceled');
     };
-    return ((0, jsx_runtime_1.jsx)(overlayBase_1.OverlayBase, { ...props, ref: (0, utils_1.cloneRef)(ref, overlayRef), css: actionSheet_style_1.style, className: (0, utils_1.classnames)(actionSheet_style_1.classes.root, props.className), open: innerOpen.current, onMaskClick: onMaskClick, "data-placement": placement, children: (0, jsx_runtime_1.jsxs)(transitionBase_1.Slide, { direction: placementToDirection[placement], ...slideProps, className: (0, utils_1.classnames)(actionSheet_style_1.classes.sheet, slideProps?.className), in: innerOpen.current, children: [!!(title || showConfirm || actions?.length) &&
+    return ((0, jsx_runtime_1.jsx)(overlayBase_1.OverlayBase, { ...props, ref: (0, utils_1.cloneRef)(ref, overlayRef), css: actionSheet_style_1.style, className: (0, utils_1.clsx)(actionSheet_style_1.classes.root, props.className), open: innerOpen.current, onMaskClick: onMaskClick, "data-placement": placement, children: (0, jsx_runtime_1.jsxs)(transitionBase_1.Slide, { direction: placementToDirection[placement], ...slideProps, className: (0, utils_1.clsx)(actionSheet_style_1.classes.sheet, slideProps?.className), in: innerOpen.current, children: [!!(title || showConfirm || actions?.length) &&
                     (0, jsx_runtime_1.jsxs)("div", { className: actionSheet_style_1.classes.card, children: [!!title &&
                                 (0, jsx_runtime_1.jsx)("div", { className: actionSheet_style_1.classes.title, children: title }), showConfirm &&
                                 (0, jsx_runtime_1.jsx)(menuItem_1.MenuItem, { className: actionSheet_style_1.classes.action, size: "large", label: confirmText, ...confirmProps, onClick: e => {
                                         confirmProps?.onClick?.(e);
                                         onConfirm?.(e);
                                         close('confirmed');
-                                    } }), actions?.map((menuItemProps, i) => (0, jsx_runtime_1.jsx)(menuItem_1.MenuItem, { className: (0, utils_1.classnames)(actionSheet_style_1.classes.action, menuItemProps.className), size: "large", ...menuItemProps, onClick: e => {
+                                    } }), actions?.map((menuItemProps, i) => (0, jsx_runtime_1.jsx)(menuItem_1.MenuItem, { className: (0, utils_1.clsx)(actionSheet_style_1.classes.action, menuItemProps.className), size: "large", ...menuItemProps, onClick: e => {
                                     menuItemProps.onClick?.(e);
                                     onAction?.(menuItemProps);
                                     close('action');

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

@@ -1,7 +1,7 @@
 export declare const classes: {
     title: string;
-    action: string;
     sheet: string;
+    action: string;
     card: string;
 } & {
     root: string;

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

@@ -47,7 +47,7 @@ exports.style = (0, utils_1.defineCss)(({ spacing, background, boxShadow, border
         font-size: ${13 / 14}em;
     }
 
-    \.${exports.classes.action} {
+    .${exports.classes.action} {
         border-radius: 0;
 
         &:not(:last-of-type) {

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

@@ -1,6 +1,6 @@
 import React, { ReactNode } from 'react';
-import { ColorPropsValue, DIVProps, Status } from '../../types';
-export interface AlertProps extends Omit<DIVProps, 'title' | 'prefix' | 'children'> {
+import { ColorPropsValue, DivProps, Status } from '../../types';
+export interface AlertProps extends Omit<DivProps, 'title' | 'prefix' | 'children'> {
     variant?: 'filled' | 'outlined' | 'standard';
     status?: Status;
     color?: ColorPropsValue;

package/dist/cjs/components/alert/alert.js

@@ -5,22 +5,22 @@ const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const react_1 = require("react");
 const utils_1 = require("../../utils");
 const alert_style_1 = require("./alert.style");
-const status_1 = require("../status");
 const button_1 = require("../button");
-const icons_1 = require("@ant-design/icons");
 const skeleton_1 = require("../skeleton");
+const faXmark_1 = require("@fortawesome/free-solid-svg-icons/faXmark");
+const __1 = require("../..");
 exports.Alert = (0, react_1.memo)(({ variant = 'standard', status = 'error', color = status, showIcon = true, icon, title, description, prefix, suffix, closable, onClose, loading, ...props }) => {
-    const Icon = status_1.statusMapToIcon[status];
-    return ((0, jsx_runtime_1.jsxs)("div", { ...props, css: (0, alert_style_1.useStyle)({ color }), className: (0, utils_1.classnames)(alert_style_1.classes.root, props.className), "data-variant": variant, children: [showIcon &&
+    return ((0, jsx_runtime_1.jsxs)("div", { ...props, css: (0, alert_style_1.useStyle)({ color: color || 'error' }), className: (0, utils_1.clsx)(alert_style_1.classes.root, props.className), "data-variant": variant, children: [showIcon &&
                 (0, jsx_runtime_1.jsx)("div", { className: alert_style_1.classes.icon, children: loading
                         ? (0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { variant: "circular" })
-                        : icon ?? (0, jsx_runtime_1.jsx)(Icon, {}) }), !loading && !!prefix &&
+                        : icon ?? (0, jsx_runtime_1.jsx)(__1.Icon, { icon: __1.statusMapToIconDefinition[status] }) }), !loading && !!prefix &&
                 (0, jsx_runtime_1.jsx)("div", { className: alert_style_1.classes.prefix, children: prefix }), (0, jsx_runtime_1.jsxs)("div", { className: alert_style_1.classes.content, children: [!!(loading || title) &&
                         (0, jsx_runtime_1.jsx)("div", { className: alert_style_1.classes.title, children: loading
                                 ? (0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { width: "40%" })
-                                : title }), (0, jsx_runtime_1.jsx)("div", { className: alert_style_1.classes.description, children: loading
-                            ? (0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, {})
-                            : description })] }), !loading && !!suffix &&
+                                : title }), !!(loading || description) &&
+                        (0, jsx_runtime_1.jsx)("div", { className: alert_style_1.classes.description, children: loading
+                                ? (0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, {})
+                                : description })] }), !loading && !!suffix &&
                 (0, jsx_runtime_1.jsx)("div", { className: alert_style_1.classes.suffix, children: suffix }), closable &&
-                (0, jsx_runtime_1.jsx)(button_1.Button, { className: alert_style_1.classes.close, variant: "text", shape: "circular", color: variant === 'filled' ? '#fff' : 'text', onClick: onClose, disabled: loading, children: (0, jsx_runtime_1.jsx)(icons_1.CloseOutlined, {}) })] }));
+                (0, jsx_runtime_1.jsx)(button_1.Button, { className: alert_style_1.classes.close, variant: "text", shape: "circular", color: variant === 'filled' ? '#fff' : 'text.secondary', onClick: onClose, disabled: loading, children: (0, jsx_runtime_1.jsx)(__1.Icon, { icon: faXmark_1.faXmark }) })] }));
 });

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

@@ -1,12 +1,12 @@
 import { ColorPropsValue } from '../../types';
 export declare const classes: {
     title: string;
-    content: string;
     icon: string;
+    content: string;
     prefix: string;
+    suffix: string;
     close: string;
     description: string;
-    suffix: string;
 } & {
     root: string;
 };

package/dist/cjs/components/anchorList/activeIndicator.d.ts

@@ -0,0 +1,5 @@
+export declare function ActiveIndicator({ activeId, anchorRefs, onTransitionEnd }: {
+    activeId: string | undefined;
+    anchorRefs: Map<string, HTMLAnchorElement | null>;
+    onTransitionEnd(): void;
+}): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/cjs/components/anchorList/activeIndicator.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ActiveIndicator = ActiveIndicator;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const anchorList_style_1 = require("./anchorList.style");
+const react_1 = require("react");
+function ActiveIndicator({ activeId, anchorRefs, onTransitionEnd }) {
+    const [top, setTop] = (0, react_1.useState)();
+    (0, react_1.useEffect)(() => {
+        const anchor = anchorRefs.get(activeId);
+        if (!anchor) {
+            return;
+        }
+        setTop(anchor.offsetTop + 8);
+    }, [activeId]);
+    return ((0, jsx_runtime_1.jsx)("div", { className: anchorList_style_1.classes.indicator, style: { top }, onTransitionEnd: onTransitionEnd }));
+}

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

@@ -0,0 +1,26 @@
+import React, { ReactNode } from 'react';
+import { FlexProps } from '../flex';
+import { DefineElement } from '../../types';
+export type AnchorItem = {
+    id: string;
+    label?: ReactNode;
+    /** 锚点的层级，主要影响缩进等级 */
+    level?: number;
+    /** 是否激活的锚点，通常为自动判断 */
+    active?: boolean;
+};
+export interface AnchorListProps extends FlexProps {
+    anchors?: AnchorItem[];
+    renderAnchorItem?(item: AnchorItem, active: boolean): ReactNode;
+    /** 缩进，默认为`24` */
+    indent?: number;
+    /** 定义滚动容器，默认为`document` */
+    scroller?: DefineElement;
+    /** hash跳转模式，仅`history`模式支持{@link offset}与{@link scrollBehavior}，默认为`history` */
+    routeMode?: 'history' | 'location';
+    /** 目标元素距离顶部的偏移量，默认为`0` */
+    offset?: number;
+    /** 滚动行为，传递至`scrollTo`方法，默认为`smooth` */
+    scrollBehavior?: ScrollBehavior;
+}
+export declare const AnchorList: React.MemoExoticComponent<({ anchors, renderAnchorItem, indent, scroller, routeMode, offset, scrollBehavior, ...props }: AnchorListProps) => import("@emotion/react/jsx-runtime").JSX.Element>;

package/dist/cjs/components/anchorList/anchorList.js

@@ -0,0 +1,95 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AnchorList = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const anchorList_style_1 = require("./anchorList.style");
+const utils_1 = require("../../utils");
+const react_1 = require("react");
+const flex_1 = require("../flex");
+const activeIndicator_1 = require("./activeIndicator");
+exports.AnchorList = (0, react_1.memo)(({ anchors, renderAnchorItem, indent = 24, scroller, routeMode = 'history', offset = 0, scrollBehavior = 'smooth', ...props }) => {
+    const anchorRefs = (0, react_1.useRef)(new Map());
+    /**
+     * ------------------------------------------------------------------------
+     * 初始化高亮与滚动位置
+     */
+    const initialized = (0, react_1.useRef)(false);
+    (0, react_1.useEffect)(() => {
+        if (routeMode === 'history') {
+            initialized.current ||= scrollToId(location.hash.slice(1));
+        }
+    });
+    const scrollToId = (id) => {
+        const targetEl = document.getElementById(id);
+        if (!targetEl) {
+            return false;
+        }
+        getScroller().scrollTo({
+            top: targetEl.offsetTop - offset,
+            // 初始化之前无需平滑滚动
+            behavior: initialized.current ? scrollBehavior : 'instant'
+        });
+        return true;
+    };
+    /**
+     * ------------------------------------------------------------------------
+     * 拦截原生点击事件
+     */
+    const clickHandler = (e) => {
+        if (routeMode !== 'history' || e.ctrlKey) {
+            return;
+        }
+        const hash = e.target.getAttribute('href');
+        if (hash?.[0] !== '#') {
+            return;
+        }
+        if (scrollToId(hash.slice(1))) {
+            e.preventDefault();
+            history.pushState(void 0, '', hash);
+        }
+    };
+    /**
+     * ------------------------------------------------------------------------
+     * 监听滚动设置高亮
+     */
+    const getScroller = () => {
+        return (typeof scroller === 'function' ? scroller() : scroller) || document.documentElement;
+    };
+    const [activeId, setActiveId] = (0, utils_1.useSyncState)();
+    (0, react_1.useEffect)(() => {
+        const scrollerEl = getScroller();
+        const scroll = () => {
+            let nearest;
+            let minDistance = Infinity;
+            const targets = anchors?.map(item => document.getElementById(item.id));
+            targets?.forEach(target => {
+                const top = target?.getBoundingClientRect().top;
+                if (typeof top === 'number') {
+                    const distance = Math.abs(top - offset);
+                    if (distance < minDistance) {
+                        minDistance = distance;
+                        nearest = target;
+                    }
+                }
+            });
+            nearest && setActiveId(nearest.id);
+        };
+        !activeId.current && scroll();
+        return (0, utils_1.listenAllPredecessorsScroll)(scrollerEl === document.documentElement ? document : scrollerEl, scroll);
+    }, [anchors, scroller, offset]);
+    const [animating, setAnimating] = (0, utils_1.useDerivedState)(prev => typeof prev !== 'undefined', [activeId.current]);
+    return ((0, jsx_runtime_1.jsxs)(flex_1.Flex, { direction: "column", alignItems: "flex-start", ...props, css: anchorList_style_1.style, className: (0, utils_1.clsx)(anchorList_style_1.classes.root, props.className), "data-animating": animating.current, children: [anchors?.map(item => {
+                const active = item.active || activeId.current === item.id;
+                if (renderAnchorItem) {
+                    return renderAnchorItem(item, active);
+                }
+                return ((0, jsx_runtime_1.jsx)("a", { ref: r => {
+                        r
+                            ? anchorRefs.current.set(item.id, r)
+                            : anchorRefs.current.delete(item.id);
+                    }, className: anchorList_style_1.classes.item, href: '#' + item.id, style: {
+                        paddingLeft: (item.level || 0) * indent + 15
+                    }, "data-active": active, onClick: clickHandler, children: item.label }, item.id));
+            }), !renderAnchorItem &&
+                (0, jsx_runtime_1.jsx)(activeIndicator_1.ActiveIndicator, { activeId: activeId.current, anchorRefs: anchorRefs.current, onTransitionEnd: () => setAnimating(false) })] }));
+});

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

@@ -0,0 +1,7 @@
+export declare const classes: {
+    indicator: string;
+    item: string;
+} & {
+    root: string;
+};
+export declare const style: () => import("@emotion/react").SerializedStyles;

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

@@ -0,0 +1,60 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.style = exports.classes = void 0;
+const utils_1 = require("../../utils");
+const react_1 = require("@emotion/react");
+exports.classes = (0, utils_1.defineClasses)('anchor-list', [
+    'item',
+    'indicator'
+]);
+exports.style = (0, utils_1.defineCss)(({ colors, easing }) => (0, react_1.css) `
+    position: relative;
+
+    .${exports.classes.item} {
+        padding: 5px 0;
+        color: inherit;
+        text-decoration: none;
+        position: relative;
+        transition: all .25s ${easing.easeOut};
+        -webkit-tap-highlight-color: transparent;
+
+        &:hover, &[data-active=true] {
+            color: ${colors.primary.main};
+        }
+
+        &:not([data-active=true]):active {
+            transition: all 0s;
+            opacity: .7;
+        }
+        
+        &:before {
+            content: '';
+            top: 8px;
+            display: none;
+        }
+    }
+
+    .${exports.classes.item}:before, .${exports.classes.indicator} {
+        width: 2px;
+        height: 1em;
+        background: ${colors.primary.main};
+        position: absolute;
+        left: 0;
+    }
+
+    .${exports.classes.indicator} {
+        top: 0;
+        transition: top .3s ${easing.bounce};
+    }
+    
+    
+    &:not([data-animating=true]) {
+        .${exports.classes.item}[data-active=true]:before {
+            display: block;
+        }
+
+        .${exports.classes.indicator} {
+            display: none;
+        }
+    }
+`);

package/dist/cjs/components/anchorList/index.d.ts

@@ -0,0 +1 @@
+export * from './anchorList';

package/dist/cjs/components/anchorList/index.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./anchorList"), exports);

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

@@ -1,25 +1,24 @@
-import { ReactElement } from 'react';
-import { DIVProps } from '../../types';
+import { ElementType } from 'react';
+import { OverridableComponent, OverridableProps } from '../../types';
 import { ThemeProviderProps } from '../theme';
 import { AppDialogMethods } from './appDialog';
 import { AppMessageMethods } from './appMessage';
 import { AppNotificationMethods } from './appNotification';
 import { AppActionSheetMethods } from './appActionSheet';
-export interface AppProps extends ThemeProviderProps, DIVProps {
-    component?: any;
-    /** 尺寸是否占满父节点，默认为`true` */
+export interface AppOwnProps extends ThemeProviderProps {
     fill?: boolean;
 }
+export type AppProps<C extends ElementType = 'div'> = OverridableProps<AppOwnProps, C>;
 export declare function useAppContext(): {
     dialog: AppDialogMethods;
     message: AppMessageMethods<import("../snackbarBase").SnackbarBaseProps>;
     notification: AppNotificationMethods<import("./appNotification").AppNotificationProps>;
+    actionSheet: AppActionSheetMethods;
 };
-export declare const App: {
-    (props: AppProps): ReactElement;
+export declare const App: OverridableComponent<AppOwnProps> & {
     dialog: AppDialogMethods;
     message: AppMessageMethods;
     notification: AppNotificationMethods;
     actionSheet: AppActionSheetMethods;
 };
-export declare function InnerApp({ component: Component, theme, children, fill, ...props }: AppProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function InnerApp({ component: Component, theme, children, fill, ...props }: OverridableProps<AppProps, 'div'>): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/cjs/components/app/app.js

@@ -13,16 +13,18 @@ const appMessage_1 = require("./appMessage");
 const appNotification_1 = require("./appNotification");
 const appActionSheet_1 = require("./appActionSheet");
 const react_2 = require("@emotion/react");
+const globalEventDelegation_1 = require("./globalEventDelegation");
 const AppContext = (0, react_1.createContext)({
     dialog: new appDialog_1.AppDialogMethods(),
     message: new appMessage_1.AppMessageMethods(),
     notification: new appNotification_1.AppNotificationMethods(),
+    actionSheet: new appActionSheet_1.AppActionSheetMethods()
 });
 function useAppContext() {
     return (0, react_1.useContext)(AppContext);
 }
 exports.App = (({ theme, ...props }) => {
-    return ((0, jsx_runtime_1.jsx)(theme_1.ThemeProvider, { theme: theme, children: (0, jsx_runtime_1.jsx)(InnerApp, { ...props }) }));
+    return ((0, jsx_runtime_1.jsx)(globalEventDelegation_1.GlobalEventDelegation, { children: (0, jsx_runtime_1.jsx)(theme_1.ThemeProvider, { theme: theme, children: (0, jsx_runtime_1.jsx)(InnerApp, { ...props }) }) }));
 });
 function InnerApp({ component: Component = 'div', theme, children, fill = true, ...props }) {
     const appValue = (0, react_1.useMemo)(() => ({
@@ -34,11 +36,14 @@ function InnerApp({ component: Component = 'div', theme, children, fill = true,
     return ((0, jsx_runtime_1.jsxs)(AppContext, { value: appValue, children: [Component
                 ? (0, jsx_runtime_1.jsx)(Component, { ...props, css: [
                         app_style_1.style,
+                        (0, utils_1.defineCss)(({ background }) => (0, react_2.css) `
+                            background-color: ${background.body};
+                        `),
                         fill && (0, react_2.css) `
                             width: 100%;
                             height: 100%;
                             flex: 1;
                         `
-                    ], className: (0, utils_1.classnames)(app_style_1.classes.root, props.className), children: children })
+                    ], className: (0, utils_1.clsx)(app_style_1.classes.root, props.className), children: children })
                 : children, (0, jsx_runtime_1.jsx)(appDialog_1.AppDialog, { methods: appValue.dialog }), (0, jsx_runtime_1.jsx)(appMessage_1.AppMessage, { methods: appValue.message }), (0, jsx_runtime_1.jsx)(appNotification_1.AppNotification, { methods: appValue.notification }), (0, jsx_runtime_1.jsx)(appActionSheet_1.AppActionSheet, { methods: appValue.actionSheet })] }));
 }

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

@@ -9,7 +9,7 @@ const appStyleCallback = (theme) => (0, react_1.css) `
     box-sizing: border-box;
     font-size: ${theme.fontSize}px;
     color: ${theme.text.primary};
-    background-color: ${theme.background.body};
+    color-scheme: ${theme.mode};
     zoom: ${theme.zoom};
 
     * {

package/dist/cjs/components/app/appActionSheet.js

@@ -5,8 +5,10 @@ const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const react_1 = require("react");
 const actionSheet_1 = require("../actionSheet");
 class AppActionSheetMethods {
-    async confirm() { }
-    async open(props, ...args) { }
+    async confirm() {
+    }
+    async open(props, ...args) {
+    }
 }
 exports.AppActionSheetMethods = AppActionSheetMethods;
 exports.AppActionSheet = (0, react_1.memo)(({ methods }) => {

package/dist/cjs/components/app/appDialog.d.ts

@@ -1,8 +1,9 @@
 import { ReactNode } from 'react';
 import { DialogProps } from '../dialog';
-export interface AppDialogProps extends Omit<DialogProps, 'content' | 'onConfirm'> {
+export interface AppDialogProps extends Omit<DialogProps, 'content' | 'onConfirm' | 'onCancel'> {
     content?: ReactNode;
     onConfirm?(...args: any[]): any;
+    onCancel?(...args: any[]): any;
 }
 export declare class AppDialogMethods {
     info(props: AppDialogProps, ...args: any[]): Promise<void>;

package/dist/cjs/components/app/appDialog.js

@@ -25,8 +25,8 @@ exports.AppDialog = (0, react_1.memo)(({ methods }) => {
                     await props.onConfirm?.(...args);
                     resolve();
                 },
-                onCancel(e) {
-                    props.onCancel?.(e);
+                onCancel() {
+                    props.onCancel?.(...args);
                     reject();
                 },
                 onClosed() {

package/dist/cjs/components/app/globalEventDelegation.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode, RefObject } from 'react';
+export declare const DelegationContext: import("react").Context<RefObject<MouseEvent | null>>;
+export declare function useEventDelegation(): RefObject<MouseEvent | null>;
+export declare function GlobalEventDelegation(props: {
+    children?: ReactNode;
+}): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/cjs/components/app/globalEventDelegation.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DelegationContext = void 0;
+exports.useEventDelegation = useEventDelegation;
+exports.GlobalEventDelegation = GlobalEventDelegation;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("react");
+exports.DelegationContext = (0, react_1.createContext)({
+    current: null
+});
+function useEventDelegation() {
+    return (0, react_1.useContext)(exports.DelegationContext);
+}
+function GlobalEventDelegation(props) {
+    const contextValue = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        const click = (e) => {
+            contextValue.current = e;
+        };
+        document.addEventListener('click', click, { capture: true });
+        return () => {
+            document.removeEventListener('click', click);
+        };
+    }, []);
+    return ((0, jsx_runtime_1.jsx)(exports.DelegationContext, { value: contextValue, children: props.children }));
+}

package/dist/cjs/components/autocomplete/autocomplete.js

@@ -9,7 +9,7 @@ const input_1 = require("../input");
 const utils_1 = require("../../utils");
 const autocomplete_style_1 = require("./autocomplete.style");
 const popper_style_1 = require("../popper/popper.style");
-exports.Autocomplete = (0, react_1.memo)(({ ref, children, loading, options, loadOptions, primaryKey = 'value', labelKey = 'label', onSelect, renderInput, popperProps, popperRef, defaultValue = '', value, onChange, ...props }) => {
+exports.Autocomplete = (0, react_1.memo)(({ children, loading, options, loadOptions, primaryKey = 'value', labelKey = 'label', onSelect, renderInput, popperProps, popperRef, defaultValue = '', value, onChange, ...props }) => {
     const [focused, _setFocused] = (0, react_1.useState)(false);
     const setFocused = (focused) => {
         !props.disabled && !props.readOnly && _setFocused(focused);
@@ -36,17 +36,17 @@ exports.Autocomplete = (0, react_1.memo)(({ ref, children, loading, options, loa
      * ------------------------------------------------------------------
      * 合并最终选项
      */
-    const optionsArr = innerOptions || options || react_1.Children.map(children, c => (0, react_1.isValidElement)(c) ? c.props : c) || void 0;
+    const actualOptions = innerOptions || options || react_1.Children.map(children, c => (0, react_1.isValidElement)(c) ? c.props : c) || void 0;
     const optionsMap = (0, react_1.useMemo)(() => {
         const map = new Map();
-        optionsArr?.forEach(opt => {
+        actualOptions?.forEach(opt => {
             if (opt && typeof opt === 'object') {
                 const key = opt[primaryKey];
                 !(0, utils_1.isUnset)(key) && map.set(key, opt);
             }
         });
         return map;
-    }, [optionsArr, primaryKey]);
+    }, [actualOptions, primaryKey]);
     const [open, _setOpen] = (0, utils_1.useDerivedState)(() => {
         return focused && !!optionsMap.size;
     }, [focused, optionsMap.size]);
@@ -57,24 +57,23 @@ exports.Autocomplete = (0, react_1.memo)(({ ref, children, loading, options, loa
             _setOpen(open);
         }
     };
-    const inputRef = (0, react_1.useRef)(null);
+    const innerInputRef = (0, react_1.useRef)(null);
     const syncOnSelect = (0, utils_1.useSync)(onSelect);
     const optionSelectHandler = (0, react_1.useCallback)((value, e) => {
         const option = optionsMap.get(value);
-        inputRef.current.value = option[labelKey];
+        innerInputRef.current.value = option[labelKey];
         syncOnSelect.current?.(value, option);
         changeHandler({
             ...e,
-            target: inputRef.current,
-            currentTarget: inputRef.current
+            target: innerInputRef.current,
+            currentTarget: innerInputRef.current
         }, true);
         setOpen(false);
     }, [optionsMap]);
     const inputProps = {
         ...props,
-        ref,
-        className: autocomplete_style_1.classes.root,
-        inputRef: (0, utils_1.cloneRef)(inputRef, props.inputRef),
+        ref: (0, utils_1.cloneRef)(innerInputRef, props.ref),
+        className: (0, utils_1.clsx)(autocomplete_style_1.classes.root, props.className),
         loading: innerLoading.current,
         value: innerValue.current,
         onChange: changeHandler,
@@ -95,7 +94,7 @@ exports.Autocomplete = (0, react_1.memo)(({ ref, children, loading, options, loa
             setFocused(false);
         }
     };
-    return ((0, jsx_runtime_1.jsx)(popper_1.Popper, { css: popper_style_1.popperStyle, open: open.current, placement: "bottom", variant: "collapse", trigger: false, content: (0, jsx_runtime_1.jsx)(optionsBase_1.OptionsBase, { onToggleSelected: optionSelectHandler, loading: innerLoading.current, options: options, labelKey: labelKey, primaryKey: primaryKey, children: children }), ...popperProps, popperRef: popperRef, onOpenChange: setOpen, onPointerDown: e => {
+    return ((0, jsx_runtime_1.jsx)(popper_1.Popper, { css: popper_style_1.popperStyle, open: open.current, placement: "bottom", variant: "collapse", trigger: false, content: (0, jsx_runtime_1.jsx)(optionsBase_1.OptionsBase, { onToggleSelected: optionSelectHandler, loading: innerLoading.current, options: actualOptions, labelKey: labelKey, primaryKey: primaryKey, children: children }), ...popperProps, popperRef: popperRef, onOpenChange: setOpen, onPointerDown: e => {
             popperProps?.onPointerDown?.(e);
             e.preventDefault();
         }, children: renderInput

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

@@ -1,13 +1,12 @@
-import React, { ReactElement, Ref } from 'react';
-import { ColorPropsValue, DIVProps, Size } from '../../types';
+import { ReactElement, JSX } from 'react';
+import { ColorPropsValue, DivProps, Size } from '../../types';
 import { AvatarGroup } from './avatarGroup';
-export interface AvatarProps extends DIVProps {
+export interface AvatarProps extends DivProps {
     color?: ColorPropsValue;
     size?: Size | number | string;
     shape?: 'circular' | 'square';
     src?: string;
-    imgProps?: React.JSX.IntrinsicElements['img'];
-    imgRef?: Ref<HTMLImageElement>;
+    imgProps?: JSX.IntrinsicElements['img'];
 }
 export declare function useAvatarStyle(props: Pick<AvatarProps, 'color' | 'size'>): {
     color: string;