@laser-ui/components 1.6.0 → 2.0.0

package/popover/PopoverHeader.js

@@ -1,16 +1,18 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import CloseOutlined from '@material-design-icons/svg/outlined/close.svg?react';
-import { Children } from 'react';
-import { CLASSES } from './vars';
+import { has } from 'lodash';
+import { Fragment, use } from 'react';
+import { CLASSES, PopoverContext } from './vars';
 import { Button } from '../button';
 import { useComponentProps, useControlled, useStyled, useTranslation } from '../hooks';
 import { Icon } from '../icon';
 import { mergeCS } from '../utils';
 export function PopoverHeader(props) {
-    const _a = useComponentProps('PopoverHeader', props), { styleOverrides, styleProvider, children, actions = [], closeProps: closePropsProp, onCloseClick, _id, _onClose } = _a, restProps = __rest(_a, ["styleOverrides", "styleProvider", "children", "actions", "closeProps", "onCloseClick", "_id", "_onClose"]);
+    const _a = useComponentProps('PopoverHeader', props), { styleOverrides, styleProvider, children, actions = [], closeProps: closePropsProp, onCloseClick } = _a, restProps = __rest(_a, ["styleOverrides", "styleProvider", "children", "actions", "closeProps", "onCloseClick"]);
     const styled = useStyled(CLASSES, { popover: styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider.popover }, styleOverrides);
     const { t } = useTranslation();
+    const popoverContext = use(PopoverContext);
     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();
@@ -19,19 +21,20 @@ export function PopoverHeader(props) {
                 shouldClose.then((val) => {
                     changeCloseLoading(false);
                     if (val !== false) {
-                        _onClose === null || _onClose === void 0 ? void 0 : _onClose();
+                        popoverContext === null || popoverContext === void 0 ? void 0 : popoverContext.onClose();
                     }
                 });
             }
             else if (shouldClose !== false) {
-                _onClose === null || _onClose === void 0 ? void 0 : _onClose();
+                popoverContext === null || popoverContext === void 0 ? void 0 : popoverContext.onClose();
             }
         } });
     return (_jsxs("div", Object.assign({}, restProps, mergeCS(styled('popover__header'), {
         className: restProps.className,
         style: restProps.style,
-    }), { children: [_jsx("div", Object.assign({}, styled('popover__header-title'), { id: _id, children: children })), _jsx("div", Object.assign({}, styled('popover__header-actions'), { children: Children.map(actions, (action) => {
+    }), { children: [_jsx("div", Object.assign({}, styled('popover__header-title'), { id: popoverContext === null || popoverContext === void 0 ? void 0 : popoverContext.id, children: children })), _jsx("div", Object.assign({}, styled('popover__header-actions'), { children: actions.map((node, index) => {
                     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);
+                    const { id, action } = (has(node, ['id', 'action']) ? node : { id: index, action: node });
+                    return (_jsx(Fragment, { children: 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) }, id));
                 }) }))] })));
 }

package/popover/types.d.ts

@@ -1,13 +1,20 @@
 /// <reference types="react" />
 import type { CLASSES } from './vars';
 import type { ButtonProps } from '../button';
-import type { BaseProps, CloneHTMLElement, PopupPlacement } from '../types';
+import type { BaseProps, PopupPlacement } from '../types';
 export {};
 export interface PopoverRef {
     updatePosition: () => void;
 }
 export interface PopoverProps extends BaseProps<'popover', typeof CLASSES>, Omit<React.HTMLAttributes<HTMLDivElement>, 'children' | 'content'> {
-    children: React.ReactElement | ((render: CloneHTMLElement) => React.ReactNode);
+    ref?: React.Ref<PopoverRef>;
+    children: (props: {
+        id: string;
+        onClick: React.MouseEventHandler<HTMLElement>;
+        onMouseEnter: React.MouseEventHandler<HTMLElement>;
+        onMouseLeave: React.MouseEventHandler<HTMLElement>;
+        onKeyDown: React.KeyboardEventHandler<HTMLElement>;
+    }) => React.ReactNode;
     content: React.ReactNode;
     header?: React.ReactElement | string;
     footer?: React.ReactElement;
@@ -25,18 +32,25 @@ export interface PopoverProps extends BaseProps<'popover', typeof CLASSES>, Omit
     modal?: boolean;
     skipFirstTransition?: boolean;
     destroyAfterClose?: boolean;
+    lazyLoading?: boolean;
     zIndex?: number | string;
     onVisibleChange?: (visible: boolean) => void;
     afterVisibleChange?: (visible: boolean) => void;
 }
 export interface PopoverHeaderProps extends BaseProps<'popover', typeof CLASSES>, React.HTMLAttributes<HTMLDivElement> {
-    actions?: React.ReactNode[];
+    actions?: (React.ReactNode | {
+        id: React.Key;
+        action: React.ReactNode;
+    })[];
     closeProps?: ButtonProps;
     onCloseClick?: () => any | Promise<any>;
 }
 export interface PopoverFooterProps extends BaseProps<'popover', typeof CLASSES>, Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
     align?: 'left' | 'center' | 'right';
-    actions?: React.ReactNode[];
+    actions?: (React.ReactNode | {
+        id: React.Key;
+        action: React.ReactNode;
+    })[];
     cancelProps?: ButtonProps;
     okProps?: ButtonProps;
     onCancelClick?: () => any | Promise<any>;

package/popover/vars.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export declare const CLASSES: {
     popover: string;
     'popover--top': string;
@@ -28,3 +29,7 @@ export declare const TTANSITION_DURING: {
     enter: number;
     leave: number;
 };
+export declare const PopoverContext: import("react").Context<{
+    id: string;
+    onClose: () => void;
+} | undefined>;

package/popover/vars.js

@@ -1,3 +1,4 @@
+import { createContext } from 'react';
 export const CLASSES = {
     popover: '^popover',
     'popover--top': '^popover--top',
@@ -25,3 +26,4 @@ export const CLASSES = {
     'popover__footer--right': '^popover__footer--right',
 };
 export const TTANSITION_DURING = { enter: 86, leave: 100 };
+export const PopoverContext = createContext(undefined);

package/progress/Progress.d.ts

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

package/radio/Radio.d.ts

@@ -2,6 +2,6 @@
 import type { RadioProps } from './types';
 import { RadioGroup } from './RadioGroup';
 export declare const Radio: {
-    (props: RadioProps): JSX.Element | null;
+    (props: RadioProps): React.ReactElement | null;
     Group: typeof RadioGroup;
 };

package/radio/Radio.js

@@ -1,38 +1,43 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { checkNodeExist } from '@laser-ui/utils';
-import { useRef } from 'react';
+import { use, useRef } from 'react';
 import { RadioGroup } from './RadioGroup';
-import { CLASSES } from './vars';
+import { CLASSES, RadioGroupContext } from './vars';
 import { useComponentProps, useControlled, useDesign, useNamespace, useScopedProps, useStyled } from '../hooks';
-import { Wave } from '../internal/wave';
 import { mergeCS } from '../utils';
+import { Wave } from '../wave';
 export const Radio = (props) => {
-    const _a = useComponentProps('Radio', props), { children, styleOverrides, styleProvider, formControl, model, defaultModel, disabled: disabledProp = false, inputRef, inputRender, onModelChange, _pattern, _size } = _a, restProps = __rest(_a, ["children", "styleOverrides", "styleProvider", "formControl", "model", "defaultModel", "disabled", "inputRef", "inputRender", "onModelChange", "_pattern", "_size"]);
+    const _a = useComponentProps('Radio', props), { children, styleOverrides, styleProvider, formControl, model, defaultModel, disabled: disabledProp = false, inputProps, onModelChange } = _a, restProps = __rest(_a, ["children", "styleOverrides", "styleProvider", "formControl", "model", "defaultModel", "disabled", "inputProps", "onModelChange"]);
     const namespace = useNamespace();
     const styled = useStyled(CLASSES, { radio: styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider.radio }, styleOverrides);
     const waveRef = useRef(null);
+    const groupContext = use(RadioGroupContext);
     const [checked, changeChecked] = useControlled(defaultModel !== null && defaultModel !== void 0 ? defaultModel : false, model, onModelChange, undefined, formControl === null || formControl === void 0 ? void 0 : formControl.control);
     const { disabled } = useScopedProps({ disabled: disabledProp || (formControl === null || formControl === void 0 ? void 0 : formControl.control.disabled) });
-    const designProps = useDesign({ compose: _pattern ? { active: checked, disabled } : undefined });
-    const inputNode = (_jsx("input", Object.assign({}, styled('radio__input'), formControl === null || formControl === void 0 ? void 0 : formControl.inputAria, { ref: inputRef, type: "radio", checked: checked, disabled: disabled, "aria-checked": checked, onChange: () => {
-            changeChecked(true);
-        } })));
+    const designProps = useDesign({ compose: (groupContext === null || groupContext === void 0 ? void 0 : groupContext.pattern) ? { active: checked, disabled } : undefined });
     return (_jsxs("label", Object.assign({}, restProps, mergeCS(styled('radio', {
         'radio.is-checked': checked,
         'radio.is-disabled': disabled,
-        'radio--button': _pattern,
-        [`radio--button-${_pattern}`]: _pattern,
-        [`radio--button-${_size}`]: _size,
+        'radio--button': groupContext === null || groupContext === void 0 ? void 0 : groupContext.pattern,
+        [`radio--button-${groupContext === null || groupContext === void 0 ? void 0 : groupContext.pattern}`]: groupContext === null || groupContext === void 0 ? void 0 : groupContext.pattern,
+        [`radio--button-${groupContext === null || groupContext === void 0 ? void 0 : groupContext.size}`]: groupContext === null || groupContext === void 0 ? void 0 : groupContext.size,
     }), {
         className: restProps.className,
         style: restProps.style,
     }), designProps, { onClick: (e) => {
             var _a, _b;
             (_a = restProps.onClick) === null || _a === void 0 ? void 0 : _a.call(restProps, e);
-            if (_pattern) {
+            if (groupContext === null || groupContext === void 0 ? void 0 : groupContext.pattern) {
                 (_b = waveRef.current) === null || _b === void 0 ? void 0 : _b.call(waveRef);
             }
-        }, children: [_jsx(Wave, { ref: waveRef, color: `var(--${namespace}-color-primary)` }), _jsx("div", Object.assign({}, styled('radio__input-wrapper'), { children: inputRender ? inputRender(inputNode) : inputNode })), checkNodeExist(children) && _jsx("div", Object.assign({}, styled('radio__label'), { children: children }))] })));
+        }, children: [_jsx(Wave, { ref: (instance) => {
+                    waveRef.current = instance;
+                    return () => {
+                        waveRef.current = null;
+                    };
+                }, color: `var(--${namespace}-color-primary)` }), _jsx("div", Object.assign({}, styled('radio__input-wrapper'), { children: _jsx("input", Object.assign({}, inputProps, styled('radio__input'), formControl === null || formControl === void 0 ? void 0 : formControl.inputAria, { type: "radio", checked: checked, disabled: disabled, "aria-checked": checked, onChange: () => {
+                        changeChecked(true);
+                    } })) })), checkNodeExist(children) && _jsx("div", Object.assign({}, styled('radio__label'), { children: children }))] })));
 };
 Radio.Group = RadioGroup;

