@canlooks/can-ui 0.0.41 → 0.0.43

package/dist/esm/components/palette/palette.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { memo, useEffect, useMemo, useRef, useState } from 'react';
 import { classes, style } from './palette.style';
-import { clsx, range, useControlled, useDraggableHandle } from '../../utils';
+import { clsx, range, useControlled, useDraggable } from '../../utils';
 import { useTheme } from '../theme';
 import { Slider } from '../slider';
 import Color from 'color';
@@ -18,7 +18,7 @@ const sliderProps = {
     tooltipProps: { disabled: true }
 };
 const availableFormat = ['HEX', 'RGB', 'HSL', 'CMYK'];
-export const Palette = memo(({ defaultValue, value, onChange, draggableOptions, ...props }) => {
+export const Palette = memo(({ defaultValue, value, onChange, gestureOptions, ...props }) => {
     const { colors } = useTheme();
     const [innerValue, setInnerValue] = useControlled(defaultValue ?? Color(colors.primary.main, 'hex'), value, onChange);
     const colorObject = useMemo(() => {
@@ -48,10 +48,10 @@ export const Palette = memo(({ defaultValue, value, onChange, draggableOptions,
         setInnerValue(innerValue.current.black(newTop).saturationv(newLeft).hue(hue));
         return [newLeft, newTop];
     };
-    const draggableHandle = useDraggableHandle({
-        ...draggableOptions,
+    const draggableHandles = useDraggable({
+        ...gestureOptions,
         onDragStart(e) {
-            draggableOptions?.onDragStart?.(e);
+            gestureOptions?.onDragStart?.(e);
             const paletteWidth = paletteRef.current.clientWidth;
             const paletteHeight = paletteRef.current.clientHeight;
             const { hue } = colorObject;
@@ -70,9 +70,9 @@ export const Palette = memo(({ defaultValue, value, onChange, draggableOptions,
             };
         },
         onDrag(info, e) {
-            draggableOptions?.onDrag?.(info, e);
-            const { top, left, paletteWidth, paletteHeight, hue } = info.startData;
-            setHandlePosition(left + info.deltaX / paletteWidth * 100, top + info.deltaY / paletteHeight * 100, hue);
+            gestureOptions?.onDrag?.(info, e);
+            const { top, left, paletteWidth, paletteHeight, hue } = info.data;
+            setHandlePosition(left + info.diff[0] / paletteWidth * 100, top + info.diff[1] / paletteHeight * 100, hue);
         }
     });
     const fitHandlePosition = () => {
@@ -104,10 +104,10 @@ export const Palette = memo(({ defaultValue, value, onChange, draggableOptions,
                     }
                 })(), commonAlphaItem] }));
     };
-    return (_jsxs("div", { ...props, css: style, className: clsx(classes.root, props.className), children: [_jsxs("div", { ref: paletteRef, className: classes.main, style: { backgroundImage: `linear-gradient(90deg, #ffffff, ${colorObject.saturated})` }, ...draggableHandle, children: [_jsx("div", { className: classes.mask }), _jsx("div", { className: classes.handle, style: {
+    return (_jsxs("div", { ...props, css: style, className: clsx(classes.root, props.className), children: [_jsxs("div", { ref: paletteRef, className: classes.main, style: { backgroundImage: `linear-gradient(90deg, #ffffff, ${colorObject.saturated})` }, ...draggableHandles, children: [_jsx("div", { className: classes.mask }), _jsx("div", { className: classes.handle, style: {
                             left: handlePosition[0] + '%',
                             top: handlePosition[1] + '%'
-                        }, ...draggableHandle })] }), _jsxs("div", { className: classes.slidersRow, children: [_jsxs("div", { className: classes.sliders, children: [_jsx(Slider, { ...sliderProps, className: classes.hue, value: colorObject.hue / 359 * 100, onChange: hueChangeHandler }), _jsx(Slider, { ...sliderProps, className: classes.alpha, renderRail: (_, railProps) => _jsxs("div", { ...railProps, children: [railProps.children, _jsx("div", { className: classes.alphaMask, style: { backgroundImage: `linear-gradient(90deg, transparent, ${colorObject.saturated})` } })] }), value: colorObject.alpha * 100, onChange: alphaChangeHandler })] }), _jsx("div", { className: classes.preview, children: _jsx("div", { className: classes.previewColor, style: {
+                        }, ...draggableHandles })] }), _jsxs("div", { className: classes.slidersRow, children: [_jsxs("div", { className: classes.sliders, children: [_jsx(Slider, { ...sliderProps, className: classes.hue, value: colorObject.hue / 359 * 100, onChange: hueChangeHandler }), _jsx(Slider, { ...sliderProps, className: classes.alpha, renderRail: (_, railProps) => _jsxs("div", { ...railProps, children: [railProps.children, _jsx("div", { className: classes.alphaMask, style: { backgroundImage: `linear-gradient(90deg, transparent, ${colorObject.saturated})` } })] }), value: colorObject.alpha * 100, onChange: alphaChangeHandler })] }), _jsx("div", { className: classes.preview, children: _jsx("div", { className: classes.previewColor, style: {
                                 backgroundColor: colorObject.hex,
                                 opacity: colorObject.alpha
                             } }) })] }), _jsxs("div", { className: classes.inputRow, children: [_jsx(Button, { variant: "plain", color: "text", suffix: _jsx(Icon, { icon: faChevronDown }), onClick: formatChangeHandler, children: availableFormat[activeFormat] }), renderInputs()] })] }));

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

@@ -1,6 +1,7 @@
 import { css } from '@emotion/react';
 import { defineInnerClasses, defineCss } from '../../utils';
 import { classes as dividerClasses } from '../divider/divider.style';
+import { classes as alertClasses } from '../alert/alert.style';
 export const classes = defineInnerClasses('picker-dialog', [
     'content',
     'selectedArea',
@@ -14,6 +15,7 @@ export const style = defineCss(({ spacing }) => css `
         max-height: 100%;
         display: flex;
         flex-direction: column;
+        gap: ${spacing[3]}px;
 
         .${classes.count} {
             b {
@@ -29,6 +31,10 @@ export const style = defineCss(({ spacing }) => css `
         .${classes.list} {
             flex: 1;
             overflow: hidden auto;
+            
+            .${alertClasses.description} {
+                margin-top: 0;
+            }
         }
 
         .${classes.confirm} {

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

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

package/dist/esm/components/pinchable/index.js

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

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

@@ -0,0 +1,33 @@
+import { ElementType, ReactElement, Ref } from 'react';
+import { OverridableProps } from '../../types';
+import { GestureOptions } from '../../utils';
+export interface PinchableRef extends HTMLDivElement {
+    zoomIn(): void;
+    zoomOut(): void;
+    zoomTo(n?: number): void;
+    reset(transition?: boolean): void;
+    rotateLeft(): void;
+    rotateRight(): void;
+    rotate(deg: number): void;
+}
+type PinchableOwnProps = {
+    ref?: Ref<PinchableRef>;
+    gestureOptions?: GestureOptions;
+    defaultScale?: number;
+    scale?: number;
+    onScaleChange?(scale: number): void;
+    /** 缩放限制，`scale`非受控模式下有效，默认为1-6 */
+    scaleLimit?: [number, number];
+    defaultTranslate?: [number, number];
+    translate?: [number, number];
+    onTranslateChange?(translate: [number, number]): void;
+    /** 平移限制，`translate`非受控模式下有效 */
+    translateLimit?: (targetX: number, targetY: number, scale: number) => [number, number];
+    defaultRotate?: number;
+    rotate?: number;
+    onRotateChange?(rotate: number): void;
+    children?: ReactElement;
+};
+export type PinchableProps<C extends ElementType = 'div'> = OverridableProps<PinchableOwnProps, C>;
+export declare const Pinchable: <C extends ElementType = "div">(props: PinchableProps<C>) => ReactElement;
+export {};

package/dist/esm/components/pinchable/pinchable.js

@@ -0,0 +1,157 @@
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { cloneElement, useImperativeHandle, useRef } from 'react';
+import { cloneRef, clsx, range, useControlled, useGesture } from '../../utils';
+import { classes, style } from './pinchable.style';
+export const Pinchable = (({ component: Component = 'div', ref, gestureOptions, defaultScale = 1, scale, onScaleChange, scaleLimit = [1, 6], defaultTranslate = [0, 0], translate, onTranslateChange, translateLimit, defaultRotate = 0, rotate, onRotateChange, children, ...props }) => {
+    useImperativeHandle(ref, () => {
+        if (wrapperRef.current) {
+            wrapperRef.current.zoomIn = () => {
+                zoomFn(innerScale.current * 1.5);
+            };
+            wrapperRef.current.zoomOut = () => {
+                zoomFn(innerScale.current * .5);
+            };
+            wrapperRef.current.zoomTo = zoomFn;
+            wrapperRef.current.rotate =
+                wrapperRef.current.rotateLeft = () => {
+                    rotateFn(innerRotate.current - 90);
+                };
+            wrapperRef.current.rotateRight = () => {
+                rotateFn(innerRotate.current + 90);
+            };
+            wrapperRef.current.reset = resetAll;
+        }
+        return wrapperRef.current;
+    });
+    const wrapperRef = useRef(null);
+    const contentRef = useRef(null);
+    const [innerScale, setInnerScale] = useControlled(defaultScale, scale, onScaleChange);
+    const [innerTranslate, setInnerTranslate] = useControlled(defaultTranslate, translate, onTranslateChange);
+    const [innerRotate, setInnerRotate] = useControlled(defaultRotate, rotate, onRotateChange);
+    const { draggableHandles, pinchableHandles } = useGesture({
+        ...gestureOptions,
+        pinchable: true,
+        onDragStart(info) {
+            gestureOptions?.onDragStart?.(info);
+            return [...innerTranslate.current];
+        },
+        onDrag(info, e) {
+            gestureOptions?.onDrag?.(info, e);
+            const { diff: [dx, dy], data: [startX, startY] } = info;
+            setInnerTranslate(translateLimitFn(startX + dx, startY + dy));
+        },
+        onPinchStart(info) {
+            gestureOptions?.onPinchStart?.(info);
+            const { startSpacing, startMiddle: [sx, sy] } = info;
+            const { x, y, width, height } = contentRef.current.getBoundingClientRect();
+            const startDiagonal = Math.sqrt(width ** 2 + height ** 2);
+            return {
+                startScale: innerScale.current,
+                startTranslate: [...innerTranslate.current],
+                middlePosition: [
+                    (sx - x - width / 2) / width,
+                    (sy - y - height / 2) / height
+                ],
+                startDiagonal,
+                rectRatio: width / height,
+                spacingRatio: startSpacing / startDiagonal
+            };
+        },
+        onPinch(info) {
+            gestureOptions?.onPinch?.(info);
+            const { currentSpacing, diffSpacing, diffMiddle: [dx, dy], data: { spacingRatio, startDiagonal, startScale, rectRatio, startTranslate, middlePosition } } = info;
+            const targetDiagonal = currentSpacing / spacingRatio;
+            const targetScale = targetDiagonal / startDiagonal;
+            const newScale = range(startScale * targetScale, ...scaleLimit);
+            setInnerScale(newScale);
+            const diffDiagonal = diffSpacing / spacingRatio;
+            const diffH = diffDiagonal / Math.sqrt(rectRatio ** 2 + 1);
+            const diffW = diffH * rectRatio;
+            const newX = startTranslate[0] - diffW * middlePosition[0] + dx;
+            const newY = startTranslate[1] - diffH * middlePosition[1] + dy;
+            setInnerTranslate(translateLimitFn(newX, newY, newScale));
+        }
+    });
+    if (!children) {
+        return;
+    }
+    const translateLimitFn = (x, y, scale = innerScale.current, deg = innerRotate.current) => {
+        if (translateLimit) {
+            return translateLimit(x, y, scale);
+        }
+        const { clientWidth: wrapperWidth, clientHeight: wrapperHeight } = wrapperRef.current;
+        const { offsetWidth, offsetHeight } = contentRef.current;
+        const isRotated = deg % 180 !== 0;
+        const contentWidth = (isRotated ? offsetHeight : offsetWidth) * scale;
+        const contentHeight = (isRotated ? offsetWidth : offsetHeight) * scale;
+        const limitX = contentWidth > wrapperWidth ? (contentWidth - wrapperWidth) / 2 : 0;
+        const limitY = contentHeight > wrapperHeight ? (contentHeight - wrapperHeight) / 2 : 0;
+        return [
+            range(x, -limitX, limitX),
+            range(y, -limitY, limitY)
+        ];
+    };
+    const childrenProps = children.props;
+    const allowTransition = () => {
+        contentRef.current && (contentRef.current.dataset.transition = 'true');
+    };
+    const zoomFn = (targetScale, originX, originY) => {
+        allowTransition();
+        const content = contentRef.current;
+        const newScale = range(targetScale, ...scaleLimit);
+        const newWidth = content.offsetWidth * newScale;
+        const newHeight = content.offsetHeight * newScale;
+        if (typeof originX === 'undefined' || typeof originY === 'undefined') {
+            const { x, y, width, height } = wrapperRef.current.getBoundingClientRect();
+            originX = x + (width / 2);
+            originY = y + (height / 2);
+        }
+        const { x, y, width, height } = contentRef.current.getBoundingClientRect();
+        const diffW = newWidth - width;
+        const diffH = newHeight - height;
+        const positionX = (originX - x - width / 2) / width;
+        const positionY = (originY - y - height / 2) / height;
+        const newX = innerTranslate.current[0] - diffW * positionX;
+        const newY = innerTranslate.current[1] - diffH * positionY;
+        setInnerScale(newScale);
+        setInnerTranslate(translateLimitFn(newX, newY, newScale));
+    };
+    const resetZoom = (transition = true) => {
+        transition && allowTransition();
+        setInnerScale(range(1, ...scaleLimit));
+        setInnerTranslate([0, 0]);
+    };
+    const rotateFn = (deg) => {
+        allowTransition();
+        setInnerRotate(deg);
+        setInnerTranslate(translateLimitFn(...innerTranslate.current, innerScale.current, deg));
+    };
+    const resetAll = (transition = true) => {
+        transition && allowTransition();
+        resetZoom(false);
+        setInnerRotate(0);
+    };
+    const doubleClickHandler = (e) => {
+        childrenProps.onDoubleClick?.(e);
+        if (innerScale.current < 1.5) {
+            zoomFn(3, e.clientX, e.clientY);
+        }
+        else {
+            resetZoom();
+        }
+    };
+    return (_jsx(Component, { ...props, ref: wrapperRef, css: style, className: clsx(classes.root, props.className), ...pinchableHandles, children: cloneElement(children, {
+            ref: cloneRef(contentRef, childrenProps.ref),
+            className: clsx(classes.content, childrenProps.className),
+            style: {
+                ...childrenProps?.style,
+                scale: innerScale.current,
+                translate: `${innerTranslate.current[0]}px ${innerTranslate.current[1]}px`,
+                rotate: innerRotate.current + 'deg',
+                transformOrigin: 'center'
+            },
+            ...draggableHandles,
+            onDoubleClick: doubleClickHandler,
+            onTransitionEnd: e => e.currentTarget.dataset.transition = 'false'
+        }) }));
+});

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

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

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

@@ -0,0 +1,18 @@
+import { defineClasses, defineCss } from '../../utils';
+import { css } from '@emotion/react';
+export const classes = defineClasses('pinchable', [
+    'content'
+]);
+export const style = defineCss(({ easing }) => css `
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    &, .${classes.content} {
+        touch-action: none;
+    }
+
+    .${classes.content}[data-transition=true] {
+        transition: all .25s ${easing.easeOut};
+    }
+`);

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

@@ -25,6 +25,7 @@ export const style = defineCss(({ spacing, text }) => css `
         font-size: 1.7em;
         margin-top: ${spacing[8]}px;
         font-weight: bold;
+        white-space: nowrap;
     }
     
     .${classes.description} {

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

@@ -2,7 +2,7 @@ import React, { ReactNode } from 'react';
 import { ColorPropsValue, DivProps } from '../../types';
 export interface ProgressProps extends DivProps {
     showInfo?: boolean;
-    renderInfo?(value?: number): ReactNode;
+    renderInfo?(value: number): ReactNode;
     color?: ColorPropsValue;
     status?: 'default' | 'processing' | 'success' | 'error';
     variant?: 'linear' | 'circular' | 'gauge';

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

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 import { ColorPropsValue, DivProps, Size } from '../../types';
 export type CharacterProps = {
     index: number;
@@ -21,4 +21,4 @@ export interface RatingProps extends Omit<DivProps, 'defaultValue' | 'onChange'>
     readOnly?: boolean;
     disabled?: boolean;
 }
-export declare const Rating: import("react").MemoExoticComponent<({ color, size, count, renderStar, allowHalf, highlightSelectedOnly, defaultValue, value, onChange, readOnly, disabled, ...props }: RatingProps) => import("@emotion/react/jsx-runtime").JSX.Element>;
+export declare const Rating: React.MemoExoticComponent<({ color, size, count, renderStar, allowHalf, highlightSelectedOnly, defaultValue, value, onChange, readOnly, disabled, ...props }: RatingProps) => import("@emotion/react/jsx-runtime").JSX.Element>;

package/dist/esm/components/rating/rating.js

@@ -5,7 +5,7 @@ import { classes, useStyle } from './rating.style';
 import { useTheme } from '../theme';
 import { Icon } from '../..';
 import { faStar } from '@fortawesome/free-solid-svg-icons/faStar';
-export const Rating = memo(({ color = '#FFCC00', size, count = 5, renderStar = _jsx(Icon, { icon: faStar }), allowHalf, highlightSelectedOnly, defaultValue = 0, value, onChange, readOnly, disabled, ...props }) => {
+export const Rating = memo(({ color = '#FFCC00', size, count = 5, renderStar = _jsx(Icon, { icon: faStar }), allowHalf, highlightSelectedOnly = false, defaultValue = 0, value, onChange, readOnly, disabled, ...props }) => {
     const theme = useTheme();
     size ??= theme.size;
     const [innerValue, setInnerValue] = useControlled(defaultValue, value, onChange);
@@ -40,9 +40,7 @@ export const Rating = memo(({ color = '#FFCC00', size, count = 5, renderStar = _
             const isHalf = !highlightSelectedOnly && isActive && index > refer - 1;
             return (_jsxs("div", { className: classes.star, children: [characterIsFunction
                         ? renderStar({ index })
-                        : isValidElement(renderStar)
-                            ? cloneElement(renderStar, { index })
-                            : renderStar, isActive && (characterIsFunction
+                        : renderStar, isActive && (characterIsFunction
                         ? renderStar({
                             index,
                             active: true,
@@ -50,7 +48,6 @@ export const Rating = memo(({ color = '#FFCC00', size, count = 5, renderStar = _
                         })
                         : isValidElement(renderStar)
                             ? cloneElement(renderStar, {
-                                index,
                                 'data-active': true,
                                 'data-half': isHalf
                             })

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

@@ -23,8 +23,7 @@ export function useStyle({ color }) {
                 color: ${colorValue};
 
                 &[data-half=true] {
-                    width: 50%;
-                    overflow: hidden;
+                    clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%);
                 }
             }
 

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

@@ -1,6 +1,6 @@
 import { CSSProperties, ElementType } from 'react';
 import { ColorPropsValue, DivProps, OverridableComponent, OverridableProps, Placement, SlotsAndProps } from '../../types';
-import { DraggableOptions } from '../../utils';
+import { GestureOptions } from '../../utils';
 type HandleAbbr = 't' | 'r' | 'b' | 'l' | 'tl' | 'tr' | 'br' | 'bl' | 'lt' | 'rt' | 'lb' | 'rb';
 export type Handle = Placement | HandleAbbr;
 export interface ResizableOwnProps extends SlotsAndProps<{
@@ -24,7 +24,7 @@ export interface ResizableOwnProps extends SlotsAndProps<{
     fixedRatio?: boolean;
     onResize?(width: number, height: number): void;
     onResizeEnd?(width: number, height: number): void;
-    draggableOptions?: DraggableOptions<HTMLDivElement>;
+    gestureOptions?: GestureOptions;
     /** 受控的尺寸 */
     defaultWidth?: CSSProperties['width'];
     defaultHeight?: CSSProperties['height'];

package/dist/esm/components/resizable/resizable.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { useMemo, useRef, useState } from 'react';
-import { clsx, cloneRef, toArray, useDraggableHandle, useSync, useControlled } from '../../utils';
+import { clsx, cloneRef, toArray, useSync, useControlled, useDraggable } from '../../utils';
 import { classes, handleCursors, useStyle } from './resizable.style';
 const handleAlias = {
     t: 't',
@@ -28,7 +28,7 @@ const handleAlias = {
     bottomRight: 'br',
     rightBottom: 'br'
 };
-export const Resizable = (({ component: Component = 'div', slots = {}, slotProps = {}, variant = 'mouse', handles = ['t', 'r', 'b', 'l', 'tl', 'tr', 'br', 'bl'], handleSize = variant === 'mouse' ? 8 : 12, handleColor = 'secondary', handlePosition = 'outside', fixedRatio, onResize, onResizeEnd, draggableOptions, defaultWidth, defaultHeight, width, height, minWidth, minHeight, maxWidth, maxHeight, ...props }) => {
+export const Resizable = (({ component: Component = 'div', slots = {}, slotProps = {}, variant = 'mouse', handles = ['t', 'r', 'b', 'l', 'tl', 'tr', 'br', 'bl'], handleSize = variant === 'mouse' ? 8 : 12, handleColor = 'secondary', handlePosition = 'outside', fixedRatio, onResize, onResizeEnd, gestureOptions, defaultWidth, defaultHeight, width, height, minWidth, minHeight, maxWidth, maxHeight, ...props }) => {
     const abbrHandles = useMemo(() => {
         return [...toArray(handles).map(h => handleAlias[h])];
     }, [handles]);
@@ -37,10 +37,10 @@ export const Resizable = (({ component: Component = 'div', slots = {}, slotProps
     const [innerHeight, setInnerHeight] = useControlled(defaultHeight, height);
     const [dragStartState, setDragStartState] = useState();
     const syncProps = useSync({ onResize, onResizeEnd });
-    const draggableHandle = useDraggableHandle({
-        ...draggableOptions,
+    const draggableHandles = useDraggable({
+        ...gestureOptions,
         onDragStart(e) {
-            draggableOptions?.onDragStart?.(e);
+            gestureOptions?.onDragStart?.(e);
             const handleType = e.currentTarget.dataset.handle;
             setDragStartState({
                 width: innerRef.current.offsetWidth,
@@ -54,24 +54,24 @@ export const Resizable = (({ component: Component = 'div', slots = {}, slotProps
             document.body.style.cursor = handleCursors[handleType] || '';
         },
         onDrag(info, e) {
-            draggableOptions?.onDrag?.(info, e);
-            let { deltaX, deltaY } = info;
+            gestureOptions?.onDrag?.(info, e);
+            let { diff: [dx, dy] } = info;
             const { width, height, includeT, includeB, includeL, includeR } = dragStartState;
             if (includeL) {
-                deltaX *= -1;
+                dx *= -1;
             }
             if (includeT) {
-                deltaY *= -1;
+                dy *= -1;
             }
             if (includeL || includeR) {
-                setInnerWidth(width + deltaX);
+                setInnerWidth(width + dx);
             }
             if (includeT || includeB) {
-                setInnerHeight(height + deltaY);
+                setInnerHeight(height + dy);
             }
         },
         onDragEnd(info) {
-            draggableOptions?.onDragEnd?.(info);
+            gestureOptions?.onDragEnd?.(info);
             setDragStartState(void 0);
             document.body.style.cursor = '';
             syncProps.current?.onResizeEnd?.(innerRef.current.offsetWidth, innerRef.current.offsetHeight);
@@ -87,5 +87,5 @@ export const Resizable = (({ component: Component = 'div', slots = {}, slotProps
             maxHeight,
             ...typeof innerWidth.current === 'number' && { width: innerWidth.current },
             ...typeof innerHeight.current === 'number' && { height: innerHeight.current }
-        }, children: [_jsx(Container, { ...containerProps, className: clsx(classes.container, containerProps?.className), children: props.children }), abbrHandles.map(h => _jsx("div", { className: h.length === 1 ? classes.edge : classes.corner, "data-handle": h, "data-dragging": dragStartState?.handleType === h, ...draggableHandle }, h))] }));
+        }, children: [_jsx(Container, { ...containerProps, className: clsx(classes.container, containerProps?.className), children: props.children }), abbrHandles.map(h => _jsx("div", { className: h.length === 1 ? classes.edge : classes.corner, "data-handle": h, "data-dragging": dragStartState?.handleType === h, ...draggableHandles }, h))] }));
 });

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

@@ -12,7 +12,7 @@ export interface ScrollbarOwnProps extends SlotsAndProps<{
     variant?: 'contain' | 'cover';
     /** 是否自动隐藏滚动条，默认为`true` */
     autoHide?: boolean;
-    /** 默认为`1em` */
+    /** 默认为`0.8em` */
     size?: number | string;
     /** 默认的`ref`属性传递至`scroller`元素，外层元素的`ref`需要指定`wrapperRef` */
     wrapperRef?: Ref<HTMLDivElement>;

package/dist/esm/components/scrollbar/scrollbar.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { useEffect, useRef } from 'react';
-import { clsx, cloneRef, useDraggableHandle } from '../../utils';
+import { clsx, cloneRef, useDraggable } from '../../utils';
 import { classes, useStyle } from './scrollbar.style';
 export const Scrollbar = (({ component: Component = 'div', variant = 'contain', autoHide = true, size = '.8em', wrapperRef, onScroll, slots = {}, slotProps = {}, ...props }) => {
     const containerRef = useRef(null);
@@ -70,7 +70,7 @@ export const Scrollbar = (({ component: Component = 'div', variant = 'contain',
         thumbYRef.current.style.top = top + 'px';
         scrollerRef.current.scrollTop = top / verticalInfo.current.scrollRatio;
     };
-    const draggableHandleY = useDraggableHandle({
+    const draggableHandleY = useDraggable({
         onDragStart(e) {
             e.stopPropagation();
             containerRef.current.dataset.dragging = thumbYRef.current.dataset.dragging = 'true';
@@ -79,8 +79,8 @@ export const Scrollbar = (({ component: Component = 'div', variant = 'contain',
             }
             return parseInt(thumbYRef.current.style.top || '0');
         },
-        onDrag({ deltaY, startData }) {
-            updateScrollTop(startData + deltaY);
+        onDrag({ diff: [, dy], data }) {
+            updateScrollTop(data + dy);
         },
         onDragEnd() {
             containerRef.current.dataset.dragging = thumbYRef.current.dataset.dragging = 'false';
@@ -91,7 +91,7 @@ export const Scrollbar = (({ component: Component = 'div', variant = 'contain',
         thumbXRef.current.style.left = left + 'px';
         scrollerRef.current.scrollLeft = left / horizontalInfo.current.scrollRatio;
     };
-    const draggableHandleX = useDraggableHandle({
+    const draggableHandleX = useDraggable({
         onDragStart(e) {
             containerRef.current.dataset.dragging = thumbXRef.current.dataset.dragging = 'true';
             e.stopPropagation();
@@ -100,8 +100,8 @@ export const Scrollbar = (({ component: Component = 'div', variant = 'contain',
             }
             return parseInt(thumbXRef.current.style.left || '0');
         },
-        onDrag({ deltaX, startData }) {
-            updateScrollLeft(startData + deltaX);
+        onDrag({ diff: [dx], data }) {
+            updateScrollLeft(data + dx);
         },
         onDragEnd() {
             containerRef.current.dataset.dragging = thumbXRef.current.dataset.dragging = 'false';

package/dist/esm/components/segmented/SegmentedOption.d.ts

@@ -6,6 +6,6 @@ export interface SegmentedOptionProps extends Omit<DivProps, 'prefix'> {
     suffix?: ReactNode;
     value?: Id;
     label?: ReactNode;
-    disabled?: ReactNode;
+    disabled?: boolean;
 }
 export declare const SegmentedOption: import("react").MemoExoticComponent<({ orientation, prefix, suffix, value, label, disabled, ...props }: SegmentedOptionProps) => import("@emotion/react/jsx-runtime").JSX.Element>;

package/dist/esm/components/selectedList/selectedItem.js

@@ -9,7 +9,7 @@ export function SelectedItem({ value, index, itemProps, onClose, ...collapseProp
     const [loading, requestFn] = useLoading(async () => {
         itemProps && setAlertProps(await itemProps(value, index));
     });
-    useMemo(requestFn, []);
+    useMemo(requestFn, []).then();
     const closeHandler = (e) => {
         alertProps.current?.onClose?.(e);
         onClose?.(value, index);

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

@@ -6,7 +6,7 @@ export const classes = defineInnerClasses('selected-list', [
     'optionWrap'
 ]);
 export const style = defineCss(({ spacing }) => css `
-    .${classes.option}:not(:last-of-type) .${classes.optionWrap} {
+    .${classes.optionWrap} {
         margin-bottom: ${spacing[3]}px;
     }
 

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

@@ -3,7 +3,7 @@ import { DivProps } from '../../types';
 type SkeletonSharedProps = {
     /** 默认为`rounded` */
     variant?: 'circular' | 'rectangular' | 'rounded';
-    /** 是否播放动画，默认为`false` */
+    /** 是否播放动画，默认为`true` */
     animation?: boolean;
 };
 export interface SkeletonProps extends SkeletonSharedProps, DivProps {

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

@@ -1,11 +1,13 @@
 import { ReactElement } from 'react';
 import { DivProps } from '../../types';
-import { DraggableOptions } from '../../utils';
+import { GestureOptions } from '../../utils';
 import { SlidableActionsAction, SlidableActionsActionProps } from './slidableActionsAction';
 export declare function useSlidableActionsContext(): {
-    actionsContainer: (HTMLElement | null)[];
-    translate: number;
-    maxDistance: number;
+    actionsContainer?: (HTMLElement | null)[];
+    translate?: number;
+    resetTranslate?(): void;
+    maxDistance?: number;
+    autoReturn?: boolean;
 };
 type ActionType = SlidableActionsActionProps | ReactElement;
 export interface SlidableActionsProps extends DivProps {
@@ -17,8 +19,10 @@ export interface SlidableActionsProps extends DivProps {
     effectiveSpeed?: number;
     leftActions?: ActionType | ActionType[];
     rightActions?: ActionType | ActionType[];
+    /** 点击action后是否自动归位，默认为`true` */
+    autoReturn?: boolean;
     disabled?: boolean;
-    draggableOptions?: DraggableOptions<HTMLDivElement>;
+    gestureOptions?: GestureOptions;
 }
 export declare const SlidableActions: {
     (props: SlidableActionsProps): ReactElement;