@laser-ui/components 0.0.1

package/date-picker/internal/DatePickerPanel.js

@@ -0,0 +1,104 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useAsync, useEvent, useRefExtra } from '@laser-ui/hooks';
+import { ReactComponent as KeyboardArrowLeftOutlined } from '@material-design-icons/svg/outlined/keyboard_arrow_left.svg';
+import { ReactComponent as KeyboardArrowRightOutlined } from '@material-design-icons/svg/outlined/keyboard_arrow_right.svg';
+import { ReactComponent as KeyboardDoubleArrowLeftOutlined } from '@material-design-icons/svg/outlined/keyboard_double_arrow_left.svg';
+import { ReactComponent as KeyboardDoubleArrowRightOutlined } from '@material-design-icons/svg/outlined/keyboard_double_arrow_right.svg';
+import { forwardRef, useImperativeHandle, useRef, useState } from 'react';
+import dayjs from '../../dayjs';
+import { useTranslation } from '../../hooks';
+import { Icon } from '../../icon';
+export const DatePickerPanel = forwardRef((props, ref) => {
+    const { styled, currentSelected: currentSelectedProp, anotherSelected: anotherSelectedProp, config, range, onDateChange } = props;
+    const dataRef = useRef({});
+    const { t, lang } = useTranslation();
+    const async = useAsync();
+    const windowRef = useRefExtra(() => window);
+    const currentSelected = currentSelectedProp ? dayjs(currentSelectedProp) : dayjs().set('hour', 0).set('minute', 0).set('second', 0);
+    const anotherSelected = anotherSelectedProp ? dayjs(anotherSelectedProp) : null;
+    const [_active, setActive] = useState(currentSelected.toDate());
+    const active = dayjs(_active);
+    const [hover, setHover] = useState(null);
+    const handleMouseDown = (unit, value) => {
+        const fn = () => {
+            setActive((draft) => {
+                const d = dayjs(draft);
+                return d.set(unit, d.get(unit) + value).toDate();
+            });
+        };
+        fn();
+        const loop = () => {
+            fn();
+            dataRef.current.clearLoop = async.setTimeout(() => loop(), 50);
+        };
+        dataRef.current.clearTid = async.setTimeout(() => loop(), 400);
+    };
+    const handleMouseUp = () => {
+        var _a, _b, _c, _d;
+        (_b = (_a = dataRef.current).clearLoop) === null || _b === void 0 ? void 0 : _b.call(_a);
+        (_d = (_c = dataRef.current).clearTid) === null || _d === void 0 ? void 0 : _d.call(_c);
+    };
+    useEvent(windowRef, 'mouseup', handleMouseUp);
+    useImperativeHandle(ref, () => setActive, []);
+    const buttonProps = (unit, value) => ({
+        onMouseDown: (e) => {
+            if (e.button === 0) {
+                handleMouseDown(unit, value);
+            }
+        },
+        onTouchStart: () => {
+            handleMouseDown(unit, value);
+        },
+        onTouchEnd: () => {
+            handleMouseUp();
+        },
+    });
+    const weekList = (() => {
+        const firstDay = active.set('date', 1);
+        const month = [];
+        let week = [];
+        for (let num = 0, addDay = -firstDay.day(); num < 7 * 6; num++, addDay++) {
+            week.push(firstDay.add(addDay, 'day').toDate());
+            if (week.length === 7) {
+                month.push(week);
+                week = [];
+            }
+        }
+        return month;
+    })();
+    return (_jsxs("div", Object.assign({}, styled('date-picker__panel'), { children: [_jsxs("div", Object.assign({}, styled('date-picker__header'), { children: [_jsx("button", Object.assign({}, styled('date-picker__header-button'), buttonProps('year', -1), { title: t('DatePicker', 'Previous year'), children: _jsx(Icon, { children: _jsx(KeyboardDoubleArrowLeftOutlined, {}) }) })), _jsx("button", Object.assign({}, styled('date-picker__header-button'), buttonProps('month', -1), { title: t('DatePicker', 'Previous month'), children: _jsx(Icon, { children: _jsx(KeyboardArrowLeftOutlined, {}) }) })), _jsx("span", Object.assign({}, styled('date-picker__header-date'), { children: active.format(lang === 'zh-CN' ? 'YYYY年 M月' : 'MMM YYYY') })), _jsx("button", Object.assign({}, styled('date-picker__header-button'), buttonProps('month', 1), { title: t('DatePicker', 'Next month'), children: _jsx(Icon, { children: _jsx(KeyboardArrowRightOutlined, {}) }) })), _jsx("button", Object.assign({}, styled('date-picker__header-button'), buttonProps('year', 1), { title: t('DatePicker', 'Next year'), children: _jsx(Icon, { children: _jsx(KeyboardDoubleArrowRightOutlined, {}) }) }))] })), _jsxs("table", Object.assign({}, styled('date-picker__table'), { children: [_jsx("thead", { children: _jsx("tr", { children: dayjs.weekdaysMin().map((day) => (_jsx("th", { children: day }, day))) }) }), _jsx("tbody", { children: weekList.map((week, index1) => (_jsx("tr", { children: week.map((date, index2) => {
+                                var _a;
+                                const day = dayjs(date);
+                                const { disabled = false } = (_a = config === null || config === void 0 ? void 0 : config(date)) !== null && _a !== void 0 ? _a : {};
+                                const isCurrentSelected = currentSelectedProp && day.isSame(currentSelected, 'date');
+                                const isAnotherSelected = anotherSelected && day.isSame(anotherSelected, 'date');
+                                const isHover = !isCurrentSelected && !isAnotherSelected && anotherSelected && day.isSame(hover, 'date');
+                                const isBetween = !isCurrentSelected &&
+                                    !isCurrentSelected &&
+                                    !isHover &&
+                                    currentSelectedProp &&
+                                    anotherSelected &&
+                                    day.isBetween(currentSelected, anotherSelected, 'date');
+                                const isBetweenHover = !isCurrentSelected && hover && anotherSelected && day.isBetween(hover, anotherSelected, 'date');
+                                return (_jsx("td", { style: { pointerEvents: disabled ? 'none' : undefined }, onClick: () => {
+                                        setActive(date);
+                                        onDateChange(currentSelected.set('year', day.year()).set('month', day.month()).set('date', day.date()).toDate());
+                                    }, onMouseEnter: () => {
+                                        var _a, _b;
+                                        (_b = (_a = dataRef.current).clearHoverTid) === null || _b === void 0 ? void 0 : _b.call(_a);
+                                        setHover(date);
+                                    }, onMouseLeave: () => {
+                                        var _a, _b;
+                                        (_b = (_a = dataRef.current).clearHoverTid) === null || _b === void 0 ? void 0 : _b.call(_a);
+                                        dataRef.current.clearHoverTid = async.setTimeout(() => setHover(null), 50);
+                                    }, children: _jsx("div", Object.assign({}, styled('date-picker__cell', {
+                                        'date-picker__cell.is-active': range ? isAnotherSelected : isCurrentSelected,
+                                        'date-picker__cell.is-hover': isHover || (range && isCurrentSelected),
+                                        'date-picker__cell.is-between': isBetween,
+                                        'date-picker__cell.is-between-hover': isBetweenHover,
+                                        'date-picker__cell.is-disabled': disabled,
+                                        'date-picker__cell--out-month': day.get('month') !== active.get('month'),
+                                        'date-picker__cell--today': !isCurrentSelected && !isAnotherSelected && day.isSame(dayjs(), 'date'),
+                                    }), { children: day.get('date') })) }, index2));
+                            }) }, index1))) })] }))] })));
+});