package/radio/RadioGroup.d.ts

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

package/radio/RadioGroup.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { nth } from 'lodash';
-import { cloneElement, useId } from 'react';
-import { Radio } from './Radio';
+import { useId } from 'react';
+import { RadioGroupContext } from './vars';
 import { useComponentProps, useControlled, useScopedProps } from '../hooks';
 export function RadioGroup(props) {
-    var _a, _b, _c;
+    var _a, _b;
     const { children, formControl, list, model, defaultModel, pattern, size: sizeProp, name: nameProp, disabled: disabledProp = false, onModelChange, } = useComponentProps('RadioGroup', props);
     const uniqueId = useId();
     const name = nameProp !== null && nameProp !== void 0 ? nameProp : uniqueId;
@@ -14,8 +14,13 @@ export function RadioGroup(props) {
         }
     }, undefined, formControl === null || formControl === void 0 ? void 0 : formControl.control);
     const { size, disabled } = useScopedProps({ size: sizeProp, disabled: disabledProp || (formControl === null || formControl === void 0 ? void 0 : formControl.control.disabled) });
-    const childrenNode = children(list.map((option) => (_jsx(Radio, { _pattern: pattern, _size: size, model: option.value === value, disabled: option.disabled || disabled, inputRender: (el) => cloneElement(el, Object.assign(Object.assign({}, formControl === null || formControl === void 0 ? void 0 : formControl.inputAria), { value: option.value, name })), onModelChange: () => {
-            changeValue(option.value);
-        }, children: option.label }, option.value))));
-    return cloneElement(childrenNode, { role: (_c = childrenNode.props.role) !== null && _c !== void 0 ? _c : 'radiogroup' });
+    return (_jsx(RadioGroupContext, { value: { pattern, size }, children: children({ role: 'radiogroup' }, (option) => ({
+            children: option.label,
+            model: option.value === value,
+            disabled: option.disabled || disabled,
+            inputProps: Object.assign({ name, value: option.value }, formControl === null || formControl === void 0 ? void 0 : formControl.inputAria),
+            onModelChange: () => {
+                changeValue(option.value);
+            },
+        }), list) }));
 }

