@canlooks/can-ui 0.0.1

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

@@ -0,0 +1,147 @@
+import { css } from '@emotion/react';
+import { defineClasses, defineCss, useColor, useCss } from '../../utils';
+import Color from 'color';
+export const classes = defineClasses('menu-item', [
+    'content',
+    'checkbox',
+    'prefix',
+    'suffix',
+    'content',
+    'children',
+    'childrenWrap',
+    'arrow'
+]);
+// 原始横向内边距，用于缩进时计算
+export const paddingHorizontal = {
+    small: 2,
+    medium: 6,
+    large: 10
+};
+export function useStyle({ color }) {
+    const colorValue = useColor(color);
+    return useCss(({ spacing, mode, borderRadius, gray, easing, text }) => {
+        const c = Color(colorValue);
+        const selectedBg = c.alpha(.1).string();
+        const selectedAndFocused = c.alpha(.15).string();
+        const focusedBg = gray(mode === 'light' ? .05 : .23);
+        const disabledOrActive = gray(mode === 'light' ? .1 : .17);
+        return css `
+            display: flex;
+            align-items: center;
+            gap: ${spacing[2]}px;
+            border-radius: ${borderRadius}px;
+            cursor: pointer;
+            color: ${text.primary};
+        
+            padding: ${paddingHorizontal.medium}px 12px;
+            
+            &[data-size=small] {
+                padding: ${paddingHorizontal.small}px 6px;
+            }
+        
+            &[data-size=large] {
+                padding: ${paddingHorizontal.large}px 15px;
+            }
+        
+            transition: background-color .2s ${easing.easeOut};
+        
+            &:hover,
+            &[data-focused=true] {
+                background-color: ${focusedBg};
+            }
+
+            &[data-emphasized=true] {
+                color: ${colorValue};
+            }
+        
+            &:active {
+                transition: background-color 0s;
+                background-color: ${disabledOrActive};
+            }
+        
+            &[data-selected=true] {
+                background-color: ${selectedBg};
+
+                &[data-focused=true] {
+                    background-color: ${selectedAndFocused};
+                }
+
+                .${classes.content} {
+                    font-weight: bold;
+                    color: ${colorValue};
+                }
+            }
+
+            &[data-disabled=true] {
+                cursor: not-allowed;
+                color: ${text.disabled};
+                background-color: ${disabledOrActive};
+            }
+
+            .${classes.checkbox} {
+                display: flex;
+            }
+
+            .${classes.content} {
+                flex: 1;
+            }
+
+            &[data-ellipsis=true] {
+                .${classes.content} {
+                    white-space: nowrap;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                }
+            }
+
+            .${classes.suffix} {
+                max-width: 70%;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+            }
+
+            .${classes.prefix} {
+                color: ${text.secondary};
+            }
+
+            &[data-emphasized=true],
+            &[data-selected=true] {
+                .${classes.prefix} {
+                    color: ${colorValue};
+                }
+            }
+
+            &:has(+ .${classes.children} .${classes.root}[data-selected=true]) {
+                .${classes.content} {
+                    color: ${colorValue};
+                }
+
+                .${classes.prefix},
+                .${classes.arrow} {
+                    color: ${colorValue};
+                }
+            }
+            
+            .${classes.suffix} {
+                color: ${text.disabled};
+            }
+
+            .${classes.arrow} {
+                color: ${text.placeholder};
+                transition: transform .2s ${easing.easeOut};
+        
+                &[data-open=true] {
+                    transform: rotate(180deg);
+                }
+            }
+        `;
+    }, [colorValue]);
+}
+export const menuListPadding = 4;
+export const childrenStyle = defineCss(({ background }) => css `
+    .${classes.childrenWrap} {
+        padding: ${menuListPadding}px;
+        background-color: ${background.fixed};
+    }
+`);

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

@@ -0,0 +1 @@
+export * from './modal';

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

@@ -0,0 +1 @@
+export * from './modal';

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

@@ -0,0 +1,6 @@
+import { OverlayBaseProps } from '../overlayBase';
+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>>;

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

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { forwardRef, useMemo, useRef } 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(() => {
+        if (props.open && typeof event === 'object' && 'clientX' in event && 'clientY' in event) {
+            transformOrigin.current = `${event.clientX / zoom}px ${event.clientY / zoom}px`;
+        }
+    }, [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,
+                ...modalProps?.style
+            }, children: props.children }) }));
+});

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

@@ -0,0 +1,6 @@
+export declare const classes: {
+    modal: string;
+} & {
+    root: string;
+};
+export declare const style: import("@emotion/react").SerializedStyles;

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

