@kyper/actionmenu - npm Package Compare versions

Comparing version 0.1.1 to 1.0.0

lib/ActionMenu.js

 import React, { useState, useRef } from 'react'
 import PropTypes from 'prop-types'
 import { css } from '@mxenabled/cssinjs'
+import { useOnKeyPress, useOnTabOutside } from '@kyper/hooks'
 import { useTokens } from '@kyper/tokenprovider'
 import { useKeyboardNavigation } from './hooks/useKeyboardNavigation'
 import { useOnClickOutside } from './hooks/useOnClickOutside'
-import { useOnPressEscape } from './hooks/useOnPressEscape'
-import { useOnTabOutside } from './hooks/useOnTabOutside'
 
@@ -14,2 +13,3 @@ const ALIGN_MENU = {
 }
+const ESCAPE_KEYCODE = 27
 
@@ -23,2 +23,3 @@ export const ActionMenu = ({
   hasChevronToggle = false,
+  isDialogOpen = false,
   menuWidth = 250,
@@ -35,7 +36,9 @@ ...rest
   useOnClickOutside(containerRef, handleClose, isOpen)
-  useOnPressEscape(containerRef, handleClose, isOpen, buttonRef)
+  useOnKeyPress(ESCAPE_KEYCODE, containerRef, handleClose, isOpen)
   useOnTabOutside(containerRef, handleClose, isOpen)
 
   function handleClose() {
-    setIsOpen(false)
+    if (!isDialogOpen) {
+      setIsOpen(false)
+    }
   }
@@ -70,16 +73,3 @@
         <div className={`action-menu-${align}`} role="menu">
-          {React.Children.map(children, child => {
-            if (React.isValidElement(child)) {
-              return React.cloneElement(child, {
-                ...child.props,
-                // This function lets us close the menu when clicking on a dropdown item. Only add to ActionMenuButtons.
-                ...(child.type.displayName === 'ActionMenuButton'
-                  ? {
-                      closeMenu: () => setIsOpen(false),
-                    }
-                  : null),
-              })
-            }
-            return child
-          })}
+          {children}
         </div>
@@ -157,2 +147,9 @@ )}
   hasChevronToggle: PropTypes.bool,
+  /**
+   * ** If one of your ActionMenuButtons opens a modal you need to pass the variable that shows/hides the modal here so the menu doesn't close when you are navigating the modal.
+   */
+  isDialogOpen: PropTypes.bool,
+  /**
+   * ** width of the ActionMenu dropdown
+   */
   menuWidth: PropTypes.number,
@@ -159,0 +156,0 @@ }

lib/ActionMenuButton.js

@@ -6,10 +6,3 @@ import React from 'react'
 
-export const ActionMenuButton = ({
-  children,
-  closeMenu,
-  className = '',
-  onClick,
-  style,
-  ...rest
-}) => {
+export const ActionMenuButton = ({ children, className = '', onClick, style, ...rest }) => {
   const styles = getStyles(useTokens())
@@ -27,3 +20,2 @@
           onClick(e)
-          return closeMenu()
         }}
@@ -58,2 +50,3 @@ {...rest}
       alignItems: 'center',
+      gap: Spacing.XSmall,
       width: '100%',
@@ -83,6 +76,2 @@ border: 'none',
   className: PropTypes.string,
-  /**
-   * **DON'T USE** - The `closeMenu` prop is passed down from the ActionMenu component and allows the menu to close when you click on an ActionMenuButton
-   */
-  closeMenu: PropTypes.func,
   onClick: PropTypes.func.isRequired,
@@ -89,0 +78,0 @@ style: PropTypes.object,

lib/hooks/useKeyboardNavigation.js

@@ -44,3 +44,3 @@ import { useEffect } from 'react'
 
-      document.addEventListener('keyup', listener)
+      document.addEventListener('keydown', listener)
     }
@@ -64,5 +64,5 @@
     return () => {
-      document.removeEventListener('keyup', listener)
+      document.removeEventListener('keydown', listener)
     }
   }, [ref, isActive])
 }

package.json

 {
   "name": "@kyper/actionmenu",
-  "version": "0.1.1",
+  "version": "1.0.0",
   "description": "Package of actionmenu components",
@@ -27,2 +27,3 @@ "author": "MX",
   "peerDependencies": {
+    "@kyper/hooks": "^0.1.0",
     "@kyper/tokenprovider": "^3.0.0",
@@ -35,3 +36,3 @@ "@mxenabled/cssinjs": "^0.6.0",
   },
-  "gitHead": "ea6d6a78b3307eae763e814900ef51e983afea37"
+  "gitHead": "9d658f0011ac5e62654d13310c1eb2e251aa21f6"
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Number of low quality alerts

1

decreased by-50%

Worsened metrics

Total package byte prevSize

9619

decreased by-16.14%

Dependency count

7

increased by16.67%

Number of package files

7

decreased by-30%

Lines of code

287

decreased by-15.84%

No dependency changes