@laser-ui/components 0.0.1

package/context/index.js

@@ -0,0 +1,106 @@
+import { isUndefined } from 'lodash';
+import { createContext } from 'react';
+export class LContextManager {
+    get parent() {
+        return this._parent;
+    }
+    get root() {
+        // eslint-disable-next-line @typescript-eslint/no-this-alias
+        let instance = this;
+        while (instance.parent) {
+            instance = instance.parent;
+        }
+        return instance;
+    }
+    constructor(context) {
+        Object.defineProperty(this, "namespace", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "componentDisabled", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "componentSize", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "componentDefaultProps", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "layoutPageScrollEl", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "layoutContentResizeEl", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "listenGlobalScrolling", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "_parent", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        this.namespace = context.namespace;
+        this.componentDisabled = context.componentDisabled;
+        this.componentSize = context.componentSize;
+        this.componentDefaultProps = context.componentDefaultProps;
+        this.layoutPageScrollEl = context.layoutPageScrollEl;
+        this.layoutContentResizeEl = context.layoutContentResizeEl;
+        this.listenGlobalScrolling = context.listenGlobalScrolling;
+    }
+    setParent(parent) {
+        this._parent = parent;
+    }
+    derive(context) {
+        const contextCopied = {
+            namespace: this.namespace,
+            componentDisabled: this.componentDisabled,
+            componentSize: this.componentSize,
+            componentDefaultProps: Object.assign({}, this.componentDefaultProps),
+            layoutPageScrollEl: this.layoutPageScrollEl,
+            layoutContentResizeEl: this.layoutContentResizeEl,
+            listenGlobalScrolling: this.listenGlobalScrolling,
+        };
+        Object.keys(context).forEach((key) => {
+            if (!isUndefined(context[key])) {
+                if (key === 'componentDefaultProps') {
+                    Object.assign(contextCopied.componentDefaultProps, context[key]);
+                }
+                else {
+                    contextCopied[key] = context[key];
+                }
+            }
+        });
+        return contextCopied;
+    }
+}
+export const LContext = createContext(new LContextManager({
+    namespace: 'l',
+    componentDisabled: false,
+    componentSize: 'medium',
+    componentDefaultProps: {},
+    layoutPageScrollEl: ':root',
+    layoutContentResizeEl: null,
+    listenGlobalScrolling: false,
+}));

package/context/props.d.ts

@@ -0,0 +1,134 @@
+import type { AccordionProps } from '../accordion';
+import type { AffixProps } from '../affix';
+import type { AlertProps } from '../alert';
+import type { AnchorProps } from '../anchor';
+import type { AvatarProps } from '../avatar';
+import type { BadgeProps, BadgeTextProps } from '../badge';
+import type { BreadcrumbProps } from '../breadcrumb';
+import type { ButtonProps } from '../button';
+import type { CardActionProps, CardContentProps, CardHeaderProps, CardProps } from '../card';
+import type { CascaderProps } from '../cascader';
+import type { CheckboxGroupProps, CheckboxProps } from '../checkbox';
+import type { ComposeItemProps, ComposeProps } from '../compose';
+import type { DatePickerProps } from '../date-picker';
+import type { DrawerFooterProps, DrawerHeaderProps, DrawerProps } from '../drawer';
+import type { DropdownProps } from '../dropdown';
+import type { EmptyProps } from '../empty';
+import type { FabBacktopProps, FabButtonProps, FabProps } from '../fab';
+import type { FormItemProps, FormProps } from '../form';
+import type { IconProps } from '../icon';
+import type { ImageActionProps, ImagePreviewProps, ImageProps } from '../image';
+import type { InputNumberProps, InputProps } from '../input';
+import type { MenuProps } from '../menu';
+import type { ModalProps, ModalHeaderProps, ModalFooterProps, ModalAlertProps } from '../modal';
+import type { NotificationProps } from '../notification';
+import type { PaginationProps } from '../pagination';
+import type { PopoverFooterProps, PopoverHeaderProps, PopoverProps } from '../popover';
+import type { ProgressProps } from '../progress';
+import type { RadioGroupProps, RadioProps } from '../radio';
+import type { RatingProps } from '../rating';
+import type { SelectProps } from '../select';
+import type { SeparatorProps } from '../separator';
+import type { SkeletonProps } from '../skeleton';
+import type { SliderProps } from '../slider';
+import type { SlidesProps } from '../slides';
+import type { SpinnerProps } from '../spinner';
+import type { StepperProps } from '../stepper';
+import type { SwitchProps } from '../switch';
+import type { TableEmptyProps, TableExpandProps, TableFilterProps, TableProps, TableTdProps, TableThActionProps, TableThProps } from '../table';
+import type { TabsProps } from '../tabs';
+import type { TagProps } from '../tag';
+import type { TextareaProps } from '../textarea';
+import type { TimePickerProps } from '../time-picker';
+import type { TimelineProps } from '../timeline';
+import type { ToastProps } from '../toast';
+import type { TooltipProps } from '../tooltip';
+import type { TransferProps } from '../transfer';
+import type { TreeProps } from '../tree';
+import type { TreeSelectProps } from '../tree-select';
+import type { UploadActionProps, UploadButtonProps, UploadListProps, UploadPictureListProps, UploadPictureProps, UploadPreviewActionProps, UploadProps } from '../upload';
+import type { VirtualScrollProps } from '../virtual-scroll';
+export interface ComponentProps {
+    Accordion: AccordionProps<any, any>;
+    Affix: AffixProps;
+    Alert: AlertProps;
+    Anchor: AnchorProps<any>;
+    Avatar: AvatarProps;
+    Breadcrumb: BreadcrumbProps<any, any>;
+    Badge: BadgeProps;
+    BadgeText: BadgeTextProps;
+    Button: ButtonProps;
+    Card: CardProps;
+    CardHeader: CardHeaderProps;
+    CardContent: CardContentProps;
+    CardAction: CardActionProps;
+    Cascader: CascaderProps<any, any>;
+    Checkbox: CheckboxProps;
+    CheckboxGroup: CheckboxGroupProps<any, any>;
+    Compose: ComposeProps;
+    ComposeItem: ComposeItemProps;
+    DatePicker: DatePickerProps;
+    Drawer: DrawerProps;
+    DrawerHeader: DrawerHeaderProps;
+    DrawerFooter: DrawerFooterProps;
+    Dropdown: DropdownProps<any, any>;
+    Empty: EmptyProps;
+    Fab: FabProps;
+    Form: FormProps;
+    FormItem: FormItemProps<any>;
+    FabButton: FabButtonProps;
+    FabBacktop: FabBacktopProps;
+    Icon: IconProps;
+    Image: ImageProps;
+    ImageAction: ImageActionProps;
+    ImagePreview: ImagePreviewProps;
+    Input: InputProps;
+    InputNumber: InputNumberProps;
+    Menu: MenuProps<any, any>;
+    Modal: ModalProps;
+    ModalHeader: ModalHeaderProps;
+    ModalFooter: ModalFooterProps;
+    ModalAlert: ModalAlertProps;
+    Notification: NotificationProps;
+    Pagination: PaginationProps;
+    Popover: PopoverProps;
+    PopoverHeader: PopoverHeaderProps;
+    PopoverFooter: PopoverFooterProps;
+    Progress: ProgressProps;
+    Radio: RadioProps;
+    RadioGroup: RadioGroupProps<any, any>;
+    Rating: RatingProps;
+    Select: SelectProps<any, any>;
+    Separator: SeparatorProps;
+    Skeleton: SkeletonProps;
+    Slider: SliderProps;
+    Slides: SlidesProps<any, any>;
+    Spinner: SpinnerProps;
+    Stepper: StepperProps<any>;
+    Switch: SwitchProps;
+    Table: TableProps;
+    TableTh: TableThProps;
+    TableThAction: TableThActionProps;
+    TableTd: TableTdProps;
+    TableFilter: TableFilterProps;
+    TableEmpty: TableEmptyProps;
+    TableExpand: TableExpandProps;
+    Tabs: TabsProps<any, any>;
+    Tag: TagProps;
+    Textarea: TextareaProps;
+    TimePicker: TimePickerProps;
+    Timeline: TimelineProps<any>;
+    Toast: ToastProps;
+    Tooltip: TooltipProps;
+    Transfer: TransferProps<any, any>;
+    Tree: TreeProps<any, any>;
+    TreeSelect: TreeSelectProps<any, any>;
+    Upload: UploadProps;
+    UploadButton: UploadButtonProps;
+    UploadAction: UploadActionProps;
+    UploadPreviewAction: UploadPreviewActionProps;
+    UploadList: UploadListProps;
+    UploadPicture: UploadPictureProps;
+    UploadPictureList: UploadPictureListProps;
+    VirtualScroll: VirtualScrollProps<any>;
+}

package/context/props.js

@@ -0,0 +1 @@
+export {};

package/date-picker/DatePicker.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { DatePickerProps, DatePickerRef } from './types';
+export declare const DatePicker: import("react").ForwardRefExoticComponent<DatePickerProps & import("react").RefAttributes<DatePickerRef>>;

package/date-picker/DatePicker.js

@@ -0,0 +1,376 @@
+import { __rest } from "tslib";
+import { createElement as _createElement } from "react";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useAsync, useEvent, useEventCallback, useForceUpdate, useForkRef, useImmer, useResize } from '@laser-ui/hooks';
+import { ReactComponent as CancelFilled } from '@material-design-icons/svg/filled/cancel.svg';
+import { ReactComponent as CalendarTodayOutlined } from '@material-design-icons/svg/outlined/calendar_today.svg';
+import { ReactComponent as SwapHorizOutlined } from '@material-design-icons/svg/outlined/swap_horiz.svg';
+import { isArray, isBoolean, isNull, isUndefined } from 'lodash';
+import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import { DatePickerPanel } from './internal/DatePickerPanel';
+import { CLASSES } from './vars';
+import { Button } from '../button';
+import dayjs from '../dayjs';
+import { useComponentProps, useControlled, useDesign, useLayout, useListenGlobalScrolling, useMaxIndex, useNamespace, useScopedProps, useStyled, useTranslation, } from '../hooks';
+import { Icon } from '../icon';
+import { Portal } from '../internal/portal';
+import { Transition } from '../internal/transition';
+import { ROOT_DATA } from '../root/vars';
+import { TimePickerPanel } from '../time-picker/internal/TimePickerPanel';
+import { deepCompareDate, orderDate } from '../time-picker/utils';
+import { getVerticalSidePosition, mergeCS } from '../utils';
+import { TTANSITION_DURING_POPUP, WINDOW_SPACE } from '../vars';
+export const DatePicker = forwardRef((props, ref) => {
+    var _a, _b;
+    const _c = useComponentProps('DatePicker', props), { styleOverrides, styleProvider, formControl, model, defaultModel, visible: visibleProp, defaultVisible, placeholder, range = false, format: formatProp, order: orderProp = 'ascend', clearable: clearableProp = false, size: sizeProp, disabled: disabledProp = false, presetDate, config, showTime = false, escClosable = true, inputRef, inputRender, onModelChange, onVisibleChange, onClear, afterVisibleChange } = _c, restProps = __rest(_c, ["styleOverrides", "styleProvider", "formControl", "model", "defaultModel", "visible", "defaultVisible", "placeholder", "range", "format", "order", "clearable", "size", "disabled", "presetDate", "config", "showTime", "escClosable", "inputRef", "inputRender", "onModelChange", "onVisibleChange", "onClear", "afterVisibleChange"]);
+    const namespace = useNamespace();
+    const styled = useStyled(CLASSES, {
+        'date-picker': styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider['date-picker'],
+        'time-picker': styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider['time-picker'],
+        'date-picker-popup': styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider['date-picker-popup'],
+    }, styleOverrides);
+    const { t } = useTranslation();
+    const forceUpdate = useForceUpdate();
+    const async = useAsync();
+    const { pageScrollRef, contentResizeRef } = useLayout();
+    const boxRef = useRef(null);
+    const popupRef = useRef(null);
+    const inputLeftRef = useRef(null);
+    const inputRightRef = useRef(null);
+    const indicatorRef = useRef(null);
+    const combineInputLeftRef = useForkRef(inputLeftRef, inputRef === null || inputRef === void 0 ? void 0 : inputRef[0]);
+    const combineInputRightRef = useForkRef(inputRightRef, inputRef === null || inputRef === void 0 ? void 0 : inputRef[1]);
+    const panelRef = useRef(null);
+    const timePickerPanelRef = useRef(null);
+    const updatePanel = (date) => {
+        var _a, _b;
+        (_a = panelRef.current) === null || _a === void 0 ? void 0 : _a.call(panelRef, date);
+        (_b = timePickerPanelRef.current) === null || _b === void 0 ? void 0 : _b.call(timePickerPanelRef, date);
+    };
+    const dataRef = useRef({
+        latestFocused: 'start',
+        onceVisible: false,
+        focusAnother: false,
+        inputValue: [undefined, undefined],
+        rangeDate: [null, null],
+    });
+    const format = isUndefined(formatProp) ? (showTime ? 'YYYY-MM-DD HH:mm:ss' : `YYYY-MM-DD`) : formatProp;
+    const order = (date) => orderDate(date, orderProp, showTime ? undefined : 'date');
+    const [visible, changeVisible] = useControlled(defaultVisible !== null && defaultVisible !== void 0 ? defaultVisible : false, visibleProp, onVisibleChange);
+    const [focused, setFocused] = useImmer([false, false]);
+    if (focused[0]) {
+        dataRef.current.latestFocused = 'start';
+    }
+    if (focused[1]) {
+        dataRef.current.latestFocused = 'end';
+    }
+    const [_value, _changeValue] = useControlled(defaultModel !== null && defaultModel !== void 0 ? defaultModel : null, model, onModelChange, (a, b) => deepCompareDate(a, b, format), formControl === null || formControl === void 0 ? void 0 : formControl.control);
+    let [valueLeft, valueRight = null] = range ? (_a = _value) !== null && _a !== void 0 ? _a : [null, null] : [_value, null];
+    if (range) {
+        if (isNull(_value)) {
+            [valueLeft, valueRight] = dataRef.current.rangeDate;
+        }
+        else {
+            dataRef.current.rangeDate = [null, null];
+        }
+    }
+    const inputValue = [0, 1].map((index) => focused[index] && !isUndefined(dataRef.current.inputValue[index])
+        ? dataRef.current.inputValue[index]
+        : (() => {
+            const value = index === 0 ? valueLeft : valueRight;
+            return isNull(value) ? '' : dayjs(value).format(format);
+        })());
+    const changeValue = (date) => {
+        const index = focused.findIndex((f) => f);
+        if (range) {
+            if (isNull(_value)) {
+                dataRef.current.rangeDate[index] = date;
+                if (dataRef.current.rangeDate.every((v) => !isNull(v))) {
+                    dataRef.current.focusAnother = order(dataRef.current.rangeDate);
+                    if (dataRef.current.focusAnother) {
+                        dataRef.current.rangeDate.reverse();
+                    }
+                    dataRef.current.inputValue = [undefined, undefined];
+                    _changeValue(dataRef.current.rangeDate);
+                }
+            }
+            else {
+                dataRef.current.inputValue = [undefined, undefined];
+                _changeValue((draft) => {
+                    draft[index] = date;
+                    dataRef.current.focusAnother = order(draft);
+                    if (dataRef.current.focusAnother) {
+                        draft.reverse();
+                    }
+                });
+            }
+        }
+        else {
+            dataRef.current.inputValue = [undefined, undefined];
+            _changeValue(date);
+        }
+        forceUpdate();
+    };
+    const [placeholderLeft = t('DatePicker', range ? 'Start date' : 'Select date'), placeholderRight = t('DatePicker', 'End date')] = range
+        ? (_b = placeholder) !== null && _b !== void 0 ? _b : []
+        : [placeholder];
+    const { size, disabled } = useScopedProps({ size: sizeProp, disabled: disabledProp || (formControl === null || formControl === void 0 ? void 0 : formControl.control.disabled) });
+    const maxZIndex = useMaxIndex(visible);
+    const zIndex = `calc(var(--${namespace}-zindex-fixed) + ${maxZIndex})`;
+    const [transformOrigin, setTransformOrigin] = useState();
+    const [popupPositionStyle, setPopupPositionStyle] = useState({
+        top: '-200vh',
+        left: '-200vw',
+    });
+    const updatePosition = useEventCallback(() => {
+        if (visible && boxRef.current && popupRef.current) {
+            const height = popupRef.current.offsetHeight;
+            const maxWidth = ROOT_DATA.windowSize.width - WINDOW_SPACE * 2;
+            const width = Math.min(popupRef.current.scrollWidth, maxWidth);
+            const position = getVerticalSidePosition(boxRef.current, { width, height }, {
+                placement: 'bottom-left',
+                inWindow: WINDOW_SPACE,
+            });
+            setTransformOrigin(position.transformOrigin);
+            setPopupPositionStyle({
+                top: position.top,
+                left: position.left,
+                maxWidth,
+            });
+        }
+    });
+    const listenGlobalScrolling = useListenGlobalScrolling(updatePosition, !visible);
+    useEvent(pageScrollRef, 'scroll', updatePosition, { passive: true }, !visible || listenGlobalScrolling);
+    useResize(boxRef, updatePosition, undefined, !visible);
+    useResize(popupRef, updatePosition, undefined, !visible);
+    useResize(contentResizeRef, updatePosition, undefined, !visible);
+    useImperativeHandle(ref, () => ({
+        updatePosition,
+    }), [updatePosition]);
+    useEffect(() => {
+        if (boxRef.current && indicatorRef.current) {
+            let focus = false;
+            const boxRect = boxRef.current.getBoundingClientRect();
+            if (inputLeftRef.current && document.activeElement === inputLeftRef.current) {
+                const rect = inputLeftRef.current.getBoundingClientRect();
+                indicatorRef.current.style.cssText = `left:${rect.left - boxRect.left}px;width:${rect.width}px;opacity:1;`;
+                focus = true;
+            }
+            if (inputRightRef.current && document.activeElement === inputRightRef.current) {
+                const rect = inputRightRef.current.getBoundingClientRect();
+                indicatorRef.current.style.cssText = `left:${rect.left - boxRect.left}px;width:${rect.width}px;opacity:1;`;
+                focus = true;
+            }
+            if (!focus) {
+                indicatorRef.current.style.cssText += 'opacity:0;';
+            }
+        }
+    });
+    useEffect(() => {
+        if (dataRef.current.focusAnother && document.activeElement) {
+            const el = document.activeElement.parentElement;
+            for (let index = 0; index < el.childElementCount; index++) {
+                const element = el.children.item(index);
+                if (element.tagName.toLowerCase() === 'input' && element !== document.activeElement) {
+                    element.focus({ preventScroll: true });
+                    break;
+                }
+            }
+        }
+        dataRef.current.focusAnother = false;
+    });
+    const handleEnter = (date) => {
+        if (range) {
+            const index = focused.findIndex((f) => f);
+            if (isNull(index === 0 ? valueRight : valueLeft)) {
+                dataRef.current.focusAnother = true;
+                forceUpdate();
+            }
+            else {
+                changeVisible(false);
+            }
+        }
+        else {
+            changeVisible(false);
+        }
+        if (!dataRef.current.focusAnother) {
+            updatePanel(date);
+        }
+    };
+    const clearable = clearableProp && !isNull(_value) && !visible && !disabled;
+    const inputNode = (isLeft) => {
+        const index = isLeft ? 0 : 1;
+        const value = isLeft ? valueLeft : valueRight;
+        const render = inputRender === null || inputRender === void 0 ? void 0 : inputRender[index];
+        const node = (_jsx("input", Object.assign({}, styled('date-picker__input'), formControl === null || formControl === void 0 ? void 0 : formControl.inputAria, { ref: isLeft ? combineInputLeftRef : combineInputRightRef, type: "text", autoComplete: "off", value: inputValue[index], size: 22, placeholder: isLeft ? placeholderLeft : placeholderRight, disabled: disabled, onChange: (e) => {
+                forceUpdate();
+                dataRef.current.inputValue[index] = e.currentTarget.value;
+                if (dayjs(e.currentTarget.value, format, true).isValid()) {
+                    const date = dayjs(e.currentTarget.value, format).toDate();
+                    changeValue(date);
+                    updatePanel(date);
+                }
+            }, onKeyDown: (e) => {
+                if (e.code === 'Escape') {
+                    if (visible && escClosable) {
+                        e.stopPropagation();
+                        e.preventDefault();
+                        changeVisible(false);
+                    }
+                }
+                else if (e.code === 'Enter' && inputValue[index] && dayjs(inputValue[index], format, true).isValid()) {
+                    e.preventDefault();
+                    const date = dayjs(inputValue[index], format).toDate();
+                    handleEnter(date);
+                }
+            }, onFocus: () => {
+                var _a, _b;
+                (_b = (_a = dataRef.current).clearTid) === null || _b === void 0 ? void 0 : _b.call(_a);
+                setFocused((draft) => {
+                    draft.fill(false);
+                    draft[isLeft ? 0 : 1] = true;
+                });
+                dataRef.current.inputValue = [undefined, undefined];
+                if (visible && range && value) {
+                    updatePanel(value);
+                }
+            }, onBlur: () => {
+                dataRef.current.clearTid = async.setTimeout(() => {
+                    setFocused([false, false]);
+                    changeVisible(false);
+                }, 20);
+            } })));
+        return render ? render(node) : node;
+    };
+    const preventBlur = (e) => {
+        if ((document.activeElement === inputLeftRef.current || document.activeElement === inputRightRef.current) &&
+            e.target !== inputLeftRef.current &&
+            e.target !== inputRightRef.current &&
+            e.button === 0) {
+            e.preventDefault();
+        }
+    };
+    const designProps = useDesign({ compose: { disabled }, form: formControl });
+    return (_jsxs(_Fragment, { children: [_jsxs("div", Object.assign({}, restProps, mergeCS(styled('date-picker', `date-picker--${size}`, {
+                'date-picker.is-disabled': disabled,
+            }), {
+                className: restProps.className,
+                style: restProps.style,
+            }), designProps, { ref: boxRef, onMouseDown: (e) => {
+                    var _a;
+                    (_a = restProps.onMouseDown) === null || _a === void 0 ? void 0 : _a.call(restProps, e);
+                    preventBlur(e);
+                }, onMouseUp: (e) => {
+                    var _a;
+                    (_a = restProps.onMouseUp) === null || _a === void 0 ? void 0 : _a.call(restProps, e);
+                    preventBlur(e);
+                }, onClick: (e) => {
+                    var _a, _b;
+                    (_a = restProps.onClick) === null || _a === void 0 ? void 0 : _a.call(restProps, e);
+                    if (!focused.some((f) => f)) {
+                        (_b = inputLeftRef.current) === null || _b === void 0 ? void 0 : _b.focus({ preventScroll: true });
+                    }
+                    changeVisible(true);
+                }, children: [inputNode(true), range && (_jsxs(_Fragment, { children: [_jsx("div", Object.assign({}, styled('date-picker__indicator'), { ref: indicatorRef })), _jsx("div", Object.assign({}, styled('date-picker__separator'), { children: _jsx(Icon, { children: _jsx(SwapHorizOutlined, {}) }) })), inputNode(false)] })), clearable && (_jsx("div", Object.assign({}, styled('date-picker__clear'), { role: "button", "aria-label": t('Clear'), onClick: (e) => {
+                            e.stopPropagation();
+                            dataRef.current.inputValue = [undefined, undefined];
+                            _changeValue(null);
+                            onClear === null || onClear === void 0 ? void 0 : onClear();
+                        }, children: _jsx(Icon, { children: _jsx(CancelFilled, {}) }) }))), _jsx("div", Object.assign({}, mergeCS(styled('date-picker__icon'), {
+                        style: { visibility: clearable ? 'hidden' : undefined },
+                    }), { children: _jsx(Icon, { children: _jsx(CalendarTodayOutlined, {}) }) }))] })), _jsx(Portal, { selector: () => {
+                    let el = document.getElementById(`${namespace}-date-picker-root`);
+                    if (!el) {
+                        el = document.createElement('div');
+                        el.id = `${namespace}-date-picker-root`;
+                        document.body.appendChild(el);
+                    }
+                    return el;
+                }, children: _jsx(Transition, { enter: visible, during: TTANSITION_DURING_POPUP, afterRender: () => {
+                        updatePosition();
+                        const cb = () => {
+                            const value = focused[0] ? valueLeft : valueRight;
+                            if (value) {
+                                updatePanel(value);
+                            }
+                        };
+                        if (range) {
+                            cb();
+                        }
+                        else if (!dataRef.current.onceVisible) {
+                            dataRef.current.onceVisible = true;
+                            cb();
+                        }
+                    }, afterEnter: () => {
+                        afterVisibleChange === null || afterVisibleChange === void 0 ? void 0 : afterVisibleChange(true);
+                    }, afterLeave: () => {
+                        afterVisibleChange === null || afterVisibleChange === void 0 ? void 0 : afterVisibleChange(false);
+                    }, children: (state) => {
+                        let transitionStyle = {};
+                        switch (state) {
+                            case 'enter':
+                                transitionStyle = { transform: 'scaleY(0.7)', opacity: 0 };
+                                break;
+                            case 'entering':
+                                transitionStyle = {
+                                    transition: ['transform', 'opacity'].map((attr) => `${attr} ${TTANSITION_DURING_POPUP}ms ease-out`).join(', '),
+                                    transformOrigin,
+                                };
+                                break;
+                            case 'leaving':
+                                transitionStyle = {
+                                    transform: 'scaleY(0.7)',
+                                    opacity: 0,
+                                    transition: ['transform', 'opacity'].map((attr) => `${attr} ${TTANSITION_DURING_POPUP}ms ease-in`).join(', '),
+                                    transformOrigin,
+                                };
+                                break;
+                            case 'leaved':
+                                transitionStyle = { display: 'none' };
+                                break;
+                            default:
+                                break;
+                        }
+                        return (_jsxs("div", Object.assign({}, mergeCS(styled('date-picker-popup'), {
+                            style: Object.assign(Object.assign({ zIndex }, popupPositionStyle), transitionStyle),
+                        }), { ref: popupRef, onMouseDown: (e) => {
+                                preventBlur(e);
+                            }, onMouseUp: (e) => {
+                                preventBlur(e);
+                            }, children: [presetDate && (_jsx("ul", Object.assign({}, styled('date-picker__preset'), { children: Object.keys(presetDate).map((name) => {
+                                        const handleClick = () => {
+                                            const date = presetDate[name]();
+                                            dataRef.current.inputValue = [undefined, undefined];
+                                            if (range) {
+                                                if (isArray(date)) {
+                                                    _changeValue(date);
+                                                    changeVisible(false);
+                                                }
+                                                else {
+                                                    changeValue(date);
+                                                    handleEnter(date);
+                                                }
+                                            }
+                                            else {
+                                                _changeValue(date);
+                                                handleEnter(date);
+                                            }
+                                        };
+                                        return (_createElement("li", Object.assign({}, styled('date-picker__preset-option'), { key: name, role: "button", onClick: handleClick }), name));
+                                    }) }))), _jsxs("div", Object.assign({}, styled('date-picker__panel-wrapper'), { children: [_jsx(DatePickerPanel, { ref: panelRef, styled: styled, currentSelected: dataRef.current.latestFocused === 'start' ? valueLeft : valueRight, anotherSelected: dataRef.current.latestFocused === 'start' ? valueRight : valueLeft, config: config ? (...args) => config(...args, dataRef.current.latestFocused, [valueLeft, valueRight]) : undefined, range: range, onDateChange: (date) => {
+                                                changeValue(date);
+                                                if (!showTime) {
+                                                    handleEnter(date);
+                                                }
+                                            } }), showTime && (_jsx(TimePickerPanel, { ref: timePickerPanelRef, styled: styled, time: dataRef.current.latestFocused === 'start' ? valueLeft : valueRight, format: format, config: showTime && !isBoolean(showTime) && showTime.config
+                                                ? // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+                                                    (...args) => showTime.config(...args, dataRef.current.latestFocused, [valueLeft, valueRight])
+                                                : undefined, inDatePicker: true, onTimeChange: (time) => {
+                                                changeValue(time);
+                                            } })), _jsx("div", Object.assign({}, styled('date-picker__footer'), { children: _jsx(Button, { pattern: "link", onClick: () => {
+                                                    const now = new Date();
+                                                    changeValue(now);
+                                                    handleEnter(now);
+                                                }, children: t('DatePicker', showTime ? 'Now' : 'Today') }) }))] }))] })));
+                    } }) })] }));
+});

package/date-picker/index.d.ts

@@ -0,0 +1,2 @@
+export type { DatePickerRef, DatePickerProps } from './types';
+export { DatePicker } from './DatePicker';

package/date-picker/index.js

@@ -0,0 +1 @@
+export { DatePicker } from './DatePicker';

package/date-picker/internal/DatePickerPanel.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import type { Styled } from '../../hooks/useStyled';
+import type { CLASSES } from '../vars';
+interface DatePickerPanelProps {
+    styled: Styled<typeof CLASSES>;
+    currentSelected: Date | null;
+    anotherSelected: Date | null;
+    config: ((date: Date) => {
+        disabled?: boolean;
+    }) | undefined;
+    range: boolean;
+    onDateChange: (date: Date) => void;
+}
+export declare const DatePickerPanel: import("react").ForwardRefExoticComponent<DatePickerPanelProps & import("react").RefAttributes<(date: Date) => void>>;
+export {};