@laser-ui/components 0.2.2 → 0.4.0

package/CHANGELOG.md

@@ -2,6 +2,16 @@
 
 All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.4.0](https://github.com/laser-ui/laser-ui/compare/v0.3.0...v0.4.0) (2023-12-06)
+
+### Features
+
+- update `vite-plugin-svgr` to **v4** ([5d05979](https://github.com/laser-ui/laser-ui/commit/5d0597973f3f41968bf70542e96eb9318f439328))
+
+# [0.3.0](https://github.com/laser-ui/laser-ui/compare/v0.2.2...v0.3.0) (2023-11-03)
+
+**Note:** Version bump only for package @laser-ui/components
+
 ## [0.2.2](https://github.com/laser-ui/laser-ui/compare/v0.2.1...v0.2.2) (2023-10-31)
 
 ### Bug Fixes

package/accordion/Accordion.js

@@ -1,7 +1,7 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createElement as _createElement } from "react";
-import { ReactComponent as KeyboardArrowDownOutlined } from '@material-design-icons/svg/outlined/keyboard_arrow_down.svg';
+import KeyboardArrowDownOutlined from '@material-design-icons/svg/outlined/keyboard_arrow_down.svg?react';
 import { isNull, isUndefined, nth } from 'lodash';
 import { useId } from 'react';
 import { CLASSES } from './vars';

package/alert/Alert.js

@@ -1,11 +1,11 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { checkNodeExist } from '@laser-ui/utils';
-import { ReactComponent as CheckCircleOutlined } from '@material-design-icons/svg/outlined/check_circle.svg';
-import { ReactComponent as CloseOutlined } from '@material-design-icons/svg/outlined/close.svg';
-import { ReactComponent as HighlightOffOutlined } from '@material-design-icons/svg/outlined/highlight_off.svg';
-import { ReactComponent as InfoOutlined } from '@material-design-icons/svg/outlined/info.svg';
-import { ReactComponent as WarningAmberOutlined } from '@material-design-icons/svg/outlined/warning_amber.svg';
+import CheckCircleOutlined from '@material-design-icons/svg/outlined/check_circle.svg?react';
+import CloseOutlined from '@material-design-icons/svg/outlined/close.svg?react';
+import HighlightOffOutlined from '@material-design-icons/svg/outlined/highlight_off.svg?react';
+import InfoOutlined from '@material-design-icons/svg/outlined/info.svg?react';
+import WarningAmberOutlined from '@material-design-icons/svg/outlined/warning_amber.svg?react';
 import { isUndefined } from 'lodash';
 import { CLASSES } from './vars';
 import { useComponentProps, useControlled, useStyled, useTranslation } from '../hooks';

package/cascader/Cascader.js

@@ -2,10 +2,10 @@ import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useEvent, useEventCallback, useForkRef, useResize } from '@laser-ui/hooks';
 import { findNested } from '@laser-ui/utils';
-import { ReactComponent as CancelFilled } from '@material-design-icons/svg/filled/cancel.svg';
-import { ReactComponent as CloseOutlined } from '@material-design-icons/svg/outlined/close.svg';
-import { ReactComponent as KeyboardArrowDownOutlined } from '@material-design-icons/svg/outlined/keyboard_arrow_down.svg';
-import { ReactComponent as SearchOutlined } from '@material-design-icons/svg/outlined/search.svg';
+import CancelFilled from '@material-design-icons/svg/filled/cancel.svg?react';
+import CloseOutlined from '@material-design-icons/svg/outlined/close.svg?react';
+import KeyboardArrowDownOutlined from '@material-design-icons/svg/outlined/keyboard_arrow_down.svg?react';
+import SearchOutlined from '@material-design-icons/svg/outlined/search.svg?react';
 import { isNull, isUndefined } from 'lodash';
 import { createElement, forwardRef, useId, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { CascaderPanel } from './internal/CascaderPanel';

package/cascader/internal/CascaderPanel.js

@@ -2,7 +2,7 @@ import { createElement as _createElement } from "react";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEventCallback } from '@laser-ui/hooks';
 import { scrollIntoViewIfNeeded } from '@laser-ui/utils';
-import { ReactComponent as KeyboardArrowRightOutlined } from '@material-design-icons/svg/outlined/keyboard_arrow_right.svg';
+import KeyboardArrowRightOutlined from '@material-design-icons/svg/outlined/keyboard_arrow_right.svg?react';
 import { isNumber, isUndefined } from 'lodash';
 import { forwardRef, useImperativeHandle, useMemo, useRef } from 'react';
 import { Checkbox } from '../../checkbox';

package/date-picker/DatePicker.js

@@ -2,9 +2,9 @@ import { __rest } from "tslib";
 import { createElement as _createElement } from "react";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useAsync, useEvent, useEventCallback, useForceUpdate, useForkRef, useImmer, useResize } from '@laser-ui/hooks';
