@pingux/astro 2.0.3 → 2.0.4-alpha.1

package/lib/recipes/ListAndPanel.stories.js

@@ -9,6 +9,7 @@ import MoreVertIcon from 'mdi-react/MoreVertIcon';
 import PencilIcon from 'mdi-react/PencilIcon';
 import PlusIcon from 'mdi-react/PlusIcon';
 import { useOverlayPanelState } from '../hooks';
+import useOverlappingMenuHoverState from '../hooks/useOverlappingMenuHoverState';
 import { Box, Icon, IconButton, Link, ListItem, ListView, Menu, OverlayPanel, PopoverMenu, SearchField, Separator, SwitchField, Tab, Tabs, Text } from '../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
@@ -174,46 +175,20 @@ var ListElement = function ListElement(_ref) {
   var item = _ref.item,
     isHoverable = _ref.isHoverable,
     onClosePanel = _ref.onClosePanel;
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    isHovered = _useState2[0],
-    setIsHovered = _useState2[1];
-  var _useState3 = useState({}),
-    _useState4 = _slicedToArray(_useState3, 2),
-    mousePosition = _useState4[0],
-    setMousePosition = _useState4[1];
   var listItemRef = useRef();
-  var handleMenuHoverEnd = function handleMenuHoverEnd() {
-    var currentPositionX = mousePosition.currentPositionX,
-      currentPositionY = mousePosition.currentPositionY;
-    var _listItemRef$current$ = listItemRef.current.getBoundingClientRect(),
-      height = _listItemRef$current$.height,
-      right = _listItemRef$current$.right,
-      top = _listItemRef$current$.top;
-    var hasMovedBackToRow = currentPositionY < top + height && currentPositionX < right;
-    if (hasMovedBackToRow) {
-      setIsHovered(true);
-      return;
-    }
-    setIsHovered(false);
-  };
-  var handleMouseMove = function handleMouseMove(e) {
-    setMousePosition({
-      currentPositionX: e.clientX,
-      currentPositionY: e.clientY
-    });
-  };
-  var handleHoveEnd = function handleHoveEnd() {
-    setIsHovered(false);
-  };
-  var handleHoveStart = function handleHoveStart() {
-    setIsHovered(true);
-  };
+  var _useOverlappingMenuHo = useOverlappingMenuHoverState({
+      listItemRef: listItemRef
+    }),
+    handleHoverEnd = _useOverlappingMenuHo.handleHoverEnd,
+    handleHoverStart = _useOverlappingMenuHo.handleHoverStart,
+    handleMenuHoverEnd = _useOverlappingMenuHo.handleMenuHoverEnd,
+    handleMouseMove = _useOverlappingMenuHo.handleMouseMove,
+    isHovered = _useOverlappingMenuHo.isHovered;
   return ___EmotionJSX(ListItem, {
     isHovered: isHoverable && isHovered,
     isRow: true,
-    onHoverEnd: handleHoveEnd,
-    onHoverStart: handleHoveStart,
+    onHoverEnd: handleHoverEnd,
+    onHoverStart: handleHoverStart,
     onMouseMove: handleMouseMove,
     ref: listItemRef,
     sx: sx.listElement.wrapper
@@ -245,9 +220,9 @@ var ListElement = function ListElement(_ref) {
     icon: MoreVertIcon,
     size: "md"
   })), ___EmotionJSX(Menu, {
-    onAction: handleHoveEnd,
+    onAction: handleHoverEnd,
     onHoverEnd: handleMenuHoverEnd,
-    onHoverStart: handleHoveStart
+    onHoverStart: handleHoverStart
   }, ___EmotionJSX(Item, {
     key: "enable"
   }, "Enable user"), ___EmotionJSX(Item, {
@@ -263,14 +238,14 @@ var ListElement = function ListElement(_ref) {
   }))));
 };
 export var Default = function Default() {
-  var _useState5 = useState(),
-    _useState6 = _slicedToArray(_useState5, 2),
-    selectedItemId = _useState6[0],
-    setSelectedItemId = _useState6[1];
-  var _useState7 = useState(),
-    _useState8 = _slicedToArray(_useState7, 2),
-    selectedKeys = _useState8[0],
-    setSelectedKeys = _useState8[1];
+  var _useState = useState(),
+    _useState2 = _slicedToArray(_useState, 2),
+    selectedItemId = _useState2[0],
+    setSelectedItemId = _useState2[1];
+  var _useState3 = useState(),
+    _useState4 = _slicedToArray(_useState3, 2),
+    selectedKeys = _useState4[0],
+    setSelectedKeys = _useState4[1];
   var _useOverlayPanelState = useOverlayPanelState(),
     panelState = _useOverlayPanelState.state,
     onPanelClose = _useOverlayPanelState.onClose;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "2.0.3",
+  "version": "2.0.4-alpha.1",
   "description": "PingUX themeable React component library",
   "repository": {
     "type": "git",