@laser-ui/components 0.0.1

package/internal/popup/Popup.js

@@ -0,0 +1,132 @@
+import { useAsync, useEvent, useRefExtra, useResize } from '@laser-ui/hooks';
+import { isUndefined } from 'lodash';
+import { cloneElement, useEffect, useRef } from 'react';
+import { fromEvent } from 'rxjs';
+import { useLayout, useListenGlobalScrolling } from '../../hooks';
+export function Popup(props) {
+    const { children, visible: visibleProp, trigger, disabled = false, mouseEnterDelay = 150, mouseLeaveDelay = 200, updatePosition, onVisibleChange, } = props;
+    const { pageScrollRef, contentResizeRef } = useLayout();
+    const windowRef = useRefExtra(() => window);
+    const dataRef = useRef({});
+    const async = useAsync();
+    const handleTrigger = (visible, behavior) => {
+        var _a, _b;
+        (_b = (_a = dataRef.current).clearTid) === null || _b === void 0 ? void 0 : _b.call(_a);
+        const changeVisible = () => {
+            if (isUndefined(visible)) {
+                onVisibleChange(!visibleProp);
+            }
+            else if (!Object.is(visibleProp, visible)) {
+                onVisibleChange(visible);
+            }
+        };
+        if (behavior) {
+            switch (behavior) {
+                case 'hover':
+                    if (visible) {
+                        dataRef.current.clearTid = async.setTimeout(() => changeVisible(), mouseEnterDelay);
+                    }
+                    else {
+                        dataRef.current.clearTid = async.setTimeout(() => changeVisible(), mouseLeaveDelay);
+                    }
+                    break;
+                case 'popup-hover':
+                    if (!visible) {
+                        dataRef.current.clearTid = async.setTimeout(() => changeVisible(), mouseLeaveDelay);
+                    }
+                    break;
+                default:
+                    break;
+            }
+        }
+        else {
+            changeVisible();
+        }
+    };
+    const listenGlobalScrolling = useListenGlobalScrolling(updatePosition.fn, disabled || !visibleProp);
+    useEffect(() => {
+        if (!disabled && visibleProp && !listenGlobalScrolling) {
+            const ob = fromEvent([pageScrollRef, ...updatePosition.containerRefs].map((ref) => ref.current).filter((el) => el), 'scroll', { passive: true }).subscribe({
+                next: () => {
+                    updatePosition.fn();
+                },
+            });
+            return () => {
+                ob.unsubscribe();
+            };
+        }
+    });
+    useResize(updatePosition.triggerRef, updatePosition.fn, undefined, disabled || !visibleProp);
+    useResize(updatePosition.popupRef, updatePosition.fn, undefined, disabled || !visibleProp);
+    useResize(contentResizeRef, updatePosition.fn, undefined, disabled || !visibleProp);
+    useEvent(windowRef, 'click', () => {
+        dataRef.current.clearClickOut = async.requestAnimationFrame(() => {
+            handleTrigger(false);
+        });
+    }, { capture: true }, disabled || !visibleProp || trigger !== 'click');
+    return children({
+        renderTrigger: (el) => {
+            if (disabled) {
+                return el;
+            }
+            const triggerProps = {};
+            switch (trigger) {
+                case 'hover':
+                    triggerProps.onMouseEnter = (e) => {
+                        var _a, _b;
+                        (_b = (_a = el.props).onMouseEnter) === null || _b === void 0 ? void 0 : _b.call(_a, e);
+                        handleTrigger(true, 'hover');
+                    };
+                    triggerProps.onMouseLeave = (e) => {
+                        var _a, _b;
+                        (_b = (_a = el.props).onMouseLeave) === null || _b === void 0 ? void 0 : _b.call(_a, e);
+                        handleTrigger(false, 'hover');
+                    };
+                    break;
+                case 'click':
+                    triggerProps.onClick = (e) => {
+                        var _a, _b, _c, _d;
+                        (_b = (_a = el.props).onClick) === null || _b === void 0 ? void 0 : _b.call(_a, e);
+                        (_d = (_c = dataRef.current).clearClickOut) === null || _d === void 0 ? void 0 : _d.call(_c);
+                        handleTrigger();
+                    };
+                    break;
+                default:
+                    break;
+            }
+            return cloneElement(el, triggerProps);
+        },
+        renderPopup: (el) => {
+            if (disabled) {
+                return el;
+            }
+            const popupProps = {};
+            if (visibleProp) {
+                switch (trigger) {
+                    case 'hover':
+                        popupProps.onMouseEnter = (e) => {
+                            var _a, _b;
+                            (_b = (_a = el.props).onMouseEnter) === null || _b === void 0 ? void 0 : _b.call(_a, e);
+                            handleTrigger(true, 'popup-hover');
+                        };
+                        popupProps.onMouseLeave = (e) => {
+                            var _a, _b;
+                            (_b = (_a = el.props).onMouseLeave) === null || _b === void 0 ? void 0 : _b.call(_a, e);
+                            handleTrigger(false, 'popup-hover');
+                        };
+                        break;
+                    case 'click':
+                        popupProps.onClick = (e) => {
+                            var _a, _b, _c, _d;
+                            (_b = (_a = el.props).onClick) === null || _b === void 0 ? void 0 : _b.call(_a, e);
+                            (_d = (_c = dataRef.current).clearClickOut) === null || _d === void 0 ? void 0 : _d.call(_c);
+                        };
+                        break;
+                    default:
+                        break;
+                }
+            }
+            return cloneElement(el, popupProps);
+        },
+    });
+}

