@canlooks/can-ui 0.0.20 → 0.0.22

package/dist/esm/components/loadingMask/loadingMask.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { memo } from 'react';
+import { classes, style } from './loadingMask.style';
+import { LoadingIndicator } from '../loadingIndicator';
+import { Progress } from '../progress';
+import { classnames, useDerivedState } from '../../utils';
+import { Backdrop } from '../backdrop';
+export const LoadingMask = memo(({ open = false, text = '加载中...', progress, color, indicatorProps, progressProps, ...props }) => {
+    const [visible, setVisible] = useDerivedState((prevLoading) => {
+        // 只有第一次需要原样返回loading，之后visible不会立即变为false，交由onTransitionEnd()处理
+        return typeof prevLoading === 'undefined' ? open : true;
+    }, [open]);
+    const onExited = () => {
+        // 动画结束后，loading为false才需要改变visible
+        setVisible(false);
+    };
+    const showProgress = typeof progress === 'number';
+    return open || visible.current
+        ? _jsxs(Backdrop, { variant: "light", ...props, css: style, open: open, className: classnames(classes.root, props.className), onExited: onExited, "data-show-progress": showProgress, children: [_jsxs("div", { className: classes.indicator, children: [_jsx(LoadingIndicator, { size: showProgress ? 14 : 30, width: showProgress ? 2 : 3, color: color, ...indicatorProps }), _jsx("div", { className: classes.text, children: text })] }), showProgress &&
+                    _jsx(Progress, { className: classes.progress, value: progress, ...progressProps })] })
+        : null;
+});

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

@@ -0,0 +1,8 @@
+export declare const classes: {
+    text: string;
+    progress: string;
+    indicator: string;
+} & {
+    root: string;
+};
+export declare const style: () => import("@emotion/react").SerializedStyles;

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

@@ -0,0 +1,34 @@
+import { defineClasses, defineCss } from '../../utils';
+import { css } from '@emotion/react';
+import { classes as progressClasses } from '../progress/progress.style';
+export const classes = defineClasses('loading-mask', [
+    'indicator',
+    'text',
+    'progress'
+]);
+export const style = defineCss(({ spacing, text }) => css `
+    .${classes.indicator} {
+        display: flex;
+        gap: ${spacing[2]}px;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+
+        .${classes.text} {
+            color: ${text.secondary};
+        }
+    }
+
+    .${classes.progress} {
+        width: calc(100% - 24px);
+        max-width: 300px;
+
+        .${progressClasses.track} {
+            height: 4px;
+        }
+    }
+
+    &[data-show-progress=true] .${classes.indicator} {
+        flex-direction: row;
+    }
+`);

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

@@ -1,5 +1,5 @@
 import { ReactElement } from 'react';
-import { DIVProps, Id, Obj, Size } from '../../../types';
+import { DIVProps, Id, Obj, SelectableProps, Size } from '../../../types';
 import { MenuItemProps } from '../menuItem';
 export type ForwardProps = {
     size?: Size;
@@ -19,19 +19,7 @@ interface MenuBaseProps<I extends ItemPropType, V extends Id = Id> extends Forwa
     expanded?: V[];
     onExpandedChange?(expanded: V[], itemValue: V, isExpand: boolean): void;
 }
