@canlooks/can-ui 0.0.176 → 0.0.177

package/dist/cjs/components/anchorList/anchorList.js

@@ -14,7 +14,7 @@ exports.AnchorList = (0, react_1.memo)(({ anchors, renderAnchorItem, indent = 24
      * 初始化高亮与滚动位置
      */
     const mounted = (0, react_1.useRef)(false);
-    (0, utils_1.useExternalClass)(() => {
+    (0, react_1.useEffect)(() => {
         if (routeMode === 'history') {
             mounted.current ||= scrollToId(location.hash.slice(1));
         }

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

@@ -15,10 +15,11 @@ export declare function useAppContext(): {
     notification: AppNotificationMethods<import("./appNotification").AppNotificationProps>;
     actionSheet: AppActionSheetMethods;
 };
-export declare const App: OverridableComponent<AppOwnProps> & {
+export type AppMethods = {
     dialog: AppDialogMethods;
     message: AppMessageMethods;
     notification: AppNotificationMethods;
     actionSheet: AppActionSheetMethods;
 };
+export declare const App: OverridableComponent<AppOwnProps> & AppMethods;
 export declare function InnerApp({ component: Component, theme, children, fill, ...props }: OverridableProps<AppProps, 'div'>): import("@emotion/react/jsx-runtime").JSX.Element;

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

@@ -27,17 +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, utils_1.useExternalClass)(() => ({
-        dialog: new appDialog_1.AppDialogMethods(),
-        message: new appMessage_1.AppMessageMethods(),
-        notification: new appNotification_1.AppNotificationMethods(),
-        actionSheet: new appActionSheet_1.AppActionSheetMethods()
-    }));
-    exports.App.dialog ||= appValue.dialog;
-    exports.App.message ||= appValue.message;
-    exports.App.notification ||= appValue.notification;
-    exports.App.actionSheet ||= appValue.actionSheet;
-    return ((0, jsx_runtime_1.jsxs)(AppContext, { value: appValue, children: [Component
+    const appContext = useAppContext();
+    exports.App.dialog = appContext.dialog;
+    exports.App.message = appContext.message;
+    exports.App.notification = appContext.notification;
+    exports.App.actionSheet = appContext.actionSheet;
+    return ((0, jsx_runtime_1.jsxs)(AppContext, { value: appContext, children: [Component
                 ? (0, jsx_runtime_1.jsx)(Component, { ...props, css: [
                         app_style_1.style,
                         (0, utils_1.defineCss)(({ background }) => (0, react_2.css) `
@@ -49,5 +44,5 @@ function InnerApp({ component: Component = 'div', theme, children, fill = true,
                             flex: 1;
                         `
                     ], className: (0, utils_1.clsx)(app_style_1.classes.root, props.className), children: children })
-                : children, (0, jsx_runtime_1.jsx)(appDialog_1.AppDialog, { methods: appValue.dialog }), (0, jsx_runtime_1.jsx)(appMessage_1.AppMessage, { methods: appValue.message }), (0, jsx_runtime_1.jsx)(appNotification_1.AppNotification, { methods: appValue.notification }), (0, jsx_runtime_1.jsx)(appActionSheet_1.AppActionSheet, { methods: appValue.actionSheet })] }));
+                : children, (0, jsx_runtime_1.jsx)(appDialog_1.AppDialog, { methods: appContext.dialog }), (0, jsx_runtime_1.jsx)(appMessage_1.AppMessage, { methods: appContext.message }), (0, jsx_runtime_1.jsx)(appNotification_1.AppNotification, { methods: appContext.notification }), (0, jsx_runtime_1.jsx)(appActionSheet_1.AppActionSheet, { methods: appContext.actionSheet })] }));
 }

package/dist/cjs/components/autocomplete/autocomplete.js

@@ -17,7 +17,7 @@ exports.Autocomplete = (0, react_1.memo)(({ children, loading, options, loadOpti
     };
     const [innerValue, setInnerValue] = (0, utils_1.useControlled)(defaultValue, value);
     const changedBySelect = (0, react_1.useRef)(false);
-    const changeHandler = (e, isSelect = false) => {
+    const changeHandler = (e, isSelect) => {
         changedBySelect.current = isSelect;
         onChange?.(e);
         setInnerValue(e.target.value);
@@ -80,7 +80,7 @@ exports.Autocomplete = (0, react_1.memo)(({ children, loading, options, loadOpti
         className: autocomplete_style_1.classes.root,
         loading: innerLoading.current,
         value: innerValue.current,
-        onChange: changeHandler,
+        onChange: e => changeHandler(e, false),
         onFocus: () => setFocused(true),
         onBlur: () => setFocused(false)
     });

package/dist/cjs/components/waterfall/waterfall.js

@@ -33,7 +33,7 @@ const Waterfall = ({ columnCount = { xs: 4 }, gap = 0, columnGap, rowGap, ...pro
         });
     });
     (0, utils_1.useUpdateEffect)(computeItemOrder, [columnCountNum.current]);
-    (0, utils_1.useExternalClass)(() => void 0, () => {
+    (0, utils_1.useUnmounted)(() => {
         resizeObserver.current.disconnect();
     });
     return ((0, jsx_runtime_1.jsx)("div", { ...props, ref: (0, utils_1.cloneRef)(containerRef, props.ref), css: (0, waterfall_style_1.useStyle)({ columnCount, columnGap, rowGap }), className: (0, utils_1.clsx)(waterfall_style_1.classes.root, props.className), children: react_1.Children.map(props.children, child => {

package/dist/cjs/extensions/reactiveForm/reactiveFormItem.js

@@ -26,6 +26,10 @@ function InnerFormItem({ dependencies, checked, value, onChange, ...props }) {
             props.children.props?.onChange?.(e);
             onChange?.(e);
             context.onChange?.();
+        },
+        onkeydown(e) {
+            e.preventDefault();
+            props.children.props?.onkeydown?.(e);
         }
     };
     return ((0, jsx_runtime_1.jsx)(form_1.FormItem, { ...props, ref: (0, utils_1.cloneRef)(formItemRef, props.ref), _fieldValue: checked ?? value, children: (_, styleProps, key) => {

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

@@ -24,10 +24,10 @@ export declare function useDerivedState<T>(referredState: (prevState: T | undefi
 export declare function useDerivedState<T>(referredState: T, deps?: any[]): [RefObject<T>, Dispatch<SetStateAction<T>>];
 export declare function useMounted(): void;
 /**
- * 组件卸载后得到{current: true}
- * @returns
+ * 得到一个RefObject，用于判断组件是否卸载
+ * @param onUnmount 回调函数，卸载时触发
  */
-export declare function useUnmounted(): RefObject<boolean>;
+export declare function useUnmounted(onUnmount?: () => void): RefObject<boolean>;
 /**
  * 处理受控组件的外部属性与内部属性
  * @param defaultValue
@@ -55,7 +55,7 @@ export declare function useContainer<T extends HTMLElement | null>(container?: D
 /**
  * 使用外部类，该方法可避免`StrictMode`下，React渲染行为与外部类实例生命周期不同步的问题
  */
-export declare function useExternalClass<T>(setup: () => T, cleanup?: (instance: T) => void): T;
+export declare function useExternalClass<T>(setup: () => T, cleanup?: (instance: T) => void): RefObject<T>;
 /**
  * 用法同{@link useEffect}，但StrictMode下不会执行两次
  */
@@ -67,4 +67,4 @@ export declare function useUpdateEffect(effect: EffectCallback, deps?: Dependenc
 /**
  * 用法同{@link useMemo}，但StrictMode下不会执行两次
  */
-export declare function useStrictMemo<T>(factory: () => T, deps?: DependencyList): T | undefined;
+export declare function useStrictMemo<T>(factory: () => T, deps: DependencyList): T | undefined;

package/dist/cjs/utils/hooks.js

@@ -47,7 +47,7 @@ function useForceUpdate() {
 function useDerivedState(referredState, deps) {
     const derivedState = (0, react_1.useRef)(void 0);
     (0, react_1.useMemo)(() => {
-        // StrictMode下，derivedState会重置2次
+        // StrictMode下，需要重置2次，使prevState保持正确
         derivedState.current = void 0;
     }, []);
     const updateState = (state) => {
@@ -73,14 +73,21 @@ function useDerivedState(referredState, deps) {
 function useMounted() {
 }
 /**
- * 组件卸载后得到{current: true}
- * @returns
+ * 得到一个RefObject，用于判断组件是否卸载
+ * @param onUnmount 回调函数，卸载时触发
  */
-function useUnmounted() {
+function useUnmounted(onUnmount) {
     const isUnmounted = (0, react_1.useRef)(false);
-    useExternalClass(() => void 0, () => {
-        isUnmounted.current = true;
-    });
+    const mountTimes = (0, react_1.useRef)(0);
+    (0, react_1.useMemo)(() => {
+        mountTimes.current++;
+    }, []);
+    (0, react_1.useEffect)(() => () => {
+        if (!--mountTimes.current) {
+            isUnmounted.current = true;
+            onUnmount?.();
+        }
+    }, []);
     return isUnmounted;
 }
 function useControlled(defaultValue, value, onChange) {
@@ -152,31 +159,34 @@ function useContainer(container, effectContainer, defaultContainer) {
  * 使用外部类，该方法可避免`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;
+    const instance = (0, react_1.useRef)(void 0);
+    instance.current ||= setup();
+    useUnmounted(() => {
+        cleanup?.(instance.current);
+        instance.current = void 0;
     });
-    (0, react_1.useEffect)(() => () => {
-        !--mountTimes.current && cleanup?.(instance);
-    }, []);
     return instance;
 }
 /**
  * 用法同{@link useEffect}，但StrictMode下不会执行两次
  */
 function useStrictEffect(effect, deps) {
-    const prevDeps = (0, react_1.useRef)(void 0);
+    const hasRun = (0, react_1.useRef)(false);
+    const prevDeps = (0, react_1.useRef)(deps);
+    const prevCleanup = (0, react_1.useRef)(void 0);
     (0, react_1.useEffect)(() => {
-        const isDepsChanged = prevDeps.current ? !(0, utils_1.arrayShallowEqual)(prevDeps.current, deps) : true;
-        if (isDepsChanged) {
+        const isDepsChanged = !(0, utils_1.arrayShallowEqual)(prevDeps.current, deps);
+        if (!hasRun.current || isDepsChanged) {
+            prevCleanup.current?.();
+            prevCleanup.current = effect();
+            hasRun.current = true;
             prevDeps.current = deps;
-            return effect();
         }
     });
+    useUnmounted(() => {
+        prevCleanup.current?.();
+        prevCleanup.current = void 0;
+    });
 }
 /**
  * 用法同{@link useEffect}，但会排除首次渲染
@@ -200,7 +210,7 @@ function useStrictMemo(factory, deps) {
     const isDepsChanged = prevDeps.current ? !(0, utils_1.arrayShallowEqual)(prevDeps.current, deps) : true;
     if (isDepsChanged) {
         prevDeps.current = deps;
-        return memoizedValue.current = factory();
+        memoizedValue.current = factory();
     }
     return memoizedValue.current;
 }

package/dist/esm/components/anchorList/anchorList.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { classes, style } from './anchorList.style.js';
-import { clsx, listenAllPredecessorsScroll, useDerivedState, useExternalClass, useSyncState } from '../../utils/index.js';
+import { clsx, listenAllPredecessorsScroll, useDerivedState, useSyncState } from '../../utils/index.js';
 import { memo, useEffect, useRef } from 'react';
 import { Flex } from '../flex/index.js';
 import { ActiveIndicator } from './activeIndicator.js';
@@ -11,7 +11,7 @@ export const AnchorList = memo(({ anchors, renderAnchorItem, indent = 24, scroll
      * 初始化高亮与滚动位置
      */
     const mounted = useRef(false);
-    useExternalClass(() => {
+    useEffect(() => {
         if (routeMode === 'history') {
             mounted.current ||= scrollToId(location.hash.slice(1));
         }

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

@@ -15,10 +15,11 @@ export declare function useAppContext(): {
     notification: AppNotificationMethods<import("./appNotification.js").AppNotificationProps>;
     actionSheet: AppActionSheetMethods;
 };
-export declare const App: OverridableComponent<AppOwnProps> & {
+export type AppMethods = {
     dialog: AppDialogMethods;
     message: AppMessageMethods;
     notification: AppNotificationMethods;
     actionSheet: AppActionSheetMethods;
 };
+export declare const App: OverridableComponent<AppOwnProps> & AppMethods;
 export declare function InnerApp({ component: Component, theme, children, fill, ...props }: OverridableProps<AppProps, 'div'>): import("@emotion/react/jsx-runtime").JSX.Element;

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 } from 'react';
-import { clsx, defineCss, useExternalClass } from '../../utils/index.js';
+import { clsx, defineCss } from '../../utils/index.js';
 import { classes, style } from './app.style.js';
 import { ThemeProvider } from '../theme/index.js';
 import { AppDialog, AppDialogMethods } from './appDialog.js';
@@ -22,17 +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 = useExternalClass(() => ({
-        dialog: new AppDialogMethods(),
-        message: new AppMessageMethods(),
-        notification: new AppNotificationMethods(),
-        actionSheet: new AppActionSheetMethods()
-    }));
-    App.dialog ||= appValue.dialog;
-    App.message ||= appValue.message;
-    App.notification ||= appValue.notification;
-    App.actionSheet ||= appValue.actionSheet;
-    return (_jsxs(AppContext, { value: appValue, children: [Component
+    const appContext = useAppContext();
+    App.dialog = appContext.dialog;
+    App.message = appContext.message;
+    App.notification = appContext.notification;
+    App.actionSheet = appContext.actionSheet;
+    return (_jsxs(AppContext, { value: appContext, children: [Component
                 ? _jsx(Component, { ...props, css: [
                         style,
                         defineCss(({ background }) => css `
@@ -44,5 +39,5 @@ export function InnerApp({ component: Component = 'div', theme, children, fill =
                             flex: 1;
                         `
                     ], className: clsx(classes.root, props.className), children: children })
-                : children, _jsx(AppDialog, { methods: appValue.dialog }), _jsx(AppMessage, { methods: appValue.message }), _jsx(AppNotification, { methods: appValue.notification }), _jsx(AppActionSheet, { methods: appValue.actionSheet })] }));
+                : children, _jsx(AppDialog, { methods: appContext.dialog }), _jsx(AppMessage, { methods: appContext.message }), _jsx(AppNotification, { methods: appContext.notification }), _jsx(AppActionSheet, { methods: appContext.actionSheet })] }));
 }

package/dist/esm/components/autocomplete/autocomplete.js

@@ -14,7 +14,7 @@ export const Autocomplete = memo(({ children, loading, options, loadOptions, pri
     };
     const [innerValue, setInnerValue] = useControlled(defaultValue, value);
     const changedBySelect = useRef(false);
-    const changeHandler = (e, isSelect = false) => {
+    const changeHandler = (e, isSelect) => {
         changedBySelect.current = isSelect;
         onChange?.(e);
         setInnerValue(e.target.value);
@@ -77,7 +77,7 @@ export const Autocomplete = memo(({ children, loading, options, loadOptions, pri
         className: classes.root,
         loading: innerLoading.current,
         value: innerValue.current,
-        onChange: changeHandler,
+        onChange: e => changeHandler(e, false),
         onFocus: () => setFocused(true),
         onBlur: () => setFocused(false)
     });

package/dist/esm/components/waterfall/waterfall.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { Children, isValidElement, useLayoutEffect, useRef } from 'react';
 import { classes, useStyle } from './waterfall.style.js';
 import { WaterfallItem } from './waterfallItem.js';
-import { cloneRef, clsx, toResponsiveValue, useExternalClass, useResponsiveValue, useUpdateEffect } from '../../utils/index.js';
+import { cloneRef, clsx, toResponsiveValue, useResponsiveValue, useUnmounted, useUpdateEffect } from '../../utils/index.js';
 export const Waterfall = ({ columnCount = { xs: 4 }, gap = 0, columnGap, rowGap, ...props }) => {
     columnCount = toResponsiveValue(columnCount);
     gap = toResponsiveValue(gap);
@@ -30,7 +30,7 @@ export const Waterfall = ({ columnCount = { xs: 4 }, gap = 0, columnGap, rowGap,
         });
     });
     useUpdateEffect(computeItemOrder, [columnCountNum.current]);
-    useExternalClass(() => void 0, () => {
+    useUnmounted(() => {
         resizeObserver.current.disconnect();
     });
     return (_jsx("div", { ...props, ref: cloneRef(containerRef, props.ref), css: useStyle({ columnCount, columnGap, rowGap }), className: clsx(classes.root, props.className), children: Children.map(props.children, child => {

package/dist/esm/extensions/reactiveForm/reactiveFormItem.js

@@ -23,6 +23,10 @@ function InnerFormItem({ dependencies, checked, value, onChange, ...props }) {
             props.children.props?.onChange?.(e);
             onChange?.(e);
             context.onChange?.();
+        },
+        onkeydown(e) {
+            e.preventDefault();
+            props.children.props?.onkeydown?.(e);
         }
     };
     return (_jsx(FormItem, { ...props, ref: cloneRef(formItemRef, props.ref), _fieldValue: checked ?? value, children: (_, styleProps, key) => {

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

@@ -24,10 +24,10 @@ export declare function useDerivedState<T>(referredState: (prevState: T | undefi
 export declare function useDerivedState<T>(referredState: T, deps?: any[]): [RefObject<T>, Dispatch<SetStateAction<T>>];
 export declare function useMounted(): void;
 /**
- * 组件卸载后得到{current: true}
- * @returns
+ * 得到一个RefObject，用于判断组件是否卸载
+ * @param onUnmount 回调函数，卸载时触发
  */
-export declare function useUnmounted(): RefObject<boolean>;
+export declare function useUnmounted(onUnmount?: () => void): RefObject<boolean>;
 /**
  * 处理受控组件的外部属性与内部属性
  * @param defaultValue
@@ -55,7 +55,7 @@ export declare function useContainer<T extends HTMLElement | null>(container?: D
 /**
  * 使用外部类，该方法可避免`StrictMode`下，React渲染行为与外部类实例生命周期不同步的问题
  */
-export declare function useExternalClass<T>(setup: () => T, cleanup?: (instance: T) => void): T;
+export declare function useExternalClass<T>(setup: () => T, cleanup?: (instance: T) => void): RefObject<T>;
 /**
  * 用法同{@link useEffect}，但StrictMode下不会执行两次
  */
@@ -67,4 +67,4 @@ export declare function useUpdateEffect(effect: EffectCallback, deps?: Dependenc
 /**
  * 用法同{@link useMemo}，但StrictMode下不会执行两次
  */
-export declare function useStrictMemo<T>(factory: () => T, deps?: DependencyList): T | undefined;
+export declare function useStrictMemo<T>(factory: () => T, deps: DependencyList): T | undefined;

package/dist/esm/utils/hooks.js

@@ -32,7 +32,7 @@ export function useForceUpdate() {
 export function useDerivedState(referredState, deps) {
     const derivedState = useRef(void 0);
     useMemo(() => {
-        // StrictMode下，derivedState会重置2次
+        // StrictMode下，需要重置2次，使prevState保持正确
         derivedState.current = void 0;
     }, []);
     const updateState = (state) => {
@@ -58,14 +58,21 @@ export function useDerivedState(referredState, deps) {
 export function useMounted() {
 }
 /**
- * 组件卸载后得到{current: true}
- * @returns
+ * 得到一个RefObject，用于判断组件是否卸载
+ * @param onUnmount 回调函数，卸载时触发
  */
-export function useUnmounted() {
+export function useUnmounted(onUnmount) {
     const isUnmounted = useRef(false);
-    useExternalClass(() => void 0, () => {
-        isUnmounted.current = true;
-    });
+    const mountTimes = useRef(0);
+    useMemo(() => {
+        mountTimes.current++;
+    }, []);
+    useEffect(() => () => {
+        if (!--mountTimes.current) {
+            isUnmounted.current = true;
+            onUnmount?.();
+        }
+    }, []);
     return isUnmounted;
 }
 export function useControlled(defaultValue, value, onChange) {
@@ -137,31 +144,34 @@ export function useContainer(container, effectContainer, defaultContainer) {
  * 使用外部类，该方法可避免`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;
+    const instance = useRef(void 0);
+    instance.current ||= setup();
+    useUnmounted(() => {
+        cleanup?.(instance.current);
+        instance.current = void 0;
     });
-    useEffect(() => () => {
-        !--mountTimes.current && cleanup?.(instance);
-    }, []);
     return instance;
 }
 /**
  * 用法同{@link useEffect}，但StrictMode下不会执行两次
  */
 export function useStrictEffect(effect, deps) {
-    const prevDeps = useRef(void 0);
+    const hasRun = useRef(false);
+    const prevDeps = useRef(deps);
+    const prevCleanup = useRef(void 0);
     useEffect(() => {
-        const isDepsChanged = prevDeps.current ? !arrayShallowEqual(prevDeps.current, deps) : true;
-        if (isDepsChanged) {
+        const isDepsChanged = !arrayShallowEqual(prevDeps.current, deps);
+        if (!hasRun.current || isDepsChanged) {
+            prevCleanup.current?.();
+            prevCleanup.current = effect();
+            hasRun.current = true;
             prevDeps.current = deps;
-            return effect();
         }
     });
+    useUnmounted(() => {
+        prevCleanup.current?.();
+        prevCleanup.current = void 0;
+    });
 }
 /**
  * 用法同{@link useEffect}，但会排除首次渲染
@@ -185,7 +195,7 @@ export function useStrictMemo(factory, deps) {
     const isDepsChanged = prevDeps.current ? !arrayShallowEqual(prevDeps.current, deps) : true;
     if (isDepsChanged) {
         prevDeps.current = deps;
-        return memoizedValue.current = factory();
+        memoizedValue.current = factory();
     }
     return memoizedValue.current;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canlooks/can-ui",
-  "version": "0.0.176",
+  "version": "0.0.177",
   "author": "C.CanLiang <canlooks@gmail.com>",
   "description": "My ui framework",
   "license": "MIT",