@canlooks/can-ui 0.0.21 → 0.0.22

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

@@ -62,13 +62,13 @@ export function useStyle({ color, variant }) {
 
                 &[data-success=true] {
                     .${classes.bar} {
-                        background-color: ${colors.success};
+                        background-color: ${colors.success.main};
                     }
                 }
 
                 &[data-error=true] {
                     .${classes.bar} {
-                        background-color: ${colors.error};
+                        background-color: ${colors.error.main};
                     }
                 }
 
@@ -107,13 +107,13 @@ export function useStyle({ color, variant }) {
 
                 &[data-success=true] {
                     .${classes.bar} {
-                        stroke: ${colors.success};
+                        stroke: ${colors.success.main};
                     }
                 }
 
                 &[data-error=true] {
                     .${classes.bar} {
-                        stroke: ${colors.error};
+                        stroke: ${colors.error.main};
                     }
                 }
 

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

@@ -1,13 +1,13 @@
 import { ReactElement } from 'react';
 import { CheckboxBaseProps } from '../checkboxBase';
-import { CheckboxBaseGroupSingleProps, ItemType } from '../checkboxBaseGroup';
-import { Id } from '../../../types';
+import { CheckboxBaseGroupCommonProps, ItemType } from '../checkboxBaseGroup';
+import { Id, SelectableSingleProps } from '../../../types';
 export interface RadioProps extends Omit<CheckboxBaseProps, '_type' | 'indeterminate'> {
 }
 export declare const Radio: {
     (props: RadioProps): ReactElement;
     Group: typeof RadioGroup;
 };
-export interface RadioGroupProps<I extends ItemType, V extends Id = Id> extends Omit<CheckboxBaseGroupSingleProps<I, V>, 'multiple'> {
+export interface RadioGroupProps<I extends ItemType, V extends Id = Id> extends CheckboxBaseGroupCommonProps<I>, Omit<SelectableSingleProps<V>, 'multiple'> {
 }
-export declare const RadioGroup: import("react").ForwardRefExoticComponent<Omit<RadioGroupProps<ItemType, Id>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const RadioGroup: <I extends ItemType, V extends Id = Id>(props: RadioGroupProps<I, V>) => ReactElement;

package/dist/esm/components/radio/radio.js

@@ -1,10 +1,9 @@
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-import { forwardRef } from 'react';
 import { CheckboxBase } from '../checkboxBase';
 import { CheckboxBaseGroup } from '../checkboxBaseGroup';
-export const Radio = forwardRef((props, ref) => {
-    return _jsx(CheckboxBase, { ...props, ref: ref, _type: "radio" });
+export const Radio = ((props) => {
+    return _jsx(CheckboxBase, { ...props, _type: "radio" });
 });
-export const RadioGroup = forwardRef((props, ref) => {
-    return _jsx(CheckboxBaseGroup, { ...props, ref: ref });
+export const RadioGroup = ((props) => {
+    return _jsx(CheckboxBaseGroup, { ...props });
 });

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

@@ -8,12 +8,12 @@ export type CharacterProps = {
 export interface RatingProps extends Omit<DIVProps, 'defaultValue' | 'onChange'> {
     color?: ColorPropsValue;
     size?: Size;
-    /** 星星的数量，@default 5 */
+    /** 星星的数量，默认为`5` */
     count?: number;
     renderStar?: ReactNode | ((characterProps: CharacterProps) => ReactNode);
     /** 允许选中半颗星 */
     allowHalf?: boolean;
-    /** 为true时只高亮选中的星星，否则从第一颗开始高亮至选中，@default false */
+    /** 为true时只高亮选中的星星，否则从第一颗开始高亮至选中，默认为`false` */
     highlightSelectedOnly?: boolean;
     defaultValue?: number;
     value?: number;
@@ -21,4 +21,4 @@ export interface RatingProps extends Omit<DIVProps, 'defaultValue' | 'onChange'>
     readOnly?: boolean;
     disabled?: boolean;
 }
-export declare const Rating: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Omit<RatingProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>>;
+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>;

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

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-import { cloneElement, forwardRef, isValidElement, memo, useState } from 'react';
+import { cloneElement, isValidElement, memo, useState } from 'react';
 import { classnames, useControlled } from '../../utils';
 import { classes, useStyle } from './rating.style';
 import { StarFilled } from '@ant-design/icons';
-import { useTheme } from '../app';
-export const Rating = memo(forwardRef(({ color = '#FFCC00', size, count = 5, renderStar = _jsx(StarFilled, {}), allowHalf, highlightSelectedOnly, defaultValue = 0, value, onChange, readOnly, disabled, ...props }, ref) => {
+import { useTheme } from '../theme';
+export const Rating = memo(({ color = '#FFCC00', size, count = 5, renderStar = _jsx(StarFilled, {}), allowHalf, highlightSelectedOnly, defaultValue = 0, value, onChange, readOnly, disabled, ...props }) => {
     const theme = useTheme();
     size ??= theme.size;
     const [innerValue, setInnerValue] = useControlled(defaultValue, value, onChange);
@@ -56,5 +56,5 @@ export const Rating = memo(forwardRef(({ color = '#FFCC00', size, count = 5, ren
                             : renderStar), _jsx("div", { className: classes.starBefore, onPointerEnter: () => enterHandler(index, true), onClick: () => clickHandler(index, true) }), _jsx("div", { className: classes.starAfter, onPointerEnter: () => enterHandler(index, false), onClick: () => clickHandler(index, false) })] }, index));
         });
     };
-    return (_jsx("div", { ...props, ref: ref, css: useStyle({ color }), className: classnames(classes.root, props.className), "data-size": size, "data-read-only": readOnly, "data-disabled": disabled, onPointerLeave: leaveHandler, children: renderStarFn() }));
-}));
+    return (_jsx("div", { ...props, css: useStyle({ color }), className: classnames(classes.root, props.className), "data-size": size, "data-read-only": readOnly, "data-disabled": disabled, onPointerLeave: leaveHandler, children: renderStarFn() }));
+});

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

@@ -1,25 +1,38 @@
+import { CSSProperties } from 'react';
 import { ColorPropsValue, DIVProps, Placement } from '../../../types';
 import { DraggableOptions } from '../../utils';
-export type Handle = Placement | 't' | 'r' | 'b' | 'l' | 'tl' | 'tr' | 'br' | 'bl' | 'lt' | 'rt' | 'lb' | 'rb';
+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'> {
-    /** @default "mouse" */
+    /** 默认为`mouse` */
     variant?: 'mouse' | 'touch';
     /** 使用的拖拽把手，默认全部生效。注意：使用“角把手”会同时渲染对应的两个“边把手”。 */
     handles?: Handle | Handle[];
     /**
      * 拖拽把手的尺寸
-     * {@link variant}为"mouse"时，@default 8
-     * {@link variant}为"touch"时，@default 12
+     * @enum {@link variant}为`mouse`时，默认为`8`
+     * @enum {@link variant}为`touch`时，默认为`12`
      */
     handleSize?: number;
-    /** 拖拽把手颜色，@default "secondary" */
+    /** 拖拽把手颜色，默认为`secondary` */
     handleColor?: ColorPropsValue;
-    /** {@link variant}为"touch"时生效，@default "outside" */
+    /** {@link variant}为`touch`时生效，默认为`outside` */
     handlePosition?: 'outside' | 'inside';
-    /** 是否固定长宽比例，@default false */
+    /** 是否固定长宽比例，默认为`false` */
     fixedRatio?: boolean;
     onResize?(width: number, height: number): void;
     onResizeEnd?(width: number, height: number): void;
     draggableOptions?: DraggableOptions<HTMLDivElement>;
+    /** 受控的尺寸 */
+    defaultWidth?: CSSProperties['width'];
+    defaultHeight?: CSSProperties['height'];
+    width?: CSSProperties['width'];
+    height?: CSSProperties['height'];
+    /** 设定尺寸限制 */
+    minWidth?: CSSProperties['minWidth'];
+    minHeight?: CSSProperties['minHeight'];
+    maxWidth?: CSSProperties['maxWidth'];
+    maxHeight?: CSSProperties['maxHeight'];
 }
-export declare const Resizable: import("react").ForwardRefExoticComponent<Omit<ResizableProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+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 {};

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

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-import { forwardRef, useMemo, useRef, useState } from 'react';
-import { classnames, cloneRef, toArray, useDraggableHandle, useSync, useSyncState } from '../../utils';
+import { useMemo, useRef, useState } from 'react';
+import { classnames, cloneRef, toArray, useDraggableHandle, useSync, useControlled } from '../../utils';
 import { classes, handleCursors, useStyle } from './resizable.style';
-const handleUnification = {
+const handleAlias = {
     t: 't',
     r: 'r',
     b: 'b',
@@ -28,23 +28,13 @@ const handleUnification = {
     bottomRight: 'br',
     rightBottom: 'br'
 };
-export const Resizable = forwardRef(({ variant = 'mouse', handles = ['t', 'r', 'b', 'l', 'tl', 'tr', 'br', 'bl'], handleSize = variant === 'mouse' ? 8 : 12, handleColor = 'secondary', handlePosition = 'outside', fixedRatio, onResize, onResizeEnd, draggableOptions, ...props }, ref) => {
+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 }) {
     const abbrHandles = useMemo(() => {
-        let abbr = toArray(handles).flatMap((h) => {
-            if (h.length === 1) {
-                return handleUnification[h];
-            }
-            // 使用角把手必须同时渲染对应的两个边把手
-            return [
-                handleUnification[h],
-                ...h.split('').map(_h => handleUnification[_h])
-            ];
-        });
-        return [...new Set(abbr)];
+        return [...toArray(handles).map(h => handleAlias[h])];
     }, [handles]);
     const innerRef = useRef(null);
-    const [width, setWidth] = useSyncState();
-    const [height, setHeight] = useSyncState();
+    const [innerWidth, setInnerWidth] = useControlled(defaultWidth, width);
+    const [innerHeight, setInnerHeight] = useControlled(defaultHeight, height);
     const [dragStartState, setDragStartState] = useState();
     const syncProps = useSync({ onResize, onResizeEnd });
     const draggableHandle = useDraggableHandle({
@@ -66,7 +56,7 @@ export const Resizable = forwardRef(({ variant = 'mouse', handles = ['t', 'r', '
         onDrag(info, e) {
             draggableOptions?.onDrag?.(info, e);
             let { deltaX, deltaY } = info;
-            const { width, height, includeL, includeR, includeT, includeB } = dragStartState;
+            const { width, height, includeT, includeB, includeL, includeR } = dragStartState;
             if (includeL) {
                 deltaX *= -1;
             }
@@ -74,10 +64,10 @@ export const Resizable = forwardRef(({ variant = 'mouse', handles = ['t', 'r', '
                 deltaY *= -1;
             }
             if (includeL || includeR) {
-                setWidth(width + deltaX);
+                setInnerWidth(width + deltaX);
             }
             if (includeT || includeB) {
-                setHeight(height + deltaY);
+                setInnerHeight(height + deltaY);
             }
         },
         onDragEnd(info) {
@@ -89,7 +79,9 @@ export const Resizable = forwardRef(({ variant = 'mouse', handles = ['t', 'r', '
     });
     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: {
             ...props.style,
-            ...typeof width.current === 'number' && { width: width.current },
-            ...typeof height.current === 'number' && { height: height.current }
+            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))] }));
-});
+}

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

@@ -8,4 +8,4 @@ export interface SegmentedOptionProps extends Omit<DIVProps, 'prefix'> {
     label?: ReactNode;
     disabled?: ReactNode;
 }
-export declare const SegmentedOption: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Omit<SegmentedOptionProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>>;
+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/segmented/SegmentedOption.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-import { forwardRef, memo } from 'react';
+import { memo } from 'react';
 import { classnames } from '../../utils';
 import { classes } from './segmented.style';
-export const SegmentedOption = memo(forwardRef(({ orientation, prefix, suffix, value, label, disabled, ...props }, ref) => {
-    return (_jsxs("div", { ...props, ref: ref, className: classnames(classes.option, props.className), "data-orientation": orientation, "data-disabled": disabled, onClick: e => {
+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 => {
             !disabled && props.onClick?.(e);
         }, children: [!!prefix &&
                 _jsx("div", { className: classes.prefix, children: prefix }), _jsx("div", { className: classes.label, children: label }), !!suffix &&
                 _jsx("div", { className: classes.suffix, children: suffix })] }));
-}));
+});

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

@@ -1,21 +1,21 @@
 import { ReactElement } from 'react';
 import { DIVProps, Id, Obj, Size } from '../../../types';
 import { SegmentedOption, SegmentedOptionProps } from './SegmentedOption';
-export type SegmentedOption = SegmentedOptionProps & Obj;
-export interface SegmentedProps<O extends SegmentedOption> extends Omit<DIVProps, 'defaultValue' | 'onChange'> {
+export type ISegmentedOption = SegmentedOptionProps & Obj;
+export interface SegmentedProps<O extends ISegmentedOption, V extends Id = Id> extends Omit<DIVProps, 'defaultValue' | 'onChange'> {
     options?: O[];
     orientation?: 'horizontal' | 'vertical';
     size?: Size;
     labelKey?: keyof O;
     primaryKey?: keyof O;
     fullWidth?: boolean;
-    defaultValue?: Id;
-    value?: Id;
-    onChange?(value: Id): void;
+    defaultValue?: V;
+    value?: V;
+    onChange?(value: V): void;
     readOnly?: boolean;
     disabled?: boolean;
 }
 export declare const Segmented: {
-    <O extends SegmentedOption>(props: SegmentedProps<O>): ReactElement;
+    <O extends ISegmentedOption, V extends Id = Id>(props: SegmentedProps<O, V>): ReactElement;
     Option: typeof SegmentedOption;
 };

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

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-import { Children, cloneElement, forwardRef, isValidElement, memo, useEffect, useRef, useState } from 'react';
+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 { SegmentedOption } from './SegmentedOption';
-import { useTheme } from '../app';
-export const Segmented = memo(forwardRef(({ options, orientation = 'horizontal', size, labelKey = 'label', primaryKey = 'value', fullWidth, defaultValue, value, onChange, readOnly, disabled, ...props }, ref) => {
+import { useTheme } from '../theme';
+export const Segmented = memo(({ options, orientation = 'horizontal', size, labelKey = 'label', primaryKey = 'value', fullWidth, defaultValue, value, onChange, readOnly, disabled, ...props }) => {
     const theme = useTheme();
     size ??= theme.size;
     const [animating, setAnimating] = useState(false);
@@ -46,7 +46,12 @@ export const Segmented = memo(forwardRef(({ options, orientation = 'horizontal',
             return options.map((p, i) => {
                 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), value: v, label: p[labelKey], onClick: e => {
+                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);
+                        };
+                    }, value: v, label: p[labelKey], onClick: e => {
                         p.onClick?.(e);
                         setInnerValue(v);
                     }, "data-active": active }, p.key ?? v ?? i));
@@ -70,6 +75,6 @@ export const Segmented = memo(forwardRef(({ options, orientation = 'horizontal',
             return c;
         });
     };
-    return (_jsxs("div", { ...props, ref: ref, 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: 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()] }));
+});
 Segmented.Option = SegmentedOption;

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

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

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

@@ -72,7 +72,7 @@ export const style = defineCss(({ mode, background, borderRadius, easing, text }
 
         .${classes.indicator} {
             border-radius: ${borderRadius}px;
-            background-color: ${background.card};
+            background-color: ${background.content};
             box-shadow: 0 1px 4px rgba(0, 0, 0, .1);
             position: absolute;
             transition: all .3s ${easing.bounce};
@@ -86,7 +86,7 @@ export const style = defineCss(({ mode, background, borderRadius, easing, text }
 
         &:not([data-animating=true]) {
             .${classes.option}[data-active=true] {
-                background-color: ${background.card};
+                background-color: ${background.content};
                 box-shadow: 0 1px 4px rgba(0, 0, 0, .1);
             }
         }

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

@@ -1,13 +1,13 @@
-import { ReactElement, ReactNode, Ref } from 'react';
+import React, { ReactElement, ReactNode, Ref } from 'react';
 import { InputBaseProps } from '../inputBase';
 import { PopperProps, PopperRef } from '../popper';
 import { MenuItem } from '../menuItem';
 import { MenuOptionType, OptionsBaseSharedProps } from '../optionsBase';
 import { InputProps } from '../input';
-import { Id } from '../../../types';
+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?: JSX.IntrinsicElements['input'];
+    inputProps?: React.JSX.IntrinsicElements['input'];
     inputRef?: Ref<HTMLInputElement>;
     popperProps?: PopperProps;
     popperRef?: Ref<PopperRef>;
@@ -22,18 +22,10 @@ export interface SelectBaseProps<O extends MenuOptionType> extends OptionsBaseSh
     onSearchChange?(searchValue: string): void;
     searchInputProps?: InputProps;
 }
-export interface SelectSingleProps<O extends MenuOptionType, V extends Id = Id> extends SelectBaseProps<O> {
-    multiple?: false;
-    defaultValue?: V;
-    value?: V;
-    onChange?(value: V): void;
+export interface SelectSingleProps<O extends MenuOptionType, V extends Id = Id> extends SelectBaseProps<O>, SelectableSingleProps<V> {
     renderBackfill?(selectedValue: V): ReactNode;
 }
-export interface SelectMultipleProps<O extends MenuOptionType, V extends Id = Id> extends SelectBaseProps<O> {
-    multiple: true;
-    defaultValue?: V[];
-    value?: V[];
-    onChange?(value: V[]): void;
+export interface SelectMultipleProps<O extends MenuOptionType, V extends Id = Id> extends SelectBaseProps<O>, SelectableMultipleProps<V> {
     renderBackfill?(selectedValue: V[]): ReactNode;
 }
 export type SelectProps<O extends MenuOptionType, V extends Id = Id> = SelectSingleProps<O, V> | SelectMultipleProps<O, V>;
@@ -41,4 +33,4 @@ export declare const Select: {
     <O extends MenuOptionType, V extends Id = Id>(props: SelectProps<O, V>): ReactElement;
     Option: typeof MenuItem;
 };
-export declare const Option: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Omit<import("../menuItem").MenuItemProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>>;
+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>;

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@emotion/react/jsx-runtime";
-import { Children, forwardRef, isValidElement, memo, useCallback, useDeferredValue, useMemo, useRef } from 'react';
+import { Children, isValidElement, memo, useCallback, useDeferredValue, useMemo, useRef } from 'react';
 import { InputBase } from '../inputBase';
-import { classnames, cloneRef, toArray, useControlled, useControlledSelect } from '../../utils';
+import { classnames, cloneRef, toArray, useControlled } from '../../utils';
 import { classes, style } from './select.style';
 import { Popper } from '../popper';
 import { MenuItem } from '../menuItem';
@@ -11,9 +11,10 @@ import { OptionsBase } from '../optionsBase';
 import { Input } from '../input';
 import { LoadingIndicator } from '../loadingIndicator';
 import { popperStyle } from '../popper/popper.style';
-export const Select = memo(forwardRef(({ inputProps, inputRef, popperProps, popperRef, defaultOpen = false, open, onOpenChange, sizeAdaptable = true, children, multiple, defaultValue, value, onChange, renderBackfill, searchable, defaultSearchValue = '', searchValue, onSearchChange, searchInputProps, 
+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, 
 // 从OptionsBaseSharedProps继承的属性
-showCheckbox = !!multiple, loading, options, labelKey = 'label', primaryKey = 'value', searchTokenKey = 'searchToken', filterPredicate, ...props }, ref) => {
+showCheckbox = !!multiple, loading, options, labelKey = 'label', primaryKey = 'value', searchTokenKey = 'searchToken', filterPredicate, ...props }) => {
     const [innerOpen, _setInnerOpen] = useControlled(defaultOpen, open, onOpenChange);
     const setInnerOpen = (open) => {
         _setInnerOpen(open);
@@ -38,7 +39,7 @@ showCheckbox = !!multiple, loading, options, labelKey = 'label', primaryKey = 'v
             searchInputRef.current !== document.activeElement && setInnerOpen(false);
         });
     };
-    const [innerValue, _toggleSelected, setInnerValue] = useControlledSelect({ multiple, defaultValue, value, onChange });
+    const [innerValue, _toggleSelected, setInnerValue] = useShallowSelection({ multiple, defaultValue, value, onChange });
     const toggleSelected = useCallback((value) => {
         _toggleSelected(value);
         // 单选模式下，选中一次就自动关闭弹框
@@ -85,10 +86,10 @@ showCheckbox = !!multiple, loading, options, labelKey = 'label', primaryKey = 'v
                         } }), _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 => {
             popperProps?.onPointerDown?.(e);
             e.preventDefault();
-        }, children: _jsx(InputBase, { clearable: !!multiple, ...props, ref: ref, 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: 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
                         ? _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(LoadingIndicator, {})
                             : _jsx(CaretDownOutlined, {}) })] }) }) }));
-}));
+});
 export const Option = Select.Option = MenuItem;

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

@@ -1,7 +1,7 @@
 export declare const classes: {
     placeholder: string;
-    arrow: string;
     contentWrap: string;
+    arrow: string;
     backfill: string;
     backfillWrap: string;
 } & {

package/dist/esm/components/selectedList/selectedItem.d.ts

@@ -0,0 +1,11 @@
+import { AlertProps } from '../alert';
+import { Id } from '../../../types';
+import { SelectedListProps } from './selectedList';
+interface SelectedItemProps extends Omit<AlertProps, 'onClose'>, Pick<SelectedListProps, 'itemProps'> {
+    value: Id;
+    index: number;
+    itemProps?(value: Id, index: number): AlertProps | Promise<AlertProps>;
+    onClose?(value: Id, index: number): void;
+}
+export declare function SelectedItem({ value, index, itemProps, onClose, ...collapseProps }: SelectedItemProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { Alert } from '../alert';
+import { classnames, useLoading, useSyncState } from '../../utils';
+import { useMemo } from 'react';
+import { Collapse } from '../transitionBase';
+import { classes } from './selectedList.style';
+export function SelectedItem({ value, index, itemProps, onClose, ...collapseProps }) {
+    const [alertProps, setAlertProps] = useSyncState();
+    const [loading, requestFn] = useLoading(async () => {
+        itemProps && setAlertProps(await itemProps(value, index));
+    });
+    useMemo(requestFn, []);
+    const closeHandler = (e) => {
+        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 }) }));
+}

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

@@ -1,9 +1,11 @@
-import { ReactElement } from 'react';
-import { DIVProps, Id } from '../../../types';
+import { ReactElement, Ref } from 'react';
+import { Id } from '../../../types';
 import { AlertProps } from '../alert';
-export interface SelectedListProps<V extends Id = Id> extends DIVProps {
+import { TransitionGroupProps } from 'react-transition-group/TransitionGroup';
+export type SelectedListProps<V extends Id = Id> = Omit<TransitionGroupProps, 'ref'> & {
+    ref?: Ref<any>;
     value?: V[];
     itemProps?(value: V, index: number): AlertProps | Promise<AlertProps>;
     onClose?(value: V, index: number): void;
-}
+};
 export declare const SelectedList: <V extends Id = Id>(props: SelectedListProps<V>) => ReactElement;

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

@@ -1,29 +1,16 @@
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-import { forwardRef, memo, useMemo } from 'react';
-import { classnames, toArray, useLoading, useSyncState } from '../../utils';
+import { memo } from 'react';
+import { classnames, toArray } from '../../utils';
 import { classes, style } from './selectedList.style';
-import { Alert } from '../alert';
 import { TransitionGroup } from 'react-transition-group';
 import { useSelectionContext } from '../selectionContext';
-import { Collapse } from '../transitionBase';
-export const SelectedList = memo(forwardRef(({ value, itemProps, onClose, ...props }, ref) => {
-    const { innerValue, setInnerValue } = useSelectionContext();
-    const arr = toArray(value || innerValue?.current);
+import { SelectedItem } from './selectedItem';
+export const SelectedList = memo(({ value, itemProps, onClose, ...props }) => {
+    const { value: innerValue, setValue: setInnerValue } = useSelectionContext();
+    const arr = toArray(value || innerValue);
     const closeHandler = (v, i) => {
         onClose?.(v, i);
         setInnerValue?.(arr?.filter(_v => _v !== v));
     };
-    return (_jsx(TransitionGroup, { ...props, ref: ref, css: style, className: classnames(classes.root, props.className), children: arr?.map((v, i) => _jsx(SelectedItem, { value: v, index: i, itemProps: itemProps, onClose: closeHandler }, v)) }));
-}));
-function SelectedItem({ value, index, itemProps, onClose, ...collapseProps }) {
-    const [alertProps, setAlertProps] = useSyncState();
-    const [loading, requestFn] = useLoading(async () => {
-        itemProps && setAlertProps(await itemProps(value, index));
-    });
-    useMemo(requestFn, []);
-    const closeHandler = (e) => {
-        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(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)) }));
+});

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

@@ -1 +1,2 @@
 export * from './selectionContext';
+export * from './selectionHook';

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

@@ -1 +1,2 @@
 export * from './selectionContext';
+export * from './selectionHook';