package/internal/popup/index.d.ts

@@ -0,0 +1,2 @@
+export type { PopupProps } from './types';
+export { Popup } from './Popup';

package/internal/popup/index.js

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

package/internal/popup/types.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+import type { CloneHTMLElement } from '../../types';
+export {};
+export interface PopupProps {
+    children: (props: {
+        renderTrigger: CloneHTMLElement;
+        renderPopup: CloneHTMLElement;
+    }) => JSX.Element | null;
+    visible: boolean;
+    trigger: 'hover' | 'click';
+    disabled?: boolean;
+    mouseEnterDelay?: number;
+    mouseLeaveDelay?: number;
+    updatePosition: {
+        fn: () => void;
+        triggerRef: React.RefObject<HTMLElement>;
+        popupRef: React.RefObject<HTMLElement>;
+        containerRefs: React.RefObject<HTMLElement | null>[];
+    };
+    onVisibleChange: (visible: boolean) => void;
+}

package/internal/popup/types.js

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

package/internal/portal/Portal.d.ts

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

package/internal/portal/Portal.js

@@ -0,0 +1,14 @@
+import { useIsomorphicLayoutEffect } from '@laser-ui/hooks';
+import { isString } from 'lodash';
+import { forwardRef, useImperativeHandle, useState } from 'react';
+import { createPortal } from 'react-dom';
+export const Portal = forwardRef((props, ref) => {
+    const { children, selector } = props;
+    const [container, setContainer] = useState(null);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    useIsomorphicLayoutEffect(() => {
+        setContainer(isString(selector) ? document.querySelector(selector) : selector());
+    });
+    useImperativeHandle(ref, () => container, [container]);
+    return container && createPortal(children, container);
+});

package/internal/portal/index.d.ts

@@ -0,0 +1,2 @@
+export type { PortalProps } from './types';
+export { Portal } from './Portal';

package/internal/portal/index.js

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

package/internal/portal/types.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export {};
+export interface PortalProps {
+    children: React.ReactNode;
+    selector: (() => HTMLElement | null) | string;
+}

package/internal/portal/types.js

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

package/internal/transition/CollapseTransition.d.ts

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

package/internal/transition/CollapseTransition.js

