@szhsin/react-menu - npm Package Compare versions

Comparing version 3.0.0-alpha.2 to 3.0.0-alpha.3

dist/es/components/MenuItem.js

@@ -7,3 +7,2 @@ import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose, extends as _extends } from '../_virtual/_rollupPluginBabelHelpers.js';
 import { EventHandlersContext, RadioGroupContext, menuClass, menuItemClass, Keys } from '../utils/constants.js';
-import { useActiveState } from '../hooks/useActiveState.js';
 import { useCombinedRef } from '../hooks/useCombinedRef.js';
@@ -15,3 +14,3 @@ import { useBEM } from '../hooks/useBEM.js';
 var _excluded = ["className", "value", "href", "type", "checked", "disabled", "children", "onClick", "isHovering", "itemRef", "externalRef"],
-    _excluded2 = ["isActive", "onKeyUp", "onBlur"];
+    _excluded2 = ["setHover"];
 var MenuItem = /*#__PURE__*/withHovering('MenuItem', function MenuItem(_ref) {
@@ -35,15 +34,6 @@ var className = _ref.className,
       setHover = _useItemState.setHover,
-      onBlur = _useItemState.onBlur,
-      onMouseMove = _useItemState.onMouseMove,
-      onMouseLeave = _useItemState.onMouseLeave;
+      stateHandlers = _objectWithoutPropertiesLoose(_useItemState, _excluded2);
 
   var eventHandlers = useContext(EventHandlersContext);
   var radioGroup = useContext(RadioGroupContext);
-
-  var _useActiveState = useActiveState(isHovering, isDisabled),
-      isActive = _useActiveState.isActive,
-      onKeyUp = _useActiveState.onKeyUp,
-      activeStateBlur = _useActiveState.onBlur,
-      activeStateHandlers = _objectWithoutPropertiesLoose(_useActiveState, _excluded2);
-
   var isRadio = type === 'radio';
@@ -73,5 +63,4 @@ var isCheckBox = type === 'checkbox';
 
-  var handleKeyUp = function handleKeyUp(e) {
-    if (!isActive) return;
-    onKeyUp(e);
+  var handleKeyDown = function handleKeyDown(e) {
+    if (!isHovering) return;
 
@@ -91,7 +80,2 @@ switch (e.key) {
 
-  var handleBlur = function handleBlur(e) {
-    activeStateBlur(e);
-    onBlur(e);
-  };
-
   var modifiers = useMemo(function () {
@@ -102,13 +86,9 @@ return Object.freeze({
       hover: isHovering,
-      active: isActive,
       checked: isChecked,
       anchor: isAnchor
     });
-  }, [type, isDisabled, isHovering, isActive, isChecked, isAnchor]);
-  var handlers = attachHandlerProps(_extends({}, activeStateHandlers, {
-    onMouseMove: onMouseMove,
-    onMouseLeave: onMouseLeave,
+  }, [type, isDisabled, isHovering, isChecked, isAnchor]);
+  var handlers = attachHandlerProps(_extends({}, stateHandlers, {
     onMouseDown: setHover,
-    onKeyUp: handleKeyUp,
-    onBlur: handleBlur,
+    onKeyDown: handleKeyDown,
     onClick: handleClick
@@ -115,0 +95,0 @@ }), restProps);

dist/es/components/SubMenu.js

@@ -8,7 +8,6 @@ import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose, extends as _extends } from '../_virtual/_rollupPluginBabelHelpers.js';
 import { useMenuStateAndFocus } from '../hooks/useMenuStateAndFocus.js';
-import { useActiveState } from '../hooks/useActiveState.js';
 import { useItemEffect } from '../hooks/useItemEffect.js';
 import { useMenuChange } from '../hooks/useMenuChange.js';
 import { useBEM } from '../hooks/useBEM.js';
-import { SettingsContext, ItemSettingsContext, MenuListItemContext, Keys, HoverActionTypes, menuClass, subMenuClass, menuItemClass, FocusPositions } from '../utils/constants.js';
+import { SettingsContext, ItemSettingsContext, MenuListItemContext, HoverActionTypes, menuClass, subMenuClass, menuItemClass, Keys, FocusPositions } from '../utils/constants.js';
 import { useCombinedRef } from '../hooks/useCombinedRef.js';
@@ -20,4 +19,3 @@ import { menuPropTypes, uncontrolledMenuPropTypes, stylePropTypes, menuDefaultProps } from '../utils/propTypes.js';
     _excluded2 = ["openMenu", "toggleMenu", "state"],
-    _excluded3 = ["isActive", "onKeyUp"],
-    _excluded4 = ["ref", "className"];
+    _excluded3 = ["ref", "className"];
 var SubMenu = /*#__PURE__*/withHovering('SubMenu', function SubMenu(_ref) {
@@ -72,8 +70,2 @@ var ariaLabel = _ref['aria-label'],
   var isOpen = isMenuOpen(state);
-
-  var _useActiveState = useActiveState(isHovering, isDisabled, Keys.RIGHT),
-      isActive = _useActiveState.isActive,
-      onKeyUp = _useActiveState.onKeyUp,
-      activeStateHandlers = _objectWithoutPropertiesLoose(_useActiveState, _excluded3);
-
   var containerRef = useRef(null);
@@ -146,5 +138,4 @@ var timeoutId = useRef(0);
 
-  var handleKeyUp = function handleKeyUp(e) {
-    if (!isActive) return;
-    onKeyUp(e);
+  var handleItemKeyDown = function handleItemKeyDown(e) {
+    if (!isHovering) return;
 
@@ -200,21 +191,20 @@ switch (e.key) {
       hover: isHovering,
-      active: isActive,
       disabled: isDisabled,
       submenu: true
     });
-  }, [isOpen, isHovering, isActive, isDisabled]);
+  }, [isOpen, isHovering, isDisabled]);
 
   var externalItemRef = itemProps.ref,
       itemClassName = itemProps.className,
-      restItemProps = _objectWithoutPropertiesLoose(itemProps, _excluded4);
+      restItemProps = _objectWithoutPropertiesLoose(itemProps, _excluded3);
 
-  var itemHandlers = attachHandlerProps(_extends({}, activeStateHandlers, {
+  var itemHandlers = attachHandlerProps({
     onMouseMove: handleMouseMove,
     onMouseLeave: handleMouseLeave,
     onMouseDown: setHover,
+    onKeyDown: handleItemKeyDown,
     onClick: function onClick() {
       return openTrigger !== 'none' && _openMenu2();
-    },
-    onKeyUp: handleKeyUp
-  }), restItemProps);
+    }
+  }, restItemProps);
 
@@ -221,0 +211,0 @@ var getMenuList = function getMenuList() {

dist/style-utils/index.cjs.js

@@ -53,3 +53,3 @@ 'use strict';
 var menuArrowSelector = /*#__PURE__*/createSelector( /*#__PURE__*/menuBlock(menuArrowClass), directions);
-var menuItemSelector = /*#__PURE__*/createSelector( /*#__PURE__*/menuBlock(menuItemClass), ['hover', 'active', 'disabled', 'anchor', 'checked', 'open', 'submenu', 'focusable', 'type-radio', 'type-checkbox']);
+var menuItemSelector = /*#__PURE__*/createSelector( /*#__PURE__*/menuBlock(menuItemClass), ['hover', 'disabled', 'anchor', 'checked', 'open', 'submenu', 'focusable', 'type-radio', 'type-checkbox']);
 var menuDividerSelector = /*#__PURE__*/createSelector( /*#__PURE__*/menuBlock(menuDividerClass));
@@ -56,0 +56,0 @@ var menuHeaderSelector = /*#__PURE__*/createSelector( /*#__PURE__*/menuBlock(menuHeaderClass));

dist/style-utils/index.js

@@ -49,3 +49,3 @@ var menuContainerClass = 'szh-menu-container';
 var menuArrowSelector = /*#__PURE__*/createSelector( /*#__PURE__*/menuBlock(menuArrowClass), directions);
-var menuItemSelector = /*#__PURE__*/createSelector( /*#__PURE__*/menuBlock(menuItemClass), ['hover', 'active', 'disabled', 'anchor', 'checked', 'open', 'submenu', 'focusable', 'type-radio', 'type-checkbox']);
+var menuItemSelector = /*#__PURE__*/createSelector( /*#__PURE__*/menuBlock(menuItemClass), ['hover', 'disabled', 'anchor', 'checked', 'open', 'submenu', 'focusable', 'type-radio', 'type-checkbox']);
 var menuDividerSelector = /*#__PURE__*/createSelector( /*#__PURE__*/menuBlock(menuDividerClass));
@@ -52,0 +52,0 @@ var menuHeaderSelector = /*#__PURE__*/createSelector( /*#__PURE__*/menuBlock(menuHeaderClass));

package.json

 {
   "name": "@szhsin/react-menu",
-  "version": "3.0.0-alpha.2",
+  "version": "3.0.0-alpha.3",
   "description": "React component for building accessible menu, dropdown, submenu, context menu and more.",
@@ -5,0 +5,0 @@ "author": "Zheng Song",

types/index.d.ts

@@ -438,6 +438,2 @@ import React = require('react');
   /**
-   * Indicates if the submenu item is active (pressed).
-   */
-  active: boolean;
-  /**
    * Indicates if the submenu and item are disabled.
@@ -485,6 +481,2 @@ */
   /**
-   * Indicates if the menu item is active (pressed).
-   */
-  active: boolean;
-  /**
    * Indicates if the menu item is checked when it's a radio or checkbox item.
@@ -491,0 +483,0 @@ */

types/style-utils.d.ts

@@ -58,6 +58,2 @@ interface Base {
     /**
-     * Menu item is active (pressed)
-     */
-    active: string;
-    /**
      * Menu item is disabled
@@ -64,0 +60,0 @@ */

No alert changes

Worsened metrics

Total package byte prevSize

187786

-2.32%

Number of package files

46

-2.13%

Lines of code

5233

-2.5%

No dependency changes