@canlooks/can-ui 0.0.21 → 0.0.22

package/dist/cjs/components/resizable/resizable.js

@@ -1,11 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Resizable = void 0;
+exports.Resizable = Resizable;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const react_1 = require("react");
 const utils_1 = require("../../utils");
 const resizable_style_1 = require("./resizable.style");
-const handleUnification = {
+const handleAlias = {
     t: 't',
     r: 'r',
     b: 'b',
@@ -31,23 +31,13 @@ const handleUnification = {
     bottomRight: 'br',
     rightBottom: 'br'
 };
-exports.Resizable = (0, react_1.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) => {
+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 = (0, react_1.useMemo)(() => {
-        let abbr = (0, utils_1.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 [...(0, utils_1.toArray)(handles).map(h => handleAlias[h])];
     }, [handles]);
     const innerRef = (0, react_1.useRef)(null);
-    const [width, setWidth] = (0, utils_1.useSyncState)();
-    const [height, setHeight] = (0, utils_1.useSyncState)();
+    const [innerWidth, setInnerWidth] = (0, utils_1.useControlled)(defaultWidth, width);
+    const [innerHeight, setInnerHeight] = (0, utils_1.useControlled)(defaultHeight, height);
     const [dragStartState, setDragStartState] = (0, react_1.useState)();
     const syncProps = (0, utils_1.useSync)({ onResize, onResizeEnd });
     const draggableHandle = (0, utils_1.useDraggableHandle)({
@@ -69,7 +59,7 @@ exports.Resizable = (0, react_1.forwardRef)(({ variant = 'mouse', handles = ['t'
         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;
             }
@@ -77,10 +67,10 @@ exports.Resizable = (0, react_1.forwardRef)(({ variant = 'mouse', handles = ['t'
                 deltaY *= -1;
             }
             if (includeL || includeR) {
-                setWidth(width + deltaX);
+                setInnerWidth(width + deltaX);
             }
             if (includeT || includeB) {
-                setHeight(height + deltaY);
+                setInnerHeight(height + deltaY);
             }
         },
         onDragEnd(info) {
@@ -92,7 +82,9 @@ exports.Resizable = (0, react_1.forwardRef)(({ variant = 'mouse', handles = ['t'
     });
     return ((0, jsx_runtime_1.jsxs)("div", { ...props, ref: (0, utils_1.cloneRef)(ref, innerRef), css: (0, resizable_style_1.useStyle)({ variant, handleSize, handleColor }), className: (0, utils_1.classnames)(resizable_style_1.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: [(0, jsx_runtime_1.jsx)("div", { className: resizable_style_1.classes.container, children: props.children }), abbrHandles.map(h => (0, jsx_runtime_1.jsx)("div", { className: h.length === 1 ? resizable_style_1.classes.edge : resizable_style_1.classes.corner, "data-handle": h, "data-dragging": dragStartState?.handleType === h, ...draggableHandle }, h))] }));
-});
+}

package/dist/cjs/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/cjs/components/segmented/SegmentedOption.js

@@ -5,10 +5,10 @@ const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const react_1 = require("react");
 const utils_1 = require("../../utils");
 const segmented_style_1 = require("./segmented.style");
-exports.SegmentedOption = (0, react_1.memo)((0, react_1.forwardRef)(({ orientation, prefix, suffix, value, label, disabled, ...props }, ref) => {
-    return ((0, jsx_runtime_1.jsxs)("div", { ...props, ref: ref, className: (0, utils_1.classnames)(segmented_style_1.classes.option, props.className), "data-orientation": orientation, "data-disabled": disabled, onClick: e => {
+exports.SegmentedOption = (0, react_1.memo)(({ orientation, prefix, suffix, value, label, disabled, ...props }) => {
+    return ((0, jsx_runtime_1.jsxs)("div", { ...props, className: (0, utils_1.classnames)(segmented_style_1.classes.option, props.className), "data-orientation": orientation, "data-disabled": disabled, onClick: e => {
             !disabled && props.onClick?.(e);
         }, children: [!!prefix &&
                 (0, jsx_runtime_1.jsx)("div", { className: segmented_style_1.classes.prefix, children: prefix }), (0, jsx_runtime_1.jsx)("div", { className: segmented_style_1.classes.label, children: label }), !!suffix &&
                 (0, jsx_runtime_1.jsx)("div", { className: segmented_style_1.classes.suffix, children: suffix })] }));
-}));
+});

package/dist/cjs/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/cjs/components/segmented/segmented.js

@@ -6,9 +6,9 @@ const react_1 = require("react");
 const segmented_style_1 = require("./segmented.style");
 const utils_1 = require("../../utils");
 const SegmentedOption_1 = require("./SegmentedOption");
-const app_1 = require("../app");
-exports.Segmented = (0, react_1.memo)((0, react_1.forwardRef)(({ options, orientation = 'horizontal', size, labelKey = 'label', primaryKey = 'value', fullWidth, defaultValue, value, onChange, readOnly, disabled, ...props }, ref) => {
-    const theme = (0, app_1.useTheme)();
+const theme_1 = require("../theme");
+exports.Segmented = (0, react_1.memo)(({ options, orientation = 'horizontal', size, labelKey = 'label', primaryKey = 'value', fullWidth, defaultValue, value, onChange, readOnly, disabled, ...props }) => {
+    const theme = (0, theme_1.useTheme)();
     size ??= theme.size;
     const [animating, setAnimating] = (0, react_1.useState)(false);
     const [innerValue, _setInnerValue] = (0, utils_1.useControlled)(defaultValue, value, onChange);
@@ -49,7 +49,12 @@ exports.Segmented = (0, react_1.memo)((0, react_1.forwardRef)(({ options, orient
             return options.map((p, i) => {
                 const v = p[primaryKey];
                 const active = !(0, utils_1.isUnset)(v) && v === innerValue.current;
-                return ((0, jsx_runtime_1.jsx)(SegmentedOption_1.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 ((0, jsx_runtime_1.jsx)(SegmentedOption_1.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));
@@ -73,6 +78,6 @@ exports.Segmented = (0, react_1.memo)((0, react_1.forwardRef)(({ options, orient
             return c;
         });
     };
-    return ((0, jsx_runtime_1.jsxs)("div", { ...props, ref: ref, css: segmented_style_1.style, className: (0, utils_1.classnames)(segmented_style_1.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: [(0, jsx_runtime_1.jsx)("div", { className: segmented_style_1.classes.indicator, onTransitionEnd: () => setAnimating(false), style: indicatorRect.current }), renderOptions()] }));
-}));
+    return ((0, jsx_runtime_1.jsxs)("div", { ...props, css: segmented_style_1.style, className: (0, utils_1.classnames)(segmented_style_1.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: [(0, jsx_runtime_1.jsx)("div", { className: segmented_style_1.classes.indicator, onTransitionEnd: () => setAnimating(false), style: indicatorRect.current }), renderOptions()] }));
+});
 exports.Segmented.Option = SegmentedOption_1.SegmentedOption;

package/dist/cjs/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/cjs/components/segmented/segmented.style.js

@@ -76,7 +76,7 @@ exports.style = (0, utils_1.defineCss)(({ mode, background, borderRadius, easing
 
         .${exports.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};
@@ -90,7 +90,7 @@ exports.style = (0, utils_1.defineCss)(({ mode, background, borderRadius, easing
 
         &:not([data-animating=true]) {
             .${exports.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/cjs/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/cjs/components/select/select.js

@@ -14,9 +14,10 @@ const optionsBase_1 = require("../optionsBase");
 const input_1 = require("../input");
 const loadingIndicator_1 = require("../loadingIndicator");
 const popper_style_1 = require("../popper/popper.style");
-exports.Select = (0, react_1.memo)((0, react_1.forwardRef)(({ inputProps, inputRef, popperProps, popperRef, defaultOpen = false, open, onOpenChange, sizeAdaptable = true, children, multiple, defaultValue, value, onChange, renderBackfill, searchable, defaultSearchValue = '', searchValue, onSearchChange, searchInputProps, 
+const selectionContext_1 = require("../selectionContext");
+exports.Select = (0, react_1.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] = (0, utils_1.useControlled)(defaultOpen, open, onOpenChange);
     const setInnerOpen = (open) => {
         _setInnerOpen(open);
@@ -41,7 +42,7 @@ showCheckbox = !!multiple, loading, options, labelKey = 'label', primaryKey = 'v
             searchInputRef.current !== document.activeElement && setInnerOpen(false);
         });
     };
-    const [innerValue, _toggleSelected, setInnerValue] = (0, utils_1.useControlledSelect)({ multiple, defaultValue, value, onChange });
+    const [innerValue, _toggleSelected, setInnerValue] = (0, selectionContext_1.useShallowSelection)({ multiple, defaultValue, value, onChange });
     const toggleSelected = (0, react_1.useCallback)((value) => {
         _toggleSelected(value);
         // 单选模式下，选中一次就自动关闭弹框
@@ -88,10 +89,10 @@ showCheckbox = !!multiple, loading, options, labelKey = 'label', primaryKey = 'v
                         } }), (0, jsx_runtime_1.jsx)(optionsBase_1.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: (0, jsx_runtime_1.jsx)(inputBase_1.InputBase, { clearable: !!multiple, ...props, ref: ref, css: select_style_1.style, className: (0, utils_1.classnames)(select_style_1.classes.root, props.className), "data-focused": innerOpen.current, value: innerValue.current, onClear: clearHandler, onBlur: blurHandler, children: ({ ref, ...rest }) => (0, jsx_runtime_1.jsxs)("div", { className: select_style_1.classes.contentWrap, children: [!(0, utils_1.toArray)(innerValue.current)?.length
+        }, children: (0, jsx_runtime_1.jsx)(inputBase_1.InputBase, { clearable: !!multiple, ...props, css: select_style_1.style, className: (0, utils_1.classnames)(select_style_1.classes.root, props.className), "data-focused": innerOpen.current, value: innerValue.current, onClear: clearHandler, onBlur: blurHandler, children: ({ ref, ...rest }) => (0, jsx_runtime_1.jsxs)("div", { className: select_style_1.classes.contentWrap, children: [!(0, utils_1.toArray)(innerValue.current)?.length
                         ? (0, jsx_runtime_1.jsx)("div", { className: select_style_1.classes.placeholder, children: props.placeholder ?? '请选择' })
                         : (0, jsx_runtime_1.jsx)("div", { className: select_style_1.classes.backfill, children: renderBackfillFn() }), (0, jsx_runtime_1.jsx)("input", { size: 1, ...rest, ...inputProps, ref: (0, utils_1.cloneRef)(ref, inputRef), "data-hidden": "true" }), (0, jsx_runtime_1.jsx)("div", { className: select_style_1.classes.arrow, "data-open": innerOpen.current, children: loading
                             ? (0, jsx_runtime_1.jsx)(loadingIndicator_1.LoadingIndicator, {})
                             : (0, jsx_runtime_1.jsx)(icons_1.CaretDownOutlined, {}) })] }) }) }));
-}));
+});
 exports.Option = exports.Select.Option = menuItem_1.MenuItem;

package/dist/cjs/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/cjs/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/cjs/components/selectedList/selectedItem.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SelectedItem = SelectedItem;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const alert_1 = require("../alert");
+const utils_1 = require("../../utils");
+const react_1 = require("react");
+const transitionBase_1 = require("../transitionBase");
+const selectedList_style_1 = require("./selectedList.style");
+function SelectedItem({ value, index, itemProps, onClose, ...collapseProps }) {
+    const [alertProps, setAlertProps] = (0, utils_1.useSyncState)();
+    const [loading, requestFn] = (0, utils_1.useLoading)(async () => {
+        itemProps && setAlertProps(await itemProps(value, index));
+    });
+    (0, react_1.useMemo)(requestFn, []);
+    const closeHandler = (e) => {
+        alertProps.current?.onClose?.(e);
+        onClose?.(value, index);
+    };
+    return ((0, jsx_runtime_1.jsx)(transitionBase_1.Collapse, { ...collapseProps, className: selectedList_style_1.classes.option, children: (0, jsx_runtime_1.jsx)(alert_1.Alert, { closable: true, color: "info", showIcon: false, ...alertProps.current, className: (0, utils_1.classnames)(selectedList_style_1.classes.optionWrap, alertProps.current?.className), onClose: closeHandler, loading: loading.current }) }));
+}

package/dist/cjs/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/cjs/components/selectedList/selectedList.js

@@ -5,28 +5,15 @@ const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const react_1 = require("react");
 const utils_1 = require("../../utils");
 const selectedList_style_1 = require("./selectedList.style");
-const alert_1 = require("../alert");
 const react_transition_group_1 = require("react-transition-group");
 const selectionContext_1 = require("../selectionContext");
-const transitionBase_1 = require("../transitionBase");
-exports.SelectedList = (0, react_1.memo)((0, react_1.forwardRef)(({ value, itemProps, onClose, ...props }, ref) => {
-    const { innerValue, setInnerValue } = (0, selectionContext_1.useSelectionContext)();
-    const arr = (0, utils_1.toArray)(value || innerValue?.current);
+const selectedItem_1 = require("./selectedItem");
+exports.SelectedList = (0, react_1.memo)(({ value, itemProps, onClose, ...props }) => {
+    const { value: innerValue, setValue: setInnerValue } = (0, selectionContext_1.useSelectionContext)();
+    const arr = (0, utils_1.toArray)(value || innerValue);
     const closeHandler = (v, i) => {
         onClose?.(v, i);
         setInnerValue?.(arr?.filter(_v => _v !== v));
     };
-    return ((0, jsx_runtime_1.jsx)(react_transition_group_1.TransitionGroup, { ...props, ref: ref, css: selectedList_style_1.style, className: (0, utils_1.classnames)(selectedList_style_1.classes.root, props.className), children: arr?.map((v, i) => (0, jsx_runtime_1.jsx)(SelectedItem, { value: v, index: i, itemProps: itemProps, onClose: closeHandler }, v)) }));
-}));
-function SelectedItem({ value, index, itemProps, onClose, ...collapseProps }) {
-    const [alertProps, setAlertProps] = (0, utils_1.useSyncState)();
-    const [loading, requestFn] = (0, utils_1.useLoading)(async () => {
-        itemProps && setAlertProps(await itemProps(value, index));
-    });
-    (0, react_1.useMemo)(requestFn, []);
-    const closeHandler = (e) => {
-        alertProps.current?.onClose?.(e);
-        onClose?.(value, index);
-    };
-    return ((0, jsx_runtime_1.jsx)(transitionBase_1.Collapse, { ...collapseProps, className: selectedList_style_1.classes.option, children: (0, jsx_runtime_1.jsx)(alert_1.Alert, { closable: true, color: "info", showIcon: false, ...alertProps.current, className: (0, utils_1.classnames)(selectedList_style_1.classes.optionWrap, alertProps.current?.className), onClose: closeHandler, loading: loading.current }) }));
-}
+    return ((0, jsx_runtime_1.jsx)(react_transition_group_1.TransitionGroup, { ...props, css: selectedList_style_1.style, className: (0, utils_1.classnames)(selectedList_style_1.classes.root, props.className), children: arr?.map((v, i) => (0, jsx_runtime_1.jsx)(selectedItem_1.SelectedItem, { value: v, index: i, itemProps: itemProps, onClose: closeHandler }, v)) }));
+});

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

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

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

@@ -2,3 +2,4 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 tslib_1.__exportStar(require("./selectionContext"), exports);
+tslib_1.__exportStar(require("./selectionHook"), exports);

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

@@ -1,27 +1,29 @@
-import { Dispatch, MutableRefObject, ReactNode, SetStateAction } from 'react';
-import { Id, Obj } from '../../../types';
+import { Id, Obj, SelectableProps } from '../../../types';
+import { Dispatch, ReactNode, SetStateAction } from 'react';
 export interface OptionType<V extends Id = Id> extends Obj {
     children?: OptionType<V>[];
+    /** @private */
     _parentId?: V;
 }
 export type SelectionContextBaseProps<O extends OptionType<V>, V extends Id = Id> = {
     options?: O[];
-    /** @default "id" */
+    /** 默认为`id` */
     primaryKey?: keyof O;
+    /** 默认为`children` */
     childrenKey?: keyof O;
     /**
      * 节点之间的关系
-     * @enum {"dependent"}：会自动判断子父节点的选中关系。
-     * @enum {"standalone"}：所有节点相互独立。
-     * @default "dependent"
+     * @enum {'dependent'} 会自动判断子父节点的选中关系。
+     * @enum {'standalone'} 所有节点相互独立。
+     * 默认为`dependent`
      */
     relation?: 'dependent' | 'standalone';
     /**
      * 选中值的整合方式，relation为'dependent'时生效
-     * @enum {"shallowest"}：尽可能向上归集。
-     * @enum {"deepest"}：尽可能向下展开。
-     * @enum {"all"}：所有选中的值。
-     * @default "shallowest"
+     * @enum {'shallowest'} 尽可能向上归集。
+     * @enum {'deepest'} 尽可能向下展开。
+     * @enum {'all'} 所有选中的值。
+     * 默认为`"shallowest"`
      */
     integration?: 'shallowest' | 'deepest' | 'all';
     /** 单选模式必须指定clearable才能清空选择 */
@@ -29,31 +31,27 @@ export type SelectionContextBaseProps<O extends OptionType<V>, V extends Id = Id
     disabled?: boolean;
     onToggle?(checked: boolean, value: V, option?: O): void;
     children?: ReactNode;
+    /**
+     * 是否使用浅层选择模式，默认为`false`，即使用树形选择。
+     * 开启后{@link childrenKey}, {@link relation}, {@link integration}都将无效
+     */
+    shallow?: boolean;
 };
-export interface SelectionContextSingleProps<O extends OptionType<V>, V extends Id = Id> extends SelectionContextBaseProps<O, V> {
-    multiple?: false;
-    defaultValue?: V;
-    value?: V;
-    onChange?(value: V): void;
-}
-export interface SelectionContextMultipleProps<O extends OptionType<V>, V extends Id = Id> extends SelectionContextBaseProps<O, V> {
-    multiple: true;
-    defaultValue?: V[];
-    value?: V[];
-    onChange?(value: V[]): void;
-}
-export type SelectionContextProps<O extends OptionType<V>, V extends Id = Id> = SelectionContextSingleProps<O, V> | SelectionContextMultipleProps<O, V>;
+export type SelectionContextProps<O extends OptionType<V>, V extends Id = Id> = SelectionContextBaseProps<O, V> & SelectableProps<V>;
 export type ISelectionContext<O extends OptionType<V>, V extends Id = Id> = {
     inSelection?: true;
     disabled?: boolean;
-    innerValue?: MutableRefObject<undefined | V | V[]>;
-    setInnerValue?: Dispatch<SetStateAction<undefined | V | V[]>>;
-    innerOptions?: MutableRefObject<undefined | O[]>;
-    setInnerOptions?: Dispatch<SetStateAction<undefined | O[]>>;
+    value?: V | V[];
+    setValue?: Dispatch<SetStateAction<undefined | V | V[]>>;
+    options?: O[];
+    setOptions?: Dispatch<SetStateAction<undefined | O[]>>;
     optionsMap?: Map<V, O>;
     selectionStatus?: Map<V, 1 | 2>;
     toggleSelected?(value: V, option?: O): void;
     onToggle?(checked: boolean, value: V, option?: O): void;
 };
+type ToRequired<T, K extends keyof T> = Omit<T, K> & Required<Pick<T, K>>;
+export type OSelectionContext<O extends OptionType<V>, V extends Id = Id> = ToRequired<ISelectionContext<O, V>, 'inSelection' | 'setValue' | 'setOptions' | 'optionsMap' | 'selectionStatus' | 'toggleSelected'>;
 export declare function useSelectionContext<O extends OptionType<V>, V extends Id = Id>(): ISelectionContext<O, V>;
 export declare function SelectionContext<O extends OptionType<V>, V extends Id = Id>(props: SelectionContextProps<O, V>): import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/dist/cjs/components/selectionContext/selectionContext.js

@@ -5,14 +5,11 @@ exports.SelectionContext = SelectionContext;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const react_1 = require("react");
 const selectionHook_1 = require("./selectionHook");
-const selectionContext = (0, react_1.createContext)({});
+const InnerSelectionContext = (0, react_1.createContext)({});
 function useSelectionContext() {
-    return (0, react_1.useContext)(selectionContext);
+    return (0, react_1.useContext)(InnerSelectionContext);
 }
 function SelectionContext(props) {
-    const treeSelect = (0, selectionHook_1.useTreeSelect)(props);
-    return ((0, jsx_runtime_1.jsx)(selectionContext.Provider, { value: (0, react_1.useMemo)(() => ({
-            inSelection: true, disabled: props.disabled,
-            ...treeSelect
-        }), [treeSelect.selectionStatus, props.disabled]), children: props.children }));
+    const selection = (0, selectionHook_1.useSelection)(props);
+    return ((0, jsx_runtime_1.jsx)(InnerSelectionContext, { value: (0, react_1.useMemo)(() => selection, [props.disabled, selection.selectionStatus]), children: props.children }));
 }

package/dist/cjs/components/selectionContext/selectionHook.d.ts

@@ -1,11 +1,12 @@
-import { OptionType, SelectionContextProps } from './selectionContext';
+import { Dispatch, SetStateAction } from 'react';
+import { OptionType, OSelectionContext, SelectionContextProps } from './selectionContext';
 import { Id } from '../../../types';
-export declare function useTreeSelect<O extends OptionType<V>, V extends Id = Id>({ ...props }: Omit<SelectionContextProps<O, V>, 'children'>): {
-    innerValue: import("react").MutableRefObject<V | V[] | undefined>;
-    setInnerValue: import("react").Dispatch<import("react").SetStateAction<V | V[] | undefined>>;
-    innerOptions: import("react").MutableRefObject<O[] | undefined>;
-    setInnerOptions: import("react").Dispatch<import("react").SetStateAction<O[] | undefined>>;
-    optionsMap: Map<V, O>;
-    selectionStatus: Map<V, 1 | 2>;
-    toggleSelected: (value: V, option?: O) => void;
-};
+export declare function useSelection<O extends OptionType<V>, V extends Id = Id>(props: SelectionContextProps<O, V>): OSelectionContext<O, V>;
+export declare function useShallowSelection<V extends Id | Id[]>(params: {
+    disabled?: boolean;
+    multiple?: boolean;
+    clearable?: boolean;
+    defaultValue?: V;
+    value?: V;
+    onChange?: (value: V) => void;
+}): [V, (value: V) => void, Dispatch<SetStateAction<V>>];