@laser-ui/components 1.6.0 → 2.0.0

package/badge/internal/BadgeNumber.js

@@ -1,37 +1,47 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { createElement as _createElement } from "react";
-import { useEffect, useRef, useState } from 'react';
+import { useAsync, useIsomorphicLayoutEffect } from '@laser-ui/hooks';
+import { useRef, useState } from 'react';
 export function BadgeNumber(props) {
-    const { styled, value, valueDown } = props;
+    const { styled, value, num } = props;
+    const async = useAsync();
     const containerRef = useRef(null);
-    const dataRef = useRef({
-        prevValue: value,
-    });
+    const prevValue = useRef(value);
+    const prevNum = useRef(num);
     const [nums, setNums] = useState([value]);
-    useEffect(() => {
-        if (containerRef.current && dataRef.current.prevValue !== value) {
-            let newNums = Array.from({ length: 10 }).map((_, i) => i);
-            if (valueDown) {
-                newNums = newNums.concat(Array.from({ length: dataRef.current.prevValue + 1 }).map((_, i) => i));
-                newNums = newNums.slice(newNums.length - 10, newNums.length);
+    useIsomorphicLayoutEffect(() => {
+        if (containerRef.current && num !== prevNum.current) {
+            let prevNums = Array.from({ length: 10 }).map((_, i) => i);
+            if (num < prevNum.current) {
+                prevNums = prevNums.concat(Array.from({ length: prevValue.current + 1 }).map((_, i) => i));
+                prevNums = prevNums.slice(prevNums.length - 10, prevNums.length);
                 containerRef.current.style.cssText = 'transform:translateY(-900%);transition:none;';
             }
             else {
-                newNums = Array.from({ length: 10 - dataRef.current.prevValue })
-                    .map((_, i) => dataRef.current.prevValue + i)
-                    .concat(newNums);
-                newNums = newNums.slice(0, 10);
+                prevNums = Array.from({ length: 10 - prevValue.current })
+                    .map((_, i) => prevValue.current + i)
+                    .concat(prevNums);
+                prevNums = prevNums.slice(0, 10);
                 containerRef.current.style.cssText = 'transform:translateY(0);transition:none;';
             }
-            dataRef.current.prevValue = value;
-            setNums(newNums);
-        }
-    }, [value, valueDown]);
-    useEffect(() => {
-        if (containerRef.current) {
-            containerRef.current.style.cssText = `transform:translateY(-${nums.findIndex((n) => n === value) * 100}%); `;
+            async.setAfterPainted(() => {
+                if (containerRef.current) {
+                    containerRef.current.style.cssText = `transform:translateY(-${prevNums.findIndex((n) => n === value) * 100}%); `;
+                }
+            });
+            setNums(prevNums);
         }
+        prevValue.current = value;
+        prevNum.current = num;
+        return () => {
+            async.clearAll();
+        };
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [nums]);
-    return (_jsx("div", Object.assign({}, styled('badge__number-container'), { ref: containerRef, children: nums.map((n, i) => (_createElement("span", Object.assign({}, styled('badge__number'), { key: i }), n))) })));
+    }, [num]);
+    return (_jsx("div", Object.assign({}, styled('badge__number-container'), { ref: (instance) => {
+            containerRef.current = instance;
+            return () => {
+                containerRef.current = null;
+            };
+        }, children: nums.map((n, i) => (_createElement("span", Object.assign({}, styled('badge__number'), { key: i }), n))) })));
 }

package/base-input/BaseInput.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import type { BaseInputProps } from './types';
-export declare const BaseInput: import("react").ForwardRefExoticComponent<BaseInputProps & import("react").RefAttributes<HTMLInputElement>>;
+export declare function BaseInput(props: BaseInputProps): import("react/jsx-runtime").JSX.Element;

package/base-input/BaseInput.js

@@ -1,9 +1,9 @@
 import { __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { isString } from 'lodash';
-import { forwardRef, useState } from 'react';
-export const BaseInput = forwardRef((props, ref) => {
-    const { value, onValueChange } = props, restProps = __rest(props, ["value", "onValueChange"]);
+import { useState } from 'react';
+export function BaseInput(props) {
+    const { ref, value, onValueChange } = props, restProps = __rest(props, ["ref", "value", "onValueChange"]);
     const [composing, setComposing] = useState();
     return (_jsx("input", Object.assign({}, restProps, { ref: ref, value: isString(composing) ? composing : value, onCompositionStart: (e) => {
             var _a;
@@ -24,4 +24,4 @@ export const BaseInput = forwardRef((props, ref) => {
                 onValueChange(e.currentTarget.value);
             }
         } })));
-});
+}

package/base-input/types.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 export {};
 export interface BaseInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    ref?: React.Ref<HTMLInputElement>;
     onValueChange: (val: string) => void;
 }

package/breadcrumb/Breadcrumb.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
 import type { BreadcrumbItem, BreadcrumbProps } from './types';
-export declare function Breadcrumb<ID extends React.Key, T extends BreadcrumbItem<ID>>(props: BreadcrumbProps<ID, T>): JSX.Element | null;
+export declare function Breadcrumb<ID extends React.Key, T extends BreadcrumbItem<ID>>(props: BreadcrumbProps<ID, T>): React.ReactElement | null;

package/button/Button.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import type { ButtonProps } from './types';
-export declare const Button: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+export declare function Button(props: ButtonProps): import("react/jsx-runtime").JSX.Element;

package/button/Button.js

@@ -1,18 +1,18 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { checkNodeExist } from '@laser-ui/utils';
-import { forwardRef, useRef } from 'react';
+import { useRef } from 'react';
 import { CLASSES } from './vars';
+import { CircularProgress } from '../circular-progress';
 import { useComponentProps, useDesign, useScopedProps, useStyled } from '../hooks';
 import { Icon } from '../icon';
-import { CircularProgress } from '../internal/circular-progress';
-import { CollapseTransition } from '../internal/transition';
-import { Wave } from '../internal/wave';
+import { CollapseTransition } from '../transition';
 import { mergeCS } from '../utils';
 import { TTANSITION_DURING_SLOW } from '../vars';
-export const Button = forwardRef((props, ref) => {
+import { Wave } from '../wave';
+export function Button(props) {
     var _a;
-    const _b = useComponentProps('Button', props), { children, styleOverrides, styleProvider, pattern = 'primary', theme = 'primary', loading = false, shape, block = false, size: sizeProp, icon, iconRight = false } = _b, restProps = __rest(_b, ["children", "styleOverrides", "styleProvider", "pattern", "theme", "loading", "shape", "block", "size", "icon", "iconRight"]);
+    const _b = useComponentProps('Button', props), { ref, children, styleOverrides, styleProvider, pattern = 'primary', theme = 'primary', loading = false, shape, block = false, size: sizeProp, icon, iconRight = false } = _b, restProps = __rest(_b, ["ref", "children", "styleOverrides", "styleProvider", "pattern", "theme", "loading", "shape", "block", "size", "icon", "iconRight"]);
     const styled = useStyled(CLASSES, { button: styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider.button }, styleOverrides);
     const waveRef = useRef(null);
     const { size, disabled } = useScopedProps({ size: sizeProp, disabled: restProps.disabled || loading });
@@ -32,19 +32,15 @@ export const Button = forwardRef((props, ref) => {
             if (['primary', 'secondary', 'outline', 'dashed'].includes(pattern)) {
                 (_b = waveRef.current) === null || _b === void 0 ? void 0 : _b.call(waveRef);
             }
-        }, children: [_jsx(Wave, { ref: waveRef, color: "var(--color)" }), checkNodeExist(icon) ? (_jsx("div", Object.assign({}, styled('button__icon'), { children: loading ? (_jsx(Icon, { children: _jsx(CircularProgress, {}) })) : (icon) }))) : (_jsx(CollapseTransition, { originalSize: {
-                    width: '',
-                }, collapsedSize: {
-                    width: 0,
-                }, enter: loading, during: TTANSITION_DURING_SLOW, styles: {
-                    entering: {
-                        transition: ['width', 'padding', 'margin'].map((attr) => `${attr} ${TTANSITION_DURING_SLOW}ms linear`).join(', '),
-                    },
-                    leaving: {
-                        transition: ['width', 'padding', 'margin'].map((attr) => `${attr} ${TTANSITION_DURING_SLOW}ms linear`).join(', '),
-                    },
-                    leaved: { display: 'none' },
-                }, destroyWhenLeaved: true, children: (loadingRef, collapseStyle) => (_jsx("div", Object.assign({}, mergeCS(styled('button__icon'), {
-                    style: collapseStyle,
-                }), { ref: loadingRef, children: _jsx(Icon, { children: _jsx(CircularProgress, {}) }) }))) })), _jsx("div", { children: children })] })));
-});
+        }, children: [_jsx(Wave, { ref: (instance) => {
+                    waveRef.current = instance;
+                    return () => {
+                        waveRef.current = null;
+                    };
+                }, color: "var(--color)" }), checkNodeExist(icon) ? (_jsx("div", Object.assign({}, styled('button__icon'), { children: loading ? (_jsx(Icon, { children: _jsx(CircularProgress, {}) })) : (icon) }))) : (_jsx(CollapseTransition, { enter: loading, duration: TTANSITION_DURING_SLOW, children: (transitionRef, leaved) => leaved ? null : (_jsx("div", { ref: (instance) => {
+                        transitionRef(instance);
+                        return () => {
+                            transitionRef(null);
+                        };
+                    }, style: { '--collapse-duration': TTANSITION_DURING_SLOW + 'ms' }, children: _jsx("div", Object.assign({}, styled('button__icon'), { children: _jsx(Icon, { children: _jsx(CircularProgress, {}) }) })) })) })), _jsx("div", { children: children })] })));
+}