package/radio/types.d.ts

@@ -1,15 +1,14 @@
 /// <reference types="react" />
 import type { CLASSES } from './vars';
 import type { FormControlProvider } from '../form/types';
-import type { BaseProps, CloneHTMLElement, Size } from '../types';
+import type { BaseProps, Size } from '../types';
 export {};
 export interface RadioProps extends BaseProps<'radio', typeof CLASSES>, React.LabelHTMLAttributes<HTMLLabelElement> {
     formControl?: FormControlProvider;
     model?: boolean;
     defaultModel?: boolean;
     disabled?: boolean;
-    inputRef?: React.ForwardedRef<HTMLInputElement>;
-    inputRender?: CloneHTMLElement;
+    inputProps?: React.ComponentPropsWithRef<'input'>;
     onModelChange?: (checked: boolean) => void;
 }
 export interface RadioGroupItem<V extends React.Key> {
@@ -18,7 +17,20 @@ export interface RadioGroupItem<V extends React.Key> {
     disabled?: boolean;
 }
 export interface RadioGroupProps<V extends React.Key, T extends RadioGroupItem<V>> {
-    children: (nodes: React.ReactElement[]) => React.ReactElement;
+    children: (props: {
+        role: 'radiogroup';
+    }, optionProps: (option: T) => {
+        children: React.ReactNode;
+        model: boolean;
+        disabled: boolean;
+        inputProps?: {
+            name: string;
+            value: V;
+            'aria-invalid'?: boolean;
+            'aria-describedby'?: string;
+        };
+        onModelChange: () => void;
+    }, options: T[]) => React.ReactElement | null;
     formControl?: FormControlProvider;
     list: T[];
     model?: V | null;

package/radio/vars.d.ts

@@ -1,3 +1,5 @@
+/// <reference types="react" />
+import type { Size } from '../types';
 export declare const CLASSES: {
     radio: string;
     'radio.is-checked': string;
@@ -12,3 +14,7 @@ export declare const CLASSES: {
     radio__input: string;
     radio__label: string;
 };
+export declare const RadioGroupContext: import("react").Context<{
+    pattern?: "fill" | "outline" | undefined;
+    size: Size;
+} | undefined>;

package/radio/vars.js

@@ -1,3 +1,4 @@
+import { createContext } from 'react';
 export const CLASSES = {
     radio: '^radio',
     'radio.is-checked': 'is-checked',
@@ -12,3 +13,4 @@ export const CLASSES = {
     radio__input: '^radio__input',
     radio__label: '^radio__label',
 };
+export const RadioGroupContext = createContext(undefined);

package/rating/Rating.d.ts

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

package/rating/internal/RatingStar.d.ts

@@ -15,5 +15,5 @@ interface RatingStarProps {
     onCheck: (value: number) => void;
     onHoverChange: (value: number) => void;
 }
-export declare function RatingStar(props: RatingStarProps): JSX.Element | null;
+export declare function RatingStar(props: RatingStarProps): React.ReactElement | null;
 export {};

package/rating/internal/RatingStar.js

@@ -4,7 +4,6 @@ import { useId, useState } from 'react';
 import { useNamespace } from '../../hooks';
 import { Tooltip } from '../../tooltip';
 export function RatingStar(props) {
-    var _a, _b;
     const { styled, value, hover, checked: checkedProp, icon, tooltip, name, half, disabled, inputProps, onCheck, onHoverChange } = props;
     const namespace = useNamespace();
     const uniqueId = useId();
@@ -14,24 +13,27 @@ export function RatingStar(props) {
     const halfValue = value - 0.5;
     const halfChecked = halfValue === checkedProp;
     const [tooltipValue, setTooltipValue] = useState(value);
-    const node = (_jsxs("div", Object.assign({}, styled('rating__star'), { children: [half && (_jsxs(_Fragment, { children: [_jsx("input", Object.assign({}, styled('rating__input', 'rating__input--half'), inputProps, { id: halfInputId, type: "radio", name: name, checked: halfChecked, disabled: disabled, "aria-checked": halfChecked, onChange: () => {
-                            onCheck(halfValue);
-                        }, onMouseEnter: () => {
-                            if (!isUndefined(tooltip)) {
-                                setTooltipValue(halfValue);
-                            }
-                            onHoverChange(halfValue);
-                        } })), _jsx("label", Object.assign({}, styled('rating__icon', 'rating__icon--half', {
-                        'rating__icon.is-checked': halfValue <= ((_a = hover !== null && hover !== void 0 ? hover : checkedProp) !== null && _a !== void 0 ? _a : 0),
-                    }), { htmlFor: halfInputId, children: icon }))] })), _jsxs("label", Object.assign({}, styled('rating__icon', {
-                'rating__icon.is-checked': value <= ((_b = hover !== null && hover !== void 0 ? hover : checkedProp) !== null && _b !== void 0 ? _b : 0),
-            }), { children: [_jsx("input", Object.assign({}, styled('rating__input'), { id: inputId, type: "radio", name: name, checked: checked, disabled: disabled, "aria-checked": checked, onChange: () => {
-                            onCheck(value);
-                        }, onMouseEnter: () => {
-                            if (!isUndefined(tooltip)) {
-                                setTooltipValue(value);
-                            }
-                            onHoverChange(value);
-                        } })), icon] }))] })));
-    return isUndefined(tooltip) ? node : _jsx(Tooltip, { title: tooltip === null || tooltip === void 0 ? void 0 : tooltip(tooltipValue), children: node });
+    const node = (tooltipProps) => {
+        var _a, _b;
+        return (_jsxs("div", Object.assign({}, styled('rating__star'), tooltipProps, { children: [half && (_jsxs(_Fragment, { children: [_jsx("input", Object.assign({}, styled('rating__input', 'rating__input--half'), inputProps, { id: halfInputId, type: "radio", name: name, checked: halfChecked, disabled: disabled, "aria-checked": halfChecked, onChange: () => {
+                                onCheck(halfValue);
+                            }, onMouseEnter: () => {
+                                if (!isUndefined(tooltip)) {
+                                    setTooltipValue(halfValue);
+                                }
+                                onHoverChange(halfValue);
+                            } })), _jsx("label", Object.assign({}, styled('rating__icon', 'rating__icon--half', {
+                            'rating__icon.is-checked': halfValue <= ((_a = hover !== null && hover !== void 0 ? hover : checkedProp) !== null && _a !== void 0 ? _a : 0),
+                        }), { htmlFor: halfInputId, children: icon }))] })), _jsxs("label", Object.assign({}, styled('rating__icon', {
+                    'rating__icon.is-checked': value <= ((_b = hover !== null && hover !== void 0 ? hover : checkedProp) !== null && _b !== void 0 ? _b : 0),
+                }), { children: [_jsx("input", Object.assign({}, styled('rating__input'), { id: inputId, type: "radio", name: name, checked: checked, disabled: disabled, "aria-checked": checked, onChange: () => {
+                                onCheck(value);
+                            }, onMouseEnter: () => {
+                                if (!isUndefined(tooltip)) {
+                                    setTooltipValue(value);
+                                }
+                                onHoverChange(value);
+                            } })), icon] }))] })));
+    };
+    return isUndefined(tooltip) ? node() : _jsx(Tooltip, { title: tooltip(tooltipValue), children: node });
 }

package/root/Root.d.ts

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

package/root/Root.js

@@ -69,5 +69,5 @@ export function Root(props) {
         default:
             break;
     }
-    return (_jsxs(RootContext.Provider, { value: context, children: [children, dialogs.map(({ node }) => node)] }));
+    return (_jsxs(RootContext, { value: context, children: [children, dialogs.map(({ node }) => node)] }));
 }

package/select/Select.d.ts

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