@canlooks/can-ui 0.0.97 → 0.0.98

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

@@ -33,4 +33,4 @@ export interface MenuItemProps extends Omit<DivProps, 'prefix'> {
     expanded?: boolean;
     onExpandedChange?(expanded: boolean): void;
 }
-export declare const MenuItem: React.MemoExoticComponent<({ value, size, color, emphasized, selected, focused, disabled, showCheckbox, checkboxProps, ellipsis, prefix, label, suffix, searchToken, _level, indent, expandIcon, defaultExpanded, expanded, onExpandedChange, ...props }: MenuItemProps) => import("@emotion/react/jsx-runtime").JSX.Element>;
+export declare const MenuItem: React.MemoExoticComponent<({ value, size, color, emphasized, selected, focused, disabled, showCheckbox, checkboxProps, ellipsis, prefix, label, suffix, searchToken, scrollHere, _level, indent, expandIcon, defaultExpanded, expanded, onExpandedChange, ...props }: MenuItemProps) => import("@emotion/react/jsx-runtime").JSX.Element>;

package/dist/cjs/components/menuItem/menuItem.js

@@ -11,7 +11,7 @@ const menu_1 = require("../menu");
 const transitionBase_1 = require("../transitionBase");
 const icon_1 = require("../icon");
 const faChevronDown_1 = require("@fortawesome/free-solid-svg-icons/faChevronDown");