@@ -0,0 +1,101 @@
+import { __rest } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { isNumber, isUndefined } from 'lodash';
+import { useRef } from 'react';
+import { Transition } from './Transition';
+export function CollapseTransition(props) {
+    const { children, originalSize: originalSizeProp, collapsedSize, styles } = props, restProps = __rest(props, ["children", "originalSize", "collapsedSize", "styles"]);
+    const dataRef = useRef({
+        width: 0,
+        height: 0,
+    });
+    const elRef = useRef(null);
+    const isHorizontal = !isUndefined(originalSizeProp.width);
+    const getSizeStyle = (val) => (isUndefined(val) ? '' : isNumber(val) ? `${val}px` : val);
+    return (_jsx(Transition, Object.assign({}, restProps, { afterRender: () => {
+            var _a, _b, _c, _d, _e;
+            (_a = restProps.afterRender) === null || _a === void 0 ? void 0 : _a.call(restProps);
+            if (elRef.current) {
+                if (originalSizeProp.width === 'auto') {
+                    const cssText = elRef.current.style.cssText;
+                    elRef.current.style.width = 'auto';
+                    elRef.current.style.paddingLeft = getSizeStyle((_b = originalSizeProp.padding) === null || _b === void 0 ? void 0 : _b[3]);
+                    elRef.current.style.paddingRight = getSizeStyle((_c = originalSizeProp.padding) === null || _c === void 0 ? void 0 : _c[1]);
+                    dataRef.current.width = elRef.current.offsetWidth;
+                    elRef.current.style.cssText = cssText;
+                    // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+                    elRef.current.offsetTop;
+                }
+                else if (originalSizeProp.height === 'auto') {
+                    const cssText = elRef.current.style.cssText;
+                    elRef.current.style.height = 'auto';
+                    elRef.current.style.paddingTop = getSizeStyle((_d = originalSizeProp.padding) === null || _d === void 0 ? void 0 : _d[0]);
+                    elRef.current.style.paddingBottom = getSizeStyle((_e = originalSizeProp.padding) === null || _e === void 0 ? void 0 : _e[2]);
+                    dataRef.current.height = elRef.current.offsetHeight;
+                    elRef.current.style.cssText = cssText;
+                    // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+                    elRef.current.offsetTop;
+                }
+            }
+        }, children: (state) => {
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
+            const transitionStyle = Object.assign({}, styles[state]);
+            const originalSize = {
+                [isHorizontal ? 'width' : 'height']: isHorizontal
+                    ? originalSizeProp.width === 'auto'
+                        ? dataRef.current.width
+                        : originalSizeProp.width
+                    : originalSizeProp.height === 'auto'
+                        ? dataRef.current.height
+                        : originalSizeProp.height,
+            };
+            if (!isUndefined(originalSizeProp.padding)) {
+                originalSize.padding = originalSizeProp.padding.map((p) => getSizeStyle(p)).join(' ');
+            }
+            const collapsedStyle = Object.assign({
+                [isHorizontal ? 'width' : 'height']: collapsedSize[isHorizontal ? 'width' : 'height'],
+                overflow: 'hidden',
+            }, isHorizontal
+                ? {
+                    paddingLeft: (_b = (_a = collapsedSize.padding) === null || _a === void 0 ? void 0 : _a[3]) !== null && _b !== void 0 ? _b : 0,
+                    paddingRight: (_d = (_c = collapsedSize.padding) === null || _c === void 0 ? void 0 : _c[1]) !== null && _d !== void 0 ? _d : 0,
+                    marginLeft: (_f = (_e = collapsedSize.margin) === null || _e === void 0 ? void 0 : _e[3]) !== null && _f !== void 0 ? _f : 0,
+                    marginRight: (_h = (_g = collapsedSize.margin) === null || _g === void 0 ? void 0 : _g[1]) !== null && _h !== void 0 ? _h : 0,
+                }
+                : {
+                    paddingTop: (_k = (_j = collapsedSize.padding) === null || _j === void 0 ? void 0 : _j[0]) !== null && _k !== void 0 ? _k : 0,
+                    paddingBottom: (_m = (_l = collapsedSize.padding) === null || _l === void 0 ? void 0 : _l[2]) !== null && _m !== void 0 ? _m : 0,
+                    marginTop: (_p = (_o = collapsedSize.margin) === null || _o === void 0 ? void 0 : _o[0]) !== null && _p !== void 0 ? _p : 0,
+                    marginBottom: (_r = (_q = collapsedSize.margin) === null || _q === void 0 ? void 0 : _q[2]) !== null && _r !== void 0 ? _r : 0,
+                });
+            switch (state) {
+                case 'enter':
+                    Object.assign(transitionStyle, collapsedStyle);
+                    break;
+                case 'entering':
+                    Object.assign(transitionStyle, originalSize, {
+                        overflow: 'hidden',
+                    });
+                    break;
+                case 'leave':
+                    if (elRef.current) {
+                        originalSize[isHorizontal ? 'width' : 'height'] = elRef.current[isHorizontal ? 'offsetWidth' : 'offsetHeight'];
+                    }
+                    Object.assign(transitionStyle, originalSize, {
+                        overflow: 'hidden',
+                    });
+                    break;
+                case 'leaving':
+                    Object.assign(transitionStyle, collapsedStyle);
+                    break;
+                case 'leaved':
+                    Object.assign(transitionStyle, collapsedStyle, {
+                        overflow: 'hidden',
+                    });
+                    break;
+                default:
+                    break;
+            }
+            return children(elRef, transitionStyle, state);
+        } })));
+}

