material-ui-popup-state - npm Package Compare versions

Comparing version 3.1.1 to 4.0.0

core.d.ts

@@ -5,2 +5,4 @@ import { SyntheticEvent, MouseEvent, TouchEvent, FocusEvent } from 'react'
 
+export type AnchorPosition = { left: number; top: number }
+
 export type PopupState = {
@@ -17,2 +19,3 @@ open: (eventOrAnchorEl?: SyntheticEvent<any> | HTMLElement | null) => void
   anchorEl: HTMLElement | undefined
+  anchorPosition: AnchorPosition | null | undefined
   setAnchorEl: (anchorEl: HTMLElement) => any
@@ -23,2 +26,3 @@ setAnchorElUsed: boolean
   variant: Variant
+  _openEventType: string | null | undefined
   _childPopupState: PopupState | undefined
@@ -32,3 +36,5 @@ _setChildPopupState: (popupState: PopupState | null | undefined) => void
   anchorEl: HTMLElement | undefined
+  anchorPosition: AnchorPosition | null | undefined
   hovered: boolean
+  _openEventType: string | null | undefined
   _childPopupState: PopupState | undefined
@@ -130,2 +136,4 @@ _deferNextOpen: boolean
   anchorEl: HTMLElement | undefined
+  anchorPosition: AnchorPosition | null | undefined
+  anchorReference: 'anchorEl' | 'anchorPosition'
   open: boolean
@@ -148,2 +156,4 @@ onClose: () => void
   anchorEl: HTMLElement | undefined
+  anchorPosition: AnchorPosition | null | undefined
+  anchorReference: 'anchorEl' | 'anchorPosition'
   open: boolean
@@ -150,0 +160,0 @@ onClose: () => void

core.js

@@ -47,4 +47,6 @@ "use strict";
   anchorEl: null,
+  anchorPosition: null,
   hovered: false,
   focused: false,
+  _openEventType: null,
   _childPopupState: null,
@@ -66,4 +68,6 @@ _deferNextOpen: false,
       anchorEl = state.anchorEl,
+      anchorPosition = state.anchorPosition,
       hovered = state.hovered,
       focused = state.focused,
+      _openEventType = state._openEventType,
       _childPopupState = state._childPopupState,
@@ -96,2 +100,8 @@ _deferNextOpen = state._deferNextOpen,
     var currentTarget = eventOrAnchorEl && eventOrAnchorEl.currentTarget;
+    var clientX = eventOrAnchorEl && eventOrAnchorEl.clientX;
+    var clientY = eventOrAnchorEl && eventOrAnchorEl.clientY;
+    var anchorPosition = typeof clientX === 'number' && typeof clientY === 'number' ? {
+      left: clientX,
+      top: clientY
+    } : null;
 
@@ -118,4 +128,6 @@ if (eventType === 'touchstart') {
         isOpen: true,
+        anchorPosition: anchorPosition,
         hovered: eventType === 'mouseover' || hovered,
-        focused: eventType === 'focus' || focused
+        focused: eventType === 'focus' || focused,
+        _openEventType: eventType
       };
@@ -217,2 +229,3 @@
     anchorEl: anchorEl,
+    anchorPosition: anchorPosition,
     setAnchorEl: setAnchorEl,
@@ -230,2 +243,3 @@ setAnchorElUsed: setAnchorElUsed,
     disableAutoFocus: disableAutoFocus !== null && disableAutoFocus !== void 0 ? disableAutoFocus : Boolean(hovered || focused),
+    _openEventType: _openEventType,
     _childPopupState: _childPopupState,
@@ -351,9 +365,14 @@ _setChildPopupState: _setChildPopupState
       anchorEl = _ref4.anchorEl,
+      anchorPosition = _ref4.anchorPosition,
       close = _ref4.close,
       popupId = _ref4.popupId,
       onMouseLeave = _ref4.onMouseLeave,
-      disableAutoFocus = _ref4.disableAutoFocus;
+      disableAutoFocus = _ref4.disableAutoFocus,
+      _openEventType = _ref4._openEventType;
+  var useAnchorPosition = _openEventType === 'contextmenu';
   return _objectSpread({
     id: popupId,
     anchorEl: anchorEl,
+    anchorPosition: anchorPosition,
+    anchorReference: useAnchorPosition ? 'anchorPosition' : 'anchorEl',
     open: isOpen,
@@ -386,9 +405,14 @@ onClose: close,
       anchorEl = _ref5.anchorEl,
+      anchorPosition = _ref5.anchorPosition,
       close = _ref5.close,
       popupId = _ref5.popupId,
       onMouseLeave = _ref5.onMouseLeave,
-      disableAutoFocus = _ref5.disableAutoFocus;
+      disableAutoFocus = _ref5.disableAutoFocus,
+      _openEventType = _ref5._openEventType;
+  var useAnchorPosition = _openEventType === 'contextmenu';
   return _objectSpread({
     id: popupId,
     anchorEl: anchorEl,
+    anchorPosition: anchorPosition,
+    anchorReference: useAnchorPosition ? 'anchorPosition' : 'anchorEl',
     open: isOpen,
@@ -395,0 +419,0 @@ onClose: close,

es/core.d.ts

@@ -5,2 +5,4 @@ import { SyntheticEvent, MouseEvent, TouchEvent, FocusEvent } from 'react'
 
+export type AnchorPosition = { left: number; top: number }
+
 export type PopupState = {
@@ -17,2 +19,3 @@ open: (eventOrAnchorEl?: SyntheticEvent<any> | HTMLElement | null) => void
   anchorEl: HTMLElement | undefined
+  anchorPosition: AnchorPosition | null | undefined
   setAnchorEl: (anchorEl: HTMLElement) => any
@@ -23,2 +26,3 @@ setAnchorElUsed: boolean
   variant: Variant
+  _openEventType: string | null | undefined
   _childPopupState: PopupState | undefined
@@ -32,3 +36,5 @@ _setChildPopupState: (popupState: PopupState | null | undefined) => void
   anchorEl: HTMLElement | undefined
+  anchorPosition: AnchorPosition | null | undefined
   hovered: boolean
+  _openEventType: string | null | undefined
   _childPopupState: PopupState | undefined
@@ -130,2 +136,4 @@ _deferNextOpen: boolean
   anchorEl: HTMLElement | undefined
+  anchorPosition: AnchorPosition | null | undefined
+  anchorReference: 'anchorEl' | 'anchorPosition'
   open: boolean
@@ -148,2 +156,4 @@ onClose: () => void
   anchorEl: HTMLElement | undefined
+  anchorPosition: AnchorPosition | null | undefined
+  anchorReference: 'anchorEl' | 'anchorPosition'
   open: boolean
@@ -150,0 +160,0 @@ onClose: () => void

es/core.js

@@ -38,4 +38,6 @@ "use strict";
   anchorEl: null,
+  anchorPosition: null,
   hovered: false,
   focused: false,
+  _openEventType: null,
   _childPopupState: null,
@@ -59,4 +61,6 @@ _deferNextOpen: false,
     anchorEl,
+    anchorPosition,
     hovered,
     focused,
+    _openEventType,
     _childPopupState,
@@ -92,2 +96,8 @@ _deferNextOpen,
     const currentTarget = eventOrAnchorEl && eventOrAnchorEl.currentTarget;
+    const clientX = eventOrAnchorEl && eventOrAnchorEl.clientX;
+    const clientY = eventOrAnchorEl && eventOrAnchorEl.clientY;
+    const anchorPosition = typeof clientX === 'number' && typeof clientY === 'number' ? {
+      left: clientX,
+      top: clientY
+    } : null;
 
@@ -114,4 +124,6 @@ if (eventType === 'touchstart') {
         isOpen: true,
+        anchorPosition,
         hovered: eventType === 'mouseover' || hovered,
-        focused: eventType === 'focus' || focused
+        focused: eventType === 'focus' || focused,
+        _openEventType: eventType
       };
@@ -211,2 +223,3 @@
     anchorEl,
+    anchorPosition,
     setAnchorEl,
@@ -224,2 +237,3 @@ setAnchorElUsed,
     disableAutoFocus: disableAutoFocus !== null && disableAutoFocus !== void 0 ? disableAutoFocus : Boolean(hovered || focused),
+    _openEventType,
     _childPopupState,
@@ -352,10 +366,15 @@ _setChildPopupState
   anchorEl,
+  anchorPosition,
   close,
   popupId,
   onMouseLeave,
-  disableAutoFocus
+  disableAutoFocus,
+  _openEventType
 }) {
+  const useAnchorPosition = _openEventType === 'contextmenu';
   return {
     id: popupId,
     anchorEl,
+    anchorPosition,
+    anchorReference: useAnchorPosition ? 'anchorPosition' : 'anchorEl',
     open: isOpen,
@@ -389,10 +408,15 @@ onClose: close,
   anchorEl,
+  anchorPosition,
   close,
   popupId,
   onMouseLeave,
-  disableAutoFocus
+  disableAutoFocus,
+  _openEventType
 }) {
+  const useAnchorPosition = _openEventType === 'contextmenu';
   return {
     id: popupId,
     anchorEl,
+    anchorPosition,
+    anchorReference: useAnchorPosition ? 'anchorPosition' : 'anchorEl',
     open: isOpen,
@@ -399,0 +423,0 @@ onClose: close,

package.json

 {
   "name": "material-ui-popup-state",
-  "version": "3.1.1",
+  "version": "4.0.0",
   "description": "easiest way to create menus, popovers, and poppers with material-ui",
@@ -5,0 +5,0 @@ "main": "index.js",

README.md

@@ -222,2 +222,4 @@ # material-ui-popup-state
 - `bindContextMenu`: creates props for a component that opens the popup on when right clicked (`contextmenu` event).
+  **NOTE**: `bindPopover`/`bindMenu` will position the Popover/Menu to the `contextmenu` event location. To position
+  using the `contextmenu` target element instead, pass `anchorReference="anchorEl"` after `{...bindPopover(popupState)}`/`{...bindMenu(popupState)}`.
 - `bindToggle`: creates props for a component that toggles the popup when clicked.
@@ -296,2 +298,3 @@ - `bindHover`: creates props for a component that opens the popup while hovered.
 - `anchorEl`: the current anchor element
+- `anchorPosition`: the current anchor position
 - `setAnchorEl`: sets the anchor element (the `currentTarget` of the triggering
@@ -503,2 +506,4 @@ mouse event is used by default unless you have called `setAnchorEl`)
 - `bindContextMenu`: creates props for a component that opens the popup on when right clicked (`contextmenu` event).
+  **NOTE**: `bindPopover`/`bindMenu` will position the Popover/Menu to the `contextmenu` event location. To position
+  using the `contextmenu` target element instead, pass `anchorReference="anchorEl"` after `{...bindPopover(popupState)}`/`{...bindMenu(popupState)}`.
 - `bindToggle`: creates props for a component that toggles the popup when clicked.
@@ -571,2 +576,3 @@ - `bindHover`: creates props for a component that opens the popup while hovered.
 - `anchorEl`: the current anchor element
+- `anchorPosition`: the current anchor position
 - `setAnchorEl`: sets the anchor element (the `currentTarget` of the triggering
@@ -573,0 +579,0 @@ mouse event is used by default unless you have called `setAnchorEl`)

No alert changes

Improved metrics

Total package byte prevSize

141812

4.32%

Lines of code

2119

3.21%

Number of lines in readme file

591

1.03%

No dependency changes