@canlooks/can-ui 0.0.45 → 0.0.47

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

@@ -2,99 +2,139 @@ import { css } from '@emotion/react';
 import { defineInnerClasses, defineCss } from '../../utils';
 import { menuListPadding } from '../menuItem/menuItem.style';
 export const classes = defineInnerClasses('calendar', [
-    'calendarHead',
-    'calendarHeadSide',
-    'calendarHeadControl',
-    'calendarHeadCenter',
-    'calendarHeadButton',
-    'calendarBody',
+    'head',
+    'headSide',
+    'headControl',
+    'headCenter',
+    'headButton',
+    'body',
     'dateItem',
     'monthItem',
     'yearItem',
-    'calendarFoot'
+    'foot'
 ]);
-export const style = defineCss(({ divider, text, spacing }) => css `
-    .${classes.calendarHead} {
-        height: 40px;
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        border-bottom: 1px solid ${divider};
-        padding: 0 ${menuListPadding}px;
-        position: relative;
-
-        .${classes.calendarHeadSide} {
-            z-index: 1;
-        }
-
-        .${classes.calendarHeadControl} {
-            color: ${text.placeholder};
-        }
-
-        .${classes.calendarHeadCenter} {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            position: absolute;
-            inset: 0;
-
-            .${classes.calendarHeadButton} {
-                font-weight: bold;
-                color: ${text.primary};
-            }
-        }
-    }
-
-    .${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);
-
-            .${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);
-
-            .${classes.monthItem},
-            .${classes.yearItem} {
-                width: 72px;
-
-                &:not([data-variant=filled]) {
-                    color: ${text.primary};
-                }
-            }
-        }
-    }
-
-    .${classes.calendarFoot} {
-        height: 41px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        border-top: 1px solid ${divider};
-    }
+export const style = defineCss(({ divider, text, spacing }) => css `
+    .${classes.head} {
+        height: 40px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        border-bottom: 1px solid ${divider};
+        padding: 0 ${menuListPadding}px;
+        position: relative;
+
+        .${classes.headSide} {
+            z-index: 1;
+        }
+
+        .${classes.headControl} {
+            color: ${text.placeholder};
+        }
+
+        .${classes.headCenter} {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            position: absolute;
+            inset: 0;
+
+            .${classes.headButton} {
+                font-weight: bold;
+                color: ${text.primary};
+            }
+        }
+    }
+
+    .${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);
+
+            .${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);
+
+            .${classes.monthItem},
+            .${classes.yearItem} {
+                width: 72px;
+                padding-inline: 0;
+
+                &:not([data-variant=filled]) {
+                    color: ${text.primary};
+                }
+            }
+        }
+    }
+    
+    &[data-size=small] {
+        .${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);
+
+                .${classes.monthItem},
+                .${classes.yearItem} {
+                    width: 60px;
+                }
+            }
+        }
+    }
+
+    &[data-size=large] {
+        .${classes.body} {
+            &[data-view-type=date] {
+                font-size: 1em;
+                grid-template-columns: repeat(7, 42px);
+                grid-template-rows: repeat(7, 42px);
+
+                .${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);
+            }
+        }
+    }
+
+    .${classes.foot} {
+        height: 41px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-top: 1px solid ${divider};
+    }
 `);

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

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

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

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

package/dist/esm/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/esm/components/{dateTimePicker/calendarDates.js → calendar/panelDates.js}

@@ -1,16 +1,14 @@
-import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@emotion/react/jsx-runtime";
 import { memo } from 'react';
-import { classes } from './calendar.style';
 import { Button } from '../button';
-import { Tooltip } from '../tooltip';
 import dayjs from 'dayjs';
-import { style } from './calendar.style';
-import { useDateTimePickerContext } from './dateTimePicker';
-import { Icon } from '../..';
+import { Tooltip } from '../tooltip';
+import { Icon } from '../icon';
 import { faAnglesLeft } from '@fortawesome/free-solid-svg-icons/faAnglesLeft';
 import { faAngleLeft } from '@fortawesome/free-solid-svg-icons/faAngleLeft';
 import { faAngleRight } from '@fortawesome/free-solid-svg-icons/faAngleRight';
 import { faAnglesRight } from '@fortawesome/free-solid-svg-icons/faAnglesRight';
+import { classes } from './calendar.style';
 const days = ['一', '二', '三', '四', '五', '六', '日'];
 const renderedDaysList = (() => {
     const ret = [];
@@ -24,7 +22,7 @@ const commonButtonProps = {
     size: 'small',
     color: 'text'
 };
-export const CalendarDates = memo(({ defaultNull, value, onChange, innerD, setInnerD, setViewType }) => {
+export const PanelDates = memo(({ value, setValue, innerD, setInnerD, setViewType, min, max, disabledDates, showToday, _defaultNull }) => {
     const today = dayjs();
     const prevMonth = () => {
         setInnerD(d => d.subtract(1, 'month'));
@@ -38,8 +36,7 @@ export const CalendarDates = memo(({ defaultNull, value, onChange, innerD, setIn
     const nextYear = () => {
         setInnerD(d => d.add(1, 'year'));
     };
-    const renderHeadControl = (icon, title, onClick) => (_jsx(Tooltip, { title: title, children: _jsx(Button, { ...commonButtonProps, className: classes.calendarHeadControl, onClick: onClick, children: icon }) }));
-    const { min, max, disabledDates } = useDateTimePickerContext();
+    const renderHeadControl = (icon, title, onClick) => (_jsx(Tooltip, { title: title, children: _jsx(Button, { ...commonButtonProps, className: classes.headControl, onClick: onClick, children: icon }) }));
     const isDisabled = (d) => {
         if (disabledDates && !disabledDates(d)) {
             return true;
@@ -47,10 +44,7 @@ export const CalendarDates = memo(({ defaultNull, value, onChange, innerD, setIn
         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);
@@ -62,17 +56,15 @@ export const CalendarDates = memo(({ defaultNull, value, onChange, innerD, setIn
                 : 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(_jsx(Button, { className: 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 (_jsxs("div", { css: style, className: classes.root, children: [_jsxs("div", { className: classes.calendarHead, children: [_jsxs("div", { className: classes.calendarHeadSide, children: [renderHeadControl(_jsx(Icon, { icon: faAnglesLeft }), '上一年', prevYear), renderHeadControl(_jsx(Icon, { icon: faAngleLeft }), '上一月', prevMonth)] }), _jsxs("div", { className: classes.calendarHeadSide, children: [renderHeadControl(_jsx(Icon, { icon: faAngleRight }), '下一月', nextMonth), renderHeadControl(_jsx(Icon, { icon: faAnglesRight }), '下一年', nextYear)] }), _jsxs("div", { className: classes.calendarHeadCenter, children: [_jsxs(Button, { ...commonButtonProps, className: classes.calendarHeadButton, onClick: () => setViewType('years'), children: [innerD.year(), "\u5E74"] }), _jsxs(Button, { ...commonButtonProps, className: classes.calendarHeadButton, onClick: () => setViewType('months'), children: [(innerD.month() + 1).toString().padStart(2, '0'), "\u6708"] })] })] }), _jsxs("div", { className: classes.calendarBody, "data-view-type": "dates", children: [renderedDaysList, renderDates()] }), _jsx("div", { className: classes.calendarFoot, children: _jsx(Button, { variant: "text", onClick: () => onChange(dayjs()), children: "\u56DE\u4ECA\u5929" }) })] }));
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: classes.head, children: [_jsxs("div", { className: classes.headSide, children: [renderHeadControl(_jsx(Icon, { icon: faAnglesLeft }), '上一年', prevYear), renderHeadControl(_jsx(Icon, { icon: faAngleLeft }), '上一月', prevMonth)] }), _jsxs("div", { className: classes.headSide, children: [renderHeadControl(_jsx(Icon, { icon: faAngleRight }), '下一月', nextMonth), renderHeadControl(_jsx(Icon, { icon: faAnglesRight }), '下一年', nextYear)] }), _jsxs("div", { className: classes.headCenter, children: [_jsxs(Button, { ...commonButtonProps, className: classes.headButton, onClick: () => setViewType('year'), children: [innerD.year(), "\u5E74"] }), _jsxs(Button, { ...commonButtonProps, className: classes.headButton, onClick: () => setViewType('month'), children: [(innerD.month() + 1).toString().padStart(2, '0'), "\u6708"] })] })] }), _jsxs("div", { className: classes.body, "data-view-type": "date", children: [renderedDaysList, renderDates()] }), showToday &&
+                _jsx("div", { className: classes.foot, children: _jsx(Button, { variant: "text", onClick: () => setValue(dayjs()), children: "\u56DE\u4ECA\u5929" }) })] }));
 });

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

@@ -0,0 +1,26 @@
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "@emotion/react/jsx-runtime";
+import { memo } from 'react';
+import { classes } from './calendar.style';
+import { Button } from '../button';
+export const PanelMonth = 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(_jsxs(Button, { className: 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 (_jsxs(_Fragment, { children: [_jsx("div", { className: classes.head, children: _jsx("div", { className: classes.headCenter, children: "\u6708\u4EFD" }) }), _jsx("div", { className: classes.body, "data-view-type": "month", children: renderButtons() })] }));
+});

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

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@emotion/react/jsx-runtime";
+import { memo, useState } from 'react';
+import { classes } from './calendar.style';
+import { Button } from '../button';
+import { Tooltip } from '../tooltip';
+import { Icon } from '../..';
+import { faAngleLeft } from '@fortawesome/free-solid-svg-icons/faAngleLeft';
+import { faAngleRight } from '@fortawesome/free-solid-svg-icons/faAngleRight';
+export const PanelYear = memo(({ innerD, setInnerD, onSelected, min, max }) => {
+    const currentYear = innerD.year();
+    const clickHandler = (d, yearNum) => {
+        currentYear !== yearNum && setInnerD(d);
+        onSelected(d);
+    };
+    const [page, setPage] = useState(() => Math.floor(currentYear / 12));
+    const renderHeadControl = (icon, title, onClick) => (_jsx(Tooltip, { title: title, children: _jsx(Button, { className: 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(_jsx(Button, { className: 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 (_jsxs(_Fragment, { children: [_jsxs("div", { className: classes.head, children: [_jsx("div", { className: classes.headSide, children: renderHeadControl(_jsx(Icon, { icon: faAngleLeft }), '上一页', () => setPage(p => p - 1)) }), _jsx("div", { className: classes.headSide, children: renderHeadControl(_jsx(Icon, { icon: faAngleRight }), '下一页', () => setPage(p => p + 1)) }), _jsx("div", { className: classes.headCenter, children: "\u5E74\u4EFD" })] }), _jsx("div", { className: classes.body, "data-view-type": "year", children: renderButtons() })] }));
+});

package/dist/esm/components/checkboxBase/checkboxBase.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { memo, useRef } from 'react';
-import { clsx, cloneRef, useControlled, useTouchRipple } from '../../utils';
+import { clsx, cloneRef, useControlled, useTouchSpread } from '../../utils';
 import { classes, useStyle } from './checkboxBase.style';
 import { useCheckboxBaseGroupContext } from '../checkboxBaseGroup';
 import { Icon } from '../..';
@@ -16,12 +16,12 @@ export const CheckboxBase = memo(({ inputProps, _type, size, color, label, value
     const checkboxRef = useRef(null);
     const innerInputRef = useRef(null);
     const [innerChecked, setInnerChecked] = useControlled(defaultChecked, checked);
-    const showRipple = useTouchRipple(color);
+    const showSpread = 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/esm/components/colorPicker/colorPicker.js

@@ -3,7 +3,7 @@ import { memo, useMemo } from 'react';
 import { Popper } from '../popper';
 import { InputBase } from '../inputBase';
 import { classes, colorPickerPopperStyle, style } from './colorPicker.style';
-import { clsx, cloneRef, colorTransfer, useControlled, useTouchRipple } from '../../utils';
+import { clsx, cloneRef, colorTransfer, useControlled, useTouchSpread } from '../../utils';
 import { useTheme } from '../theme';
 import { Palette } from '../palette';
 import Color from 'color';
@@ -23,10 +23,10 @@ function BlockItem({ color, onClick, selected }) {
         hex: color.hex(),
         alpha: color.alpha()
     }), [color]);
-    const showRipple = useTouchRipple(light ? 'text.disabled' : colorObject.hex);
+    const showSpread = useTouchSpread(light ? 'text.disabled' : colorObject.hex);
     return (_jsx("div", { className: classes.block, "data-selected": selected, "data-light": light, onClick: e => {
             onClick?.();
-            showRipple(e.currentTarget);
+            showSpread(e.currentTarget);
         }, children: _jsx("div", { className: classes.blockColor, style: {
                 backgroundColor: colorObject.hex,
                 opacity: colorObject.alpha

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

@@ -49,7 +49,7 @@ export const style = defineCss(({ spacing, borderRadius, divider, background })
             &:after {
                 content: '';
                 position: absolute;
-                inset: 3px;
+                inset: 4px;
                 border-radius: inherit;
                 border: 2px solid #ffffff;
             }

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

package/dist/esm/components/dateTimePicker/dateTimePicker.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@emotion/react/jsx-runtime";
 import { createContext, memo, useContext, useEffect, useMemo, useRef } from 'react';
 import { Popper } from '../popper';
 import { InputBase } from '../inputBase';
@@ -6,7 +6,7 @@ import { clsx, cloneRef, useControlled } from '../../utils';
 import { classes, datePickerPopperStyle, style } from './dateTimePicker.style';
 import dayjs from 'dayjs';
 import customParseFormat from 'dayjs/plugin/customParseFormat';
-import { Calendar } from './calendar';
+import { Calendar } from '../calendar';
 import { Timer } from './timer';
 import { Icon } from '../..';
 import { faCalendar } from '@fortawesome/free-regular-svg-icons/faCalendar';
@@ -76,11 +76,11 @@ export const DateTimePicker = memo(({ inputProps, popperProps, min, max, disable
         }
         selectFn();
     };
-    const focusHandler = (e) => {
+    const focusHandler = () => {
         focused.current = true;
         selectFn();
     };
-    const blurHandler = (e) => {
+    const blurHandler = () => {
         resetContinue();
         focused.current = false;
         _setInnerOpen(false);
@@ -202,21 +202,18 @@ export const DateTimePicker = memo(({ inputProps, popperProps, min, max, disable
         input.setSelectionRange(nextRange.start, nextRange.end);
     };
     const contextValue = useMemo(() => ({
-        min, max, disabledDates,
-        disabledHours, disabledMinutes, disabledSeconds
+        min, max, disabledHours, disabledMinutes, disabledSeconds
     }), [
-        min, max, disabledDates,
-        disabledHours, disabledMinutes, disabledSeconds
+        min, max, disabledHours, disabledMinutes, disabledSeconds
     ]);
     const showCalendar = /[YMD]/.test(format);
     const showTimer = /[Hms]/.test(format);
     const _dateVal = dateValue.current || dayjs();
-    return (_jsx(Popper, { css: datePickerPopperStyle, open: innerOpen.current, placement: "bottomLeft", trigger: ['click', 'enter'], disabled: props.disabled || props.readOnly, content: _jsxs(DateTimePickerContext, { value: contextValue, children: [showCalendar &&
-                    _jsx(Calendar, { type: format.includes('D') ? 'dates'
-                            : format.includes('M') ? 'months'
-                                : format.includes('Y') ? 'years'
-                                    : 'dates', defaultNull: !dateValue.current, value: _dateVal, onChange: setDateValue }), showTimer &&
-                    _jsx(Timer, { showHours: format.includes('H'), showMinutes: format.includes('m'), showSeconds: format.includes('s'), value: _dateVal, onChange: setDateValue })] }), ...popperProps, onOpenChange: setInnerOpen, onPointerDown: e => {
+    return (_jsx(Popper, { css: datePickerPopperStyle, open: innerOpen.current, placement: "bottomLeft", trigger: ['click', 'enter'], disabled: props.disabled || props.readOnly, content: _jsxs(_Fragment, { children: [showCalendar &&
+                    _jsx(Calendar, { viewLevel: format.includes('D') ? 'date'
+                            : format.includes('M') ? 'month'
+                                : 'year', _defaultNull: !dateValue.current, value: _dateVal, onChange: setDateValue, min: min, max: max, disabledDates: disabledDates }), showTimer &&
+                    _jsx(DateTimePickerContext, { value: contextValue, children: _jsx(Timer, { showHours: format.includes('H'), showMinutes: format.includes('m'), showSeconds: format.includes('s'), value: _dateVal, onChange: setDateValue }) })] }), ...popperProps, onOpenChange: setInnerOpen, onPointerDown: e => {
             popperProps?.onPointerDown?.(e);
             e.preventDefault();
         }, children: _jsx(InputBase, { ...props, css: style, className: clsx(classes.root, props.className), "data-focused": innerOpen.current, value: dateValue.current, onClear: clearHandler, onSelect: selectHandler, onFocus: focusHandler, onBlur: blurHandler, onKeyDown: keydownHandler, children: ({ ref, value, onChange, ...rest }) => _jsxs("div", { className: classes.container, children: [_jsx("input", { ...rest, ...inputProps, ref: cloneRef(ref, inputProps?.ref, innerInputRef), className: clsx(classes.input, inputProps?.className) }), _jsx("div", { className: classes.dateTimeIcon, children: showTimer && !showCalendar

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

@@ -2,16 +2,16 @@ export declare const classes: {
     input: string;
     container: string;
     calendar: string;
+    dateItem: string;
+    inputGroup: string;
+    inputUnit: string;
+    dateTimeIcon: string;
     calendarHead: string;
     calendarHeadSide: string;
     calendarHeadControl: string;
     calendarHeadCenter: string;
     calendarHeadButton: string;
     calendarBody: string;
-    dateItem: string;
-    inputGroup: string;
-    inputUnit: string;
-    dateTimeIcon: string;
     calendarDays: string;
 } & {
     root: string;

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

@@ -1,7 +1,7 @@
 import { css } from '@emotion/react';
 import { defineInnerClasses, defineCss } from '../../utils';
 import { commonNativeInputStyle } from '../input/input.style';
-import { classes as calendarClasses } from './calendar.style';
+import { classes as calendarClasses } from '../calendar/calendar.style';
 import { classes as timerClasses } from './timer.style';
 import { popperStyleCallback } from '../popper/popper.style';
 export const classes = defineInnerClasses('date-time-picker', [

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

@@ -1,3 +1,3 @@
-export * from './calendar';
+export * from '../calendar/calendar';
 export * from './dateTimePicker';
 export * from './timer';

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

@@ -1,3 +1,3 @@
-export * from './calendar';
+export * from '../calendar/calendar';
 export * from './dateTimePicker';
 export * from './timer';

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

@@ -15,6 +15,7 @@ export interface DateTimeRangePickerProps extends DatePickerSharedProps, Omit<Di
     onOpenPickerChange?(openPicker?: 'start' | 'end' | 'closed'): void;
     autoClose?: boolean;
     separator?: ReactNode;
+    disabledDates?: (date: Dayjs) => any;
     variant?: 'outlined' | 'underlined' | 'plain';
     size?: Size;
     color?: ColorPropsValue;

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

@@ -0,0 +1,6 @@
+import { FontAwesomeIconProps } from '@fortawesome/react-fontawesome';
+import { ColorPropsValue } from '../../types';
+export interface IconProps extends Omit<FontAwesomeIconProps, 'color'> {
+    color?: ColorPropsValue;
+}
+export declare function Icon({ color, ...props }: IconProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/esm/components/icon/icon.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { useColor } from '../../utils';
+export function Icon({ color, ...props }) {
+    return _jsx(FontAwesomeIcon, { ...props, color: useColor(color) });
+}

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

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

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

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

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

@@ -23,6 +23,7 @@ export function useStyle({ color }) {
         const c = Color(colorValue);
         const selectedBg = c.alpha(.1).string();
         const selectedAndFocused = c.alpha(.15).string();
+        const selectedActive = c.alpha(.08).string();
         const focusedBg = gray(mode === 'light' ? .05 : .23);
         const disabledOrActive = gray(mode === 'light' ? .1 : .17);
         return css `
@@ -33,6 +34,7 @@ export function useStyle({ color }) {
             cursor: pointer;
             color: ${text.primary};
             padding: ${paddingHorizontal.medium}px 12px;
+            position: relative;
             -webkit-tap-highlight-color: transparent;
             
             &[data-size=small] {
@@ -47,8 +49,7 @@ export function useStyle({ color }) {
         
             transition: background-color .25s ${easing.easeOut};
         
-            &:hover,
-            &[data-focused=true] {
+            &:hover, &[data-focused=true] {
                 background-color: ${focusedBg};
             }
 
@@ -64,7 +65,7 @@ export function useStyle({ color }) {
             &[data-selected=true] {
                 background-color: ${selectedBg};
 
-                &[data-focused=true] {
+                &:hover, &[data-focused=true] {
                     background-color: ${selectedAndFocused};
                 }
 
@@ -72,6 +73,10 @@ export function useStyle({ color }) {
                     font-weight: bold;
                     color: ${colorValue};
                 }
+                
+                &:active {
+                    background-color: ${selectedActive};
+                }
             }
 
             &[data-disabled=true] {