@szhsin/react-menu - npm Package Compare versions

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

dist/es/components/FocusableItem.js

@@ -8,3 +8,2 @@ import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose, extends as _extends } from '../_virtual/_rollupPluginBabelHelpers.js';
 import { useBEM } from '../hooks/useBEM.js';
-import { useFlatStyles } from '../hooks/useFlatStyles.js';
 import { EventHandlersContext, menuClass, menuItemClass } from '../utils/constants.js';
@@ -14,6 +13,5 @@ import { safeCall, attachHandlerProps, commonProps } from '../utils/utils.js';
 
-var _excluded = ["className", "styles", "disabled", "children", "isHovering", "itemRef", "externalRef"];
+var _excluded = ["className", "disabled", "children", "isHovering", "itemRef", "externalRef"];
 var FocusableItem = /*#__PURE__*/withHovering('FocusableItem', function FocusableItem(_ref) {
   var className = _ref.className,
-      styles = _ref.styles,
       disabled = _ref.disabled,
@@ -68,4 +66,3 @@ children = _ref.children,
       className: className
-    }),
-    style: useFlatStyles(styles, modifiers)
+    })
   }), renderChildren);
@@ -72,0 +69,0 @@ });

dist/es/components/MenuButton.js

@@ -7,9 +7,7 @@ import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose, extends as _extends } from '../_virtual/_rollupPluginBabelHelpers.js';
 import { menuButtonClass } from '../utils/constants.js';
-import { useFlatStyles } from '../hooks/useFlatStyles.js';
 import { stylePropTypes } from '../utils/propTypes.js';
 
-var _excluded = ["className", "styles", "isOpen", "disabled", "children"];
+var _excluded = ["className", "isOpen", "disabled", "children"];
 var MenuButton = /*#__PURE__*/defineName('MenuButton', /*#__PURE__*/forwardRef(function MenuButton(_ref, ref) {
   var className = _ref.className,
-      styles = _ref.styles,
       isOpen = _ref.isOpen,
@@ -37,4 +35,3 @@ disabled = _ref.disabled,
       className: className
-    }),
-    style: useFlatStyles(styles, modifiers)
+    })
   }), children);
@@ -41,0 +38,0 @@ }));

dist/es/components/MenuDivider.js

@@ -5,9 +5,7 @@ import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose, extends as _extends } from '../_virtual/_rollupPluginBabelHelpers.js';
 import { menuClass, menuDividerClass } from '../utils/constants.js';
-import { useFlatStyles } from '../hooks/useFlatStyles.js';
 import { stylePropTypes } from '../utils/propTypes.js';
 
-var _excluded = ["className", "styles"];
+var _excluded = ["className"];
 var MenuDivider = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function MenuDivider(_ref, externalRef) {
   var className = _ref.className,
-      styles = _ref.styles,
       restProps = _objectWithoutPropertiesLoose(_ref, _excluded);
@@ -23,4 +21,3 @@
       className: className
-    }),
-    style: useFlatStyles(styles)
+    })
   }));
@@ -27,0 +24,0 @@ }));

dist/es/components/MenuGroup.js

@@ -8,9 +8,8 @@ import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose, extends as _extends } from '../_virtual/_rollupPluginBabelHelpers.js';
 import { MenuListContext, menuClass, menuGroupClass } from '../utils/constants.js';
-import { useFlatStyles } from '../hooks/useFlatStyles.js';
 import { stylePropTypes } from '../utils/propTypes.js';
 
-var _excluded = ["className", "styles", "takeOverflow"];
+var _excluded = ["className", "style", "takeOverflow"];
 var MenuGroup = /*#__PURE__*/forwardRef(function MenuGroup(_ref, externalRef) {
   var className = _ref.className,
-      styles = _ref.styles,
+      style = _ref.style,
       takeOverflow = _ref.takeOverflow,
@@ -22,4 +21,4 @@ restProps = _objectWithoutPropertiesLoose(_ref, _excluded);
   var _useState = useState(),
-      overflowStyles = _useState[0],
-      setOverflowStyles = _useState[1];
+      overflowStyle = _useState[0],
+      setOverflowStyle = _useState[1];
 
@@ -38,3 +37,3 @@ var _useContext = useContext(MenuListContext),
 
-    setOverflowStyles(maxHeight >= 0 ? {
+    setOverflowStyle(maxHeight >= 0 ? {
       maxHeight: maxHeight,
@@ -45,4 +44,4 @@ overflow: overflow
   useIsomorphicLayoutEffect(function () {
-    if (overflowStyles) ref.current.scrollTop = 0;
-  }, [overflowStyles]);
+    if (overflowStyle) ref.current.scrollTop = 0;
+  }, [overflowStyle]);
   return /*#__PURE__*/React.createElement("div", _extends({}, restProps, {
@@ -55,3 +54,3 @@ ref: useCombinedRef(externalRef, ref),
     }),
-    style: _extends({}, useFlatStyles(styles), overflowStyles)
+    style: _extends({}, style, overflowStyle)
   }));
@@ -58,0 +57,0 @@ });

