@startlibs/components 1.1.2 → 1.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@startlibs/components",
-  "version": "1.1.2",
+  "version": "1.1.3",
   "description": "Startlibs Components",
   "main": "lib/index.cjs",
   "exports": {

package/src/ContextMenu.jsx

@@ -241,7 +241,7 @@ export class SimpleLi extends React.Component {
   }
 
   componentDidUpdate() {
-    if (this.props.hover) {
+    if (this.props.hover && this.props.scrollOnHover !== false) {
       this.scrollToVisibility()
     }
   }
@@ -288,7 +288,7 @@ export class SimpleLi extends React.Component {
   }
 
   render() {
-    const {label, layerIndex, href, linkTo, prefixWith, subMenu, icon, children, ...rest} = this.props
+    const {label, layerIndex, href, linkTo, prefixWith, subMenu, icon, children, scrollOnHover, ...rest} = this.props
     const Tag = (linkTo) ? Link : 'a'
     return <ListItem
       {...rest}
@@ -306,7 +306,7 @@ export class SimpleLi extends React.Component {
   }
 }
 
-export const Li = React.forwardRef(({emitter = mitt(), index, menuSlot, keepOpen, hover, layerIndex, hoverCursor, passTouchThrough, children, setCursorOnHover, onClick, prefixWith, linkTo, icon, label,descText,helpText, target, href, ...rest},ref) => {
+export const Li = React.forwardRef(({emitter = mitt(), index, menuSlot, keepOpen, hover, layerIndex, hoverCursor, scrollOnHover, passTouchThrough, children, setCursorOnHover, onClick, prefixWith, linkTo, icon, label,descText,helpText, target, href, ...rest},ref) => {
   const nodeRef = useEnsureRef(ref)
   const tagRef = useRef()
   const subMenu = useToggle()
@@ -332,7 +332,7 @@ export const Li = React.forwardRef(({emitter = mitt(), index, menuSlot, keepOpen
   }
 
   useEffect(() => {
-    if (hover) {
+    if (hover && scrollOnHover !== false) {
       try {
       const el = nodeRef.current
       const parent = el.parentElement
@@ -468,6 +468,9 @@ export const ContextMenuComponent = forwardRef((
 ) => {
   const ref = useEnsureRef(unesuredRef)
   const [hoverCursor, setHoverCursor] = useState(autoHover || sub ? 0 : -1)
+  // Hover vindo do mouse não deve rolar a lista: o Chrome dispara mousemove sintético
+  // ao fim do scroll, e o item cortado sob o cursor puxaria a lista de volta.
+  const hoverFromMouse = useRef(false)
   const [layerCursor, setLayerCursor] = useContextMenuSharedState(0)
 
   const [layerIndex, {getSize}] = useContextMenuLayers()
@@ -483,6 +486,7 @@ export const ContextMenuComponent = forwardRef((
 
   useEffect(() => {
     if (hoverIndex !== undefined) {
+      if (hoverIndex !== hoverCursor) hoverFromMouse.current = false
       setHoverCursor(Math.min(Math.max(hoverIndex, -1), getTotalKeyboardItems(children) + 1))
     }
   }, [hoverIndex !== hoverCursor])
@@ -509,6 +513,7 @@ export const ContextMenuComponent = forwardRef((
       const direction = e.keyCode - 39
       const max = getTotalKeyboardItems(children)
       const newIndex = (hoverCursor + direction + max) % max
+      hoverFromMouse.current = false
       setHoverCursor(newIndex)
       onHover(newIndex)
     }
@@ -531,6 +536,7 @@ export const ContextMenuComponent = forwardRef((
   }
 
   const setCursorOnHover = (index) => {
+    hoverFromMouse.current = true
     setLayerCursor(layerIndex)
     setHoverCursor(index)
     onHover(index)
@@ -547,6 +553,7 @@ export const ContextMenuComponent = forwardRef((
             fixedPosition:props.fixed,
             hover: hoverCursor === indexRef.current && layerIndex === layerCursor,
             hoverCursor: hoverCursor,
+            scrollOnHover: !hoverFromMouse.current,
             index: indexRef.current++,
             setCursorOnHover,
             emitter: itemsEmitter,