@canlooks/can-ui 0.0.20 → 0.0.22

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

@@ -1,7 +1,7 @@
-import { ReactNode, Ref } from 'react';
+import React, { ReactNode, Ref } from 'react';
 import { ColorPropsValue, DIVProps, Id, Size } from '../../../types';
 export interface CheckboxBaseProps extends DIVProps {
-    inputProps?: JSX.IntrinsicElements['input'];
+    inputProps?: React.JSX.IntrinsicElements['input'];
     inputRef?: Ref<HTMLInputElement>;
     /** @private 内部使用 */
     _type: 'checkbox' | 'radio';
@@ -16,4 +16,4 @@ export interface CheckboxBaseProps extends DIVProps {
     checked?: boolean;
     onChange?(e: React.ChangeEvent<HTMLInputElement>): void;
 }
-export declare const CheckboxBase: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Omit<CheckboxBaseProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>>;
+export declare const CheckboxBase: React.MemoExoticComponent<({ inputProps, inputRef, _type, size, color, label, value, indeterminate, disabled, readOnly, defaultChecked, checked, onChange, ...props }: CheckboxBaseProps) => import("@emotion/react/jsx-runtime").JSX.Element>;

package/dist/cjs/components/checkboxBase/checkboxBase.js

@@ -7,7 +7,7 @@ const utils_1 = require("../../utils");
 const checkboxBase_style_1 = require("./checkboxBase.style");
 const icons_1 = require("@ant-design/icons");
 const checkboxBaseGroup_1 = require("../checkboxBaseGroup");
-exports.CheckboxBase = (0, react_1.memo)((0, react_1.forwardRef)(({ inputProps, inputRef, _type, size, color, label, value, indeterminate, disabled, readOnly, defaultChecked = false, checked, onChange, ...props }, ref) => {
+exports.CheckboxBase = (0, react_1.memo)(({ inputProps, inputRef, _type, size, color, label, value, indeterminate, disabled, readOnly, defaultChecked = false, checked, onChange, ...props }) => {
     const context = (0, checkboxBaseGroup_1.useCheckboxBaseGroupContext)();
     size ??= context.size || 'medium';
     color ??= context.color || 'primary';
@@ -35,7 +35,7 @@ exports.CheckboxBase = (0, react_1.memo)((0, react_1.forwardRef)(({ inputProps,
         inputProps?.onKeyDown?.(e);
         e.key === 'Enter' && clickHandler(e);
     };
-    return ((0, jsx_runtime_1.jsxs)("div", { ...props, ref: ref, css: (0, checkboxBase_style_1.useStyle)({ color }), className: (0, utils_1.classnames)(checkboxBase_style_1.classes.root, props.className), onClick: clickHandler, "data-size": size, "data-checked": innerChecked.current && !indeterminate, "data-disabled": disabled, children: [_type === 'checkbox'
+    return ((0, jsx_runtime_1.jsxs)("div", { ...props, css: (0, checkboxBase_style_1.useStyle)({ color }), className: (0, utils_1.classnames)(checkboxBase_style_1.classes.root, props.className), onClick: clickHandler, "data-size": size, "data-checked": innerChecked.current && !indeterminate, "data-disabled": disabled, children: [_type === 'checkbox'
                 ? (0, jsx_runtime_1.jsx)("div", { ref: checkboxRef, className: checkboxBase_style_1.classes.checkbox, children: indeterminate
                         ? (0, jsx_runtime_1.jsx)("div", { className: checkboxBase_style_1.classes.indeterminate })
                         : innerChecked.current
@@ -45,4 +45,4 @@ exports.CheckboxBase = (0, react_1.memo)((0, react_1.forwardRef)(({ inputProps,
                         ? (0, jsx_runtime_1.jsx)("div", { className: checkboxBase_style_1.classes.radioChecked })
                         : null }), !!label &&
                 (0, jsx_runtime_1.jsx)("div", { className: checkboxBase_style_1.classes.label, children: label }), (0, jsx_runtime_1.jsx)("input", { type: _type, disabled: disabled, readOnly: readOnly, ...inputProps, ref: (0, utils_1.cloneRef)(innerInputRef, inputRef), className: (0, utils_1.classnames)(checkboxBase_style_1.classes.input, inputProps?.className), onKeyDown: inputKeydown })] }));
-}));
+});

package/dist/cjs/components/checkboxBase/checkboxBase.style.d.ts

@@ -1,10 +1,10 @@
 import { CheckboxBaseProps } from './checkboxBase';
 export declare const classes: {
+    icon: string;
+    label: string;
+    input: string;
     checkbox: string;
     radio: string;
-    input: string;
-    label: string;
-    icon: string;
     radioChecked: string;
     indeterminate: string;
 } & {

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

@@ -1,7 +1,7 @@
 import { ReactElement } from 'react';
 import { FlexProps } from '../flex';
 import { CheckboxBaseProps } from '../checkboxBase';
-import { ColorPropsValue, Id, Obj, Size } from '../../../types';
+import { ColorPropsValue, Id, Obj, SelectableProps, Size } from '../../../types';
 export interface ItemType extends Omit<CheckboxBaseProps, '_type'>, Obj {
 }
 export interface CheckboxBaseGroupCommonProps<I extends ItemType> extends Omit<FlexProps, 'defaultValue' | 'onChange'> {
@@ -10,19 +10,7 @@ export interface CheckboxBaseGroupCommonProps<I extends ItemType> extends Omit<F
     items?: I[];
     primaryKey?: keyof I;
 }
-export interface CheckboxBaseGroupSingleProps<I extends ItemType, V extends Id = Id> extends CheckboxBaseGroupCommonProps<I> {
-    multiple?: false;
-    defaultValue?: V;
-    value?: V;
-    onChange?(value: V): void;
-}
-export interface CheckboxBaseGroupMultipleProps<I extends ItemType, V extends Id = Id> extends CheckboxBaseGroupCommonProps<I> {
-    multiple: true;
-    defaultValue?: V[];
-    value?: V[];
-    onChange?(value: V[]): void;
-}
-export type CheckboxBaseGroupProps<I extends ItemType, V extends Id = Id> = CheckboxBaseGroupSingleProps<I, V> | CheckboxBaseGroupMultipleProps<I, V>;
+export type CheckboxBaseGroupProps<I extends ItemType, V extends Id = Id> = CheckboxBaseGroupCommonProps<I> & SelectableProps<V>;
 export declare function useCheckboxBaseGroupContext(): {
     size?: Size;
     color?: ColorPropsValue;

package/dist/cjs/components/checkboxBaseGroup/checkboxBaseGroup.js

@@ -7,16 +7,17 @@ const react_1 = require("react");
 const flex_1 = require("../flex");
 const utils_1 = require("../../utils");
 const checkboxBaseGroup_style_1 = require("./checkboxBaseGroup.style");
-const checkbox_1 = require("../checkbox/checkbox");
+const checkbox_1 = require("../checkbox");
 const radio_1 = require("../radio");
-const app_1 = require("../app");
+const theme_1 = require("../theme");
+const selectionContext_1 = require("../selectionContext");
 const checkboxBaseGroupContext = (0, react_1.createContext)({});
 function useCheckboxBaseGroupContext() {
     return (0, react_1.useContext)(checkboxBaseGroupContext);
 }
-exports.CheckboxBaseGroup = (0, react_1.forwardRef)(({ size, color, items, primaryKey = 'value', multiple, defaultValue, value, onChange, ...props }, ref) => {
-    const { spacing } = (0, app_1.useTheme)();
-    const [innerValue, toggleSelected] = (0, utils_1.useControlledSelect)({ multiple, defaultValue, value, onChange });
+exports.CheckboxBaseGroup = (({ size, color, items, primaryKey = 'value', multiple, defaultValue, value, onChange, ...props }) => {
+    const { spacing } = (0, theme_1.useTheme)();
+    const [innerValue, toggleSelected] = (0, selectionContext_1.useShallowSelection)({ multiple, defaultValue, value, onChange });
     const renderItems = () => {
         if (items) {
             return items.map((p, i) => {
@@ -32,17 +33,18 @@ exports.CheckboxBaseGroup = (0, react_1.forwardRef)(({ size, color, items, prima
             if (!(0, react_1.isValidElement)(c)) {
                 return c;
             }
-            const itemValue = c.props.value;
+            const { props } = c;
+            const itemValue = props.value;
             return (0, react_1.cloneElement)(c, {
-                size: c.props.size ?? size,
-                color: c.props.color ?? color,
+                size: props.size ?? size,
+                color: props.color ?? color,
                 checked: (0, utils_1.isSelected)(itemValue, innerValue.current),
                 onChange: e => {
-                    c.props.onChange?.(e);
+                    props.onChange?.(e);
                     toggleSelected(itemValue);
                 }
             });
         });
     };
-    return ((0, jsx_runtime_1.jsx)(flex_1.Flex, { gap: spacing[8], ...props, ref: ref, className: (0, utils_1.classnames)(checkboxBaseGroup_style_1.classes.root, props.className), children: renderItems() }));
+    return ((0, jsx_runtime_1.jsx)(flex_1.Flex, { gap: spacing[8], ...props, className: (0, utils_1.classnames)(checkboxBaseGroup_style_1.classes.root, props.className), children: renderItems() }));
 });

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

@@ -2,7 +2,7 @@ import { ReactElement } from 'react';
 import { DIVProps, DefineElement } from '../../../types';
 export interface ClickAwayProps extends DIVProps {
     container?: DefineElement<Element | Window>;
-    /** 传入addEventListener的事件类型，@default 'click' */
+    /** 传入addEventListener的事件类型，默认为`'click'` */
     eventType?: string;
     onClickAway?(e: MouseEvent): void;
     disabled?: boolean;
@@ -10,4 +10,4 @@ export interface ClickAwayProps extends DIVProps {
     /** 用于参考的目标元素，若为数组，需要点击数组外的元素才会触发clickAway */
     targets?: () => Element | null | (Element | null)[];
 }
-export declare const ClickAway: import("react").ForwardRefExoticComponent<Omit<ClickAwayProps, "ref"> & import("react").RefAttributes<any>>;
+export declare function ClickAway({ ref, container, eventType, onClickAway, disabled, children, targets, ...props }: ClickAwayProps): ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | undefined;

package/dist/cjs/components/clickAway/clickAway.js

@@ -1,9 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ClickAway = void 0;
+exports.ClickAway = ClickAway;
 const react_1 = require("react");
 const utils_1 = require("../../utils");
-exports.ClickAway = (0, react_1.forwardRef)(({ container = self, eventType = 'click', onClickAway, disabled, children, targets, ...props }, ref) => {
+function ClickAway({ ref, container = self, eventType = 'click', onClickAway, disabled, children, targets, ...props }) {
     const syncOnClickAway = (0, utils_1.useSync)(onClickAway);
     const childRef = (0, react_1.useRef)(null);
     const targetsArr = (0, react_1.useRef)([]);
@@ -36,4 +36,4 @@ exports.ClickAway = (0, react_1.forwardRef)(({ container = self, eventType = 'cl
             ref: clonedRef
         })
         : children;
-});
+}

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

@@ -1,9 +1,9 @@
-import { ReactNode, Ref } from 'react';
+import React, { ReactNode, Ref } from 'react';
 import { PopperProps, PopperRef } from '../popper';
 import { ColorPropsValue, DIVProps, Size } from '../../../types';
 import Color from 'color';
 export interface ColorPickerProps extends Omit<DIVProps, 'defaultValue' | 'onChange'> {
-    inputProps?: JSX.IntrinsicElements['input'];
+    inputProps?: React.JSX.IntrinsicElements['input'];
     inputRef?: Ref<HTMLInputElement>;
     popperProps?: PopperProps;
     popperRef?: Ref<PopperRef>;
@@ -18,4 +18,4 @@ export interface ColorPickerProps extends Omit<DIVProps, 'defaultValue' | 'onCha
     value?: Color;
     onChange?(color: Color): void;
 }
-export declare const ColorPicker: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Omit<ColorPickerProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>>;
+export declare const ColorPicker: React.MemoExoticComponent<({ inputProps, inputRef, popperProps, popperRef, size, shape, label, presets, defaultOpen, open, onOpenChange, defaultValue, value, onChange, ...props }: ColorPickerProps) => import("@emotion/react/jsx-runtime").JSX.Element>;

package/dist/cjs/components/colorPicker/colorPicker.js

@@ -8,24 +8,24 @@ const popper_1 = require("../popper");
 const inputBase_1 = require("../inputBase");
 const colorPicker_style_1 = require("./colorPicker.style");
 const utils_1 = require("../../utils");
-const app_1 = require("../app");
+const theme_1 = require("../theme");
 const palette_1 = require("../palette");
 const color_1 = tslib_1.__importDefault(require("color"));
-exports.ColorPicker = (0, react_1.memo)((0, react_1.forwardRef)(({ inputProps, inputRef, popperProps, popperRef, size, shape = 'square', label = '自定义', presets, defaultOpen, open, onOpenChange, defaultValue, value, onChange, ...props }, ref) => {
-    const theme = (0, app_1.useTheme)();
+exports.ColorPicker = (0, react_1.memo)(({ inputProps, inputRef, popperProps, popperRef, size, shape = 'square', label = '自定义', presets, defaultOpen, open, onOpenChange, defaultValue, value, onChange, ...props }) => {
+    const theme = (0, theme_1.useTheme)();
     size ??= theme.size;
     const [innerOpen, setInnerOpen] = (0, utils_1.useControlled)(defaultOpen, open, onOpenChange);
     const openChangeHandler = (open) => {
         popperProps?.onOpenChange?.(open);
         setInnerOpen(open);
     };
-    const [innerValue, setInnerValue] = (0, utils_1.useControlled)(defaultValue ?? (0, color_1.default)(theme.colors.primary, 'hex'), value, onChange);
-    return ((0, jsx_runtime_1.jsxs)("div", { ...props, ref: ref, css: colorPicker_style_1.style, className: (0, utils_1.classnames)(colorPicker_style_1.classes.root, props.className), "data-size": size, "data-shape": shape, children: [presets?.map((color, i) => {
+    const [innerValue, setInnerValue] = (0, utils_1.useControlled)(defaultValue ?? (0, color_1.default)(theme.colors.primary.main, 'hex'), value, onChange);
+    return ((0, jsx_runtime_1.jsxs)("div", { ...props, css: colorPicker_style_1.style, className: (0, utils_1.classnames)(colorPicker_style_1.classes.root, props.className), "data-size": size, "data-shape": shape, children: [presets?.map((color, i) => {
                 const colorInstance = (0, color_1.default)(typeof color === 'string' ? (0, utils_1.colorTransfer)(color, theme) : color);
                 return ((0, jsx_runtime_1.jsx)(BlockItem, { selected: colorInstance.hex() === innerValue.current.hex(), color: (0, color_1.default)(color), onClick: () => setInnerValue((0, color_1.default)(color, 'hex')) }, i));
             }), (0, jsx_runtime_1.jsx)(popper_1.Popper, { css: colorPicker_style_1.colorPickerPopperStyle, open: innerOpen.current, trigger: ['click', 'enter'], placement: "bottomLeft", content: (0, jsx_runtime_1.jsx)(palette_1.Palette, { value: innerValue.current, onChange: setInnerValue }), ...popperProps, popperRef: popperRef, onOpenChange: openChangeHandler, children: (0, jsx_runtime_1.jsx)(inputBase_1.InputBase, { className: colorPicker_style_1.classes.inputBase, size: size, shape: shape === 'circular' ? 'rounded' : shape, children: ({ ref, ...rest }) => (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(BlockItem, { color: innerValue.current }), !!label &&
                                 (0, jsx_runtime_1.jsx)("div", { className: colorPicker_style_1.classes.label, children: label }), (0, jsx_runtime_1.jsx)("input", { ...rest, ...inputProps, ref: (0, utils_1.cloneRef)(ref, inputRef), "data-hidden": "true" })] }) }) })] }));
-}));
+});
 function BlockItem({ color, onClick, selected }) {
     const light = (0, react_1.useMemo)(() => color.luminosity() >= .8, [color]);
     const colorObject = (0, react_1.useMemo)(() => ({

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

@@ -40,7 +40,7 @@ exports.style = (0, utils_1.defineCss)(({ spacing, borderRadius, divider, backgr
         overflow: hidden;
         cursor: pointer;
         position: relative;
-        ${(0, palette_style_1.getTranparentBackground)(background.body, background.card)}
+        ${(0, palette_style_1.getTranparentBackground)(background.body, background.content)}
         background-size: 50% 50%;
 
         .${exports.classes.blockColor} {

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

@@ -4,4 +4,4 @@ export interface ContextMenuProps extends Omit<BubbleProps, 'onClick'> {
     items?: ItemPropType[];
     onClick?(item: ItemPropType): void;
 }
-export declare const ContextMenu: import("react").ForwardRefExoticComponent<Omit<ContextMenuProps, "ref"> & import("react").RefAttributes<unknown>>;
+export declare function ContextMenu({ items, onClick, ...props }: ContextMenuProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/cjs/components/contextMenu/contextMenu.js

@@ -1,16 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ContextMenu = void 0;
+exports.ContextMenu = ContextMenu;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-const react_1 = require("react");
 const bubble_1 = require("../bubble");
 const menuItem_1 = require("../menuItem");
-exports.ContextMenu = (0, react_1.forwardRef)(({ items, onClick, ...props }, ref) => {
+function ContextMenu({ items, onClick, ...props }) {
     const renderItems = (items) => {
         return items?.map((p, i) => (0, jsx_runtime_1.jsx)(menuItem_1.MenuItem, { ...p, onClick: e => {
                 p.onClick?.(e);
                 onClick?.(p);
             }, children: renderItems(p.children) }, p.value ?? i));
     };
-    return ((0, jsx_runtime_1.jsx)(bubble_1.Bubble, { placement: "bottomRight", ...props, ref: ref, trigger: "contextMenu", showArrow: false, content: props.content ?? renderItems(items) }));
-});
+    return ((0, jsx_runtime_1.jsx)(bubble_1.Bubble, { placement: "bottomRight", showArrow: false, ...props, trigger: "contextMenu", content: props.content ?? renderItems(items) }));
+}

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

@@ -15,4 +15,4 @@ export interface CounterProps extends Omit<FlexProps, 'defaultValue' | 'onChange
     increaseProps?: ButtonProps;
     inputProps?: InputProps;
 }
-export declare const Counter: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Omit<CounterProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>>;
+export declare const Counter: import("react").MemoExoticComponent<({ size, min, max, step, precision, defaultValue, value, onChange, decreaseProps, increaseProps, inputProps, ...props }: CounterProps) => import("@emotion/react/jsx-runtime").JSX.Element>;

package/dist/cjs/components/counter/counter.js

@@ -9,7 +9,7 @@ const button_1 = require("../button");
 const icons_1 = require("@ant-design/icons");
 const input_1 = require("../input");
 const flex_1 = require("../flex");
-exports.Counter = (0, react_1.memo)((0, react_1.forwardRef)(({ size, min = -Infinity, max = Infinity, step = 1, precision = 0, defaultValue = 0, value, onChange, decreaseProps, increaseProps, inputProps, ...props }, ref) => {
+exports.Counter = (0, react_1.memo)(({ size, min = -Infinity, max = Infinity, step = 1, precision = 0, defaultValue = 0, value, onChange, decreaseProps, increaseProps, inputProps, ...props }) => {
     const [innerValue, setInnerValue] = (0, utils_1.useControlled)(defaultValue, value, onChange);
     const commonButtonProps = {
         size,
@@ -19,7 +19,7 @@ exports.Counter = (0, react_1.memo)((0, react_1.forwardRef)(({ size, min = -Infi
     const clickHandler = (dir) => {
         setInnerValue(Math.max(min, Math.min(max, innerValue.current + dir * step)));
     };
-    return ((0, jsx_runtime_1.jsxs)(flex_1.Flex, { compact: true, ...props, ref: ref, css: counter_style_1.style, className: (0, utils_1.classnames)(counter_style_1.classes.root, props.className), children: [(0, jsx_runtime_1.jsx)(button_1.Button, { disabled: innerValue.current <= min, ...commonButtonProps, ...decreaseProps, onClick: e => {
+    return ((0, jsx_runtime_1.jsxs)(flex_1.Flex, { compact: true, ...props, css: counter_style_1.style, className: (0, utils_1.classnames)(counter_style_1.classes.root, props.className), children: [(0, jsx_runtime_1.jsx)(button_1.Button, { disabled: innerValue.current <= min, ...commonButtonProps, ...decreaseProps, onClick: e => {
                     decreaseProps?.onClick?.(e);
                     clickHandler(-1);
                 }, children: (0, jsx_runtime_1.jsx)(icons_1.MinusOutlined, {}) }), (0, jsx_runtime_1.jsx)(input_1.Input, { type: "number", widthAdaptable: true, size: size, min: min, max: max, step: step, precision: precision, ...inputProps, className: (0, utils_1.classnames)(counter_style_1.classes.input, inputProps?.className), value: innerValue.current, onChange: e => {
@@ -29,4 +29,4 @@ exports.Counter = (0, react_1.memo)((0, react_1.forwardRef)(({ size, min = -Infi
                     increaseProps?.onClick?.(e);
                     clickHandler(1);
                 }, children: (0, jsx_runtime_1.jsx)(icons_1.PlusOutlined, {}) })] }));
-}));
+});

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

@@ -8,7 +8,7 @@ import { ButtonProps } from '../button';
 import { CurdDialogProps } from './curdDialog';
 import { BubbleConfirmProps } from '../bubbleConfirm';
 export type CurdFormItemProps<I = any> = FormItemProps<I> & {
-    /** 对filter或form内的字段单独排序，数字越大越靠后，@default 0 */
+    /** 对filter或form内的字段单独排序，数字越大越靠后，默认为`0` */
     order?: number;
 } & Obj;
 export type CurdFormItemType<I = any> = CurdFormItemProps<I> | ReactElement | true;
@@ -69,13 +69,13 @@ export interface CurdBaseProps<R extends RowType, F extends FormValue> extends D
     renderExtraControl?(row: R): ReactNode;
     /** 用于做每行数据标题的字段 */
     titleKey?: keyof R;
-    /** 数据的名称，@default "数据" */
+    /** 数据的名称，默认为`"数据"` */
     dataName?: ReactNode;
-    /** create操作的名称，@default "添加" */
+    /** create操作的名称，默认为`"添加"` */
     createName?: ReactNode;
-    /** update操作的名称，@default "编辑" */
+    /** update操作的名称，默认为`"编辑"` */
     updateName?: ReactNode;
-    /** delete操作的名称，@default "删除" */
+    /** delete操作的名称，默认为`"删除"` */
     deleteName?: ReactNode;
     /** create操作完成后触发，若返回promise则会等待promise返回再触发loadRows */
     onCreate?(formValue: F): any;
@@ -87,13 +87,13 @@ export interface CurdBaseProps<R extends RowType, F extends FormValue> extends D
     formProps?: FormProps<F>;
     formRef?: Ref<FormRef<F>>;
 }
-interface CurdSingleProps<R extends RowType, V extends Id = Id, F extends FormValue = FormValue> extends Omit<DataGridSingleProps<R, V>, 'columns'>, CurdBaseProps<R, F> {
+interface CurdSingleProps<R extends RowType, F extends FormValue = FormValue, V extends Id = Id> extends Omit<DataGridSingleProps<R, V>, 'columns'>, CurdBaseProps<R, F> {
 }
-interface CurdMultipleProps<R extends RowType, V extends Id = Id, F extends FormValue = FormValue> extends Omit<DataGridMultipleProps<R, V>, 'columns'>, CurdBaseProps<R, F> {
+interface CurdMultipleProps<R extends RowType, F extends FormValue = FormValue, V extends Id = Id> extends Omit<DataGridMultipleProps<R, V>, 'columns'>, CurdBaseProps<R, F> {
 }
-export type CurdProps<R extends RowType, V extends Id = Id, F extends FormValue = FormValue> = CurdSingleProps<R, V, F> | CurdMultipleProps<R, V, F>;
+export type CurdProps<R extends RowType, F extends FormValue = FormValue, V extends Id = Id> = CurdSingleProps<R, F, V> | CurdMultipleProps<R, F, V>;
 export declare const Curd: {
-    <R extends RowType, V extends Id = Id, F extends FormValue = FormValue>(props: CurdProps<R, V, F>): ReactElement;
+    <R extends RowType, F extends FormValue = FormValue, V extends Id = Id>(props: CurdProps<R, F, V>): ReactElement;
     Filter: typeof CurdFilter;
     CONTROL_COLUMN: symbol;
 };

package/dist/cjs/components/curd/curd.js

@@ -18,7 +18,7 @@ const curdDialog_1 = require("./curdDialog");
 const app_1 = require("../app");
 const bubbleConfirm_1 = require("../bubbleConfirm");
 const selectionContext_1 = require("../selectionContext");
-exports.Curd = (0, react_1.memo)((0, react_1.forwardRef)((props, ref) => {
+exports.Curd = (0, react_1.memo)((props) => {
     const { wrapperProps, wrapperRef, variant = 'standard', loadRows, columns, toolbarLeft, toolbarRight, reloadable = true, onReload, resizable = true, columnConfigurable = true, filterProps, filterRef, initialFilterValue, onFilter, renderFilter, copyable, creatable = true, updatable = true, deletable = true, createButtonProps, updateButtonProps, deleteButtonProps, deleteConfirmProps, controlColumnTitle = '操作', renderExtraControl, titleKey, dataName = '', createName = '添加', updateName = '编辑', deleteName = '删除', onCreate, onUpdate, onDelete, postData, dialogProps, formProps, formRef, onChange, ...dataGridProps } = props;
     /**
      * -------------------------------------------------------------
@@ -89,13 +89,13 @@ exports.Curd = (0, react_1.memo)((0, react_1.forwardRef)((props, ref) => {
      * -------------------------------------------------------------
      * 行数据
      */
-    const { setInnerOptions } = (0, selectionContext_1.useSelectionContext)();
+    const { setOptions } = (0, selectionContext_1.useSelectionContext)();
     const [innerRows, _setInnerRows] = (0, utils_1.useDerivedState)(props.rows);
     (0, react_1.useEffect)(() => {
-        innerRows.current?.length && setInnerOptions?.(innerRows.current);
+        innerRows.current?.length && setOptions?.(innerRows.current);
     }, []);
     const setInnerRows = (data) => {
-        setInnerOptions?.(data);
+        setOptions?.(data);
         _setInnerRows(data);
     };
     const [innerTotal, setInnerTotal] = (0, utils_1.useDerivedState)(props.paginationProps?.total || 0);
@@ -131,7 +131,7 @@ exports.Curd = (0, react_1.memo)((0, react_1.forwardRef)((props, ref) => {
      * 弹窗与曾删改部分
      */
     const curdDialogRef = (0, react_1.useRef)(null);
-    const activeRow = (0, react_1.useRef)();
+    const activeRow = (0, react_1.useRef)(void 0);
     const createHandler = (e) => {
         createButtonProps?.onClick?.(e);
         activeRow.current = void 0;
@@ -174,14 +174,14 @@ exports.Curd = (0, react_1.memo)((0, react_1.forwardRef)((props, ref) => {
                                     (0, jsx_runtime_1.jsxs)(button_1.Button, { prefix: (0, jsx_runtime_1.jsx)(icons_1.PlusOutlined, {}), ...createButtonProps, onClick: createHandler, children: [createName, dataName] }), toolbarLeft] }), (0, jsx_runtime_1.jsxs)("div", { className: curd_style_1.classes.toolbarRight, children: [!!toolbarRight &&
                                     (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [toolbarRight, (0, jsx_runtime_1.jsx)(divider_1.Divider, { className: curd_style_1.classes.divider, orientation: "vertical" })] }), reloadable &&
                                     (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { title: "\u5237\u65B0", children: (0, jsx_runtime_1.jsx)(button_1.Button, { shape: "circular", variant: "text", color: "text", prefix: (0, jsx_runtime_1.jsx)(icons_1.ReloadOutlined, {}), loading: innerLoading.current, onClick: reloadHandler }) }), resizable &&
-                                    (0, jsx_runtime_1.jsx)(curdResizable_1.CurdResizable, { innerSize: innerSize.current, setInnerSize: setInnerSize }), !!columnConfigurable &&
-                                    (0, jsx_runtime_1.jsx)(curdColumnConfig_1.CurdColumnConfig, { columns: orderedColumns, innerVisible: innerVisible.current, setInnerVisible: setInnerVisible, setInnerOrder: setInnerOrder })] })] }), (0, jsx_runtime_1.jsx)("div", { className: curd_style_1.classes.card, children: (0, jsx_runtime_1.jsx)(dataGrid_1.DataGrid, { ...dataGridProps, ref: ref, columns: actualColumns, tableProps: {
+                                    (0, jsx_runtime_1.jsx)(curdResizable_1.CurdResizable, { innerSize: innerSize.current, setInnerSize: setInnerSize }), columnConfigurable &&
+                                    (0, jsx_runtime_1.jsx)(curdColumnConfig_1.CurdColumnConfig, { columns: orderedColumns, innerVisible: innerVisible.current, setInnerVisible: setInnerVisible, setInnerOrder: setInnerOrder })] })] }), (0, jsx_runtime_1.jsx)("div", { className: curd_style_1.classes.card, children: (0, jsx_runtime_1.jsx)(dataGrid_1.DataGrid, { ...dataGridProps, columns: actualColumns, tableProps: {
                         ...props.tableProps,
                         ...resizable && { size: innerSize.current }
                     }, loading: innerLoading.current, rows: innerRows.current, paginatable: !loadRows && props.paginatable, renderPagination: loadRows && props.paginatable !== false
                         ? () => (0, jsx_runtime_1.jsx)(pagination_1.Pagination, { ...props.paginationProps, total: innerTotal.current, page: innerPage.current, onPageChange: setInnerPage, pageSize: innerPageSize.current, onPageSizeChange: setInnerPageSize })
                         : props.renderPagination, orderColumn: innerOrderColumn.current, orderType: innerOrderType.current, onOrderChange: orderChangeHandler }) }), (creatable || updatable) &&
                 (0, jsx_runtime_1.jsx)(curdDialog_1.CurdDialog, { ...dialogProps, ref: curdDialogRef, onFinish: finishHandler, curdProps: props })] }));
-}));
+});
 exports.Curd.Filter = curdFilter_1.CurdFilter;
 exports.Curd.CONTROL_COLUMN = Symbol('control-column');

package/dist/cjs/components/curd/curd.style.d.ts

@@ -1,8 +1,7 @@
 export declare const classes: {
+    filter: string;
     divider: string;
-    card: string;
     toolbar: string;
-    filter: string;
     filterGridContainer: string;
     filterGrid: string;
     filterItem: string;
@@ -11,6 +10,7 @@ export declare const classes: {
     filteredTitle: string;
     toolbarLeft: string;
     toolbarRight: string;
+    card: string;
     control: string;
     dialogTitle: string;
     copyButton: string;

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

@@ -79,7 +79,7 @@ exports.style = (0, utils_1.defineCss)(({ spacing, text, background, borderRadiu
 
     &[data-variant=standard] {
         .${exports.classes.card} {
-            background-color: ${background.card};
+            background-color: ${background.content};
             padding: ${spacing[8]}px;
         }
     }

package/dist/cjs/components/curd/curdColumnConfig.style.d.ts

@@ -1,6 +1,6 @@
 export declare const classes: {
-    title: string;
     content: string;
+    title: string;
     checkbox: string;
     item: string;
 } & {

package/dist/cjs/components/curd/curdDialog.js

@@ -12,17 +12,17 @@ const button_1 = require("../button");
 const icons_1 = require("@ant-design/icons");
 const curd_style_1 = require("./curd.style");
 const pickerDialog_1 = require("../pickerDialog");
-exports.CurdDialog = (0, react_1.memo)((0, react_1.forwardRef)(({ onFinish, 
+exports.CurdDialog = (0, react_1.memo)(({ ref, onFinish, 
 // 继承来的属性
-curdProps, ...props }, ref) => {
+curdProps, ...props }) => {
     const { columns, postData, copyable, titleKey, formProps, formRef, dataName = '', createName = '添加', updateName = '编辑' } = curdProps;
     /**
      * ----------------------------------------------------------------
      * ref与promise部分
      */
     const innerFormRef = (0, react_1.useRef)(null);
-    const resolveFn = (0, react_1.useRef)();
-    const rejectFn = (0, react_1.useRef)();
+    const resolveFn = (0, react_1.useRef)(void 0);
+    const rejectFn = (0, react_1.useRef)(void 0);
     const [innerOpen, setInnerOpen] = (0, utils_1.useControlled)(props.defaultOpen, props.open);
     const closeHandler = (reason) => {
         if (reason === 'confirmed') {
@@ -95,4 +95,4 @@ curdProps, ...props }, ref) => {
             : (0, jsx_runtime_1.jsxs)("div", { className: curd_style_1.classes.dialogTitle, children: [(0, jsx_runtime_1.jsxs)("span", { children: [createName, dataName] }), copyable &&
                         (0, jsx_runtime_1.jsxs)(button_1.Button, { variant: "plain", prefix: (0, jsx_runtime_1.jsx)(icons_1.CopyOutlined, {}), onClick: () => pickerDialogRef.current.open(), children: ["\u4ECE\u5DF2\u6709", dataName || '数据', "\u590D\u5236"] })] }), ...props, open: innerOpen.current, onClose: closeHandler, onConfirm: confirmHandler, confirmLoading: innerLoading.current, children: [(0, jsx_runtime_1.jsx)(loading_1.Loading, { loading: transforming.current, children: (0, jsx_runtime_1.jsx)(form_1.Form, { labelWidth: "20%", ...formProps, ref: (0, utils_1.cloneRef)(formRef, innerFormRef), onFinish: finishHandler, children: renderedFormItems }) }), copyable &&
                 (0, jsx_runtime_1.jsx)(pickerDialog_1.PickerDialog, { ref: pickerDialogRef, onToggle: copiedHandler, children: (0, jsx_runtime_1.jsx)(curd_1.Curd, { ...curdProps, variant: "embeded", copyable: false, creatable: false, updatable: false, deletable: false }) })] }));
-}));
+});

package/dist/cjs/components/curd/curdFilter.d.ts

@@ -6,7 +6,7 @@ import { RowType } from '../dataGrid';
 export interface CurdFilterProps<R extends RowType, F extends FormValue = FormValue> extends Omit<FormProps<F>, 'variant'>, Pick<CurdBaseProps<R, F>, 'columns'> {
     /** 筛选项是否可收起与展开，若开启此功能，需保证每项的高度一致，否则可能出现样式问题 */
     expandable?: boolean;
-    /** 是否显示"筛选"按钮，若为false，则每次触发onChange的同时会触发onFilter，若为true，则onFilter只会在点击按钮时触发，@default false */
+    /** 是否显示"筛选"按钮，若为false，则每次触发onChange的同时会触发onFilter，若为true，则onFilter只会在点击按钮时触发，默认为false */
     showButton?: boolean;
     /** 是否显示已生效的筛选条件 */
     renderConditions?(filterValue: F, formInstance: FormRef<F> | null): ReactNode;

package/dist/cjs/components/curd/curdFilter.js

@@ -10,9 +10,9 @@ const grid_1 = require("../grid");
 const button_1 = require("../button");
 const icons_1 = require("@ant-design/icons");
 const transitionBase_1 = require("../transitionBase");
-const app_1 = require("../app");
-exports.CurdFilter = (0, react_1.memo)((0, react_1.forwardRef)(({ columns, expandable, showButton, renderConditions, buttonProps, onFilter, columnCount = 3, ...props }, ref) => {
-    const { spacing } = (0, app_1.useTheme)();
+const theme_1 = require("../theme");
+exports.CurdFilter = (0, react_1.memo)(({ ref, columns, expandable, showButton, renderConditions, buttonProps, onFilter, columnCount = 3, ...props }) => {
+    const { spacing } = (0, theme_1.useTheme)();
     const items = (0, react_1.useMemo)(() => {
         return (0, utils_1.columnsToFilterItem)(columns);
     }, [columns]);
@@ -54,4 +54,4 @@ exports.CurdFilter = (0, react_1.memo)((0, react_1.forwardRef)(({ columns, expan
                                             (0, jsx_runtime_1.jsx)(button_1.Button, { variant: "text", suffix: (0, jsx_runtime_1.jsx)(icons_1.DownOutlined, { style: { rotate: expanded ? '180deg' : void 0 } }), onClick: () => setExpanded(o => !o), children: expanded ? '收起' : '展开' }), showButton &&
                                             (0, jsx_runtime_1.jsx)(button_1.Button, { prefix: (0, jsx_runtime_1.jsx)(icons_1.FilterOutlined, {}), variant: "outlined", ...buttonProps, onClick: clickHandler, children: buttonProps?.children ?? '筛选' })] })] }) }), !!renderConditions &&
                 (0, jsx_runtime_1.jsxs)("div", { className: curd_style_1.classes.filtered, children: [(0, jsx_runtime_1.jsx)("div", { className: curd_style_1.classes.filteredTitle, children: "\u5DF2\u7B5B\u9009\uFF1A" }), renderConditions(filteredConditions, formRef.current)] })] }));
-}));
+});

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

@@ -1,4 +1,4 @@
-import { ReactElement, ReactNode } from 'react';
+import React, { ReactElement, ReactNode } from 'react';
 import { DIVProps, Id, Obj } from '../../../types';
 import { FieldPath } from '../../utils';
 import { TableProps } from '../table';
@@ -7,7 +7,7 @@ import { SelectionContextProps } from '../selectionContext';
 import { CheckboxProps } from '../checkbox';
 import { RadioProps } from '../radio';
 export type RowType = Obj;
-export interface ColumnType<R extends RowType = RowType> extends Omit<JSX.IntrinsicElements['td'], 'key' | 'ref' | 'title' | 'children'>, Omit<JSX.IntrinsicElements['th'], 'key' | 'ref' | 'title' | 'children'> {
+export interface ColumnType<R extends RowType = RowType> extends Omit<React.JSX.IntrinsicElements['td'], 'key' | 'ref' | 'title' | 'children'>, Omit<React.JSX.IntrinsicElements['th'], 'key' | 'ref' | 'title' | 'children'> {
     title?: ReactNode;
     /** 若不指定key，默认使用{@link field}作为key */
     key?: string | number;
@@ -27,7 +27,7 @@ export interface ColumnType<R extends RowType = RowType> extends Omit<JSX.Intrin
     _negativeRowSpan?: number;
 }
 type DataGridSharedProps<R extends RowType> = {
-    /** 数据的主键名，@default "id" */
+    /** 数据的主键名，默认为"id" */
     primaryKey?: keyof R;
     /**
      * 当数据中存在该字段，则会渲染可展开的子行；
@@ -36,8 +36,8 @@ type DataGridSharedProps<R extends RowType> = {
     childrenKey?: keyof R;
     indent?: number;
     renderExpandIcon?(key: Id, isExpand: boolean, expanded: Id[]): ReactNode;
-    rowProps?(row: R, index: number, rows: R[]): JSX.IntrinsicElements['tr'];
-    /** 点击行时是否触发选中，@default true */
+    rowProps?(row: R, index: number, rows: R[]): React.JSX.IntrinsicElements['tr'];
+    /** 点击行时是否触发选中，默认为true */
     clickRowToSelect?: boolean;
     selectorProps?(row: R, index: number, rows: R[]): CheckboxProps | RadioProps;
 };
@@ -55,17 +55,17 @@ export interface DataGridBaseProps<R extends RowType> extends DataGridSharedProp
      * 行之间的关系
      * @enum {"dependent"}：会自动判断子父行的选中关系。
      * @enum {"standalone"}：所有行相互独立
-     * @default "dependent"
+     * 默认为"dependent"
      */
     relation?: SelectionContextProps<R>['relation'];
     integration?: SelectionContextProps<R>['integration'];
-    /** 是否允许全选，@default true */
+    /** 是否允许全选，默认为true */
     allowSelectAll?: boolean;
     defaultExpanded?: Id[];
     expanded?: Id[];
     onExpandedChange?(expanded: Id[], key: Id, isExpand: boolean): void;
     loading?: boolean;
-    /** 是否内置翻页，@default true */
+    /** 是否内置翻页，默认为true */
     paginatable?: boolean;
     paginationProps?: PaginationProps;
     renderPagination?(props: PaginationProps): ReactNode;
@@ -107,8 +107,8 @@ export declare function useDataGridContext(): {
      */
     childrenKey?: keyof RowType | undefined;
     renderExpandIcon?(key: Id, isExpand: boolean, expanded: Id[]): ReactNode;
-    rowProps?(row: RowType, index: number, rows: RowType[]): JSX.IntrinsicElements["tr"];
-    /** 点击行时是否触发选中，@default true */
+    rowProps?(row: RowType, index: number, rows: RowType[]): React.JSX.IntrinsicElements["tr"];
+    /** 点击行时是否触发选中，默认为true */
     clickRowToSelect?: boolean;
     selectorProps?(row: RowType, index: number, rows: RowType[]): CheckboxProps | RadioProps;
     primaryKey: keyof RowType;

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

@@ -13,12 +13,12 @@ const pagination_1 = require("../pagination");
 const loading_1 = require("../loading");
 const placeholder_1 = require("../placeholder");
 const selectionContext_1 = require("../selectionContext");
-const dataGridContext = (0, react_1.createContext)({});
+const DataGridContext = (0, react_1.createContext)({});
 function useDataGridContext() {
-    const { primaryKey = 'id', indent = 24, expandedSet = new Set(), ...context } = (0, react_1.useContext)(dataGridContext);
+    const { primaryKey = 'id', indent = 24, expandedSet = new Set(), ...context } = (0, react_1.useContext)(DataGridContext);
     return { primaryKey, indent, expandedSet, ...context };
 }
-exports.DataGrid = (0, react_1.memo)((0, react_1.forwardRef)(({ columns, rows, rowProps, selectorProps, primaryKey = 'id', childrenKey, indent = 24, defaultOrderColumn, orderColumn, defaultOrderType = 'descend', orderType, onOrderChange, selectable, clickRowToSelect = true, relation = 'dependent', integration = 'shallowest', allowSelectAll = true, defaultExpanded = [], expanded, onExpandedChange, loading, renderExpandIcon, multiple, defaultValue, value, onChange, paginatable = true, paginationProps = {}, renderPagination, bordered, striped, tableProps, ...props }, ref) => {
+exports.DataGrid = (0, react_1.memo)(({ columns, rows, rowProps, selectorProps, primaryKey = 'id', childrenKey, indent = 24, defaultOrderColumn, orderColumn, defaultOrderType = 'descend', orderType, onOrderChange, selectable, clickRowToSelect = true, relation = 'dependent', integration = 'shallowest', allowSelectAll = true, defaultExpanded = [], expanded, onExpandedChange, loading, renderExpandIcon, multiple, defaultValue, value, onChange, paginatable = true, paginationProps = {}, renderPagination, bordered, striped, tableProps, ...props }) => {
     const { inSelection, disabled } = (0, selectionContext_1.useSelectionContext)();
     // 在SelectionContext内，且未disabled，需要默认打开selectable
     selectable ??= inSelection && !disabled;
@@ -92,7 +92,7 @@ exports.DataGrid = (0, react_1.memo)((0, react_1.forwardRef)(({ columns, rows, r
             return newExpanded;
         });
     };
-    return ((0, jsx_runtime_1.jsxs)(loading_1.Loading, { ...props, ref: ref, css: dataGrid_style_1.style, className: (0, utils_1.classnames)(dataGrid_style_1.classes.root, props.className), loading: loading, children: [(0, jsx_runtime_1.jsx)("div", { className: dataGrid_style_1.classes.container, children: (0, jsx_runtime_1.jsx)(table_1.Table, { bordered: bordered, striped: striped, ...tableProps, children: (0, jsx_runtime_1.jsxs)(selectionContext_1.SelectionContext, { options: rows, primaryKey: primaryKey, childrenKey: childrenKey, relation: relation, integration: integration, disabled: !selectable, multiple: multiple, defaultValue: defaultValue, value: value, onChange: onChange, children: [(0, jsx_runtime_1.jsx)(dataGridHead_1.DataGridHead, { columns: completedColumns, orderColumn: innerOrderColumn.current, orderType: innerOrderType.current, onOrderChange: orderChangeHandler, allowSelectAll: allowSelectAll, multiple: multiple, primaryKey: primaryKey, rows: rows }), (0, jsx_runtime_1.jsx)("tbody", { children: (0, jsx_runtime_1.jsx)(dataGridContext.Provider, { value: (0, react_1.useMemo)(() => ({
+    return ((0, jsx_runtime_1.jsxs)(loading_1.Loading, { ...props, css: dataGrid_style_1.style, className: (0, utils_1.classnames)(dataGrid_style_1.classes.root, props.className), loading: loading, children: [(0, jsx_runtime_1.jsx)("div", { className: dataGrid_style_1.classes.container, children: (0, jsx_runtime_1.jsx)(table_1.Table, { bordered: bordered, striped: striped, ...tableProps, children: (0, jsx_runtime_1.jsxs)(selectionContext_1.SelectionContext, { options: rows, primaryKey: primaryKey, childrenKey: childrenKey, relation: relation, integration: integration, disabled: !selectable, multiple: multiple, defaultValue: defaultValue, value: value, onChange: onChange, children: [(0, jsx_runtime_1.jsx)(dataGridHead_1.DataGridHead, { columns: completedColumns, orderColumn: innerOrderColumn.current, orderType: innerOrderType.current, onOrderChange: orderChangeHandler, allowSelectAll: allowSelectAll, multiple: multiple, primaryKey: primaryKey, rows: rows }), (0, jsx_runtime_1.jsx)("tbody", { children: (0, jsx_runtime_1.jsx)(DataGridContext, { value: (0, react_1.useMemo)(() => ({
                                         primaryKey, childrenKey, flattedColumns, rowProps, clickRowToSelect,
                                         indent, expandedSet, toggleExpanded, multiple
                                     }), [
@@ -103,6 +103,6 @@ exports.DataGrid = (0, react_1.memo)((0, react_1.forwardRef)(({ columns, rows, r
                                         : (0, jsx_runtime_1.jsx)("tr", { className: dataGrid_style_1.classes.empty, children: (0, jsx_runtime_1.jsx)("td", { colSpan: flattedColumns.length, children: (0, jsx_runtime_1.jsx)(placeholder_1.Placeholder, {}) }) }) }) })] }) }) }), renderPagination
                 ? renderPagination(_paginationProps)
                 : paginatable && (0, jsx_runtime_1.jsx)(pagination_1.Pagination, { ..._paginationProps })] }));
-}));
+});
 exports.DataGrid.EXPAND_COLUMN = Symbol('expand-column');
 exports.DataGrid.SELECT_COLUMN = Symbol('select-column');