@canlooks/can-ui 0.0.25 → 0.0.26

package/dist/cjs/utils/dnd.js

@@ -50,6 +50,7 @@ function useDraggableHandle(options = {}) {
     const startTime = (0, react_1.useRef)(0);
     const startPosition = (0, react_1.useRef)([0, 0]);
     const delay = (0, react_1.useRef)(void 0);
+    const data = (0, react_1.useRef)(void 0);
     const onPointerDown = (0, react_1.useCallback)((e) => {
         if (syncOptions.current.disabled) {
             return;
@@ -58,7 +59,8 @@ function useDraggableHandle(options = {}) {
         const dragStart = () => {
             startTime.current = Date.now();
             startPosition.current = [e.clientX, e.clientY];
-            syncOptions.current.onDragStart?.(e);
+            data.current = syncOptions.current.onDragStart?.(e);
+            document.documentElement.style.userSelect = 'none';
         };
         if (syncOptions.current.delay) {
             delay.current = setTimeout(() => {
@@ -80,7 +82,8 @@ function useDraggableHandle(options = {}) {
         return {
             startX, startY,
             currentX: clientX, currentY: clientY,
-            deltaX, deltaY
+            deltaX, deltaY,
+            startData: data.current
         };
     };
     const onPointerMove = (e) => {
@@ -108,6 +111,7 @@ function useDraggableHandle(options = {}) {
             removeEventListener('touchmove', preventDefaultCallback.current);
             preventDefaultCallback.current = void 0;
         }
+        document.documentElement.style.userSelect = '';
         removeEventListener('pointermove', onPointerMove);
         removeEventListener('pointerup', onPointerUp);
         removeEventListener('pointercancel', onPointerCancel);
@@ -131,7 +135,6 @@ function useDraggableHandle(options = {}) {
         const callback = syncOptions.current.onDragCancel || syncOptions.current.onDragEnd;
         callback?.(buildDragEndInfo(e));
     };
-    (0, react_1.useEffect)(() => removeListener, []);
     const isDragged = (0, react_1.useRef)(false);
     const onClick = (0, react_1.useCallback)((e) => {
         if (isDragged.current) {

package/dist/cjs/utils/hooks.d.ts

@@ -39,6 +39,7 @@ export declare function useUnmounted(): RefObject<boolean>;
  */
 export declare function useControlled<T = any>(defaultValue: T, value?: T, onChange?: (value: T) => void): [RefObject<T>, Dispatch<SetStateAction<T>>];
 export declare function useControlled<T = any>(defaultValue?: T, value?: T, onChange?: (value: T) => void): [RefObject<T | undefined>, Dispatch<SetStateAction<T | undefined>>];
+export declare function useControlled<T = any>(defaultValue: () => T, value?: T, onChange?: (value: T) => void): [RefObject<T | undefined>, Dispatch<SetStateAction<T | undefined>>];
 /**
  * 将某个方法使用loading包裹
  */

package/dist/cjs/utils/index.d.ts

@@ -5,6 +5,7 @@ export * from './dnd';
 export * from './form';
 export * from './hooks';
 export * from './keyboard';
+export * from './polyfill';
 export * from './style';
 export * from './tree';
 export * from './utils';

package/dist/cjs/utils/index.js

@@ -8,6 +8,7 @@ tslib_1.__exportStar(require("./dnd"), exports);
 tslib_1.__exportStar(require("./form"), exports);
 tslib_1.__exportStar(require("./hooks"), exports);
 tslib_1.__exportStar(require("./keyboard"), exports);
+tslib_1.__exportStar(require("./polyfill"), exports);
 tslib_1.__exportStar(require("./style"), exports);
 tslib_1.__exportStar(require("./tree"), exports);
 tslib_1.__exportStar(require("./utils"), exports);

package/dist/cjs/utils/keyboard.js

@@ -98,7 +98,6 @@ function useEscapeClosable({ escapeClosable, close }, onEscape) {
                 removeEventListener('keydown', keydown);
             };
         }
-        return;
     }, [escapeClosable]);
     return overlayRef;
 }

package/dist/cjs/utils/polyfill.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/cjs/utils/polyfill.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+Promise.withResolvers ||= function withResolvers() {
+    if (!this)
+        throw new TypeError('Promise.withResolvers called on non-object');
+    const out = {};
+    out.promise = new this((resolve_, reject_) => {
+        out.resolve = resolve_;
+        out.reject = reject_;
+    });
+    return out;
+};

package/dist/cjs/utils/style.d.ts

@@ -1,6 +1,7 @@
 import { Theme } from '../components/theme';
 import { Breakpoints, ColorPropsValue, ResponsiveProp, ResponsiveValue } from '../types';
 import { StatusType } from '../components/status';
+import { SerializedStyles } from '@emotion/react';
 /**
  * 为类名添加统一前缀，通常为内部使用
  * @param prefixName
@@ -46,11 +47,24 @@ export declare function useColor(colorPropsValue: ColorPropsValue): string;
  */
 export declare function useTouchRipple(colorPropsValue: ColorPropsValue): (element: Animatable) => void;
 /**
- * 生成响应式样式
- * @param theme
- * @param callback
+ * 生成响应式样式，与{@link responsiveStyles}的区别在于，本方法会遍历{@link Theme}中的所有`breakpoints`，触发回调函数
+ * @param breakpoints 传入{@link Theme}中的断点，或自定义断点
+ * @param callback 每个断点触发一次回调
+ */
+export declare function responsiveVariables(breakpoints: ResponsiveValue, callback: (key: Breakpoints, px: number) => string | SerializedStyles): string;
+/**
+ * 生成响应式样式，与{@link responsiveVariables}的区别在于，本方法只会生成给定的断点所对应的样式
+ * @param styles 样式定义，对象类型，键名可为断点也可为具体的宽度
+ * @param breakpoints 定义断点，默认使用{@link defaultBreakpoints}
+ * @example
+ * responsiveStyles({
+ *   sm: 'color: red;',
+ *   '500px': 'color: pink;'
+ * })
  */
-export declare function responsiveVariables(theme: Theme, callback: (key: Breakpoints, px: number) => string): string;
+export declare function responsiveStyles(styles: {
+    [P in Breakpoints]?: string | SerializedStyles;
+}, breakpoints?: ResponsiveValue): string;
 /**
  * 将响应式的值统一转换为对象格式
  */

package/dist/cjs/utils/style.js

@@ -8,6 +8,7 @@ exports.colorTransfer = colorTransfer;
 exports.useColor = useColor;
 exports.useTouchRipple = useTouchRipple;
 exports.responsiveVariables = responsiveVariables;
+exports.responsiveStyles = responsiveStyles;
 exports.toResponsiveValue = toResponsiveValue;
 exports.useResponsiveValue = useResponsiveValue;
 exports.useStatusColor = useStatusColor;
@@ -29,7 +30,7 @@ function definePrefix(prefixName) {
     };
 }
 function defineClasses(prefixName, names) {
-    const prefix = definePrefix(prefixName);
+    const prefix = definePrefix((0, utils_1.humpToSegmented)(prefixName));
     const ret = { root: prefix() };
     names?.forEach(name => {
         ret[name] = prefix((0, utils_1.humpToSegmented)(name));
@@ -113,12 +114,11 @@ function useTouchRipple(colorPropsValue) {
     };
 }
 /**
- * 生成响应式样式
- * @param theme
- * @param callback
+ * 生成响应式样式，与{@link responsiveStyles}的区别在于，本方法会遍历{@link Theme}中的所有`breakpoints`，触发回调函数
+ * @param breakpoints 传入{@link Theme}中的断点，或自定义断点
+ * @param callback 每个断点触发一次回调
  */
-function responsiveVariables(theme, callback) {
-    const { breakpoints } = theme;
+function responsiveVariables(breakpoints, callback) {
     let ret = '';
     for (const k in breakpoints) {
         const px = breakpoints[k];
@@ -130,7 +130,41 @@ function responsiveVariables(theme, callback) {
             `;
         }
         else {
-            ret += callback(k, px) || '';
+            ret += `${callback(k, px) || ''}`;
+        }
+    }
+    return ret;
+}
+/**
+ * 生成响应式样式，与{@link responsiveVariables}的区别在于，本方法只会生成给定的断点所对应的样式
+ * @param styles 样式定义，对象类型，键名可为断点也可为具体的宽度
+ * @param breakpoints 定义断点，默认使用{@link defaultBreakpoints}
+ * @example
+ * responsiveStyles({
+ *   sm: 'color: red;',
+ *   '500px': 'color: pink;'
+ * })
+ */
+function responsiveStyles(styles, breakpoints = theme_1.defaultBreakpoints) {
+    let ret = '';
+    for (const k in styles) {
+        let px = breakpoints[k] ?? k;
+        let style = styles[k];
+        if (typeof style === 'object' && style.styles) {
+            style = style.styles;
+        }
+        if (px && px !== '0') {
+            if (typeof px === 'number') {
+                px += 'px';
+            }
+            ret += `
+                @media (max-width: ${px}) {
+                    ${style}
+                }                
+            `;
+        }
+        else {
+            ret += style;
         }
     }
     return ret;

package/dist/cjs/utils/utils.d.ts

@@ -4,7 +4,7 @@ import { Id } from '../types';
  * 生成最简易的随机ID
  * @param namespace
  */
-export declare function getEazyID(namespace?: string): string;
+export declare function getEasyID(namespace?: string): string;
 /**
  * 获取任意长度由随机字母组成的ID
  * @param length
@@ -14,7 +14,7 @@ export declare function getShortID(length?: number): string;
  * 拼接元素的类名
  * @param classes
  */
-export declare function classnames(...classes: any[]): string;
+export declare function clsx(...classes: any[]): string;
 /**
  * 驼峰转分隔
  * @param str
@@ -48,7 +48,7 @@ export declare function mergeDeep<T extends {}, U, V, W, X, Y, Z>(target: T, sou
 export declare function mergeDeep(target: object, ...sources: any[]): any;
 /**
  * 判断元素是否完全在目标容器内，用于Popper组件
- * @param el
+ * @param target
  * @param container
  */
 export declare function isElementVisibleCompletely(target: Element, container?: Element): boolean;
@@ -106,7 +106,14 @@ export declare function isChildOf(target: Element | null, container?: Element |
  * @param target
  * @param callback
  */
-export declare function fineParent(target: Element, callback: (el: Element) => any): HTMLElement | null;
+export declare function findPredecessor(target: Element, callback: (el: Element) => any): HTMLElement | null;
+/**
+ * 监听某个元素的所有祖先元素的滚动事件
+ * @param target
+ * @param listener
+ * @returns {() => void} 返回一个清除函数
+ */
+export declare function listenAllPredecessorsScroll(target: Element | Document, listener: (e: Event) => void): () => void;
 /**
  * 将数值限制在某个范围内
  * @param value

package/dist/cjs/utils/utils.js

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getEazyID = getEazyID;
+exports.getEasyID = getEasyID;
 exports.getShortID = getShortID;
-exports.classnames = classnames;
+exports.clsx = clsx;
 exports.humpToSegmented = humpToSegmented;
 exports.toArray = toArray;
 exports.isSelected = isSelected;
@@ -17,7 +17,8 @@ exports.getPromiseState = getPromiseState;
 exports.joinNodes = joinNodes;
 exports.fixInputNumber = fixInputNumber;
 exports.isChildOf = isChildOf;
-exports.fineParent = fineParent;
+exports.findPredecessor = findPredecessor;
+exports.listenAllPredecessorsScroll = listenAllPredecessorsScroll;
 exports.range = range;
 exports.queryDeep = queryDeep;
 exports.filterProperties = filterProperties;
@@ -25,7 +26,7 @@ exports.filterProperties = filterProperties;
  * 生成最简易的随机ID
  * @param namespace
  */
-function getEazyID(namespace = '') {
+function getEasyID(namespace = '') {
     return `${namespace}${Date.now()}${Math.random()}`;
 }
 const randomIdAlphabet = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789_-';
@@ -45,7 +46,7 @@ function getShortID(length = 8) {
  * 拼接元素的类名
  * @param classes
  */
-function classnames(...classes) {
+function clsx(...classes) {
     const ret = [];
     for (let i = 0, { length } = classes; i < length; i++) {
         const cls = classes[i];
@@ -54,7 +55,7 @@ function classnames(...classes) {
         }
         if (typeof cls === 'object') {
             if (Array.isArray(cls)) {
-                cls.length && ret.push(classnames(...cls));
+                cls.length && ret.push(clsx(...cls));
             }
             else {
                 for (const k in cls) {
@@ -123,7 +124,7 @@ function cloneDeep(target) {
 function mergeDeep(target, ...sources) {
     for (let i = 0, { length } = sources; i < length; i++) {
         const source = sources[i];
-        if (source && typeof source === 'object') {
+        if (typeof source === 'object' && source) {
             for (const k in source) {
                 const v = source[k];
                 if (typeof v === 'object' && v) {
@@ -140,7 +141,7 @@ function mergeDeep(target, ...sources) {
 }
 /**
  * 判断元素是否完全在目标容器内，用于Popper组件
- * @param el
+ * @param target
  * @param container
  */
 function isElementVisibleCompletely(target, container) {
@@ -249,7 +250,7 @@ function isChildOf(target, container) {
  * @param target
  * @param callback
  */
-function fineParent(target, callback) {
+function findPredecessor(target, callback) {
     while (target) {
         const { parentElement } = target;
         if (!parentElement || callback(parentElement)) {
@@ -259,6 +260,30 @@ function fineParent(target, callback) {
     }
     return null;
 }
+/**
+ * 监听某个元素的所有祖先元素的滚动事件
+ * @param target
+ * @param listener
+ * @returns {() => void} 返回一个清除函数
+ */
+function listenAllPredecessorsScroll(target, listener) {
+    const disposers = [];
+    if (target !== document) {
+        findPredecessor(target, parent => {
+            if (parent.scrollHeight > parent.clientHeight || parent.scrollWidth > parent.clientWidth) {
+                parent.addEventListener('scroll', listener);
+                disposers.push(() => {
+                    parent.removeEventListener('scroll', listener);
+                });
+            }
+        });
+    }
+    document.addEventListener('scroll', listener);
+    disposers.push(() => {
+        document.removeEventListener('scroll', listener);
+    });
+    return () => disposers.forEach(disposer => disposer());
+}
 /**
  * 将数值限制在某个范围内
  * @param value

package/dist/esm/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/esm/components/accordion/accordion.js

@@ -1,9 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { classes, style } from './accordion.style';
-import { classnames, useControlled } from '../../utils';
-import { CaretRightOutlined } from '@ant-design/icons';
+import { clsx, useControlled } from '../../utils';
 import { useTheme } from '../theme';
 import { Collapse } from '../transitionBase';
+import { Icon } from '../..';
+import { faCaretRight } from '@fortawesome/free-solid-svg-icons/faCaretRight';
 export function Accordion({ size, title, prefix, suffix, expandIcon, defaultExpanded = false, expanded, onExpandedChange, readOnly, disabled, ...props }) {
     const theme = useTheme();
     size ??= theme.size;
@@ -13,13 +14,13 @@ export function Accordion({ size, title, prefix, suffix, expandIcon, defaultExpa
     };
     const renderExpandIcon = () => {
         if (!expandIcon) {
-            return _jsx(CaretRightOutlined, { className: classes.expandIcon });
+            return _jsx(Icon, { icon: faCaretRight, className: classes.expandIcon });
         }
         if (typeof expandIcon === 'function') {
             return expandIcon(innerExpanded.current);
         }
         return expandIcon;
     };
-    return (_jsxs("div", { ...props, css: style, className: classnames(classes.root, props.className), "data-size": size, "data-expanded": innerExpanded.current, "data-read-only": readOnly, "data-disabled": disabled, children: [_jsxs("div", { className: classes.titleRow, onClick: toggleExpanded, children: [renderExpandIcon(), !!prefix && _jsx("div", { className: classes.prefix, children: prefix }), _jsx("div", { className: classes.title, children: title }), !!suffix && _jsx("div", { className: classes.suffix, children: suffix })] }), !!props.children &&
+    return (_jsxs("div", { ...props, css: style, className: clsx(classes.root, props.className), "data-size": size, "data-expanded": innerExpanded.current, "data-read-only": readOnly, "data-disabled": disabled, children: [_jsxs("div", { className: classes.titleRow, onClick: toggleExpanded, children: [renderExpandIcon(), !!prefix && _jsx("div", { className: classes.prefix, children: prefix }), _jsx("div", { className: classes.title, children: title }), !!suffix && _jsx("div", { className: classes.suffix, children: suffix })] }), !!props.children &&
                 _jsx(Collapse, { in: innerExpanded.current, children: _jsx("div", { className: classes.content, children: props.children }) })] }));
 }

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

@@ -12,18 +12,18 @@ export const style = defineCss(({ divider, borderRadius, background, spacing, te
     border: 1px solid ${divider};
     border-radius: ${borderRadius}px;
     background-color: ${background.content};
-    transition: margin .2s ${easing.easeOut};
+    transition: margin .25s ${easing.easeOut};
 
     .${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};
 
         .${classes.expandIcon} {
             color: ${text.disabled};
-            transition: transform .2s ${easing.easeOut};
+            transition: transform .25s ${easing.easeOut};
         }
 
         .${classes.title} {

package/dist/esm/components/actionSheet/actionSheet.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { memo } from 'react';
 import { classes, style } from './actionSheet.style';
-import { classnames, cloneRef, useControlled, useEscapeClosable } from '../../utils';
+import { clsx, cloneRef, useControlled, useEscapeClosable } from '../../utils';
 import { OverlayBase } from '../overlayBase';
 import { Slide } from '../transitionBase';
 import { MenuItem } from '../menuItem';
@@ -24,14 +24,14 @@ export const ActionSheet = memo(({ ref, title, actions, placement = 'bottom', ma
         onCancel?.(e);
         close('canceled');
     };
-    return (_jsx(OverlayBase, { ...props, ref: cloneRef(ref, overlayRef), css: style, className: classnames(classes.root, props.className), open: innerOpen.current, onMaskClick: onMaskClick, "data-placement": placement, children: _jsxs(Slide, { direction: placementToDirection[placement], ...slideProps, className: classnames(classes.sheet, slideProps?.className), in: innerOpen.current, children: [!!(title || showConfirm || actions?.length) &&
+    return (_jsx(OverlayBase, { ...props, ref: cloneRef(ref, overlayRef), css: style, className: clsx(classes.root, props.className), open: innerOpen.current, onMaskClick: onMaskClick, "data-placement": placement, children: _jsxs(Slide, { direction: placementToDirection[placement], ...slideProps, className: clsx(classes.sheet, slideProps?.className), in: innerOpen.current, children: [!!(title || showConfirm || actions?.length) &&
                     _jsxs("div", { className: classes.card, children: [!!title &&
                                 _jsx("div", { className: classes.title, children: title }), showConfirm &&
                                 _jsx(MenuItem, { className: classes.action, size: "large", label: confirmText, ...confirmProps, onClick: e => {
                                         confirmProps?.onClick?.(e);
                                         onConfirm?.(e);
                                         close('confirmed');
-                                    } }), actions?.map((menuItemProps, i) => _jsx(MenuItem, { className: classnames(classes.action, menuItemProps.className), size: "large", ...menuItemProps, onClick: e => {
+                                    } }), actions?.map((menuItemProps, i) => _jsx(MenuItem, { className: clsx(classes.action, menuItemProps.className), size: "large", ...menuItemProps, onClick: e => {
                                     menuItemProps.onClick?.(e);
                                     onAction?.(menuItemProps);
                                     close('action');

package/dist/esm/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/esm/components/actionSheet/actionSheet.style.js

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

package/dist/esm/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/esm/components/alert/alert.js

@@ -1,23 +1,23 @@
 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, useStyle } from './alert.style';
-import { statusMapToIcon } from '../status';
 import { Button } from '../button';
-import { CloseOutlined } from '@ant-design/icons';
 import { Skeleton } from '../skeleton';
+import { faXmark } from '@fortawesome/free-solid-svg-icons/faXmark';
+import { Icon, statusMapToIconDefinition } from '../..';
 export const Alert = memo(({ variant = 'standard', status = 'error', color = status, showIcon = true, icon, title, description, prefix, suffix, closable, onClose, loading, ...props }) => {
-    const Icon = statusMapToIcon[status];
-    return (_jsxs("div", { ...props, css: useStyle({ color }), className: classnames(classes.root, props.className), "data-variant": variant, children: [showIcon &&
+    return (_jsxs("div", { ...props, css: useStyle({ color: color || 'error' }), className: clsx(classes.root, props.className), "data-variant": variant, children: [showIcon &&
                 _jsx("div", { className: classes.icon, children: loading
                         ? _jsx(Skeleton, { variant: "circular" })
-                        : icon ?? _jsx(Icon, {}) }), !loading && !!prefix &&
+                        : icon ?? _jsx(Icon, { icon: statusMapToIconDefinition[status] }) }), !loading && !!prefix &&
                 _jsx("div", { className: classes.prefix, children: prefix }), _jsxs("div", { className: classes.content, children: [!!(loading || title) &&
                         _jsx("div", { className: classes.title, children: loading
                                 ? _jsx(Skeleton, { width: "40%" })
-                                : title }), _jsx("div", { className: classes.description, children: loading
-                            ? _jsx(Skeleton, {})
-                            : description })] }), !loading && !!suffix &&
+                                : title }), !!(loading || description) &&
+                        _jsx("div", { className: classes.description, children: loading
+                                ? _jsx(Skeleton, {})
+                                : description })] }), !loading && !!suffix &&
                 _jsx("div", { className: classes.suffix, children: suffix }), closable &&
-                _jsx(Button, { className: classes.close, variant: "text", shape: "circular", color: variant === 'filled' ? '#fff' : 'text', onClick: onClose, disabled: loading, children: _jsx(CloseOutlined, {}) })] }));
+                _jsx(Button, { className: classes.close, variant: "text", shape: "circular", color: variant === 'filled' ? '#fff' : 'text.secondary', onClick: onClose, disabled: loading, children: _jsx(Icon, { icon: faXmark }) })] }));
 });

package/dist/esm/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/esm/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/esm/components/anchorList/activeIndicator.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { classes } from './anchorList.style';
+import { useEffect, useState } from 'react';
+export function ActiveIndicator({ activeId, anchorRefs, onTransitionEnd }) {
+    const [top, setTop] = useState();
+    useEffect(() => {
+        const anchor = anchorRefs.get(activeId);
+        if (!anchor) {
+            return;
+        }
+        setTop(anchor.offsetTop + 8);
+    }, [activeId]);
+    return (_jsx("div", { className: classes.indicator, style: { top }, onTransitionEnd: onTransitionEnd }));
+}

package/dist/esm/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>;