@sproutsocial/racine 8.6.0 → 8.6.3-dar10.0

package/lib/Menu/index.js

@@ -258,18 +258,37 @@ export var MenuDivider = function MenuDivider(props) {
 };
 
 var MenuFilterInput = function MenuFilterInput(props) {
+  var onChange = props.onChange,
+      onFocus = props.onFocus,
+      onBlur = props.onBlur;
+
   var _useContext3 = useContext(MenuContext),
       state = _useContext3.state,
       setState = _useContext3.setState;
 
-  var updateFilterQuery = useCallback(function (event) {
-    return setState({
-      filterQuery: event.currentTarget.value
+  var handleOnChange = useCallback(function (event, value) {
+    onChange && onChange(event, value);
+    setState({
+      filterQuery: value
+    });
+  }, [setState, onChange]);
+  var handleOnFocus = useCallback(function (event) {
+    onFocus && onFocus(event);
+    setState({
+      isFilterInputFocused: true
+    });
+  }, [setState, onFocus]);
+  var handleOnBlur = useCallback(function (event) {
+    onBlur && onBlur(event);
+    setState({
+      isFilterInputFocused: false
     });
-  }, [setState]);
+  }, [setState, onBlur]);
   return /*#__PURE__*/React.createElement(Input, _extends({}, props, {
     value: state.filterQuery,
-    onChange: updateFilterQuery
+    onChange: handleOnChange,
+    onFocus: handleOnFocus,
+    onBlur: handleOnBlur
   }));
 };
 
@@ -315,7 +334,8 @@ export var Menu = function Menu(_ref4) {
   var _useState = useState({
     selectionIndex: 0,
     filterQuery: "",
-    filteredItems: null
+    filteredItems: null,
+    isFilterInputFocused: false
   }),
       state = _useState[0],
       setState = _useState[1];

package/lib/Menu/styles.js

@@ -21,9 +21,11 @@ export var MenuItemContainer = styled(Box).withConfig({
 }, function (props) {
   return css(["", ";"], props.theme.typography[200]);
 }, function (props) {
-  return props.active && !props.disabled && css(["color:", ";background-color:", ";"], 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);
+  }, 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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/racine",
-  "version": "8.6.0",
+  "version": "8.6.3-dar10.0",
   "license": "MIT",
   "files": [
     "__flow__",
@@ -109,7 +109,7 @@
     "@storybook/react": "^6.1.11",
     "@storybook/theming": "^6.1.11",
     "@testing-library/react": "^11.2.2",
-    "@testing-library/user-event": "^12.5.0",
+    "@testing-library/user-event": "^13.0.0",
     "babel-core": "^7.0.0-bridge",
     "babel-eslint": "10.1.0",
     "babel-jest": "26.1.0",
@@ -143,6 +143,7 @@
     "jest-dom": "^3.5.0",
     "jest-styled-components": "7.0.0-beta.1",
     "jscodeshift": "^0.6.4",
+    "json-to-scss": "^1.6.2",
     "lint-staged": "^10.2.11",
     "moment": "^2.29.1",
     "npm-run-all": "^4.1.2",