dist/es/components/MenuHeader.js

@@ -5,9 +5,7 @@ import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose, extends as _extends } from '../_virtual/_rollupPluginBabelHelpers.js';
 import { menuClass, menuHeaderClass } from '../utils/constants.js';
-import { useFlatStyles } from '../hooks/useFlatStyles.js';
 import { stylePropTypes } from '../utils/propTypes.js';
 
-var _excluded = ["className", "styles"];
+var _excluded = ["className"];
 var MenuHeader = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function MenuHeader(_ref, externalRef) {
   var className = _ref.className,
-      styles = _ref.styles,
       restProps = _objectWithoutPropertiesLoose(_ref, _excluded);
@@ -23,4 +21,3 @@
       className: className
-    }),
-    style: useFlatStyles(styles)
+    })
   }));
@@ -27,0 +24,0 @@ }));

dist/es/components/MenuItem.js

@@ -10,11 +10,9 @@ import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose, extends as _extends } from '../_virtual/_rollupPluginBabelHelpers.js';
 import { useBEM } from '../hooks/useBEM.js';
-import { useFlatStyles } from '../hooks/useFlatStyles.js';
 import { attachHandlerProps, commonProps, safeCall } from '../utils/utils.js';
 import { stylePropTypes } from '../utils/propTypes.js';
 
-var _excluded = ["className", "styles", "value", "href", "type", "checked", "disabled", "children", "onClick", "isHovering", "itemRef", "externalRef"],
+var _excluded = ["className", "value", "href", "type", "checked", "disabled", "children", "onClick", "isHovering", "itemRef", "externalRef"],
     _excluded2 = ["isActive", "onKeyUp", "onBlur"];
 var MenuItem = /*#__PURE__*/withHovering('MenuItem', function MenuItem(_ref) {
   var className = _ref.className,
-      styles = _ref.styles,
       value = _ref.value,
@@ -124,4 +122,3 @@ href = _ref.href,
       className: className
-    }),
-    style: useFlatStyles(styles, modifiers)
+    })
   });
@@ -128,0 +125,0 @@

dist/es/components/MenuList.js

@@ -12,12 +12,11 @@ import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose, extends as _extends } from '../_virtual/_rollupPluginBabelHelpers.js';
 import { useBEM } from '../hooks/useBEM.js';
-import { useFlatStyles } from '../hooks/useFlatStyles.js';
 import { useCombinedRef } from '../hooks/useCombinedRef.js';
 
-var _excluded = ["ariaLabel", "menuClassName", "menuStyles", "arrowClassName", "arrowStyles", "anchorPoint", "anchorRef", "containerRef", "externalRef", "parentScrollingRef", "arrow", "align", "direction", "position", "overflow", "setDownOverflow", "repositionFlag", "captureFocus", "state", "endTransition", "isDisabled", "menuItemFocus", "offsetX", "offsetY", "children", "onClose"];
+var _excluded = ["ariaLabel", "menuClassName", "menuStyle", "arrowClassName", "arrowStyle", "anchorPoint", "anchorRef", "containerRef", "externalRef", "parentScrollingRef", "arrow", "align", "direction", "position", "overflow", "setDownOverflow", "repositionFlag", "captureFocus", "state", "endTransition", "isDisabled", "menuItemFocus", "offsetX", "offsetY", "children", "onClose"];
 var MenuList = function MenuList(_ref) {
   var ariaLabel = _ref.ariaLabel,
       menuClassName = _ref.menuClassName,
-      menuStyles = _ref.menuStyles,
+      menuStyle = _ref.menuStyle,
       arrowClassName = _ref.arrowClassName,
-      arrowStyles = _ref.arrowStyles,
+      arrowStyle = _ref.arrowStyle,
       anchorPoint = _ref.anchorPoint,
@@ -410,3 +409,3 @@ anchorRef = _ref.anchorRef,
   }, [reposSubmenu, overflow, overflowAmt]);
