@canlooks/can-ui 0.0.200 → 0.0.202

package/dist/cjs/components/cascade/cascade.js

@@ -76,7 +76,6 @@ loading, options, labelKey = 'label', primaryKey = 'value', childrenKey = 'child
         if ((0, utils_1.isNoValue)(value)) {
             return [];
         }
-        console.log(142, value.slice(0, -1));
         return value.slice(0, -1);
     });
     const toggleOpenedPanels = (value, index) => {
@@ -132,6 +131,7 @@ loading, options, labelKey = 'label', primaryKey = 'value', childrenKey = 'child
     };
     const actualOptions = innerOptions || options;
     const { value: innerValue, setValue: setInnerValue, toggleSelected, selectionStatus, optionsMap } = (0, selectionContext_1.useSelection)({
+        standalone: true,
         options: actualOptions,
         multiple,
         value: toStandardValue(pathifiedValue.current),

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) {
@@ -30,6 +30,12 @@ options = rows ?? nodes, primaryKey = 'id', childrenKey = 'children', relation =
         // 单选模式，值每次改变都触发确认
         !multiple && confirmHandler(value);
     };
+    const clearHandler = () => {
+        onClear?.();
+        const newValue = multiple ? [] : null;
+        onChange?.(newValue);
+        setInnerValue(newValue);
+    };
     const [innerOpen, setInnerOpen] = (0, utils_1.useControlled)(props.defaultOpen, props.open);
     const closeHandler = (reason) => {
         if (reason === 'confirmed') {
@@ -52,17 +58,6 @@ 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;
     return ((0, jsx_runtime_1.jsx)(selectionContext_1.SelectionContext, { options,
         primaryKey,
@@ -83,6 +78,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/selectionContext/selectionContext.d.ts

@@ -32,6 +32,8 @@ export type SelectionContextBaseProps<O extends OptionType<V>, V extends Id = Id
     disabled?: boolean;
     onToggle?(checked: boolean, value: V, option?: O): void;
     children?: ReactNode;
+    /** 若设为true，则该Context不受父级Context影响，默认为`false` */
+    standalone?: boolean;
 };
 export type ISelectionContext<O extends OptionType<V>, V extends Id = Id> = {
     inSelection: true;

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

@@ -19,15 +19,12 @@ function useSelection({ ...props }) {
      * 若嵌套在另个一SelectionContext内，取最外层数据
      */
     const context = (0, selectionContext_1.useSelectionContext)();
-    if (context.inSelection) {
+    if (!props.standalone && context.inSelection) {
         innerValue.current = context.value;
         setInnerValue = context.setValue;
         innerOptions.current = context.options;
     }
-    const optionsMap = (0, react_1.useMemo)(() => {
-        if (context.inSelection) {
-            return context.optionsMap;
-        }
+    const _optionsMap = (0, react_1.useMemo)(() => {
         const map = new Map();
         const fn = (arr, parentId) => {
             // 有时arr可能不为数组，需要判断，如DataGrid组件的row.children
@@ -41,7 +38,8 @@ function useSelection({ ...props }) {
         };
         fn(innerOptions.current);
         return map;
-    }, [innerOptions.current, props.primaryKey, props.childrenKey, context.optionsMap]);
+    }, [innerOptions.current, props.primaryKey, props.childrenKey]);
+    const optionsMap = !props.standalone && context.inSelection ? context.optionsMap : _optionsMap;
     const syncOptionsMap = (0, utils_1.useSync)(optionsMap);
     const syncProps = (0, utils_1.useSync)(props);
     const calSelectionStatus = (selectedSet = new Set((0, utils_1.toArray)(innerValue.current))) => {
@@ -84,21 +82,15 @@ function useSelection({ ...props }) {
         return map;
     };
     const preCalSelectionStatus = (0, react_1.useRef)(void 0);
-    const selectionStatus = (0, react_1.useMemo)(() => {
-        if (context.inSelection) {
-            return context.selectionStatus;
-        }
+    const _selectionStatus = (0, react_1.useMemo)(() => {
         // 调用toggleSelected()方法后可能会预先计算selectionStatus
         const ret = preCalSelectionStatus.current || calSelectionStatus();
         preCalSelectionStatus.current = void 0;
         return ret;
-    }, [innerValue.current, optionsMap, props.multiple, props.relation, context.selectionStatus]);
+    }, [innerValue.current, optionsMap, props.multiple, props.relation]);
+    const selectionStatus = !props.standalone && context.inSelection ? context.selectionStatus : _selectionStatus;
     const syncSelectionStatus = (0, utils_1.useSync)(selectionStatus);
-    const toggleSelected = (0, react_1.useCallback)((value) => {
-        if (context.inSelection) {
-            context.toggleSelected(value);
-            return;
-        }
+    const _toggleSelected = (0, react_1.useCallback)((value) => {
         if (syncProps.current.disabled) {
             return;
         }
@@ -190,7 +182,8 @@ function useSelection({ ...props }) {
                 children && loopOptions(callback, children, ret);
             });
         }
-    }, [context.inSelection]);
+    }, []);
+    const toggleSelected = !props.standalone && context.inSelection ? context.toggleSelected : _toggleSelected;
     return {
         inSelection: true,
         multiple: props.multiple,

package/dist/cjs/components/treeSelect/treeSelect.js

@@ -39,6 +39,7 @@ value, onChange, renderBackfill, ...props }) => {
         return fn(react_1.Children.toArray(children));
     }, [options, nodes, children]);
     const { value: innerValue, setValue: setInnerValue, toggleSelected, optionsMap } = (0, selectionContext_1.useSelection)({
+        standalone: true,
         options: actualOptions,
         primaryKey,
         childrenKey,

package/dist/esm/components/cascade/cascade.js

@@ -72,7 +72,6 @@ loading, options, labelKey = 'label', primaryKey = 'value', childrenKey = 'child
         if (isNoValue(value)) {
             return [];
         }
-        console.log(142, value.slice(0, -1));
         return value.slice(0, -1);
     });
     const toggleOpenedPanels = (value, index) => {
@@ -128,6 +127,7 @@ loading, options, labelKey = 'label', primaryKey = 'value', childrenKey = 'child
     };
     const actualOptions = innerOptions || options;
     const { value: innerValue, setValue: setInnerValue, toggleSelected, selectionStatus, optionsMap } = useSelection({
+        standalone: true,
         options: actualOptions,
         multiple,
         value: toStandardValue(pathifiedValue.current),

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, useState } 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) {
@@ -27,6 +27,12 @@ options = rows ?? nodes, primaryKey = 'id', childrenKey = 'children', relation =
         // 单选模式，值每次改变都触发确认
         !multiple && confirmHandler(value);
     };
+    const clearHandler = () => {
+        onClear?.();
+        const newValue = multiple ? [] : null;
+        onChange?.(newValue);
+        setInnerValue(newValue);
+    };
     const [innerOpen, setInnerOpen] = useControlled(props.defaultOpen, props.open);
     const closeHandler = (reason) => {
         if (reason === 'confirmed') {
@@ -49,17 +55,6 @@ 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;
     return (_jsx(SelectionContext, { options,
         primaryKey,
@@ -80,6 +75,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/selectionContext/selectionContext.d.ts

@@ -32,6 +32,8 @@ export type SelectionContextBaseProps<O extends OptionType<V>, V extends Id = Id
     disabled?: boolean;
     onToggle?(checked: boolean, value: V, option?: O): void;
     children?: ReactNode;
+    /** 若设为true，则该Context不受父级Context影响，默认为`false` */
+    standalone?: boolean;
 };
 export type ISelectionContext<O extends OptionType<V>, V extends Id = Id> = {
     inSelection: true;

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

@@ -15,15 +15,12 @@ export function useSelection({ ...props }) {
      * 若嵌套在另个一SelectionContext内，取最外层数据
      */
     const context = useSelectionContext();
-    if (context.inSelection) {
+    if (!props.standalone && context.inSelection) {
         innerValue.current = context.value;
         setInnerValue = context.setValue;
         innerOptions.current = context.options;
     }
-    const optionsMap = useMemo(() => {
-        if (context.inSelection) {
-            return context.optionsMap;
-        }
+    const _optionsMap = useMemo(() => {
         const map = new Map();
         const fn = (arr, parentId) => {
             // 有时arr可能不为数组，需要判断，如DataGrid组件的row.children
@@ -37,7 +34,8 @@ export function useSelection({ ...props }) {
         };
         fn(innerOptions.current);
         return map;
-    }, [innerOptions.current, props.primaryKey, props.childrenKey, context.optionsMap]);
+    }, [innerOptions.current, props.primaryKey, props.childrenKey]);
+    const optionsMap = !props.standalone && context.inSelection ? context.optionsMap : _optionsMap;
     const syncOptionsMap = useSync(optionsMap);
     const syncProps = useSync(props);
     const calSelectionStatus = (selectedSet = new Set(toArray(innerValue.current))) => {
@@ -80,21 +78,15 @@ export function useSelection({ ...props }) {
         return map;
     };
     const preCalSelectionStatus = useRef(void 0);
-    const selectionStatus = useMemo(() => {
-        if (context.inSelection) {
-            return context.selectionStatus;
-        }
+    const _selectionStatus = useMemo(() => {
         // 调用toggleSelected()方法后可能会预先计算selectionStatus
         const ret = preCalSelectionStatus.current || calSelectionStatus();
         preCalSelectionStatus.current = void 0;
         return ret;
-    }, [innerValue.current, optionsMap, props.multiple, props.relation, context.selectionStatus]);
+    }, [innerValue.current, optionsMap, props.multiple, props.relation]);
+    const selectionStatus = !props.standalone && context.inSelection ? context.selectionStatus : _selectionStatus;
     const syncSelectionStatus = useSync(selectionStatus);
-    const toggleSelected = useCallback((value) => {
-        if (context.inSelection) {
-            context.toggleSelected(value);
-            return;
-        }
+    const _toggleSelected = useCallback((value) => {
         if (syncProps.current.disabled) {
             return;
         }
@@ -186,7 +178,8 @@ export function useSelection({ ...props }) {
                 children && loopOptions(callback, children, ret);
             });
         }
-    }, [context.inSelection]);
+    }, []);
+    const toggleSelected = !props.standalone && context.inSelection ? context.toggleSelected : _toggleSelected;
     return {
         inSelection: true,
         multiple: props.multiple,

package/dist/esm/components/treeSelect/treeSelect.js

@@ -36,6 +36,7 @@ value, onChange, renderBackfill, ...props }) => {
         return fn(Children.toArray(children));
     }, [options, nodes, children]);
     const { value: innerValue, setValue: setInnerValue, toggleSelected, optionsMap } = useSelection({
+        standalone: true,
         options: actualOptions,
         primaryKey,
         childrenKey,

package/package.json

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