package/date-picker/types.d.ts

@@ -0,0 +1,37 @@
+/// <reference types="react" />
+import type { CLASSES } from './vars';
+import type { FormControlProvider } from '../form/types';
+import type { TimePickerProps } from '../time-picker';
+import type { BaseProps, CloneHTMLElement, Size } from '../types';
+export {};
+export interface DatePickerRef {
+    updatePosition: () => void;
+}
+export interface DatePickerProps extends BaseProps<'date-picker' | 'time-picker' | 'date-picker-popup', typeof CLASSES>, Omit<React.HTMLAttributes<HTMLDivElement>, 'children' | 'placeholder'> {
+    formControl?: FormControlProvider;
+    model?: Date | [Date, Date] | null;
+    defaultModel?: Date | [Date, Date] | null;
+    visible?: boolean;
+    defaultVisible?: boolean;
+    placeholder?: string | [string?, string?];
+    range?: boolean;
+    format?: string;
+    order?: 'ascend' | 'descend' | false;
+    clearable?: boolean;
+    size?: Size;
+    disabled?: boolean;
+    presetDate?: {
+        [index: string]: () => Date | [Date, Date];
+    };
+    config?: (date: Date, position: 'start' | 'end', current: [Date | null, Date | null]) => {
+        disabled?: boolean;
+    };
+    showTime?: boolean | Pick<TimePickerProps, 'config'>;
+    escClosable?: boolean;
+    inputRef?: [React.ForwardedRef<HTMLInputElement>?, React.ForwardedRef<HTMLInputElement>?];
+    inputRender?: [CloneHTMLElement?, CloneHTMLElement?];
+    onModelChange?: (date: any) => void;
+    onVisibleChange?: (visible: boolean) => void;
+    onClear?: () => void;
+    afterVisibleChange?: (visible: boolean) => void;
+}

