@canlooks/can-ui 0.0.24 → 0.0.26

package/dist/cjs/components/menuItem/menuItem.js

@@ -7,9 +7,10 @@ const menuItem_style_1 = require("./menuItem.style");
 const utils_1 = require("../../utils");
 const checkbox_1 = require("../checkbox");
 const popper_1 = require("../popper");
-const icons_1 = require("@ant-design/icons");
 const menu_1 = require("../menu");
 const transitionBase_1 = require("../transitionBase");
+const __1 = require("../..");
+const faChevronDown_1 = require("@fortawesome/free-solid-svg-icons/faChevronDown");
 exports.MenuItem = (0, react_1.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 = (0, menu_1.useMenuContext)();
     size ??= context.size;
@@ -42,14 +43,14 @@ exports.MenuItem = (0, react_1.memo)(({ value, size, color = 'primary', emphasiz
             return;
         }
         if (!expandIcon) {
-            return ((0, jsx_runtime_1.jsx)("div", { className: menuItem_style_1.classes.arrow, "data-open": innerExpanded.current, children: (0, jsx_runtime_1.jsx)(icons_1.CaretDownOutlined, {}) }));
+            return ((0, jsx_runtime_1.jsx)("div", { className: menuItem_style_1.classes.arrow, "data-open": innerExpanded.current, children: (0, jsx_runtime_1.jsx)(__1.Icon, { icon: faChevronDown_1.faChevronDown }) }));
         }
         if (typeof expandIcon === 'function') {
             return expandIcon(innerExpanded.current);
         }
         return expandIcon;
     };
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { ...props, css: (0, menuItem_style_1.useStyle)({ color }), className: (0, utils_1.classnames)(menuItem_style_1.classes.root, props.className), style: {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { ...props, css: (0, menuItem_style_1.useStyle)({ color: color || 'primary' }), className: (0, utils_1.clsx)(menuItem_style_1.classes.root, props.className), style: {
                     paddingLeft: _level > 0
                         ? _level * indent + menuItem_style_1.paddingHorizontal[size] - menuItem_style_1.menuListPadding
                         : void 0,

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

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

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

@@ -33,22 +33,24 @@ function useStyle({ color }) {
         return (0, react_1.css) `
             display: flex;
             align-items: center;
-            gap: ${spacing[2]}px;
+            gap: ${spacing[3]}px;
             border-radius: ${borderRadius}px;
             cursor: pointer;
             color: ${text.primary};
-        
             padding: ${exports.paddingHorizontal.medium}px 12px;
+            -webkit-tap-highlight-color: transparent;
             
             &[data-size=small] {
+                gap: ${spacing[2]}px;
                 padding: ${exports.paddingHorizontal.small}px 6px;
             }
         
             &[data-size=large] {
+                gap: ${spacing[4]}px;
                 padding: ${exports.paddingHorizontal.large}px 15px;
             }
         
-            transition: background-color .2s ${easing.easeOut};
+            transition: background-color .25s ${easing.easeOut};
         
             &:hover,
             &[data-focused=true] {
@@ -134,7 +136,7 @@ function useStyle({ color }) {
 
             .${exports.classes.arrow} {
                 color: ${text.placeholder};
-                transition: transform .2s ${easing.easeOut};
+                transition: transform .25s ${easing.easeOut};
         
                 &[data-open=true] {
                     transform: rotate(180deg);

package/dist/cjs/components/modal/modal.js

@@ -8,16 +8,19 @@ const modal_style_1 = require("./modal.style");
 const utils_1 = require("../../utils");
 const transitionBase_1 = require("../transitionBase");
 const theme_1 = require("../theme");
+const globalEventDelegation_1 = require("../app/globalEventDelegation");
 function Modal({ modalProps, ...props }) {
     const { zoom } = (0, theme_1.useTheme)();
-    const transformOrigin = (0, react_1.useMemo)(() => {
-        if (props.open && typeof event === 'object' && 'clientX' in event && 'clientY' in event) {
-            return `${event.clientX / zoom}px ${event.clientY / zoom}px`;
+    const transformOrigin = (0, react_1.useRef)(void 0);
+    const eventDelegation = (0, globalEventDelegation_1.useEventDelegation)();
+    (0, react_1.useMemo)(() => {
+        const e = eventDelegation.current || event;
+        if (props.open && typeof e === 'object' && e.clientX && e.clientY) {
+            transformOrigin.current = `${e.clientX / zoom}px ${e.clientY / zoom}px`;
         }
-        return;
     }, [props.open, zoom]);
-    return ((0, jsx_runtime_1.jsx)(overlayBase_1.OverlayBase, { ...props, css: modal_style_1.style, className: (0, utils_1.classnames)(modal_style_1.classes.root, props.className), children: (0, jsx_runtime_1.jsx)(transitionBase_1.Grow, { timeout: overlayBase_1.overlayBaseTransitionDuration, ...modalProps, in: props.open, className: (0, utils_1.classnames)(modal_style_1.classes.modal, modalProps?.className), style: {
-                transformOrigin,
+    return ((0, jsx_runtime_1.jsx)(overlayBase_1.OverlayBase, { ...props, css: modal_style_1.style, className: (0, utils_1.clsx)(modal_style_1.classes.root, props.className), children: (0, jsx_runtime_1.jsx)(transitionBase_1.Grow, { timeout: overlayBase_1.overlayBaseTransitionDuration, ...modalProps, in: props.open, className: (0, utils_1.clsx)(modal_style_1.classes.modal, modalProps?.className), style: {
+                transformOrigin: transformOrigin.current,
                 ...modalProps?.style
             }, children: props.children }) }));
 }

package/dist/cjs/components/optionsBase/optionsBase.js

@@ -67,7 +67,8 @@ searchValue, selectedValue, onToggleSelected, ...props }) => {
      * ------------------------------------------------------------------
      * 渲染部分
      */
-    const selectedItemRef = (0, popper_1.useScrollToSelected)();
+    const scrollerRef = (0, react_1.useRef)(null);
+    const selectedItemRef = (0, popper_1.useScrollToSelected)(scrollerRef);
     const syncOnToggleSelected = (0, utils_1.useSync)(onToggleSelected);
     const renderedOptions = (0, react_1.useMemo)(() => {
         if (!filteredOptions?.length) {
@@ -121,5 +122,5 @@ searchValue, selectedValue, onToggleSelected, ...props }) => {
             }));
         });
     }, [filteredOptions, selectedValue, verticalIndex.current, showCheckbox]);
-    return ((0, jsx_runtime_1.jsx)(loading_1.Loading, { ...props, css: optionsBase_style_1.style, className: (0, utils_1.classnames)(optionsBase_style_1.classes.root, props.className), loading: loading, children: (0, jsx_runtime_1.jsx)("div", { className: optionsBase_style_1.classes.optionsList, children: renderedOptions }) }));
+    return ((0, jsx_runtime_1.jsx)(loading_1.Loading, { ...props, css: optionsBase_style_1.style, className: (0, utils_1.clsx)(optionsBase_style_1.classes.root, props.className), open: loading, children: (0, jsx_runtime_1.jsx)("div", { ref: scrollerRef, className: optionsBase_style_1.classes.optionsList, children: renderedOptions }) }));
 });

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

@@ -1,9 +1,9 @@
 import React from 'react';
-import { DIVProps, DefineElement } from '../../types';
+import { DivProps, DefineElement } from '../../types';
 import { TransitionBaseProps } from '../transitionBase';
-export interface OverlayBaseProps extends DIVProps {
+export interface OverlayBaseProps extends DivProps {
     /** 模态的容器元素，默认为document.body */
-    container?: DefineElement;
+    container?: DefineElement<HTMLElement>;
     /**
      * @enum {true} 跟随父组件强制渲染
      * @enum {false} 打开时渲染，关闭后销毁

package/dist/cjs/components/overlayBase/overlayBase.js

@@ -18,16 +18,14 @@ function OverlayBase({ container, forceRender, open, onMaskClick, singleLayer, o
     }, [open, forceRender]);
     const containerEl = (typeof container === 'function' ? container() : container) || document.body;
     (0, react_1.useEffect)(() => {
-        const scrollable = typeof container === 'undefined' ? document.documentElement : containerEl;
-        if (open) {
-            removeFocusOnOpen && document.activeElement?.blur?.();
-            scrollable.style.overflow = 'hidden';
-            return () => {
-                scrollable.style.overflow = '';
-            };
+        if (!open) {
+            return;
         }
-        scrollable.style.overflow = '';
-        return;
+        removeFocusOnOpen && document.activeElement?.blur?.();
+        containerEl.style.overflow = 'hidden';
+        return () => {
+            containerEl.style.overflow = '';
+        };
     }, [open]);
     const clickHandler = (e) => {
         maskProps?.onClick?.(e);
@@ -42,5 +40,5 @@ function OverlayBase({ container, forceRender, open, onMaskClick, singleLayer, o
         onClosed?.();
         forceRender === false && setShouldRender(false);
     };
-    return shouldRender.current && (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsxs)("div", { ...props, css: overlayBase_style_1.style, className: (0, utils_1.classnames)(overlayBase_style_1.classes.root, props.className), "data-open": open, "data-custom-container": typeof container !== 'undefined', children: [(0, jsx_runtime_1.jsx)(transitionBase_1.Fade, { timeout: exports.overlayBaseTransitionDuration, ...maskProps, in: open, className: (0, utils_1.classnames)(overlayBase_style_1.classes.mask, maskProps?.className), onClick: clickHandler, onEntered: onEntered, onExited: onExited }), props.children] }), containerEl);
+    return shouldRender.current && (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsxs)("div", { ...props, css: overlayBase_style_1.style, className: (0, utils_1.clsx)(overlayBase_style_1.classes.root, props.className), "data-open": open, "data-custom-container": typeof container !== 'undefined', children: [(0, jsx_runtime_1.jsx)(transitionBase_1.Fade, { timeout: exports.overlayBaseTransitionDuration, ...maskProps, in: open, className: (0, utils_1.clsx)(overlayBase_style_1.classes.mask, maskProps?.className), onClick: clickHandler, onEntered: onEntered, onExited: onExited }), props.children] }), containerEl);
 }

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

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

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

@@ -10,5 +10,5 @@ exports.PaginationCounter = (0, react_1.memo)((props) => {
     const { total, page, pageSize } = (0, pagination_1.usePaginationContext)();
     const start = (page - 1) * pageSize + 1;
     const end = Math.min(start + pageSize - 1, total);
-    return ((0, jsx_runtime_1.jsxs)("div", { ...props, className: (0, utils_1.classnames)(pagination_style_1.classes.counter, props.className), children: ["\u7B2C ", start, "-", end, " \u6761/\u5171 ", total, " \u6761"] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { ...props, className: (0, utils_1.clsx)(pagination_style_1.classes.counter, props.className), children: ["\u7B2C ", start, "-", end, " \u6761/\u5171 ", total, " \u6761"] }));
 });

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

@@ -1 +1,5 @@
 export * from './pagination';
+export * from './counter';
+export * from './jumper';
+export * from './pager';
+export * from './sizer';

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

@@ -2,3 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 tslib_1.__exportStar(require("./pagination"), exports);
+tslib_1.__exportStar(require("./counter"), exports);
+tslib_1.__exportStar(require("./jumper"), exports);
+tslib_1.__exportStar(require("./pager"), exports);
+tslib_1.__exportStar(require("./sizer"), exports);

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

@@ -1,7 +1,7 @@
 import { Ref } from 'react';
-import { DIVProps } from '../../types';
+import { DivProps } from '../../types';
 import { InputProps } from '../input';
-export interface PaginationJumperProps extends DIVProps {
+export interface PaginationJumperProps extends DivProps {
     InputProps?: InputProps;
     InputRef?: Ref<HTMLDivElement>;
 }

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

@@ -8,14 +8,14 @@ const pagination_style_1 = require("./pagination.style");
 const input_1 = require("../input");
 const pagination_1 = require("./pagination");
 exports.PaginationJumper = (0, react_1.memo)(({ InputProps, InputRef, ...props }) => {
-    const { size, onPageChange, pageNum } = (0, pagination_1.usePaginationContext)();
+    const { size, onPageChange, pageCount } = (0, pagination_1.usePaginationContext)();
     const [inputValue, setInputValue] = (0, react_1.useState)('');
     const changeFn = () => {
         const targetPage = parseInt(inputValue);
         if (!isNaN(targetPage)) {
-            onPageChange(Math.max(1, Math.min(targetPage, pageNum)));
+            onPageChange(Math.max(1, Math.min(targetPage, pageCount)));
         }
         setInputValue('');
     };
-    return ((0, jsx_runtime_1.jsxs)("div", { ...props, className: (0, utils_1.classnames)(pagination_style_1.classes.jumper, props.className), children: [(0, jsx_runtime_1.jsx)("span", { children: "\u8DF3\u81F3" }), (0, jsx_runtime_1.jsx)(input_1.Input, { size: size, clearable: false, ...InputProps, ref: InputRef, className: (0, utils_1.classnames)(pagination_style_1.classes.input, InputProps?.className), value: inputValue, onChange: e => setInputValue(e.target.value), onBlur: changeFn, onKeyDown: e => e.key === 'Enter' && changeFn() }), (0, jsx_runtime_1.jsx)("span", { children: "\u9875" })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { ...props, className: (0, utils_1.clsx)(pagination_style_1.classes.jumper, props.className), children: [(0, jsx_runtime_1.jsx)("span", { children: "\u8DF3\u81F3" }), (0, jsx_runtime_1.jsx)(input_1.Input, { size: size, clearable: false, ...InputProps, ref: InputRef, className: (0, utils_1.clsx)(pagination_style_1.classes.input, InputProps?.className), value: inputValue, onChange: e => setInputValue(e.target.value), onBlur: changeFn, onKeyDown: e => e.key === 'Enter' && changeFn() }), (0, jsx_runtime_1.jsx)("span", { children: "\u9875" })] }));
 });

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

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

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

@@ -2,25 +2,28 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PaginationPager = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-const icons_1 = require("@ant-design/icons");
 const react_1 = require("react");
 const button_1 = require("../button");
 const pagination_style_1 = require("./pagination.style");
 const pagination_1 = require("./pagination");
 const utils_1 = require("../../utils");
 const theme_1 = require("../theme");
+const __1 = require("../..");
+const faEllipsis_1 = require("@fortawesome/free-solid-svg-icons/faEllipsis");
+const faAngleLeft_1 = require("@fortawesome/free-solid-svg-icons/faAngleLeft");
+const faAngleRight_1 = require("@fortawesome/free-solid-svg-icons/faAngleRight");
 exports.PaginationPager = (0, react_1.memo)((props) => {
     const { text } = (0, theme_1.useTheme)();
-    const { size, pageNum, page, onPageChange } = (0, pagination_1.usePaginationContext)();
+    const { size, pageCount, page, onPageChange } = (0, pagination_1.usePaginationContext)();
     const renderPageButton = (i, ellipsis) => {
         const btnPage = i + 1;
         const isActive = !ellipsis && btnPage === page;
-        return ((0, jsx_runtime_1.jsx)(button_1.Button, { className: pagination_style_1.classes.button, variant: isActive ? 'outlined' : 'text', color: isActive ? 'primary' : text.primary, size: size, readOnly: isActive, onClick: () => onPageChange(btnPage), children: ellipsis ? (0, jsx_runtime_1.jsx)(icons_1.EllipsisOutlined, {}) : btnPage }, i));
+        return ((0, jsx_runtime_1.jsx)(button_1.Button, { className: pagination_style_1.classes.button, variant: isActive ? 'outlined' : 'text', color: isActive ? 'primary' : text.primary, size: size, readOnly: isActive, onClick: () => onPageChange(btnPage), children: ellipsis ? (0, jsx_runtime_1.jsx)(__1.Icon, { icon: faEllipsis_1.faEllipsis }) : btnPage }, i));
     };
     const renderPageList = () => {
-        if (pageNum <= 9) {
+        if (pageCount <= 9) {
             // 少于9页无需省略号
-            return Array(pageNum).fill(void 0).map((_, i) => {
+            return Array(pageCount).fill(void 0).map((_, i) => {
                 return renderPageButton(i);
             });
         }
@@ -28,16 +31,16 @@ exports.PaginationPager = (0, react_1.memo)((props) => {
             // 当前页小于6，只需右侧省略号
             return Array(9).fill(void 0).map((_, i) => {
                 return i === 8
-                    ? renderPageButton(pageNum - 1)
+                    ? renderPageButton(pageCount - 1)
                     : renderPageButton(i, i === 7);
             });
         }
-        if (page > pageNum - 5) {
+        if (page > pageCount - 5) {
             // 只需左侧省略号
             return Array(9).fill(void 0).map((_, i) => {
                 return i === 0
                     ? renderPageButton(i)
-                    : renderPageButton(pageNum - 9 + i, i === 1);
+                    : renderPageButton(pageCount - 9 + i, i === 1);
             });
         }
         // 两侧都有省略号
@@ -45,9 +48,9 @@ exports.PaginationPager = (0, react_1.memo)((props) => {
             return i === 0
                 ? renderPageButton(i)
                 : i === 8
-                    ? renderPageButton(pageNum - 1)
+                    ? renderPageButton(pageCount - 1)
                     : renderPageButton(page + i - 5, i === 1 || i === 7);
         });
     };
-    return ((0, jsx_runtime_1.jsxs)("div", { ...props, className: (0, utils_1.classnames)(pagination_style_1.classes.pager, props.className), children: [(0, jsx_runtime_1.jsx)(button_1.Button, { className: pagination_style_1.classes.button, variant: "text", size: size, color: "text", disabled: page === 1, onClick: () => onPageChange(page - 1), children: (0, jsx_runtime_1.jsx)(icons_1.LeftOutlined, {}) }), renderPageList(), (0, jsx_runtime_1.jsx)(button_1.Button, { className: pagination_style_1.classes.button, variant: "text", size: size, color: "text", disabled: page === pageNum, onClick: () => onPageChange(page + 1), children: (0, jsx_runtime_1.jsx)(icons_1.RightOutlined, {}) })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { ...props, className: (0, utils_1.clsx)(pagination_style_1.classes.pager, props.className), children: [(0, jsx_runtime_1.jsx)(button_1.Button, { className: pagination_style_1.classes.button, variant: "text", size: size, color: "text", disabled: page === 1, onClick: () => onPageChange(page - 1), children: (0, jsx_runtime_1.jsx)(__1.Icon, { icon: faAngleLeft_1.faAngleLeft }) }), renderPageList(), (0, jsx_runtime_1.jsx)(button_1.Button, { className: pagination_style_1.classes.button, variant: "text", size: size, color: "text", disabled: page === pageCount, onClick: () => onPageChange(page + 1), children: (0, jsx_runtime_1.jsx)(__1.Icon, { icon: faAngleRight_1.faAngleRight }) })] }));
 });

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

@@ -1,10 +1,10 @@
 import { ReactElement } from 'react';
-import { DIVProps, Size } from '../../types';
+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'> {
+export interface PaginationProps extends Omit<DivProps, 'onChange'> {
     size?: Size;
     total?: number;
     defaultPage?: number;
@@ -18,7 +18,7 @@ export interface PaginationProps extends Omit<DIVProps, 'onChange'> {
 export declare function usePaginationContext(): {
     size: Size;
     total: number;
-    pageNum: number;
+    pageCount: number;
     page: number;
     onPageChange(page: number): void;
     pageSize: number;

package/dist/cjs/components/pagination/pagination.js

@@ -13,7 +13,7 @@ const counter_1 = require("./counter");
 const PaginationContext = (0, react_1.createContext)({
     size: 'small',
     total: 0,
-    pageNum: 1,
+    pageCount: 1,
     page: 1,
     onPageChange(page) { },
     pageSize: 10,
@@ -33,10 +33,10 @@ exports.Pagination = (0, react_1.memo)(({ size = 'small', total = 0, defaultPage
         setInnerPageSize(pageSize);
         onChange?.(innerPage.current, pageSize);
     };
-    return ((0, jsx_runtime_1.jsx)("div", { ...props, css: pagination_style_1.style, className: (0, utils_1.classnames)(pagination_style_1.classes.root, props.className), children: (0, jsx_runtime_1.jsx)(PaginationContext, { value: {
+    return ((0, jsx_runtime_1.jsx)("div", { ...props, css: pagination_style_1.style, className: (0, utils_1.clsx)(pagination_style_1.classes.root, props.className), children: (0, jsx_runtime_1.jsx)(PaginationContext, { value: {
                 size,
                 total,
-                pageNum: Math.max(Math.ceil(total / innerPageSize.current), 1),
+                pageCount: Math.max(Math.ceil(total / innerPageSize.current), 1),
                 page: innerPage.current,
                 onPageChange: pageChangeHandler,
                 pageSize: innerPageSize.current,
@@ -44,3 +44,7 @@ exports.Pagination = (0, react_1.memo)(({ size = 'small', total = 0, defaultPage
             }, children: props.children ||
                 (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(counter_1.PaginationCounter, {}), (0, jsx_runtime_1.jsx)(pager_1.PaginationPager, {}), (0, jsx_runtime_1.jsx)(sizer_1.PaginationSizer, {}), (0, jsx_runtime_1.jsx)(jumper_1.PaginationJumper, {})] }) }) }));
 });
+exports.Pagination.Counter = counter_1.PaginationCounter;
+exports.Pagination.Pager = pager_1.PaginationPager;
+exports.Pagination.Sizer = sizer_1.PaginationSizer;
+exports.Pagination.Jumper = jumper_1.PaginationJumper;

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

@@ -7,7 +7,13 @@ const select_1 = require("../select");
 const pagination_1 = require("./pagination");
 const utils_1 = require("../../utils");
 const pagination_style_1 = require("./pagination.style");
+const defaultSizerOptions = [
+    { value: 10, label: '10 条/页' },
+    { value: 20, label: '20 条/页' },
+    { value: 50, label: '50 条/页' },
+    { value: 100, label: '100 条/页' }
+];
 exports.PaginationSizer = (0, react_1.memo)((props) => {
     const { size, pageSize, onPageSizeChange } = (0, pagination_1.usePaginationContext)();
-    return ((0, jsx_runtime_1.jsxs)(select_1.Select, { size: size, value: pageSize, onChange: onPageSizeChange, renderBackfill: (v) => v + ' 条/页', sizeAdaptable: false, ...props, className: (0, utils_1.classnames)(pagination_style_1.classes.pager, props.className), children: [(0, jsx_runtime_1.jsx)(select_1.Select.Option, { value: 10, label: "10 \u6761/\u9875" }), (0, jsx_runtime_1.jsx)(select_1.Select.Option, { value: 20, label: "20 \u6761/\u9875" }), (0, jsx_runtime_1.jsx)(select_1.Select.Option, { value: 50, label: "50 \u6761/\u9875" }), (0, jsx_runtime_1.jsx)(select_1.Select.Option, { value: 100, label: "100 \u6761/\u9875" })] }));
+    return ((0, jsx_runtime_1.jsx)(select_1.Select, { size: size, value: pageSize, onChange: onPageSizeChange, renderBackfill: v => v + ' 条/页', sizeAdaptable: false, options: defaultSizerOptions, ...props, className: (0, utils_1.clsx)(pagination_style_1.classes.sizer, props.className) }));
 });

package/dist/cjs/components/palette/colorValueInput.d.ts

@@ -1,7 +1,7 @@
 import { ReactNode } from 'react';
 import { FixInputNumberParam } from '../../utils';
-import { DIVProps } from '../../types';
-interface ColorValueInputProps extends Omit<DIVProps, 'onChange'>, FixInputNumberParam {
+import { DivProps } from '../../types';
+interface ColorValueInputProps extends Omit<DivProps, 'onChange'>, FixInputNumberParam {
     value: string | number;
     label: ReactNode;
     onChange(value: string): void;

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

@@ -1,10 +1,10 @@
-import { DIVProps } from '../../types';
+import { DivProps } from '../../types';
 import { DraggableOptions } from '../../utils';
-import Color from 'color';
-export interface PaletteProps extends Omit<DIVProps, 'defaultValue' | 'onChange'> {
-    defaultValue?: Color;
-    value?: Color;
-    onChange?(value: Color): void;
+import { ColorInstance } from 'color';
+export interface PaletteProps extends Omit<DivProps, 'defaultValue' | 'onChange'> {
+    defaultValue?: ColorInstance;
+    value?: ColorInstance;
+    onChange?(value: ColorInstance): void;
     draggableOptions?: DraggableOptions<HTMLDivElement>;
 }
 export declare const Palette: import("react").MemoExoticComponent<({ defaultValue, value, onChange, draggableOptions, ...props }: PaletteProps) => import("@emotion/react/jsx-runtime").JSX.Element>;

package/dist/cjs/components/palette/palette.js

@@ -10,8 +10,9 @@ const theme_1 = require("../theme");
 const slider_1 = require("../slider");
 const color_1 = tslib_1.__importDefault(require("color"));
 const button_1 = require("../button");
-const icons_1 = require("@ant-design/icons");
 const colorValueInput_1 = require("./colorValueInput");
+const __1 = require("../..");
+const faChevronDown_1 = require("@fortawesome/free-solid-svg-icons/faChevronDown");
 const sliderProps = {
     railSize: 9,
     handleSize: 9,
@@ -51,7 +52,6 @@ exports.Palette = (0, react_1.memo)(({ defaultValue, value, onChange, draggableO
         setInnerValue(innerValue.current.black(newTop).saturationv(newLeft).hue(hue));
         return [newLeft, newTop];
     };
-    const dragStartData = (0, react_1.useRef)(void 0);
     const draggableHandle = (0, utils_1.useDraggableHandle)({
         ...draggableOptions,
         onDragStart(e) {
@@ -65,7 +65,7 @@ exports.Palette = (0, react_1.memo)(({ defaultValue, value, onChange, draggableO
                 const { x, y } = paletteRef.current.getBoundingClientRect();
                 startPosition = setHandlePosition((e.clientX - x) / paletteWidth * 100, (e.clientY - y) / paletteHeight * 100, hue);
             }
-            dragStartData.current = {
+            return {
                 left: startPosition[0],
                 top: startPosition[1],
                 paletteWidth,
@@ -75,7 +75,7 @@ exports.Palette = (0, react_1.memo)(({ defaultValue, value, onChange, draggableO
         },
         onDrag(info, e) {
             draggableOptions?.onDrag?.(info, e);
-            const { top, left, paletteWidth, paletteHeight, hue } = dragStartData.current;
+            const { top, left, paletteWidth, paletteHeight, hue } = info.startData;
             setHandlePosition(left + info.deltaX / paletteWidth * 100, top + info.deltaY / paletteHeight * 100, hue);
         }
     });
@@ -108,11 +108,11 @@ exports.Palette = (0, react_1.memo)(({ defaultValue, value, onChange, draggableO
                     }
                 })(), commonAlphaItem] }));
     };
-    return ((0, jsx_runtime_1.jsxs)("div", { ...props, css: palette_style_1.style, className: (0, utils_1.classnames)(palette_style_1.classes.root, props.className), children: [(0, jsx_runtime_1.jsxs)("div", { ref: paletteRef, className: palette_style_1.classes.main, style: { backgroundImage: `linear-gradient(90deg, #ffffff, ${colorObject.saturated})` }, ...draggableHandle, children: [(0, jsx_runtime_1.jsx)("div", { className: palette_style_1.classes.mask }), (0, jsx_runtime_1.jsx)("div", { className: palette_style_1.classes.handle, style: {
+    return ((0, jsx_runtime_1.jsxs)("div", { ...props, css: palette_style_1.style, className: (0, utils_1.clsx)(palette_style_1.classes.root, props.className), children: [(0, jsx_runtime_1.jsxs)("div", { ref: paletteRef, className: palette_style_1.classes.main, style: { backgroundImage: `linear-gradient(90deg, #ffffff, ${colorObject.saturated})` }, ...draggableHandle, children: [(0, jsx_runtime_1.jsx)("div", { className: palette_style_1.classes.mask }), (0, jsx_runtime_1.jsx)("div", { className: palette_style_1.classes.handle, style: {
                             left: handlePosition[0] + '%',
                             top: handlePosition[1] + '%'
                         }, ...draggableHandle })] }), (0, jsx_runtime_1.jsxs)("div", { className: palette_style_1.classes.slidersRow, children: [(0, jsx_runtime_1.jsxs)("div", { className: palette_style_1.classes.sliders, children: [(0, jsx_runtime_1.jsx)(slider_1.Slider, { ...sliderProps, className: palette_style_1.classes.hue, value: colorObject.hue / 359 * 100, onChange: hueChangeHandler }), (0, jsx_runtime_1.jsx)(slider_1.Slider, { ...sliderProps, className: palette_style_1.classes.alpha, renderRail: (_, railProps) => (0, jsx_runtime_1.jsxs)("div", { ...railProps, children: [railProps.children, (0, jsx_runtime_1.jsx)("div", { className: palette_style_1.classes.alphaMask, style: { backgroundImage: `linear-gradient(90deg, transparent, ${colorObject.saturated})` } })] }), value: colorObject.alpha * 100, onChange: alphaChangeHandler })] }), (0, jsx_runtime_1.jsx)("div", { className: palette_style_1.classes.preview, children: (0, jsx_runtime_1.jsx)("div", { className: palette_style_1.classes.previewColor, style: {
                                 backgroundColor: colorObject.hex,
                                 opacity: colorObject.alpha
-                            } }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: palette_style_1.classes.inputRow, children: [(0, jsx_runtime_1.jsx)(button_1.Button, { variant: "plain", color: "text", suffix: (0, jsx_runtime_1.jsx)(icons_1.DownOutlined, {}), onClick: formatChangeHandler, children: availableFormat[activeFormat] }), renderInputs()] })] }));
+                            } }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: palette_style_1.classes.inputRow, children: [(0, jsx_runtime_1.jsx)(button_1.Button, { variant: "plain", color: "text", suffix: (0, jsx_runtime_1.jsx)(__1.Icon, { icon: faChevronDown_1.faChevronDown }), onClick: formatChangeHandler, children: availableFormat[activeFormat] }), renderInputs()] })] }));
 });

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

@@ -4,9 +4,9 @@ export declare const classes: {
     mask: string;
     hue: string;
     alpha: string;
+    sliders: string;
     handle: string;
     slidersRow: string;
-    sliders: string;
     alphaMask: string;
     preview: string;
     previewColor: string;

package/dist/cjs/components/pickerDialog/pickerDialog.js

@@ -10,12 +10,12 @@ const selectionContext_1 = require("../selectionContext");
 const divider_1 = require("../divider");
 const selectedList_1 = require("../selectedList");
 const button_1 = require("../button");
-const icons_1 = require("@ant-design/icons");
+const __1 = require("../..");
+const faTrashCan_1 = require("@fortawesome/free-regular-svg-icons/faTrashCan");
 exports.PickerDialog = (({ ref, dialogRef, multiple, children, showSelectedList = !!multiple, selectedListPlacement = 'right', selectedListProps, selectedItemProps, onConfirm, rows, nodes, 
 // 以下属性从SelectionContextBaseProps继承
 options = rows ?? nodes, primaryKey = 'id', childrenKey = 'children', relation = 'dependent', integration = 'shallowest', disabled, clearable = !!multiple, onToggle, ...props }) => {
-    const resolveFn = (0, react_1.useRef)(void 0);
-    const rejectFn = (0, react_1.useRef)(void 0);
+    const resolvers = (0, react_1.useRef)(void 0);
     const [innerValue, _setInnerValue] = (0, react_1.useState)(multiple ? [] : null);
     const setInnerValue = (value) => {
         _setInnerValue(value);
@@ -27,10 +27,8 @@ options = rows ?? nodes, primaryKey = 'id', childrenKey = 'children', relation =
         open(value) {
             _setInnerValue(value ?? null);
             setInnerOpen(true);
-            return new Promise((resolve, reject) => {
-                resolveFn.current = resolve;
-                rejectFn.current = reject;
-            });
+            const { promise } = resolvers.current = Promise.withResolvers();
+            return promise;
         }
     }));
     const onCloseHandler = (reason) => {
@@ -39,21 +37,19 @@ options = rows ?? nodes, primaryKey = 'id', childrenKey = 'children', relation =
         }
         props.onClose?.(reason);
         if (!open) {
-            rejectFn.current?.({
+            resolvers.current?.reject({
                 type: 'canceled',
                 value: innerValue
             });
-            resolveFn.current = rejectFn.current = void 0;
         }
         setInnerOpen(false);
     };
     const confirmHandler = (value = innerValue) => {
         onConfirm?.(value);
-        resolveFn.current?.(value);
-        resolveFn.current = rejectFn.current = void 0;
+        resolvers.current?.resolve(value);
         setInnerOpen(false);
     };
-    const exitedHanlder = () => {
+    const exitedHandler = () => {
         props.modalProps?.onExited?.();
         _setInnerValue(null);
     };
@@ -69,11 +65,11 @@ options = rows ?? nodes, primaryKey = 'id', childrenKey = 'children', relation =
                 : children;
     };
     const selectedCount = (0, utils_1.toArray)(innerValue)?.length || 0;
-    return ((0, jsx_runtime_1.jsx)(selectionContext_1.SelectionContext, { options: options, primaryKey: primaryKey, childrenKey: childrenKey, relation: relation, integration: integration, disabled: disabled, clearable: clearable, multiple: multiple, value: innerValue, onChange: setInnerValue, onToggle: onToggle, children: (0, jsx_runtime_1.jsx)(dialog_1.Dialog, { width: multiple ? '90%' : 1080, footer: null, maskClosable: false, ...props, ref: dialogRef, css: pickerDialog_style_1.style, className: (0, utils_1.classnames)(pickerDialog_style_1.classes.root, props.className), open: innerOpen.current, onClose: onCloseHandler, modalProps: {
-                onExited: exitedHanlder,
+    return ((0, jsx_runtime_1.jsx)(selectionContext_1.SelectionContext, { options: options, primaryKey: primaryKey, childrenKey: childrenKey, relation: relation, integration: integration, disabled: disabled, clearable: clearable, multiple: multiple, value: innerValue, onChange: setInnerValue, onToggle: onToggle, children: (0, jsx_runtime_1.jsx)(dialog_1.Dialog, { width: multiple ? '90%' : 1080, footer: null, maskClosable: false, ...props, ref: dialogRef, css: pickerDialog_style_1.style, className: (0, utils_1.clsx)(pickerDialog_style_1.classes.root, props.className), open: innerOpen.current, onClose: onCloseHandler, modalProps: {
+                onExited: exitedHandler,
                 ...props.modalProps
             }, ...showSelectedList && {
                 [selectedListPlacement === 'left' ? 'prefix' : 'suffix']: ((0, jsx_runtime_1.jsxs)("div", { className: pickerDialog_style_1.classes.selectedArea, children: [(0, jsx_runtime_1.jsxs)(divider_1.Divider, { className: pickerDialog_style_1.classes.count, textAlign: "start", children: [(0, jsx_runtime_1.jsxs)("div", { children: ["\u5DF2\u9009\u62E9", (0, jsx_runtime_1.jsx)("b", { children: selectedCount }), "\u9879"] }), clearable &&
-                                    (0, jsx_runtime_1.jsx)(button_1.Button, { prefix: (0, jsx_runtime_1.jsx)(icons_1.DeleteOutlined, {}), variant: "plain", color: "text", onClick: () => setInnerValue(multiple ? [] : null), children: "\u6E05\u7A7A" })] }), (0, jsx_runtime_1.jsx)(selectedList_1.SelectedList, { itemProps: selectedItemProps, ...selectedListProps, className: (0, utils_1.classnames)(pickerDialog_style_1.classes.list, selectedListProps?.className) }), (0, jsx_runtime_1.jsx)(button_1.Button, { className: pickerDialog_style_1.classes.confirm, disabled: selectedCount === 0, onClick: () => confirmHandler(), children: "\u786E\u5B9A" })] }))
+                                    (0, jsx_runtime_1.jsx)(button_1.Button, { prefix: (0, jsx_runtime_1.jsx)(__1.Icon, { icon: faTrashCan_1.faTrashCan }), variant: "plain", color: "text", onClick: () => setInnerValue(multiple ? [] : null), children: "\u6E05\u7A7A" })] }), (0, jsx_runtime_1.jsx)(selectedList_1.SelectedList, { itemProps: selectedItemProps, ...selectedListProps, className: (0, utils_1.clsx)(pickerDialog_style_1.classes.list, selectedListProps?.className) }), (0, jsx_runtime_1.jsx)(button_1.Button, { className: pickerDialog_style_1.classes.confirm, disabled: selectedCount === 0, onClick: () => confirmHandler(), children: "\u786E\u5B9A" })] }))
             }, children: renderChildren() }) }));
 });

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

@@ -1,9 +1,9 @@
 export declare const classes: {
     content: string;
-    confirm: string;
     list: string;
     selectedArea: string;
     count: string;
+    confirm: string;
 } & {
     root: string;
 };

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

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { DIVProps, Status } from '../../types';
+import { DivProps, SlotsAndProps, Status } from '../../types';
 export declare const imagePreset: {
     emptyLight: string;
     emptyDark: string;
@@ -9,12 +9,15 @@ export declare const imagePreset: {
     info: string;
     searching: string;
 };
-export interface PlaceholderProps extends Omit<DIVProps, 'title'> {
+export interface PlaceholderProps extends Omit<DivProps, 'title'>, SlotsAndProps<{
+    title: DivProps;
+    description: DivProps;
+    extra: DivProps;
+}> {
     status?: 'empty' | 'searching' | Status;
     image?: ReactNode;
     title?: ReactNode;
     description?: ReactNode;
-    descriptionComponent?: any;
     extra?: ReactNode;
 }
-export declare const Placeholder: import("react").MemoExoticComponent<({ status, image, title, description, descriptionComponent: DescriptionComponent, extra, ...props }: PlaceholderProps) => import("@emotion/react/jsx-runtime").JSX.Element>;
+export declare const Placeholder: import("react").MemoExoticComponent<({ slots, slotProps, status, image, title, description, extra, ...props }: PlaceholderProps) => import("@emotion/react/jsx-runtime").JSX.Element>;