@canlooks/can-ui 0.0.1

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

@@ -0,0 +1,18 @@
+import { DIVProps } from '../../../types';
+import { Dayjs } from 'dayjs';
+import { Dispatch, SetStateAction } from 'react';
+type SharedCalendarProps = {
+    defautNull: boolean;
+    value: Dayjs;
+    onChange(value: Dayjs): void;
+};
+export interface CalendarProps extends SharedCalendarProps, Omit<DIVProps, 'onChange'> {
+    type: 'dates' | 'months' | 'years';
+}
+export interface CommonCalendarProps extends SharedCalendarProps {
+    innerD: Dayjs;
+    setInnerD: Dispatch<SetStateAction<Dayjs>>;
+    setViewType(type: CalendarProps['type']): void;
+}
+export declare const Calendar: ({ type, ...props }: CalendarProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { CalendarDates } from './calendarDates';
+import { useDerivedState } from '../../utils';
+import { CalendarMonths } from './calendarMonths';
+import { usePopperContext } from '../popper';
+import { CalendarYears } from './calendarYears';
+export const Calendar = ({ type, ...props }) => {
+    const { open } = usePopperContext();
+    const [viewType, setViewType] = useDerivedState(prevType => open ? type : prevType, [open, type]);
+    const [innerD, setInnerD] = useDerivedState(props.value);
+    const commonProps = {
+        ...props,
+        setViewType,
+        innerD: innerD.current,
+        setInnerD
+    };
+    switch (viewType.current) {
+        case 'dates':
+            return _jsx(CalendarDates, { ...commonProps });
+        case 'months':
+            return _jsx(CalendarMonths, { ...commonProps });
+        default:
+            return _jsx(CalendarYears, { ...commonProps });
+    }
+};

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

@@ -0,0 +1,15 @@
+export declare const classes: {
+    calendarHead: string;
+    calendarHeadSide: string;
+    calendarHeadControl: string;
+    calendarHeadCenter: string;
+    calendarHeadButton: string;
+    calendarBody: string;
+    dateItem: string;
+    monthItem: string;
+    yearItem: string;
+    calendarFoot: string;
+} & {
+    root: string;
+};
+export declare const style: () => import("@emotion/react").SerializedStyles;

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

@@ -0,0 +1,100 @@
+import { css } from '@emotion/react';
+import { defineClasses, defineCss } from '../../utils';
+import { menuListPadding } from '../menuItem/menuItem.style';
+export const classes = defineClasses('calendar', [
+    'calendarHead',
+    'calendarHeadSide',
+    'calendarHeadControl',
+    'calendarHeadCenter',
+    'calendarHeadButton',
+    'calendarBody',
+    'dateItem',
+    'monthItem',
+    'yearItem',
+    'calendarFoot'
+]);
+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};
+    }
+`);

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

@@ -0,0 +1,2 @@
+import { CommonCalendarProps } from './calendar';
+export declare const CalendarDates: import("react").MemoExoticComponent<({ defautNull, value, onChange, innerD, setInnerD, setViewType }: CommonCalendarProps) => import("@emotion/react/jsx-runtime").JSX.Element>;

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

@@ -0,0 +1,74 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { memo } from 'react';
+import { classes } from './calendar.style';
+import { Button } from '../button';
+import { DoubleLeftOutlined, DoubleRightOutlined, LeftOutlined, RightOutlined } from '@ant-design/icons';
+import { Tooltip } from '../tooltip';
+import dayjs from 'dayjs';
+import { style } from './calendar.style';
+import { useDateTimePickerContext } from './dateTimePicker';
+const days = ['一', '二', '三', '四', '五', '六', '日'];
+const renderedDaysList = (() => {
+    const ret = [];
+    for (let i = 0; i < 7; i++) {
+        ret.push(_jsx("div", { children: days[i] }, i));
+    }
+    return ret;
+})();
+const commonButtonProps = {
+    variant: 'text',
+    size: 'small',
+    color: 'text'
+};
+export const CalendarDates = memo(({ defautNull, value, onChange, innerD, setInnerD, setViewType }) => {
+    const today = dayjs();
+    const prevMonth = () => {
+        setInnerD(d => d.subtract(1, 'month'));
+    };
+    const nextMonth = () => {
+        setInnerD(d => d.add(1, 'month'));
+    };
+    const prevYear = () => {
+        setInnerD(d => d.subtract(1, 'year'));
+    };
+    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 isDisabled = (d) => {
+        if (disabledDates && !disabledDates(d)) {
+            return true;
+        }
+        if (min && min.isAfter(d)) {
+            return true;
+        }
+        if (max && max.isBefore(d)) {
+            return true;
+        }
+        return false;
+    };
+    const renderDates = () => {
+        let startD = innerD.date(0);
+        const startDay = startD.day();
+        const ret = [];
+        for (let i = 0; i < 42; i++) {
+            const offset = i - startDay + 1;
+            const _d = offset > 0 ? startD.add(offset, 'days')
+                : offset < 0 ? startD.subtract(-offset, 'days')
+                    : startD;
+            const isToday = _d.isSame(today, 'day');
+            const selected = _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 || defautNull) && onChange(_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(DoubleLeftOutlined, {}), '上一年', prevYear), renderHeadControl(_jsx(LeftOutlined, {}), '上一月', prevMonth)] }), _jsxs("div", { className: classes.calendarHeadSide, children: [renderHeadControl(_jsx(RightOutlined, {}), '下一月', nextMonth), renderHeadControl(_jsx(DoubleRightOutlined, {}), '下一年', 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" }) })] }));
+});

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

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

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

@@ -0,0 +1,19 @@
+import { jsxs as _jsxs, jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { memo } from 'react';
+import { classes, style } from './calendar.style';
+import { Button } from '../button';
+export const CalendarMonths = memo(({ innerD, setInnerD, setViewType }) => {
+    const currentMonth = innerD.month();
+    const clickHandler = (month) => {
+        currentMonth !== month && setInnerD(d => d.month(month));
+        setViewType('dates');
+    };
+    const renderButtons = () => {
+        const ret = [];
+        for (let i = 0; i < 12; i++) {
+            ret.push(_jsxs(Button, { className: classes.monthItem, variant: currentMonth === i ? 'filled' : 'text', size: "large", color: currentMonth === i ? 'primary' : 'text', onClick: () => clickHandler(i), children: [i + 1, "\u6708"] }, i));
+        }
+        return ret;
+    };
+    return (_jsxs("div", { css: style, className: classes.root, children: [_jsx("div", { className: classes.calendarHead, children: _jsx("div", { className: classes.calendarHeadCenter, children: "\u6708\u4EFD" }) }), _jsx("div", { className: classes.calendarBody, "data-view-type": "months", children: renderButtons() })] }));
+});

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

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

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

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { memo, useState } from 'react';
+import { classes, style } from './calendar.style';
+import { Button } from '../button';
+import { Tooltip } from '../tooltip';
+import { LeftOutlined, RightOutlined } from '@ant-design/icons';
+export const CalendarYears = memo(({ innerD, setInnerD, setViewType }) => {
+    const currentYear = innerD.year();
+    const clickHandler = (year) => {
+        currentYear !== year && setInnerD(d => d.year(year));
+        setViewType('months');
+    };
+    const [page, setPage] = useState(() => Math.floor(currentYear / 12));
+    const renderHeadControl = (icon, title, onClick) => (_jsx(Tooltip, { title: title, children: _jsx(Button, { className: classes.calendarHeadControl, variant: "text", size: "small", color: "text", onClick: onClick, children: icon }) }));
+    const renderButtons = () => {
+        const ret = [];
+        for (let i = 0; i < 12; i++) {
+            const years = page * 12 + i + 1;
+            ret.push(_jsx(Button, { className: classes.monthItem, variant: currentYear === years ? 'filled' : 'text', size: "large", color: currentYear === years ? 'primary' : 'text', onClick: () => clickHandler(years), children: years }, i));
+        }
+        return ret;
+    };
+    return (_jsxs("div", { css: style, className: classes.root, children: [_jsxs("div", { className: classes.calendarHead, children: [_jsx("div", { className: classes.calendarHeadSide, children: renderHeadControl(_jsx(LeftOutlined, {}), '上一页', () => setPage(p => p - 1)) }), _jsx("div", { className: classes.calendarHeadSide, children: renderHeadControl(_jsx(RightOutlined, {}), '下一页', () => setPage(p => p + 1)) }), _jsx("div", { className: classes.calendarHeadCenter, children: "\u5E74\u4EFD" })] }), _jsx("div", { className: classes.calendarBody, "data-view-type": "months", children: renderButtons() })] }));
+});

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

@@ -0,0 +1,28 @@
+import { Ref } from 'react';
+import { PopperProps, PopperRef } from '../popper';
+import { InputBaseProps } from '../inputBase';
+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;
+};
+export interface DateTimePickerProps extends DatePickerSharedProps, Omit<InputBaseProps<'input'>, 'children' | 'value' | 'defaultValue' | 'onChange' | 'min' | 'max'> {
+    inputProps?: JSX.IntrinsicElements['input'];
+    inputRef?: Ref<HTMLInputElement>;
+    popperProps?: PopperProps;
+    popperRef?: Ref<PopperRef>;
+    defaultOpen?: boolean;
+    open?: boolean;
+    onOpenChange?(open: boolean): void;
+    autoClose?: boolean;
+    format?: string;
+    defaultValue?: Dayjs | null;
+    value?: Dayjs | null;
+    onChange?(value: Dayjs | null): void;
+}
+export declare function useDateTimePickerContext(): DatePickerSharedProps;
+export declare const DateTimePicker: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Omit<DateTimePickerProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>>;

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

@@ -0,0 +1,223 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { createContext, forwardRef, memo, useContext, useEffect, useMemo, useRef } from 'react';
+import { Popper } from '../popper';
+import { InputBase } from '../inputBase';
+import { classnames, cloneRef, useControlled } from '../../utils';
+import { classes, datePickerPopperStyle, style } from './dateTimePicker.style';
+import dayjs from 'dayjs';
+import customParseFormat from 'dayjs/plugin/customParseFormat';
+import { CalendarOutlined, ClockCircleOutlined } from '@ant-design/icons';
+import { Calendar } from './calendar';
+import { Timer } from './timer';
+dayjs.extend(customParseFormat);
+const availableFormatTokens = ['Y', 'M', 'D', 'H', 'm', 's'];
+const dateTimePickerContext = createContext({});
+export function useDateTimePickerContext() {
+    return useContext(dateTimePickerContext);
+}
+export const DateTimePicker = memo(forwardRef(({ inputProps, inputRef, popperProps, popperRef, min, max, disabledDates, disabledHours, disabledMinutes, disabledSeconds, format = 'YYYY-MM-DD', defaultValue = null, value, onChange, defaultOpen = false, open, onOpenChange, autoClose = !/[Hms]/.test(format), ...props }, ref) => {
+    const innerInputRef = useRef(null);
+    const focused = useRef(false);
+    const [innerOpen, _setInnerOpen] = useControlled(defaultOpen, open, onOpenChange);
+    const setInnerOpen = (open) => {
+        popperProps?.onOpenChange?.(open);
+        // 如果仍聚焦在输入框，则不用关闭弹框
+        (open || !focused.current) && _setInnerOpen(open);
+    };
+    useEffect(() => {
+        if (!innerOpen.current && !dateValue.current) {
+            // 弹框关闭时没有选中日期，清空输入框
+            innerInputRef.current.value = '';
+        }
+    }, [innerOpen.current]);
+    const [dateValue, _setDateValue] = useControlled(defaultValue, value, onChange);
+    const setDateValue = (date) => {
+        _setDateValue(date);
+        autoClose && _setInnerOpen(false);
+    };
+    useEffect(() => {
+        innerInputRef.current.value = dateValue.current?.format(format) ?? format;
+    }, [dateValue.current]);
+    const clearHandler = () => {
+        setDateValue(null);
+        selectFn(innerInputRef.current);
+    };
+    const ranges = useMemo(() => {
+        const range = [];
+        format.length && availableFormatTokens.forEach(token => {
+            const matched = format.match(new RegExp(`${token}+`));
+            if (matched && typeof matched.index === 'number') {
+                range.push({
+                    token,
+                    start: matched.index,
+                    end: matched.index + matched[0].length
+                });
+            }
+        });
+        return range;
+    }, [format]);
+    const currentRange = useRef();
+    const selectFn = (input) => {
+        const { selectionStart } = input;
+        const range = ranges.find(({ end }) => (selectionStart || 0) <= end) || ranges[ranges.length - 1];
+        if (range) {
+            currentRange.current = range;
+            input.value ||= format;
+            input.setSelectionRange(range.start, range.end);
+        }
+    };
+    const selectHandler = (e) => {
+        if (e.nativeEvent.type === 'selectionchange' || !ranges.length) {
+            // setSelectionRange()方法也会触发该回调，通过nativeEvent.type排除
+            return;
+        }
+        selectFn(e.target);
+    };
+    const focusHandler = (e) => {
+        focused.current = true;
+        selectFn(e.target);
+    };
+    const blurHandler = (e) => {
+        if (!dateValue.current && !innerOpen.current) {
+            e.target.value = '';
+        }
+        resetContinue();
+        focused.current = false;
+        _setInnerOpen(false);
+    };
+    const valueContinueHelper = useRef({ token: '', value: '' });
+    const resetContinue = () => {
+        valueContinueHelper.current = { token: '', value: '' };
+    };
+    const keydownHandler = (e) => {
+        if (!currentRange.current) {
+            return;
+        }
+        const { key } = e;
+        const input = e.target;
+        const { token, start, end } = currentRange.current;
+        if (/^\d$/.test(e.key)) {
+            // 数字键
+            e.preventDefault();
+            let continuedValue;
+            if (valueContinueHelper.current.token === token) {
+                continuedValue = valueContinueHelper.current.value += key;
+            }
+            else {
+                valueContinueHelper.current = { token, value: key };
+                continuedValue = key;
+            }
+            input.value = `${input.value.slice(0, start)}${continuedValue.padStart(end - start, '0')}${input.value.slice(end)}`;
+            input.setSelectionRange(start, end);
+            const d = dayjs(input.value, format);
+            d.isValid() && _setDateValue(d);
+            // 当长度达到，或者数值超过，将会跳转下一个range
+            if (token === 'Y') {
+                if (continuedValue.length === 4) {
+                    return selectNext(input);
+                }
+            }
+            else if (continuedValue.length === 2) {
+                return selectNext(input);
+            }
+            switch (token) {
+                case 'M':
+                    if (+key > 1) {
+                        return selectNext(input);
+                    }
+                case 'D':
+                    if (+key > 3) {
+                        return selectNext(input);
+                    }
+                default:
+                    // 'H' | 'm' | 's'
+                    if (+key > 5) {
+                        return selectNext(input);
+                    }
+            }
+        }
+        switch (key) {
+            case 'Backspace':
+            case 'Delete':
+            case 'ArrowLeft':
+            case 'ArrowRight':
+            case 'ArrowUp':
+            case 'ArrowDown':
+            case 'Escape':
+                e.preventDefault();
+                resetContinue();
+        }
+        switch (key) {
+            case 'Backspace':
+            case 'Delete':
+                input.value = `${input.value.slice(0, start)}${format.slice(start, end)}${input.value.slice(end)}`;
+                input.setSelectionRange(start, end);
+                _setDateValue(null);
+                break;
+            case 'ArrowLeft':
+                const prevRange = ranges[ranges.indexOf(currentRange.current) - 1] || ranges[0];
+                currentRange.current = prevRange;
+                input.setSelectionRange(prevRange.start, prevRange.end);
+                break;
+            case 'ArrowRight':
+                selectNext(input);
+                break;
+            case 'ArrowUp':
+            case 'ArrowDown':
+                let valueFragment = +input.value.slice(start, end);
+                if (isNaN(valueFragment)) {
+                    valueFragment = 0;
+                }
+                key === 'ArrowUp' ? valueFragment++ : valueFragment--;
+                switch (token) {
+                    case 'Y':
+                        break;
+                    case 'M':
+                        valueFragment >= 13 ? valueFragment = 1
+                            : valueFragment <= 0 && (valueFragment = 12);
+                        break;
+                    case 'D':
+                        valueFragment >= 32 ? valueFragment = 1
+                            : valueFragment <= 0 && (valueFragment = 31);
+                        break;
+                    default:
+                        valueFragment >= 60 ? valueFragment = 1
+                            : valueFragment <= 0 && (valueFragment = 59);
+                }
+                input.value = `${input.value.slice(0, start)}${valueFragment.toString().padStart(end - start, '0')}${input.value.slice(end)}`;
+                input.setSelectionRange(start, end);
+                const d = dayjs(input.value, format);
+                d.isValid() && _setDateValue(d);
+                break;
+            case 'Escape':
+                _setInnerOpen(false);
+        }
+    };
+    const selectNext = (input) => {
+        resetContinue();
+        const nextRange = ranges[ranges.indexOf(currentRange.current) + 1] || ranges[ranges.length - 1];
+        currentRange.current = nextRange;
+        input.setSelectionRange(nextRange.start, nextRange.end);
+    };
+    const contextValue = useMemo(() => ({
+        min, max, disabledDates,
+        disabledHours, disabledMinutes, disabledSeconds
+    }), [
+        min, max, disabledDates,
+        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.Provider, { value: contextValue, children: [showCalendar &&
+                    _jsx(Calendar, { type: format.includes('D') ? 'dates'
+                            : format.includes('M') ? 'months'
+                                : format.includes('Y') ? 'years'
+                                    : 'dates', defautNull: !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, popperRef: popperRef, onOpenChange: setInnerOpen, onPointerDown: e => {
+            popperProps?.onPointerDown?.(e);
+            e.preventDefault();
+        }, children: _jsx(InputBase, { ...props, ref: ref, css: style, className: classnames(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, inputRef, innerInputRef), className: classnames(classes.input, inputProps?.className) }), _jsx("div", { className: classes.dateTimeIcon, children: showTimer && !showCalendar
+                            ? _jsx(ClockCircleOutlined, {})
+                            : _jsx(CalendarOutlined, {}) })] }) }) }));
+}));

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

@@ -0,0 +1,20 @@
+export declare const classes: {
+    container: string;
+    input: string;
+    calendarHead: string;
+    calendarHeadSide: string;
+    calendarHeadControl: string;
+    calendarHeadCenter: string;
+    calendarHeadButton: string;
+    calendarBody: string;
+    dateItem: string;
+    calendar: string;
+    inputGroup: string;
+    inputUnit: string;
+    dateTimeIcon: string;
+    calendarDays: string;
+} & {
+    root: string;
+};
+export declare const style: () => import("@emotion/react").SerializedStyles;
+export declare const datePickerPopperStyle: () => import("@emotion/react").SerializedStyles[];

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

@@ -0,0 +1,47 @@
+import { css } from '@emotion/react';
+import { defineClasses, defineCss } from '../../utils';
+import { commonNativeInputStyle } from '../input/input.style';
+import { classes as calendarClasses } from './calendar.style';
+import { classes as timerClasses } from './timer.style';
+import { popperStyleCallback } from '../popper/popper.style';
+export const classes = defineClasses('date-time-picker', [
+    'input',
+    'container',
+    'inputGroup',
+    'inputUnit',
+    'dateTimeIcon',
+    'calendar',
+    'calendarHead',
+    'calendarHeadSide',
+    'calendarHeadControl',
+    'calendarHeadCenter',
+    'calendarHeadButton',
+    'calendarBody',
+    'calendarDays',
+    'dateItem'
+]);
+export const style = defineCss(({ text }) => css `
+    .${classes.container} {
+        display: flex;
+        align-items: center;
+
+        .${classes.input} {
+            ${commonNativeInputStyle}
+        }
+    
+        .${classes.dateTimeIcon} {
+            color: ${text.secondary};
+        }
+    }
+`);
+export const datePickerPopperStyle = defineCss(theme => [
+    popperStyleCallback(theme),
+    css `
+        flex-direction: row;
+        padding: 0;
+        
+        .${calendarClasses.root} + .${timerClasses.root} {
+            border-left: 1px solid ${theme.divider};
+        }
+    `
+]);

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

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

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

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

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

@@ -0,0 +1,8 @@
+import { Dayjs } from 'dayjs';
+export declare const Timer: import("react").MemoExoticComponent<({ showHours, showMinutes, showSeconds, value, onChange }: {
+    showHours: boolean;
+    showMinutes: boolean;
+    showSeconds: boolean;
+    value: Dayjs;
+    onChange(value: Dayjs): void;
+}) => import("@emotion/react/jsx-runtime").JSX.Element>;