package/date-picker/types.js

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

package/date-picker/vars.d.ts

@@ -0,0 +1,36 @@
+export declare const CLASSES: {
+    'date-picker': string;
+    'date-picker.is-disabled': string;
+    'date-picker--small': string;
+    'date-picker--medium': string;
+    'date-picker--large': string;
+    'date-picker__input': string;
+    'date-picker__indicator': string;
+    'date-picker__separator': string;
+    'date-picker__clear': string;
+    'date-picker__icon': string;
+    'date-picker-popup': string;
+    'date-picker__preset': string;
+    'date-picker__preset-option': string;
+    'date-picker__panel-wrapper': string;
+    'date-picker__panel': string;
+    'date-picker__header': string;
+    'date-picker__header-button': string;
+    'date-picker__header-date': string;
+    'date-picker__table': string;
+    'date-picker__cell': string;
+    'date-picker__cell.is-active': string;
+    'date-picker__cell.is-hover': string;
+    'date-picker__cell.is-between': string;
+    'date-picker__cell.is-between-hover': string;
+    'date-picker__cell.is-disabled': string;
+    'date-picker__cell--out-month': string;
+    'date-picker__cell--today': string;
+    'date-picker__footer': string;
+    'time-picker__panel': string;
+    'time-picker__header': string;
+    'time-picker__column': string;
+    'time-picker__cell': string;
+    'time-picker__cell.is-active': string;
+    'time-picker__cell.is-disabled': string;
+};

package/date-picker/vars.js

@@ -0,0 +1,36 @@
+export const CLASSES = {
+    'date-picker': '^date-picker',
+    'date-picker.is-disabled': 'is-disabled',
+    'date-picker--small': '^date-picker--small',
+    'date-picker--medium': '^date-picker--medium',
+    'date-picker--large': '^date-picker--large',
+    'date-picker__input': '^date-picker__input',
+    'date-picker__indicator': '^date-picker__indicator',
+    'date-picker__separator': '^date-picker__separator',
+    'date-picker__clear': '^date-picker__clear',
+    'date-picker__icon': '^date-picker__icon',
+    'date-picker-popup': '^date-picker-popup',
+    'date-picker__preset': '^date-picker__preset',
+    'date-picker__preset-option': '^date-picker__preset-option',
+    'date-picker__panel-wrapper': '^date-picker__panel-wrapper',
+    'date-picker__panel': '^date-picker__panel',
+    'date-picker__header': '^date-picker__header',
+    'date-picker__header-button': '^date-picker__header-button',
+    'date-picker__header-date': '^date-picker__header-date',
+    'date-picker__table': '^date-picker__table',
+    'date-picker__cell': '^date-picker__cell',
+    'date-picker__cell.is-active': 'is-active',
+    'date-picker__cell.is-hover': 'is-hover',
+    'date-picker__cell.is-between': 'is-between',
+    'date-picker__cell.is-between-hover': 'is-between-hover',
+    'date-picker__cell.is-disabled': 'is-disabled',
+    'date-picker__cell--out-month': '^date-picker__cell--out-month',
+    'date-picker__cell--today': '^date-picker__cell--today',
+    'date-picker__footer': '^date-picker__footer',
+    'time-picker__panel': '^time-picker__panel',
+    'time-picker__header': '^time-picker__header',
+    'time-picker__column': '^time-picker__column',
+    'time-picker__cell': '^time-picker__cell',
+    'time-picker__cell.is-active': 'is-active',
+    'time-picker__cell.is-disabled': 'is-disabled',
+};

