@canlooks/can-ui 0.0.45 → 0.0.47

package/dist/cjs/components/button/button.js

@@ -11,14 +11,14 @@ const transitionBase_1 = require("../transitionBase");
 const Button = ({ component: Component = 'button', color = 'primary', shape = 'square', size, variant = 'filled', orientation = 'horizontal', prefix, suffix, loading = false, readOnly, icon, label, ...props }) => {
     const theme = (0, theme_1.useTheme)();
     size ??= theme.size;
-    const showRipple = (0, utils_1.useTouchRipple)(color);
+    const showSpread = (0, utils_1.useTouchSpread)(color);
     const onPointerUp = (e) => {
         props.onPointerUp?.(e);
         if (!props.disabled
             && !loading
             && !readOnly
             && { flatted: true, filled: true, outlined: true, dashed: true }[variant]) {
-            showRipple(e.currentTarget);
+            showSpread(e.currentTarget);
         }
     };
     const onClick = (e) => {

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

@@ -273,11 +273,13 @@ function useStyle({ color }) {
                 &[data-size=small] {
                     width: 24px;
                     height: 24px;
+                    padding: 0;
                 }
 
                 &[data-size=large] {
                     width: 40px;
                     height: 40px;
+                    padding: 0;
                 }
             }
         `;

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

@@ -0,0 +1,32 @@
+import { Size } from '../../types';
+import { Dayjs } from 'dayjs';
+import { Dispatch, SetStateAction } from 'react';
+import { FlexProps } from '../flex';
+export type ViewLevel = 'date' | 'month' | 'year';
+type SharedProps = {
+    min?: Dayjs;
+    max?: Dayjs;
+    disabledDates?: (date: Dayjs) => boolean;
+    /** 是否显示`回今天`按钮，默认为`true` */
+    showToday?: boolean;
+    /** @private */
+    _defaultNull?: boolean;
+};
+export interface CalendarProps extends SharedProps, Omit<FlexProps, 'defaultValue' | 'onChange'> {
+    /** 视图等级，默认为`date` */
+    viewLevel?: ViewLevel;
+    size?: Size;
+    defaultValue?: Dayjs | null;
+    value?: Dayjs | null;
+    onChange?(value: Dayjs | null): void;
+}
+export interface PanelProps extends SharedProps {
+    value: Dayjs | null;
+    setValue: Dispatch<SetStateAction<Dayjs | null>>;
+    innerD: Dayjs;
+    setInnerD: Dispatch<SetStateAction<Dayjs>>;
+    setViewType: Dispatch<SetStateAction<'date' | 'month' | 'year'>>;
+    onSelected(newValue: Dayjs): void;
+}
+export declare const Calendar: ({ viewLevel, showToday, size, defaultValue, min, max, disabledDates, value, onChange, _defaultNull, ...props }: CalendarProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/dist/cjs/components/calendar/calendar.js

@@ -0,0 +1,51 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Calendar = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const dayjs_1 = tslib_1.__importDefault(require("dayjs"));
+const utils_1 = require("../../utils");
+const panelDates_1 = require("./panelDates");
+const react_1 = require("react");
+const calendar_style_1 = require("./calendar.style");
+const flex_1 = require("../flex");
+const panelYear_1 = require("./panelYear");
+const panelMonth_1 = require("./panelMonth");
+const Calendar = ({ viewLevel = 'date', showToday = true, size = 'medium', defaultValue = null, min, max, disabledDates, value, onChange, _defaultNull, ...props }) => {
+    const [innerValue, setInnerValue] = (0, utils_1.useControlled)(defaultValue, value, onChange);
+    const [viewType, setViewType] = (0, react_1.useState)(viewLevel);
+    const [innerD, setInnerD] = (0, react_1.useState)(() => innerValue.current ?? (0, dayjs_1.default)().startOf('date'));
+    const commonProps = {
+        value: innerValue.current,
+        setValue: setInnerValue,
+        innerD,
+        setInnerD,
+        setViewType,
+        min,
+        max,
+        disabledDates,
+        onSelected: (newValue) => {
+            if (viewLevel === 'date') {
+                setViewType('date');
+            }
+            else {
+                // 视图等级不为`date`时，选中年或月即完成
+                setInnerValue(newValue);
+            }
+        },
+        showToday,
+        _defaultNull
+    };
+    const renderPanel = () => {
+        switch (viewType) {
+            case 'date':
+                return (0, jsx_runtime_1.jsx)(panelDates_1.PanelDates, { ...commonProps });
+            case 'month':
+                return (0, jsx_runtime_1.jsx)(panelMonth_1.PanelMonth, { ...commonProps });
+            default:
+                return (0, jsx_runtime_1.jsx)(panelYear_1.PanelYear, { ...commonProps });
+        }
+    };
+    return ((0, jsx_runtime_1.jsx)(flex_1.Flex, { inline: true, direction: "column", ...props, css: calendar_style_1.style, className: (0, utils_1.clsx)(calendar_style_1.classes.root, props.className), "data-size": size, children: renderPanel() }));
+};
+exports.Calendar = Calendar;

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

@@ -0,0 +1,15 @@
+export declare const classes: {
+    body: string;
+    head: string;
+    headSide: string;
+    headControl: string;
+    headCenter: string;
+    headButton: string;
+    dateItem: string;
+    monthItem: string;
+    yearItem: string;
+    foot: string;
+} & {
+    root: string;
+};
+export declare const style: () => import("@emotion/react").SerializedStyles;

package/dist/cjs/components/{dateTimePicker → calendar}/calendar.style.js

@@ -5,99 +5,139 @@ const react_1 = require("@emotion/react");
 const utils_1 = require("../../utils");
 const menuItem_style_1 = require("../menuItem/menuItem.style");
 exports.classes = (0, utils_1.defineInnerClasses)('calendar', [
-    'calendarHead',
-    'calendarHeadSide',
-    'calendarHeadControl',
-    'calendarHeadCenter',
-    'calendarHeadButton',
-    'calendarBody',
+    'head',
+    'headSide',
+    'headControl',
+    'headCenter',
+    'headButton',
+    'body',
     'dateItem',
     'monthItem',
     'yearItem',
-    'calendarFoot'
+    'foot'
 ]);
-exports.style = (0, utils_1.defineCss)(({ divider, text, spacing }) => (0, react_1.css) `
-    .${exports.classes.calendarHead} {
-        height: 40px;
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        border-bottom: 1px solid ${divider};
-        padding: 0 ${menuItem_style_1.menuListPadding}px;
-        position: relative;
-
-        .${exports.classes.calendarHeadSide} {
-            z-index: 1;
-        }
-
-        .${exports.classes.calendarHeadControl} {
-            color: ${text.placeholder};
-        }
-
-        .${exports.classes.calendarHeadCenter} {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            position: absolute;
-            inset: 0;
-
-            .${exports.classes.calendarHeadButton} {
-                font-weight: bold;
-                color: ${text.primary};
-            }
-        }
-    }
-
-    .${exports.classes.calendarBody} {
-        padding: ${spacing[3]}px ${spacing[4]}px;
-        display: grid;
-        place-items: center;
-
-        &[data-view-type=dates] {
-            font-size: ${13 / 14}em;
-            grid-template-columns: repeat(7, 36px);
-            grid-template-rows: repeat(7, 36px);
-
-            .${exports.classes.dateItem} {
-                width: 24px;
-                height: 24px;
-    
-                &:not([data-variant=filled]) {
-                    color: ${text.primary};
-                    border-color: ${text.disabled};
-    
-                    &[data-other-month=true] {
-                        color: ${text.placeholder};
-                    }
-                }
-
-                &:disabled {
-                    width: 100%;
-                    border-radius: 0;
-                }
-            }
-        }
-
-        &[data-view-type=months] {
-            grid-template-columns: repeat(3, 84px);
-            grid-template-rows: repeat(4, 63px);
-
-            .${exports.classes.monthItem},
-            .${exports.classes.yearItem} {
-                width: 72px;
-
-                &:not([data-variant=filled]) {
-                    color: ${text.primary};
-                }
-            }
-        }
-    }
-
-    .${exports.classes.calendarFoot} {
-        height: 41px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        border-top: 1px solid ${divider};
-    }
+exports.style = (0, utils_1.defineCss)(({ divider, text, spacing }) => (0, react_1.css) `
+    .${exports.classes.head} {
+        height: 40px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        border-bottom: 1px solid ${divider};
+        padding: 0 ${menuItem_style_1.menuListPadding}px;
+        position: relative;
+
+        .${exports.classes.headSide} {
+            z-index: 1;
+        }
+
+        .${exports.classes.headControl} {
+            color: ${text.placeholder};
+        }
+
+        .${exports.classes.headCenter} {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            position: absolute;
+            inset: 0;
+
+            .${exports.classes.headButton} {
+                font-weight: bold;
+                color: ${text.primary};
+            }
+        }
+    }
+
+    .${exports.classes.body} {
+        padding: ${spacing[3]}px ${spacing[4]}px;
+        display: grid;
+        place-items: center;
+
+        &[data-view-type=date] {
+            font-size: ${13 / 14}em;
+            grid-template-columns: repeat(7, 36px);
+            grid-template-rows: repeat(7, 36px);
+
+            .${exports.classes.dateItem} {
+                width: 24px;
+                height: 24px;
+    
+                &:not([data-variant=filled]) {
+                    color: ${text.primary};
+                    border-color: ${text.disabled};
+    
+                    &[data-other-month=true] {
+                        color: ${text.placeholder};
+                    }
+                }
+
+                &:disabled {
+                    width: 100%;
+                    border-radius: 0;
+                }
+            }
+        }
+
+        &[data-view-type=month], &[data-view-type=year] {
+            grid-template-columns: repeat(3, 84px);
+            grid-template-rows: repeat(4, 63px);
+
+            .${exports.classes.monthItem},
+            .${exports.classes.yearItem} {
+                width: 72px;
+                padding-inline: 0;
+
+                &:not([data-variant=filled]) {
+                    color: ${text.primary};
+                }
+            }
+        }
+    }
+    
+    &[data-size=small] {
+        .${exports.classes.body} {
+            &[data-view-type=date] {
+                grid-template-columns: repeat(7, 30px);
+                grid-template-rows: repeat(7, 30px);
+            }
+
+            &[data-view-type=month], &[data-view-type=year] {
+                grid-template-columns: repeat(3, 70px);
+                grid-template-rows: repeat(4, 52.5px);
+
+                .${exports.classes.monthItem},
+                .${exports.classes.yearItem} {
+                    width: 60px;
+                }
+            }
+        }
+    }
+
+    &[data-size=large] {
+        .${exports.classes.body} {
+            &[data-view-type=date] {
+                font-size: 1em;
+                grid-template-columns: repeat(7, 42px);
+                grid-template-rows: repeat(7, 42px);
+
+                .${exports.classes.dateItem} {
+                    width: 32px;
+                    height: 32px;
+                }
+            }
+
+            &[data-view-type=month], &[data-view-type=year] {
+                grid-template-columns: repeat(3, 98px);
+                grid-template-rows: repeat(4, 73.5px);
+            }
+        }
+    }
+
+    .${exports.classes.foot} {
+        height: 41px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-top: 1px solid ${divider};
+    }
 `);

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

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

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

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./calendar"), exports);

package/dist/cjs/components/calendar/panelDates.d.ts

@@ -0,0 +1,2 @@
+import { PanelProps } from './calendar';
+export declare const PanelDates: import("react").MemoExoticComponent<({ value, setValue, innerD, setInnerD, setViewType, min, max, disabledDates, showToday, _defaultNull }: PanelProps) => import("@emotion/react/jsx-runtime").JSX.Element>;

package/dist/cjs/components/{dateTimePicker/calendarDates.js → calendar/panelDates.js}

@@ -1,20 +1,18 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.CalendarDates = void 0;
+exports.PanelDates = void 0;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const react_1 = require("react");
-const calendar_style_1 = require("./calendar.style");
 const button_1 = require("../button");
-const tooltip_1 = require("../tooltip");
 const dayjs_1 = tslib_1.__importDefault(require("dayjs"));
-const calendar_style_2 = require("./calendar.style");
-const dateTimePicker_1 = require("./dateTimePicker");
-const __1 = require("../..");
+const tooltip_1 = require("../tooltip");
+const icon_1 = require("../icon");
 const faAnglesLeft_1 = require("@fortawesome/free-solid-svg-icons/faAnglesLeft");
 const faAngleLeft_1 = require("@fortawesome/free-solid-svg-icons/faAngleLeft");
 const faAngleRight_1 = require("@fortawesome/free-solid-svg-icons/faAngleRight");
 const faAnglesRight_1 = require("@fortawesome/free-solid-svg-icons/faAnglesRight");
+const calendar_style_1 = require("./calendar.style");
 const days = ['一', '二', '三', '四', '五', '六', '日'];
 const renderedDaysList = (() => {
     const ret = [];
@@ -28,7 +26,7 @@ const commonButtonProps = {
     size: 'small',
     color: 'text'
 };
-exports.CalendarDates = (0, react_1.memo)(({ defaultNull, value, onChange, innerD, setInnerD, setViewType }) => {
+exports.PanelDates = (0, react_1.memo)(({ value, setValue, innerD, setInnerD, setViewType, min, max, disabledDates, showToday, _defaultNull }) => {
     const today = (0, dayjs_1.default)();
     const prevMonth = () => {
         setInnerD(d => d.subtract(1, 'month'));
@@ -42,8 +40,7 @@ exports.CalendarDates = (0, react_1.memo)(({ defaultNull, value, onChange, inner
     const nextYear = () => {
         setInnerD(d => d.add(1, 'year'));
     };
-    const renderHeadControl = (icon, title, onClick) => ((0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { title: title, children: (0, jsx_runtime_1.jsx)(button_1.Button, { ...commonButtonProps, className: calendar_style_1.classes.calendarHeadControl, onClick: onClick, children: icon }) }));
-    const { min, max, disabledDates } = (0, dateTimePicker_1.useDateTimePickerContext)();
+    const renderHeadControl = (icon, title, onClick) => ((0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { title: title, children: (0, jsx_runtime_1.jsx)(button_1.Button, { ...commonButtonProps, className: calendar_style_1.classes.headControl, onClick: onClick, children: icon }) }));
     const isDisabled = (d) => {
         if (disabledDates && !disabledDates(d)) {
             return true;
@@ -51,10 +48,7 @@ exports.CalendarDates = (0, react_1.memo)(({ defaultNull, value, onChange, inner
         if (min && min.isAfter(d)) {
             return true;
         }
-        if (max && max.isBefore(d)) {
-            return true;
-        }
-        return false;
+        return max && max.isBefore(d);
     };
     const renderDates = () => {
         let startD = innerD.date(0);
@@ -66,17 +60,15 @@ exports.CalendarDates = (0, react_1.memo)(({ defaultNull, value, onChange, inner
                 : offset < 0 ? startD.subtract(-offset, 'days')
                     : startD;
             const isToday = _d.isSame(today, 'day');
-            const selected = _d.isSame(value, 'day');
+            const selected = !_defaultNull && _d.isSame(value, 'day');
             const isCurrentMonth = _d.isSame(innerD, 'month');
             const disabled = isDisabled(_d);
             ret.push((0, jsx_runtime_1.jsx)(button_1.Button, { className: calendar_style_1.classes.dateItem, size: "small", variant: disabled || selected ? 'filled'
                     : isToday ? 'outlined'
-                        : 'text', disabled: disabled, color: selected ? 'primary' : 'text', "data-other-month": !isCurrentMonth, onClick: () => {
-                    // 默认为空时，任何日期都可选中
-                    (!selected || defaultNull) && onChange(_d);
-                }, children: _d.date() }, i));
+                        : 'text', disabled: disabled, color: selected ? 'primary' : 'text', "data-other-month": !isCurrentMonth, onClick: () => !selected && setValue(_d), children: _d.date() }, i));
         }
         return ret;
     };
-    return ((0, jsx_runtime_1.jsxs)("div", { css: calendar_style_2.style, className: calendar_style_1.classes.root, children: [(0, jsx_runtime_1.jsxs)("div", { className: calendar_style_1.classes.calendarHead, children: [(0, jsx_runtime_1.jsxs)("div", { className: calendar_style_1.classes.calendarHeadSide, children: [renderHeadControl((0, jsx_runtime_1.jsx)(__1.Icon, { icon: faAnglesLeft_1.faAnglesLeft }), '上一年', prevYear), renderHeadControl((0, jsx_runtime_1.jsx)(__1.Icon, { icon: faAngleLeft_1.faAngleLeft }), '上一月', prevMonth)] }), (0, jsx_runtime_1.jsxs)("div", { className: calendar_style_1.classes.calendarHeadSide, children: [renderHeadControl((0, jsx_runtime_1.jsx)(__1.Icon, { icon: faAngleRight_1.faAngleRight }), '下一月', nextMonth), renderHeadControl((0, jsx_runtime_1.jsx)(__1.Icon, { icon: faAnglesRight_1.faAnglesRight }), '下一年', nextYear)] }), (0, jsx_runtime_1.jsxs)("div", { className: calendar_style_1.classes.calendarHeadCenter, children: [(0, jsx_runtime_1.jsxs)(button_1.Button, { ...commonButtonProps, className: calendar_style_1.classes.calendarHeadButton, onClick: () => setViewType('years'), children: [innerD.year(), "\u5E74"] }), (0, jsx_runtime_1.jsxs)(button_1.Button, { ...commonButtonProps, className: calendar_style_1.classes.calendarHeadButton, onClick: () => setViewType('months'), children: [(innerD.month() + 1).toString().padStart(2, '0'), "\u6708"] })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: calendar_style_1.classes.calendarBody, "data-view-type": "dates", children: [renderedDaysList, renderDates()] }), (0, jsx_runtime_1.jsx)("div", { className: calendar_style_1.classes.calendarFoot, children: (0, jsx_runtime_1.jsx)(button_1.Button, { variant: "text", onClick: () => onChange((0, dayjs_1.default)()), children: "\u56DE\u4ECA\u5929" }) })] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: calendar_style_1.classes.head, children: [(0, jsx_runtime_1.jsxs)("div", { className: calendar_style_1.classes.headSide, children: [renderHeadControl((0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faAnglesLeft_1.faAnglesLeft }), '上一年', prevYear), renderHeadControl((0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faAngleLeft_1.faAngleLeft }), '上一月', prevMonth)] }), (0, jsx_runtime_1.jsxs)("div", { className: calendar_style_1.classes.headSide, children: [renderHeadControl((0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faAngleRight_1.faAngleRight }), '下一月', nextMonth), renderHeadControl((0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faAnglesRight_1.faAnglesRight }), '下一年', nextYear)] }), (0, jsx_runtime_1.jsxs)("div", { className: calendar_style_1.classes.headCenter, children: [(0, jsx_runtime_1.jsxs)(button_1.Button, { ...commonButtonProps, className: calendar_style_1.classes.headButton, onClick: () => setViewType('year'), children: [innerD.year(), "\u5E74"] }), (0, jsx_runtime_1.jsxs)(button_1.Button, { ...commonButtonProps, className: calendar_style_1.classes.headButton, onClick: () => setViewType('month'), children: [(innerD.month() + 1).toString().padStart(2, '0'), "\u6708"] })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: calendar_style_1.classes.body, "data-view-type": "date", children: [renderedDaysList, renderDates()] }), showToday &&
+                (0, jsx_runtime_1.jsx)("div", { className: calendar_style_1.classes.foot, children: (0, jsx_runtime_1.jsx)(button_1.Button, { variant: "text", onClick: () => setValue((0, dayjs_1.default)()), children: "\u56DE\u4ECA\u5929" }) })] }));
 });

package/dist/cjs/components/calendar/panelMonth.d.ts

@@ -0,0 +1,2 @@
+import { PanelProps } from './calendar';
+export declare const PanelMonth: import("react").MemoExoticComponent<({ innerD, setInnerD, onSelected, min, max }: PanelProps) => import("@emotion/react/jsx-runtime").JSX.Element>;

package/dist/cjs/components/calendar/panelMonth.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PanelMonth = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("react");
+const calendar_style_1 = require("./calendar.style");
+const button_1 = require("../button");
+exports.PanelMonth = (0, react_1.memo)(({ innerD, setInnerD, onSelected, min, max }) => {
+    const currentMonth = innerD.month();
+    const clickHandler = (d, i) => {
+        currentMonth !== i && setInnerD(d);
+        onSelected(d);
+    };
+    const isDisabled = (d) => {
+        if (min && min.isAfter(d)) {
+            return true;
+        }
+        return max && max.isBefore(d);
+    };
+    const renderButtons = () => {
+        const ret = [];
+        for (let i = 0; i < 12; i++) {
+            const d = innerD.month(i);
+            ret.push((0, jsx_runtime_1.jsxs)(button_1.Button, { className: calendar_style_1.classes.monthItem, variant: currentMonth === i ? 'filled' : 'text', size: "large", color: currentMonth === i ? 'primary' : 'text', disabled: isDisabled(d), onClick: () => clickHandler(d, i), children: [i + 1, "\u6708"] }, i));
+        }
+        return ret;
+    };
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: calendar_style_1.classes.head, children: (0, jsx_runtime_1.jsx)("div", { className: calendar_style_1.classes.headCenter, children: "\u6708\u4EFD" }) }), (0, jsx_runtime_1.jsx)("div", { className: calendar_style_1.classes.body, "data-view-type": "month", children: renderButtons() })] }));
+});

package/dist/cjs/components/calendar/panelYear.d.ts

@@ -0,0 +1,2 @@
+import { PanelProps } from './calendar';
+export declare const PanelYear: import("react").MemoExoticComponent<({ innerD, setInnerD, onSelected, min, max }: PanelProps) => import("@emotion/react/jsx-runtime").JSX.Element>;

package/dist/cjs/components/calendar/panelYear.js

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PanelYear = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("react");
+const calendar_style_1 = require("./calendar.style");
+const button_1 = require("../button");
+const tooltip_1 = require("../tooltip");
+const __1 = require("../..");
+const faAngleLeft_1 = require("@fortawesome/free-solid-svg-icons/faAngleLeft");
+const faAngleRight_1 = require("@fortawesome/free-solid-svg-icons/faAngleRight");
+exports.PanelYear = (0, react_1.memo)(({ innerD, setInnerD, onSelected, min, max }) => {
+    const currentYear = innerD.year();
+    const clickHandler = (d, yearNum) => {
+        currentYear !== yearNum && setInnerD(d);
+        onSelected(d);
+    };
+    const [page, setPage] = (0, react_1.useState)(() => Math.floor(currentYear / 12));
+    const renderHeadControl = (icon, title, onClick) => ((0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { title: title, children: (0, jsx_runtime_1.jsx)(button_1.Button, { className: calendar_style_1.classes.headControl, variant: "text", size: "small", color: "text", onClick: onClick, children: icon }) }));
+    const isDisabled = (d) => {
+        if (min && min.isAfter(d)) {
+            return true;
+        }
+        return max && max.isBefore(d);
+    };
+    const renderButtons = () => {
+        const ret = [];
+        for (let i = 0; i < 12; i++) {
+            const yearNum = page * 12 + i + 1;
+            const d = innerD.year(yearNum);
+            ret.push((0, jsx_runtime_1.jsx)(button_1.Button, { className: calendar_style_1.classes.monthItem, variant: currentYear === yearNum ? 'filled' : 'text', size: "large", color: currentYear === yearNum ? 'primary' : 'text', disabled: isDisabled(d), onClick: () => clickHandler(d, yearNum), children: yearNum }, i));
+        }
+        return ret;
+    };
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: calendar_style_1.classes.head, children: [(0, jsx_runtime_1.jsx)("div", { className: calendar_style_1.classes.headSide, children: renderHeadControl((0, jsx_runtime_1.jsx)(__1.Icon, { icon: faAngleLeft_1.faAngleLeft }), '上一页', () => setPage(p => p - 1)) }), (0, jsx_runtime_1.jsx)("div", { className: calendar_style_1.classes.headSide, children: renderHeadControl((0, jsx_runtime_1.jsx)(__1.Icon, { icon: faAngleRight_1.faAngleRight }), '下一页', () => setPage(p => p + 1)) }), (0, jsx_runtime_1.jsx)("div", { className: calendar_style_1.classes.headCenter, children: "\u5E74\u4EFD" })] }), (0, jsx_runtime_1.jsx)("div", { className: calendar_style_1.classes.body, "data-view-type": "year", children: renderButtons() })] }));
+});

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

@@ -19,12 +19,12 @@ exports.CheckboxBase = (0, react_1.memo)(({ inputProps, _type, size, color, labe
     const checkboxRef = (0, react_1.useRef)(null);
     const innerInputRef = (0, react_1.useRef)(null);
     const [innerChecked, setInnerChecked] = (0, utils_1.useControlled)(defaultChecked, checked);
-    const showRipple = (0, utils_1.useTouchRipple)(color);
+    const showSpread = (0, utils_1.useTouchSpread)(color);
     const clickHandler = (e) => {
         if (disabled || readOnly) {
             return;
         }
-        showRipple(checkboxRef.current);
+        showSpread(checkboxRef.current);
         const newChecked = innerInputRef.current.checked = !innerChecked.current;
         e.target = e.currentTarget = innerInputRef.current;
         props.onClick?.(e);

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

@@ -27,10 +27,10 @@ function BlockItem({ color, onClick, selected }) {
         hex: color.hex(),
         alpha: color.alpha()
     }), [color]);
-    const showRipple = (0, utils_1.useTouchRipple)(light ? 'text.disabled' : colorObject.hex);
+    const showSpread = (0, utils_1.useTouchSpread)(light ? 'text.disabled' : colorObject.hex);
     return ((0, jsx_runtime_1.jsx)("div", { className: colorPicker_style_1.classes.block, "data-selected": selected, "data-light": light, onClick: e => {
             onClick?.();
-            showRipple(e.currentTarget);
+            showSpread(e.currentTarget);
         }, children: (0, jsx_runtime_1.jsx)("div", { className: colorPicker_style_1.classes.blockColor, style: {
                 backgroundColor: colorObject.hex,
                 opacity: colorObject.alpha

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

@@ -52,7 +52,7 @@ exports.style = (0, utils_1.defineCss)(({ spacing, borderRadius, divider, backgr
             &:after {
                 content: '';
                 position: absolute;
-                inset: 3px;
+                inset: 4px;
                 border-radius: inherit;
                 border: 2px solid #ffffff;
             }

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

@@ -5,7 +5,6 @@ import { Dayjs } from 'dayjs';
 export type DatePickerSharedProps = {
     min?: Dayjs;
     max?: Dayjs;
-    disabledDates?: (date: Dayjs) => any;
     disabledHours?: (date: Dayjs, hours: number) => any;
     disabledMinutes?: (date: Dayjs, minutes: number) => any;
     disabledSeconds?: (date: Dayjs, seconds: number) => any;
@@ -21,6 +20,7 @@ export interface DateTimePickerProps extends DatePickerSharedProps, Omit<InputBa
     defaultValue?: Dayjs | null;
     value?: Dayjs | null;
     onChange?(value: Dayjs | null): void;
+    disabledDates?: (date: Dayjs) => any;
 }
 export declare function useDateTimePickerContext(): DatePickerSharedProps;
 export declare const DateTimePicker: React.MemoExoticComponent<({ inputProps, popperProps, min, max, disabledDates, disabledHours, disabledMinutes, disabledSeconds, format, defaultValue, value, onChange, defaultOpen, open, onOpenChange, autoClose, ...props }: DateTimePickerProps) => import("@emotion/react/jsx-runtime").JSX.Element>;