-import { ReactComponent as CancelFilled } from '@material-design-icons/svg/filled/cancel.svg';
-import { ReactComponent as CalendarTodayOutlined } from '@material-design-icons/svg/outlined/calendar_today.svg';
-import { ReactComponent as SwapHorizOutlined } from '@material-design-icons/svg/outlined/swap_horiz.svg';
+import CancelFilled from '@material-design-icons/svg/filled/cancel.svg?react';
+import CalendarTodayOutlined from '@material-design-icons/svg/outlined/calendar_today.svg?react';
+import SwapHorizOutlined from '@material-design-icons/svg/outlined/swap_horiz.svg?react';
 import { isArray, isBoolean, isNull, isUndefined } from 'lodash';
 import { forwardRef, useEffect, useImperativeHandle, useRef } from 'react';
 import { DatePickerPanel } from './internal/DatePickerPanel';

package/date-picker/internal/DatePickerPanel.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useAsync, useEvent, useRefExtra } from '@laser-ui/hooks';
-import { ReactComponent as KeyboardArrowLeftOutlined } from '@material-design-icons/svg/outlined/keyboard_arrow_left.svg';
-import { ReactComponent as KeyboardArrowRightOutlined } from '@material-design-icons/svg/outlined/keyboard_arrow_right.svg';
-import { ReactComponent as KeyboardDoubleArrowLeftOutlined } from '@material-design-icons/svg/outlined/keyboard_double_arrow_left.svg';
-import { ReactComponent as KeyboardDoubleArrowRightOutlined } from '@material-design-icons/svg/outlined/keyboard_double_arrow_right.svg';
+import KeyboardArrowLeftOutlined from '@material-design-icons/svg/outlined/keyboard_arrow_left.svg?react';
+import KeyboardArrowRightOutlined from '@material-design-icons/svg/outlined/keyboard_arrow_right.svg?react';
+import KeyboardDoubleArrowLeftOutlined from '@material-design-icons/svg/outlined/keyboard_double_arrow_left.svg?react';
+import KeyboardDoubleArrowRightOutlined from '@material-design-icons/svg/outlined/keyboard_double_arrow_right.svg?react';
 import { forwardRef, useImperativeHandle, useRef, useState } from 'react';
 import dayjs from '../../dayjs';
 import { useTranslation } from '../../hooks';

package/drawer/DrawerHeader.js

@@ -1,6 +1,6 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ReactComponent as CloseOutlined } from '@material-design-icons/svg/outlined/close.svg';
+import CloseOutlined from '@material-design-icons/svg/outlined/close.svg?react';
 import { Children } from 'react';
 import { CLASSES } from './vars';
 import { Button } from '../button';

package/dropdown/Dropdown.js

@@ -267,10 +267,7 @@ function DropdownFC(props, ref) {
             triggerRef,
             popupRef,
             containerRefs: [],
-        }, onVisibleChange: (visible) => {
-            console.log(visible);
-            changeVisible(visible);
-        }, children: ({ renderTrigger, renderPopup }) => {
+        }, onVisibleChange: changeVisible, children: ({ renderTrigger, renderPopup }) => {
             const render = (el) => {
                 var _a, _b;
                 triggerId = (_a = el.props.id) !== null && _a !== void 0 ? _a : `${namespace}-dropdown-trigger-${uniqueId}`;

package/dropdown/internal/DropdownSub.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useEventCallback } from '@laser-ui/hooks';
 import { checkNodeExist } from '@laser-ui/utils';
-import { ReactComponent as KeyboardArrowRightOutlined } from '@material-design-icons/svg/outlined/keyboard_arrow_right.svg';
+import KeyboardArrowRightOutlined from '@material-design-icons/svg/outlined/keyboard_arrow_right.svg?react';
 import { isUndefined } from 'lodash';
 import { forwardRef, useImperativeHandle, useRef } from 'react';
 import { useJSS, useTranslation } from '../../hooks';

package/fab/FabBacktop.js

@@ -2,7 +2,7 @@ import { __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useEvent, useIsomorphicLayoutEffect, useRefExtra, useResize } from '@laser-ui/hooks';
 import { scrollTo, toPx } from '@laser-ui/utils';
-import { ReactComponent as VerticalAlignTopOutlined } from '@material-design-icons/svg/outlined/vertical_align_top.svg';
+import VerticalAlignTopOutlined from '@material-design-icons/svg/outlined/vertical_align_top.svg?react';
 import { isString } from 'lodash';
 import { cloneElement, useRef, useState } from 'react';
 import { FabButton } from './FabButton';

package/fab/FabButton.js

@@ -1,6 +1,6 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ReactComponent as AddOutlined } from '@material-design-icons/svg/outlined/add.svg';
+import AddOutlined from '@material-design-icons/svg/outlined/add.svg?react';
 import { forwardRef } from 'react';
 import { BUTTON_CLASSES } from './vars';
 import { useComponentProps, useStyled } from '../hooks';

