@laser-ui/components 1.6.0 → 2.0.0

package/fab/FabButton.js

@@ -1,23 +1,50 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { setRef } from '@laser-ui/utils';
 import AddOutlined from '@material-design-icons/svg/outlined/add.svg?react';
-import { forwardRef } from 'react';
-import { BUTTON_CLASSES } from './vars';
+import { use } from 'react';
+import { BUTTON_CLASSES, FabBacktopContext, FabContext, FabListContext } from './vars';
+import { CircularProgress } from '../circular-progress';
 import { useComponentProps, useStyled } from '../hooks';
 import { Icon } from '../icon';
-import { CircularProgress } from '../internal/circular-progress';
 import { mergeCS } from '../utils';
-export const FabButton = forwardRef((props, ref) => {
+export function FabButton(props) {
     var _a;
-    const _b = useComponentProps('FabButton', props), { children, styleOverrides, styleProvider, pattern = 'primary', theme = 'primary', loading = false, shape, _expand = false, _action = false } = _b, restProps = __rest(_b, ["children", "styleOverrides", "styleProvider", "pattern", "theme", "loading", "shape", "_expand", "_action"]);
+    const _b = useComponentProps('FabButton', props), { ref, children, styleOverrides, styleProvider, pattern = 'primary', theme = 'primary', loading = false, shape } = _b, restProps = __rest(_b, ["ref", "children", "styleOverrides", "styleProvider", "pattern", "theme", "loading", "shape"]);
     const styled = useStyled(BUTTON_CLASSES, { 'fab-button': styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider['fab-button'] }, styleOverrides);
+    const fabContext = use(FabContext);
+    const fabListContext = use(FabListContext);
+    const fabBacktopContext = use(FabBacktopContext);
     return (_jsxs("button", Object.assign({}, restProps, mergeCS(styled('fab-button', `fab-button.t-${theme}`, `fab-button--${pattern}`, {
-        'fab-button.is-expand': _expand,
+        'fab-button.is-expand': fabContext && fabContext.expand,
         'fab-button.is-loading': loading,
-        'fab-button--in-actions': _action,
+        'fab-button--in-actions': fabListContext,
         [`fab-button--${shape}`]: shape,
     }), {
         className: restProps.className,
-        style: restProps.style,
-    }), { ref: ref, type: (_a = restProps.type) !== null && _a !== void 0 ? _a : 'button', children: [_jsx(Icon, Object.assign({}, styled('fab-button__icon'), { children: _jsx(AddOutlined, {}) })), _jsx("div", Object.assign({}, styled('fab-button__content'), { children: loading ? (_jsx(Icon, { children: _jsx(CircularProgress, {}) })) : (children) }))] })));
-});
+        style: Object.assign(Object.assign(Object.assign({}, restProps.style), (fabListContext ? { animationDelay: `${fabListContext.index * 33}ms` } : undefined)), (fabBacktopContext && fabBacktopContext.leaved ? { display: 'none' } : undefined)),
+    }), { ref: (instance) => {
+            const ret = setRef(ref, instance);
+            if (fabBacktopContext) {
+                fabBacktopContext.ref(instance);
+            }
+            return () => {
+                ret();
+                if (fabBacktopContext) {
+                    fabBacktopContext.ref(null);
+                }
+            };
+        }, type: (_a = restProps.type) !== null && _a !== void 0 ? _a : 'button', onClick: (e) => {
+            var _a;
+            (_a = restProps.onClick) === null || _a === void 0 ? void 0 : _a.call(restProps, e);
+            if (fabContext) {
+                fabContext.onClick();
+            }
+            if (fabListContext) {
+                fabListContext.onClick();
+            }
+            if (fabBacktopContext) {
+                fabBacktopContext.onClick();
+            }
+        }, children: [_jsx(Icon, Object.assign({}, styled('fab-button__icon'), { children: _jsx(AddOutlined, {}) })), _jsx("div", Object.assign({}, styled('fab-button__content'), { children: loading ? (_jsx(Icon, { children: _jsx(CircularProgress, {}) })) : (children) }))] })));
+}

