@startlibs/components 1.1.1 → 1.1.3

package/package.json

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

package/src/ContextMenu.jsx

@@ -86,7 +86,6 @@ export const ListItem = styled.li`
   }
   ${ifProp('hover', css`
     & > a, & > label {
-      // background: ${props => lighten(0.53, getColor("main")(props))};
       background: ${props => transparentize(0.88, getColor("main")(props))};
       color: ${props => darken(0.03, getColor("main")(props))};
     }`)}
@@ -242,7 +241,7 @@ export class SimpleLi extends React.Component {
   }
 
   componentDidUpdate() {
-    if (this.props.hover) {
+    if (this.props.hover && this.props.scrollOnHover !== false) {
       this.scrollToVisibility()
     }
   }
@@ -289,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}
@@ -307,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()
@@ -333,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
@@ -469,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()
@@ -484,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])
@@ -510,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)
     }
@@ -532,6 +536,7 @@ export const ContextMenuComponent = forwardRef((
   }
 
   const setCursorOnHover = (index) => {
+    hoverFromMouse.current = true
     setLayerCursor(layerIndex)
     setHoverCursor(index)
     onHover(index)
@@ -548,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,

package/src/TextButton.jsx

@@ -10,7 +10,7 @@ export const TextButton = styled(({className,isLoading,alert, fontSize, children
 </Wrapper>)`
   display: inline-block;
   font-weight: 600;
-  font-size: ${props => props.fontSize ? fontSize : "14"}px;
+  font-size: ${props => props.fontSize ? props.fontSize : "14"}px;
   color: ${props => props.alert ? getColor('alert') : getColor('main')};
   cursor: pointer;
   text-decoration: none;

package/src/ToastNotifications.jsx

@@ -196,7 +196,7 @@ export const useToastNotificationToggle = (notification,timeout) => {
     open: () => toggle.get() ? toggle.get().openWith(formatNotification(notification,extraProps),timeout) : toggle.openWith(make(notification,timeout))
   }),[toggle.isOpen])
 }
-export const willShowToastNotification = (str) => () => showToastNotification(str)
+export const willShowToastNotification = (str,timeout) => () => createToastNotification(str,timeout)
 
 const EXIT_ANIMATION_MS = 300
 const TOAST_EASING = 'cubic-bezier(0.22, 0.61, 0.36, 1)'