package/form/FormItem.js

@@ -1,9 +1,9 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ReactComponent as CancelFilled } from '@material-design-icons/svg/filled/cancel.svg';
-import { ReactComponent as CheckCircleFilled } from '@material-design-icons/svg/filled/check_circle.svg';
-import { ReactComponent as ErrorFilled } from '@material-design-icons/svg/filled/error.svg';
-import { ReactComponent as HelpOutlineOutlined } from '@material-design-icons/svg/outlined/help_outline.svg';
+import CancelFilled from '@material-design-icons/svg/filled/cancel.svg?react';
+import CheckCircleFilled from '@material-design-icons/svg/filled/check_circle.svg?react';
+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 } from 'lodash';
 import { useContext, useId, useRef } from 'react';
 import { FormError } from './internal/FormError';

package/image/Image.js

@@ -9,15 +9,15 @@ import { CLASSES } from './vars';
 import { useComponentProps, useStyled } from '../hooks';
 import { mergeCS } from '../utils';
 export const Image = (props) => {
-    const _a = useComponentProps('Image', props), { styleOverrides, styleProvider, src, loading, error, actions, imgProps } = _a, restProps = __rest(_a, ["styleOverrides", "styleProvider", "src", "loading", "error", "actions", "imgProps"]);
+    const _a = useComponentProps('Image', props), { styleOverrides, styleProvider, loading, error, actions, imgProps } = _a, restProps = __rest(_a, ["styleOverrides", "styleProvider", "loading", "error", "actions", "imgProps"]);
     const styled = useStyled(CLASSES, { image: styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider.image }, styleOverrides);
     const forceUpdate = useForceUpdate();
     const dataRef = useRef({
         isLoading: true,
         isError: false,
     });
-    if (src !== dataRef.current.prevSrc) {
-        dataRef.current.prevSrc = src;
+    if (imgProps.src !== dataRef.current.prevSrc) {
+        dataRef.current.prevSrc = imgProps.src;
         dataRef.current.isLoading = true;
         dataRef.current.isError = false;
     }
@@ -27,7 +27,7 @@ export const Image = (props) => {
     }), { 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'), {
                 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 }),
-            }), { src: src, onLoadStart: (e) => {
+            }), { onLoadStart: (e) => {
                     var _a;
                     // https://bugs.chromium.org/p/chromium/issues/detail?id=458851
                     (_a = imgProps === null || imgProps === void 0 ? void 0 : imgProps.onLoadStart) === null || _a === void 0 ? void 0 : _a.call(imgProps, e);

package/image/ImagePreview.js

@@ -2,12 +2,12 @@ import { __rest } from "tslib";
 import { createElement as _createElement } from "react";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEvent, useImmer, useRefExtra } from '@laser-ui/hooks';
-import { ReactComponent as CloseOutlined } from '@material-design-icons/svg/outlined/close.svg';
-import { ReactComponent as KeyboardArrowLeftOutlined } from '@material-design-icons/svg/outlined/keyboard_arrow_left.svg';
-import { ReactComponent as KeyboardArrowRightOutlined } from '@material-design-icons/svg/outlined/keyboard_arrow_right.svg';
-import { ReactComponent as Rotate90DegreesCwOutlined } from '@material-design-icons/svg/outlined/rotate_90_degrees_cw.svg';
-import { ReactComponent as ZoomInOutlined } from '@material-design-icons/svg/outlined/zoom_in.svg';
-import { ReactComponent as ZoomOutOutlined } from '@material-design-icons/svg/outlined/zoom_out.svg';
+import CloseOutlined from '@material-design-icons/svg/outlined/close.svg?react';
+import KeyboardArrowLeftOutlined from '@material-design-icons/svg/outlined/keyboard_arrow_left.svg?react';
+import KeyboardArrowRightOutlined from '@material-design-icons/svg/outlined/keyboard_arrow_right.svg?react';
+import Rotate90DegreesCwOutlined from '@material-design-icons/svg/outlined/rotate_90_degrees_cw.svg?react';
+import ZoomInOutlined from '@material-design-icons/svg/outlined/zoom_in.svg?react';
+import ZoomOutOutlined from '@material-design-icons/svg/outlined/zoom_out.svg?react';
 import { isNull, isUndefined } from 'lodash';
 import { useRef, useState } from 'react';
 import { PREVIEW_CLASSES } from './vars';

package/image/types.d.ts

@@ -3,11 +3,10 @@ import type { CLASSES, PREVIEW_CLASSES } from './vars';
 import type { BaseProps } from '../types';
 export {};
 export interface ImageProps extends BaseProps<'image', typeof CLASSES>, Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
-    src: string;
+    imgProps: React.ImgHTMLAttributes<HTMLImageElement>;
     loading?: React.ReactNode;
     error?: React.ReactNode;
     actions?: React.ReactElement[];
-    imgProps?: React.ImgHTMLAttributes<HTMLImageElement>;
 }
 export interface ImageActionProps extends BaseProps<'image', typeof CLASSES>, React.ButtonHTMLAttributes<HTMLButtonElement> {
 }