package/button/types.d.ts

@@ -3,6 +3,7 @@ import type { CLASSES } from './vars';
 import type { BaseProps, Size } from '../types';
 export {};
 export interface ButtonProps extends BaseProps<'button', typeof CLASSES>, React.ButtonHTMLAttributes<HTMLButtonElement> {
+    ref?: React.Ref<HTMLButtonElement>;
     pattern?: 'primary' | 'secondary' | 'outline' | 'dashed' | 'text' | 'link';
     theme?: 'primary' | 'success' | 'warning' | 'danger';
     loading?: boolean;

package/card/Card.d.ts

@@ -5,7 +5,7 @@ import { CardActions } from './CardActions';
 import { CardContent } from './CardContent';
 import { CardHeader } from './CardHeader';
 export declare const Card: {
-    (props: CardProps): JSX.Element | null;
+    (props: CardProps): React.ReactElement | null;
     Header: typeof CardHeader;
     Content: typeof CardContent;
     Actions: typeof CardActions;

package/card/CardAction.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
 import type { CardActionProps } from './types';
-export declare const CardAction: import("react").ForwardRefExoticComponent<CardActionProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare function CardAction(props: CardActionProps): React.ReactElement | null;

package/card/CardAction.js

@@ -1,12 +1,11 @@
 import { __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from 'react';
 import { CLASSES } from './vars';
 import { useComponentProps, useStyled } from '../hooks';
 import { mergeCS } from '../utils';
-export const CardAction = forwardRef((props, ref) => {
+export function CardAction(props) {
     var _a, _b;
-    const _c = useComponentProps('CardAction', props), { styleOverrides, styleProvider, children, disabled = false } = _c, restProps = __rest(_c, ["styleOverrides", "styleProvider", "children", "disabled"]);
+    const _c = useComponentProps('CardAction', props), { ref, styleOverrides, styleProvider, children, disabled = false } = _c, restProps = __rest(_c, ["ref", "styleOverrides", "styleProvider", "children", "disabled"]);
     const styled = useStyled(CLASSES, { card: styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider.card }, styleOverrides);
     return (_jsx("div", Object.assign({}, restProps, mergeCS(styled('card__action', {
         'card__action.is-disabled': disabled,
@@ -14,4 +13,4 @@ export const CardAction = forwardRef((props, ref) => {
         className: restProps.className,
         style: restProps.style,
     }), { ref: ref, role: (_a = restProps['role']) !== null && _a !== void 0 ? _a : 'button', tabIndex: (_b = restProps['tabIndex']) !== null && _b !== void 0 ? _b : (disabled ? -1 : 0), children: children })));
-});
+}

package/card/CardActions.d.ts

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

package/card/CardActions.js

@@ -1,6 +1,7 @@
 import { __rest } from "tslib";
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { Children } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { has } from 'lodash';
+import { Fragment } from 'react';
 import { CLASSES } from './vars';
 import { useComponentProps, useStyled } from '../hooks';
 import { Separator } from '../separator';
@@ -11,5 +12,8 @@ export function CardActions(props) {
     return (_jsx("div", Object.assign({}, restProps, mergeCS(styled('card__actions'), {
         className: restProps.className,
         style: restProps.style,
-    }), { children: Children.map(actions, (action, index) => (_jsxs(_Fragment, { children: [action, index !== actions.length - 1 && _jsx(Separator, { style: { margin: 8 }, vertical: true })] }))) })));
+    }), { children: actions.map((node, index) => {
+            const { id, action } = (has(node, ['id', 'action']) ? node : { id: index, action: node });
+            return (_jsxs(Fragment, { children: [action, index !== actions.length - 1 && _jsx(Separator, { style: { margin: 8 }, vertical: true })] }, id));
+        }) })));
 }

package/card/CardContent.d.ts

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

package/card/CardHeader.d.ts

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

package/card/types.d.ts

@@ -11,8 +11,12 @@ export interface CardHeaderProps extends BaseProps<'card', typeof CLASSES>, Reac
 export interface CardContentProps extends BaseProps<'card', typeof CLASSES>, React.HTMLAttributes<HTMLDivElement> {
 }
 export interface CardActionsProps extends BaseProps<'card', typeof CLASSES>, Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
-    actions: React.ReactNode[];
+    actions: (React.ReactNode | {
+        id: React.Key;
+        action: React.ReactNode;
+    })[];
 }
 export interface CardActionProps extends BaseProps<'card', typeof CLASSES>, React.HTMLAttributes<HTMLDivElement> {
+    ref?: React.Ref<HTMLDivElement>;
     disabled?: boolean;
 }

package/cascader/Cascader.d.ts

@@ -1,5 +1,3 @@
 /// <reference types="react" />
-import type { CascaderItem, CascaderProps, CascaderRef } from './types';
-declare function CascaderFC<V extends React.Key, T extends CascaderItem<V>>(props: CascaderProps<V, T>, ref: React.ForwardedRef<CascaderRef>): JSX.Element | null;
-export declare const Cascader: <ID extends React.Key, T extends CascaderItem<ID>>(props: CascaderProps<ID, T> & React.RefAttributes<CascaderRef>) => ReturnType<typeof CascaderFC>;
-export {};
+import type { CascaderItem, CascaderProps } from './types';
+export declare function Cascader<V extends React.Key, T extends CascaderItem<V>>(props: CascaderProps<V, T>): React.ReactElement | null;