@canlooks/can-ui 0.0.112 → 0.0.114

package/dist/cjs/components/accordion/accordion.js

@@ -7,7 +7,7 @@ const utils_1 = require("../../utils");
 const theme_1 = require("../theme");
 const transitionBase_1 = require("../transitionBase");
 const icon_1 = require("../icon");
-const faCaretRight_1 = require("@fortawesome/free-solid-svg-icons/faCaretRight");
+const free_solid_svg_icons_1 = require("@fortawesome/free-solid-svg-icons");
 function Accordion({ size, title, prefix, suffix, expandIcon, defaultExpanded = false, expanded, onExpandedChange, readOnly, disabled, ...props }) {
     const theme = (0, theme_1.useTheme)();
     size ??= theme.size;
@@ -17,7 +17,7 @@ function Accordion({ size, title, prefix, suffix, expandIcon, defaultExpanded =
     };
     const renderExpandIcon = () => {
         if (!expandIcon) {
-            return (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faCaretRight_1.faCaretRight, className: accordion_style_1.classes.expandIcon });
+            return (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: free_solid_svg_icons_1.faCaretRight, className: accordion_style_1.classes.expandIcon });
         }
         if (typeof expandIcon === 'function') {
             return expandIcon(innerExpanded.current);

package/dist/cjs/components/app/app.js

@@ -27,12 +27,12 @@ exports.App = (({ theme, ...props }) => {
     return ((0, jsx_runtime_1.jsx)(globalEventDelegation_1.GlobalEventDelegation, { children: (0, jsx_runtime_1.jsx)(theme_1.ThemeProvider, { theme: theme, children: (0, jsx_runtime_1.jsx)(InnerApp, { ...props }) }) }));
 });
 function InnerApp({ component: Component = 'div', theme, children, fill = true, ...props }) {
-    const appValue = (0, react_1.useMemo)(() => ({
+    const appValue = (0, utils_1.useExternalClass)(() => ({
         dialog: exports.App.dialog = new appDialog_1.AppDialogMethods(),
         message: exports.App.message = new appMessage_1.AppMessageMethods(),
         notification: exports.App.notification = new appNotification_1.AppNotificationMethods(),
         actionSheet: exports.App.actionSheet = new appActionSheet_1.AppActionSheetMethods()
-    }), []);
+    }));
     return ((0, jsx_runtime_1.jsxs)(AppContext, { value: appValue, children: [Component
                 ? (0, jsx_runtime_1.jsx)(Component, { ...props, css: [
                         app_style_1.style,

package/dist/cjs/components/clickAway/clickAway.d.ts

@@ -37,7 +37,7 @@ export declare function ClickAway({ ref, container, eventType, onClickAway, disa
     title: string;
     translate: "yes" | "no";
     radioGroup: string;
-    role: "article" | "button" | "dialog" | "figure" | "form" | "img" | "link" | "main" | "menu" | "menuitem" | "option" | "search" | "table" | "switch" | "status" | (string & {}) | "none" | "checkbox" | "listbox" | "radio" | "region" | "cell" | "grid" | "row" | "listitem" | "menubar" | "progressbar" | "separator" | "tab" | "tabpanel" | "toolbar" | "tooltip" | "treeitem" | "scrollbar" | "alert" | "alertdialog" | "application" | "banner" | "columnheader" | "combobox" | "complementary" | "contentinfo" | "definition" | "directory" | "document" | "feed" | "gridcell" | "group" | "heading" | "list" | "log" | "marquee" | "math" | "menuitemcheckbox" | "menuitemradio" | "navigation" | "note" | "presentation" | "radiogroup" | "rowgroup" | "rowheader" | "searchbox" | "slider" | "spinbutton" | "tablist" | "term" | "textbox" | "timer" | "tree" | "treegrid";
+    role: "article" | "button" | "dialog" | "figure" | "form" | "img" | "link" | "main" | "menu" | "menuitem" | "option" | "search" | "table" | "switch" | "status" | (string & {}) | "none" | "checkbox" | "listbox" | "radio" | "region" | "cell" | "grid" | "row" | "math" | "listitem" | "menubar" | "progressbar" | "separator" | "tab" | "tabpanel" | "toolbar" | "tooltip" | "treeitem" | "scrollbar" | "alert" | "alertdialog" | "application" | "banner" | "columnheader" | "combobox" | "complementary" | "contentinfo" | "definition" | "directory" | "document" | "feed" | "gridcell" | "group" | "heading" | "list" | "log" | "marquee" | "menuitemcheckbox" | "menuitemradio" | "navigation" | "note" | "presentation" | "radiogroup" | "rowgroup" | "rowheader" | "searchbox" | "slider" | "spinbutton" | "tablist" | "term" | "textbox" | "timer" | "tree" | "treegrid";
     about: string;
     content: string;
     datatype: string;
@@ -60,7 +60,7 @@ export declare function ClickAway({ ref, container, eventType, onClickAway, disa
     results: number;
     security: string;
     unselectable: "off" | "on";
-    popover: "" | "auto" | "manual";
+    popover: "" | "auto" | "manual" | "hint";
     popoverTargetAction: "hide" | "show" | "toggle";
     popoverTarget: string;
     inert: boolean;
@@ -70,7 +70,7 @@ export declare function ClickAway({ ref, container, eventType, onClickAway, disa
     part: string;
     "aria-activedescendant": string;
     "aria-atomic": boolean | "false" | "true";
-    "aria-autocomplete": "both" | "none" | "inline" | "list";
+    "aria-autocomplete": "none" | "both" | "inline" | "list";
     "aria-braillelabel": string;
     "aria-brailleroledescription": string;
     "aria-busy": boolean | "false" | "true";

package/dist/cjs/components/icon/icon.d.ts

@@ -1,6 +1,8 @@
 import { FontAwesomeIconProps } from '@fortawesome/react-fontawesome';
 import { ColorPropsValue } from '../../types';
-export interface IconProps extends Omit<FontAwesomeIconProps, 'color'> {
+import { IconDefinition } from '@fortawesome/free-brands-svg-icons';
+export interface IconProps extends Omit<FontAwesomeIconProps, 'color' | 'icon'> {
     color?: ColorPropsValue;
+    icon: FontAwesomeIconProps['icon'] | IconDefinition;
 }
 export declare function Icon({ color, ...props }: IconProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/cjs/components/overlayBase/overlayBase.d.ts

@@ -24,4 +24,4 @@ export interface OverlayBaseProps extends DivProps {
     removeFocusOnOpen?: boolean;
 }
 export declare const overlayBaseTransitionDuration = 300;
-export declare function OverlayBase({ container, effectContainer, forceRender, open, onMaskClick, singleLayer, onOpened, onClosed, maskProps, removeFocusOnOpen, ...props }: OverlayBaseProps): false | React.ReactPortal;
+export declare function OverlayBase({ container, effectContainer, forceRender, open, onMaskClick, singleLayer, onOpened, onClosed, maskProps, removeFocusOnOpen, ...props }: OverlayBaseProps): false | React.ReactPortal | null;

package/dist/cjs/components/overlayBase/overlayBase.js

@@ -37,7 +37,7 @@ function OverlayBase({ container, effectContainer, forceRender, open, onMaskClic
         onClosed?.();
         forceRender === false && setShouldRender(false);
     };
-    return shouldRender.current && (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsxs)("div", { ...props, css: overlayBase_style_1.style, className: (0, utils_1.clsx)(overlayBase_style_1.classes.root, props.className), "data-open": open, "data-custom-container": containerEl.current !== document.body, children: [(0, jsx_runtime_1.jsx)(transitionBase_1.Fade, { timeout: exports.overlayBaseTransitionDuration, ...(0, utils_1.mergeComponentProps)(maskProps, {
+    return shouldRender.current && containerEl.current && (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsxs)("div", { ...props, css: overlayBase_style_1.style, className: (0, utils_1.clsx)(overlayBase_style_1.classes.root, props.className), "data-open": open, "data-custom-container": containerEl.current !== document.body, children: [(0, jsx_runtime_1.jsx)(transitionBase_1.Fade, { timeout: exports.overlayBaseTransitionDuration, ...(0, utils_1.mergeComponentProps)(maskProps, {
                     in: open,
                     className: overlayBase_style_1.classes.mask,
                     onClick,

package/dist/cjs/components/popper/popper.js

@@ -22,7 +22,7 @@ const getAttemptOrder = (placement) => {
     }
     return order;
 };
-function Popper({ ref, popperRef, anchorElement, container = document.body, effectContainer, content, offset, trigger = 'hover', clickToClose, placement = 'top', variant = 'zoom', sizeAdaptable = variant === 'collapse', mouseEnterDelay = 150, mouseLeaveDelay = 150, defaultOpen = false, open, onOpenChange, onOpenChangeEnd, disabled, autoClose = false, forceRender, children, ...props }) {
+function Popper({ ref, popperRef, anchorElement, container, effectContainer, content, offset, trigger = 'hover', clickToClose, placement = 'top', variant = 'zoom', sizeAdaptable = variant === 'collapse', mouseEnterDelay = 150, mouseLeaveDelay = 150, defaultOpen = false, open, onOpenChange, onOpenChangeEnd, disabled, autoClose = false, forceRender, children, ...props }) {
     const { spacing } = (0, theme_1.useTheme)();
     offset ??= spacing[2];
     (0, react_1.useImperativeHandle)(popperRef, () => {
@@ -537,7 +537,7 @@ function Popper({ ref, popperRef, anchorElement, container = document.body, effe
                 ? (0, react_1.cloneElement)(children, {
                     ref: childRef
                 })
-                : children, renderedOnce.current && (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(clickAway_1.ClickAway, { disabled: !clickable && !enterable && !contextMenuable, 
+                : children, renderedOnce.current && containerEl.current && (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(clickAway_1.ClickAway, { disabled: !clickable && !enterable && !contextMenuable, 
                 // 右键菜单点击anchor需要关闭弹框
                 targets: () => contextMenuEvent.current ? void 0 : getAnchorElement(), onClickAway: onClickAway, children: (0, jsx_runtime_1.jsx)("div", { ...props, ref: innerPopperRef, css: popper_style_1.style, className: (0, utils_1.clsx)(popper_style_1.classes.root, props.className), style: {
                         ...popperBounding,

package/dist/cjs/components/snackbarBase/snackbarBase.d.ts

@@ -30,7 +30,7 @@ export declare const SnackbarBase: React.MemoExoticComponent<({ methods, useTo,
     max?: number;
     container?: DefineElement<HTMLElement>;
     effectContainer?: DefineElement<HTMLElement>;
-}) => React.ReactPortal>;
+}) => React.ReactPortal | null>;
 interface SnackbarBaseItemProps extends Omit<SnackbarBaseProps, 'duration' | 'onAutoClose'> {
     id: string;
     type: keyof SnackbarBaseMethods;

package/dist/cjs/components/snackbarBase/snackbarBase.js

@@ -86,7 +86,7 @@ exports.SnackbarBase = (0, react_2.memo)(({ methods, useTo, max = useTo === 'mes
     methods.error = defineMethod('error');
     const css = (0, snackbarBase_style_1.style)();
     const containerEl = (0, utils_1.useContainer)(container, effectContainer);
-    return (0, react_dom_1.createPortal)(stacks.flatMap((stack, i) => stack
+    return containerEl.current && (0, react_dom_1.createPortal)(stacks.flatMap((stack, i) => stack
         ? (0, jsx_runtime_1.jsx)(react_transition_group_1.TransitionGroup, { css: css, className: snackbarBase_style_1.classes.root, "data-place": i, "data-use-to": useTo, children: stack.map(p => (0, react_1.createElement)(exports.SnackbarBaseItem, { ...p, key: p.id })) }, i)
         : []), containerEl.current);
 });

package/dist/cjs/components/status/status.d.ts

@@ -1,16 +1,16 @@
 import { ReactNode } from 'react';
 import { DivProps, Status as IStatus } from '../../types';
-import { FontAwesomeIconProps } from '@fortawesome/react-fontawesome';
+import { IconProps } from '../icon';
 export type StatusType = IStatus | 'confirm' | 'unknown';
 export declare const statusMapToIconDefinition: {
-    info: import("@fortawesome/fontawesome-common-types").IconDefinition;
-    success: import("@fortawesome/fontawesome-common-types").IconDefinition;
-    warning: import("@fortawesome/fontawesome-common-types").IconDefinition;
-    error: import("@fortawesome/fontawesome-common-types").IconDefinition;
-    confirm: import("@fortawesome/fontawesome-common-types").IconDefinition;
-    unknown: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    info: import("@fortawesome/free-solid-svg-icons").IconDefinition;
+    success: import("@fortawesome/free-solid-svg-icons").IconDefinition;
+    warning: import("@fortawesome/free-solid-svg-icons").IconDefinition;
+    error: import("@fortawesome/free-solid-svg-icons").IconDefinition;
+    confirm: import("@fortawesome/free-solid-svg-icons").IconDefinition;
+    unknown: import("@fortawesome/free-solid-svg-icons").IconDefinition;
 };
-export interface StatusIconProps extends Partial<FontAwesomeIconProps> {
+export interface StatusIconProps extends Partial<IconProps> {
     status?: StatusType;
 }
 export declare const StatusIcon: import("react").MemoExoticComponent<({ status, ...props }: StatusIconProps) => import("@emotion/react/jsx-runtime").JSX.Element>;
@@ -22,6 +22,6 @@ export interface StatusProps extends DivProps {
     /** 是否播放动画，默认为false */
     animation?: boolean;
     /** {@link variant}为`icon`时生效，传递给`<StatusIcon/>`组件 */
-    iconProps?: Partial<FontAwesomeIconProps>;
+    iconProps?: Partial<IconProps>;
 }
 export declare const Status: import("react").MemoExoticComponent<({ status, variant, label, animation, iconProps, ...props }: StatusProps) => import("@emotion/react/jsx-runtime").JSX.Element>;

package/dist/cjs/components/status/status.js

@@ -5,19 +5,15 @@ const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const react_1 = require("react");
 const status_style_1 = require("./status.style");
 const utils_1 = require("../../utils");
-const faCircleInfo_1 = require("@fortawesome/free-solid-svg-icons/faCircleInfo");
-const faCircleCheck_1 = require("@fortawesome/free-solid-svg-icons/faCircleCheck");
-const faCircleExclamation_1 = require("@fortawesome/free-solid-svg-icons/faCircleExclamation");
-const faCircleXmark_1 = require("@fortawesome/free-solid-svg-icons/faCircleXmark");
-const faCircleQuestion_1 = require("@fortawesome/free-solid-svg-icons/faCircleQuestion");
-const react_fontawesome_1 = require("@fortawesome/react-fontawesome");
+const free_solid_svg_icons_1 = require("@fortawesome/free-solid-svg-icons");
+const icon_1 = require("../icon");
 exports.statusMapToIconDefinition = {
-    info: faCircleInfo_1.faCircleInfo,
-    success: faCircleCheck_1.faCircleCheck,
-    warning: faCircleExclamation_1.faCircleExclamation,
-    error: faCircleXmark_1.faCircleXmark,
-    confirm: faCircleQuestion_1.faCircleQuestion,
-    unknown: faCircleQuestion_1.faCircleQuestion
+    info: free_solid_svg_icons_1.faCircleInfo,
+    success: free_solid_svg_icons_1.faCircleCheck,
+    warning: free_solid_svg_icons_1.faCircleExclamation,
+    error: free_solid_svg_icons_1.faCircleXmark,
+    confirm: free_solid_svg_icons_1.faCircleQuestion,
+    unknown: free_solid_svg_icons_1.faCircleQuestion
 };
 exports.StatusIcon = (0, react_1.memo)(({ status = 'unknown', ...props }) => {
     const statusColor = (0, utils_1.useStatusColor)(status);
@@ -30,7 +26,7 @@ exports.StatusIcon = (0, react_1.memo)(({ status = 'unknown', ...props }) => {
             ...props.style
         }), [statusColor, props.style])
     };
-    return (0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { ...iconProps });
+    return (0, jsx_runtime_1.jsx)(icon_1.Icon, { ...iconProps });
 });
 const defaultLabel = {
     unknown: '未知',

package/dist/cjs/utils/hooks.d.ts

@@ -55,4 +55,8 @@ export declare function useLoading<A extends any[], R>(fn: (...args: A) => R | P
  * @param effectContainer
  * @param defaultContainer 默认为`document.body`
  */
-export declare function useContainer<T extends HTMLElement | null>(container?: DefineElement<T>, effectContainer?: DefineElement<T>, defaultContainer?: T): RefObject<T>;
+export declare function useContainer<T extends HTMLElement | null>(container?: DefineElement<T>, effectContainer?: DefineElement<T>, defaultContainer?: DefineElement<T>): RefObject<T | null>;
+/**
+ * 使用外部类，该方法可避免`StrictMode`下，React渲染行为与外部类实例生命周期不同步的问题
+ */
+export declare function useExternalClass<T>(setup: () => T, cleanup?: (instance: T) => void): T;

package/dist/cjs/utils/hooks.js

@@ -9,6 +9,7 @@ exports.useUnmounted = useUnmounted;
 exports.useControlled = useControlled;
 exports.useLoading = useLoading;
 exports.useContainer = useContainer;
+exports.useExternalClass = useExternalClass;
 const react_1 = require("react");
 const utils_1 = require("./utils");
 /**
@@ -130,18 +131,36 @@ function useLoading(fn, referredLoading = false) {
  * @param effectContainer
  * @param defaultContainer 默认为`document.body`
  */
-function useContainer(container, effectContainer, defaultContainer = document.body) {
+function useContainer(container, effectContainer, defaultContainer) {
     const [containerEl, setContainerEl] = useDerivedState(prev => {
         if (container) {
             return typeof container === 'function' ? container() : container;
         }
-        return prev || defaultContainer;
-    }, [container, defaultContainer]);
+        return prev || null;
+    }, [container]);
     (0, react_1.useEffect)(() => {
-        if (effectContainer) {
-            const el = typeof effectContainer === 'function' ? effectContainer() : effectContainer;
+        const _container = effectContainer || defaultContainer || document.body;
+        if (_container) {
+            const el = typeof _container === 'function' ? _container() : _container;
             setContainerEl(el);
         }
-    }, []);
+    }, [effectContainer, defaultContainer]);
     return containerEl;
 }
+/**
+ * 使用外部类，该方法可避免`StrictMode`下，React渲染行为与外部类实例生命周期不同步的问题
+ */
+function useExternalClass(setup, cleanup) {
+    const mountTimes = (0, react_1.useRef)(0);
+    const prevInstance = (0, react_1.useRef)(void 0);
+    const [instance] = (0, react_1.useState)(() => {
+        if (!mountTimes.current++) {
+            prevInstance.current = setup();
+        }
+        return prevInstance.current;
+    });
+    (0, react_1.useEffect)(() => () => {
+        !--mountTimes.current && cleanup?.(instance);
+    }, []);
+    return instance;
+}

package/dist/esm/components/accordion/accordion.js

@@ -4,7 +4,7 @@ import { clsx, useControlled } from '../../utils';
 import { useTheme } from '../theme';
 import { Collapse } from '../transitionBase';
 import { Icon } from '../icon';
-import { faCaretRight } from '@fortawesome/free-solid-svg-icons/faCaretRight';
+import { faCaretRight } from '@fortawesome/free-solid-svg-icons';
 export function Accordion({ size, title, prefix, suffix, expandIcon, defaultExpanded = false, expanded, onExpandedChange, readOnly, disabled, ...props }) {
     const theme = useTheme();
     size ??= theme.size;

package/dist/esm/components/app/app.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-import { createContext, useContext, useMemo } from 'react';
-import { clsx, defineCss } from '../../utils';
+import { createContext, useContext } from 'react';
+import { clsx, defineCss, useExternalClass } from '../../utils';
 import { classes, style } from './app.style';
 import { ThemeProvider } from '../theme';
 import { AppDialog, AppDialogMethods } from './appDialog';
@@ -22,12 +22,12 @@ export const App = (({ theme, ...props }) => {
     return (_jsx(GlobalEventDelegation, { children: _jsx(ThemeProvider, { theme: theme, children: _jsx(InnerApp, { ...props }) }) }));
 });
 export function InnerApp({ component: Component = 'div', theme, children, fill = true, ...props }) {
-    const appValue = useMemo(() => ({
+    const appValue = useExternalClass(() => ({
         dialog: App.dialog = new AppDialogMethods(),
         message: App.message = new AppMessageMethods(),
         notification: App.notification = new AppNotificationMethods(),
         actionSheet: App.actionSheet = new AppActionSheetMethods()
-    }), []);
+    }));
     return (_jsxs(AppContext, { value: appValue, children: [Component
                 ? _jsx(Component, { ...props, css: [
                         style,

package/dist/esm/components/clickAway/clickAway.d.ts

@@ -37,7 +37,7 @@ export declare function ClickAway({ ref, container, eventType, onClickAway, disa
     title: string;
     translate: "yes" | "no";
     radioGroup: string;
-    role: "article" | "button" | "dialog" | "figure" | "form" | "img" | "link" | "main" | "menu" | "menuitem" | "option" | "search" | "table" | "switch" | "status" | (string & {}) | "none" | "checkbox" | "listbox" | "radio" | "region" | "cell" | "grid" | "row" | "listitem" | "menubar" | "progressbar" | "separator" | "tab" | "tabpanel" | "toolbar" | "tooltip" | "treeitem" | "scrollbar" | "alert" | "alertdialog" | "application" | "banner" | "columnheader" | "combobox" | "complementary" | "contentinfo" | "definition" | "directory" | "document" | "feed" | "gridcell" | "group" | "heading" | "list" | "log" | "marquee" | "math" | "menuitemcheckbox" | "menuitemradio" | "navigation" | "note" | "presentation" | "radiogroup" | "rowgroup" | "rowheader" | "searchbox" | "slider" | "spinbutton" | "tablist" | "term" | "textbox" | "timer" | "tree" | "treegrid";
+    role: "article" | "button" | "dialog" | "figure" | "form" | "img" | "link" | "main" | "menu" | "menuitem" | "option" | "search" | "table" | "switch" | "status" | (string & {}) | "none" | "checkbox" | "listbox" | "radio" | "region" | "cell" | "grid" | "row" | "math" | "listitem" | "menubar" | "progressbar" | "separator" | "tab" | "tabpanel" | "toolbar" | "tooltip" | "treeitem" | "scrollbar" | "alert" | "alertdialog" | "application" | "banner" | "columnheader" | "combobox" | "complementary" | "contentinfo" | "definition" | "directory" | "document" | "feed" | "gridcell" | "group" | "heading" | "list" | "log" | "marquee" | "menuitemcheckbox" | "menuitemradio" | "navigation" | "note" | "presentation" | "radiogroup" | "rowgroup" | "rowheader" | "searchbox" | "slider" | "spinbutton" | "tablist" | "term" | "textbox" | "timer" | "tree" | "treegrid";
     about: string;
     content: string;
     datatype: string;
@@ -60,7 +60,7 @@ export declare function ClickAway({ ref, container, eventType, onClickAway, disa
     results: number;
     security: string;
     unselectable: "off" | "on";
-    popover: "" | "auto" | "manual";
+    popover: "" | "auto" | "manual" | "hint";
     popoverTargetAction: "hide" | "show" | "toggle";
     popoverTarget: string;
     inert: boolean;
@@ -70,7 +70,7 @@ export declare function ClickAway({ ref, container, eventType, onClickAway, disa
     part: string;
     "aria-activedescendant": string;
     "aria-atomic": boolean | "false" | "true";
-    "aria-autocomplete": "both" | "none" | "inline" | "list";
+    "aria-autocomplete": "none" | "both" | "inline" | "list";
     "aria-braillelabel": string;
     "aria-brailleroledescription": string;
     "aria-busy": boolean | "false" | "true";

package/dist/esm/components/icon/icon.d.ts

@@ -1,6 +1,8 @@
 import { FontAwesomeIconProps } from '@fortawesome/react-fontawesome';
 import { ColorPropsValue } from '../../types';
-export interface IconProps extends Omit<FontAwesomeIconProps, 'color'> {
+import { IconDefinition } from '@fortawesome/free-brands-svg-icons';
+export interface IconProps extends Omit<FontAwesomeIconProps, 'color' | 'icon'> {
     color?: ColorPropsValue;
+    icon: FontAwesomeIconProps['icon'] | IconDefinition;
 }
 export declare function Icon({ color, ...props }: IconProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/esm/components/overlayBase/overlayBase.d.ts

@@ -24,4 +24,4 @@ export interface OverlayBaseProps extends DivProps {
     removeFocusOnOpen?: boolean;
 }
 export declare const overlayBaseTransitionDuration = 300;
-export declare function OverlayBase({ container, effectContainer, forceRender, open, onMaskClick, singleLayer, onOpened, onClosed, maskProps, removeFocusOnOpen, ...props }: OverlayBaseProps): false | React.ReactPortal;
+export declare function OverlayBase({ container, effectContainer, forceRender, open, onMaskClick, singleLayer, onOpened, onClosed, maskProps, removeFocusOnOpen, ...props }: OverlayBaseProps): false | React.ReactPortal | null;

package/dist/esm/components/overlayBase/overlayBase.js

@@ -33,7 +33,7 @@ export function OverlayBase({ container, effectContainer, forceRender, open, onM
         onClosed?.();
         forceRender === false && setShouldRender(false);
     };
-    return shouldRender.current && createPortal(_jsxs("div", { ...props, css: style, className: clsx(classes.root, props.className), "data-open": open, "data-custom-container": containerEl.current !== document.body, children: [_jsx(Fade, { timeout: overlayBaseTransitionDuration, ...mergeComponentProps(maskProps, {
+    return shouldRender.current && containerEl.current && createPortal(_jsxs("div", { ...props, css: style, className: clsx(classes.root, props.className), "data-open": open, "data-custom-container": containerEl.current !== document.body, children: [_jsx(Fade, { timeout: overlayBaseTransitionDuration, ...mergeComponentProps(maskProps, {
                     in: open,
                     className: classes.mask,
                     onClick,

package/dist/esm/components/popper/popper.js

@@ -19,7 +19,7 @@ const getAttemptOrder = (placement) => {
     }
     return order;
 };
-export function Popper({ ref, popperRef, anchorElement, container = document.body, effectContainer, content, offset, trigger = 'hover', clickToClose, placement = 'top', variant = 'zoom', sizeAdaptable = variant === 'collapse', mouseEnterDelay = 150, mouseLeaveDelay = 150, defaultOpen = false, open, onOpenChange, onOpenChangeEnd, disabled, autoClose = false, forceRender, children, ...props }) {
+export function Popper({ ref, popperRef, anchorElement, container, effectContainer, content, offset, trigger = 'hover', clickToClose, placement = 'top', variant = 'zoom', sizeAdaptable = variant === 'collapse', mouseEnterDelay = 150, mouseLeaveDelay = 150, defaultOpen = false, open, onOpenChange, onOpenChangeEnd, disabled, autoClose = false, forceRender, children, ...props }) {
     const { spacing } = useTheme();
     offset ??= spacing[2];
     useImperativeHandle(popperRef, () => {
@@ -534,7 +534,7 @@ export function Popper({ ref, popperRef, anchorElement, container = document.bod
                 ? cloneElement(children, {
                     ref: childRef
                 })
-                : children, renderedOnce.current && createPortal(_jsx(ClickAway, { disabled: !clickable && !enterable && !contextMenuable, 
+                : children, renderedOnce.current && containerEl.current && createPortal(_jsx(ClickAway, { disabled: !clickable && !enterable && !contextMenuable, 
                 // 右键菜单点击anchor需要关闭弹框
                 targets: () => contextMenuEvent.current ? void 0 : getAnchorElement(), onClickAway: onClickAway, children: _jsx("div", { ...props, ref: innerPopperRef, css: style, className: clsx(classes.root, props.className), style: {
                         ...popperBounding,

package/dist/esm/components/snackbarBase/snackbarBase.d.ts

@@ -30,7 +30,7 @@ export declare const SnackbarBase: React.MemoExoticComponent<({ methods, useTo,
     max?: number;
     container?: DefineElement<HTMLElement>;
     effectContainer?: DefineElement<HTMLElement>;
-}) => React.ReactPortal>;
+}) => React.ReactPortal | null>;
 interface SnackbarBaseItemProps extends Omit<SnackbarBaseProps, 'duration' | 'onAutoClose'> {
     id: string;
     type: keyof SnackbarBaseMethods;

package/dist/esm/components/snackbarBase/snackbarBase.js

@@ -82,7 +82,7 @@ export const SnackbarBase = memo(({ methods, useTo, max = useTo === 'message' ?
     methods.error = defineMethod('error');
     const css = style();
     const containerEl = useContainer(container, effectContainer);
-    return createPortal(stacks.flatMap((stack, i) => stack
+    return containerEl.current && createPortal(stacks.flatMap((stack, i) => stack
         ? _jsx(TransitionGroup, { css: css, className: classes.root, "data-place": i, "data-use-to": useTo, children: stack.map(p => _createElement(SnackbarBaseItem, { ...p, key: p.id })) }, i)
         : []), containerEl.current);
 });

package/dist/esm/components/status/status.d.ts

@@ -1,16 +1,16 @@
 import { ReactNode } from 'react';
 import { DivProps, Status as IStatus } from '../../types';
-import { FontAwesomeIconProps } from '@fortawesome/react-fontawesome';
+import { IconProps } from '../icon';
 export type StatusType = IStatus | 'confirm' | 'unknown';
 export declare const statusMapToIconDefinition: {
-    info: import("@fortawesome/fontawesome-common-types").IconDefinition;
-    success: import("@fortawesome/fontawesome-common-types").IconDefinition;
-    warning: import("@fortawesome/fontawesome-common-types").IconDefinition;
-    error: import("@fortawesome/fontawesome-common-types").IconDefinition;
-    confirm: import("@fortawesome/fontawesome-common-types").IconDefinition;
-    unknown: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    info: import("@fortawesome/free-solid-svg-icons").IconDefinition;
+    success: import("@fortawesome/free-solid-svg-icons").IconDefinition;
+    warning: import("@fortawesome/free-solid-svg-icons").IconDefinition;
+    error: import("@fortawesome/free-solid-svg-icons").IconDefinition;
+    confirm: import("@fortawesome/free-solid-svg-icons").IconDefinition;
+    unknown: import("@fortawesome/free-solid-svg-icons").IconDefinition;
 };
-export interface StatusIconProps extends Partial<FontAwesomeIconProps> {
+export interface StatusIconProps extends Partial<IconProps> {
     status?: StatusType;
 }
 export declare const StatusIcon: import("react").MemoExoticComponent<({ status, ...props }: StatusIconProps) => import("@emotion/react/jsx-runtime").JSX.Element>;
@@ -22,6 +22,6 @@ export interface StatusProps extends DivProps {
     /** 是否播放动画，默认为false */
     animation?: boolean;
     /** {@link variant}为`icon`时生效，传递给`<StatusIcon/>`组件 */
-    iconProps?: Partial<FontAwesomeIconProps>;
+    iconProps?: Partial<IconProps>;
 }
 export declare const Status: import("react").MemoExoticComponent<({ status, variant, label, animation, iconProps, ...props }: StatusProps) => import("@emotion/react/jsx-runtime").JSX.Element>;

package/dist/esm/components/status/status.js

@@ -2,12 +2,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { memo, useMemo } from 'react';
 import { classes, style } from './status.style';
 import { clsx, useStatusColor } from '../../utils';
-import { faCircleInfo } from '@fortawesome/free-solid-svg-icons/faCircleInfo';
-import { faCircleCheck } from '@fortawesome/free-solid-svg-icons/faCircleCheck';
-import { faCircleExclamation } from '@fortawesome/free-solid-svg-icons/faCircleExclamation';
-import { faCircleXmark } from '@fortawesome/free-solid-svg-icons/faCircleXmark';
-import { faCircleQuestion } from '@fortawesome/free-solid-svg-icons/faCircleQuestion';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faCircleInfo, faCircleCheck, faCircleExclamation, faCircleXmark, faCircleQuestion } from '@fortawesome/free-solid-svg-icons';
+import { Icon } from '../icon';
 export const statusMapToIconDefinition = {
     info: faCircleInfo,
     success: faCircleCheck,
@@ -27,7 +23,7 @@ export const StatusIcon = memo(({ status = 'unknown', ...props }) => {
             ...props.style
         }), [statusColor, props.style])
     };
-    return _jsx(FontAwesomeIcon, { ...iconProps });
+    return _jsx(Icon, { ...iconProps });
 });
 const defaultLabel = {
     unknown: '未知',

package/dist/esm/utils/hooks.d.ts

@@ -55,4 +55,8 @@ export declare function useLoading<A extends any[], R>(fn: (...args: A) => R | P
  * @param effectContainer
  * @param defaultContainer 默认为`document.body`
  */
-export declare function useContainer<T extends HTMLElement | null>(container?: DefineElement<T>, effectContainer?: DefineElement<T>, defaultContainer?: T): RefObject<T>;
+export declare function useContainer<T extends HTMLElement | null>(container?: DefineElement<T>, effectContainer?: DefineElement<T>, defaultContainer?: DefineElement<T>): RefObject<T | null>;
+/**
+ * 使用外部类，该方法可避免`StrictMode`下，React渲染行为与外部类实例生命周期不同步的问题
+ */
+export declare function useExternalClass<T>(setup: () => T, cleanup?: (instance: T) => void): T;

package/dist/esm/utils/hooks.js

@@ -119,18 +119,36 @@ export function useLoading(fn, referredLoading = false) {
  * @param effectContainer
  * @param defaultContainer 默认为`document.body`
  */
-export function useContainer(container, effectContainer, defaultContainer = document.body) {
+export function useContainer(container, effectContainer, defaultContainer) {
     const [containerEl, setContainerEl] = useDerivedState(prev => {
         if (container) {
             return typeof container === 'function' ? container() : container;
         }
-        return prev || defaultContainer;
-    }, [container, defaultContainer]);
+        return prev || null;
+    }, [container]);
     useEffect(() => {
-        if (effectContainer) {
-            const el = typeof effectContainer === 'function' ? effectContainer() : effectContainer;
+        const _container = effectContainer || defaultContainer || document.body;
+        if (_container) {
+            const el = typeof _container === 'function' ? _container() : _container;
             setContainerEl(el);
         }
-    }, []);
+    }, [effectContainer, defaultContainer]);
     return containerEl;
 }
+/**
+ * 使用外部类，该方法可避免`StrictMode`下，React渲染行为与外部类实例生命周期不同步的问题
+ */
+export function useExternalClass(setup, cleanup) {
+    const mountTimes = useRef(0);
+    const prevInstance = useRef(void 0);
+    const [instance] = useState(() => {
+        if (!mountTimes.current++) {
+            prevInstance.current = setup();
+        }
+        return prevInstance.current;
+    });
+    useEffect(() => () => {
+        !--mountTimes.current && cleanup?.(instance);
+    }, []);
+    return instance;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canlooks/can-ui",
-  "version": "0.0.112",
+  "version": "0.0.114",
   "author": "C.CanLiang <canlooks@gmail.com>",
   "description": "My ui framework",
   "license": "MIT",
@@ -51,35 +51,35 @@
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/sortable": "^10.0.0",
     "@emotion/react": "^11.14.0",
-    "@fortawesome/free-brands-svg-icons": "^6.7.2",
-    "@fortawesome/free-regular-svg-icons": "^6.7.2",
-    "@fortawesome/free-solid-svg-icons": "^6.7.2",
-    "@fortawesome/react-fontawesome": "^0.2.2",
-    "color": "^5.0.0",
-    "dayjs": "^1.11.13",
+    "@fortawesome/free-brands-svg-icons": "^7.1.0",
+    "@fortawesome/free-regular-svg-icons": "^7.1.0",
+    "@fortawesome/free-solid-svg-icons": "^7.1.0",
+    "@fortawesome/react-fontawesome": "^3.1.1",
+    "color": "^5.0.3",
+    "dayjs": "^1.11.19",
     "react-transition-group": "^4.4.5",
     "tslib": "^2.8.1"
   },
   "devDependencies": {
-    "@ant-design/icons": "^6.0.0",
-    "@canlooks/react-router": "^1.0.11",
-    "@canlooks/reactive": "^4.2.5",
-    "@emotion/styled": "^11.14.0",
+    "@ant-design/icons": "^6.1.0",
+    "@canlooks/react-router": "^1.1.0",
+    "@canlooks/reactive": "^4.7.10",
+    "@emotion/styled": "^11.14.1",
     "@mdi/js": "^7.4.47",
     "@mdi/react": "^1.6.1",
-    "@mui/icons-material": "^7.1.2",
-    "@types/node": "^24.0.3",
-    "@types/react": "^19.1.8",
-    "@types/react-dom": "^19.1.6",
+    "@mui/icons-material": "^7.3.6",
+    "@types/node": "^25.0.2",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
     "@types/react-syntax-highlighter": "^15.5.13",
     "@types/react-transition-group": "^4.4.12",
-    "mime": "^4.0.7",
-    "react": "^19.1.0",
-    "react-dom": "^19.1.0",
+    "mime": "^4.1.0",
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3",
     "react-markdown": "^10.1.0",
-    "react-syntax-highlighter": "^15.6.1",
+    "react-syntax-highlighter": "^16.1.0",
     "remark-gfm": "^4.0.1",
-    "typescript": "^5.8.3",
-    "vite": "^6.3.5"
+    "typescript": "^5.9.3",
+    "vite": "^7.3.0"
   }
 }