@canlooks/can-ui 0.0.25 → 0.0.27

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

@@ -16,6 +16,7 @@ export function useStyle({ color }) {
             color: ${mode === 'light' ? gray(.14) : '#000000'};
             display: flex;
             position: relative;
+            -webkit-tap-highlight-color: transparent;
 
             [data-active=true] {
                 position: absolute;
@@ -59,7 +60,7 @@ export function useStyle({ color }) {
         &:not([data-read-only=true]) {
             .${classes.star} {
                 cursor: pointer;
-                transition: transform .2s ${easing.easeOut};
+                transition: transform .25s ${easing.easeOut};
     
                 &:hover {
                     transform: scale(1.2);

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

@@ -1,9 +1,11 @@
-import { CSSProperties } from 'react';
-import { ColorPropsValue, DIVProps, Placement } from '../../types';
+import { CSSProperties, ElementType } from 'react';
+import { ColorPropsValue, DivProps, OverridableComponent, OverridableProps, Placement, SlotsAndProps } from '../../types';
 import { DraggableOptions } from '../../utils';
 type HandleAbbr = 't' | 'r' | 'b' | 'l' | 'tl' | 'tr' | 'br' | 'bl' | 'lt' | 'rt' | 'lb' | 'rb';
 export type Handle = Placement | HandleAbbr;
-export interface ResizableProps extends Omit<DIVProps, 'onResize'> {
+export interface ResizableOwnProps extends SlotsAndProps<{
+    container: DivProps;
+}> {
     /** 默认为`mouse` */
     variant?: 'mouse' | 'touch';
     /** 使用的拖拽把手，默认全部生效。注意：使用“角把手”会同时渲染对应的两个“边把手”。 */
@@ -34,5 +36,6 @@ export interface ResizableProps extends Omit<DIVProps, 'onResize'> {
     maxWidth?: CSSProperties['maxWidth'];
     maxHeight?: CSSProperties['maxHeight'];
 }
-export declare function Resizable({ ref, variant, handles, handleSize, handleColor, handlePosition, fixedRatio, onResize, onResizeEnd, draggableOptions, defaultWidth, defaultHeight, width, height, minWidth, minHeight, maxWidth, maxHeight, ...props }: ResizableProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export type ResizableProps<C extends ElementType = 'div'> = OverridableProps<ResizableOwnProps, C>;
+export declare const Resizable: OverridableComponent<ResizableOwnProps>;
 export {};

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 { classnames, cloneRef, toArray, useDraggableHandle, useSync, useControlled } from '../../utils';
+import { clsx, cloneRef, toArray, useDraggableHandle, useSync, useControlled } from '../../utils';
 import { classes, handleCursors, useStyle } from './resizable.style';
 const handleAlias = {
     t: 't',
@@ -28,7 +28,7 @@ const handleAlias = {
     bottomRight: 'br',
     rightBottom: 'br'
 };
-export function Resizable({ ref, 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, draggableOptions, defaultWidth, defaultHeight, width, height, minWidth, minHeight, maxWidth, maxHeight, ...props }) => {
     const abbrHandles = useMemo(() => {
         return [...toArray(handles).map(h => handleAlias[h])];
     }, [handles]);
@@ -77,11 +77,13 @@ export function Resizable({ ref, variant = 'mouse', handles = ['t', 'r', 'b', 'l
             syncProps.current?.onResizeEnd?.(innerRef.current.offsetWidth, innerRef.current.offsetHeight);
         }
     });
-    return (_jsxs("div", { ...props, ref: cloneRef(ref, innerRef), css: useStyle({ variant, handleSize, handleColor }), className: classnames(classes.root, props.className), "data-dragging": !!dragStartState, "data-handle-position": handlePosition, style: {
+    const { container: Container = 'div' } = slots;
+    const { container: containerProps } = slotProps;
+    return (_jsxs(Component, { ...props, ref: cloneRef(innerRef, props.ref), css: useStyle({ variant, handleSize, handleColor: handleColor || 'secondary' }), className: clsx(classes.root, props.className), "data-dragging": !!dragStartState, "data-handle-position": handlePosition, style: {
             ...props.style,
             minWidth,
             minHeight,
             ...typeof innerWidth.current === 'number' && { width: innerWidth.current },
             ...typeof innerHeight.current === 'number' && { height: innerHeight.current }
-        }, children: [_jsx("div", { className: classes.container, 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, ...draggableHandle }, h))] }));
+});

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

@@ -1,8 +1,8 @@
 import { Handle, ResizableProps } from './resizable';
 export declare const classes: {
     container: string;
-    edge: string;
     corner: string;
+    edge: string;
 } & {
     root: string;
 };

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

@@ -33,6 +33,7 @@ export function useStyle({ variant, handleSize, handleColor }) {
                 .${classes.edge}, .${classes.corner} {
                     touch-action: none;
                     position: absolute;
+                    -webkit-tap-highlight-color: transparent;
                 }
 
                 .${classes.edge} {

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

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

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

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

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

@@ -0,0 +1,21 @@
+import { DivProps, OverridableComponent, OverridableProps, SlotsAndProps } from '../../types';
+import { ElementType, Ref } from 'react';
+export interface ScrollbarOwnProps extends SlotsAndProps<{
+    scroller: DivProps;
+    scrollerWrapper: DivProps;
+}> {
+    /**
+     * 默认为`contain`
+     * @enum `contain` 滚动条会挤压内容区域
+     * @enum `cover` 滚动条会覆盖在内容上
+     */
+    variant?: 'contain' | 'cover';
+    /** 是否自动隐藏滚动条，默认为`true` */
+    autoHide?: boolean;
+    /** 默认为`1em` */
+    size?: number | string;
+    /** 默认的`ref`属性传递至`scroller`元素，外层元素的`ref`需要指定`wrapperRef` */
+    wrapperRef?: Ref<HTMLDivElement>;
+}
+export type ScrollbarProps<C extends ElementType = 'div'> = OverridableProps<ScrollbarOwnProps, C>;
+export declare const Scrollbar: OverridableComponent<ScrollbarOwnProps>;

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

@@ -0,0 +1,122 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { useEffect, useRef } from 'react';
+import { clsx, cloneRef, useDraggableHandle } 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);
+    const scrollerRef = useRef(null);
+    const scrollerWrapperRef = useRef(null);
+    if (typeof size === 'number') {
+        size = size + 'px';
+    }
+    const trackXRef = useRef(null);
+    const trackYRef = useRef(null);
+    const thumbXRef = useRef(null);
+    const thumbYRef = useRef(null);
+    const verticalInfo = useRef({
+        thumbScrollLength: 0,
+        scrollRatio: 1
+    });
+    const horizontalInfo = useRef({
+        thumbScrollLength: 0,
+        scrollRatio: 1
+    });
+    useEffect(() => {
+        const container = containerRef.current;
+        const scroller = scrollerRef.current;
+        const scrollerWrapper = scrollerWrapperRef.current;
+        if (!container || !scroller || !scrollerWrapper) {
+            return;
+        }
+        const resizeObserver = new ResizeObserver(() => {
+            container.dataset.verticalScrollable = container.dataset.horizontalScrollable = 'true';
+            const { scrollHeight, clientHeight, scrollWidth, clientWidth } = scroller;
+            if (scrollHeight > clientHeight) {
+                const { offsetHeight } = trackYRef.current;
+                thumbYRef.current.style.height = offsetHeight * (clientHeight / scrollHeight) + 'px';
+                const contentScrollLength = scrollHeight - clientHeight;
+                const thumbScrollLength = verticalInfo.current.thumbScrollLength = offsetHeight - thumbYRef.current.offsetHeight;
+                verticalInfo.current.scrollRatio = thumbScrollLength / contentScrollLength;
+            }
+            else {
+                container.dataset.verticalScrollable = 'false';
+            }
+            if (scrollWidth > clientWidth) {
+                const { offsetWidth } = trackXRef.current;
+                thumbXRef.current.style.width = offsetWidth * (clientWidth / scrollWidth) + 'px';
+                const contentScrollLength = scrollWidth - clientWidth;
+                const thumbScrollLength = horizontalInfo.current.thumbScrollLength = offsetWidth - thumbXRef.current.offsetWidth;
+                horizontalInfo.current.scrollRatio = thumbScrollLength / contentScrollLength;
+            }
+            else {
+                container.dataset.horizontalScrollable = 'false';
+            }
+        });
+        resizeObserver.observe(scroller);
+        resizeObserver.observe(scrollerWrapper);
+        return () => {
+            resizeObserver.disconnect();
+        };
+    }, []);
+    const scrollHandler = (e) => {
+        onScroll?.(e);
+        scrollerProps?.onScroll?.(e);
+        const { scrollTop, scrollLeft } = scrollerRef.current;
+        thumbYRef.current.style.top = scrollTop * verticalInfo.current.scrollRatio + 'px';
+        thumbXRef.current.style.left = scrollLeft * horizontalInfo.current.scrollRatio + 'px';
+    };
+    const updateScrollTop = (top) => {
+        top = Math.max(Math.min(top, verticalInfo.current.thumbScrollLength), 0);
+        thumbYRef.current.style.top = top + 'px';
+        scrollerRef.current.scrollTop = top / verticalInfo.current.scrollRatio;
+    };
+    const draggableHandleY = useDraggableHandle({
+        onDragStart(e) {
+            e.stopPropagation();
+            containerRef.current.dataset.dragging = thumbYRef.current.dataset.dragging = 'true';
+            if (e.target === trackYRef.current) {
+                updateScrollTop(e.clientY - trackYRef.current.getBoundingClientRect().top - thumbYRef.current.offsetHeight / 2);
+            }
+            return parseInt(thumbYRef.current.style.top || '0');
+        },
+        onDrag({ deltaY, startData }) {
+            updateScrollTop(startData + deltaY);
+        },
+        onDragEnd() {
+            containerRef.current.dataset.dragging = thumbYRef.current.dataset.dragging = 'false';
+        }
+    });
+    const updateScrollLeft = (left) => {
+        left = Math.max(Math.min(left, horizontalInfo.current.thumbScrollLength), 0);
+        thumbXRef.current.style.left = left + 'px';
+        scrollerRef.current.scrollLeft = left / horizontalInfo.current.scrollRatio;
+    };
+    const draggableHandleX = useDraggableHandle({
+        onDragStart(e) {
+            containerRef.current.dataset.dragging = thumbXRef.current.dataset.dragging = 'true';
+            e.stopPropagation();
+            if (e.target === trackXRef.current) {
+                updateScrollLeft(e.clientX - trackXRef.current.getBoundingClientRect().left - thumbXRef.current.offsetWidth / 2);
+            }
+            return parseInt(thumbXRef.current.style.left || '0');
+        },
+        onDrag({ deltaX, startData }) {
+            updateScrollLeft(startData + deltaX);
+        },
+        onDragEnd() {
+            containerRef.current.dataset.dragging = thumbXRef.current.dataset.dragging = 'false';
+        }
+    });
+    const { scroller: Scroller = 'div', scrollerWrapper: ScrollerWrapper = 'div', } = slots;
+    const { scroller: scrollerProps, scrollerWrapper: scrollerWrapperProps } = slotProps;
+    return (_jsxs(Component, { ...props, ref: cloneRef(containerRef, wrapperRef), css: useStyle({ size }), className: clsx(classes.root, props.className), "data-variant": variant, "data-autohide": autoHide, ...variant === 'cover' && autoHide && {
+            onPointerEnter: e => {
+                e.currentTarget.dataset.hover = 'true';
+                props.onPointerEnter?.(e);
+            },
+            onPointerLeave: e => {
+                e.currentTarget.dataset.hover = 'false';
+                props.onPointerLeave?.(e);
+            }
+        }, children: [_jsx(Scroller, { ...scrollerProps, ref: cloneRef(scrollerRef, props.ref, scrollerProps?.ref), className: clsx(classes.scroller, scrollerProps?.className), onScroll: scrollHandler, children: _jsx(ScrollerWrapper, { ...scrollerWrapperProps, ref: cloneRef(scrollerWrapperRef, scrollerWrapperProps?.ref), className: clsx(classes.scrollerWrapper, scrollerWrapperProps?.className), children: props.children }) }), _jsx("div", { ref: trackYRef, className: classes.trackY, ...draggableHandleY, children: _jsx("div", { ref: thumbYRef, className: classes.thumb, ...draggableHandleY, children: _jsx("div", { className: classes.block }) }) }), _jsx("div", { ref: trackXRef, className: classes.trackX, ...draggableHandleX, children: _jsx("div", { ref: thumbXRef, className: classes.thumb, ...draggableHandleX, children: _jsx("div", { className: classes.block }) }) })] }));
+});

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

@@ -0,0 +1,15 @@
+export declare const classes: {
+    track: string;
+    block: string;
+    corner: string;
+    scroller: string;
+    scrollerWrapper: string;
+    trackX: string;
+    trackY: string;
+    thumb: string;
+} & {
+    root: string;
+};
+export declare function useStyle({ size }: {
+    size: string;
+}): import("@emotion/react").SerializedStyles;

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

@@ -0,0 +1,119 @@
+import { defineClasses, useCss } from '../../utils';
+import { css } from '@emotion/react';
+import Color from 'color';
+export const classes = defineClasses('scrollbar', [
+    'scroller',
+    'scrollerWrapper',
+    'track',
+    'trackX',
+    'trackY',
+    'thumb',
+    'block',
+    'corner'
+]);
+export function useStyle({ size }) {
+    return useCss(({ text, easing }) => {
+        const blockColor = Color(text.primary);
+        return css `
+            position: relative;
+
+            .${classes.scroller} {
+                height: 100%;
+                flex: 1;
+                position: relative;
+                z-index: 0;
+                overflow: auto;
+                scrollbar-width: none;
+                -ms-overflow-style: none;
+
+                &::-webkit-scrollbar {
+                    display: none;
+                }
+            }
+
+            &[data-variant=contain] {
+                &[data-vertical-scrollable=true] {
+                    padding-right: ${size};
+                }
+
+                &[data-horizontal-scrollable=true] {
+                    padding-bottom: ${size};
+                }
+            }
+
+            .${classes.trackX},
+            .${classes.trackY},
+            .${classes.thumb},
+            .${classes.corner} {
+                position: absolute;
+                touch-action: none;
+            }
+
+            .${classes.thumb} {
+                min-width: ${size};
+                min-height: ${size};
+
+                .${classes.block} {
+                    border-radius: calc(${size} * .5);
+                    position: absolute;
+                    inset: 2px;
+                    background: ${blockColor.alpha(.3).string()};
+
+                    &:hover {
+                        background: ${blockColor.alpha(.4).string()};
+                    }
+                }
+
+                &[data-dragging=true] .${classes.block} {
+                    background: ${blockColor.alpha(.6).string()};
+                }
+            }
+
+            .${classes.trackX} {
+                height: ${size};
+                left: 0;
+                bottom: 0;
+                right: ${size};
+                display: none;
+            }
+
+            .${classes.trackY} {
+                width: ${size};
+                right: 0;
+                top: 0;
+                bottom: ${size};
+                display: none;
+            }
+
+            &[data-vertical-scrollable=true] {
+                .${classes.trackY} {
+                    display: block;
+                }
+            }
+
+            &[data-horizontal-scrollable=true] {
+                .${classes.trackX} {
+                    display: block;
+                }
+            }
+
+            &[data-autohide=true][data-variant=cover] {
+                .${classes.trackX},
+                .${classes.trackY},
+                .${classes.corner} {
+                    opacity: 0;
+                    transition: opacity .5s ${easing.easeIn};
+                }
+
+                &[data-hover=true], &[data-dragging=true] {
+                    .${classes.trackX},
+                    .${classes.trackY},
+                    .${classes.corner} {
+                        opacity: 1;
+                        transition: opacity 0s;
+                    }
+                }
+            }
+        `;
+    }, [size]);
+}

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

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
-import { DIVProps, Id } from '../../types';
-export interface SegmentedOptionProps extends Omit<DIVProps, 'prefix'> {
+import { DivProps, Id } from '../../types';
+export interface SegmentedOptionProps extends Omit<DivProps, 'prefix'> {
     orientation?: 'horizontal' | 'vertical';
     prefix?: ReactNode;
     suffix?: ReactNode;

package/dist/esm/components/segmented/SegmentedOption.js

@@ -1,9 +1,9 @@
 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 } from './segmented.style';
 export const SegmentedOption = memo(({ orientation, prefix, suffix, value, label, disabled, ...props }) => {
-    return (_jsxs("div", { ...props, className: classnames(classes.option, props.className), "data-orientation": orientation, "data-disabled": disabled, onClick: e => {
+    return (_jsxs("div", { ...props, className: clsx(classes.option, props.className), "data-orientation": orientation, "data-disabled": disabled, onClick: e => {
             !disabled && props.onClick?.(e);
         }, children: [!!prefix &&
                 _jsx("div", { className: classes.prefix, children: prefix }), _jsx("div", { className: classes.label, children: label }), !!suffix &&

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

@@ -1,8 +1,8 @@
 import { ReactElement } from 'react';
-import { DIVProps, Id, Obj, Size } from '../../types';
+import { DivProps, Id, Obj, Size } from '../../types';
 import { SegmentedOption, SegmentedOptionProps } from './SegmentedOption';
 export type ISegmentedOption = SegmentedOptionProps & Obj;
-export interface SegmentedProps<O extends ISegmentedOption, V extends Id = Id> extends Omit<DIVProps, 'defaultValue' | 'onChange'> {
+export interface SegmentedProps<O extends ISegmentedOption, V extends Id = Id> extends Omit<DivProps, 'defaultValue' | 'onChange'> {
     options?: O[];
     orientation?: 'horizontal' | 'vertical';
     size?: Size;

package/dist/esm/components/segmented/segmented.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { Children, cloneElement, isValidElement, memo, useEffect, useRef, useState } from 'react';
 import { classes, style } from './segmented.style';
-import { classnames, cloneRef, isUnset, useControlled, useDerivedState } from '../../utils';
+import { clsx, cloneRef, isUnset, useControlled, useDerivedState } from '../../utils';
 import { SegmentedOption } from './SegmentedOption';
 import { useTheme } from '../theme';
 export const Segmented = memo(({ options, orientation = 'horizontal', size, labelKey = 'label', primaryKey = 'value', fullWidth, defaultValue, value, onChange, readOnly, disabled, ...props }) => {
@@ -47,10 +47,9 @@ export const Segmented = memo(({ options, orientation = 'horizontal', size, labe
                 const v = p[primaryKey];
                 const active = !isUnset(v) && v === innerValue.current;
                 return (_jsx(SegmentedOption, { orientation: p.orientation, prefix: p.prefix, suffix: p.suffix, disabled: p.disabled, ref: r => {
-                        optionRefs.current.set(v, r);
-                        return () => {
-                            optionRefs.current.delete(v);
-                        };
+                        r
+                            ? optionRefs.current.set(v, r)
+                            : optionRefs.current.delete(v);
                     }, value: v, label: p[labelKey], onClick: e => {
                         p.onClick?.(e);
                         setInnerValue(v);
@@ -75,6 +74,6 @@ export const Segmented = memo(({ options, orientation = 'horizontal', size, labe
             return c;
         });
     };
-    return (_jsxs("div", { ...props, css: style, className: classnames(classes.root, props.className), "data-full-width": fullWidth, "data-animating": animating, "data-orientation": orientation, "data-size": size, "data-read-only": readOnly, "data-disabled": disabled, children: [_jsx("div", { className: classes.indicator, onTransitionEnd: () => setAnimating(false), style: indicatorRect.current }), renderOptions()] }));
+    return (_jsxs("div", { ...props, css: style, className: clsx(classes.root, props.className), "data-full-width": fullWidth, "data-animating": animating, "data-orientation": orientation, "data-size": size, "data-read-only": readOnly, "data-disabled": disabled, children: [_jsx("div", { className: classes.indicator, onTransitionEnd: () => setAnimating(false), style: indicatorRect.current }), renderOptions()] }));
 });
 Segmented.Option = SegmentedOption;

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

@@ -1,8 +1,8 @@
 export declare const classes: {
     label: string;
     option: string;
-    prefix: string;
     indicator: string;
+    prefix: string;
     suffix: string;
 } & {
     root: string;

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

@@ -31,6 +31,7 @@ export const style = defineCss(({ mode, background, borderRadius, easing, text }
             overflow: hidden;
             z-index: 1;
             transition: background-color .3s ${easing.easeOut};
+            -webkit-tap-highlight-color: transparent;
 
             &[data-active=true] {
                 transition: background-color 0s;
@@ -98,7 +99,7 @@ export const style = defineCss(({ mode, background, borderRadius, easing, text }
         }
 
         &:not([data-read-only=true]):not([data-disabled=true]) {
-            \.${classes.option}:not([data-disabled=true]) {
+            .${classes.option}:not([data-disabled=true]) {
                 cursor: pointer;
                 
                 &:not([data-active=true]):hover {

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

@@ -1,4 +1,4 @@
-import React, { ReactElement, ReactNode, Ref } from 'react';
+import { ReactElement, ReactNode, Ref, JSX } from 'react';
 import { InputBaseProps } from '../inputBase';
 import { PopperProps, PopperRef } from '../popper';
 import { MenuItem } from '../menuItem';
@@ -7,8 +7,7 @@ import { InputProps } from '../input';
 import { Id, SelectableMultipleProps, SelectableSingleProps } from '../../types';
 export interface SelectBaseProps<O extends MenuOptionType> extends OptionsBaseSharedProps<O>, Omit<InputBaseProps<'input'>, 'children' | 'defaultValue' | 'value' | 'onChange'> {
     /** <select />内部由<input />实现 */
-    inputProps?: React.JSX.IntrinsicElements['input'];
-    inputRef?: Ref<HTMLInputElement>;
+    inputProps?: JSX.IntrinsicElements['input'];
     popperProps?: PopperProps;
     popperRef?: Ref<PopperRef>;
     defaultOpen?: boolean;
@@ -33,4 +32,4 @@ export declare const Select: {
     <O extends MenuOptionType, V extends Id = Id>(props: SelectProps<O, V>): ReactElement;
     Option: typeof MenuItem;
 };
-export declare const Option: React.MemoExoticComponent<({ value, size, color, emphasized, selected, focused, disabled, showCheckbox, checkboxProps, ellipsis, prefix, label, suffix, searchToken, _level, indent, expandIcon, defaultExpanded, expanded, onExpandedChange, ...props }: import("../menuItem").MenuItemProps) => import("@emotion/react/jsx-runtime").JSX.Element>;
+export declare const Option: import("react").MemoExoticComponent<({ value, size, color, emphasized, selected, focused, disabled, showCheckbox, checkboxProps, ellipsis, prefix, label, suffix, searchToken, _level, indent, expandIcon, defaultExpanded, expanded, onExpandedChange, ...props }: import("../menuItem").MenuItemProps) => import("@emotion/react/jsx-runtime").JSX.Element>;

package/dist/esm/components/select/select.js

@@ -1,18 +1,20 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@emotion/react/jsx-runtime";
 import { Children, isValidElement, memo, useCallback, useDeferredValue, useMemo, useRef } from 'react';
 import { InputBase } from '../inputBase';
-import { classnames, cloneRef, toArray, useControlled } from '../../utils';
+import { clsx, toArray, useControlled } from '../../utils';
 import { classes, style } from './select.style';
 import { Popper } from '../popper';
 import { MenuItem } from '../menuItem';
-import { CaretDownOutlined, SearchOutlined } from '@ant-design/icons';
 import { Tag } from '../tag';
 import { OptionsBase } from '../optionsBase';
 import { Input } from '../input';
 import { LoadingIndicator } from '../loadingIndicator';
 import { popperStyle } from '../popper/popper.style';
 import { useShallowSelection } from '../selectionContext';
-export const Select = memo(({ inputProps, inputRef, popperProps, popperRef, defaultOpen = false, open, onOpenChange, sizeAdaptable = true, children, multiple, defaultValue, value, onChange, renderBackfill, searchable, defaultSearchValue = '', searchValue, onSearchChange, searchInputProps, 
+import { Icon } from '../..';
+import { faChevronDown } from '@fortawesome/free-solid-svg-icons/faChevronDown';
+import { faMagnifyingGlass } from '@fortawesome/free-solid-svg-icons/faMagnifyingGlass';
+export const Select = memo(({ inputProps, popperProps, popperRef, defaultOpen = false, open, onOpenChange, sizeAdaptable = true, children, multiple, defaultValue, value, onChange, renderBackfill, searchable, defaultSearchValue = '', searchValue, onSearchChange, searchInputProps, 
 // 从OptionsBaseSharedProps继承的属性
 showCheckbox = !!multiple, loading, options, labelKey = 'label', primaryKey = 'value', searchTokenKey = 'searchToken', filterPredicate, ...props }) => {
     const [innerOpen, _setInnerOpen] = useControlled(defaultOpen, open, onOpenChange);
@@ -69,27 +71,27 @@ showCheckbox = !!multiple, loading, options, labelKey = 'label', primaryKey = 'v
     }, [optionsArr, primaryKey]);
     const renderBackfillFn = () => {
         if (renderBackfill) {
-            return renderBackfill(innerValue.current);
+            return renderBackfill(innerValue);
         }
         if (multiple) {
-            return innerValue.current?.map((v) => _jsx(Tag, { closable: true, onClose: () => toggleSelected(v), children: optionsMap.get(v)?.[labelKey] ?? v }, v));
+            return innerValue?.map((v) => _jsx(Tag, { closable: true, onClose: () => toggleSelected(v), children: optionsMap.get(v)?.[labelKey] ?? v }, v));
         }
-        return (_jsx("div", { className: classes.backfillWrap, children: optionsMap.get(innerValue.current)?.[labelKey] ?? innerValue.current }));
+        return (_jsx("div", { className: classes.backfillWrap, children: optionsMap.get(innerValue)?.[labelKey] ?? innerValue }));
     };
     return (_jsx(Popper, { css: popperStyle, open: innerOpen.current, onOpenChange: openChangeHandler, onOpenChangeEnd: openChangeEnd, placement: "bottom", variant: "collapse", trigger: ['click', 'enter'], disabled: props.disabled || props.readOnly, sizeAdaptable: sizeAdaptable, content: _jsxs(_Fragment, { children: [searchable &&
-                    _jsx(Input, { inputRef: searchInputRef, prefix: _jsx(SearchOutlined, {}), placeholder: "\u641C\u7D22", value: innerSearchValue.current, ...searchInputProps, onChange: e => {
+                    _jsx(Input, { inputProps: { ref: searchInputRef }, prefix: _jsx(Icon, { icon: faMagnifyingGlass }), placeholder: "\u641C\u7D22", value: innerSearchValue.current, ...searchInputProps, onChange: e => {
                             searchInputProps?.onChange?.(e);
                             setInnerSearchValue?.(e.target.value);
                         }, onBlur: e => {
                             searchInputProps?.onBlur?.(e);
                             blurHandler();
-                        } }), _jsx(OptionsBase, { selectedValue: innerValue.current, onToggleSelected: toggleSelected, showCheckbox: showCheckbox, loading: loading, options: options, labelKey: labelKey, primaryKey: primaryKey, searchTokenKey: searchTokenKey, searchValue: deferredSearchValue, filterPredicate: filterPredicate, children: children })] }), ...popperProps, popperRef: popperRef, onPointerDown: e => {
+                        } }), _jsx(OptionsBase, { selectedValue: innerValue, onToggleSelected: toggleSelected, showCheckbox: showCheckbox, loading: loading, options: options, labelKey: labelKey, primaryKey: primaryKey, searchTokenKey: searchTokenKey, searchValue: deferredSearchValue, filterPredicate: filterPredicate, children: children })] }), ...popperProps, popperRef: popperRef, onPointerDown: e => {
             popperProps?.onPointerDown?.(e);
             e.preventDefault();
-        }, children: _jsx(InputBase, { clearable: !!multiple, ...props, css: style, className: classnames(classes.root, props.className), "data-focused": innerOpen.current, value: innerValue.current, onClear: clearHandler, onBlur: blurHandler, children: ({ ref, ...rest }) => _jsxs("div", { className: classes.contentWrap, children: [!toArray(innerValue.current)?.length
+        }, children: _jsx(InputBase, { clearable: !!multiple, ...props, css: style, className: clsx(classes.root, props.className), "data-focused": innerOpen.current, value: innerValue, onClear: clearHandler, onBlur: blurHandler, children: inputBaseProps => _jsxs("div", { className: classes.contentWrap, children: [!toArray(innerValue)?.length
                         ? _jsx("div", { className: classes.placeholder, children: props.placeholder ?? '请选择' })
-                        : _jsx("div", { className: classes.backfill, children: renderBackfillFn() }), _jsx("input", { size: 1, ...rest, ...inputProps, ref: cloneRef(ref, inputRef), "data-hidden": "true" }), _jsx("div", { className: classes.arrow, "data-open": innerOpen.current, children: loading
+                        : _jsx("div", { className: classes.backfill, children: renderBackfillFn() }), _jsx("input", { size: 1, ...inputBaseProps, ...inputProps, "data-hidden": "true" }), _jsx("div", { className: classes.arrow, "data-open": innerOpen.current, children: loading
                             ? _jsx(LoadingIndicator, {})
-                            : _jsx(CaretDownOutlined, {}) })] }) }) }));
+                            : _jsx(Icon, { icon: faChevronDown }) })] }) }) }));
 });
 export const Option = Select.Option = MenuItem;

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

@@ -28,7 +28,7 @@ export const style = defineCss(({ spacing, text, easing }) => css `
 
     .${classes.arrow} {
         color: ${text.placeholder};
-        transition: transform .2s ${easing.easeOut};
+        transition: transform .25s ${easing.easeOut};
 
         &[data-open=true] {
             transform: rotate(180deg);

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { Alert } from '../alert';
-import { classnames, useLoading, useSyncState } from '../../utils';
+import { clsx, useLoading, useSyncState } from '../../utils';
 import { useMemo } from 'react';
 import { Collapse } from '../transitionBase';
 import { classes } from './selectedList.style';
@@ -14,5 +14,5 @@ export function SelectedItem({ value, index, itemProps, onClose, ...collapseProp
         alertProps.current?.onClose?.(e);
         onClose?.(value, index);
     };
-    return (_jsx(Collapse, { ...collapseProps, className: classes.option, children: _jsx(Alert, { closable: true, color: "info", showIcon: false, ...alertProps.current, className: classnames(classes.optionWrap, alertProps.current?.className), onClose: closeHandler, loading: loading.current }) }));
+    return (_jsx(Collapse, { ...collapseProps, className: classes.option, children: _jsx(Alert, { closable: true, color: "info", showIcon: false, ...alertProps.current, className: clsx(classes.optionWrap, alertProps.current?.className), onClose: closeHandler, loading: loading.current }) }));
 }

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { memo } from 'react';
-import { classnames, toArray } from '../../utils';
+import { clsx, toArray } from '../../utils';
 import { classes, style } from './selectedList.style';
 import { TransitionGroup } from 'react-transition-group';
 import { useSelectionContext } from '../selectionContext';
@@ -12,5 +12,5 @@ export const SelectedList = memo(({ value, itemProps, onClose, ...props }) => {
         onClose?.(v, i);
         setInnerValue?.(arr?.filter(_v => _v !== v));
     };
-    return (_jsx(TransitionGroup, { ...props, css: style, className: classnames(classes.root, props.className), children: arr?.map((v, i) => _jsx(SelectedItem, { value: v, index: i, itemProps: itemProps, onClose: closeHandler }, v)) }));
+    return (_jsx(TransitionGroup, { ...props, css: style, className: clsx(classes.root, props.className), children: arr?.map((v, i) => _jsx(SelectedItem, { value: v, index: i, itemProps: itemProps, onClose: closeHandler }, v)) }));
 });

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

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