package/input/Input.js

@@ -2,9 +2,9 @@ import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useForkRef } from '@laser-ui/hooks';
 import { checkNodeExist } from '@laser-ui/utils';
-import { ReactComponent as CancelFilled } from '@material-design-icons/svg/filled/cancel.svg';
-import { ReactComponent as VisibilityOutlined } from '@material-design-icons/svg/outlined/visibility.svg';
-import { ReactComponent as VisibilityOffOutlined } from '@material-design-icons/svg/outlined/visibility_off.svg';
+import CancelFilled from '@material-design-icons/svg/filled/cancel.svg?react';
+import VisibilityOutlined from '@material-design-icons/svg/outlined/visibility.svg?react';
+import VisibilityOffOutlined from '@material-design-icons/svg/outlined/visibility_off.svg?react';
 import { useRef } from 'react';
 import { InputNumber } from './InputNumber';
 import { CLASSES } from './vars';

package/input/InputNumber.js

@@ -2,9 +2,9 @@ import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useAsync, useEvent, useForceUpdate, useForkRef, useRefExtra } from '@laser-ui/hooks';
 import { checkNodeExist } from '@laser-ui/utils';
-import { ReactComponent as CancelFilled } from '@material-design-icons/svg/filled/cancel.svg';
-import { ReactComponent as KeyboardArrowDownOutlined } from '@material-design-icons/svg/outlined/keyboard_arrow_down.svg';
-import { ReactComponent as KeyboardArrowUpOutlined } from '@material-design-icons/svg/outlined/keyboard_arrow_up.svg';
+import CancelFilled from '@material-design-icons/svg/filled/cancel.svg?react';
+import KeyboardArrowDownOutlined from '@material-design-icons/svg/outlined/keyboard_arrow_down.svg?react';
+import KeyboardArrowUpOutlined from '@material-design-icons/svg/outlined/keyboard_arrow_up.svg?react';
 import { isNull, isUndefined } from 'lodash';
 import { useRef } from 'react';
 import { CLASSES } from './vars';

package/modal/ModalAlert.js

@@ -1,10 +1,10 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { checkNodeExist } from '@laser-ui/utils';
-import { ReactComponent as CheckCircleOutlined } from '@material-design-icons/svg/outlined/check_circle.svg';
-import { ReactComponent as HighlightOffOutlined } from '@material-design-icons/svg/outlined/highlight_off.svg';
-import { ReactComponent as InfoOutlined } from '@material-design-icons/svg/outlined/info.svg';
-import { ReactComponent as WarningAmberOutlined } from '@material-design-icons/svg/outlined/warning_amber.svg';
+import CheckCircleOutlined from '@material-design-icons/svg/outlined/check_circle.svg?react';
+import HighlightOffOutlined from '@material-design-icons/svg/outlined/highlight_off.svg?react';
+import InfoOutlined from '@material-design-icons/svg/outlined/info.svg?react';
+import WarningAmberOutlined from '@material-design-icons/svg/outlined/warning_amber.svg?react';
 import { CLASSES } from './vars';
 import { useComponentProps, useStyled } from '../hooks';
 import { Icon } from '../icon';

package/modal/ModalHeader.js

@@ -1,6 +1,6 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ReactComponent as CloseOutlined } from '@material-design-icons/svg/outlined/close.svg';
+import CloseOutlined from '@material-design-icons/svg/outlined/close.svg?react';
 import { Children } from 'react';
 import { CLASSES } from './vars';
 import { Button } from '../button';

package/notification/Notification.js

@@ -2,11 +2,11 @@ import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useAsync, useMount } from '@laser-ui/hooks';
 import { checkNodeExist } from '@laser-ui/utils';
-import { ReactComponent as CheckCircleOutlined } from '@material-design-icons/svg/outlined/check_circle.svg';
-import { ReactComponent as CloseOutlined } from '@material-design-icons/svg/outlined/close.svg';
-import { ReactComponent as HighlightOffOutlined } from '@material-design-icons/svg/outlined/highlight_off.svg';
-import { ReactComponent as InfoOutlined } from '@material-design-icons/svg/outlined/info.svg';
-import { ReactComponent as WarningAmberOutlined } from '@material-design-icons/svg/outlined/warning_amber.svg';
+import CheckCircleOutlined from '@material-design-icons/svg/outlined/check_circle.svg?react';
+import CloseOutlined from '@material-design-icons/svg/outlined/close.svg?react';
+import HighlightOffOutlined from '@material-design-icons/svg/outlined/highlight_off.svg?react';
+import InfoOutlined from '@material-design-icons/svg/outlined/info.svg?react';
+import WarningAmberOutlined from '@material-design-icons/svg/outlined/warning_amber.svg?react';
 import { isUndefined } from 'lodash';
 import { useId, useRef } from 'react';
 import { CLASSES, TTANSITION_DURING } from './vars';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@laser-ui/components",