-interface MenuSingleProps<I extends ItemPropType, V extends Id = Id> extends MenuBaseProps<I, V> {
-    multiple?: false;
-    defaultValue?: V;
-    value?: V;
-    onChange?(value: V): void;
-}
-interface MenuMultipleProps<I extends ItemPropType, V extends Id = Id> extends MenuBaseProps<I, V> {
-    multiple: true;
-    defaultValue?: V[];
-    value?: V[];
-    onChange?(value: V[]): void;
-}
-export type MenuProps<I extends ItemPropType, V extends Id = Id> = MenuSingleProps<I, V> | MenuMultipleProps<I, V>;
+export type MenuProps<I extends ItemPropType, V extends Id = Id> = MenuBaseProps<I, V> & SelectableProps<V>;
 interface MenuContext<V extends Id = Id> extends ForwardProps {
     inMenu?: boolean;
     expandedSet?: Set<V>;
@@ -40,6 +28,7 @@ interface MenuContext<V extends Id = Id> extends ForwardProps {
     selected?: V | V[];
     toggleSelected?(key: V): void;
 }
+declare const MenuContext: import("react").Context<MenuContext<any>>;
 export declare function useMenuContext<V extends Id = Id>(): MenuContext<V>;
 export declare const Menu: <I extends ItemPropType, V extends Id = Id>(props: MenuProps<I, V>) => ReactElement;
 export {};

package/dist/esm/components/menu/menu.js

@@ -1,18 +1,19 @@
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-import { createContext, forwardRef, memo, useContext, useMemo } from 'react';
+import { createContext, memo, useContext, useMemo } from 'react';
 import { style } from './menu.style';
 import { MenuItem } from '../menuItem';
-import { useControlled, useControlledSelect } from '../../utils';
-import { useTheme } from '../app';
-const menuContext = createContext({});
+import { useControlled } from '../../utils';
+import { useTheme } from '../theme';
+import { useShallowSelection } from '../selectionContext';
+const MenuContext = createContext({});
 export function useMenuContext() {
     const theme = useTheme();
-    const { size = theme.size, ellipsis = true, indent = theme.spacing[8], ...context } = useContext(menuContext);
+    const { size = theme.size, ellipsis = true, indent = theme.spacing[8], ...context } = useContext(MenuContext);
     return { size, ellipsis, indent, ...context };
 }
-export const Menu = memo(forwardRef(({ items, primaryKey = 'value', labelKey = 'label', childrenKey = 'children', defaultExpanded = [], expanded, onExpandedChange, multiple, defaultValue, value, onChange, 
+export const Menu = memo(({ items, primaryKey = 'value', labelKey = 'label', childrenKey = 'children', defaultExpanded = [], expanded, onExpandedChange, multiple, defaultValue, value, onChange, 
 // 以下属性传递给<MenuItem />
-size = 'large', showCheckbox, ellipsis, indent, ...props }, ref) => {
+size = 'large', showCheckbox, ellipsis, indent, ...props }) => {
     const [innerExpanded, setInnerExpanded] = useControlled(defaultExpanded, expanded);
     const expandedSet = useMemo(() => {
         return new Set(innerExpanded.current);
@@ -24,11 +25,11 @@ size = 'large', showCheckbox, ellipsis, indent, ...props }, ref) => {
             return newExpanded;
         });
     };
-    const [innerValue, toggleSelected] = useControlledSelect({ multiple, defaultValue, value, onChange });
+    const [innerValue, toggleSelected] = useShallowSelection({ multiple, defaultValue, value, onChange });
     const renderItems = (items) => {
         return items?.map((p, i) => _jsx(MenuItem, { size: p.size, color: p.color, emphasized: p.emphasized, selected: p.selected, focused: p.focused, disabled: p.disabled, showCheckbox: p.showCheckbox, checkboxProps: p.checkboxProps, ellipsis: p.ellipsis, prefix: p.prefix, suffix: p.suffix, indent: p.indent, expandIcon: p.expandIcon, onExpandedChange: p.onExpandedChange, value: p[primaryKey], label: p[labelKey], children: renderItems(p[childrenKey]) }, p[primaryKey] ?? i));
     };
-    return (_jsx("div", { ...props, ref: ref, css: style, children: _jsx(menuContext.Provider, { value: useMemo(() => ({
+    return (_jsx("div", { ...props, css: style, children: _jsx(MenuContext, { value: useMemo(() => ({
                 inMenu: true,
                 expandedSet, setExpanded, multiple, selected: innerValue.current, toggleSelected,
                 size, showCheckbox, ellipsis, indent
@@ -36,4 +37,4 @@ size = 'large', showCheckbox, ellipsis, indent, ...props }, ref) => {
                 expandedSet, multiple, innerValue.current,
                 size, showCheckbox, ellipsis, indent
             ]), children: props.children ?? renderItems(items) }) }));
-}));
+});

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

@@ -6,7 +6,7 @@ export interface MenuItemProps extends Omit<DIVProps, 'prefix'> {
     size?: Size;
     color?: ColorPropsValue;
     /**
-     * 是否强调颜色，@default false
+     * 是否强调颜色，默认为`false`
      * 如果设置有{@link color}，建议同时设置emphasized为true
      */
     emphasized?: boolean;
@@ -29,4 +29,4 @@ export interface MenuItemProps extends Omit<DIVProps, 'prefix'> {
     expanded?: boolean;
     onExpandedChange?(expanded: boolean): void;
 }
-export declare const MenuItem: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Omit<MenuItemProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>>;
+export declare const MenuItem: import("react").MemoExoticComponent<({ value, size, color, emphasized, selected, focused, disabled, showCheckbox, checkboxProps, ellipsis, prefix, label, suffix, searchToken, _level, indent, expandIcon, defaultExpanded, expanded, onExpandedChange, ...props }: MenuItemProps) => import("@emotion/react/jsx-runtime").JSX.Element>;

package/dist/esm/components/menuItem/menuItem.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@emotion/react/jsx-runtime";
-import { Children, cloneElement, forwardRef, isValidElement, memo } from 'react';
+import { Children, cloneElement, isValidElement, memo } from 'react';
 import { menuListPadding, childrenStyle, classes, paddingHorizontal, useStyle } from './menuItem.style';
 import { classnames, isUnset, toArray, useControlled } from '../../utils';
 import { Checkbox } from '../checkbox';
@@ -7,7 +7,7 @@ import { usePopperContext } from '../popper';
 import { CaretDownOutlined } from '@ant-design/icons';
 import { useMenuContext } from '../menu';
 import { Collapse } from '../transitionBase';
-export const MenuItem = memo(forwardRef(({ value, size, color = 'primary', emphasized = false, selected, focused = false, disabled = false, showCheckbox, checkboxProps, ellipsis, prefix, label, suffix, searchToken, _level = 0, indent, expandIcon, defaultExpanded = false, expanded, onExpandedChange, ...props }, ref) => {
+export const MenuItem = memo(({ value, size, color = 'primary', emphasized = false, selected, focused = false, disabled = false, showCheckbox, checkboxProps, ellipsis, prefix, label, suffix, searchToken, _level = 0, indent, expandIcon, defaultExpanded = false, expanded, onExpandedChange, ...props }) => {
     const context = useMenuContext();
     size ??= context.size;
     showCheckbox ??= context.showCheckbox;
@@ -46,7 +46,7 @@ export const MenuItem = memo(forwardRef(({ value, size, color = 'primary', empha
         }
         return expandIcon;
     };
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { ...props, ref: ref, css: useStyle({ color }), className: classnames(classes.root, props.className), style: {
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { ...props, css: useStyle({ color }), className: classnames(classes.root, props.className), style: {
                     paddingLeft: _level > 0
                         ? _level * indent + paddingHorizontal[size] - menuListPadding
                         : void 0,
@@ -60,4 +60,4 @@ export const MenuItem = memo(forwardRef(({ value, size, color = 'primary', empha
                                 _level: _level + 1
                             })
                             : child) }) })] }));
-}));
+});

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

@@ -1,12 +1,12 @@
 import { MenuItemProps } from './menuItem';
 export declare const classes: {
-    children: string;
     content: string;
+    children: string;
     prefix: string;
     checkbox: string;
     suffix: string;
-    childrenWrap: string;
     arrow: string;
+    childrenWrap: string;
 } & {
     root: string;
 };

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

@@ -3,4 +3,4 @@ import { TransitionBaseProps } from '../transitionBase';
 export interface ModalProps extends OverlayBaseProps {
     modalProps?: TransitionBaseProps<HTMLDivElement>;
 }
-export declare const Modal: import("react").ForwardRefExoticComponent<Omit<ModalProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare function Modal({ modalProps, ...props }: ModalProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/esm/components/modal/modal.js

@@ -1,20 +1,20 @@
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-import { forwardRef, useMemo, useRef } from 'react';
+import { useMemo } from 'react';
 import { OverlayBase, overlayBaseTransitionDuration } from '../overlayBase';
 import { classes, style } from './modal.style';
 import { classnames } from '../../utils';
 import { Grow } from '../transitionBase';
-import { useAppContext } from '../app';
-export const Modal = forwardRef(({ modalProps, ...props }, ref) => {
-    const { zoom } = useAppContext();
-    const transformOrigin = useRef();
-    useMemo(() => {
+import { useTheme } from '../theme';
+export function Modal({ modalProps, ...props }) {
+    const { zoom } = useTheme();
+    const transformOrigin = useMemo(() => {
         if (props.open && typeof event === 'object' && 'clientX' in event && 'clientY' in event) {
-            transformOrigin.current = `${event.clientX / zoom}px ${event.clientY / zoom}px`;
+            return `${event.clientX / zoom}px ${event.clientY / zoom}px`;
         }
+        return;
     }, [props.open, zoom]);
-    return (_jsx(OverlayBase, { ...props, ref: ref, css: style, className: classnames(classes.root, props.className), children: _jsx(Grow, { timeout: overlayBaseTransitionDuration, ...modalProps, in: props.open, className: classnames(classes.modal, modalProps?.className), style: {
-                transformOrigin: transformOrigin.current,
+    return (_jsx(OverlayBase, { ...props, css: style, className: classnames(classes.root, props.className), children: _jsx(Grow, { timeout: overlayBaseTransitionDuration, ...modalProps, in: props.open, className: classnames(classes.modal, modalProps?.className), style: {
+                transformOrigin,
                 ...modalProps?.style
             }, children: props.children }) }));
-});
+}

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

@@ -1,4 +1,4 @@
-import { ReactElement, ReactNode } from 'react';
+import React, { ReactElement, ReactNode } from 'react';
 import { MenuItemProps } from '../menuItem';
 import { LoadingProps } from '../loading';
 import { OptionType } from '../selectionContext';
@@ -10,11 +10,11 @@ export type OptionsBaseSharedProps<O extends MenuOptionType<V>, V extends Id = I
     loading?: boolean;
     options?: O[];
     children?: ReactNode;
-    /** 指定options中用于当作label的键, @default "label" */
+    /** 指定options中用于当作label的键, 默认为`"label"` */
     labelKey?: keyof O;
-    /** 指定options中的主键名, @default "value" */
+    /** 指定options中的主键名, 默认为`"value"` */
     primaryKey?: keyof O;
-    /** 指定options中用于当作searchToken的键, @default "searchToken" */
+    /** 指定options中用于当作searchToken的键, 默认为`"searchToken"` */
     searchTokenKey?: keyof O;
     /** 遍历选项时会触发该方法，若返回true，表示该选项满足筛选条件，反之会将该选项排除 */
     filterPredicate?(searchValue: string, option: O, index: number): any;

package/dist/esm/components/optionsBase/optionsBase.js

@@ -52,7 +52,8 @@ searchValue, selectedValue, onToggleSelected, ...props }) => {
         onEnter({ verticalIndex }, e) {
             const opt = filteredOptions[verticalIndex];
             if (isValidElement(opt)) {
-                onToggleSelected?.(opt.props.value, e);
+                const { props } = opt;
+                onToggleSelected?.(props.value, e);
             }
             else if (typeof opt === 'object' && opt) {
                 onToggleSelected?.(opt[primaryKey], e);

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

@@ -1,19 +1,25 @@
+import React from 'react';
 import { DIVProps, DefineElement } from '../../../types';
 import { TransitionBaseProps } from '../transitionBase';
 export interface OverlayBaseProps extends DIVProps {
-    /** 模态的容器元素，@default document.body */
+    /** 模态的容器元素，默认为document.body */
     container?: DefineElement;
-    /** 为true时，跟随父组件强制渲染；为false时，只有打开状态渲染，关闭后销毁；为undefined时，第一次打开时渲染，跟随父组件销毁。 */
-    forceRender?: boolean;
+    /**
+     * @enum {true} 跟随父组件强制渲染
+     * @enum {false} 打开时渲染，关闭后销毁
+     * @enum {undefined} 第一次打开时渲染，跟随父组件销毁
+     * 默认为`undefined`
+     */
+    forceRender?: boolean | undefined;
     open?: boolean;
     onMaskClick?: React.MouseEventHandler<HTMLDivElement>;
-    /** 是否只显示一层遮罩，@default true */
+    /** 是否只显示一层遮罩，默认为true */
     singleLayer?: boolean;
     onOpened?(): void;
     onClosed?(): void;
     maskProps?: TransitionBaseProps<HTMLDivElement>;
-    /** 遮罩层打开时是否移除当前焦点，@default true */
+    /** 遮罩层打开时是否移除当前焦点，默认为`true` */
     removeFocusOnOpen?: boolean;
 }
 export declare const overlayBaseTransitionDuration = 300;
-export declare const OverlayBase: import("react").ForwardRefExoticComponent<Omit<OverlayBaseProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare function OverlayBase({ container, forceRender, open, onMaskClick, singleLayer, onOpened, onClosed, maskProps, removeFocusOnOpen, ...props }: OverlayBaseProps): false | React.ReactPortal;

package/dist/esm/components/overlayBase/overlayBase.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-import { forwardRef, useEffect } from 'react';
+import { useEffect } from 'react';
 import { classes, style } from './overlayBase.style';
 import { classnames, useDerivedState } from '../../utils';
 import { createPortal } from 'react-dom';
 import { Fade } from '../transitionBase';
 export const overlayBaseTransitionDuration = 300;
-export const OverlayBase = forwardRef(({ container, forceRender, open, onMaskClick, singleLayer, onOpened, onClosed, maskProps, removeFocusOnOpen = true, ...props }, ref) => {
+export function OverlayBase({ container, forceRender, open, onMaskClick, singleLayer, onOpened, onClosed, maskProps, removeFocusOnOpen = true, ...props }) {
     const [shouldRender, setShouldRender] = useDerivedState((prev = false) => {
         if (open) {
             return true;
@@ -38,5 +38,5 @@ export const OverlayBase = forwardRef(({ container, forceRender, open, onMaskCli
         onClosed?.();
         forceRender === false && setShouldRender(false);
     };
-    return shouldRender.current && createPortal(_jsxs("div", { ...props, ref: ref, css: style, className: classnames(classes.root, props.className), "data-open": open, "data-custom-container": typeof container !== 'undefined', children: [_jsx(Fade, { timeout: overlayBaseTransitionDuration, ...maskProps, in: open, className: classnames(classes.mask, maskProps?.className), onClick: clickHandler, onEntered: onEntered, onExited: onExited }), props.children] }), containerEl);
-});
+    return shouldRender.current && createPortal(_jsxs("div", { ...props, css: style, className: classnames(classes.root, props.className), "data-open": open, "data-custom-container": typeof container !== 'undefined', children: [_jsx(Fade, { timeout: overlayBaseTransitionDuration, ...maskProps, in: open, className: classnames(classes.mask, maskProps?.className), onClick: clickHandler, onEntered: onEntered, onExited: onExited }), props.children] }), containerEl);
+}

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

@@ -1,13 +1,15 @@
 import { css } from '@emotion/react';
 import { defineClasses, defineCss } from '../../utils';
-import { zIndex } from '../app';
-import { style as appStyle } from '../app/app.style';
+import { appStyleCallback } from '../app/app.style';
+import { zIndex } from '../theme';
 export const classes = defineClasses('overlay-base', [
     'mask'
 ]);
-export const style = defineCss(({ text, fontSize }) => [
-    appStyle,
-    css `
+export const style = defineCss(theme => {
+    const { text, fontSize } = theme;
+    return [
+        appStyleCallback(theme),
+        css `
         color: ${text.primary};
         font-size: ${fontSize}px;
         position: fixed;
@@ -28,4 +30,5 @@ export const style = defineCss(({ text, fontSize }) => [
             pointer-events: none;
         }
     `
-]);
+    ];
+});

package/dist/esm/components/pagination/counter.d.ts

@@ -1,4 +1,4 @@
 import { DIVProps } from '../../../types';
 export interface PaginationCounterProps extends DIVProps {
 }
-export declare const PaginationCounter: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Omit<PaginationCounterProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>>;
+export declare const PaginationCounter: import("react").MemoExoticComponent<(props: PaginationCounterProps) => import("@emotion/react/jsx-runtime").JSX.Element>;

package/dist/esm/components/pagination/counter.js

@@ -1,11 +1,11 @@
 import { jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-import { forwardRef, memo, useContext } from 'react';
+import { memo } from 'react';
 import { classnames } from '../../utils';
 import { classes } from './pagination.style';
-import { paginationContext } from './pagination';
-export const PaginationCounter = memo(forwardRef((props, ref) => {
-    const { total, page, pageSize } = useContext(paginationContext);
+import { usePaginationContext } from './pagination';
+export const PaginationCounter = memo((props) => {
+    const { total, page, pageSize } = usePaginationContext();
     const start = (page - 1) * pageSize + 1;
     const end = Math.min(start + pageSize - 1, total);
-    return (_jsxs("div", { ...props, ref: ref, className: classnames(classes.counter, props.className), children: ["\u7B2C ", start, "-", end, " \u6761/\u5171 ", total, " \u6761"] }));
-}));
+    return (_jsxs("div", { ...props, className: classnames(classes.counter, props.className), children: ["\u7B2C ", start, "-", end, " \u6761/\u5171 ", total, " \u6761"] }));
+});

package/dist/esm/components/pagination/jumper.d.ts

@@ -5,4 +5,4 @@ export interface PaginationJumperProps extends DIVProps {
     InputProps?: InputProps;
     InputRef?: Ref<HTMLDivElement>;
 }
-export declare const PaginationJumper: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Omit<PaginationJumperProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>>;
+export declare const PaginationJumper: import("react").MemoExoticComponent<({ InputProps, InputRef, ...props }: PaginationJumperProps) => import("@emotion/react/jsx-runtime").JSX.Element>;

package/dist/esm/components/pagination/jumper.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-import { forwardRef, memo, useContext, useState } from 'react';
+import { memo, useState } from 'react';
 import { classnames } from '../../utils';
 import { classes } from './pagination.style';
 import { Input } from '../input';
-import { paginationContext } from './pagination';
-export const PaginationJumper = memo(forwardRef(({ InputProps, InputRef, ...props }, ref) => {
-    const { size, onPageChange, pageNum } = useContext(paginationContext);
+import { usePaginationContext } from './pagination';
+export const PaginationJumper = memo(({ InputProps, InputRef, ...props }) => {
+    const { size, onPageChange, pageNum } = usePaginationContext();
     const [inputValue, setInputValue] = useState('');
     const changeFn = () => {
         const targetPage = parseInt(inputValue);
@@ -14,5 +14,5 @@ export const PaginationJumper = memo(forwardRef(({ InputProps, InputRef, ...prop
         }
         setInputValue('');
     };
-    return (_jsxs("div", { ...props, ref: ref, className: classnames(classes.jumper, props.className), children: [_jsx("span", { children: "\u8DF3\u81F3" }), _jsx(Input, { size: size, clearable: false, ...InputProps, ref: InputRef, className: classnames(classes.input, InputProps?.className), value: inputValue, onChange: e => setInputValue(e.target.value), onBlur: changeFn, onKeyDown: e => e.key === 'Enter' && changeFn() }), _jsx("span", { children: "\u9875" })] }));
-}));
+    return (_jsxs("div", { ...props, className: classnames(classes.jumper, props.className), children: [_jsx("span", { children: "\u8DF3\u81F3" }), _jsx(Input, { size: size, clearable: false, ...InputProps, ref: InputRef, className: classnames(classes.input, InputProps?.className), value: inputValue, onChange: e => setInputValue(e.target.value), onBlur: changeFn, onKeyDown: e => e.key === 'Enter' && changeFn() }), _jsx("span", { children: "\u9875" })] }));
+});

package/dist/esm/components/pagination/pager.d.ts

@@ -1,4 +1,4 @@
 import { DIVProps } from '../../../types';
 export interface PaginationPagerProps extends DIVProps {
 }
-export declare const PaginationPager: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Omit<PaginationPagerProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>>;
+export declare const PaginationPager: import("react").MemoExoticComponent<(props: PaginationPagerProps) => import("@emotion/react/jsx-runtime").JSX.Element>;

package/dist/esm/components/pagination/pager.js

@@ -1,14 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { EllipsisOutlined, LeftOutlined, RightOutlined } from '@ant-design/icons';
-import { memo, forwardRef, useContext } from 'react';
+import { memo } from 'react';
 import { Button } from '../button';
 import { classes } from './pagination.style';
-import { paginationContext } from './pagination';
+import { usePaginationContext } from './pagination';
 import { classnames } from '../../utils';
-import { useTheme } from '../app';
-export const PaginationPager = memo(forwardRef((props, ref) => {
+import { useTheme } from '../theme';
+export const PaginationPager = memo((props) => {
     const { text } = useTheme();
-    const { size, pageNum, page, onPageChange } = useContext(paginationContext);
+    const { size, pageNum, page, onPageChange } = usePaginationContext();
     const renderPageButton = (i, ellipsis) => {
         const btnPage = i + 1;
         const isActive = !ellipsis && btnPage === page;
@@ -46,5 +46,5 @@ export const PaginationPager = memo(forwardRef((props, ref) => {
                     : renderPageButton(page + i - 5, i === 1 || i === 7);
         });
     };
-    return (_jsxs("div", { ...props, ref: ref, className: classnames(classes.pager, props.className), children: [_jsx(Button, { className: classes.button, variant: "text", size: size, color: "text", disabled: page === 1, onClick: () => onPageChange(page - 1), children: _jsx(LeftOutlined, {}) }), renderPageList(), _jsx(Button, { className: classes.button, variant: "text", size: size, color: "text", disabled: page === pageNum, onClick: () => onPageChange(page + 1), children: _jsx(RightOutlined, {}) })] }));
-}));
+    return (_jsxs("div", { ...props, className: classnames(classes.pager, props.className), children: [_jsx(Button, { className: classes.button, variant: "text", size: size, color: "text", disabled: page === 1, onClick: () => onPageChange(page - 1), children: _jsx(LeftOutlined, {}) }), renderPageList(), _jsx(Button, { className: classes.button, variant: "text", size: size, color: "text", disabled: page === pageNum, onClick: () => onPageChange(page + 1), children: _jsx(RightOutlined, {}) })] }));
+});

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

@@ -15,7 +15,7 @@ export interface PaginationProps extends Omit<DIVProps, 'onChange'> {
     onPageSizeChange?(pageSize: number): void;
     onChange?(page: number, pageSize: number): void;
 }
-export declare const paginationContext: import("react").Context<{
+export declare function usePaginationContext(): {
     size: Size;
     total: number;
     pageNum: number;
@@ -23,7 +23,7 @@ export declare const paginationContext: import("react").Context<{
     onPageChange(page: number): void;
     pageSize: number;
     onPageSizeChange(pageSize: number): void;
-}>;
+};
 export declare const Pagination: {
     (props: PaginationProps): ReactElement;
     Counter: typeof PaginationCounter;

package/dist/esm/components/pagination/pagination.js

@@ -1,12 +1,12 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-import { createContext, forwardRef, memo } from 'react';
+import { createContext, memo, useContext } from 'react';
 import { classes, style } from './pagination.style';
 import { classnames, useControlled } from '../../utils';
 import { PaginationPager } from './pager';
 import { PaginationSizer } from './sizer';
 import { PaginationJumper } from './jumper';
 import { PaginationCounter } from './counter';
-export const paginationContext = createContext({
+const PaginationContext = createContext({
     size: 'small',
     total: 0,
     pageNum: 1,
@@ -15,7 +15,10 @@ export const paginationContext = createContext({
     pageSize: 10,
     onPageSizeChange(pageSize) { }
 });
-export const Pagination = memo(forwardRef(({ size = 'small', total = 0, defaultPage = 1, page, onPageChange, defaultPageSize = 10, pageSize, onPageSizeChange, onChange, ...props }, ref) => {
+export function usePaginationContext() {
+    return useContext(PaginationContext);
+}
+export const Pagination = memo(({ size = 'small', total = 0, defaultPage = 1, page, onPageChange, defaultPageSize = 10, pageSize, onPageSizeChange, onChange, ...props }) => {
     const [innerPage, setInnerPage] = useControlled(defaultPage, page, onPageChange);
     const [innerPageSize, setInnerPageSize] = useControlled(defaultPageSize, pageSize, onPageSizeChange);
     const pageChangeHandler = (page) => {
@@ -26,7 +29,7 @@ export const Pagination = memo(forwardRef(({ size = 'small', total = 0, defaultP
         setInnerPageSize(pageSize);
         onChange?.(innerPage.current, pageSize);
     };
-    return (_jsx("div", { ...props, ref: ref, css: style, className: classnames(classes.root, props.className), children: _jsx(paginationContext.Provider, { value: {
+    return (_jsx("div", { ...props, css: style, className: classnames(classes.root, props.className), children: _jsx(PaginationContext, { value: {
                 size,
                 total,
                 pageNum: Math.max(Math.ceil(total / innerPageSize.current), 1),
@@ -36,4 +39,4 @@ export const Pagination = memo(forwardRef(({ size = 'small', total = 0, defaultP
                 onPageSizeChange: pageSizeChangeHandler
             }, children: props.children ||
                 _jsxs(_Fragment, { children: [_jsx(PaginationCounter, {}), _jsx(PaginationPager, {}), _jsx(PaginationSizer, {}), _jsx(PaginationJumper, {})] }) }) }));
-}));
+});

package/dist/esm/components/pagination/sizer.d.ts

@@ -1,5 +1,6 @@
+import { ReactElement } from 'react';
 import { SelectSingleProps } from '../select';
 import { MenuOptionType } from '../optionsBase';
 import { Id } from '../../../types';
 export type PaginationSizerProps<O extends MenuOptionType, V extends Id = Id> = SelectSingleProps<O, V>;
-export declare const PaginationSizer: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Omit<PaginationSizerProps<MenuOptionType<Id>, Id>, "ref"> & import("react").RefAttributes<HTMLDivElement>>>;
+export declare const PaginationSizer: <O extends MenuOptionType, V extends Id = Id>(props: PaginationSizerProps<O, V>) => ReactElement;

package/dist/esm/components/pagination/sizer.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-import { memo, forwardRef, useContext } from 'react';
+import { memo } from 'react';
 import { Select } from '../select';
-import { paginationContext } from './pagination';
+import { usePaginationContext } from './pagination';
 import { classnames } from '../../utils';
 import { classes } from './pagination.style';
-export const PaginationSizer = memo(forwardRef((props, ref) => {
-    const { size, pageSize, onPageSizeChange } = useContext(paginationContext);
-    return (_jsxs(Select, { size: size, value: pageSize, onChange: onPageSizeChange, renderBackfill: (v) => v + ' 条/页', sizeAdaptable: false, ...props, ref: ref, className: classnames(classes.pager, props.className), children: [_jsx(Select.Option, { value: 10, label: "10 \u6761/\u9875" }), _jsx(Select.Option, { value: 20, label: "20 \u6761/\u9875" }), _jsx(Select.Option, { value: 50, label: "50 \u6761/\u9875" }), _jsx(Select.Option, { value: 100, label: "100 \u6761/\u9875" })] }));
-}));
+export const PaginationSizer = memo((props) => {
+    const { size, pageSize, onPageSizeChange } = usePaginationContext();
+    return (_jsxs(Select, { size: size, value: pageSize, onChange: onPageSizeChange, renderBackfill: (v) => v + ' 条/页', sizeAdaptable: false, ...props, className: classnames(classes.pager, props.className), children: [_jsx(Select.Option, { value: 10, label: "10 \u6761/\u9875" }), _jsx(Select.Option, { value: 20, label: "20 \u6761/\u9875" }), _jsx(Select.Option, { value: 50, label: "50 \u6761/\u9875" }), _jsx(Select.Option, { value: 100, label: "100 \u6761/\u9875" })] }));
+});

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

@@ -7,4 +7,4 @@ export interface PaletteProps extends Omit<DIVProps, 'defaultValue' | 'onChange'
     onChange?(value: Color): void;
     draggableOptions?: DraggableOptions<HTMLDivElement>;
 }
-export declare const Palette: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Omit<PaletteProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>>;
+export declare const Palette: import("react").MemoExoticComponent<({ defaultValue, value, onChange, draggableOptions, ...props }: PaletteProps) => import("@emotion/react/jsx-runtime").JSX.Element>;

package/dist/esm/components/palette/palette.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-import { forwardRef, memo, useEffect, useMemo, useRef, useState } from 'react';
+import { memo, useEffect, useMemo, useRef, useState } from 'react';
 import { classes, style } from './palette.style';
 import { classnames, range, useControlled, useDraggableHandle } from '../../utils';
-import { useTheme } from '../app';
+import { useTheme } from '../theme';
 import { Slider } from '../slider';
 import Color from 'color';
 import { Button } from '../button';
@@ -17,9 +17,9 @@ const sliderProps = {
     tooltipProps: { disabled: true }
 };
 const availableFormat = ['HEX', 'RGB', 'HSL', 'CMYK'];
-export const Palette = memo(forwardRef(({ defaultValue, value, onChange, draggableOptions, ...props }, ref) => {
+export const Palette = memo(({ defaultValue, value, onChange, draggableOptions, ...props }) => {
     const { colors } = useTheme();
-    const [innerValue, setInnerValue] = useControlled(defaultValue ?? Color(colors.primary, 'hex'), value, onChange);
+    const [innerValue, setInnerValue] = useControlled(defaultValue ?? Color(colors.primary.main, 'hex'), value, onChange);
     const colorObject = useMemo(() => {
         return {
             hue: innerValue.current.hue(),
@@ -47,7 +47,7 @@ export const Palette = memo(forwardRef(({ defaultValue, value, onChange, draggab
         setInnerValue(innerValue.current.black(newTop).saturationv(newLeft).hue(hue));
         return [newLeft, newTop];
     };
-    const dragStartData = useRef();
+    const dragStartData = useRef(void 0);
     const draggableHandle = useDraggableHandle({
         ...draggableOptions,
         onDragStart(e) {
@@ -104,11 +104,11 @@ export const Palette = memo(forwardRef(({ defaultValue, value, onChange, draggab
                     }
                 })(), commonAlphaItem] }));
     };
-    return (_jsxs("div", { ...props, ref: ref, css: style, className: classnames(classes.root, props.className), children: [_jsxs("div", { ref: paletteRef, className: classes.main, style: { backgroundImage: `linear-gradient(90deg, #ffffff, ${colorObject.saturated})` }, ...draggableHandle, children: [_jsx("div", { className: classes.mask }), _jsx("div", { className: classes.handle, style: {
+    return (_jsxs("div", { ...props, css: style, className: classnames(classes.root, props.className), children: [_jsxs("div", { ref: paletteRef, className: classes.main, style: { backgroundImage: `linear-gradient(90deg, #ffffff, ${colorObject.saturated})` }, ...draggableHandle, children: [_jsx("div", { className: classes.mask }), _jsx("div", { className: classes.handle, style: {
                             left: handlePosition[0] + '%',
                             top: handlePosition[1] + '%'
                         }, ...draggableHandle })] }), _jsxs("div", { className: classes.slidersRow, children: [_jsxs("div", { className: classes.sliders, children: [_jsx(Slider, { ...sliderProps, className: classes.hue, value: colorObject.hue / 359 * 100, onChange: hueChangeHandler }), _jsx(Slider, { ...sliderProps, className: classes.alpha, renderRail: (_, railProps) => _jsxs("div", { ...railProps, children: [railProps.children, _jsx("div", { className: classes.alphaMask, style: { backgroundImage: `linear-gradient(90deg, transparent, ${colorObject.saturated})` } })] }), value: colorObject.alpha * 100, onChange: alphaChangeHandler })] }), _jsx("div", { className: classes.preview, children: _jsx("div", { className: classes.previewColor, style: {
                                 backgroundColor: colorObject.hex,
                                 opacity: colorObject.alpha
                             } }) })] }), _jsxs("div", { className: classes.inputRow, children: [_jsx(Button, { variant: "plain", color: "text", suffix: _jsx(DownOutlined, {}), onClick: formatChangeHandler, children: availableFormat[activeFormat] }), renderInputs()] })] }));
-}));
+});