@@ -0,0 +1,20 @@
+import { css } from '@emotion/react';
+import { defineClasses } from '../../utils';
+export const classes = defineClasses('modal', [
+    'modal'
+]);
+export const style = css `
+    .${classes.modal} {
+        width: 100%;
+        height: 100%;
+        padding: 40px;
+        pointer-events: none;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        > * {
+            pointer-events: all;
+        }
+    }
+`;

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

@@ -0,0 +1 @@
+export * from './optionsBase';

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

@@ -0,0 +1 @@
+export * from './optionsBase';

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

@@ -0,0 +1,27 @@
+import { ReactElement, ReactNode } from 'react';
+import { MenuItemProps } from '../menuItem';
+import { LoadingProps } from '../loading';
+import { OptionType } from '../selectionContext';
+import { Id } from '../../../types';
+export interface MenuOptionType<V extends Id = Id> extends Omit<MenuItemProps, 'children'>, Omit<OptionType<V>, 'children'> {
+}
+export type OptionsBaseSharedProps<O extends MenuOptionType<V>, V extends Id = Id> = {
+    showCheckbox?: boolean;
+    loading?: boolean;
+    options?: O[];
+    children?: ReactNode;
+    /** 指定options中用于当作label的键, @default "label" */
+    labelKey?: keyof O;
+    /** 指定options中的主键名, @default "value" */
+    primaryKey?: keyof O;
+    /** 指定options中用于当作searchToken的键, @default "searchToken" */
+    searchTokenKey?: keyof O;
+    /** 遍历选项时会触发该方法，若返回true，表示该选项满足筛选条件，反之会将该选项排除 */
+    filterPredicate?(searchValue: string, option: O, index: number): any;
+};
+export interface OptionsBaseProps<O extends MenuOptionType<V>, V extends Id = Id> extends OptionsBaseSharedProps<O, V>, LoadingProps {
+    searchValue?: string;
+    selectedValue?: V | V[];
+    onToggleSelected?(value: V, e: KeyboardEvent | React.MouseEvent<HTMLDivElement>): void;
+}
+export declare const OptionsBase: <O extends MenuOptionType<V>, V extends Id = Id>(props: OptionsBaseProps<O, V>) => ReactElement;

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

@@ -0,0 +1,121 @@
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { useMemo, memo, Children, isValidElement, cloneElement } from 'react';
+import { Highlight } from '../highlight';
+import { MenuItem } from '../menuItem';
+import { Placeholder } from '../placeholder';
+import { classnames, isSelected, useKeyboard, useSync } from '../../utils';
+import { classes, style } from './optionsBase.style';
+import { Loading } from '../loading';
+import { usePopperContext, useScrollToSelected } from '../popper';
+export const OptionsBase = memo(({ 
+// 共享属性
+showCheckbox, loading, options, children, labelKey = 'label', primaryKey = 'value', searchTokenKey = 'searchToken', filterPredicate, 
+// 以下为非共享属性
+searchValue, selectedValue, onToggleSelected, ...props }) => {
+    const { open, setOpen } = usePopperContext();
+    const filteredOptions = useMemo(() => {
+        const trimmedSearchValue = searchValue?.trim();
+        if (!trimmedSearchValue) {
+            return options || Children.toArray(children);
+        }
+        const splitedValue = trimmedSearchValue.split(' ');
+        const filterFn = (opt, index) => {
+            let ret = false;
+            if (filterPredicate) {
+                ret = filterPredicate(trimmedSearchValue, opt, index);
+            }
+            else {
+                const searchToken = typeof opt[labelKey] === 'string' ? opt[labelKey] : opt[searchTokenKey];
+                if (typeof searchToken === 'string') {
+                    ret = splitedValue.some(k => {
+                        return k && searchToken.toLowerCase().includes(k.toLowerCase());
+                    });
+                }
+            }
+            return ret;
+        };
+        return options
+            ? options.filter(filterFn)
+            : Children.toArray(children).filter((c, index) => {
+                return isValidElement(c) && filterFn(c.props, index);
+            });
+    }, [searchValue, filterPredicate, options, children, labelKey, searchTokenKey]);
+    /**
+     * ------------------------------------------------------------------
+     * 键盘控制
+     */
+    const { verticalIndex, setVerticalIndex } = useKeyboard({
+        allowVertical: true,
+        verticalCount: filteredOptions.length,
+        open,
+        setOpen,
+        onEnter({ verticalIndex }, e) {
+            const opt = filteredOptions[verticalIndex];
+            if (isValidElement(opt)) {
+                onToggleSelected?.(opt.props.value, e);
+            }
+            else if (typeof opt === 'object' && opt) {
+                onToggleSelected?.(opt[primaryKey], e);
+            }
+        }
+    });
+    /**
+     * ------------------------------------------------------------------
+     * 渲染部分
+     */
+    const selectedItemRef = useScrollToSelected();
+    const syncOnToggleSelected = useSync(onToggleSelected);
+    const renderedOptions = useMemo(() => {
+        if (!filteredOptions?.length) {
+            return _jsx(Placeholder, {});
+        }
+        const makeProps = (params) => ({
+            ref: params.selected ? selectedItemRef : void 0,
+            showCheckbox,
+            selected: params.selected,
+            focused: verticalIndex.current === params.index,
+            label: typeof params.label === 'string' && searchValue
+                ? _jsx(Highlight, { keywords: searchValue?.split(' '), children: params.label })
+                : params.label,
+            onClick: e => {
+                params.opt.onClick?.(e);
+                syncOnToggleSelected.current?.(params.value, e);
+            },
+            onPointerEnter: e => {
+                params.opt.onPointerEnter?.(e);
+                setVerticalIndex(-1);
+            },
+            children: null
+        });
+        if (options) {
+            return filteredOptions.map((opt, index) => {
+                const value = opt[primaryKey];
+                const label = opt[labelKey] ?? value;
+                return (_jsx(MenuItem, { value: value, 
+                    // 手动传递而不使用{...opt}，可避免多余的props挂载上DOM
+                    size: opt.size, color: opt.color, emphasized: opt.emphasized, disabled: opt.disabled, checkboxProps: opt.checkboxProps, ellipsis: opt.ellipsis, prefix: opt.prefix, suffix: opt.suffix, ...makeProps({
+                        opt,
+                        label,
+                        value,
+                        index,
+                        selected: isSelected(value, selectedValue)
+                    }) }, opt.key ?? value ?? index));
+            });
+        }
+        // children
+        return filteredOptions.map((c, index) => {
+            if (!isValidElement(c)) {
+                return c;
+            }
+            const { value, label } = c.props;
+            return cloneElement(c, makeProps({
+                opt: c.props,
+                label,
+                value: value,
+                index,
+                selected: isSelected(value, selectedValue)
+            }));
+        });
+    }, [filteredOptions, selectedValue, verticalIndex.current, showCheckbox]);
+    return (_jsx(Loading, { ...props, css: style, className: classnames(classes.root, props.className), loading: loading, children: _jsx("div", { className: classes.optionsList, children: renderedOptions }) }));
+});

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

