@canlooks/can-ui 0.0.145 → 0.0.146

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

@@ -9,6 +9,7 @@ const input_1 = require("../input");
 const utils_1 = require("../../utils");
 const autocomplete_style_1 = require("./autocomplete.style");
 const popper_style_1 = require("../popper/popper.style");
+const filterOptions_1 = require("../optionsBase/filterOptions");
 exports.Autocomplete = (0, react_1.memo)(({ children, loading, options, loadOptions, primaryKey = 'value', labelKey = 'label', onSelect, renderInput, popperProps, popperRef, defaultValue = '', value, onChange, ...props }) => {
     const [focused, _setFocused] = (0, react_1.useState)(false);
     const setFocused = (focused) => {
@@ -36,7 +37,12 @@ exports.Autocomplete = (0, react_1.memo)(({ children, loading, options, loadOpti
      * ------------------------------------------------------------------
      * 合并最终选项
      */
-    const actualOptions = innerOptions || options || react_1.Children.map(children, c => (0, react_1.isValidElement)(c) ? c.props : c) || void 0;
+    const actualOptions = (0, filterOptions_1.useFilterOptions)({
+        searchValue: innerValue.current,
+        options: innerOptions || options,
+        children,
+        labelKey
+    }).map(opt => (0, react_1.isValidElement)(opt) ? opt.props : opt);
     const optionsMap = (0, react_1.useMemo)(() => {
         const map = new Map();
         actualOptions?.forEach(opt => {
@@ -49,7 +55,7 @@ exports.Autocomplete = (0, react_1.memo)(({ children, loading, options, loadOpti
     }, [actualOptions, primaryKey]);
     const [open, _setOpen] = (0, utils_1.useDerivedState)(() => {
         return focused && !!optionsMap.size;
-    }, [focused, optionsMap.size]);
+    }, [focused, optionsMap]);
     const setOpen = (open) => {
         if (!props.disabled && !props.readOnly && (!open || optionsMap.size)) {
             // 必须有选项才能打开下拉框
@@ -75,8 +81,6 @@ exports.Autocomplete = (0, react_1.memo)(({ children, loading, options, loadOpti
         loading: innerLoading.current,
         value: innerValue.current,
         onChange: changeHandler,
-        onInput: () => setOpen(true),
-        onClick: () => setOpen(true),
         onFocus: () => setFocused(true),
         onBlur: () => setFocused(false)
     });
@@ -84,7 +88,8 @@ exports.Autocomplete = (0, react_1.memo)(({ children, loading, options, loadOpti
             placement: 'bottom',
             variant: 'collapse',
             trigger: false,
-            content: ((0, jsx_runtime_1.jsx)(optionsBase_1.OptionsBase, { onToggleSelected: optionSelectHandler, loading: innerLoading.current, options: actualOptions, labelKey: labelKey, primaryKey: primaryKey, children: children }))
+            animation: false,
+            content: ((0, jsx_runtime_1.jsx)(optionsBase_1.OptionsBase, { onToggleSelected: optionSelectHandler, loading: innerLoading.current, options: actualOptions, labelKey: labelKey, primaryKey: primaryKey, searchValue: innerValue.current, _optionsAlreadyFilter: true, children: children }))
         }, popperProps, {
             css: popper_style_1.popperStyle,
             open: open.current,

package/dist/cjs/components/cascade/searchResult.js

@@ -42,9 +42,9 @@ exports.SearchResult = (0, react_1.memo)(({ primaryKey, labelKey, childrenKey, s
         if (!searchValue) {
             return flattedOptions;
         }
-        const splited = searchValue.split(' ');
+        const split = searchValue.split(' ');
         return flattedOptions.filter(({ searchToken }) => {
-            return splited.some(k => {
+            return split.some(k => {
                 return k && searchToken.toLowerCase().includes(k.toLowerCase());
             });
         });

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

@@ -140,18 +140,18 @@ export declare function ClickAway({ ref, container, eventType, onClickAway, disa
     onFocusCapture: import("react").FocusEventHandler<HTMLDivElement>;
     onBlur: import("react").FocusEventHandler<HTMLDivElement>;
     onBlurCapture: import("react").FocusEventHandler<HTMLDivElement>;
-    onChange: import("react").FormEventHandler<HTMLDivElement>;
-    onChangeCapture: import("react").FormEventHandler<HTMLDivElement>;
+    onChange: import("react").ChangeEventHandler<HTMLDivElement, Element>;
+    onChangeCapture: import("react").ChangeEventHandler<HTMLDivElement, Element>;
     onBeforeInput: import("react").InputEventHandler<HTMLDivElement>;
-    onBeforeInputCapture: import("react").FormEventHandler<HTMLDivElement>;
-    onInput: import("react").FormEventHandler<HTMLDivElement>;
-    onInputCapture: import("react").FormEventHandler<HTMLDivElement>;
-    onReset: import("react").FormEventHandler<HTMLDivElement>;
-    onResetCapture: import("react").FormEventHandler<HTMLDivElement>;
-    onSubmit: import("react").FormEventHandler<HTMLDivElement>;
-    onSubmitCapture: import("react").FormEventHandler<HTMLDivElement>;
-    onInvalid: import("react").FormEventHandler<HTMLDivElement>;
-    onInvalidCapture: import("react").FormEventHandler<HTMLDivElement>;
+    onBeforeInputCapture: import("react").InputEventHandler<HTMLDivElement>;
+    onInput: import("react").InputEventHandler<HTMLDivElement>;
+    onInputCapture: import("react").InputEventHandler<HTMLDivElement>;
+    onReset: import("react").ReactEventHandler<HTMLDivElement>;
+    onResetCapture: import("react").ReactEventHandler<HTMLDivElement>;
+    onSubmit: import("react").SubmitEventHandler<HTMLDivElement>;
+    onSubmitCapture: import("react").SubmitEventHandler<HTMLDivElement>;
+    onInvalid: import("react").ReactEventHandler<HTMLDivElement>;
+    onInvalidCapture: import("react").ReactEventHandler<HTMLDivElement>;
     onLoad: import("react").ReactEventHandler<HTMLDivElement>;
     onLoadCapture: import("react").ReactEventHandler<HTMLDivElement>;
     onError: import("react").ReactEventHandler<HTMLDivElement>;

package/dist/cjs/components/inputBase/inputBase.style.js

@@ -78,7 +78,7 @@ function useStyle({ color }) {
                 }
 
                 &:not(:has([data-read-only=true]))[data-focused=true],
-                &:not(:has([data-read-only=true])):has(:focus) {
+                &:not(:has([data-read-only=true])):focus-within {
                     &::before, &::after {
                         display: block;
                         animation: ${borderAnim} .4s ${easing.easeOut} forwards;

package/dist/cjs/components/optionsBase/filterOptions.d.ts

@@ -0,0 +1,4 @@
+import { ReactNode } from 'react';
+import { Id } from '../../types';
+import { MenuOptionType, OptionsBaseProps } from './optionsBase';
+export declare function useFilterOptions<O extends MenuOptionType<V>, V extends Id = Id>({ searchValue, options, children, filterPredicate, labelKey, searchTokenKey, _optionsAlreadyFilter }: Pick<OptionsBaseProps<O, V>, 'searchValue' | 'children' | 'options' | 'filterPredicate' | 'labelKey' | 'searchTokenKey' | '_optionsAlreadyFilter'>): (O | ReactNode)[];

package/dist/cjs/components/optionsBase/filterOptions.js

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useFilterOptions = useFilterOptions;
+const react_1 = require("react");
+function useFilterOptions({ searchValue, options, children, filterPredicate, labelKey = 'label', searchTokenKey = 'searchToken', _optionsAlreadyFilter }) {
+    return (0, react_1.useMemo)(() => {
+        if (_optionsAlreadyFilter) {
+            return options || react_1.Children.toArray(children);
+        }
+        const trimmedSearchValue = searchValue?.trim();
+        if (!trimmedSearchValue) {
+            return options || react_1.Children.toArray(children);
+        }
+        const splitValue = trimmedSearchValue.split(' ');
+        const filterFn = (opt, index) => {
+            let ret = false;
+            if (filterPredicate) {
+                ret = filterPredicate(trimmedSearchValue, opt, index);
+            }
+            else {
+                const searchToken = typeof opt[labelKey] === 'string' ? opt[labelKey] : opt[searchTokenKey];
+                if (typeof searchToken === 'string') {
+                    ret = splitValue.some(k => {
+                        return k && searchToken.toLowerCase().includes(k.toLowerCase());
+                    });
+                }
+            }
+            return ret;
+        };
+        return options
+            ? options.filter(filterFn)
+            : react_1.Children.toArray(children).filter((c, index) => {
+                return (0, react_1.isValidElement)(c) && filterFn(c.props, index);
+            });
+    }, [searchValue, filterPredicate, options, children, labelKey, searchTokenKey, _optionsAlreadyFilter]);
+}

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

@@ -27,5 +27,10 @@ export interface OptionsBaseProps<O extends MenuOptionType<V>, V extends Id = Id
     searchValue?: string;
     selectedValue?: V | V[];
     onToggleSelected?(value: V, e: KeyboardEvent | React.MouseEvent<HTMLDivElement>): void;
+    /**
+     * @private
+     * 内部使用，传入的选项是否已经经过筛选
+     */
+    _optionsAlreadyFilter?: boolean;
 }
 export declare const OptionsBase: <O extends MenuOptionType<V>, V extends Id = Id>(props: OptionsBaseProps<O, V>) => ReactElement;

package/dist/cjs/components/optionsBase/optionsBase.js

@@ -10,39 +10,14 @@ const utils_1 = require("../../utils");
 const optionsBase_style_1 = require("./optionsBase.style");
 const loading_1 = require("../loading");
 const popper_1 = require("../popper");
+const filterOptions_1 = require("./filterOptions");
 exports.OptionsBase = (0, react_1.memo)(({ 
 // 共享属性
 showCheckbox, loading, options, children, labelKey = 'label', primaryKey = 'value', searchTokenKey = 'searchToken', filterPredicate, 
 // 以下为非共享属性
-searchValue, selectedValue, onToggleSelected, ...props }) => {
+searchValue, selectedValue, onToggleSelected, _optionsAlreadyFilter, ...props }) => {
     const { open, setOpen } = (0, popper_1.usePopperContext)();
-    const filteredOptions = (0, react_1.useMemo)(() => {
-        const trimmedSearchValue = searchValue?.trim();
-        if (!trimmedSearchValue) {
-            return options || react_1.Children.toArray(children);
-        }
-        const splitedValue = trimmedSearchValue.split(' ');
-        const filterFn = (opt, index) => {
-            let ret = false;
-            if (filterPredicate) {
-                ret = filterPredicate(trimmedSearchValue, opt, index);
-            }
-            else {
-                const searchToken = typeof opt[labelKey] === 'string' ? opt[labelKey] : opt[searchTokenKey];
-                if (typeof searchToken === 'string') {
-                    ret = splitedValue.some(k => {
-                        return k && searchToken.toLowerCase().includes(k.toLowerCase());
-                    });
-                }
-            }
-            return ret;
-        };
-        return options
-            ? options.filter(filterFn)
-            : react_1.Children.toArray(children).filter((c, index) => {
-                return (0, react_1.isValidElement)(c) && filterFn(c.props, index);
-            });
-    }, [searchValue, filterPredicate, options, children, labelKey, searchTokenKey]);
+    const filteredOptions = (0, filterOptions_1.useFilterOptions)({ searchValue, filterPredicate, options, children, labelKey, searchTokenKey, _optionsAlreadyFilter });
     /**
      * ------------------------------------------------------------------
      * 键盘控制

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

@@ -28,7 +28,7 @@ export interface PopperProps extends Omit<DivProps, 'content' | 'children'> {
     sizeAdaptable?: boolean;
     /** trigger{@link trigger}包含"hover"时，鼠标移入移的延迟时间，默认为`150(ms)` */
     mouseEnterDelay?: number;
-    /**默认为`150(ms)` */
+    /** 默认为`150(ms)` */
     mouseLeaveDelay?: number;
     defaultOpen?: boolean;
     open?: boolean;
@@ -43,6 +43,8 @@ export interface PopperProps extends Omit<DivProps, 'content' | 'children'> {
      * @enum {undefined} 第一次打开时渲染，跟随父组件销毁。
      */
     forceRender?: boolean;
+    /** 打开与关闭是否渲染过度动画，默认为`true` */
+    animation?: boolean;
     children?: ReactElement<any>;
 }
 export interface PopperRef extends HTMLDivElement {
@@ -51,4 +53,4 @@ export interface PopperRef extends HTMLDivElement {
         openAnimation?: boolean;
     }, beforeOpen?: () => void): void;
 }
-export declare function Popper({ ref, popperRef, anchorElement, container, effectContainer, content, offset, trigger, clickToClose, placement, variant, sizeAdaptable, mouseEnterDelay, mouseLeaveDelay, defaultOpen, open, onOpenChange, onOpenChangeEnd, disabled, autoClose, forceRender, children, ...props }: PopperProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function Popper({ ref, popperRef, anchorElement, container, effectContainer, content, offset, trigger, clickToClose, placement, variant, sizeAdaptable, mouseEnterDelay, mouseLeaveDelay, defaultOpen, open, onOpenChange, onOpenChangeEnd, disabled, autoClose, forceRender, animation, children, ...props }: PopperProps): import("@emotion/react/jsx-runtime").JSX.Element;

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

@@ -22,7 +22,7 @@ const getAttemptOrder = (placement) => {
     }
     return order;
 };
-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 }) {
+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, animation = true, children, ...props }) {
     const { spacing } = (0, theme_1.useTheme)();
     offset ??= spacing[2];
     (0, react_1.useImperativeHandle)(popperRef, () => {
@@ -55,6 +55,8 @@ function Popper({ ref, popperRef, anchorElement, container, effectContainer, con
         if (newOpen || openHolding.current === 0) {
             _setInnerOpen(newOpen);
         }
+        // 不渲染动画时，需要手动触发onTransitionEnd
+        !animation && transitionEndHandler();
     };
     const { onChildrenOpenChange: tellParentOpenChange } = (0, popperContext_1.usePopperContext)();
     (0, utils_1.useUpdateEffect)(() => {
@@ -85,6 +87,9 @@ function Popper({ ref, popperRef, anchorElement, container, effectContainer, con
     const animating = (0, react_1.useRef)(false);
     const onTransitionEnd = (e) => {
         props.onTransitionEnd?.(e);
+        transitionEndHandler();
+    };
+    const transitionEndHandler = () => {
         onOpenChangeEnd?.(innerOpen.current);
         if (forceRender === false && !innerOpen.current) {
             renderedOnce.current = false;
@@ -541,5 +546,5 @@ function Popper({ ref, popperRef, anchorElement, container, effectContainer, con
                             transform: 'scale(1)'
                         },
                         ...props.style
-                    }, "data-open": innerOpen.current, "data-variant": variant, "data-place-a": placeA.current, "data-place-b": placeB.current, onTransitionEnd: onTransitionEnd, children: (0, jsx_runtime_1.jsx)(popperContext_1.PopperContext, { value: contextValue, children: content }) }) }), containerEl.current)] }));
+                    }, "data-open": innerOpen.current, "data-variant": variant, "data-place-a": placeA.current, "data-place-b": placeB.current, "data-animation": animation, onTransitionEnd: onTransitionEnd, children: (0, jsx_runtime_1.jsx)(popperContext_1.PopperContext, { value: contextValue, children: content }) }) }), containerEl.current)] }));
 }

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

@@ -19,7 +19,10 @@ exports.style = (0, utils_1.defineCss)(theme => {
                 left: 0;
                 z-index: ${theme_1.zIndex.popper};
                 transition-property: transform, opacity;
-                transition-duration: .25s;
+                
+                &[data-animation=true] {
+                    transition-duration: .25s;
+                }
 
                 &[data-open=true] {
                     transition-timing-function: ${easing.bounce}, ${easing.easeOut};

package/dist/cjs/utils/utils.js

@@ -399,11 +399,12 @@ function mergeComponentProps(...props) {
                         target.style = { ...source.style, ...target.style };
                         continue;
                     default:
-                        const v = source[p];
-                        if (typeof v === 'function') {
+                        const sourceFn = source[p];
+                        if (typeof sourceFn === 'function') {
+                            const targetFn = target[p];
                             target[p] = (...args) => {
-                                target[p](...args);
-                                v(...args);
+                                targetFn(...args);
+                                sourceFn(...args);
                             };
                             continue;
                         }

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

@@ -1,11 +1,12 @@
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-import { Children, isValidElement, memo, useCallback, useMemo, useRef, useState } from 'react';
+import { isValidElement, memo, useCallback, useMemo, useRef, useState } from 'react';
 import { Popper } from '../popper';
 import { OptionsBase } from '../optionsBase';
 import { Input } from '../input';
 import { isUnset, useControlled, useDerivedState, useLoading, useSync, mergeComponentProps, useStrictEffect } from '../../utils';
 import { classes } from './autocomplete.style';
 import { popperStyle } from '../popper/popper.style';
+import { useFilterOptions } from '../optionsBase/filterOptions';
 export const Autocomplete = memo(({ children, loading, options, loadOptions, primaryKey = 'value', labelKey = 'label', onSelect, renderInput, popperProps, popperRef, defaultValue = '', value, onChange, ...props }) => {
     const [focused, _setFocused] = useState(false);
     const setFocused = (focused) => {
@@ -33,7 +34,12 @@ export const Autocomplete = memo(({ children, loading, options, loadOptions, pri
      * ------------------------------------------------------------------
      * 合并最终选项
      */
-    const actualOptions = innerOptions || options || Children.map(children, c => isValidElement(c) ? c.props : c) || void 0;
+    const actualOptions = useFilterOptions({
+        searchValue: innerValue.current,
+        options: innerOptions || options,
+        children,
+        labelKey
+    }).map(opt => isValidElement(opt) ? opt.props : opt);
     const optionsMap = useMemo(() => {
         const map = new Map();
         actualOptions?.forEach(opt => {
@@ -46,7 +52,7 @@ export const Autocomplete = memo(({ children, loading, options, loadOptions, pri
     }, [actualOptions, primaryKey]);
     const [open, _setOpen] = useDerivedState(() => {
         return focused && !!optionsMap.size;
-    }, [focused, optionsMap.size]);
+    }, [focused, optionsMap]);
     const setOpen = (open) => {
         if (!props.disabled && !props.readOnly && (!open || optionsMap.size)) {
             // 必须有选项才能打开下拉框
@@ -72,8 +78,6 @@ export const Autocomplete = memo(({ children, loading, options, loadOptions, pri
         loading: innerLoading.current,
         value: innerValue.current,
         onChange: changeHandler,
-        onInput: () => setOpen(true),
-        onClick: () => setOpen(true),
         onFocus: () => setFocused(true),
         onBlur: () => setFocused(false)
     });
@@ -81,7 +85,8 @@ export const Autocomplete = memo(({ children, loading, options, loadOptions, pri
             placement: 'bottom',
             variant: 'collapse',
             trigger: false,
-            content: (_jsx(OptionsBase, { onToggleSelected: optionSelectHandler, loading: innerLoading.current, options: actualOptions, labelKey: labelKey, primaryKey: primaryKey, children: children }))
+            animation: false,
+            content: (_jsx(OptionsBase, { onToggleSelected: optionSelectHandler, loading: innerLoading.current, options: actualOptions, labelKey: labelKey, primaryKey: primaryKey, searchValue: innerValue.current, _optionsAlreadyFilter: true, children: children }))
         }, popperProps, {
             css: popperStyle,
             open: open.current,

package/dist/esm/components/cascade/searchResult.js

@@ -39,9 +39,9 @@ export const SearchResult = memo(({ primaryKey, labelKey, childrenKey, searchTok
         if (!searchValue) {
             return flattedOptions;
         }
-        const splited = searchValue.split(' ');
+        const split = searchValue.split(' ');
         return flattedOptions.filter(({ searchToken }) => {
-            return splited.some(k => {
+            return split.some(k => {
                 return k && searchToken.toLowerCase().includes(k.toLowerCase());
             });
         });

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

@@ -140,18 +140,18 @@ export declare function ClickAway({ ref, container, eventType, onClickAway, disa
     onFocusCapture: import("react").FocusEventHandler<HTMLDivElement>;
     onBlur: import("react").FocusEventHandler<HTMLDivElement>;
     onBlurCapture: import("react").FocusEventHandler<HTMLDivElement>;
-    onChange: import("react").FormEventHandler<HTMLDivElement>;
-    onChangeCapture: import("react").FormEventHandler<HTMLDivElement>;
+    onChange: import("react").ChangeEventHandler<HTMLDivElement, Element>;
+    onChangeCapture: import("react").ChangeEventHandler<HTMLDivElement, Element>;
     onBeforeInput: import("react").InputEventHandler<HTMLDivElement>;
-    onBeforeInputCapture: import("react").FormEventHandler<HTMLDivElement>;
-    onInput: import("react").FormEventHandler<HTMLDivElement>;
-    onInputCapture: import("react").FormEventHandler<HTMLDivElement>;
-    onReset: import("react").FormEventHandler<HTMLDivElement>;
-    onResetCapture: import("react").FormEventHandler<HTMLDivElement>;
-    onSubmit: import("react").FormEventHandler<HTMLDivElement>;
-    onSubmitCapture: import("react").FormEventHandler<HTMLDivElement>;
-    onInvalid: import("react").FormEventHandler<HTMLDivElement>;
-    onInvalidCapture: import("react").FormEventHandler<HTMLDivElement>;
+    onBeforeInputCapture: import("react").InputEventHandler<HTMLDivElement>;
+    onInput: import("react").InputEventHandler<HTMLDivElement>;
+    onInputCapture: import("react").InputEventHandler<HTMLDivElement>;
+    onReset: import("react").ReactEventHandler<HTMLDivElement>;
+    onResetCapture: import("react").ReactEventHandler<HTMLDivElement>;
+    onSubmit: import("react").SubmitEventHandler<HTMLDivElement>;
+    onSubmitCapture: import("react").SubmitEventHandler<HTMLDivElement>;
+    onInvalid: import("react").ReactEventHandler<HTMLDivElement>;
+    onInvalidCapture: import("react").ReactEventHandler<HTMLDivElement>;
     onLoad: import("react").ReactEventHandler<HTMLDivElement>;
     onLoadCapture: import("react").ReactEventHandler<HTMLDivElement>;
     onError: import("react").ReactEventHandler<HTMLDivElement>;

package/dist/esm/components/inputBase/inputBase.style.js

@@ -74,7 +74,7 @@ export function useStyle({ color }) {
                 }
 
                 &:not(:has([data-read-only=true]))[data-focused=true],
-                &:not(:has([data-read-only=true])):has(:focus) {
+                &:not(:has([data-read-only=true])):focus-within {
                     &::before, &::after {
                         display: block;
                         animation: ${borderAnim} .4s ${easing.easeOut} forwards;

package/dist/esm/components/optionsBase/filterOptions.d.ts

@@ -0,0 +1,4 @@
+import { ReactNode } from 'react';
+import { Id } from '../../types';
+import { MenuOptionType, OptionsBaseProps } from './optionsBase';
+export declare function useFilterOptions<O extends MenuOptionType<V>, V extends Id = Id>({ searchValue, options, children, filterPredicate, labelKey, searchTokenKey, _optionsAlreadyFilter }: Pick<OptionsBaseProps<O, V>, 'searchValue' | 'children' | 'options' | 'filterPredicate' | 'labelKey' | 'searchTokenKey' | '_optionsAlreadyFilter'>): (O | ReactNode)[];

package/dist/esm/components/optionsBase/filterOptions.js

@@ -0,0 +1,33 @@
+import { Children, isValidElement, useMemo } from 'react';
+export function useFilterOptions({ searchValue, options, children, filterPredicate, labelKey = 'label', searchTokenKey = 'searchToken', _optionsAlreadyFilter }) {
+    return useMemo(() => {
+        if (_optionsAlreadyFilter) {
+            return options || Children.toArray(children);
+        }
+        const trimmedSearchValue = searchValue?.trim();
+        if (!trimmedSearchValue) {
+            return options || Children.toArray(children);
+        }
+        const splitValue = trimmedSearchValue.split(' ');
+        const filterFn = (opt, index) => {
+            let ret = false;
+            if (filterPredicate) {
+                ret = filterPredicate(trimmedSearchValue, opt, index);
+            }
+            else {
+                const searchToken = typeof opt[labelKey] === 'string' ? opt[labelKey] : opt[searchTokenKey];
+                if (typeof searchToken === 'string') {
+                    ret = splitValue.some(k => {
+                        return k && searchToken.toLowerCase().includes(k.toLowerCase());
+                    });
+                }
+            }
+            return ret;
+        };
+        return options
+            ? options.filter(filterFn)
+            : Children.toArray(children).filter((c, index) => {
+                return isValidElement(c) && filterFn(c.props, index);
+            });
+    }, [searchValue, filterPredicate, options, children, labelKey, searchTokenKey, _optionsAlreadyFilter]);
+}

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

@@ -27,5 +27,10 @@ export interface OptionsBaseProps<O extends MenuOptionType<V>, V extends Id = Id
     searchValue?: string;
     selectedValue?: V | V[];
     onToggleSelected?(value: V, e: KeyboardEvent | React.MouseEvent<HTMLDivElement>): void;
+    /**
+     * @private
+     * 内部使用，传入的选项是否已经经过筛选
+     */
+    _optionsAlreadyFilter?: boolean;
 }
 export declare const OptionsBase: <O extends MenuOptionType<V>, V extends Id = Id>(props: OptionsBaseProps<O, V>) => ReactElement;

package/dist/esm/components/optionsBase/optionsBase.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-import { useMemo, memo, Children, isValidElement, cloneElement, useRef } from 'react';
+import { useMemo, memo, isValidElement, cloneElement, useRef } from 'react';
 import { Highlight } from '../highlight';
 import { MenuItem } from '../menuItem';
 import { Placeholder } from '../placeholder';
@@ -7,39 +7,14 @@ import { clsx, isSelected, mergeComponentProps, useKeyboard, useSync } from '../
 import { classes, style } from './optionsBase.style';
 import { Loading } from '../loading';
 import { usePopperContext, useScrollToTarget } from '../popper';
+import { useFilterOptions } from './filterOptions';
 export const OptionsBase = memo(({ 
 // 共享属性
 showCheckbox, loading, options, children, labelKey = 'label', primaryKey = 'value', searchTokenKey = 'searchToken', filterPredicate, 
 // 以下为非共享属性
-searchValue, selectedValue, onToggleSelected, ...props }) => {
+searchValue, selectedValue, onToggleSelected, _optionsAlreadyFilter, ...props }) => {
     const { open, setOpen } = usePopperContext();
-    const filteredOptions = useMemo(() => {
-        const trimmedSearchValue = searchValue?.trim();
-        if (!trimmedSearchValue) {
-            return options || Children.toArray(children);
-        }
-        const splitedValue = trimmedSearchValue.split(' ');
-        const filterFn = (opt, index) => {
-            let ret = false;
-            if (filterPredicate) {
-                ret = filterPredicate(trimmedSearchValue, opt, index);
-            }
-            else {
-                const searchToken = typeof opt[labelKey] === 'string' ? opt[labelKey] : opt[searchTokenKey];
-                if (typeof searchToken === 'string') {
-                    ret = splitedValue.some(k => {
-                        return k && searchToken.toLowerCase().includes(k.toLowerCase());
-                    });
-                }
-            }
-            return ret;
-        };
-        return options
-            ? options.filter(filterFn)
-            : Children.toArray(children).filter((c, index) => {
-                return isValidElement(c) && filterFn(c.props, index);
-            });
-    }, [searchValue, filterPredicate, options, children, labelKey, searchTokenKey]);
+    const filteredOptions = useFilterOptions({ searchValue, filterPredicate, options, children, labelKey, searchTokenKey, _optionsAlreadyFilter });
     /**
      * ------------------------------------------------------------------
      * 键盘控制

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

@@ -28,7 +28,7 @@ export interface PopperProps extends Omit<DivProps, 'content' | 'children'> {
     sizeAdaptable?: boolean;
     /** trigger{@link trigger}包含"hover"时，鼠标移入移的延迟时间，默认为`150(ms)` */
     mouseEnterDelay?: number;
-    /**默认为`150(ms)` */
+    /** 默认为`150(ms)` */
     mouseLeaveDelay?: number;
     defaultOpen?: boolean;
     open?: boolean;
@@ -43,6 +43,8 @@ export interface PopperProps extends Omit<DivProps, 'content' | 'children'> {
      * @enum {undefined} 第一次打开时渲染，跟随父组件销毁。
      */
     forceRender?: boolean;
+    /** 打开与关闭是否渲染过度动画，默认为`true` */
+    animation?: boolean;
     children?: ReactElement<any>;
 }
 export interface PopperRef extends HTMLDivElement {
@@ -51,4 +53,4 @@ export interface PopperRef extends HTMLDivElement {
         openAnimation?: boolean;
     }, beforeOpen?: () => void): void;
 }
-export declare function Popper({ ref, popperRef, anchorElement, container, effectContainer, content, offset, trigger, clickToClose, placement, variant, sizeAdaptable, mouseEnterDelay, mouseLeaveDelay, defaultOpen, open, onOpenChange, onOpenChangeEnd, disabled, autoClose, forceRender, children, ...props }: PopperProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function Popper({ ref, popperRef, anchorElement, container, effectContainer, content, offset, trigger, clickToClose, placement, variant, sizeAdaptable, mouseEnterDelay, mouseLeaveDelay, defaultOpen, open, onOpenChange, onOpenChangeEnd, disabled, autoClose, forceRender, animation, children, ...props }: PopperProps): import("@emotion/react/jsx-runtime").JSX.Element;

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

@@ -19,7 +19,7 @@ const getAttemptOrder = (placement) => {
     }
     return order;
 };
-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 }) {
+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, animation = true, children, ...props }) {
     const { spacing } = useTheme();
     offset ??= spacing[2];
     useImperativeHandle(popperRef, () => {
@@ -52,6 +52,8 @@ export function Popper({ ref, popperRef, anchorElement, container, effectContain
         if (newOpen || openHolding.current === 0) {
             _setInnerOpen(newOpen);
         }
+        // 不渲染动画时，需要手动触发onTransitionEnd
+        !animation && transitionEndHandler();
     };
     const { onChildrenOpenChange: tellParentOpenChange } = usePopperContext();
     useUpdateEffect(() => {
@@ -82,6 +84,9 @@ export function Popper({ ref, popperRef, anchorElement, container, effectContain
     const animating = useRef(false);
     const onTransitionEnd = (e) => {
         props.onTransitionEnd?.(e);
+        transitionEndHandler();
+    };
+    const transitionEndHandler = () => {
         onOpenChangeEnd?.(innerOpen.current);
         if (forceRender === false && !innerOpen.current) {
             renderedOnce.current = false;
@@ -538,5 +543,5 @@ export function Popper({ ref, popperRef, anchorElement, container, effectContain
                             transform: 'scale(1)'
                         },
                         ...props.style
-                    }, "data-open": innerOpen.current, "data-variant": variant, "data-place-a": placeA.current, "data-place-b": placeB.current, onTransitionEnd: onTransitionEnd, children: _jsx(PopperContext, { value: contextValue, children: content }) }) }), containerEl.current)] }));
+                    }, "data-open": innerOpen.current, "data-variant": variant, "data-place-a": placeA.current, "data-place-b": placeB.current, "data-animation": animation, onTransitionEnd: onTransitionEnd, children: _jsx(PopperContext, { value: contextValue, children: content }) }) }), containerEl.current)] }));
 }

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

@@ -16,7 +16,10 @@ export const style = defineCss(theme => {
                 left: 0;
                 z-index: ${zIndex.popper};
                 transition-property: transform, opacity;
-                transition-duration: .25s;
+                
+                &[data-animation=true] {
+                    transition-duration: .25s;
+                }
 
                 &[data-open=true] {
                     transition-timing-function: ${easing.bounce}, ${easing.easeOut};

package/dist/esm/utils/utils.js

@@ -373,11 +373,12 @@ export function mergeComponentProps(...props) {
                         target.style = { ...source.style, ...target.style };
                         continue;
                     default:
-                        const v = source[p];
-                        if (typeof v === 'function') {
+                        const sourceFn = source[p];
+                        if (typeof sourceFn === 'function') {
+                            const targetFn = target[p];
                             target[p] = (...args) => {
-                                target[p](...args);
-                                v(...args);
+                                targetFn(...args);
+                                sourceFn(...args);
                             };
                             continue;
                         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canlooks/can-ui",
-  "version": "0.0.145",
+  "version": "0.0.146",
   "author": "C.CanLiang <canlooks@gmail.com>",
   "description": "My ui framework",
   "license": "MIT",
@@ -20,9 +20,6 @@
     "url": "https://github.com/canlooks/canui/issues",
     "email": "canlooks@gmail.com"
   },
-  "bin": {
-    "can-ui-doc": "documentation/bootstrap.mjs"
-  },
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/esm/index.d.ts",

package/documentation/bootstrap.mjs

@@ -1,8 +0,0 @@
-#!/usr/bin/env node
-import { preview } from 'vite';
-import inlineConfig from './vite.config.mjs';
-(async () => {
-    const server = await preview(inlineConfig);
-    server.printUrls();
-    server.bindCLIShortcuts({ print: true });
-})();