package/dayjs.d.ts

@@ -0,0 +1,3 @@
+import dayjs from 'dayjs';
+import 'dayjs/locale/zh-cn';
+export default dayjs;

package/dayjs.js

@@ -0,0 +1,11 @@
+import dayjs from 'dayjs';
+import 'dayjs/locale/zh-cn';
+import customParseFormat from 'dayjs/plugin/customParseFormat';
+import isBetween from 'dayjs/plugin/isBetween';
+import localeData from 'dayjs/plugin/localeData';
+import updateLocale from 'dayjs/plugin/updateLocale';
+dayjs.extend(customParseFormat);
+dayjs.extend(isBetween);
+dayjs.extend(localeData);
+dayjs.extend(updateLocale);
+export default dayjs;

package/drawer/Drawer.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import type { DrawerProps } from './types';
+import { DrawerFooter } from './DrawerFooter';
+import { DrawerHeader } from './DrawerHeader';
+export declare const Drawer: {
+    (props: DrawerProps): JSX.Element | null;
+    Header: typeof DrawerHeader;
+    Footer: typeof DrawerFooter;
+};

package/drawer/Drawer.js

@@ -0,0 +1,141 @@
+import { __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { isString, isUndefined } from 'lodash';
+import { cloneElement, useContext, useEffect, useId, useMemo, useRef } from 'react';
+import { DrawerFooter } from './DrawerFooter';
+import { DrawerHeader } from './DrawerHeader';
+import { CLASSES, DrawerContext } from './vars';
+import { useComponentProps, useLockScroll, useMaxIndex, useNamespace, useStyled } from '../hooks';
+import { Mask } from '../internal/mask';
+import { Portal } from '../internal/portal';
+import { Transition } from '../internal/transition';
+import { handleModalKeyDown, mergeCS } from '../utils';
+import { TTANSITION_DURING_BASE } from '../vars';
+export const Drawer = (props) => {
+    const _a = useComponentProps('Drawer', props), { children, styleOverrides, styleProvider, visible, header: headerProp, footer, placement = 'right', width = 400, height = 280, mask = true, maskClosable = true, escClosable = true, container, skipFirstTransition = true, destroyAfterClose = true, zIndex: zIndexProp, onClose, afterVisibleChange } = _a, restProps = __rest(_a, ["children", "styleOverrides", "styleProvider", "visible", "header", "footer", "placement", "width", "height", "mask", "maskClosable", "escClosable", "container", "skipFirstTransition", "destroyAfterClose", "zIndex", "onClose", "afterVisibleChange"]);
+    const isFixed = isUndefined(container);
+    const namespace = useNamespace();
+    const styled = useStyled(CLASSES, { drawer: styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider.drawer }, styleOverrides);
+    const drawerRef = useRef(null);
+    const dataRef = useRef({
+        prevActiveEl: null,
+    });
+    const uniqueId = useId();
+    const titleId = `${namespace}-drawer-title-${uniqueId}`;
+    const bodyId = `${namespace}-drawer-content-${uniqueId}`;
+    const drawerContext = useContext(DrawerContext);
+    const ancestryIds = [];
+    if (visible) {
+        drawerContext.forEach((ancestry) => {
+            if (ancestry.placement === placement) {
+                ancestryIds.push(ancestry.uniqueId);
+            }
+        });
+    }
+    const drawerContextValue = useMemo(() => drawerContext.concat({ uniqueId, placement }), [drawerContext, placement, uniqueId]);
+    useEffect(() => {
+        let offset = 0;
+        document.querySelectorAll(`[data-l-drawer-ancestry~="${uniqueId}"]`).forEach((el) => {
+            offset += placement === 'top' || placement === 'bottom' ? el.offsetHeight : el.offsetWidth;
+        });
+        offset = (offset / 3) * 2;
+        if (drawerRef.current) {
+            drawerRef.current.style.transform =
+                placement === 'top'
+                    ? `translateY(${offset}px)`
+                    : placement === 'right'
+                        ? `translateX(-${offset}px)`
+                        : placement === 'bottom'
+                            ? `translateY(-${offset}px)`
+                            : `translateX(${offset}px)`;
+        }
+    });
+    const maxZIndex = useMaxIndex(visible);
+    const zIndex = !isUndefined(zIndexProp)
+        ? zIndexProp
+        : !isFixed
+            ? `var(--${namespace}-zindex-absolute)`
+            : `calc(var(--${namespace}-zindex-fixed) + ${maxZIndex})`;
+    useLockScroll(isFixed && visible);
+    const transitionStyles = (() => {
+        const transform = placement === 'top'
+            ? 'translate(0, -100%)'
+            : placement === 'right'
+                ? 'translate(100%, 0)'
+                : placement === 'bottom'
+                    ? 'translate(0, 100%)'
+                    : 'translate(-100%, 0)';
+        return {
+            enter: { transform },
+            entering: {
+                transition: ['transform'].map((attr) => `${attr} ${TTANSITION_DURING_BASE}ms ease-out`).join(', '),
+            },
+            leaving: {
+                transform,
+                transition: ['transform'].map((attr) => `${attr} ${TTANSITION_DURING_BASE}ms ease-in`).join(', '),
+            },
+            leaved: { transform },
+        };
+    })();
+    const headerNode = (() => {
+        if (headerProp) {
+            const node = isString(headerProp) ? _jsx(DrawerHeader, { children: headerProp }) : headerProp;
+            return cloneElement(node, {
+                _id: titleId,
+                _onClose: () => {
+                    onClose === null || onClose === void 0 ? void 0 : onClose();
+                },
+            });
+        }
+    })();
+    return (_jsx(Portal, { selector: isUndefined(container)
+            ? () => {
+                let el = document.getElementById(`${namespace}-drawer-root`);
+                if (!el) {
+                    el = document.createElement('div');
+                    el.id = `${namespace}-drawer-root`;
+                    document.body.appendChild(el);
+                }
+                return el;
+            }
+            : container, children: _jsx(Transition, { enter: visible, during: TTANSITION_DURING_BASE, skipFirstTransition: skipFirstTransition, destroyWhenLeaved: destroyAfterClose, afterEnter: () => {
+                afterVisibleChange === null || afterVisibleChange === void 0 ? void 0 : afterVisibleChange(true);
+                dataRef.current.prevActiveEl = document.activeElement;
+                if (drawerRef.current) {
+                    drawerRef.current.focus({ preventScroll: true });
+                }
+            }, afterLeave: () => {
+                afterVisibleChange === null || afterVisibleChange === void 0 ? void 0 : afterVisibleChange(false);
+                if (dataRef.current.prevActiveEl) {
+                    dataRef.current.prevActiveEl.focus({ preventScroll: true });
+                }
+            }, children: (state) => {
+                var _a;
+                return (_jsxs("div", Object.assign({}, restProps, mergeCS(styled('drawer', `drawer--${placement}`), {
+                    className: restProps.className,
+                    style: Object.assign(Object.assign({}, restProps.style), { display: state === 'leaved' ? 'none' : undefined, position: isFixed ? undefined : 'absolute', zIndex }),
+                }), { ref: drawerRef, tabIndex: (_a = restProps.tabIndex) !== null && _a !== void 0 ? _a : -1, role: "dialog", "aria-modal": true, "aria-labelledby": headerNode ? titleId : undefined, "aria-describedby": bodyId, onKeyDown: (e) => {
+                        var _a;
+                        (_a = restProps.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(restProps, e);
+                        if (visible && escClosable && e.code === 'Escape') {
+                            e.stopPropagation();
+                            e.preventDefault();
+                            onClose === null || onClose === void 0 ? void 0 : onClose();
+                        }
+                        handleModalKeyDown(e);
+                    }, children: [mask && (_jsx(Mask, { visible: visible, onClose: () => {
+                                if (maskClosable) {
+                                    onClose === null || onClose === void 0 ? void 0 : onClose();
+                                }
+                            } })), _jsxs("div", Object.assign({}, mergeCS(styled('drawer__content'), {
+                            style: Object.assign({ width: placement === 'left' || placement === 'right' ? width : undefined, height: placement === 'bottom' || placement === 'top' ? height : undefined }, transitionStyles[state]),
+                        }), { "data-l-drawer-ancestry": ancestryIds.join(' '), children: [headerNode, _jsx("div", Object.assign({}, styled('drawer__body'), { id: bodyId, children: _jsx(DrawerContext.Provider, { value: drawerContextValue, children: children }) })), footer &&
+                                    cloneElement(footer, {
+                                        _onClose: () => {
+                                            onClose === null || onClose === void 0 ? void 0 : onClose();
+                                        },
+                                    })] }))] })));
+            } }) }));
+};
+Drawer.Header = DrawerHeader;
+Drawer.Footer = DrawerFooter;

package/drawer/DrawerFooter.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { DrawerFooterProps } from './types';
+export declare function DrawerFooter(props: DrawerFooterProps): JSX.Element | null;

package/drawer/DrawerFooter.js

@@ -0,0 +1,51 @@
+import { __rest } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Children } from 'react';
+import { CLASSES } from './vars';
+import { Button } from '../button';
+import { useComponentProps, useControlled, useStyled, useTranslation } from '../hooks';
+import { mergeCS } from '../utils';
+export function DrawerFooter(props) {
+    const _a = useComponentProps('DrawerFooter', props), { styleOverrides, styleProvider, align = 'right', actions = ['cancel', 'ok'], cancelProps: cancelPropsProp, okProps: okPropsProp, onCancelClick, onOkClick, _onClose } = _a, restProps = __rest(_a, ["styleOverrides", "styleProvider", "align", "actions", "cancelProps", "okProps", "onCancelClick", "onOkClick", "_onClose"]);
+    const styled = useStyled(CLASSES, { drawer: styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider.drawer }, styleOverrides);
+    const { t } = useTranslation();
+    const [cancelLoading, changeCancelLoading] = useControlled(false, cancelPropsProp === null || cancelPropsProp === void 0 ? void 0 : cancelPropsProp.loading);
+    const [okLoading, changeOkLoading] = useControlled(false, okPropsProp === null || okPropsProp === void 0 ? void 0 : okPropsProp.loading);
+    const cancelProps = Object.assign(Object.assign({}, cancelPropsProp), { loading: cancelLoading, onClick: () => {
+            const shouldClose = onCancelClick === null || onCancelClick === void 0 ? void 0 : onCancelClick();
+            if (shouldClose instanceof Promise) {
+                changeCancelLoading(true);
+                shouldClose.then((val) => {
+                    changeCancelLoading(false);
+                    if (val !== false) {
+                        _onClose === null || _onClose === void 0 ? void 0 : _onClose();
+                    }
+                });
+            }
+            else if (shouldClose !== false) {
+                _onClose === null || _onClose === void 0 ? void 0 : _onClose();
+            }
+        } });
+    const okProps = Object.assign(Object.assign({}, okPropsProp), { loading: okLoading, onClick: () => {
+            const shouldClose = onOkClick === null || onOkClick === void 0 ? void 0 : onOkClick();
+            if (shouldClose instanceof Promise) {
+                changeOkLoading(true);
+                shouldClose.then((val) => {
+                    changeOkLoading(false);
+                    if (val !== false) {
+                        _onClose === null || _onClose === void 0 ? void 0 : _onClose();
+                    }
+                });
+            }
+            else if (shouldClose !== false) {
+                _onClose === null || _onClose === void 0 ? void 0 : _onClose();
+            }
+        } });
+    return (_jsx("div", Object.assign({}, restProps, mergeCS(styled('drawer__footer', `drawer__footer--${align}`), {
+        className: restProps.className,
+        style: restProps.style,
+    }), { children: Children.map(actions, (action) => {
+            var _a, _b, _c;
+            return action === 'cancel' ? (_jsx(Button, Object.assign({}, cancelProps, { pattern: (_a = cancelProps.pattern) !== null && _a !== void 0 ? _a : 'secondary', children: (_b = cancelProps.children) !== null && _b !== void 0 ? _b : t('Footer', 'Cancel') }))) : action === 'ok' ? (_jsx(Button, Object.assign({}, okProps, { children: (_c = okProps.children) !== null && _c !== void 0 ? _c : t('Footer', 'OK') }))) : (action);
+        }) })));
+}

package/drawer/DrawerHeader.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { DrawerHeaderProps } from './types';
+export declare function DrawerHeader(props: DrawerHeaderProps): JSX.Element | null;

package/drawer/DrawerHeader.js

@@ -0,0 +1,37 @@
+import { __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ReactComponent as CloseOutlined } from '@material-design-icons/svg/outlined/close.svg';
+import { Children } from 'react';
+import { CLASSES } from './vars';
+import { Button } from '../button';
+import { useComponentProps, useControlled, useStyled, useTranslation } from '../hooks';
+import { Icon } from '../icon';
+import { mergeCS } from '../utils';
+export function DrawerHeader(props) {
+    const _a = useComponentProps('DrawerHeader', props), { styleOverrides, styleProvider, children, actions = ['close'], closeProps: closePropsProp, onCloseClick, _id, _onClose } = _a, restProps = __rest(_a, ["styleOverrides", "styleProvider", "children", "actions", "closeProps", "onCloseClick", "_id", "_onClose"]);
+    const styled = useStyled(CLASSES, { drawer: styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider.drawer }, styleOverrides);
+    const { t } = useTranslation();
+    const [closeLoading, changeCloseLoading] = useControlled(false, closePropsProp === null || closePropsProp === void 0 ? void 0 : closePropsProp.loading);
+    const closeProps = Object.assign(Object.assign({}, closePropsProp), { loading: closeLoading, onClick: () => {
+            const shouldClose = onCloseClick === null || onCloseClick === void 0 ? void 0 : onCloseClick();
+            if (shouldClose instanceof Promise) {
+                changeCloseLoading(true);
+                shouldClose.then((val) => {
+                    changeCloseLoading(false);
+                    if (val !== false) {
+                        _onClose === null || _onClose === void 0 ? void 0 : _onClose();
+                    }
+                });
+            }
+            else if (shouldClose !== false) {
+                _onClose === null || _onClose === void 0 ? void 0 : _onClose();
+            }
+        } });
+    return (_jsxs("div", Object.assign({}, restProps, mergeCS(styled('drawer__header'), {
+        className: restProps.className,
+        style: restProps.style,
+    }), { children: [_jsx("div", Object.assign({}, styled('drawer__header-title'), { id: _id, children: children })), _jsx("div", Object.assign({}, styled('drawer__header-actions'), { children: Children.map(actions, (action) => {
+                    var _a, _b, _c;
+                    return action === 'close' ? (_jsx(Button, Object.assign({}, closeProps, { "aria-label": (_a = closeProps['aria-label']) !== null && _a !== void 0 ? _a : t('Close'), pattern: (_b = closeProps.pattern) !== null && _b !== void 0 ? _b : 'text', icon: (_c = closeProps.icon) !== null && _c !== void 0 ? _c : (_jsx(Icon, { children: _jsx(CloseOutlined, {}) })) }))) : (action);
+                }) }))] })));
+}

package/drawer/index.d.ts

@@ -0,0 +1,2 @@
+export type { DrawerProps, DrawerHeaderProps, DrawerFooterProps } from './types';
+export { Drawer } from './Drawer';

package/drawer/index.js

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

package/drawer/types.d.ts

@@ -0,0 +1,36 @@
+/// <reference types="react" />
+import type { CLASSES } from './vars';
+import type { ButtonProps } from '../button';
+import type { BaseProps } from '../types';
+import type { RefExtra } from '@laser-ui/hooks/useRefExtra';
+export {};
+export interface DrawerProps extends BaseProps<'drawer', typeof CLASSES>, React.HTMLAttributes<HTMLDivElement> {
+    visible: boolean;
+    header?: React.ReactElement | string;
+    footer?: React.ReactElement;
+    placement?: 'top' | 'right' | 'bottom' | 'left';
+    width?: number | string;
+    height?: number | string;
+    mask?: boolean;
+    maskClosable?: boolean;
+    escClosable?: boolean;
+    container?: RefExtra;
+    skipFirstTransition?: boolean;
+    destroyAfterClose?: boolean;
+    zIndex?: number | string;
+    onClose?: () => void;
+    afterVisibleChange?: (visible: boolean) => void;
+}
+export interface DrawerHeaderProps extends BaseProps<'drawer', typeof CLASSES>, React.HTMLAttributes<HTMLDivElement> {
+    actions?: React.ReactNode[];
+    closeProps?: ButtonProps;
+    onCloseClick?: () => any | Promise<any>;
+}
+export interface DrawerFooterProps extends BaseProps<'drawer', typeof CLASSES>, Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
+    align?: 'left' | 'center' | 'right';
+    actions?: React.ReactNode[];
+    cancelProps?: ButtonProps;
+    okProps?: ButtonProps;
+    onCancelClick?: () => any | Promise<any>;
+    onOkClick?: () => any | Promise<any>;
+}