-  "version": "0.2.2",
+  "version": "0.4.0",
   "description": "React components.",
   "keywords": [
     "ui",
@@ -26,8 +26,8 @@
   "module": "./index.js",
   "types": "./index.d.ts",
   "dependencies": {
-    "@laser-ui/hooks": "0.2.2",
-    "@laser-ui/utils": "0.2.2",
+    "@laser-ui/hooks": "0.4.0",
+    "@laser-ui/utils": "0.4.0",
     "@material-design-icons/svg": "^0.14.12",
     "jss": "^10.10.0",
     "jss-preset-default": "^10.10.0",
@@ -45,5 +45,5 @@
     "access": "public",
     "directory": "../../dist/libs/components"
   },
-  "gitHead": "81e159d1e70c2b3191ce2dad33db867d7871d080"
+  "gitHead": "434cf3de2a91e6557cf77801eda230c46e137ec9"
 }

package/pagination/Pagination.js

@@ -1,10 +1,10 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ReactComponent as KeyboardArrowLeftOutlined } from '@material-design-icons/svg/outlined/keyboard_arrow_left.svg';
-import { ReactComponent as KeyboardArrowRightOutlined } from '@material-design-icons/svg/outlined/keyboard_arrow_right.svg';
-import { ReactComponent as KeyboardDoubleArrowLeftOutlined } from '@material-design-icons/svg/outlined/keyboard_double_arrow_left.svg';
-import { ReactComponent as KeyboardDoubleArrowRightOutlined } from '@material-design-icons/svg/outlined/keyboard_double_arrow_right.svg';
-import { ReactComponent as MoreHorizOutlined } from '@material-design-icons/svg/outlined/more_horiz.svg';
+import KeyboardArrowLeftOutlined from '@material-design-icons/svg/outlined/keyboard_arrow_left.svg?react';
+import KeyboardArrowRightOutlined from '@material-design-icons/svg/outlined/keyboard_arrow_right.svg?react';
+import KeyboardDoubleArrowLeftOutlined from '@material-design-icons/svg/outlined/keyboard_double_arrow_left.svg?react';
+import KeyboardDoubleArrowRightOutlined from '@material-design-icons/svg/outlined/keyboard_double_arrow_right.svg?react';
+import MoreHorizOutlined from '@material-design-icons/svg/outlined/more_horiz.svg?react';
 import { isNull, isNumber } from 'lodash';
 import { Fragment, cloneElement, useRef, useState } from 'react';
 import { buttonProps } from './utils';

package/popover/PopoverHeader.js

@@ -1,6 +1,6 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ReactComponent as CloseOutlined } from '@material-design-icons/svg/outlined/close.svg';
+import CloseOutlined from '@material-design-icons/svg/outlined/close.svg?react';
 import { Children } from 'react';
 import { CLASSES } from './vars';
 import { Button } from '../button';

package/progress/Progress.js

@@ -1,12 +1,12 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { checkNodeExist } from '@laser-ui/utils';
-import { ReactComponent as CancelFilled } from '@material-design-icons/svg/filled/cancel.svg';
-import { ReactComponent as CheckCircleFilled } from '@material-design-icons/svg/filled/check_circle.svg';
-import { ReactComponent as WarningFilled } from '@material-design-icons/svg/filled/warning.svg';
-import { ReactComponent as CheckOutlined } from '@material-design-icons/svg/outlined/check.svg';
-import { ReactComponent as CloseOutlined } from '@material-design-icons/svg/outlined/close.svg';
-import { ReactComponent as WarningAmberOutlined } from '@material-design-icons/svg/outlined/warning_amber.svg';
+import CancelFilled from '@material-design-icons/svg/filled/cancel.svg?react';
+import CheckCircleFilled from '@material-design-icons/svg/filled/check_circle.svg?react';
+import WarningFilled from '@material-design-icons/svg/filled/warning.svg?react';
+import CheckOutlined from '@material-design-icons/svg/outlined/check.svg?react';
+import CloseOutlined from '@material-design-icons/svg/outlined/close.svg?react';
+import WarningAmberOutlined from '@material-design-icons/svg/outlined/warning_amber.svg?react';
 import { isUndefined } from 'lodash';
 import { useId } from 'react';
 import { CLASSES } from './vars';

package/rating/Rating.js

