@sproutsocial/racine 11.0.0-mixin-beta.0 → 11.0.1

package/lib/Menu/index.js

@@ -66,9 +66,8 @@ export var MenuItem = function MenuItem(_ref) {
       selected = _ref.selected,
       disabled = _ref.disabled,
       indeterminate = _ref.indeterminate,
-      active = _ref.active,
       labelProp = _ref.label,
-      props = _objectWithoutPropertiesLoose(_ref, ["id", "index", "as", "children", "role", "elemBefore", "elemAfter", "value", "onKeyPress", "onClick", "selected", "disabled", "indeterminate", "active", "label"]);
+      props = _objectWithoutPropertiesLoose(_ref, ["id", "index", "as", "children", "role", "elemBefore", "elemAfter", "value", "onKeyPress", "onClick", "selected", "disabled", "indeterminate", "label"]);
 
   var _useContext = useContext(MenuContext),
       menuRole = _useContext.role,
@@ -106,6 +105,11 @@ export var MenuItem = function MenuItem(_ref) {
   var isHidden = filteredItems && !filteredItems.includes(index);
   var isFocused = index === selectionIndex;
   selectCallbacks.current[index] = onClick;
+
+  var _useState = useState(false),
+      keyPressed = _useState[0],
+      setKeyPressed = _useState[1];
+
   var isCheckboxOrRadio = [MENU_ITEM_ROLES.CHECKBOX, MENU_ITEM_ROLES.RADIO].includes(itemRole);
   var interactive = onClick || onKeyPress || [MENU_ITEM_ROLES.OPTION, MENU_ITEM_ROLES.MENUITEM, MENU_ITEM_ROLES.CHECKBOX, MENU_ITEM_ROLES.RADIO].includes(itemRole);
   /**
@@ -123,6 +127,13 @@ export var MenuItem = function MenuItem(_ref) {
       }
     }
   }, [ref, isCheckboxOrRadio]);
+  useEffect(function () {
+    if (filteredItems) {
+      setKeyPressed(true);
+    } else if (selectionIndex !== 0) {
+      setKeyPressed(true);
+    }
+  }, [selectionIndex, filteredItems]);
   var handleClick = useCallback(function (e) {
     var _menuRef$current;
 
@@ -173,7 +184,7 @@ export var MenuItem = function MenuItem(_ref) {
   return /*#__PURE__*/React.createElement(MenuItemContainer, _extends({
     "data-qa-menu-item": label
   }, props, {
-    active: active || isFocused,
+    active: isFocused && keyPressed,
     id: id,
     "aria-label": labelProp,
     value: valueProp,
@@ -245,7 +256,6 @@ export var MenuGroup = function MenuGroup(_ref2) {
     color: "text.headline",
     _css: isDisabled && disabled
   }, title)), /*#__PURE__*/React.createElement(Box, _extends({}, props, {
-    m: 300,
     p: 300,
     role: "group"
   }), children));
@@ -333,14 +343,14 @@ export var Menu = function Menu(_ref4) {
       descendants = _useDescendants[0],
       setDescendants = _useDescendants[1];
 
-  var _useState = useState({
+  var _useState2 = useState({
     selectionIndex: 0,
     filterQuery: "",
     filteredItems: null,
     isFilterInputFocused: false
   }),
-      state = _useState[0],
-      setState = _useState[1];
+      state = _useState2[0],
+      setState = _useState2[1];
 
   var selectCallbacks = useRef([]);
   var menuRef = useRef(null);
@@ -396,9 +406,9 @@ export var MenuButton = function MenuButton(_ref5) {
       placement = _ref5$placement === void 0 ? "bottom" : _ref5$placement,
       props = _objectWithoutPropertiesLoose(_ref5, ["content", "popoutProps", "children", "onClick", "closeOnItemClick", "id", "placement"]);
 
-  var _useState2 = useState(false),
-      isOpen = _useState2[0],
-      setIsOpen = _useState2[1];
+  var _useState3 = useState(false),
+      isOpen = _useState3[0],
+      setIsOpen = _useState3[1];
 
   var closePopout = useCallback(function () {
     return setIsOpen(false);

package/lib/Menu/styles.js

@@ -1,6 +1,6 @@
 import styled, { css } from "styled-components";
 import Box from "../Box";
-import { disabled } from "../utils/mixins";
+import { disabled, focusRing } from "../utils/mixins";
 export var MenuItemContainer = styled(Box).withConfig({
   displayName: "styles__MenuItemContainer",
   componentId: "fjvae4-0"
@@ -20,16 +20,16 @@ export var MenuItemContainer = styled(Box).withConfig({
   return "6px " + props.theme.space[300];
 }, function (props) {
   return css(["", ";"], props.theme.typography[200]);
+}, function (props) {
+  return props.selected && !props.isCheckboxOrRadio && css(["font-weight:", ";"], function (props) {
+    return props.theme.fontWeights.semibold;
+  });
 }, function (props) {
   return props.active && !props.disabled && css(["color:", ";background-color:", ";.Icon-svg{color:", ";}"], function (props) {
     return props.theme.colors.text.inverse;
   }, props.theme.colors.listItem.background.selected, function (props) {
     return props.theme.colors.text.inverse;
   });
-}, function (props) {
-  return props.selected && !props.isCheckboxOrRadio && css(["font-weight:", ";"], function (props) {
-    return props.theme.fontWeights.semibold;
-  });
 }, function (props) {
   return !props.disabled && css(["&:focus,&:hover{color:", ";background-color:", ";.Icon-svg{color:unset;}}"], function (props) {
     return props.theme.colors.text.body;
@@ -44,4 +44,4 @@ export var MenuItemContainer = styled(Box).withConfig({
 export var MenuItemsContainer = styled(Box).withConfig({
   displayName: "styles__MenuItemsContainer",
   componentId: "fjvae4-1"
-})(["list-style-type:none;outline:0;"]);
+})(["list-style-type:none;&:focus{", "}"], focusRing);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/racine",
-  "version": "11.0.0-mixin-beta.0",
+  "version": "11.0.1",
   "license": "MIT",
   "files": [
     "__flow__",