package/drawer/types.js

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

package/drawer/vars.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+export declare const CLASSES: {
+    drawer: string;
+    'drawer--top': string;
+    'drawer--right': string;
+    'drawer--bottom': string;
+    'drawer--left': string;
+    drawer__content: string;
+    drawer__header: string;
+    'drawer__header-title': string;
+    'drawer__header-actions': string;
+    drawer__body: string;
+    drawer__footer: string;
+    'drawer__footer--left': string;
+    'drawer__footer--center': string;
+    'drawer__footer--right': string;
+};
+export declare const DrawerContext: import("react").Context<{
+    uniqueId: string;
+    placement: 'top' | 'right' | 'bottom' | 'left';
+}[]>;

package/drawer/vars.js

@@ -0,0 +1,18 @@
+import { createContext } from 'react';
+export const CLASSES = {
+    drawer: '^drawer',
+    'drawer--top': '^drawer--top',
+    'drawer--right': '^drawer--right',
+    'drawer--bottom': '^drawer--bottom',
+    'drawer--left': '^drawer--left',
+    drawer__content: '^drawer__content',
+    drawer__header: '^drawer__header',
+    'drawer__header-title': '^drawer__header-title',
+    'drawer__header-actions': '^drawer__header-actions',
+    drawer__body: '^drawer__body',
+    drawer__footer: '^drawer__footer',
+    'drawer__footer--left': '^drawer__footer--left',
+    'drawer__footer--center': '^drawer__footer--center',
+    'drawer__footer--right': '^drawer__footer--right',
+};
+export const DrawerContext = createContext([]);

package/dropdown/Dropdown.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import type { DropdownItem, DropdownProps, DropdownRef } from './types';
+declare function DropdownFC<ID extends React.Key, T extends DropdownItem<ID>>(props: DropdownProps<ID, T>, ref: React.ForwardedRef<DropdownRef>): JSX.Element | null;
+export declare const Dropdown: <ID extends React.Key, T extends DropdownItem<ID>>(props: DropdownProps<ID, T> & React.RefAttributes<DropdownRef>) => ReturnType<typeof DropdownFC>;
+export {};