@@ -0,0 +1,6 @@
+export declare const classes: {
+    optionsList: string;
+} & {
+    root: string;
+};
+export declare const style: import("@emotion/react").SerializedStyles;

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

@@ -0,0 +1,18 @@
+import { css } from '@emotion/react';
+import { defineClasses } from '../../utils';
+export const classes = defineClasses('options-base', [
+    'optionsList'
+]);
+export const style = css `
+    .${classes.optionsList} {
+        width: 100%;
+        height: 100%;
+        flex: 1;
+        overflow: hidden;
+        max-height: ${32 * 8}px;
+
+        &:hover {
+            overflow: hidden auto;
+        }
+    }
+`;

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

@@ -0,0 +1 @@
+export * from './overlayBase';

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

@@ -0,0 +1 @@
+export * from './overlayBase';

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

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

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

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { forwardRef, 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) => {
+    const [shouldRender, setShouldRender] = useDerivedState((prev = false) => {
+        if (open) {
+            return true;
+        }
+        return forceRender === true || prev;
+    }, [open, forceRender]);
+    const containerEl = (typeof container === 'function' ? container() : container) || document.body;
+    useEffect(() => {
+        const scrollable = typeof container === 'undefined' ? document.documentElement : containerEl;
+        if (open) {
+            removeFocusOnOpen && document.activeElement?.blur?.();
+            scrollable.style.overflow = 'hidden';
+            return () => {
+                scrollable.style.overflow = '';
+            };
+        }
+        scrollable.style.overflow = '';
+        return;
+    }, [open]);
+    const clickHandler = (e) => {
+        maskProps?.onClick?.(e);
+        onMaskClick?.(e);
+    };
+    const onEntered = (node) => {
+        maskProps?.onEntered?.(node);
+        onOpened?.();
+    };
+    const onExited = () => {
+        maskProps?.onExited?.();
+        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);
+});

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

@@ -0,0 +1,6 @@
+export declare const classes: {
+    mask: string;
+} & {
+    root: string;
+};
+export declare const style: () => import("@emotion/react").SerializedStyles[];

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