package/internal/transition/Transition.d.ts

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

package/internal/transition/Transition.js

@@ -0,0 +1,87 @@
+import { useAsync } from '@laser-ui/hooks';
+import { isArray, isBoolean, isNumber } from 'lodash';
+import { useEffect, useMemo, useRef, useState } from 'react';
+export function Transition(props) {
+    const { children, enter: enterProp, defaultEnter, during: duringProp, mountBeforeFirstEnter = true, skipFirstTransition = true, destroyWhenLeaved = false, afterRender, afterEnter, afterLeave, } = props;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    const initEnter = useMemo(() => (isBoolean(enterProp) ? enterProp : defaultEnter), []);
+    const initState = useMemo(() => {
+        const [skipEnter, skipLeave] = isArray(skipFirstTransition) ? skipFirstTransition : [skipFirstTransition, skipFirstTransition];
+        if (initEnter) {
+            return skipEnter ? 'entered' : 'enter';
+        }
+        else {
+            return skipLeave ? 'leaved' : 'leave';
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    const dataRef = useRef({
+        prevEnter: initEnter,
+        isFirstEnter: !initEnter,
+        state: initState,
+    });
+    const enter = isBoolean(enterProp) ? enterProp : enterProp(dataRef.current.prevEnter);
+    const async = useAsync();
+    const [stateChange, setStateChange] = useState(0);
+    if (dataRef.current.prevEnter !== enter) {
+        dataRef.current.prevEnter = enter;
+        dataRef.current.state = enter ? 'enter' : 'leave';
+        dataRef.current.isFirstEnter = false;
+    }
+    const state = dataRef.current.state;
+    const nextFrame = (cb) => {
+        dataRef.current.clearTid = async.requestAnimationFrame(() => {
+            dataRef.current.clearTid = async.setTimeout(cb);
+        });
+    };
+    useEffect(() => {
+        if (state === 'entered') {
+            afterRender === null || afterRender === void 0 ? void 0 : afterRender();
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    useEffect(() => {
+        var _a, _b;
+        (_b = (_a = dataRef.current).clearTid) === null || _b === void 0 ? void 0 : _b.call(_a);
+        if (state === 'enter') {
+            afterRender === null || afterRender === void 0 ? void 0 : afterRender();
+            nextFrame(() => {
+                dataRef.current.state = 'entering';
+                setStateChange((prevStateChange) => prevStateChange + 1);
+            });
+        }
+        else if (state === 'leave') {
+            nextFrame(() => {
+                dataRef.current.state = 'leaving';
+                setStateChange((prevStateChange) => prevStateChange + 1);
+            });
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [enter]);
+    useEffect(() => {
+        if (dataRef.current.state === 'entering' || dataRef.current.state === 'leaving') {
+            const during = isNumber(duringProp) ? duringProp : enter ? duringProp.enter : duringProp.leave;
+            dataRef.current.clearTid = async.setTimeout(() => {
+                dataRef.current.state = enter ? 'entered' : 'leaved';
+                setStateChange((prevStateChange) => prevStateChange + 1);
+            }, during);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [stateChange]);
+    useEffect(() => {
+        if (dataRef.current.state === 'entered' || dataRef.current.state === 'leaved') {
+            enter ? afterEnter === null || afterEnter === void 0 ? void 0 : afterEnter() : afterLeave === null || afterLeave === void 0 ? void 0 : afterLeave();
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [stateChange]);
+    const shouldRender = (() => {
+        if (state === 'leaved' && destroyWhenLeaved) {
+            return false;
+        }
+        if (dataRef.current.isFirstEnter && !mountBeforeFirstEnter) {
+            return false;
+        }
+        return true;
+    })();
+    return shouldRender ? children(state) : null;
+}

package/internal/transition/index.d.ts

@@ -0,0 +1,3 @@
+export type { TransitionProps, CollapseTransitionProps } from './types';
+export { Transition } from './Transition';
+export { CollapseTransition } from './CollapseTransition';

package/internal/transition/index.js

@@ -0,0 +1,2 @@
+export { Transition } from './Transition';
+export { CollapseTransition } from './CollapseTransition';

package/internal/transition/types.d.ts

@@ -0,0 +1,33 @@
+/// <reference types="react" />
+export {};
+export type TransitionState = 'enter' | 'entering' | 'entered' | 'leave' | 'leaving' | 'leaved';
+export interface TransitionProps {
+    children: (state: TransitionState) => JSX.Element | null;
+    enter: boolean | ((prev: boolean) => boolean);
+    defaultEnter?: boolean;
+    during: number | {
+        enter: number;
+        leave: number;
+    };
+    mountBeforeFirstEnter?: boolean;
+    skipFirstTransition?: boolean | [boolean, boolean];
+    destroyWhenLeaved?: boolean;
+    afterRender?: () => void;
+    afterEnter?: () => void;
+    afterLeave?: () => void;
+}
+export interface CollapseTransitionProps extends Omit<TransitionProps, 'children'> {
+    children: (ref: React.RefObject<any>, style: React.CSSProperties, state: TransitionState) => JSX.Element | null;
+    originalSize: {
+        width?: string | number;
+        height?: string | number;
+        padding?: [string | number, string | number, string | number, string | number];
+    };
+    collapsedSize: {
+        width?: string | number;
+        height?: string | number;
+        padding?: [string | number, string | number, string | number, string | number];
+        margin?: [string | number, string | number, string | number, string | number];
+    };
+    styles: Partial<Record<TransitionState, React.CSSProperties>>;
+}

package/internal/transition/types.js

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

package/internal/wave/Wave.d.ts

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

package/internal/wave/Wave.js

@@ -0,0 +1,25 @@
+import { __rest } from "tslib";
+import { createElement as _createElement } from "react";
+import { useEventCallback } from '@laser-ui/hooks';
+import { forwardRef, useImperativeHandle, useState } from 'react';
+import { CLASSES } from './vars';
+import { useNamespace, useStyled } from '../../hooks';
+import { mergeCS } from '../../utils';
+export const Wave = forwardRef((props, ref) => {
+    const { color } = props, restProps = __rest(props, ["color"]);
+    const namespace = useNamespace();
+    const styled = useStyled(CLASSES, { wave: undefined });
+    const [node, setNode] = useState(null);
+    const wave = useEventCallback(() => {
+        setNode(_createElement("div", Object.assign({}, restProps, mergeCS(styled('wave'), {
+            className: restProps.className,
+            style: Object.assign(Object.assign({}, restProps.style), { color }),
+        }), { key: Math.random(), onAnimationEnd: (e) => {
+                if (e.animationName === `${namespace}-wave-fade-out`) {
+                    setNode(null);
+                }
+            } })));
+    });
+    useImperativeHandle(ref, () => wave, [wave]);
+    return node;
+});

package/internal/wave/index.d.ts

@@ -0,0 +1,2 @@
+export type { WaveRef, WaveProps } from './types';
+export { Wave } from './Wave';

package/internal/wave/index.js

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

package/internal/wave/types.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export {};
+export type WaveRef = () => void;
+export interface WaveProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
+    color: string;
+}

package/internal/wave/types.js

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

package/internal/wave/vars.d.ts

@@ -0,0 +1,3 @@
+export declare const CLASSES: {
+    wave: string;
+};

package/internal/wave/vars.js

@@ -0,0 +1,3 @@
+export const CLASSES = {
+    wave: '^wave',
+};

package/menu/Menu.d.ts

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