-  var overflowStyles = maxHeight >= 0 ? {
+  var overflowStyle = maxHeight >= 0 ? {
     maxHeight: maxHeight,
@@ -434,4 +433,2 @@ overflow: overflow
 
-  var _arrowStyles = useFlatStyles(arrowStyles, arrowModifiers);
-
   var handlers = attachHandlerProps({
@@ -451,3 +448,3 @@ onKeyDown: handleKeyDown,
     }),
-    style: _extends({}, useFlatStyles(menuStyles, modifiers), overflowStyles, {
+    style: _extends({}, menuStyle, overflowStyle, {
       left: menuPosition.x,
@@ -458,3 +455,3 @@ top: menuPosition.y
     className: _arrowClass,
-    style: _extends({}, _arrowStyles, {
+    style: _extends({}, arrowStyle, {
       left: arrowPosition.x,
@@ -461,0 +458,0 @@ top: arrowPosition.y

dist/es/components/MenuRadioGroup.js

@@ -6,10 +6,8 @@ import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose, extends as _extends } from '../_virtual/_rollupPluginBabelHelpers.js';
 import { RadioGroupContext, menuClass, radioGroupClass } from '../utils/constants.js';
-import { useFlatStyles } from '../hooks/useFlatStyles.js';
 import { stylePropTypes } from '../utils/propTypes.js';
 
-var _excluded = ["aria-label", "className", "styles", "name", "value", "onRadioChange"];
+var _excluded = ["aria-label", "className", "name", "value", "onRadioChange"];
 var MenuRadioGroup = /*#__PURE__*/forwardRef(function MenuRadioGroup(_ref, externalRef) {
   var ariaLabel = _ref['aria-label'],
       className = _ref.className,
-      styles = _ref.styles,
       name = _ref.name,
@@ -40,4 +38,3 @@ value = _ref.value,
       className: className
-    }),
-    style: useFlatStyles(styles)
+    })
   }))));
@@ -44,0 +41,0 @@ });

dist/es/components/SubMenu.js

@@ -14,3 +14,2 @@ import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose, extends as _extends } from '../_virtual/_rollupPluginBabelHelpers.js';
 import { useCombinedRef } from '../hooks/useCombinedRef.js';
-import { useFlatStyles } from '../hooks/useFlatStyles.js';
 import { menuPropTypes, uncontrolledMenuPropTypes, stylePropTypes, menuDefaultProps } from '../utils/propTypes.js';
@@ -22,3 +21,3 @@ import { isMenuOpen, attachHandlerProps, commonProps, safeCall, batchedUpdates } from '../utils/utils.js';
     _excluded3 = ["isActive", "onKeyUp"],