-exports.MenuItem = (0, react_1.memo)(({ value, size, color = 'primary', emphasized = false, selected, focused = false, disabled = false, showCheckbox, checkboxProps, ellipsis, prefix, label, suffix, searchToken, _level = 0, indent, expandIcon, defaultExpanded = false, expanded, onExpandedChange, ...props }) => {
+exports.MenuItem = (0, react_1.memo)(({ value, size, color = 'primary', emphasized = false, selected, focused = false, disabled = false, showCheckbox, checkboxProps, ellipsis, prefix, label, suffix, searchToken, scrollHere, _level = 0, indent, expandIcon, defaultExpanded = false, expanded, onExpandedChange, ...props }) => {
     const context = (0, menu_1.useMenuContext)();
     size ??= context.size;
     showCheckbox ??= context.showCheckbox;

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

@@ -91,8 +91,7 @@ searchValue, selectedValue, onToggleSelected, ...props }) => {
                 params.opt?.onPointerEnter?.(e);
                 setVerticalIndex(-1);
             },
-            children: null,
-            scrollHere: void 0
+            children: null
         });
         if (options) {
             return filteredOptions.map((opt, index) => {

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

@@ -360,51 +360,54 @@ function Popper({ ref, popperRef, anchorElement, container = document.body, effe
     const hoverable = triggersSet.has('hover');
     const enterTimeout = (0, react_1.useRef)(void 0);
     const leaveTimeout = (0, react_1.useRef)(void 0);
-    const hoverStack = (0, react_1.useRef)(0);
-    const pointerEnter = () => {
-        if (hoverStack.current++) {
-            return;
-        }
+    const isOvering = (0, react_1.useRef)(false);
+    const pointerEnterFn = (0, react_1.useCallback)(() => {
         clearTimeout(leaveTimeout.current);
         mouseEnterDelay
             ? enterTimeout.current = setTimeout(() => setInnerOpen(true), mouseEnterDelay)
             : setInnerOpen(true);
-    };
-    const pointerLeave = () => {
-        if (--hoverStack.current) {
-            return;
-        }
+    }, [mouseEnterDelay]);
+    const pointerLeaveFn = (0, react_1.useCallback)(() => {
         clearTimeout(enterTimeout.current);
         mouseLeaveDelay
             ? leaveTimeout.current = setTimeout(() => setInnerOpen(false), mouseLeaveDelay)
             : setInnerOpen(false);
-    };
-    // 绑定锚点元素
+    }, [mouseLeaveDelay]);
     (0, react_1.useEffect)(() => {
         if (!hoverable) {
             return;
         }
+        const pointerOver = (e) => {
+            if (!isOvering.current && e.target === anchorRef.current) {
+                isOvering.current = true;
+                pointerEnterFn();
+            }
+        };
+        const pointerLeave = () => {
+            isOvering.current = false;
+            pointerLeaveFn();
+        };
         const anchorEl = anchorRef.current;
-        anchorEl.addEventListener('pointerenter', pointerEnter);
+        anchorEl.addEventListener('pointerover', pointerOver);
         anchorEl.addEventListener('pointerleave', pointerLeave);
         return () => {
-            anchorEl.removeEventListener('pointerenter', pointerEnter);
+            anchorEl.removeEventListener('pointerover', pointerOver);
             anchorEl.removeEventListener('pointerleave', pointerLeave);
         };
-    }, [hoverable]);
+    }, []);
     // 绑定弹框元素，鼠标移入弹框也要保持弹框打开
     (0, react_1.useEffect)(() => {
         if (!hoverable || !innerPopperRef.current) {
             return;
         }
         const popperEl = innerPopperRef.current;
-        popperEl.addEventListener('pointerenter', pointerEnter);
-        popperEl.addEventListener('pointerleave', pointerLeave);
+        popperEl.addEventListener('pointerenter', pointerEnterFn);
+        popperEl.addEventListener('pointerleave', pointerLeaveFn);
         return () => {
-            popperEl.removeEventListener('pointerenter', pointerEnter);
-            popperEl.removeEventListener('pointerleave', pointerLeave);
+            popperEl.removeEventListener('pointerenter', pointerEnterFn);
+            popperEl.removeEventListener('pointerleave', pointerLeaveFn);
         };
-    }, [innerOpen.current]);
+    }, [innerOpen.current, mouseLeaveDelay]);
     /**
      * focus相关
      */
@@ -513,7 +516,9 @@ function Popper({ ref, popperRef, anchorElement, container = document.body, effe
     }), [innerOpen.current, autoClose]);
     const childRef = (0, react_1.useCallback)((0, utils_1.cloneRef)(children?.props.ref, anchorRef, ref), [children?.props.ref, ref]);
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, react_1.isValidElement)(children)
-                ? (0, react_1.cloneElement)(children, { ref: childRef })
+                ? (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, 
                 // 右键菜单点击anchor需要关闭弹框
                 targets: () => contextMenuEvent.current ? null : anchorRef.current, 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: {

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

@@ -32,4 +32,4 @@ export declare const Select: {
     <O extends MenuOptionType, V extends Id = Id>(props: SelectProps<O, V>): ReactElement;
     Option: typeof MenuItem;
 };
-export declare const Option: import("react").MemoExoticComponent<({ value, size, color, emphasized, selected, focused, disabled, showCheckbox, checkboxProps, ellipsis, prefix, label, suffix, searchToken, _level, indent, expandIcon, defaultExpanded, expanded, onExpandedChange, ...props }: import("../menuItem").MenuItemProps) => import("@emotion/react/jsx-runtime").JSX.Element>;
+export declare const Option: import("react").MemoExoticComponent<({ value, size, color, emphasized, selected, focused, disabled, showCheckbox, checkboxProps, ellipsis, prefix, label, suffix, searchToken, scrollHere, _level, indent, expandIcon, defaultExpanded, expanded, onExpandedChange, ...props }: import("../menuItem").MenuItemProps) => import("@emotion/react/jsx-runtime").JSX.Element>;

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

@@ -145,5 +145,5 @@ export declare function filterProperties<T extends Record<string, any>>(obj: T,
  * 合并属性
  */
 type ExtendableProps<T> = (T extends ElementType ? ComponentProps<T> : T) & Obj;
-export declare function mergeComponentProps<T>(...props: (Partial<ExtendableProps<T>> | undefined)[]): ExtendableProps<T>;
+export declare function mergeComponentProps<T>(...props: (Partial<ExtendableProps<T>> | null | false | undefined)[]): ExtendableProps<T>;
 export {};

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

@@ -33,4 +33,4 @@ export interface MenuItemProps extends Omit<DivProps, 'prefix'> {
     expanded?: boolean;
     onExpandedChange?(expanded: boolean): void;
 }
-export declare const MenuItem: React.MemoExoticComponent<({ value, size, color, emphasized, selected, focused, disabled, showCheckbox, checkboxProps, ellipsis, prefix, label, suffix, searchToken, _level, indent, expandIcon, defaultExpanded, expanded, onExpandedChange, ...props }: MenuItemProps) => import("@emotion/react/jsx-runtime").JSX.Element>;
+export declare const MenuItem: React.MemoExoticComponent<({ value, size, color, emphasized, selected, focused, disabled, showCheckbox, checkboxProps, ellipsis, prefix, label, suffix, searchToken, scrollHere, _level, indent, expandIcon, defaultExpanded, expanded, onExpandedChange, ...props }: MenuItemProps) => import("@emotion/react/jsx-runtime").JSX.Element>;

package/dist/esm/components/menuItem/menuItem.js

@@ -8,7 +8,7 @@ import { useMenuContext } from '../menu';
 import { Collapse } from '../transitionBase';
 import { Icon } from '../icon';
 import { faChevronDown } from '@fortawesome/free-solid-svg-icons/faChevronDown';
-export const MenuItem = memo(({ value, size, color = 'primary', emphasized = false, selected, focused = false, disabled = false, showCheckbox, checkboxProps, ellipsis, prefix, label, suffix, searchToken, _level = 0, indent, expandIcon, defaultExpanded = false, expanded, onExpandedChange, ...props }) => {
+export const MenuItem = memo(({ value, size, color = 'primary', emphasized = false, selected, focused = false, disabled = false, showCheckbox, checkboxProps, ellipsis, prefix, label, suffix, searchToken, scrollHere, _level = 0, indent, expandIcon, defaultExpanded = false, expanded, onExpandedChange, ...props }) => {
     const context = useMenuContext();
     size ??= context.size;
     showCheckbox ??= context.showCheckbox;

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

@@ -88,8 +88,7 @@ searchValue, selectedValue, onToggleSelected, ...props }) => {
                 params.opt?.onPointerEnter?.(e);
                 setVerticalIndex(-1);
             },
-            children: null,
-            scrollHere: void 0
+            children: null
         });
         if (options) {
             return filteredOptions.map((opt, index) => {

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

@@ -357,51 +357,54 @@ export function Popper({ ref, popperRef, anchorElement, container = document.bod
     const hoverable = triggersSet.has('hover');
     const enterTimeout = useRef(void 0);
     const leaveTimeout = useRef(void 0);
-    const hoverStack = useRef(0);
-    const pointerEnter = () => {
-        if (hoverStack.current++) {
-            return;
-        }
+    const isOvering = useRef(false);
+    const pointerEnterFn = useCallback(() => {
         clearTimeout(leaveTimeout.current);
         mouseEnterDelay
             ? enterTimeout.current = setTimeout(() => setInnerOpen(true), mouseEnterDelay)
             : setInnerOpen(true);
-    };
-    const pointerLeave = () => {
-        if (--hoverStack.current) {
-            return;
-        }
+    }, [mouseEnterDelay]);
+    const pointerLeaveFn = useCallback(() => {
         clearTimeout(enterTimeout.current);
         mouseLeaveDelay
             ? leaveTimeout.current = setTimeout(() => setInnerOpen(false), mouseLeaveDelay)
             : setInnerOpen(false);
-    };
-    // 绑定锚点元素
+    }, [mouseLeaveDelay]);
     useEffect(() => {
         if (!hoverable) {
             return;
         }
+        const pointerOver = (e) => {
+            if (!isOvering.current && e.target === anchorRef.current) {
+                isOvering.current = true;
+                pointerEnterFn();
+            }
+        };
+        const pointerLeave = () => {
+            isOvering.current = false;
+            pointerLeaveFn();
+        };
         const anchorEl = anchorRef.current;
-        anchorEl.addEventListener('pointerenter', pointerEnter);
+        anchorEl.addEventListener('pointerover', pointerOver);
         anchorEl.addEventListener('pointerleave', pointerLeave);
         return () => {
-            anchorEl.removeEventListener('pointerenter', pointerEnter);
+            anchorEl.removeEventListener('pointerover', pointerOver);
             anchorEl.removeEventListener('pointerleave', pointerLeave);
         };
-    }, [hoverable]);
+    }, []);
     // 绑定弹框元素，鼠标移入弹框也要保持弹框打开
     useEffect(() => {
         if (!hoverable || !innerPopperRef.current) {
             return;
         }
         const popperEl = innerPopperRef.current;
-        popperEl.addEventListener('pointerenter', pointerEnter);
-        popperEl.addEventListener('pointerleave', pointerLeave);
+        popperEl.addEventListener('pointerenter', pointerEnterFn);
+        popperEl.addEventListener('pointerleave', pointerLeaveFn);
         return () => {
-            popperEl.removeEventListener('pointerenter', pointerEnter);
-            popperEl.removeEventListener('pointerleave', pointerLeave);
+            popperEl.removeEventListener('pointerenter', pointerEnterFn);
+            popperEl.removeEventListener('pointerleave', pointerLeaveFn);
         };
-    }, [innerOpen.current]);
+    }, [innerOpen.current, mouseLeaveDelay]);
     /**
      * focus相关
      */
@@ -510,7 +513,9 @@ export function Popper({ ref, popperRef, anchorElement, container = document.bod
     }), [innerOpen.current, autoClose]);
     const childRef = useCallback(cloneRef(children?.props.ref, anchorRef, ref), [children?.props.ref, ref]);
     return (_jsxs(_Fragment, { children: [isValidElement(children)
-                ? cloneElement(children, { ref: childRef })
+                ? cloneElement(children, {
+                    ref: childRef
+                })
                 : children, renderedOnce.current && createPortal(_jsx(ClickAway, { disabled: !clickable && !enterable && !contextMenuable, 
                 // 右键菜单点击anchor需要关闭弹框
                 targets: () => contextMenuEvent.current ? null : anchorRef.current, onClickAway: onClickAway, children: _jsx("div", { ...props, ref: innerPopperRef, css: style, className: clsx(classes.root, props.className), style: {

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

@@ -32,4 +32,4 @@ export declare const Select: {
     <O extends MenuOptionType, V extends Id = Id>(props: SelectProps<O, V>): ReactElement;
     Option: typeof MenuItem;
 };
-export declare const Option: import("react").MemoExoticComponent<({ value, size, color, emphasized, selected, focused, disabled, showCheckbox, checkboxProps, ellipsis, prefix, label, suffix, searchToken, _level, indent, expandIcon, defaultExpanded, expanded, onExpandedChange, ...props }: import("../menuItem").MenuItemProps) => import("@emotion/react/jsx-runtime").JSX.Element>;
+export declare const Option: import("react").MemoExoticComponent<({ value, size, color, emphasized, selected, focused, disabled, showCheckbox, checkboxProps, ellipsis, prefix, label, suffix, searchToken, scrollHere, _level, indent, expandIcon, defaultExpanded, expanded, onExpandedChange, ...props }: import("../menuItem").MenuItemProps) => import("@emotion/react/jsx-runtime").JSX.Element>;

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

@@ -145,5 +145,5 @@ export declare function filterProperties<T extends Record<string, any>>(obj: T,
  * 合并属性
  */
 type ExtendableProps<T> = (T extends ElementType ? ComponentProps<T> : T) & Obj;
-export declare function mergeComponentProps<T>(...props: (Partial<ExtendableProps<T>> | undefined)[]): ExtendableProps<T>;
+export declare function mergeComponentProps<T>(...props: (Partial<ExtendableProps<T>> | null | false | undefined)[]): ExtendableProps<T>;
 export {};

package/package.json

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