@canlooks/can-ui 0.0.201 → 0.0.203

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

@@ -72,7 +72,7 @@ interface DataGridSharedProps<R extends RowType = RowType> extends SlotsAndProps
     renderExpandIcon?(key: Id, isExpand: boolean, expanded: Id[]): ReactNode;
 }
 export type OrderType = 'ascend' | 'descend';
-export interface DataGridBaseProps<R extends RowType = RowType> extends DataGridSharedProps<R>, Omit<DivProps, 'defaultValue' | 'onChange'> {
+export interface DataGridBaseProps<R extends RowType = RowType> extends DataGridSharedProps<R>, Omit<DivProps, 'defaultValue' | 'onToggle' | 'onChange'> {
     columns?: (ColumnType<R> | symbol)[];
     rows?: R[];
     filterProps?: FormProps;
@@ -99,6 +99,7 @@ export interface DataGridBaseProps<R extends RowType = RowType> extends DataGrid
     /** 是否允许全选，默认为true */
     allowSelectAll?: boolean;
     selectorProps?(row: R, index: number, rows: R[]): CheckboxProps | RadioProps;
+    onToggle?(checked: boolean, value: Id, option?: R): void;
     defaultExpanded?: Id[];
     expanded?: Id[];
     onExpandedChange?(expanded: Id[], key: Id, isExpand: boolean): void;

package/dist/cjs/components/dataGrid/dataGrid.js

@@ -19,7 +19,7 @@ const DataGridContext = (0, react_1.createContext)({});
 function useDataGridContext() {
     return (0, react_1.useContext)(DataGridContext);
 }
-exports.DataGrid = (0, react_1.memo)(({ slots, slotProps, columns, rows, rowProps, primaryKey = 'id', childrenKey = null, filterProps, initialFilterValue, filterBubbleProps, onFilter, onFilterClick, filterPredicate, defaultOrderColumn, orderColumn, defaultOrderType = 'descend', orderType, onOrderChange, selectable, relation = 'dependent', integration = 'shallowest', allowSelectAll = true, clickRowToSelect = true, selectorProps, indent = 24, renderExpandIcon, defaultExpanded, expanded, onExpandedChange, paginatable = true, paginationProps, renderPagination, loading, emptyPlaceholder, columnResizable = false, size, bordered, striped, tableProps, _noRenderFormTag = false, multiple, defaultValue, value, onChange, ...props }) => {
+exports.DataGrid = (0, react_1.memo)(({ slots, slotProps, columns, rows, rowProps, primaryKey = 'id', childrenKey = null, filterProps, initialFilterValue, filterBubbleProps, onFilter, onFilterClick, filterPredicate, defaultOrderColumn, orderColumn, defaultOrderType = 'descend', orderType, onOrderChange, selectable, relation = 'dependent', integration = 'shallowest', allowSelectAll = true, clickRowToSelect = true, selectorProps, onToggle, indent = 24, renderExpandIcon, defaultExpanded, expanded, onExpandedChange, paginatable = true, paginationProps, renderPagination, loading, emptyPlaceholder, columnResizable = false, size, bordered, striped, tableProps, _noRenderFormTag = false, multiple, defaultValue, value, onChange, ...props }) => {
     /**
      * ---------------------------------------------------------------
      * 选择行
@@ -135,7 +135,7 @@ exports.DataGrid = (0, react_1.memo)(({ slots, slotProps, columns, rows, rowProp
     const renderedContent = ((0, jsx_runtime_1.jsx)(columnResize_1.ColumnResizeContext, { columnResizable: columnResizable, children: ({ scrollerRef, tableRef }) => (0, jsx_runtime_1.jsxs)(Container, { ...(0, utils_1.mergeComponentProps)(containerProps, {
                 ref: scrollerRef,
                 className: dataGrid_style_1.classes.container
-            }), children: [(0, jsx_runtime_1.jsx)(table_1.Table, { size: size, bordered: bordered, striped: striped, ...tableProps, ref: (0, utils_1.cloneRef)(tableProps?.ref, tableRef), children: (0, jsx_runtime_1.jsxs)(selectionContext_1.SelectionContext, { options: rows, primaryKey: primaryKey, childrenKey: childrenKey !== null ? childrenKey : void 0, relation: relation, integration: integration, disabled: !selectable, multiple: multiple, defaultValue: defaultValue, value: value, onChange: onChange, children: [(0, jsx_runtime_1.jsx)(dataGridHead_1.DataGridHead, { rows: rows, flattedColumns: flattedColumns, completedColumns: completedColumns, primaryKey: primaryKey, allowSelectAll: allowSelectAll, columnResizable: columnResizable, orderColumn: innerOrderColumn.current, orderType: innerOrderType.current, onOrderChange: orderChangeHandler, filterBubbleProps: filterBubbleProps, onFilterClick: onFilterClick }), (0, jsx_runtime_1.jsx)("tbody", { children: (0, jsx_runtime_1.jsx)(DataGridContext, { value: (0, react_1.useMemo)(() => ({
+            }), children: [(0, jsx_runtime_1.jsx)(table_1.Table, { size: size, bordered: bordered, striped: striped, ...tableProps, ref: (0, utils_1.cloneRef)(tableProps?.ref, tableRef), children: (0, jsx_runtime_1.jsxs)(selectionContext_1.SelectionContext, { options: rows, primaryKey: primaryKey, childrenKey: childrenKey !== null ? childrenKey : void 0, relation: relation, integration: integration, disabled: !selectable, multiple: multiple, defaultValue: defaultValue, value: value, onChange: onChange, onToggle: onToggle, children: [(0, jsx_runtime_1.jsx)(dataGridHead_1.DataGridHead, { rows: rows, flattedColumns: flattedColumns, completedColumns: completedColumns, primaryKey: primaryKey, allowSelectAll: allowSelectAll, columnResizable: columnResizable, orderColumn: innerOrderColumn.current, orderType: innerOrderType.current, onOrderChange: orderChangeHandler, filterBubbleProps: filterBubbleProps, onFilterClick: onFilterClick }), (0, jsx_runtime_1.jsx)("tbody", { children: (0, jsx_runtime_1.jsx)(DataGridContext, { value: (0, react_1.useMemo)(() => ({
                                         slots, slotProps,
                                         rowProps, primaryKey, childrenKey, clickRowToSelect, indent, renderExpandIcon,
                                         expandedSet, flattedColumns, toggleExpanded

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

@@ -1,28 +1,26 @@
-import { ReactElement, ReactNode, Ref } from 'react';
+import { ReactElement, Ref } from 'react';
 import { DialogProps } from '../dialog';
 import { OptionType, SelectionContextBaseProps } from '../selectionContext';
 import { SelectedListProps } from '../selectedList';
-import { Id } from '../../types';
+import { Id, SelectableProps } from '../../types';
 export type PickerDialogRef<V extends Id = Id> = {
     open(value?: V | V[]): Promise<V | V[]>;
 };
-export interface PickerDialogProps<O extends OptionType<V>, V extends Id = Id> extends Omit<DialogProps, 'ref' | 'children' | 'onConfirm' | 'onToggle'>, Omit<SelectionContextBaseProps<O, V>, 'children'> {
+export interface PickerDialogBaseProps<O extends OptionType<V>, V extends Id = Id> extends Omit<DialogProps, 'ref' | 'onConfirm' | 'onToggle' | 'onChange'>, SelectionContextBaseProps<O, V> {
     ref?: Ref<PickerDialogRef<V>>;
     /** 默认的ref已被PickerDialogRef取代，需要dialogRef指向dialog元素 */
     dialogRef?: Ref<HTMLDivElement>;
-    multiple?: boolean;
-    children?: ReactNode | ((selectionProps: Omit<SelectionContextBaseProps<O, V>, 'children'> & {
-        multiple?: boolean;
-    }) => ReactNode);
     showSelectedList?: boolean;
     /** 已选列表的位置，默认为`right` */
     selectedListPlacement?: 'left' | 'right';
     selectedListProps?: SelectedListProps<V>;
     selectedItemProps?: SelectedListProps<V>['itemProps'];
     onConfirm?(value: V | V[]): void;
+    onClear?(): void;
     /** @alias {@link options} */
     rows?: O[];
     /** @alias {@link options} */
     nodes?: O[];
 }
+export type PickerDialogProps<O extends OptionType<V>, V extends Id = Id> = PickerDialogBaseProps<O, V> & SelectableProps<V>;
 export declare const PickerDialog: <O extends OptionType<V>, V extends Id = Id>(props: PickerDialogProps<O, V>) => ReactElement;

package/dist/cjs/components/pickerDialog/pickerDialog.js

@@ -12,9 +12,9 @@ const selectedList_1 = require("../selectedList");
 const button_1 = require("../button");
 const icon_1 = require("../icon");
 const faTrashCan_1 = require("@fortawesome/free-regular-svg-icons/faTrashCan");
-exports.PickerDialog = (({ ref, dialogRef, multiple, children, showSelectedList = !!multiple, selectedListPlacement = 'right', selectedListProps, selectedItemProps, onConfirm, rows, nodes, 
-// 以下属性从SelectionContextBaseProps继承
-options = rows ?? nodes, primaryKey = 'id', childrenKey = 'children', relation = 'dependent', integration = 'shallowest', disabled, clearable = !!multiple, onToggle, ...props }) => {
+exports.PickerDialog = (({ ref, dialogRef, multiple, showSelectedList = !!multiple, selectedListPlacement = 'right', selectedListProps, selectedItemProps, onConfirm, onClear, rows, nodes, 
+// 以下属性从SelectionContextProps继承
+options = rows ?? nodes, primaryKey = 'id', childrenKey = 'children', relation = 'dependent', integration = 'shallowest', disabled, clearable = !!multiple, onToggle, defaultValue, value, onChange, ...props }) => {
     const resolvers = (0, react_1.useRef)(void 0);
     (0, react_1.useImperativeHandle)(ref, () => ({
         open(value) {
@@ -24,12 +24,16 @@ options = rows ?? nodes, primaryKey = 'id', childrenKey = 'children', relation =
             return promise;
         }
     }));
-    const [innerValue, _setInnerValue] = (0, react_1.useState)(multiple ? [] : null);
+    const [innerValue, _setInnerValue] = (0, utils_1.useControlled)(defaultValue || (multiple ? [] : null), value, onChange);
     const setInnerValue = (value) => {
         _setInnerValue(value);
         // 单选模式，值每次改变都触发确认
         !multiple && confirmHandler(value);
     };
+    const clearHandler = () => {
+        onClear?.();
+        setInnerValue(multiple ? [] : null);
+    };
     const [innerOpen, setInnerOpen] = (0, utils_1.useControlled)(props.defaultOpen, props.open);
     const closeHandler = (reason) => {
         if (reason === 'confirmed') {
@@ -39,12 +43,12 @@ options = rows ?? nodes, primaryKey = 'id', childrenKey = 'children', relation =
         if (!open) {
             resolvers.current?.reject({
                 type: 'canceled',
-                value: innerValue
+                value: innerValue.current
             });
         }
         setInnerOpen(false);
     };
-    const confirmHandler = (value = innerValue) => {
+    const confirmHandler = (value = innerValue.current) => {
         onConfirm?.(value);
         resolvers.current?.resolve(value);
         setInnerOpen(false);
@@ -52,18 +56,7 @@ options = rows ?? nodes, primaryKey = 'id', childrenKey = 'children', relation =
     const onExited = () => {
         _setInnerValue(null);
     };
-    const renderChildren = () => {
-        const selectionProps = { rows, nodes, options, primaryKey, relation, integration, disabled, multiple };
-        return typeof children === 'function'
-            ? children(selectionProps)
-            : (0, react_1.isValidElement)(children)
-                ? (0, react_1.cloneElement)(children, {
-                    ...selectionProps,
-                    ...children.props
-                })
-                : children;
-    };
-    const selectedCount = (0, utils_1.toArray)(innerValue)?.length || 0;
+    const selectedCount = (0, utils_1.toArray)(innerValue.current)?.length || 0;
     return ((0, jsx_runtime_1.jsx)(selectionContext_1.SelectionContext, { options,
         primaryKey,
         childrenKey,
@@ -71,7 +64,7 @@ options = rows ?? nodes, primaryKey = 'id', childrenKey = 'children', relation =
         integration,
         disabled,
         clearable,
-        multiple, value: innerValue, onChange: setInnerValue, onToggle: onToggle, children: (0, jsx_runtime_1.jsx)(dialog_1.Dialog, { ...(0, utils_1.mergeComponentProps)({
+        multiple, value: innerValue.current, onChange: setInnerValue, onToggle: onToggle, children: (0, jsx_runtime_1.jsx)(dialog_1.Dialog, { ...(0, utils_1.mergeComponentProps)({
                 width: multiple ? '90%' : 1080,
                 footer: null,
                 maskClosable: false
@@ -83,6 +76,6 @@ options = rows ?? nodes, primaryKey = 'id', childrenKey = 'children', relation =
                 modalProps: (0, utils_1.mergeComponentProps)(props.modalProps, { onExited })
             }), onClose: closeHandler, ...showSelectedList && {
                 [selectedListPlacement === 'left' ? 'prefix' : 'suffix']: ((0, jsx_runtime_1.jsxs)("div", { className: pickerDialog_style_1.classes.selectedArea, children: [(0, jsx_runtime_1.jsxs)(divider_1.Divider, { className: pickerDialog_style_1.classes.count, textAlign: "start", children: [(0, jsx_runtime_1.jsxs)("div", { children: ["\u5DF2\u9009\u62E9", (0, jsx_runtime_1.jsx)("b", { children: selectedCount }), "\u9879"] }), clearable &&
-                                    (0, jsx_runtime_1.jsx)(button_1.Button, { prefix: (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faTrashCan_1.faTrashCan }), variant: "plain", color: "text.secondary", onClick: () => setInnerValue(multiple ? [] : null), children: "\u6E05\u7A7A" })] }), (0, jsx_runtime_1.jsx)(selectedList_1.SelectedList, { itemProps: selectedItemProps, ...selectedListProps, className: (0, utils_1.clsx)(pickerDialog_style_1.classes.list, selectedListProps?.className) }), (0, jsx_runtime_1.jsx)(button_1.Button, { className: pickerDialog_style_1.classes.confirm, disabled: selectedCount === 0, onClick: () => confirmHandler(), children: "\u786E\u5B9A" })] }))
-            }, children: renderChildren() }) }));
+                                    (0, jsx_runtime_1.jsx)(button_1.Button, { prefix: (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faTrashCan_1.faTrashCan }), variant: "plain", color: "text.secondary", onClick: clearHandler, children: "\u6E05\u7A7A" })] }), (0, jsx_runtime_1.jsx)(selectedList_1.SelectedList, { itemProps: selectedItemProps, ...selectedListProps, className: (0, utils_1.clsx)(pickerDialog_style_1.classes.list, selectedListProps?.className) }), (0, jsx_runtime_1.jsx)(button_1.Button, { className: pickerDialog_style_1.classes.confirm, disabled: selectedCount === 0, onClick: () => confirmHandler(), children: "\u786E\u5B9A" })] }))
+            }, children: props.children }) }));
 });

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