@@ -0,0 +1,31 @@
+import { css } from '@emotion/react';
+import { defineClasses, defineCss } from '../../utils';
+import { zIndex } from '../app';
+import { style as appStyle } from '../app/app.style';
+export const classes = defineClasses('overlay-base', [
+    'mask'
+]);
+export const style = defineCss(({ text, fontSize }) => [
+    appStyle,
+    css `
+        color: ${text.primary};
+        font-size: ${fontSize}px;
+        position: fixed;
+        inset: 0;
+        z-index: ${zIndex.overlay};
+
+        &[data-custom-container=true] {
+            position: absolute;
+        }
+        
+        .${classes.mask} {
+            background-color: rgba(0, 0, 0, .5);
+            position: absolute;
+            inset: 0;
+        }
+
+        &:not([data-open=true]) {
+            pointer-events: none;
+        }
+    `
+]);

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

@@ -0,0 +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>>>;

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

@@ -0,0 +1,11 @@
+import { jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { forwardRef, memo, useContext } 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);
+    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"] }));
+}));

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

@@ -0,0 +1 @@
+export * from './pagination';

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

@@ -0,0 +1 @@
+export * from './pagination';

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

@@ -0,0 +1,8 @@
+import { Ref } from 'react';
+import { DIVProps } from '../../../types';
+import { InputProps } from '../input';
+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>>>;

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

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { forwardRef, memo, useContext, 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);
+    const [inputValue, setInputValue] = useState('');
+    const changeFn = () => {
+        const targetPage = parseInt(inputValue);
+        if (!isNaN(targetPage)) {
+            onPageChange(Math.max(1, Math.min(targetPage, pageNum)));
+        }
+        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" })] }));
+}));

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

@@ -0,0 +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>>>;

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

@@ -0,0 +1,50 @@
+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 { Button } from '../button';
+import { classes } from './pagination.style';
+import { paginationContext } from './pagination';
+import { classnames } from '../../utils';
+import { useTheme } from '../app';
+export const PaginationPager = memo(forwardRef((props, ref) => {
+    const { text } = useTheme();
+    const { size, pageNum, page, onPageChange } = useContext(paginationContext);
+    const renderPageButton = (i, ellipsis) => {
+        const btnPage = i + 1;
+        const isActive = !ellipsis && btnPage === page;
+        return (_jsx(Button, { className: classes.button, variant: isActive ? 'outlined' : 'text', color: isActive ? 'primary' : text.primary, size: size, readOnly: isActive, onClick: () => onPageChange(btnPage), children: ellipsis ? _jsx(EllipsisOutlined, {}) : btnPage }, i));
+    };
+    const renderPageList = () => {
+        if (pageNum <= 9) {
+            // 少于9页无需省略号
+            return Array(pageNum).fill(void 0).map((_, i) => {
+                return renderPageButton(i);
+            });
+        }
+        if (page < 6) {
+            // 当前页小于6，只需右侧省略号
+            return Array(9).fill(void 0).map((_, i) => {
+                return i === 8
+                    ? renderPageButton(pageNum - 1)
+                    : renderPageButton(i, i === 7);
+            });
+        }
+        if (page > pageNum - 5) {
+            // 只需左侧省略号
+            return Array(9).fill(void 0).map((_, i) => {
+                return i === 0
+                    ? renderPageButton(i)
+                    : renderPageButton(pageNum - 9 + i, i === 1);
+            });
+        }
+        // 两侧都有省略号
+        return Array(9).fill(void 0).map((_, i) => {
+            return i === 0
+                ? renderPageButton(i)
+                : i === 8
+                    ? renderPageButton(pageNum - 1)
+                    : 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, {}) })] }));
+}));

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

@@ -0,0 +1,33 @@
+import { ReactElement } from 'react';
+import { DIVProps, Size } from '../../../types';
+import { PaginationPager } from './pager';
+import { PaginationSizer } from './sizer';
+import { PaginationJumper } from './jumper';
+import { PaginationCounter } from './counter';
+export interface PaginationProps extends Omit<DIVProps, 'onChange'> {
+    size?: Size;
+    total?: number;
+    defaultPage?: number;
+    page?: number;
+    onPageChange?(page: number): void;
+    defaultPageSize?: number;
+    pageSize?: number;
+    onPageSizeChange?(pageSize: number): void;
+    onChange?(page: number, pageSize: number): void;
+}
+export declare const paginationContext: import("react").Context<{
+    size: Size;
+    total: number;
+    pageNum: number;
+    page: number;
+    onPageChange(page: number): void;
+    pageSize: number;
+    onPageSizeChange(pageSize: number): void;
+}>;
+export declare const Pagination: {
+    (props: PaginationProps): ReactElement;
+    Counter: typeof PaginationCounter;
+    Pager: typeof PaginationPager;
+    Sizer: typeof PaginationSizer;
+    Jumper: typeof PaginationJumper;
+};