package/fab/types.d.ts

@@ -4,16 +4,20 @@ import type { BaseProps } from '../types';
 import type { RefExtra } from '@laser-ui/hooks/useRefExtra';
 export {};
 export interface FabProps extends BaseProps<'fab', typeof CLASSES>, Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
-    children: React.ReactElement;
+    children?: React.ReactNode;
     expand?: boolean;
     defaultExpand?: boolean;
     list?: {
         placement: 'top' | 'right' | 'bottom' | 'left';
-        actions: React.ReactElement[];
+        actions: (React.ReactNode | {
+            id: React.Key;
+            action: React.ReactNode;
+        })[];
     }[];
     onExpandChange?: (expand: boolean) => void;
 }
 export interface FabButtonProps extends BaseProps<'fab-button', typeof BUTTON_CLASSES>, React.ButtonHTMLAttributes<HTMLButtonElement> {
+    ref?: React.Ref<HTMLButtonElement>;
     pattern?: 'primary' | 'secondary' | 'outline' | 'dashed' | 'text' | 'link';
     theme?: 'primary' | 'success' | 'warning' | 'danger';
     loading?: boolean;

package/fab/vars.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export declare const CLASSES: {
     fab: string;
     fab__actions: string;
@@ -26,3 +27,16 @@ export declare const BUTTON_CLASSES: {
     'fab-button__icon': string;
     'fab-button__content': string;
 };
+export declare const FabContext: import("react").Context<{
+    expand: boolean;
+    onClick: () => void;
+} | undefined>;
+export declare const FabListContext: import("react").Context<{
+    index: number;
+    onClick: () => void;
+} | undefined>;
+export declare const FabBacktopContext: import("react").Context<{
+    ref: React.RefCallback<HTMLElement | null>;
+    leaved: boolean;
+    onClick: () => void;
+} | undefined>;

package/fab/vars.js

@@ -1,3 +1,4 @@
+import { createContext } from 'react';
 export const CLASSES = {
     fab: '^fab',
     fab__actions: '^fab__actions',
@@ -26,3 +27,6 @@ export const BUTTON_CLASSES = {
     'fab-button__icon': '^fab-button__icon',
     'fab-button__content': '^fab-button__content',
 };
+export const FabContext = createContext(undefined);
+export const FabListContext = createContext(undefined);
+export const FabBacktopContext = createContext(undefined);

package/form/Form.d.ts

@@ -2,6 +2,6 @@
 import type { FormProps } from './types';
 import { FormItem } from './FormItem';
 export declare const Form: {
-    (props: FormProps): JSX.Element | null;
+    (props: FormProps): React.ReactElement | null;
     Item: typeof FormItem;
 };

package/form/Form.js

@@ -24,7 +24,12 @@ export const Form = (props) => {
     return (_jsx("form", Object.assign({}, restProps, mergeCS(styled('form', `form--${size}`), {
         className: restProps.className,
         style: restProps.style,
-    }), { ref: formRef, onSubmit: (e) => {
+    }), { ref: (instance) => {
+            formRef.current = instance;
+            return () => {
+                formRef.current = null;
+            };
+        }, onSubmit: (e) => {
             var _a;
             (_a = restProps.onSubmit) === null || _a === void 0 ? void 0 : _a.call(restProps, e);
             e.preventDefault();
@@ -33,7 +38,7 @@ export const Form = (props) => {
             var _a;
             (_a = restProps.onReset) === null || _a === void 0 ? void 0 : _a.call(restProps, e);
             e.preventDefault();
-        }, children: _jsx(ConfigProvider, { context: { componentSize: size }, children: _jsx(FormContext.Provider, { value: {
+        }, children: _jsx(ConfigProvider, { context: { componentSize: size }, children: _jsx(FormContext, { value: {
                     vertical,
                     labelWidth: labelWidth !== null && labelWidth !== void 0 ? labelWidth : (vertical ? undefined : 'auto'),
                     labelWrap: isUndefined(labelWidth) ? false : labelWrap,

package/form/FormItem.d.ts

@@ -2,4 +2,4 @@
 import type { FormErrors, FormItemProps } from './types';
 export declare function FormItem<T extends {
     [index: string]: FormErrors;
-}>(props: FormItemProps<T>): JSX.Element | null;
+}>(props: FormItemProps<T>): React.ReactElement | null;

package/form/FormItem.js

@@ -6,13 +6,13 @@ import CheckCircleFilled from '@material-design-icons/svg/filled/check_circle.sv
 import ErrorFilled from '@material-design-icons/svg/filled/error.svg?react';
 import HelpOutlineOutlined from '@material-design-icons/svg/outlined/help_outline.svg?react';
 import { isBoolean, isFunction, isNull, isNumber, isString, isUndefined } from 'lodash';
-import { useContext, useEffect, useId, useRef } from 'react';
+import { use, useEffect, useId, useRef } from 'react';
 import { FormError } from './internal/FormError';
 import { Validators } from './model/validators';
 import { CLASSES, FormContext, FormGroupContext } from './vars';
-import { useComponentProps, useStyled, useTranslation } from '../hooks';
+import { CircularProgress } from '../circular-progress';
+import { useComponentProps, useNamespace, useStyled, useTranslation } from '../hooks';
 import { Icon } from '../icon';
-import { CircularProgress } from '../internal/circular-progress';
 import { Tooltip } from '../tooltip';
 import { mergeCS } from '../utils';
 const ValidateState = {
@@ -24,11 +24,12 @@ const ValidateState = {
 };
 export function FormItem(props) {
     const _a = useComponentProps('FormItem', props), { children, styleOverrides, styleProvider, formControls, label, labelWidth: labelWidthProp, labelWrap: labelWrapProp, labelExtra: labelExtraProp, labelFor, required: requiredProp } = _a, restProps = __rest(_a, ["children", "styleOverrides", "styleProvider", "formControls", "label", "labelWidth", "labelWrap", "labelExtra", "labelFor", "required"]);
+    const namespace = useNamespace();
     const styled = useStyled(CLASSES, { form: styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider.form }, styleOverrides);
     const { t } = useTranslation();
     const forceUpdate = useForceUpdate();
-    const formContext = useContext(FormContext);
-    const formGroupContext = useContext(FormGroupContext);
+    const formContext = use(FormContext);
+    const formGroupContext = use(FormGroupContext);
     const divRef = useRef(null);
     const uniqueId = useId();
     const getErrorId = (controlName) => `${controlName}-error-${uniqueId}`;
@@ -83,9 +84,8 @@ export function FormItem(props) {
         }
         return false;
     })();
-    const errorsRef = useRef([]);
-    const validateState = (() => {
-        const errors = [];
+    const [validateState, currentErrors] = (() => {
+        const currentErrors = [];
         let validateState = ValidateState.Empty;
         Object.entries(formControls !== null && formControls !== void 0 ? formControls : {}).forEach(([controlName, formErrors]) => {
             const { control } = formControlProviders[controlName];
@@ -116,11 +116,11 @@ export function FormItem(props) {
                 let hasError = false;
                 if (control.invalid && control.errors) {
                     if (isString(formErrors)) {
-                        errors.push({ key: controlName, controlName, message: formErrors, invalid: 'error' });
+                        currentErrors.push({ key: controlName, controlName, message: formErrors, invalid: 'error' });
                         hasError = true;
                     }
                     else if (Object.keys(formErrors).length === 2 && 'message' in formErrors && 'invalid' in formErrors) {
-                        errors.push(Object.assign({ key: controlName, controlName }, formErrors));
+                        currentErrors.push(Object.assign({ key: controlName, controlName }, formErrors));
                         if (formErrors.invalid === 'error') {
                             hasError = true;
                         }
@@ -129,11 +129,11 @@ export function FormItem(props) {
                         for (const key of Object.keys(control.errors)) {
                             if (key in formErrors) {
                                 if (isString(formErrors[key])) {
-                                    errors.push({ key: `${controlName}-${key}`, controlName, message: formErrors[key], invalid: 'error' });
+                                    currentErrors.push({ key: `${controlName}-${key}`, controlName, message: formErrors[key], invalid: 'error' });
                                     hasError = true;
                                 }
                                 else {
-                                    errors.push(Object.assign({ key: `${controlName}-${key}`, controlName }, formErrors[key]));
+                                    currentErrors.push(Object.assign({ key: `${controlName}-${key}`, controlName }, formErrors[key]));
                                     if (formErrors[key].invalid === 'error') {
                                         hasError = true;
                                     }
@@ -152,27 +152,35 @@ export function FormItem(props) {
                 }
             }
         });
+        return [validateState, currentErrors];
+    })();
+    const errorsSaved = useRef(currentErrors);
+    {
         const newErrors = [];
-        errorsRef.current.forEach((err) => {
-            const index = errors.findIndex((e) => e.key === err.key);
+        errorsSaved.current.forEach((err) => {
+            const index = currentErrors.findIndex((e) => e.key === err.key);
             newErrors.push(Object.assign(err, { hidden: index === -1 }));
             if (index !== -1) {
-                errors.splice(index, 1);
+                currentErrors.splice(index, 1);
             }
         });
-        errorsRef.current = newErrors.concat(errors);
-        return validateState;
-    })();
+        errorsSaved.current = newErrors.concat(currentErrors);
+    }
     const labelExtra = (() => {
-        var _a;
         if (labelExtraProp) {
-            return isString(labelExtraProp) ? (_jsx(Tooltip, { title: labelExtraProp, children: _jsx(Icon, { children: _jsx(HelpOutlineOutlined, {}) }) })) : (_jsx(Tooltip, { title: labelExtraProp.title, children: (_a = labelExtraProp.icon) !== null && _a !== void 0 ? _a : (_jsx(Icon, { children: _jsx(HelpOutlineOutlined, {}) })) }));
+            const { title, icon } = isString(labelExtraProp) ? { title: labelExtraProp, icon: undefined } : labelExtraProp;
+            return (_jsx(Tooltip, { title: title, children: (tooltipProps) => (_jsx("div", Object.assign({}, tooltipProps, { children: icon !== null && icon !== void 0 ? icon : (_jsx(Icon, { children: _jsx(HelpOutlineOutlined, {}) })) }))) }));
         }
     })();
     return (_jsx("div", Object.assign({}, restProps, mergeCS(styled('form__item'), {
         className: restProps.className,
         style: restProps.style,
-    }), { ref: divRef, children: _jsxs("div", Object.assign({}, styled('form__item-container'), { children: [labelWidth !== 0 && (_jsx("div", Object.assign({}, mergeCS(styled('form__item-label-wrapper'), {
+    }), { ref: (instance) => {
+            divRef.current = instance;
+            return () => {
+                divRef.current = null;
+            };
+        }, children: _jsxs("div", Object.assign({}, styled('form__item-container'), { children: [labelWidth !== 0 && (_jsx("div", Object.assign({}, mergeCS(styled('form__item-label-wrapper'), {
                     style: { width: formContext.vertical ? undefined : labelWidth === 'auto' ? 'var(--label-width)' : labelWidth },
                 }), { children: label && (_jsxs("label", Object.assign({}, styled('form__item-label', {
                         'form__item-label--wrap': labelWrap,
@@ -188,7 +196,7 @@ export function FormItem(props) {
                     },
                 }), { children: [_jsx("div", Object.assign({}, styled('form__item-control'), { children: isFunction(children) ? children(formControlProviders) : children })), _jsx("div", Object.assign({}, styled('form__error-container'), { children: (() => {
                                 const errorsMap = new Map();
-                                errorsRef.current.forEach((err) => {
+                                errorsSaved.current.forEach((err) => {
                                     if (errorsMap.has(err.controlName)) {
                                         errorsMap.get(err.controlName).push(err);
                                     }
@@ -200,8 +208,11 @@ export function FormItem(props) {
                                 for (const [controlName, errors] of errorsMap) {
                                     const id = getErrorId(controlName);
                                     formControlProviders[controlName].inputAria['aria-describedby'] = id;
-                                    nodes.push(_jsx("div", { id: id, children: errors.map((error) => (_jsx(FormError, { styled: styled, visible: !error.hidden, message: error.message, invalid: error.invalid, afterLeave: () => {
-                                                errorsRef.current = errorsRef.current.filter((err) => err.key !== error.key);
+                                    nodes.push(_jsx("div", { id: id, children: errors.map((error) => (_jsx(FormError, { namespace: namespace, styled: styled, visible: !error.hidden, message: error.message, invalid: error.invalid, onAfterLeave: () => {
+                                                const index = errorsSaved.current.findIndex((e) => e.key === error.key);
+                                                if (index !== -1) {
+                                                    errorsSaved.current.splice(index, 1);
+                                                }
                                             } }, error.key))) }, controlName));
                                 }
                                 return nodes;

package/form/internal/FormError.d.ts

@@ -2,11 +2,12 @@
 import type { Styled } from '../../hooks/useStyled';
 import type { CLASSES } from '../vars';
 interface FormErrorProps {
+    namespace: string;
     styled: Styled<typeof CLASSES>;
     visible: boolean;
     message: string;
     invalid: 'warning' | 'error';
-    afterLeave: () => void;
+    onAfterLeave: () => void;
 }
-export declare function FormError(props: FormErrorProps): JSX.Element | null;
+export declare function FormError(props: FormErrorProps): React.ReactElement | null;
 export {};

package/form/internal/FormError.js

@@ -1,24 +1,15 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { CollapseTransition } from '../../internal/transition';
+import { CollapseTransition } from '../../transition';
 import { mergeCS } from '../../utils';
 import { TTANSITION_DURING_FAST } from '../../vars';
 export function FormError(props) {
-    const { styled, visible, message, invalid, afterLeave } = props;
-    return (_jsx(CollapseTransition, { originalSize: {
-            height: 'auto',
-        }, collapsedSize: {
-            height: 0,
-        }, enter: visible, during: TTANSITION_DURING_FAST, styles: {
-            enter: { opacity: 0 },
-            entering: {
-                transition: ['height', 'padding', 'margin', 'opacity'].map((attr) => `${attr} ${TTANSITION_DURING_FAST}ms linear`).join(', '),
-            },
-            leaving: {
-                opacity: 0,
-                transition: ['height', 'padding', 'margin', 'opacity'].map((attr) => `${attr} ${TTANSITION_DURING_FAST}ms linear`).join(', '),
-            },
-            leaved: { display: 'none' },
-        }, skipFirstTransition: false, afterLeave: afterLeave, children: (ref, collapseStyle) => (_jsx("div", Object.assign({}, mergeCS(styled('form__error', `form__error--${invalid}`), {
-            style: collapseStyle,
-        }), { ref: ref, title: message, children: message }))) }));
+    const { namespace, styled, visible, message, invalid, onAfterLeave } = props;
+    return (_jsx(CollapseTransition, { height: 0, enter: visible, name: `${namespace}-form-error`, duration: TTANSITION_DURING_FAST, skipFirstTransition: false, onAfterLeave: onAfterLeave, children: (transitionRef, leaved) => (_jsx("div", Object.assign({}, mergeCS(styled('form__error', `form__error--${invalid}`), {
+            style: Object.assign({}, (leaved ? { display: 'none' } : undefined)),
+        }), { ref: (instance) => {
+                transitionRef(instance);
+                return () => {
+                    transitionRef(null);
+                };
+            }, title: message, children: message }))) }));
 }

package/hooks/index.d.ts

@@ -4,13 +4,11 @@ export { useControlled } from './useControlled';
 export { useDesign } from './useDesign';
 export { useDialogService } from './useDialogService';
 export { useFocusVisible } from './useFocusVisible';
-export { useJSS } from './useJSS';
 export { useLayout } from './useLayout';
 export { useLockScroll } from './useLockScroll';
 export { useMaxIndex } from './useMaxIndex';
 export { useNamespace } from './useNamespace';
 export { useNestedPopup } from './useNestedPopup';
-export { useNextTick } from './useNextTick';
 export { useScopedProps } from './useScopedProps';
 export { useStyled } from './useStyled';
 export { useTranslation } from './useTranslation';

package/hooks/index.js

@@ -4,13 +4,11 @@ export { useControlled } from './useControlled';
 export { useDesign } from './useDesign';
 export { useDialogService } from './useDialogService';
 export { useFocusVisible } from './useFocusVisible';
-export { useJSS } from './useJSS';
 export { useLayout } from './useLayout';
 export { useLockScroll } from './useLockScroll';
 export { useMaxIndex } from './useMaxIndex';
 export { useNamespace } from './useNamespace';
 export { useNestedPopup } from './useNestedPopup';
-export { useNextTick } from './useNextTick';
 export { useScopedProps } from './useScopedProps';
 export { useStyled } from './useStyled';
 export { useTranslation } from './useTranslation';

package/hooks/useComponentProps.js

@@ -1,9 +1,9 @@
 import { isUndefined } from 'lodash';
-import { useContext } from 'react';
+import { use } from 'react';
 import { LContext } from '../context';
 export function useComponentProps(component, props) {
     var _a;
-    const context = useContext(LContext);
+    const context = use(LContext);
     const defaultProps = (_a = context.componentDefaultProps[component]) !== null && _a !== void 0 ? _a : {};
     const definedProps = {};
     Object.keys(props).forEach((key) => {

package/hooks/useFocusVisible.d.ts

@@ -1,2 +1,9 @@
-import type { CloneHTMLElement } from '../types';
-export declare function useFocusVisible(isValidCode: (code: string) => boolean): [boolean, CloneHTMLElement];
+/// <reference types="react" />
+export declare function useFocusVisible(isValidCode: (code: string) => boolean): [
+    boolean,
+    {
+        onFocus: React.FocusEventHandler<HTMLElement>;
+        onBlur: React.FocusEventHandler<HTMLElement>;
+        onKeyDown: React.KeyboardEventHandler<HTMLElement>;
+    }
+];

package/hooks/useFocusVisible.js

@@ -1,5 +1,5 @@
 import { useAsync, useEvent, useRefExtra } from '@laser-ui/hooks';
-import { cloneElement, useRef, useState } from 'react';
+import { useRef, useState } from 'react';
 export function useFocusVisible(isValidCode) {
     const windowRef = useRefExtra(() => window);
     const async = useAsync();
@@ -13,26 +13,20 @@ export function useFocusVisible(isValidCode) {
     });
     return [
         focusVisible,
-        (el) => cloneElement(el, {
-            onFocus: (e) => {
-                var _a, _b;
-                (_b = (_a = el.props).onFocus) === null || _b === void 0 ? void 0 : _b.call(_a, e);
+        {
+            onFocus: () => {
                 if (hadKeyboardEvent.current) {
                     setFocusVisible(true);
                 }
             },
-            onBlur: (e) => {
-                var _a, _b;
-                (_b = (_a = el.props).onBlur) === null || _b === void 0 ? void 0 : _b.call(_a, e);
+            onBlur: () => {
                 setFocusVisible(false);
             },
             onKeyDown: (e) => {
-                var _a, _b;
-                (_b = (_a = el.props).onKeyDown) === null || _b === void 0 ? void 0 : _b.call(_a, e);
                 if (isValidCode(e.code)) {
                     setFocusVisible(true);
                 }
             },
-        }),
+        },
     ];
 }

package/hooks/useLayout.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 export declare function useLayout(): {
-    pageScrollRef: import("react").RefObject<HTMLElement>;
-    contentResizeRef: import("react").RefObject<HTMLElement>;
+    pageScrollRef: import("react").RefObject<HTMLElement | null>;
+    contentResizeRef: import("react").RefObject<HTMLElement | null>;
 };

package/hooks/useLayout.js

@@ -1,9 +1,9 @@
 import { useRefExtra } from '@laser-ui/hooks';
-import { useContext } from 'react';
+import { use } from 'react';
 import { LContext } from '../context';
 export function useLayout() {
     var _a, _b;
-    const context = useContext(LContext);
+    const context = use(LContext);
     const pageScrollRef = useRefExtra((_a = context.layoutPageScrollEl) !== null && _a !== void 0 ? _a : (() => null));
     const contentResizeRef = useRefExtra((_b = context.layoutContentResizeEl) !== null && _b !== void 0 ? _b : (() => null));
     return { pageScrollRef, contentResizeRef };

package/hooks/useNamespace.js

@@ -1,6 +1,6 @@
-import { useContext } from 'react';
+import { use } from 'react';
 import { LContext } from '../context';
 export function useNamespace() {
-    const context = useContext(LContext);
+    const context = use(LContext);
     return context.namespace;
 }

package/hooks/useNestedPopup.d.ts

@@ -5,7 +5,7 @@ interface PopupId<ID> {
     visible: boolean;
 }
 export declare function useNestedPopup<ID>(): {
-    popupIdsRef: import("react").MutableRefObject<PopupId<ID>[]>;
+    popupIdsRef: import("react").RefObject<PopupId<ID>[]>;
     setPopupIds: (value: PopupId<ID>[] | DraftFunction<PopupId<ID>[]>) => void;
     addPopupId: (id: ID) => void;
     removePopupId: (id: ID) => void;

package/hooks/useScopedProps.js

@@ -1,7 +1,7 @@
-import { useContext } from 'react';
+import { use } from 'react';
 import { LContext } from '../context';
 export function useScopedProps(props) {
     var _a, _b;
-    const context = useContext(LContext);
+    const context = use(LContext);
     return { size: (_b = (_a = props.size) !== null && _a !== void 0 ? _a : context.componentSize) !== null && _b !== void 0 ? _b : 'medium', disabled: props.disabled || context.componentDisabled };
 }

package/hooks/useStyled.js

@@ -1,8 +1,8 @@
 import { isString, isUndefined } from 'lodash';
-import { useContext, useRef } from 'react';
+import { use, useRef } from 'react';
 import { LContext } from '../context';
 export function useStyled(classes, styleProvider, styleOverrides) {
-    const context = useContext(LContext);
+    const context = use(LContext);
     const classRoot = {};
     Object.keys(styleProvider).forEach((key) => {
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion

package/hooks/useTranslation.js

@@ -1,8 +1,8 @@
 import { get } from 'lodash';
-import { useContext } from 'react';
+import { use } from 'react';
 import { RootContext } from '../root/vars';
 export function useTranslation() {
-    const context = useContext(RootContext);
+    const context = use(RootContext);
     const lang = context.i18nLang;
     return {
         t: (...path) => {

package/icon/Icon.d.ts

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

package/icon/Icon.js

@@ -1,7 +1,6 @@
 import { __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { isArray, isNumber, isUndefined } from 'lodash';
-import { cloneElement } from 'react';
 import { CLASSES } from './vars';
 import { useComponentProps, useNamespace, useStyled } from '../hooks';
 import { mergeCS } from '../utils';
@@ -14,8 +13,12 @@ export function Icon(props) {
     return (_jsx("div", Object.assign({}, restProps, mergeCS(styled('icon', { [`icon.t-${theme}`]: theme }), {
         className: restProps.className,
         style: restProps.style,
-    }), { children: cloneElement(children, Object.assign(Object.assign({}, children.props), { style: Object.assign(Object.assign({}, children.props.style), { transform: isUndefined(rotate) ? (_a = children.props.style) === null || _a === void 0 ? void 0 : _a.transform : `rotate(${rotate}deg)`, animation: spin
+    }), { children: _jsx("div", { style: {
+                width,
+                height,
+                transform: isUndefined(rotate) ? (_a = children.props.style) === null || _a === void 0 ? void 0 : _a.transform : `rotate(${rotate}deg)`,
+                animation: spin
                     ? `${namespace}-spin ${spinSpeed}${isNumber(spinSpeed) ? 's' : ''} linear infinite`
-                    : (_b = children.props.style) === null || _b === void 0 ? void 0 : _b.animation }), fill: 'currentColor', width,
-            height })) })));
+                    : (_b = children.props.style) === null || _b === void 0 ? void 0 : _b.animation,
+            }, children: children }) })));
 }

package/image/Image.d.ts

@@ -4,7 +4,7 @@ import { ImageAction } from './ImageAction';
 import { ImageLoader } from './ImageLoader';
 import { ImagePreview } from './ImagePreview';
 export declare const Image: {
-    (props: ImageProps): JSX.Element | null;
+    (props: ImageProps): React.ReactElement | null;
     Loader: typeof ImageLoader;
     Action: typeof ImageAction;
     Preview: typeof ImagePreview;

package/image/Image.js

@@ -2,7 +2,8 @@ import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useForceUpdate } from '@laser-ui/hooks';
 import { checkNodeExist } from '@laser-ui/utils';
-import { Children, useRef } from 'react';
+import { has } from 'lodash';
+import { Fragment, useRef } from 'react';
 import { ImageAction } from './ImageAction';
 import { ImageLoader } from './ImageLoader';
 import { ImagePreview } from './ImagePreview';
@@ -25,7 +26,10 @@ export const Image = (props) => {
     return (_jsxs("div", Object.assign({}, restProps, mergeCS(styled('image'), {
         className: restProps.className,
         style: restProps.style,
-    }), { children: [dataRef.current.isLoading && checkNodeExist(loading) && loading, dataRef.current.isError && checkNodeExist(error) && error, actions && _jsx("div", Object.assign({}, styled('image__actions'), { children: Children.map(actions, (action) => action) })), _jsx("img", Object.assign({}, imgProps, mergeCS(styled('image__img'), {
+    }), { children: [dataRef.current.isLoading && checkNodeExist(loading) && loading, dataRef.current.isError && checkNodeExist(error) && error, actions && (_jsx("div", Object.assign({}, styled('image__actions'), { children: actions.map((node, index) => {
+                    const { id, action } = (has(node, ['id', 'action']) ? node : { id: index, action: node });
+                    return _jsx(Fragment, { children: action }, id);
+                }) }))), _jsx("img", Object.assign({}, imgProps, mergeCS(styled('image__img'), {
                 className: imgProps === null || imgProps === void 0 ? void 0 : imgProps.className,
                 style: Object.assign(Object.assign({}, imgProps === null || imgProps === void 0 ? void 0 : imgProps.style), { display: (dataRef.current.isLoading && loading) || (dataRef.current.isError && error) ? 'none' : undefined }),
             }), { onLoadStart: (e) => {

package/image/ImageAction.d.ts

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

package/image/ImageAction.js

@@ -1,15 +1,14 @@
 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 ImageAction = forwardRef((props, ref) => {
+export function ImageAction(props) {
     var _a;
-    const _b = useComponentProps('ImageAction', props), { children, styleOverrides, styleProvider } = _b, restProps = __rest(_b, ["children", "styleOverrides", "styleProvider"]);
+    const _b = useComponentProps('ImageAction', props), { ref, children, styleOverrides, styleProvider } = _b, restProps = __rest(_b, ["ref", "children", "styleOverrides", "styleProvider"]);
     const styled = useStyled(CLASSES, { image: styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider.image }, styleOverrides);
     return (_jsx("button", Object.assign({}, restProps, mergeCS(styled('image__action'), {
         className: restProps.className,
         style: restProps.style,
     }), { ref: ref, type: (_a = restProps['type']) !== null && _a !== void 0 ? _a : 'button', children: children })));
-});
+}

package/image/ImageLoader.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import type { ImageLoaderProps } from './types';
 export declare const ImageLoader: {
-    (props: ImageLoaderProps): JSX.Element | null;
+    (props: ImageLoaderProps): React.ReactElement | null;
     KEYS: (keyof HTMLImageElement)[];
 };