@@ -1,7 +1,7 @@
 import { __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { checkNodeExist } from '@laser-ui/utils';
-import { ReactComponent as StarFilled } from '@material-design-icons/svg/filled/star.svg';
+import StarFilled from '@material-design-icons/svg/filled/star.svg?react';
 import { isFunction } from 'lodash';
 import { useId, useState } from 'react';
 import { RatingStar } from './internal/RatingStar';

package/root/dialog-service.js

@@ -7,7 +7,11 @@ export class DialogService {
             draft.push({
                 key: dialogKey,
                 type,
-                props: Object.assign(Object.assign({}, props), { visible: true, skipFirstTransition: false, afterVisibleChange: (visible) => {
+                props: Object.assign(Object.assign({}, props), { visible: true, skipFirstTransition: false, onClose: () => {
+                        var _a, _b;
+                        (_b = (_a = props).onClose) === null || _b === void 0 ? void 0 : _b.call(_a);
+                        DialogService.close(dialogKey);
+                    }, afterVisibleChange: (visible) => {
                         var _a, _b;
                         (_b = (_a = props).afterVisibleChange) === null || _b === void 0 ? void 0 : _b.call(_a, visible);
                         if (!visible) {

package/select/Select.js

@@ -3,11 +3,11 @@ import { createElement as _createElement } from "react";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useEvent, useEventCallback, useForkRef, useResize } from '@laser-ui/hooks';
 import { findNested, scrollIntoViewIfNeeded } from '@laser-ui/utils';
-import { ReactComponent as CancelFilled } from '@material-design-icons/svg/filled/cancel.svg';
-import { ReactComponent as AddOutlined } from '@material-design-icons/svg/outlined/add.svg';
-import { ReactComponent as CloseOutlined } from '@material-design-icons/svg/outlined/close.svg';
-import { ReactComponent as KeyboardArrowDownOutlined } from '@material-design-icons/svg/outlined/keyboard_arrow_down.svg';
-import { ReactComponent as SearchOutlined } from '@material-design-icons/svg/outlined/search.svg';
+import CancelFilled from '@material-design-icons/svg/filled/cancel.svg?react';
+import AddOutlined from '@material-design-icons/svg/outlined/add.svg?react';
+import CloseOutlined from '@material-design-icons/svg/outlined/close.svg?react';
+import KeyboardArrowDownOutlined from '@material-design-icons/svg/outlined/keyboard_arrow_down.svg?react';
+import SearchOutlined from '@material-design-icons/svg/outlined/search.svg?react';
 import { isNull, isNumber, isUndefined } from 'lodash';
 import { createElement, forwardRef, useCallback, useId, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { CLASSES, IS_CREATED } from './vars';

package/slides/Slides.js

@@ -2,8 +2,8 @@ import { __rest } from "tslib";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { createElement as _createElement } from "react";
 import { useAsync, useEvent, useRefExtra } from '@laser-ui/hooks';
-import { ReactComponent as KeyboardArrowLeftOutlined } from '@material-design-icons/svg/outlined/keyboard_arrow_left.svg';
-import { ReactComponent as KeyboardArrowRightOutlined } from '@material-design-icons/svg/outlined/keyboard_arrow_right.svg';
+import KeyboardArrowLeftOutlined from '@material-design-icons/svg/outlined/keyboard_arrow_left.svg?react';
+import KeyboardArrowRightOutlined from '@material-design-icons/svg/outlined/keyboard_arrow_right.svg?react';
 import { isBoolean, isNumber, isUndefined, nth } from 'lodash';
 import { useEffect, useId, useRef, useState } from 'react';
 import { CLASSES } from './vars';

package/stepper/Stepper.js

@@ -2,8 +2,8 @@ import { __rest } from "tslib";
 import { createElement as _createElement } from "react";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { checkNodeExist } from '@laser-ui/utils';
-import { ReactComponent as CheckOutlined } from '@material-design-icons/svg/outlined/check.svg';
-import { ReactComponent as CloseOutlined } from '@material-design-icons/svg/outlined/close.svg';
+import CheckOutlined from '@material-design-icons/svg/outlined/check.svg?react';
+import CloseOutlined from '@material-design-icons/svg/outlined/close.svg?react';
 import { isNumber, isUndefined } from 'lodash';
 import { CLASSES } from './vars';
 import { useComponentProps, useStyled } from '../hooks';

package/table/TableFilter.js

@@ -1,6 +1,6 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ReactComponent as SearchOutlined } from '@material-design-icons/svg/outlined/search.svg';
+import SearchOutlined from '@material-design-icons/svg/outlined/search.svg?react';
 import { CLASSES } from './vars';
 import { Button } from '../button';
 import { useComponentProps, useStyled, useTranslation } from '../hooks';

package/tabs/Tabs.js

@@ -3,9 +3,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createElement as _createElement } from "react";
 import { useEventCallback, useIsomorphicLayoutEffect, useResize } from '@laser-ui/hooks';
 import { checkScrollEnd, findNested } from '@laser-ui/utils';
-import { ReactComponent as AddOutlined } from '@material-design-icons/svg/outlined/add.svg';
-import { ReactComponent as CloseOutlined } from '@material-design-icons/svg/outlined/close.svg';
-import { ReactComponent as MoreHorizOutlined } from '@material-design-icons/svg/outlined/more_horiz.svg';
+import AddOutlined from '@material-design-icons/svg/outlined/add.svg?react';
+import CloseOutlined from '@material-design-icons/svg/outlined/close.svg?react';
+import MoreHorizOutlined from '@material-design-icons/svg/outlined/more_horiz.svg?react';
 import { isUndefined, nth } from 'lodash';
 import { forwardRef, useEffect, useId, useImperativeHandle, useRef, useState } from 'react';
 import { CLASSES } from './vars';

package/time-picker/TimePicker.js

@@ -1,9 +1,9 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useAsync, useEvent, useEventCallback, useForceUpdate, useForkRef, useImmer, useResize } from '@laser-ui/hooks';
-import { ReactComponent as CancelFilled } from '@material-design-icons/svg/filled/cancel.svg';
-import { ReactComponent as AccessTimeOutlined } from '@material-design-icons/svg/outlined/access_time.svg';
-import { ReactComponent as SwapHorizOutlined } from '@material-design-icons/svg/outlined/swap_horiz.svg';
+import CancelFilled from '@material-design-icons/svg/filled/cancel.svg?react';
+import AccessTimeOutlined from '@material-design-icons/svg/outlined/access_time.svg?react';
+import SwapHorizOutlined from '@material-design-icons/svg/outlined/swap_horiz.svg?react';
 import { isNull, isUndefined } from 'lodash';
 import { forwardRef, useEffect, useImperativeHandle, useRef } from 'react';
 import { TimePickerPanel } from './internal/TimePickerPanel';

package/toast/Toast.js

@@ -2,11 +2,11 @@ import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useAsync, useMount } from '@laser-ui/hooks';
 import { checkNodeExist } from '@laser-ui/utils';
-import { ReactComponent as CheckCircleOutlined } from '@material-design-icons/svg/outlined/check_circle.svg';
-import { ReactComponent as CloseOutlined } from '@material-design-icons/svg/outlined/close.svg';
-import { ReactComponent as HighlightOffOutlined } from '@material-design-icons/svg/outlined/highlight_off.svg';
-import { ReactComponent as InfoOutlined } from '@material-design-icons/svg/outlined/info.svg';
-import { ReactComponent as WarningAmberOutlined } from '@material-design-icons/svg/outlined/warning_amber.svg';
+import CheckCircleOutlined from '@material-design-icons/svg/outlined/check_circle.svg?react';
+import CloseOutlined from '@material-design-icons/svg/outlined/close.svg?react';
+import HighlightOffOutlined from '@material-design-icons/svg/outlined/highlight_off.svg?react';
+import InfoOutlined from '@material-design-icons/svg/outlined/info.svg?react';
+import WarningAmberOutlined from '@material-design-icons/svg/outlined/warning_amber.svg?react';
 import { isUndefined } from 'lodash';
 import { useId, useRef } from 'react';
 import { CLASSES, TTANSITION_DURING } from './vars';

package/transfer/Transfer.js

@@ -1,7 +1,7 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ReactComponent as KeyboardArrowLeftOutlined } from '@material-design-icons/svg/outlined/keyboard_arrow_left.svg';
-import { ReactComponent as KeyboardArrowRightOutlined } from '@material-design-icons/svg/outlined/keyboard_arrow_right.svg';
+import KeyboardArrowLeftOutlined from '@material-design-icons/svg/outlined/keyboard_arrow_left.svg?react';
+import KeyboardArrowRightOutlined from '@material-design-icons/svg/outlined/keyboard_arrow_right.svg?react';
 import { isUndefined } from 'lodash';
 import { useMemo } from 'react';
 import { TransferPanel } from './internal/TransferPanel';

package/transfer/internal/TransferPanel.js

@@ -1,7 +1,7 @@
 import { createElement as _createElement } from "react";
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import { checkNodeExist } from '@laser-ui/utils';
-import { ReactComponent as SearchOutlined } from '@material-design-icons/svg/outlined/search.svg';
+import SearchOutlined from '@material-design-icons/svg/outlined/search.svg?react';
 import { isNumber } from 'lodash';
 import { useCallback, useId, useMemo, useRef } from 'react';
 import { Checkbox } from '../../checkbox';

package/tree/internal/TreePanel.js

@@ -3,9 +3,9 @@ import { createElement as _createElement } from "react";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEventCallback } from '@laser-ui/hooks';
 import { scrollIntoViewIfNeeded } from '@laser-ui/utils';
-import { ReactComponent as AddBoxOutlined } from '@material-design-icons/svg/outlined/add_box.svg';
-import { ReactComponent as ArrowRightOutlined } from '@material-design-icons/svg/outlined/arrow_right.svg';
-import { ReactComponent as IndeterminateCheckBoxOutlined } from '@material-design-icons/svg/outlined/indeterminate_check_box.svg';
+import AddBoxOutlined from '@material-design-icons/svg/outlined/add_box.svg?react';
+import ArrowRightOutlined from '@material-design-icons/svg/outlined/arrow_right.svg?react';
+import IndeterminateCheckBoxOutlined from '@material-design-icons/svg/outlined/indeterminate_check_box.svg?react';
 import { isUndefined } from 'lodash';
 import { cloneElement, forwardRef, useImperativeHandle, useMemo, useRef } from 'react';
 import { Checkbox } from '../../checkbox';

package/tree-select/TreeSelect.js

@@ -2,10 +2,10 @@ import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useEvent, useEventCallback, useForkRef, useResize } from '@laser-ui/hooks';
 import { findNested } from '@laser-ui/utils';
-import { ReactComponent as CancelFilled } from '@material-design-icons/svg/filled/cancel.svg';
-import { ReactComponent as CloseOutlined } from '@material-design-icons/svg/outlined/close.svg';
-import { ReactComponent as KeyboardArrowDownOutlined } from '@material-design-icons/svg/outlined/keyboard_arrow_down.svg';
-import { ReactComponent as SearchOutlined } from '@material-design-icons/svg/outlined/search.svg';
+import CancelFilled from '@material-design-icons/svg/filled/cancel.svg?react';
+import CloseOutlined from '@material-design-icons/svg/outlined/close.svg?react';
+import KeyboardArrowDownOutlined from '@material-design-icons/svg/outlined/keyboard_arrow_down.svg?react';
+import SearchOutlined from '@material-design-icons/svg/outlined/search.svg?react';
 import { isNull, isNumber, isUndefined } from 'lodash';
 import { createElement, forwardRef, useId, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { TreeSelectSearchPanel } from './internal/TreeSelectSearchPanel';

package/upload/UploadAction.js

@@ -1,8 +1,8 @@
 import { __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { saveFile } from '@laser-ui/utils';
-import { ReactComponent as DeleteOutlineOutlined } from '@material-design-icons/svg/outlined/delete_outline.svg';
-import { ReactComponent as FileDownloadOutlined } from '@material-design-icons/svg/outlined/file_download.svg';
+import DeleteOutlineOutlined from '@material-design-icons/svg/outlined/delete_outline.svg?react';
+import FileDownloadOutlined from '@material-design-icons/svg/outlined/file_download.svg?react';
 import { isUndefined } from 'lodash';
 import { forwardRef } from 'react';
 import { ACTION_CLASSES } from './vars';

package/upload/UploadButton.js

@@ -1,7 +1,7 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { ReactComponent as AddOutlined } from '@material-design-icons/svg/outlined/add.svg';
-import { ReactComponent as InsertDriveFileTwoTone } from '@material-design-icons/svg/two-tone/insert_drive_file.svg';
+import AddOutlined from '@material-design-icons/svg/outlined/add.svg?react';
+import InsertDriveFileTwoTone from '@material-design-icons/svg/two-tone/insert_drive_file.svg?react';
 import { Children, cloneElement, forwardRef } from 'react';
 import { UploadAction } from './UploadAction';
 import { UploadPreviewAction } from './UploadPreviewAction';

package/upload/UploadList.js

@@ -1,7 +1,7 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useImmer } from '@laser-ui/hooks';
-import { ReactComponent as AttachFileOutlined } from '@material-design-icons/svg/outlined/attach_file.svg';
+import AttachFileOutlined from '@material-design-icons/svg/outlined/attach_file.svg?react';
 import { isNumber, isUndefined } from 'lodash';
 import { Children, cloneElement, useContext } from 'react';
 import { UploadAction } from './UploadAction';

package/upload/UploadPicture.js

@@ -1,7 +1,7 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useImmer } from '@laser-ui/hooks';
-import { ReactComponent as InsertDriveFileTwoTone } from '@material-design-icons/svg/two-tone/insert_drive_file.svg';
+import InsertDriveFileTwoTone from '@material-design-icons/svg/two-tone/insert_drive_file.svg?react';
 import { isNumber } from 'lodash';
 import { Children, cloneElement, useContext } from 'react';
 import { UploadAction } from './UploadAction';

package/upload/UploadPictureList.js

@@ -1,7 +1,7 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useImmer } from '@laser-ui/hooks';
-import { ReactComponent as InsertDriveFileTwoTone } from '@material-design-icons/svg/two-tone/insert_drive_file.svg';
+import InsertDriveFileTwoTone from '@material-design-icons/svg/two-tone/insert_drive_file.svg?react';
 import { isNumber, isUndefined } from 'lodash';
 import { Children, cloneElement, useContext } from 'react';
 import { UploadAction } from './UploadAction';

package/upload/UploadPreviewAction.js

@@ -1,6 +1,6 @@
 import { __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { ReactComponent as VisibilityOutlinedIcon } from '@material-design-icons/svg/outlined/visibility.svg';
+import VisibilityOutlinedIcon from '@material-design-icons/svg/outlined/visibility.svg?react';
 import { isUndefined } from 'lodash';
 import { forwardRef } from 'react';
 import { ACTION_CLASSES } from './vars';