@canlooks/can-ui 0.0.20 → 0.0.22

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

@@ -1,12 +1,12 @@
 import { FlexProps } from '../flex';
 export interface CardProps extends FlexProps {
-    /** 是否采用flex布局，等效于display: flex，@default false */
+    /** 是否采用flex布局，等效于`display: flex`，默认为`false` */
     flexable?: boolean;
-    /** 是否显示边框，@default 0 */
+    /** 是否显示边框，默认为`false` */
     bordered?: boolean;
-    /** @ 支持0-5，明亮主题表示阴影的程度，@default 0; 暗黑主题表示背景色，@default 2 */
+    /** @ 支持0-5，明亮主题表示阴影的程度，默认为`0`; 暗黑主题表示背景色，默认为`2` */
     elevation?: number;
-    /** @default theme.borderRadius */
+    /** 默认为{@link Theme.borderRadius} */
     borderRadius?: number;
 }
-export declare const Card: import("react").ForwardRefExoticComponent<Omit<CardProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare function Card({ flexable, bordered, elevation, borderRadius, ...props }: CardProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/esm/components/card/card.js

@@ -1,16 +1,15 @@
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-import { forwardRef } from 'react';
 import { classes, style } from './card.style';
 import { classnames } from '../../utils';
-import { useTheme } from '../app';
+import { useTheme } from '../theme';
 import { Flex } from '../flex';
-export const Card = forwardRef(({ flexable, bordered, elevation, borderRadius, ...props }, ref) => {
+export function Card({ flexable, bordered, elevation, borderRadius, ...props }) {
     const theme = useTheme();
     borderRadius ??= theme.borderRadius;
     elevation ??= theme.mode === 'light' ? 0 : 2;
-    return (_jsx(Flex, { direction: "column", ...props, ref: ref, css: style, className: classnames(classes.root, props.className), style: {
+    return (_jsx(Flex, { direction: "column", ...props, css: style, className: classnames(classes.root, props.className), style: {
             display: flexable ? 'flex' : void 0,
             borderRadius,
             ...props.style
         }, "data-elevation": elevation, "data-bordered": bordered }));
-});
+}

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

@@ -7,7 +7,7 @@ export const style = defineCss(({ spacing, mode, background, divider, boxShadow,
     `,
     ...[mode === 'light'
             ? css `
-            background-color: ${background.card};
+            background-color: ${background.content};
 
             &[data-bordered=true] {
                 border: 1px solid ${divider};

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

@@ -1,13 +1,13 @@
-import { Dispatch, ReactElement, ReactNode, Ref, SetStateAction } from 'react';
+import React, { Dispatch, ReactElement, ReactNode, Ref, SetStateAction } from 'react';
 import { InputProps } from '../input';
 import { InputBaseProps } from '../inputBase';
 import { PopperProps, PopperRef } from '../popper';
 import { SelectionContextProps } from '../selectionContext';
 import { MenuOptionType, OptionsBaseSharedProps } from '../optionsBase';
-import { Id } from '../../../types';
+import { Id, SelectableMultipleProps, SelectableSingleProps } from '../../../types';
 export interface CascadeBaseProps<O extends MenuOptionType<V>, V extends Id = Id> extends Omit<OptionsBaseSharedProps<O>, 'filterPredicate'>, Omit<InputBaseProps<'input'>, 'children' | 'defaultValue' | 'value' | 'onChange'> {
     /** cascade内部由<input />实现 */
-    inputProps?: JSX.IntrinsicElements['input'];
+    inputProps?: React.JSX.IntrinsicElements['input'];
     inputRef?: Ref<HTMLInputElement>;
     defaultOpen?: boolean;
     open?: boolean;
@@ -24,18 +24,10 @@ export interface CascadeBaseProps<O extends MenuOptionType<V>, V extends Id = Id
     popperRef?: Ref<PopperRef>;
     integration?: SelectionContextProps<O, V>['integration'];
 }
-export interface CascadeSingleProps<O extends MenuOptionType<V>, V extends Id = Id> extends CascadeBaseProps<O, V> {
-    multiple?: false;
-    defaultValue?: V[];
-    value?: V[];
-    onChange?(value: V[]): void;
+export interface CascadeSingleProps<O extends MenuOptionType<V>, V extends Id = Id> extends CascadeBaseProps<O, V>, SelectableSingleProps<V[]> {
     renderBackfill?(value: V[]): ReactNode;
 }
-export interface CascadeMultipleProps<O extends MenuOptionType<V>, V extends Id = Id> extends CascadeBaseProps<O, V> {
-    multiple: true;
-    defaultValue?: V[][];
-    value?: V[][];
-    onChange?(value: V[][]): void;
+export interface CascadeMultipleProps<O extends MenuOptionType<V>, V extends Id = Id> extends CascadeBaseProps<O, V>, SelectableMultipleProps<V[]> {
     renderBackfill?(value: V[][]): ReactNode;
 }
 export type CascadeProps<O extends MenuOptionType<V>, V extends Id = Id> = CascadeSingleProps<O, V> | CascadeMultipleProps<O, V>;
@@ -44,7 +36,7 @@ type CascadeContext<O extends MenuOptionType<V>, V extends Id = Id> = {
     loadingOption: V | undefined;
     multiple: boolean;
     showCheckbox: boolean;
-    /** @default "value" */
+    /** 默认为"value" */
     primaryKey: keyof O;
     labelKey: keyof O;
     childrenKey: keyof O;
@@ -58,6 +50,7 @@ type CascadeContext<O extends MenuOptionType<V>, V extends Id = Id> = {
     setVerticalIndex: Dispatch<SetStateAction<number>>;
     horizontalIndex: number;
 };
+declare const CascadeContext: React.Context<CascadeContext<any, Id>>;
 export declare function useCascadeContext<O extends MenuOptionType<V>, V extends Id = Id>(): CascadeContext<O, V>;
 export declare const Cascade: <O extends MenuOptionType<V>, V extends Id = Id>(props: CascadeProps<O, V>) => ReactElement;
 export {};

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { SearchOutlined, CaretDownOutlined } from '@ant-design/icons';
-import { createContext, forwardRef, memo, useContext, useDeferredValue, useEffect, useMemo, useState } from 'react';
+import { createContext, memo, useContext, useDeferredValue, useEffect, useMemo, useState } from 'react';
 import { useControlled, useLoading, useKeyboard, joinNodes, classnames, cloneRef, toArray } from '../../utils';
 import { Input } from '../input';
 import { InputBase } from '../inputBase';
@@ -9,14 +9,14 @@ import { Tag } from '../tag';
 import { classes, cascadePopperStyle, style } from './cascade.style';
 import { CascadePanel } from './cascadePanel';
 import { SearchResult } from './searchResult';
-import { useTreeSelect } from '../selectionContext/selectionHook';
-const cascadeContext = createContext({});
+import { useSelection } from '../selectionContext';
+const CascadeContext = createContext({});
 export function useCascadeContext() {
-    return useContext(cascadeContext);
+    return useContext(CascadeContext);
 }
-export const Cascade = memo(forwardRef(({ inputProps, inputRef, defaultOpen = false, open, onOpenChange, children, loadOptions, multiple = false, showCheckbox = !!multiple, defaultValue = [], value, onChange, renderBackfill, searchable, defaultSearchValue = '', searchValue, onSearchChange, searchInputProps, popperProps, popperRef, clearable = !!multiple, integration = 'deepest', 
+export const Cascade = memo(({ inputProps, inputRef, defaultOpen = false, open, onOpenChange, children, loadOptions, multiple = false, showCheckbox = !!multiple, defaultValue = [], value, onChange, renderBackfill, searchable, defaultSearchValue = '', searchValue, onSearchChange, searchInputProps, popperProps, popperRef, clearable = !!multiple, integration = 'deepest', 
 // 共享属性，从OptionsBaseSharedProps继承
-loading, options, labelKey = 'label', primaryKey = 'value', childrenKey = 'children', searchTokenKey = 'searchToken', ...props }, ref) => {
+loading, options, labelKey = 'label', primaryKey = 'value', childrenKey = 'children', searchTokenKey = 'searchToken', ...props }) => {
     /**
      * --------------------------------------------------------------------
      * 搜索
@@ -38,7 +38,7 @@ loading, options, labelKey = 'label', primaryKey = 'value', childrenKey = 'child
     const onOpenChangeEnd = (open) => {
         popperProps?.onOpenChangeEnd?.(open);
         // 关闭动画结束后清空搜索框
-        !open && setInnerSearchValue('');
+        searchable && !open && setInnerSearchValue('');
     };
     const [openedPanels, setOpenedPanels] = useState([]);
     const toggleOpenedPanels = (value, index) => {
@@ -55,14 +55,11 @@ loading, options, labelKey = 'label', primaryKey = 'value', childrenKey = 'child
     const [loadingOption, setLoadingOption] = useState();
     const [innerOptions, setInnerOptions] = useState();
     const [innerLoading, innerLoadOptions] = useLoading(async (searchValue, parent) => {
-        if (!loadOptions) {
-            return;
-        }
         setLoadingOption(parent?.[primaryKey]);
         setInnerOptions(await loadOptions(searchValue, parent));
     }, loading);
     useEffect(() => {
-        if (loadOptions && !searchable && !innerOpen.current && toArray(innerValue.current)?.length) {
+        if (loadOptions && !searchable && !innerOpen.current && toArray(innerValue)?.length) {
             // 第一次渲染就有value，需要请求数据
             innerLoadOptions(innerSearchValue.current);
         }
@@ -102,7 +99,7 @@ loading, options, labelKey = 'label', primaryKey = 'value', childrenKey = 'child
         };
         return multiple ? value.map(v => findParent(v)) : findParent(value);
     };
-    const { innerValue, setInnerValue, toggleSelected, selectionStatus, optionsMap } = useTreeSelect({
+    const { value: innerValue, setValue: setInnerValue, toggleSelected, selectionStatus, optionsMap } = useSelection({
         options: actualOptions,
         multiple,
         value: toStandardValue(pathifiedValue.current),
@@ -198,13 +195,13 @@ loading, options, labelKey = 'label', primaryKey = 'value', childrenKey = 'child
                             setInnerSearchValue(e.target.value);
                         } }), deferredSearchValue
                     ? _jsx(SearchResult, { primaryKey: primaryKey, labelKey: labelKey, childrenKey: childrenKey, searchTokenKey: searchTokenKey, options: actualOptions, searchValue: deferredSearchValue, onSelect: toggleSelected, selectionStatus: selectionStatus })
-                    : _jsx("div", { className: classes.panelContainer, children: _jsx(cascadeContext.Provider, { value: {
+                    : _jsx("div", { className: classes.panelContainer, children: _jsx(CascadeContext, { value: {
                                 innerLoading: innerLoading.current, loadingOption, multiple, showCheckbox,
                                 primaryKey, labelKey, childrenKey, pathifiedValue: pathifiedValue.current,
                                 selectionStatus, optionsMap,
                                 openedPanels, onOptionClick, onCheckboxClick,
                                 verticalIndex: verticalIndex.current, setVerticalIndex, horizontalIndex: horizontalIndex.current
-                            }, children: _jsx(CascadePanel, { options: actualOptions }) }) })] }), ...popperProps, popperRef: popperRef, onOpenChange: openChangeHandler, onOpenChangeEnd: onOpenChangeEnd, children: _jsx(InputBase, { ...props, ref: ref, css: style, className: classnames(classes.root, props.className), onClear: clearHandler, clearable: clearable, value: pathifiedValue.current, "data-focused": innerOpen.current, loading: innerLoading.current, children: ({ ref, ...rest }) => _jsxs("div", { className: classes.contentWrap, children: [!pathifiedValue.current?.length
+                            }, children: _jsx(CascadePanel, { options: actualOptions }) }) })] }), ...popperProps, popperRef: popperRef, onOpenChange: openChangeHandler, onOpenChangeEnd: onOpenChangeEnd, children: _jsx(InputBase, { ...props, css: style, className: classnames(classes.root, props.className), onClear: clearHandler, clearable: clearable, value: pathifiedValue.current, "data-focused": innerOpen.current, loading: innerLoading.current, children: ({ ref, ...rest }) => _jsxs("div", { className: classes.contentWrap, children: [!pathifiedValue.current?.length
                         ? _jsx("div", { className: classes.placeholder, children: props.placeholder })
                         : _jsx("div", { className: classes.backfill, children: renderBackfillFn() }), _jsx("input", { ...rest, ...inputProps, ref: cloneRef(ref, inputRef), "data-hidden": "true" }), _jsx("div", { className: classes.arrow, "data-open": innerOpen.current, children: _jsx(CaretDownOutlined, {}) })] }) }) }));
-}));
+});

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

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

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

@@ -1,13 +1,13 @@
 import { ReactElement } from 'react';
 import { CheckboxBaseProps } from '../checkboxBase';
-import { CheckboxBaseGroupMultipleProps, ItemType } from '../checkboxBaseGroup';
-import { Id } from '../../../types';
+import { CheckboxBaseGroupCommonProps, ItemType } from '../checkboxBaseGroup';
+import { Id, SelectableMultipleProps } from '../../../types';
 export interface CheckboxProps extends Omit<CheckboxBaseProps, '_type'> {
 }
 export declare const Checkbox: {
     (props: CheckboxProps): ReactElement;
     Group: typeof CheckboxGroup;
 };
-export interface CheckboxGroupProps<I extends ItemType, V extends Id = Id> extends Omit<CheckboxBaseGroupMultipleProps<I, V>, 'multiple'> {
+export interface CheckboxGroupProps<I extends ItemType, V extends Id = Id> extends CheckboxBaseGroupCommonProps<I>, Omit<SelectableMultipleProps<V>, 'multiple'> {
 }
-export declare const CheckboxGroup: import("react").ForwardRefExoticComponent<Omit<CheckboxGroupProps<ItemType, Id>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const CheckboxGroup: <I extends ItemType, V extends Id = Id>(props: CheckboxGroupProps<I, V>) => ReactElement;

package/dist/esm/components/checkbox/checkbox.js

@@ -1,11 +1,10 @@
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-import { forwardRef } from 'react';
 import { CheckboxBase } from '../checkboxBase';
 import { CheckboxBaseGroup } from '../checkboxBaseGroup';
-export const Checkbox = forwardRef((props, ref) => {
-    return _jsx(CheckboxBase, { ...props, ref: ref, _type: "checkbox" });
+export const Checkbox = ((props) => {
+    return _jsx(CheckboxBase, { ...props, _type: "checkbox" });
 });
-export const CheckboxGroup = forwardRef((props, ref) => {
+export const CheckboxGroup = ((props) => {
     return _jsx(CheckboxBaseGroup, { ...props, multiple: true });
 });
 Checkbox.Group = CheckboxGroup;

package/dist/esm/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/esm/components/checkboxBase/checkboxBase.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-import { forwardRef, memo, useRef } from 'react';
+import { memo, useRef } from 'react';
 import { classnames, cloneRef, useControlled, useTouchRipple } from '../../utils';
 import { classes, useStyle } from './checkboxBase.style';
 import { CheckOutlined } from '@ant-design/icons';
 import { useCheckboxBaseGroupContext } from '../checkboxBaseGroup';
-export const CheckboxBase = memo(forwardRef(({ inputProps, inputRef, _type, size, color, label, value, indeterminate, disabled, readOnly, defaultChecked = false, checked, onChange, ...props }, ref) => {
+export const CheckboxBase = memo(({ inputProps, inputRef, _type, size, color, label, value, indeterminate, disabled, readOnly, defaultChecked = false, checked, onChange, ...props }) => {
     const context = useCheckboxBaseGroupContext();
     size ??= context.size || 'medium';
     color ??= context.color || 'primary';
@@ -32,7 +32,7 @@ export const CheckboxBase = memo(forwardRef(({ inputProps, inputRef, _type, size
         inputProps?.onKeyDown?.(e);
         e.key === 'Enter' && clickHandler(e);
     };
-    return (_jsxs("div", { ...props, ref: ref, css: useStyle({ color }), className: classnames(classes.root, props.className), onClick: clickHandler, "data-size": size, "data-checked": innerChecked.current && !indeterminate, "data-disabled": disabled, children: [_type === 'checkbox'
+    return (_jsxs("div", { ...props, css: useStyle({ color }), className: classnames(classes.root, props.className), onClick: clickHandler, "data-size": size, "data-checked": innerChecked.current && !indeterminate, "data-disabled": disabled, children: [_type === 'checkbox'
                 ? _jsx("div", { ref: checkboxRef, className: classes.checkbox, children: indeterminate
                         ? _jsx("div", { className: classes.indeterminate })
                         : innerChecked.current
@@ -42,4 +42,4 @@ export const CheckboxBase = memo(forwardRef(({ inputProps, inputRef, _type, size
                         ? _jsx("div", { className: classes.radioChecked })
                         : null }), !!label &&
                 _jsx("div", { className: classes.label, children: label }), _jsx("input", { type: _type, disabled: disabled, readOnly: readOnly, ...inputProps, ref: cloneRef(innerInputRef, inputRef), className: classnames(classes.input, inputProps?.className), onKeyDown: inputKeydown })] }));
-}));
+});

package/dist/esm/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/esm/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/esm/components/checkboxBaseGroup/checkboxBaseGroup.js

@@ -1,18 +1,19 @@
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-import { Children, cloneElement, createContext, forwardRef, isValidElement, useContext } from 'react';
+import { Children, cloneElement, createContext, isValidElement, useContext } from 'react';
 import { Flex } from '../flex';
-import { classnames, isSelected, useControlledSelect } from '../../utils';
+import { classnames, isSelected } from '../../utils';
 import { classes } from './checkboxBaseGroup.style';
-import { Checkbox } from '../checkbox/checkbox';
+import { Checkbox } from '../checkbox';
 import { Radio } from '../radio';
-import { useTheme } from '../app';
+import { useTheme } from '../theme';
+import { useShallowSelection } from '../selectionContext';
 const checkboxBaseGroupContext = createContext({});
 export function useCheckboxBaseGroupContext() {
     return useContext(checkboxBaseGroupContext);
 }
-export const CheckboxBaseGroup = forwardRef(({ size, color, items, primaryKey = 'value', multiple, defaultValue, value, onChange, ...props }, ref) => {
+export const CheckboxBaseGroup = (({ size, color, items, primaryKey = 'value', multiple, defaultValue, value, onChange, ...props }) => {
     const { spacing } = useTheme();
-    const [innerValue, toggleSelected] = useControlledSelect({ multiple, defaultValue, value, onChange });
+    const [innerValue, toggleSelected] = useShallowSelection({ multiple, defaultValue, value, onChange });
     const renderItems = () => {
         if (items) {
             return items.map((p, i) => {
@@ -28,17 +29,18 @@ export const CheckboxBaseGroup = forwardRef(({ size, color, items, primaryKey =
             if (!isValidElement(c)) {
                 return c;
             }
-            const itemValue = c.props.value;
+            const { props } = c;
+            const itemValue = props.value;
             return cloneElement(c, {
-                size: c.props.size ?? size,
-                color: c.props.color ?? color,
+                size: props.size ?? size,
+                color: props.color ?? color,
                 checked: isSelected(itemValue, innerValue.current),
                 onChange: e => {
-                    c.props.onChange?.(e);
+                    props.onChange?.(e);
                     toggleSelected(itemValue);
                 }
             });
         });
     };
-    return (_jsx(Flex, { gap: spacing[8], ...props, ref: ref, className: classnames(classes.root, props.className), children: renderItems() }));
+    return (_jsx(Flex, { gap: spacing[8], ...props, className: classnames(classes.root, props.className), children: renderItems() }));
 });

package/dist/esm/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/esm/components/clickAway/clickAway.js

@@ -1,6 +1,6 @@
-import { cloneElement, forwardRef, isValidElement, useCallback, useEffect, useRef } from 'react';
+import { cloneElement, isValidElement, useCallback, useEffect, useRef } from 'react';
 import { cloneRef, isChildOf, toArray, useSync } from '../../utils';
-export const ClickAway = forwardRef(({ container = self, eventType = 'click', onClickAway, disabled, children, targets, ...props }, ref) => {
+export function ClickAway({ ref, container = self, eventType = 'click', onClickAway, disabled, children, targets, ...props }) {
     const syncOnClickAway = useSync(onClickAway);
     const childRef = useRef(null);
     const targetsArr = useRef([]);
@@ -33,4 +33,4 @@ export const ClickAway = forwardRef(({ container = self, eventType = 'click', on
             ref: clonedRef
         })
         : children;
-});
+}

package/dist/esm/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/esm/components/colorPicker/colorPicker.js

@@ -1,13 +1,13 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-import { forwardRef, memo, useMemo } from 'react';
+import { memo, useMemo } from 'react';
 import { Popper } from '../popper';
 import { InputBase } from '../inputBase';
 import { classes, colorPickerPopperStyle, style } from './colorPicker.style';
 import { classnames, cloneRef, colorTransfer, useControlled, useTouchRipple } from '../../utils';
-import { useTheme } from '../app';
+import { useTheme } from '../theme';
 import { Palette } from '../palette';
 import Color from 'color';
-export const ColorPicker = memo(forwardRef(({ inputProps, inputRef, popperProps, popperRef, size, shape = 'square', label = '自定义', presets, defaultOpen, open, onOpenChange, defaultValue, value, onChange, ...props }, ref) => {
+export const ColorPicker = memo(({ inputProps, inputRef, popperProps, popperRef, size, shape = 'square', label = '自定义', presets, defaultOpen, open, onOpenChange, defaultValue, value, onChange, ...props }) => {
     const theme = useTheme();
     size ??= theme.size;
     const [innerOpen, setInnerOpen] = useControlled(defaultOpen, open, onOpenChange);
@@ -15,13 +15,13 @@ export const ColorPicker = memo(forwardRef(({ inputProps, inputRef, popperProps,
         popperProps?.onOpenChange?.(open);
         setInnerOpen(open);
     };
-    const [innerValue, setInnerValue] = useControlled(defaultValue ?? Color(theme.colors.primary, 'hex'), value, onChange);
-    return (_jsxs("div", { ...props, ref: ref, css: style, className: classnames(classes.root, props.className), "data-size": size, "data-shape": shape, children: [presets?.map((color, i) => {
+    const [innerValue, setInnerValue] = useControlled(defaultValue ?? Color(theme.colors.primary.main, 'hex'), value, onChange);
+    return (_jsxs("div", { ...props, css: style, className: classnames(classes.root, props.className), "data-size": size, "data-shape": shape, children: [presets?.map((color, i) => {
                 const colorInstance = Color(typeof color === 'string' ? colorTransfer(color, theme) : color);
                 return (_jsx(BlockItem, { selected: colorInstance.hex() === innerValue.current.hex(), color: Color(color), onClick: () => setInnerValue(Color(color, 'hex')) }, i));
             }), _jsx(Popper, { css: colorPickerPopperStyle, open: innerOpen.current, trigger: ['click', 'enter'], placement: "bottomLeft", content: _jsx(Palette, { value: innerValue.current, onChange: setInnerValue }), ...popperProps, popperRef: popperRef, onOpenChange: openChangeHandler, children: _jsx(InputBase, { className: classes.inputBase, size: size, shape: shape === 'circular' ? 'rounded' : shape, children: ({ ref, ...rest }) => _jsxs(_Fragment, { children: [_jsx(BlockItem, { color: innerValue.current }), !!label &&
                                 _jsx("div", { className: classes.label, children: label }), _jsx("input", { ...rest, ...inputProps, ref: cloneRef(ref, inputRef), "data-hidden": "true" })] }) }) })] }));
-}));
+});
 function BlockItem({ color, onClick, selected }) {
     const light = useMemo(() => color.luminosity() >= .8, [color]);
     const colorObject = useMemo(() => ({

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

@@ -37,7 +37,7 @@ export const style = defineCss(({ spacing, borderRadius, divider, background })
         overflow: hidden;
         cursor: pointer;
         position: relative;
-        ${getTranparentBackground(background.body, background.card)}
+        ${getTranparentBackground(background.body, background.content)}
         background-size: 50% 50%;
 
         .${classes.blockColor} {

package/dist/esm/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/esm/components/contextMenu/contextMenu.js

@@ -1,13 +1,12 @@
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-import { forwardRef } from 'react';
 import { Bubble } from '../bubble';
 import { MenuItem } from '../menuItem';
-export const ContextMenu = forwardRef(({ items, onClick, ...props }, ref) => {
+export function ContextMenu({ items, onClick, ...props }) {
     const renderItems = (items) => {
         return items?.map((p, i) => _jsx(MenuItem, { ...p, onClick: e => {
                 p.onClick?.(e);
                 onClick?.(p);
             }, children: renderItems(p.children) }, p.value ?? i));
     };
-    return (_jsx(Bubble, { placement: "bottomRight", ...props, ref: ref, trigger: "contextMenu", showArrow: false, content: props.content ?? renderItems(items) }));
-});
+    return (_jsx(Bubble, { placement: "bottomRight", showArrow: false, ...props, trigger: "contextMenu", content: props.content ?? renderItems(items) }));
+}

package/dist/esm/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/esm/components/counter/counter.js

@@ -1,12 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-import { forwardRef, memo } from 'react';
+import { memo } from 'react';
 import { classes, style } from './counter.style';
 import { classnames, useControlled } from '../../utils';
 import { Button } from '../button';
 import { MinusOutlined, PlusOutlined } from '@ant-design/icons';
 import { Input } from '../input';
 import { Flex } from '../flex';
-export const Counter = memo(forwardRef(({ size, min = -Infinity, max = Infinity, step = 1, precision = 0, defaultValue = 0, value, onChange, decreaseProps, increaseProps, inputProps, ...props }, ref) => {
+export const Counter = memo(({ size, min = -Infinity, max = Infinity, step = 1, precision = 0, defaultValue = 0, value, onChange, decreaseProps, increaseProps, inputProps, ...props }) => {
     const [innerValue, setInnerValue] = useControlled(defaultValue, value, onChange);
     const commonButtonProps = {
         size,
@@ -16,7 +16,7 @@ export const Counter = memo(forwardRef(({ size, min = -Infinity, max = Infinity,
     const clickHandler = (dir) => {
         setInnerValue(Math.max(min, Math.min(max, innerValue.current + dir * step)));
     };
-    return (_jsxs(Flex, { compact: true, ...props, ref: ref, css: style, className: classnames(classes.root, props.className), children: [_jsx(Button, { disabled: innerValue.current <= min, ...commonButtonProps, ...decreaseProps, onClick: e => {
+    return (_jsxs(Flex, { compact: true, ...props, css: style, className: classnames(classes.root, props.className), children: [_jsx(Button, { disabled: innerValue.current <= min, ...commonButtonProps, ...decreaseProps, onClick: e => {
                     decreaseProps?.onClick?.(e);
                     clickHandler(-1);
                 }, children: _jsx(MinusOutlined, {}) }), _jsx(Input, { type: "number", widthAdaptable: true, size: size, min: min, max: max, step: step, precision: precision, ...inputProps, className: classnames(classes.input, inputProps?.className), value: innerValue.current, onChange: e => {
@@ -26,4 +26,4 @@ export const Counter = memo(forwardRef(({ size, min = -Infinity, max = Infinity,
                     increaseProps?.onClick?.(e);
                     clickHandler(1);
                 }, children: _jsx(PlusOutlined, {}) })] }));
-}));
+});

package/dist/esm/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;
 };