-    _excluded4 = ["ref", "className", "styles"];
+    _excluded4 = ["ref", "className"];
 var SubMenu = /*#__PURE__*/withHovering('SubMenu', function SubMenu(_ref) {
@@ -205,5 +204,4 @@ var ariaLabel = _ref['aria-label'],
 
-  var externaItemRef = itemProps.ref,
+  var externalItemRef = itemProps.ref,
       itemClassName = itemProps.className,
-      itemStyles = itemProps.styles,
       restItemProps = _objectWithoutPropertiesLoose(itemProps, _excluded4);
@@ -247,3 +245,3 @@
   }, commonProps(isDisabled, isHovering), restItemProps, itemHandlers, {
-    ref: useCombinedRef(externaItemRef, itemRef),
+    ref: useCombinedRef(externalItemRef, itemRef),
     className: useBEM({
@@ -254,4 +252,3 @@ block: menuClass,
       className: itemClassName
-    }),
-    style: useFlatStyles(itemStyles, modifiers)
+    })
   }), useMemo(function () {
@@ -258,0 +255,0 @@ return safeCall(label, modifiers);

dist/es/utils/constants.js

@@ -49,3 +49,2 @@ import { createContext } from 'react';
 var FocusPositions = /*#__PURE__*/Object.freeze({
-  INITIAL: 'initial',
   FIRST: 'first',
@@ -52,0 +51,0 @@ LAST: 'last'

dist/es/utils/propTypes.js

@@ -7,3 +7,3 @@ import { extends as _extends } from '../_virtual/_rollupPluginBabelHelpers.js';
 
-  return _ref = {}, _ref[name ? name + "ClassName" : 'className'] = oneOfType([string, func]), _ref[name ? name + "Styles" : 'styles'] = oneOfType([object, func]), _ref;
+  return _ref = {}, _ref[name ? name + "ClassName" : 'className'] = oneOfType([string, func]), _ref;
 };
@@ -13,3 +13,6 @@ var menuPropTypes = /*#__PURE__*/_extends({
 }, /*#__PURE__*/stylePropTypes('menu'), /*#__PURE__*/stylePropTypes('arrow'), {
+  menuStyle: object,
+  arrowStyle: object,
   arrow: bool,
+  setDownOverflow: bool,
   offsetX: number,
@@ -16,0 +19,0 @@ offsetY: number,

package.json

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

types/index.d.ts

@@ -18,23 +18,11 @@ import React = require('react');
  * - `'last'` focus the last item in the menu.
- * - `number` focus item at the specific position.
+ * - `number` focus item at the specific position (zero-based).
  */
-export type FocusPosition = 'initial' | 'first' | 'last' | number;
-type DirStyleKey = '$left' | '$right' | '$top' | '$bottom';
+export type FocusPosition = 'first' | 'last' | number;
 
-type StringStyles<T extends string> = React.CSSProperties & {
-  [K in T]?: React.CSSProperties;
-};
-
-type Styles<S> = React.CSSProperties & {
-  [K in keyof S]?: S[K] extends string ? StringStyles<S[K]> : React.CSSProperties;
-};
-
 type ClassNameProp<M = undefined> = string | ((modifiers: M) => string);
 
-type StylesProp<M, S = M> = Styles<S> | ((modifiers: M) => React.CSSProperties);
-
 type RenderProp<M, R = React.ReactNode> = R | ((modifiers: M) => R);
 
-interface BaseProps<M = undefined, S = M>
-  extends Omit<React.HTMLAttributes<HTMLElement>, 'className'> {
+interface BaseProps<M = undefined> extends Omit<React.HTMLAttributes<HTMLElement>, 'className'> {
   ref?: React.Ref<any>;
@@ -45,3 +33,2 @@ /**
   className?: ClassNameProp<M>;
-  styles?: StylesProp<M, S>;
 }
@@ -120,7 +107,2 @@
 // ----------------------------------------------------------------------
-interface MenuStyleKeys {
-  state: MenuState;
-  dir: DirStyleKey;
-}
-
 export type MenuModifiers = Readonly<{
@@ -137,6 +119,2 @@ /**
 
-interface MenuArrowStyleKeys {
-  dir: DirStyleKey;
-}
-
 export type MenuArrowModifiers = Readonly<{
@@ -194,3 +172,3 @@ /**
  */
-interface BaseMenuProps extends Omit<BaseProps, 'styles'> {
+interface BaseMenuProps extends Omit<BaseProps, 'style'> {
   /**
@@ -200,3 +178,3 @@ * Can be a string or a function which receives a modifier object and returns a CSS `class` string.
   menuClassName?: ClassNameProp<MenuModifiers>;
-  menuStyles?: StylesProp<MenuModifiers, MenuStyleKeys>;
+  menuStyle?: React.CSSProperties;
   /**
@@ -206,3 +184,3 @@ * Can be a string or a function which receives a modifier object and returns a CSS `class` string.
   arrowClassName?: ClassNameProp<MenuArrowModifiers>;
-  arrowStyles?: StylesProp<MenuArrowModifiers, MenuArrowStyleKeys>;
+  arrowStyle?: React.CSSProperties;
   /**
@@ -209,0 +187,0 @@ * Set `true` to display an arrow pointing to its anchor element.

No alert changes

Worsened metrics

Total package byte prevSize

192237

decreased by-2.79%

Number of package files

47

decreased by-2.08%

Lines of code

5367

decreased by-2.42%

No dependency changes