@pingux/astro 2.0.0-alpha.5 → 2.0.0-alpha.6

package/lib/recipes/ListAndPanel.stories.js

@@ -9,7 +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 { Box, Icon, IconButton, Link, ListView, Menu, OverlayPanel, PopoverMenu, SearchField, Separator, SwitchField, Tab, Tabs, Text } from '../index';
+import { Box, Icon, IconButton, Link, ListItem, ListView, Menu, OverlayPanel, PopoverMenu, SearchField, Separator, SwitchField, Tab, Tabs, Text } from '..';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Recipes/List with Panel'
@@ -137,7 +137,8 @@ var sx = {
   },
   listElement: {
     wrapper: {
-      minHeight: '60px'
+      minHeight: '60px',
+      pl: '14px'
     },
     iconWrapper: {
       mr: 'auto',
@@ -151,7 +152,7 @@ var sx = {
     avatar: {
       width: '25px',
       height: '25px',
-      mr: 'md'
+      mr: '14px'
     },
     title: {
       alignSelf: 'start',
@@ -164,15 +165,57 @@ var sx = {
       alignSelf: 'start'
     },
     menuWrapper: {
-      alignSelf: 'center'
+      alignSelf: 'center',
+      pr: '4px'
     }
   }
 };
 var ListElement = function ListElement(_ref) {
   var item = _ref.item,
+    isHoverable = _ref.isHoverable,
     onClosePanel = _ref.onClosePanel;
-  return ___EmotionJSX(Box, {
+  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);
+  };
+  return ___EmotionJSX(ListItem, {
+    isHovered: isHoverable && isHovered,
     isRow: true,
+    onHoverEnd: handleHoveEnd,
+    onHoverStart: handleHoveStart,
+    onMouseMove: handleMouseMove,
+    ref: listItemRef,
     sx: sx.listElement.wrapper
   }, ___EmotionJSX(Box, {
     isRow: true,
@@ -201,7 +244,11 @@ var ListElement = function ListElement(_ref) {
   }, ___EmotionJSX(Icon, {
     icon: MoreVertIcon,
     size: "md"
-  })), ___EmotionJSX(Menu, null, ___EmotionJSX(Item, {
+  })), ___EmotionJSX(Menu, {
+    onAction: handleHoveEnd,
+    onHoverEnd: handleMenuHoverEnd,
+    onHoverStart: handleHoveStart
+  }, ___EmotionJSX(Item, {
     key: "enable"
   }, "Enable user"), ___EmotionJSX(Item, {
     key: "disable"
@@ -216,14 +263,14 @@ var ListElement = function ListElement(_ref) {
   }))));
 };
 export var Default = function Default() {
-  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 _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 _useOverlayPanelState = useOverlayPanelState(),
     panelState = _useOverlayPanelState.state,
     onPanelClose = _useOverlayPanelState.onClose;
@@ -246,9 +293,7 @@ export var Default = function Default() {
       closePanelHandler();
     }
   };
-  return ___EmotionJSX(Box, {
-    sx: sx.wrapper
-  }, ___EmotionJSX(Box, null, ___EmotionJSX(Box, {
+  var title = ___EmotionJSX(Box, null, ___EmotionJSX(Box, {
     align: "center",
     isRow: true,
     mb: "xs",
@@ -275,7 +320,10 @@ export var Default = function Default() {
     sx: {
       fontSize: '13px'
     }
-  }, " Learn more"))), ___EmotionJSX(SearchField, {
+  }, " Learn more")));
+  return ___EmotionJSX(Box, {
+    sx: sx.wrapper
+  }, title, ___EmotionJSX(SearchField, {
     position: "fixed",
     mb: "lg",
     mt: "lg",
@@ -288,17 +336,19 @@ export var Default = function Default() {
     items: items,
     onSelectionChange: selectItemHandler,
     ref: panelTriggerRef,
-    selectedKeys: selectedKeys
+    selectedKeys: selectedKeys,
+    isHoverable: false
   }, function (item) {
     return ___EmotionJSX(Item, {
       key: item.email,
       textValue: item.email,
-      hasSeparator: true,
+      hasSeparator: item.hasSeparator,
       listItemProps: {
-        pl: 15,
-        minHeight: 75
+        minHeight: 75,
+        padding: 1
       }
     }, ___EmotionJSX(ListElement, {
+      isHoverable: true,
       item: item
     }));
   }), ___EmotionJSX(OverlayPanel, {

package/lib/styles/colors.js

@@ -13,7 +13,9 @@ export var active = '#4462ED';
 export var critical = {
   bright: '#a31300',
   dark: '#a31300',
-  light: '#ffebe7'
+  light: '#ffebe7',
+  primaryDark: chroma.mix('#a31300', '#000000', 0.2).hex(),
+  secondaryDark: chroma.mix('#a31300', '#000000', 0.4).hex()
 };
 export var success = {
   bright: '#00af18',

package/lib/utils/devUtils/props/hoverProps.js

@@ -0,0 +1,44 @@
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+import PropTypes from 'prop-types';
+var descriptions = {
+  onHoverStart: 'Handler that is called when a hover interaction starts.',
+  onHoverEnd: 'Handler that is called when a hover interaction ends.',
+  onHoverChange: 'Handler that is called when the hover state changes.'
+};
+export var baseDocSettings = {
+  type: {
+    summary: 'func'
+  },
+  control: {
+    type: null
+  },
+  table: {
+    category: 'Hover Handlers'
+  }
+};
+export var onHoverArgTypes = {
+  'onHoverStart': _objectSpread({
+    description: descriptions.onHoverStart
+  }, baseDocSettings),
+  'onHoverEnd': _objectSpread({
+    description: descriptions.onHoverEnd
+  }, baseDocSettings),
+  'onHoverChange': _objectSpread({
+    description: descriptions.onHoverChange
+  }, baseDocSettings)
+};
+export var onHoverPropTypes = {
+  onHoverStart: PropTypes.func,
+  onHoverEnd: PropTypes.func,
+  onHoverChange: PropTypes.func
+};

package/package.json

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