@@ -19,5 +19,9 @@ exports.style = (0, utils_1.defineCss)(({ spacing }) => (0, react_1.css) `
             text-overflow: ellipsis;
             overflow: hidden;
         }
+
+        .${alert_style_1.classes.description} {
+            margin-top: 0;
+        }
     }
 `);

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

@@ -72,7 +72,7 @@ interface DataGridSharedProps<R extends RowType = RowType> extends SlotsAndProps
     renderExpandIcon?(key: Id, isExpand: boolean, expanded: Id[]): ReactNode;
 }
 export type OrderType = 'ascend' | 'descend';
-export interface DataGridBaseProps<R extends RowType = RowType> extends DataGridSharedProps<R>, Omit<DivProps, 'defaultValue' | 'onChange'> {
+export interface DataGridBaseProps<R extends RowType = RowType> extends DataGridSharedProps<R>, Omit<DivProps, 'defaultValue' | 'onToggle' | 'onChange'> {
     columns?: (ColumnType<R> | symbol)[];
     rows?: R[];
     filterProps?: FormProps;
@@ -99,6 +99,7 @@ export interface DataGridBaseProps<R extends RowType = RowType> extends DataGrid
     /** 是否允许全选，默认为true */
     allowSelectAll?: boolean;
     selectorProps?(row: R, index: number, rows: R[]): CheckboxProps | RadioProps;
+    onToggle?(checked: boolean, value: Id, option?: R): void;
     defaultExpanded?: Id[];
     expanded?: Id[];
     onExpandedChange?(expanded: Id[], key: Id, isExpand: boolean): void;

package/dist/esm/components/dataGrid/dataGrid.js

@@ -15,7 +15,7 @@ const DataGridContext = createContext({});
 export function useDataGridContext() {
     return useContext(DataGridContext);
 }
-export const DataGrid = memo(({ slots, slotProps, columns, rows, rowProps, primaryKey = 'id', childrenKey = null, filterProps, initialFilterValue, filterBubbleProps, onFilter, onFilterClick, filterPredicate, defaultOrderColumn, orderColumn, defaultOrderType = 'descend', orderType, onOrderChange, selectable, relation = 'dependent', integration = 'shallowest', allowSelectAll = true, clickRowToSelect = true, selectorProps, indent = 24, renderExpandIcon, defaultExpanded, expanded, onExpandedChange, paginatable = true, paginationProps, renderPagination, loading, emptyPlaceholder, columnResizable = false, size, bordered, striped, tableProps, _noRenderFormTag = false, multiple, defaultValue, value, onChange, ...props }) => {
+export const DataGrid = memo(({ slots, slotProps, columns, rows, rowProps, primaryKey = 'id', childrenKey = null, filterProps, initialFilterValue, filterBubbleProps, onFilter, onFilterClick, filterPredicate, defaultOrderColumn, orderColumn, defaultOrderType = 'descend', orderType, onOrderChange, selectable, relation = 'dependent', integration = 'shallowest', allowSelectAll = true, clickRowToSelect = true, selectorProps, onToggle, indent = 24, renderExpandIcon, defaultExpanded, expanded, onExpandedChange, paginatable = true, paginationProps, renderPagination, loading, emptyPlaceholder, columnResizable = false, size, bordered, striped, tableProps, _noRenderFormTag = false, multiple, defaultValue, value, onChange, ...props }) => {
     /**
      * ---------------------------------------------------------------
      * 选择行
@@ -131,7 +131,7 @@ export const DataGrid = memo(({ slots, slotProps, columns, rows, rowProps, prima
     const renderedContent = (_jsx(ColumnResizeContext, { columnResizable: columnResizable, children: ({ scrollerRef, tableRef }) => _jsxs(Container, { ...mergeComponentProps(containerProps, {
                 ref: scrollerRef,
                 className: classes.container
-            }), children: [_jsx(Table, { size: size, bordered: bordered, striped: striped, ...tableProps, ref: cloneRef(tableProps?.ref, tableRef), children: _jsxs(SelectionContext, { options: rows, primaryKey: primaryKey, childrenKey: childrenKey !== null ? childrenKey : void 0, relation: relation, integration: integration, disabled: !selectable, multiple: multiple, defaultValue: defaultValue, value: value, onChange: onChange, children: [_jsx(DataGridHead, { rows: rows, flattedColumns: flattedColumns, completedColumns: completedColumns, primaryKey: primaryKey, allowSelectAll: allowSelectAll, columnResizable: columnResizable, orderColumn: innerOrderColumn.current, orderType: innerOrderType.current, onOrderChange: orderChangeHandler, filterBubbleProps: filterBubbleProps, onFilterClick: onFilterClick }), _jsx("tbody", { children: _jsx(DataGridContext, { value: useMemo(() => ({
+            }), children: [_jsx(Table, { size: size, bordered: bordered, striped: striped, ...tableProps, ref: cloneRef(tableProps?.ref, tableRef), children: _jsxs(SelectionContext, { options: rows, primaryKey: primaryKey, childrenKey: childrenKey !== null ? childrenKey : void 0, relation: relation, integration: integration, disabled: !selectable, multiple: multiple, defaultValue: defaultValue, value: value, onChange: onChange, onToggle: onToggle, children: [_jsx(DataGridHead, { rows: rows, flattedColumns: flattedColumns, completedColumns: completedColumns, primaryKey: primaryKey, allowSelectAll: allowSelectAll, columnResizable: columnResizable, orderColumn: innerOrderColumn.current, orderType: innerOrderType.current, onOrderChange: orderChangeHandler, filterBubbleProps: filterBubbleProps, onFilterClick: onFilterClick }), _jsx("tbody", { children: _jsx(DataGridContext, { value: useMemo(() => ({
                                         slots, slotProps,
                                         rowProps, primaryKey, childrenKey, clickRowToSelect, indent, renderExpandIcon,
                                         expandedSet, flattedColumns, toggleExpanded

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

@@ -1,28 +1,26 @@
-import { ReactElement, ReactNode, Ref } from 'react';
+import { ReactElement, Ref } from 'react';
 import { DialogProps } from '../dialog/index.js';
 import { OptionType, SelectionContextBaseProps } from '../selectionContext/index.js';
 import { SelectedListProps } from '../selectedList/index.js';
-import { Id } from '../../types.js';
+import { Id, SelectableProps } from '../../types.js';
 export type PickerDialogRef<V extends Id = Id> = {
     open(value?: V | V[]): Promise<V | V[]>;
 };
-export interface PickerDialogProps<O extends OptionType<V>, V extends Id = Id> extends Omit<DialogProps, 'ref' | 'children' | 'onConfirm' | 'onToggle'>, Omit<SelectionContextBaseProps<O, V>, 'children'> {
+export interface PickerDialogBaseProps<O extends OptionType<V>, V extends Id = Id> extends Omit<DialogProps, 'ref' | 'onConfirm' | 'onToggle' | 'onChange'>, SelectionContextBaseProps<O, V> {
     ref?: Ref<PickerDialogRef<V>>;
     /** 默认的ref已被PickerDialogRef取代，需要dialogRef指向dialog元素 */
     dialogRef?: Ref<HTMLDivElement>;
-    multiple?: boolean;
-    children?: ReactNode | ((selectionProps: Omit<SelectionContextBaseProps<O, V>, 'children'> & {
-        multiple?: boolean;
-    }) => ReactNode);
     showSelectedList?: boolean;
     /** 已选列表的位置，默认为`right` */
     selectedListPlacement?: 'left' | 'right';
     selectedListProps?: SelectedListProps<V>;
     selectedItemProps?: SelectedListProps<V>['itemProps'];
     onConfirm?(value: V | V[]): void;
+    onClear?(): void;
     /** @alias {@link options} */
     rows?: O[];
     /** @alias {@link options} */
     nodes?: O[];
 }
+export type PickerDialogProps<O extends OptionType<V>, V extends Id = Id> = PickerDialogBaseProps<O, V> & SelectableProps<V>;
 export declare const PickerDialog: <O extends OptionType<V>, V extends Id = Id>(props: PickerDialogProps<O, V>) => ReactElement;

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

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-import { cloneElement, isValidElement, useImperativeHandle, useRef, useState } from 'react';
+import { useImperativeHandle, useRef } from 'react';
 import { Dialog } from '../dialog/index.js';
 import { clsx, mergeComponentProps, toArray, useControlled } from '../../utils/index.js';
 import { classes, style } from './pickerDialog.style.js';
@@ -9,9 +9,9 @@ import { SelectedList } from '../selectedList/index.js';
 import { Button } from '../button/index.js';
 import { Icon } from '../icon/index.js';
 import { faTrashCan } from '@fortawesome/free-regular-svg-icons/faTrashCan';
-export const PickerDialog = (({ ref, dialogRef, multiple, children, showSelectedList = !!multiple, selectedListPlacement = 'right', selectedListProps, selectedItemProps, onConfirm, rows, nodes, 
-// 以下属性从SelectionContextBaseProps继承
-options = rows ?? nodes, primaryKey = 'id', childrenKey = 'children', relation = 'dependent', integration = 'shallowest', disabled, clearable = !!multiple, onToggle, ...props }) => {
+export const PickerDialog = (({ ref, dialogRef, multiple, showSelectedList = !!multiple, selectedListPlacement = 'right', selectedListProps, selectedItemProps, onConfirm, onClear, rows, nodes, 
+// 以下属性从SelectionContextProps继承
+options = rows ?? nodes, primaryKey = 'id', childrenKey = 'children', relation = 'dependent', integration = 'shallowest', disabled, clearable = !!multiple, onToggle, defaultValue, value, onChange, ...props }) => {
     const resolvers = useRef(void 0);
     useImperativeHandle(ref, () => ({
         open(value) {
@@ -21,12 +21,16 @@ options = rows ?? nodes, primaryKey = 'id', childrenKey = 'children', relation =
             return promise;
         }
     }));
-    const [innerValue, _setInnerValue] = useState(multiple ? [] : null);
+    const [innerValue, _setInnerValue] = useControlled(defaultValue || (multiple ? [] : null), value, onChange);
     const setInnerValue = (value) => {
         _setInnerValue(value);
         // 单选模式，值每次改变都触发确认
         !multiple && confirmHandler(value);
     };
+    const clearHandler = () => {
+        onClear?.();
+        setInnerValue(multiple ? [] : null);
+    };
     const [innerOpen, setInnerOpen] = useControlled(props.defaultOpen, props.open);
     const closeHandler = (reason) => {
         if (reason === 'confirmed') {
@@ -36,12 +40,12 @@ options = rows ?? nodes, primaryKey = 'id', childrenKey = 'children', relation =
         if (!open) {
             resolvers.current?.reject({
                 type: 'canceled',
-                value: innerValue
+                value: innerValue.current
             });
         }
         setInnerOpen(false);
     };
-    const confirmHandler = (value = innerValue) => {
+    const confirmHandler = (value = innerValue.current) => {
         onConfirm?.(value);
         resolvers.current?.resolve(value);
         setInnerOpen(false);
@@ -49,18 +53,7 @@ options = rows ?? nodes, primaryKey = 'id', childrenKey = 'children', relation =
     const onExited = () => {
         _setInnerValue(null);
     };
-    const renderChildren = () => {
-        const selectionProps = { rows, nodes, options, primaryKey, relation, integration, disabled, multiple };
-        return typeof children === 'function'
-            ? children(selectionProps)
-            : isValidElement(children)
-                ? cloneElement(children, {
-                    ...selectionProps,
-                    ...children.props
-                })
-                : children;
-    };
-    const selectedCount = toArray(innerValue)?.length || 0;
+    const selectedCount = toArray(innerValue.current)?.length || 0;
     return (_jsx(SelectionContext, { options,
         primaryKey,
         childrenKey,
@@ -68,7 +61,7 @@ options = rows ?? nodes, primaryKey = 'id', childrenKey = 'children', relation =
         integration,
         disabled,
         clearable,
-        multiple, value: innerValue, onChange: setInnerValue, onToggle: onToggle, children: _jsx(Dialog, { ...mergeComponentProps({
+        multiple, value: innerValue.current, onChange: setInnerValue, onToggle: onToggle, children: _jsx(Dialog, { ...mergeComponentProps({
                 width: multiple ? '90%' : 1080,
                 footer: null,
                 maskClosable: false
@@ -80,6 +73,6 @@ options = rows ?? nodes, primaryKey = 'id', childrenKey = 'children', relation =
                 modalProps: mergeComponentProps(props.modalProps, { onExited })
             }), onClose: closeHandler, ...showSelectedList && {
                 [selectedListPlacement === 'left' ? 'prefix' : 'suffix']: (_jsxs("div", { className: classes.selectedArea, children: [_jsxs(Divider, { className: classes.count, textAlign: "start", children: [_jsxs("div", { children: ["\u5DF2\u9009\u62E9", _jsx("b", { children: selectedCount }), "\u9879"] }), clearable &&
-                                    _jsx(Button, { prefix: _jsx(Icon, { icon: faTrashCan }), variant: "plain", color: "text.secondary", onClick: () => setInnerValue(multiple ? [] : null), children: "\u6E05\u7A7A" })] }), _jsx(SelectedList, { itemProps: selectedItemProps, ...selectedListProps, className: clsx(classes.list, selectedListProps?.className) }), _jsx(Button, { className: classes.confirm, disabled: selectedCount === 0, onClick: () => confirmHandler(), children: "\u786E\u5B9A" })] }))
-            }, children: renderChildren() }) }));
+                                    _jsx(Button, { prefix: _jsx(Icon, { icon: faTrashCan }), variant: "plain", color: "text.secondary", onClick: clearHandler, children: "\u6E05\u7A7A" })] }), _jsx(SelectedList, { itemProps: selectedItemProps, ...selectedListProps, className: clsx(classes.list, selectedListProps?.className) }), _jsx(Button, { className: classes.confirm, disabled: selectedCount === 0, onClick: () => confirmHandler(), children: "\u786E\u5B9A" })] }))
+            }, children: props.children }) }));
 });

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

@@ -16,5 +16,9 @@ export const style = defineCss(({ spacing }) => css `
             text-overflow: ellipsis;
             overflow: hidden;
         }
+
+        .${alertClasses.description} {
+            margin-top: 0;
+        }
     }
 `);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canlooks/can-ui",
-  "version": "0.0.201",
+  "version": "0.0.203",
   "author": "C.CanLiang <canlooks@gmail.com>",
   "description": "My ui framework",
   "license": "MIT",