@sproutsocial/racine 8.6.0 → 8.6.3

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # Change Log
 
+## 8.6.3
+
+### Patch Changes
+
+- 777fcd7: Unset inverted icon color when menu item is hovered and active
+
+## 8.6.2
+
+### Patch Changes
+
+- 039da3f: Address visual bug on collapsible shadow
+
+## 8.6.1
+
+### Patch Changes
+
+- c46c79d: Pressing space on a filter input in listbox triggers a submit, preventing users from entering text with spaces. This fix changes the behavior such that if the input is in focus, the space won't trigger a select.
+- b34b463: Invert the icon colors in menu items to mirror the text behavior.
+
 ## 8.6.0
 
 ### Minor Changes

package/__flow__/Collapsible/index.js

@@ -103,6 +103,7 @@ const Panel = ({ children, ...rest }) => {
 
   return (
     <CollapsingBox
+      hasShadow={collapsedHeight || openHeight > 0}
       scrollable={isOpen}
       maxHeight={isOpen ? maxHeight : collapsedHeight}
       minHeight={collapsedHeight}

package/__flow__/Collapsible/styles.js

@@ -10,29 +10,28 @@ export const CollapsingBox = styled<typeof Box, TypeTheme, *>(Box)`
   will-change: max-height;
   position: relative;
   overflow: auto;
-  background:  /* Shadow covers */ linear-gradient(
-      ${(p) => p.theme.colors.neutral[100]} 30%,
-      rgba(255, 255, 255, 0)
-    ),
-    linear-gradient(
-        rgba(255, 255, 255, 0),
-        ${(p) => p.theme.colors.neutral[100]} 70%
-      )
-      0 100%,
-    /* Shadows */
-      radial-gradient(
-        farthest-side at 50% 0,
-        rgb(39 51 51 / 5%),
-        rgba(0, 0, 0, 0)
+  ${({ hasShadow, theme, scrollable }) =>
+    hasShadow
+      ? `background:  /* Shadow covers */ linear-gradient(
+        transparent 30%,
+        rgba(255, 255, 255, 0)
       ),
-    radial-gradient(
-        farthest-side at 50% 100%,
-        rgb(39 51 51 / 5%),
-        rgba(0, 0, 0, 0)
-      )
-      0 100%;
-  background-repeat: no-repeat;
-  background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;
-  background-attachment: local, local, scroll, scroll;
-  ${({ scrollable }) => (scrollable ? `overflow: auto` : `overflow: hidden`)};
+      linear-gradient(rgba(255, 255, 255, 0), transparent 70%) 0 100%,
+      /* Shadows */
+        radial-gradient(
+          farthest-side at 50% 0,
+          rgb(39 51 51 / 5%),
+          rgba(0, 0, 0, 0)
+        ),
+      radial-gradient(
+          farthest-side at 50% 100%,
+          rgb(39 51 51 / 5%),
+          rgba(0, 0, 0, 0)
+        )
+        0 100%;
+    background-repeat: no-repeat;
+    background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;
+    background-attachment: local, local, scroll, scroll;
+    ${scrollable ? `overflow: auto` : `overflow: hidden`};`
+      : ""}
 `;

package/__flow__/Listbox/__snapshots__/index.test.js.snap

@@ -142,7 +142,7 @@ html .c5 {
         class="c1 c2"
         data-qa-button=""
         data-qa-button-isdisabled="false"
-        id="MenuButton-8"
+        id="MenuButton-20"
         type="button"
       >
         Select a fruit
@@ -413,6 +413,11 @@ exports[`Listbox AsListbox with checkboxes should match snapshot 1`] = `
   background-color: #f3f4f4;
 }
 
+.c6:focus .Icon-svg,
+.c6:hover .Icon-svg {
+  color: unset;
+}
+
 .c6:hover {
   cursor: pointer;
 }
@@ -436,12 +441,21 @@ exports[`Listbox AsListbox with checkboxes should match snapshot 1`] = `
   background-color: #364141;
 }
 
+.c4 .Icon-svg {
+  color: #FFFFFF;
+}
+
 .c4:focus,
 .c4:hover {
   color: #364141;
   background-color: #f3f4f4;
 }
 
+.c4:focus .Icon-svg,
+.c4:hover .Icon-svg {
+  color: unset;
+}
+
 .c4:hover {
   cursor: pointer;
 }
@@ -535,7 +549,7 @@ exports[`Listbox AsListbox with checkboxes should match snapshot 1`] = `
 
 <div>
     <ul
-      aria-activedescendant="MenuItem-16"
+      aria-activedescendant="MenuItem-28"
       aria-multiselectable="true"
       class="c0 c1"
       overflow="hidden"
@@ -552,7 +566,7 @@ exports[`Listbox AsListbox with checkboxes should match snapshot 1`] = `
           class="c2 c4"
           data-qa-menu-item="Apple"
           data-value="Apple"
-          id="MenuItem-16"
+          id="MenuItem-28"
           role="menuitemcheckbox"
           tabindex="-1"
           value="Apple"
@@ -565,10 +579,10 @@ exports[`Listbox AsListbox with checkboxes should match snapshot 1`] = `
               class="c5"
             >
               <input
-                data-qa-checkbox="Checkbox-MenuItem-16"
+                data-qa-checkbox="Checkbox-MenuItem-28"
                 data-qa-checkbox-ischecked="false"
                 data-qa-checkbox-isdisabled="false"
-                id="Checkbox-MenuItem-16"
+                id="Checkbox-MenuItem-28"
                 tabindex="-1"
                 type="checkbox"
                 value=""
@@ -586,7 +600,7 @@ exports[`Listbox AsListbox with checkboxes should match snapshot 1`] = `
           class="c2 c6"
           data-qa-menu-item="Banana"
           data-value="Banana"
-          id="MenuItem-17"
+          id="MenuItem-29"
           role="menuitemcheckbox"
           tabindex="-1"
           value="Banana"
@@ -599,10 +613,10 @@ exports[`Listbox AsListbox with checkboxes should match snapshot 1`] = `
               class="c5"
             >
               <input
-                data-qa-checkbox="Checkbox-MenuItem-17"
+                data-qa-checkbox="Checkbox-MenuItem-29"
                 data-qa-checkbox-ischecked="false"
                 data-qa-checkbox-isdisabled="false"
-                id="Checkbox-MenuItem-17"
+                id="Checkbox-MenuItem-29"
                 tabindex="-1"
                 type="checkbox"
                 value=""
@@ -620,7 +634,7 @@ exports[`Listbox AsListbox with checkboxes should match snapshot 1`] = `
           class="c2 c6"
           data-qa-menu-item="Orange"
           data-value="Orange"
-          id="MenuItem-18"
+          id="MenuItem-30"
           role="menuitemcheckbox"
           tabindex="-1"
           value="Orange"
@@ -633,10 +647,10 @@ exports[`Listbox AsListbox with checkboxes should match snapshot 1`] = `
               class="c5"
             >
               <input
-                data-qa-checkbox="Checkbox-MenuItem-18"
+                data-qa-checkbox="Checkbox-MenuItem-30"
                 data-qa-checkbox-ischecked="false"
                 data-qa-checkbox-isdisabled="false"
-                id="Checkbox-MenuItem-18"
+                id="Checkbox-MenuItem-30"
                 tabindex="-1"
                 type="checkbox"
                 value=""
@@ -694,6 +708,11 @@ exports[`Listbox AsListbox with filter input should match snapshot 1`] = `
   background-color: #f3f4f4;
 }
 
+.c7:focus .Icon-svg,
+.c7:hover .Icon-svg {
+  color: unset;
+}
+
 .c7:hover {
   cursor: pointer;
 }
@@ -717,12 +736,21 @@ exports[`Listbox AsListbox with filter input should match snapshot 1`] = `
   background-color: #364141;
 }
 
+.c5 .Icon-svg {
+  color: #FFFFFF;
+}
+
 .c5:focus,
 .c5:hover {
   color: #364141;
   background-color: #f3f4f4;
 }
 
+.c5:focus .Icon-svg,
+.c5:hover .Icon-svg {
+  color: unset;
+}
+
 .c5:hover {
   cursor: pointer;
 }
@@ -873,7 +901,7 @@ exports[`Listbox AsListbox with filter input should match snapshot 1`] = `
 
 <div>
     <ul
-      aria-activedescendant="MenuItem-22"
+      aria-activedescendant="MenuItem-34"
       aria-multiselectable="true"
       class="c0 c1"
       overflow="hidden"
@@ -906,7 +934,7 @@ exports[`Listbox AsListbox with filter input should match snapshot 1`] = `
           class="c2 c5"
           data-qa-menu-item="Apple"
           data-value="Apple"
-          id="MenuItem-22"
+          id="MenuItem-34"
           role="menuitemcheckbox"
           tabindex="-1"
           value="Apple"
@@ -919,10 +947,10 @@ exports[`Listbox AsListbox with filter input should match snapshot 1`] = `
               class="c6"
             >
               <input
-                data-qa-checkbox="Checkbox-MenuItem-22"
+                data-qa-checkbox="Checkbox-MenuItem-34"
                 data-qa-checkbox-ischecked="false"
                 data-qa-checkbox-isdisabled="false"
-                id="Checkbox-MenuItem-22"
+                id="Checkbox-MenuItem-34"
                 tabindex="-1"
                 type="checkbox"
                 value=""
@@ -940,7 +968,7 @@ exports[`Listbox AsListbox with filter input should match snapshot 1`] = `
           class="c2 c7"
           data-qa-menu-item="Banana"
           data-value="Banana"
-          id="MenuItem-23"
+          id="MenuItem-35"
           role="menuitemcheckbox"
           tabindex="-1"
           value="Banana"
@@ -953,10 +981,10 @@ exports[`Listbox AsListbox with filter input should match snapshot 1`] = `
               class="c6"
             >
               <input
-                data-qa-checkbox="Checkbox-MenuItem-23"
+                data-qa-checkbox="Checkbox-MenuItem-35"
                 data-qa-checkbox-ischecked="false"
                 data-qa-checkbox-isdisabled="false"
-                id="Checkbox-MenuItem-23"
+                id="Checkbox-MenuItem-35"
                 tabindex="-1"
                 type="checkbox"
                 value=""
@@ -974,7 +1002,7 @@ exports[`Listbox AsListbox with filter input should match snapshot 1`] = `
           class="c2 c7"
           data-qa-menu-item="Orange"
           data-value="Orange"
-          id="MenuItem-24"
+          id="MenuItem-36"
           role="menuitemcheckbox"
           tabindex="-1"
           value="Orange"
@@ -987,10 +1015,10 @@ exports[`Listbox AsListbox with filter input should match snapshot 1`] = `
               class="c6"
             >
               <input
-                data-qa-checkbox="Checkbox-MenuItem-24"
+                data-qa-checkbox="Checkbox-MenuItem-36"
                 data-qa-checkbox-ischecked="false"
                 data-qa-checkbox-isdisabled="false"
-                id="Checkbox-MenuItem-24"
+                id="Checkbox-MenuItem-36"
                 tabindex="-1"
                 type="checkbox"
                 value=""
@@ -1008,7 +1036,7 @@ exports[`Listbox AsListbox with filter input should match snapshot 1`] = `
           class="c2 c7"
           data-qa-menu-item="Tomato"
           data-value="Tomato"
-          id="MenuItem-25"
+          id="MenuItem-37"
           role="menuitemcheckbox"
           tabindex="-1"
           value="Tomato"
@@ -1021,10 +1049,10 @@ exports[`Listbox AsListbox with filter input should match snapshot 1`] = `
               class="c6"
             >
               <input
-                data-qa-checkbox="Checkbox-MenuItem-25"
+                data-qa-checkbox="Checkbox-MenuItem-37"
                 data-qa-checkbox-ischecked="false"
                 data-qa-checkbox-isdisabled="false"
-                id="Checkbox-MenuItem-25"
+                id="Checkbox-MenuItem-37"
                 tabindex="-1"
                 type="checkbox"
                 value=""
@@ -1042,7 +1070,7 @@ exports[`Listbox AsListbox with filter input should match snapshot 1`] = `
           class="c2 c7"
           data-qa-menu-item="Cucumber"
           data-value="Cucumber"
-          id="MenuItem-26"
+          id="MenuItem-38"
           role="menuitemcheckbox"
           tabindex="-1"
           value="Cucumber"
@@ -1055,10 +1083,10 @@ exports[`Listbox AsListbox with filter input should match snapshot 1`] = `
               class="c6"
             >
               <input
-                data-qa-checkbox="Checkbox-MenuItem-26"
+                data-qa-checkbox="Checkbox-MenuItem-38"
                 data-qa-checkbox-ischecked="false"
                 data-qa-checkbox-isdisabled="false"
-                id="Checkbox-MenuItem-26"
+                id="Checkbox-MenuItem-38"
                 tabindex="-1"
                 type="checkbox"
                 value=""
@@ -1076,7 +1104,7 @@ exports[`Listbox AsListbox with filter input should match snapshot 1`] = `
           class="c2 c7"
           data-qa-menu-item="Squash"
           data-value="Squash"
-          id="MenuItem-27"
+          id="MenuItem-39"
           role="menuitemcheckbox"
           tabindex="-1"
           value="Squash"
@@ -1089,10 +1117,10 @@ exports[`Listbox AsListbox with filter input should match snapshot 1`] = `
               class="c6"
             >
               <input
-                data-qa-checkbox="Checkbox-MenuItem-27"
+                data-qa-checkbox="Checkbox-MenuItem-39"
                 data-qa-checkbox-ischecked="false"
                 data-qa-checkbox-isdisabled="false"
-                id="Checkbox-MenuItem-27"
+                id="Checkbox-MenuItem-39"
                 tabindex="-1"
                 type="checkbox"
                 value=""
@@ -1110,7 +1138,7 @@ exports[`Listbox AsListbox with filter input should match snapshot 1`] = `
           class="c2 c7"
           data-qa-menu-item="Cantaloupe"
           data-value="Cantaloupe"
-          id="MenuItem-28"
+          id="MenuItem-40"
           role="menuitemcheckbox"
           tabindex="-1"
           value="Cantaloupe"
@@ -1123,10 +1151,10 @@ exports[`Listbox AsListbox with filter input should match snapshot 1`] = `
               class="c6"
             >
               <input
-                data-qa-checkbox="Checkbox-MenuItem-28"
+                data-qa-checkbox="Checkbox-MenuItem-40"
                 data-qa-checkbox-ischecked="false"
                 data-qa-checkbox-isdisabled="false"
-                id="Checkbox-MenuItem-28"
+                id="Checkbox-MenuItem-40"
                 tabindex="-1"
                 type="checkbox"
                 value=""
@@ -1144,7 +1172,7 @@ exports[`Listbox AsListbox with filter input should match snapshot 1`] = `
           class="c2 c7"
           data-qa-menu-item="Jackalope"
           data-value="Jackalope"
-          id="MenuItem-29"
+          id="MenuItem-41"
           role="menuitemcheckbox"
           tabindex="-1"
           value="Jackalope"
@@ -1157,10 +1185,10 @@ exports[`Listbox AsListbox with filter input should match snapshot 1`] = `
               class="c6"
             >
               <input
-                data-qa-checkbox="Checkbox-MenuItem-29"
+                data-qa-checkbox="Checkbox-MenuItem-41"
                 data-qa-checkbox-ischecked="false"
                 data-qa-checkbox-isdisabled="false"
-                id="Checkbox-MenuItem-29"
+                id="Checkbox-MenuItem-41"
                 tabindex="-1"
                 type="checkbox"
                 value=""
@@ -1178,7 +1206,7 @@ exports[`Listbox AsListbox with filter input should match snapshot 1`] = `
           class="c2 c7"
           data-qa-menu-item="Lingonberry"
           data-value="Lingonberry"
-          id="MenuItem-30"
+          id="MenuItem-42"
           role="menuitemcheckbox"
           tabindex="-1"
           value="Lingonberry"
@@ -1191,10 +1219,10 @@ exports[`Listbox AsListbox with filter input should match snapshot 1`] = `
               class="c6"
             >
               <input
-                data-qa-checkbox="Checkbox-MenuItem-30"
+                data-qa-checkbox="Checkbox-MenuItem-42"
                 data-qa-checkbox-ischecked="false"
                 data-qa-checkbox-isdisabled="false"
-                id="Checkbox-MenuItem-30"
+                id="Checkbox-MenuItem-42"
                 tabindex="-1"
                 type="checkbox"
                 value=""
@@ -1212,7 +1240,7 @@ exports[`Listbox AsListbox with filter input should match snapshot 1`] = `
           class="c2 c7"
           data-qa-menu-item="Dingleberry"
           data-value="Dingleberry"
-          id="MenuItem-31"
+          id="MenuItem-43"
           role="menuitemcheckbox"
           tabindex="-1"
           value="Dingleberry"
@@ -1225,10 +1253,10 @@ exports[`Listbox AsListbox with filter input should match snapshot 1`] = `
               class="c6"
             >
               <input
-                data-qa-checkbox="Checkbox-MenuItem-31"
+                data-qa-checkbox="Checkbox-MenuItem-43"
                 data-qa-checkbox-ischecked="false"
                 data-qa-checkbox-isdisabled="false"
-                id="Checkbox-MenuItem-31"
+                id="Checkbox-MenuItem-43"
                 tabindex="-1"
                 type="checkbox"
                 value=""
@@ -1241,6 +1269,40 @@ exports[`Listbox AsListbox with filter input should match snapshot 1`] = `
             </div>
           </div>
         </li>
+        <li
+          aria-checked="false"
+          class="c2 c7"
+          data-qa-menu-item="Kaffir Lime"
+          data-value="Kaffir Lime"
+          id="MenuItem-44"
+          role="menuitemcheckbox"
+          tabindex="-1"
+          value="Kaffir Lime"
+        >
+          <div
+            style="display: flex; align-items: center; justify-content: space-between;"
+          >
+            <span
+              aria-hidden="true"
+              class="c6"
+            >
+              <input
+                data-qa-checkbox="Checkbox-MenuItem-44"
+                data-qa-checkbox-ischecked="false"
+                data-qa-checkbox-isdisabled="false"
+                id="Checkbox-MenuItem-44"
+                tabindex="-1"
+                type="checkbox"
+                value=""
+              />
+            </span>
+            <div
+              style="flex-grow: 1; word-break: break-word; min-width: 0;"
+            >
+              Kaffir Lime
+            </div>
+          </div>
+        </li>
       </div>
     </ul>
   </div>

package/__flow__/Listbox/index.stories.js

@@ -196,3 +196,36 @@ export const BigVirtualizedExample = () => {
     </Box>
   );
 };
+
+const ListboxFilterInput = () => {
+  const { value, onChange } = useSelect({ initialValue: null });
+  const { inputValue } = useSelect({ initialValue: null });
+  return (
+    <>
+      <Text>{inputValue}</Text>
+      <ListboxButton
+        minWidth="200px"
+        aria-label="Favorite fruit"
+        content={
+          <Listbox onChange={onChange} value={value} width="200px">
+            <Listbox.Group>
+              <Listbox.FilterInput placeholder="Filter items" mb={300} />
+              <Listbox.Item value="Apple">Apple</Listbox.Item>
+              <Listbox.Item value="Orange">Orange</Listbox.Item>
+              <Listbox.Item value="Banana">Banana</Listbox.Item>
+              <Listbox.Item value="Kaffir Lime">Kaffir Lime</Listbox.Item>
+            </Listbox.Group>
+          </Listbox>
+        }
+      >
+        {value || "Select a fruit"}
+      </ListboxButton>
+    </>
+  );
+};
+
+export const FilterInput = () => <ListboxFilterInput />;
+
+FilterInput.story = {
+  name: "FilterInput",
+};

package/__flow__/Listbox/index.test.js

@@ -1,5 +1,10 @@
 import React from "react";
-import { render, fireEvent, cleanup } from "../utils/react-testing-library";
+import {
+  render,
+  fireEvent,
+  cleanup,
+  userEvent,
+} from "../utils/react-testing-library";
 import Listbox, { ListboxButton } from "./";
 import { useSelect, useMultiselect } from "../utils/hooks";
 import { MENU_ITEM_ROLES } from "../Menu/constants";
@@ -16,6 +21,7 @@ const lotsOfFruit = [
   "Jackalope",
   "Lingonberry",
   "Dingleberry",
+  "Kaffir Lime",
 ];
 const mockOnClick = jest.fn();
 
@@ -182,6 +188,26 @@ describe("Listbox", () => {
       expect(await findByText(fruit[1])).toBeInTheDocument();
       expect(mockOnClick).toHaveBeenCalledTimes(1);
     });
+
+    it("should trigger select on enter", async () => {
+      const { findByText, queryByLabelText } = render(<AsListbox />);
+      const button = queryByLabelText(/Select a fruit/);
+
+      fireEvent.click(button);
+      userEvent.keyboard("{enter}");
+      expect(await findByText(fruit[0])).toBeInTheDocument();
+      expect(mockOnClick).toHaveBeenCalledTimes(1);
+    });
+
+    it("should trigger select on space", async () => {
+      const { findByText, queryByLabelText } = render(<AsListbox />);
+      const button = queryByLabelText(/Select a fruit/);
+
+      fireEvent.click(button);
+      userEvent.keyboard("{space}");
+      expect(await findByText(fruit[0])).toBeInTheDocument();
+      expect(mockOnClick).toHaveBeenCalledTimes(1);
+    });
   });
 
   describe("AsListbox multiselect", () => {
@@ -252,9 +278,33 @@ describe("Listbox", () => {
         <AsListboxWithFilterInput />
       );
       const input = queryByLabelText("Search fruit...");
-      expect(queryAllByRole("menuitemcheckbox")).toHaveLength(10);
+      expect(queryAllByRole("menuitemcheckbox")).toHaveLength(11);
       fireEvent.change(input, { target: { value: "berry" } });
       expect(queryAllByRole("menuitemcheckbox")).toHaveLength(2);
     });
+
+    it("should allow spaces to be typed in the input", async () => {
+      const { queryByLabelText, queryAllByRole } = render(
+        <AsListboxWithFilterInput />
+      );
+
+      const input = queryByLabelText("Search fruit...");
+      userEvent.type(input, "Kaffir{space}L");
+      expect(queryAllByRole("menuitemcheckbox")).toHaveLength(1);
+    });
+
+    it("should trigger a submit on space if the input is not focused", async () => {
+      const { queryByRole } = render(<AsListboxWithFilterInput />);
+
+      // tab focus away from input
+      userEvent.tab();
+      userEvent.keyboard("{space}");
+      const firstItem = queryByRole(MENU_ITEM_ROLES.CHECKBOX, {
+        name: fruit[0],
+      });
+
+      expect(firstItem).toHaveAttribute("aria-checked", "true");
+      expect(mockOnClick).toHaveBeenCalledTimes(1);
+    });
   });
 });

package/__flow__/Menu/__snapshots__/index.test.js.snap

@@ -47,6 +47,11 @@ exports[`Menu AsMenu should match snapshot 1`] = `
   background-color: #f3f4f4;
 }
 
+.c7:focus .Icon-svg,
+.c7:hover .Icon-svg {
+  color: unset;
+}
+
 .c7:hover {
   cursor: pointer;
 }
@@ -70,12 +75,21 @@ exports[`Menu AsMenu should match snapshot 1`] = `
   background-color: #364141;
 }
 
+.c6 .Icon-svg {
+  color: #FFFFFF;
+}
+
 .c6:focus,
 .c6:hover {
   color: #364141;
   background-color: #f3f4f4;
 }
 
+.c6:focus .Icon-svg,
+.c6:hover .Icon-svg {
+  color: unset;
+}
+
 .c6:hover {
   cursor: pointer;
 }

package/__flow__/Menu/hooks.js

@@ -24,6 +24,7 @@ export const MenuContext = createContext<TypeMenuContext>({
     selectionIndex: 0,
     filterQuery: "",
     filteredItems: null,
+    isFilterInputFocused: false,
   },
   setState: () => {},
   selectCallbacks: {
@@ -75,7 +76,7 @@ export function useMenuKeyDown() {
     selectCallbacks,
     setState,
     multiselect,
-    state: { filterQuery, selectionIndex, filteredItems },
+    state: { filterQuery, selectionIndex, filteredItems, isFilterInputFocused },
   } = useContext(MenuContext);
   const { closePopout, closeOnItemClick } = useContext(MenuButtonContext);
   const { descendants: items } = useContext(MenuDescendantContext);
@@ -142,10 +143,14 @@ export function useMenuKeyDown() {
     handleKeyDown: wrapEvent<SyntheticKeyboardEvent<>>(
       function (event) {
         const { key } = event;
-
         switch (key) {
-          case "Enter":
           case " ":
+            if (isFilterInputFocused) {
+              return;
+            }
+          // falls through
+          // eslint-disable-next-line no-fallthrough
+          case "Enter":
             const selected = items[selectionIndex];
 
             if (selected) {

package/__flow__/Menu/index.flow.js

@@ -12,6 +12,7 @@ export type TypeMenuState = {|
   selectionIndex: number,
   filterQuery: string,
   filteredItems: ?(number[]),
+  isFilterInputFocused: boolean,
 |};
 
 export type TypeMenuSharedProps = {|

package/__flow__/Menu/index.js

@@ -308,14 +308,40 @@ export const MenuDivider = (props: any) => (
 );
 
 const MenuFilterInput = (props: React$ElementConfig<typeof Input>) => {
+  const { onChange, onFocus, onBlur } = props;
   const { state, setState } = useContext(MenuContext);
-  const updateFilterQuery = useCallback(
-    (event) => setState({ filterQuery: event.currentTarget.value }),
-    [setState]
+  const handleOnChange = useCallback(
+    (event, value) => {
+      onChange && onChange(event, value);
+      setState({ filterQuery: value });
+    },
+    [setState, onChange]
+  );
+
+  const handleOnFocus = useCallback(
+    (event) => {
+      onFocus && onFocus(event);
+      setState({ isFilterInputFocused: true });
+    },
+    [setState, onFocus]
+  );
+
+  const handleOnBlur = useCallback(
+    (event) => {
+      onBlur && onBlur(event);
+      setState({ isFilterInputFocused: false });
+    },
+    [setState, onBlur]
   );
 
   return (
-    <Input {...props} value={state.filterQuery} onChange={updateFilterQuery} />
+    <Input
+      {...props}
+      value={state.filterQuery}
+      onChange={handleOnChange}
+      onFocus={handleOnFocus}
+      onBlur={handleOnBlur}
+    />
   );
 };
 
@@ -364,6 +390,7 @@ export const Menu = ({
     selectionIndex: 0,
     filterQuery: "",
     filteredItems: null,
+    isFilterInputFocused: false,
   });
   const selectCallbacks = useRef<(?(() => void))[]>([]);
   const menuRef = useRef(null);

package/__flow__/Menu/index.stories.js

@@ -5,6 +5,7 @@ import OverflowList from "../OverflowList";
 import Icon from "../Icon";
 import { names } from "./names";
 import Text from "../Text";
+import Box from "../Box";
 
 const fruit = ["Apple", "Banana", "Orange"];
 const maybeFruit = ["Tomato", "Cucumber", "Squash"];
@@ -203,3 +204,32 @@ export const MenuWithCheckboxes = (props) => {
     </Menu>
   );
 };
+
+// Specifically testing that icons with a color inverse when active like the text does.
+export const MenuWithIcons = (props) => {
+  return (
+    <Box
+      width="200px"
+      border={500}
+      borderRadius="outer"
+      borderColor="container.border.base"
+      boxShadow={300}
+      backgroundColor="container.background.base"
+    >
+      <Menu {...props}>
+        <Menu.Item key="positive" onClick={() => alert("positive")}>
+          <Icon name="flat-positive-sentiment" mr={200} color="icon.info" />
+          Positive
+        </Menu.Item>
+        <Menu.Item key="negative" onClick={() => alert("negative")}>
+          <Icon name="flat-negative-sentiment" mr={200} color="icon.error" />
+          Negative
+        </Menu.Item>
+        <Menu.Item key="neutral" onClick={() => alert("neutral")}>
+          <Icon name="flat-neutral-sentiment" mr={200} />
+          Neutral
+        </Menu.Item>
+      </Menu>
+    </Box>
+  );
+};

package/__flow__/Menu/styles.js

@@ -41,6 +41,10 @@ export const MenuItemContainer = styled<
     css`
       color: ${(props) => props.theme.colors.text.inverse};
       background-color: ${props.theme.colors.listItem.background.selected};
+
+      .Icon-svg {
+        color: ${(props) => props.theme.colors.text.inverse};
+      }
     `}
 
   ${(props) =>
@@ -58,6 +62,10 @@ export const MenuItemContainer = styled<
         color: ${(props) => props.theme.colors.text.body};
         background-color: ${(props) =>
           props.theme.colors.listItem.background.hover};
+
+        .Icon-svg {
+          color: unset;
+        }
       }
     `}
 

package/commonjs/Collapsible/index.js

@@ -118,6 +118,7 @@ var Panel = function Panel(_ref3) {
     }
   }, [isOpen]);
   return /*#__PURE__*/React.createElement(_styles.CollapsingBox, _extends({
+    hasShadow: collapsedHeight || openHeight > 0,
     scrollable: isOpen,
     maxHeight: isOpen ? maxHeight : collapsedHeight,
     minHeight: collapsedHeight,

package/commonjs/Collapsible/styles.js

@@ -12,16 +12,14 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 var CollapsingBox = (0, _styledComponents.default)(_Box.default).withConfig({
   displayName: "styles__CollapsingBox",
   componentId: "sc-1xvfbl7-0"
-})(["transition:max-height ", " ", ";will-change:max-height;position:relative;overflow:auto;background:linear-gradient( ", " 30%,rgba(255,255,255,0) ),linear-gradient( rgba(255,255,255,0),", " 70% ) 0 100%,radial-gradient( farthest-side at 50% 0,rgb(39 51 51 / 5%),rgba(0,0,0,0) ),radial-gradient( farthest-side at 50% 100%,rgb(39 51 51 / 5%),rgba(0,0,0,0) ) 0 100%;background-repeat:no-repeat;background-size:100% 40px,100% 40px,100% 14px,100% 14px;background-attachment:local,local,scroll,scroll;", ";"], function (p) {
+})(["transition:max-height ", " ", ";will-change:max-height;position:relative;overflow:auto;", ""], function (p) {
   return p.theme.duration.medium;
 }, function (p) {
   return p.theme.easing.ease_inout;
-}, function (p) {
-  return p.theme.colors.neutral[100];
-}, function (p) {
-  return p.theme.colors.neutral[100];
 }, function (_ref) {
-  var scrollable = _ref.scrollable;
-  return scrollable ? "overflow: auto" : "overflow: hidden";
+  var hasShadow = _ref.hasShadow,
+      theme = _ref.theme,
+      scrollable = _ref.scrollable;
+  return hasShadow ? "background:  /* Shadow covers */ linear-gradient(\n        transparent 30%,\n        rgba(255, 255, 255, 0)\n      ),\n      linear-gradient(rgba(255, 255, 255, 0), transparent 70%) 0 100%,\n      /* Shadows */\n        radial-gradient(\n          farthest-side at 50% 0,\n          rgb(39 51 51 / 5%),\n          rgba(0, 0, 0, 0)\n        ),\n      radial-gradient(\n          farthest-side at 50% 100%,\n          rgb(39 51 51 / 5%),\n          rgba(0, 0, 0, 0)\n        )\n        0 100%;\n    background-repeat: no-repeat;\n    background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;\n    background-attachment: local, local, scroll, scroll;\n    " + (scrollable ? "overflow: auto" : "overflow: hidden") + ";" : "";
 });
 exports.CollapsingBox = CollapsingBox;

package/commonjs/Menu/hooks.js

@@ -25,7 +25,8 @@ var MenuContext = /*#__PURE__*/(0, _react.createContext)({
   state: {
     selectionIndex: 0,
     filterQuery: "",
-    filteredItems: null
+    filteredItems: null,
+    isFilterInputFocused: false
   },
   setState: function setState() {},
   selectCallbacks: {
@@ -75,7 +76,8 @@ function useMenuKeyDown() {
       _useContext$state = _useContext.state,
       filterQuery = _useContext$state.filterQuery,
       selectionIndex = _useContext$state.selectionIndex,
-      filteredItems = _useContext$state.filteredItems;
+      filteredItems = _useContext$state.filteredItems,
+      isFilterInputFocused = _useContext$state.isFilterInputFocused;
 
   var _useContext2 = (0, _react.useContext)(MenuButtonContext),
       closePopout = _useContext2.closePopout,
@@ -134,8 +136,15 @@ function useMenuKeyDown() {
       var key = event.key;
 
       switch (key) {
-        case "Enter":
         case " ":
+          if (isFilterInputFocused) {
+            return;
+          }
+
+        // falls through
+        // eslint-disable-next-line no-fallthrough
+
+        case "Enter":
           var selected = items[selectionIndex];
 
           if (selected) {

package/commonjs/Menu/index.js

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

package/commonjs/Menu/styles.js

@@ -35,15 +35,17 @@ var MenuItemContainer = (0, _styledComponents.default)(_Box.default).withConfig(
 }, function (props) {
   return (0, _styledComponents.css)(["", ";"], props.theme.typography[200]);
 }, function (props) {
-  return props.active && !props.disabled && (0, _styledComponents.css)(["color:", ";background-color:", ";"], function (props) {
+  return props.active && !props.disabled && (0, _styledComponents.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 && (0, _styledComponents.css)(["font-weight:", ";"], function (props) {
     return props.theme.fontWeights.semibold;
   });
 }, function (props) {
-  return !props.disabled && (0, _styledComponents.css)(["&:focus,&:hover{color:", ";background-color:", ";}"], function (props) {
+  return !props.disabled && (0, _styledComponents.css)(["&:focus,&:hover{color:", ";background-color:", ";.Icon-svg{color:unset;}}"], function (props) {
     return props.theme.colors.text.body;
   }, function (props) {
     return props.theme.colors.listItem.background.hover;

package/lib/Collapsible/index.js

@@ -104,6 +104,7 @@ var Panel = function Panel(_ref3) {
     }
   }, [isOpen]);
   return /*#__PURE__*/React.createElement(CollapsingBox, _extends({
+    hasShadow: collapsedHeight || openHeight > 0,
     scrollable: isOpen,
     maxHeight: isOpen ? maxHeight : collapsedHeight,
     minHeight: collapsedHeight,

package/lib/Collapsible/styles.js

@@ -3,15 +3,13 @@ import Box from "../Box";
 export var CollapsingBox = styled(Box).withConfig({
   displayName: "styles__CollapsingBox",
   componentId: "sc-1xvfbl7-0"
-})(["transition:max-height ", " ", ";will-change:max-height;position:relative;overflow:auto;background:linear-gradient( ", " 30%,rgba(255,255,255,0) ),linear-gradient( rgba(255,255,255,0),", " 70% ) 0 100%,radial-gradient( farthest-side at 50% 0,rgb(39 51 51 / 5%),rgba(0,0,0,0) ),radial-gradient( farthest-side at 50% 100%,rgb(39 51 51 / 5%),rgba(0,0,0,0) ) 0 100%;background-repeat:no-repeat;background-size:100% 40px,100% 40px,100% 14px,100% 14px;background-attachment:local,local,scroll,scroll;", ";"], function (p) {
+})(["transition:max-height ", " ", ";will-change:max-height;position:relative;overflow:auto;", ""], function (p) {
   return p.theme.duration.medium;
 }, function (p) {
   return p.theme.easing.ease_inout;
-}, function (p) {
-  return p.theme.colors.neutral[100];
-}, function (p) {
-  return p.theme.colors.neutral[100];
 }, function (_ref) {
-  var scrollable = _ref.scrollable;
-  return scrollable ? "overflow: auto" : "overflow: hidden";
+  var hasShadow = _ref.hasShadow,
+      theme = _ref.theme,
+      scrollable = _ref.scrollable;
+  return hasShadow ? "background:  /* Shadow covers */ linear-gradient(\n        transparent 30%,\n        rgba(255, 255, 255, 0)\n      ),\n      linear-gradient(rgba(255, 255, 255, 0), transparent 70%) 0 100%,\n      /* Shadows */\n        radial-gradient(\n          farthest-side at 50% 0,\n          rgb(39 51 51 / 5%),\n          rgba(0, 0, 0, 0)\n        ),\n      radial-gradient(\n          farthest-side at 50% 100%,\n          rgb(39 51 51 / 5%),\n          rgba(0, 0, 0, 0)\n        )\n        0 100%;\n    background-repeat: no-repeat;\n    background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;\n    background-attachment: local, local, scroll, scroll;\n    " + (scrollable ? "overflow: auto" : "overflow: hidden") + ";" : "";
 });

package/lib/Menu/hooks.js

@@ -13,7 +13,8 @@ export var MenuContext = /*#__PURE__*/createContext({
   state: {
     selectionIndex: 0,
     filterQuery: "",
-    filteredItems: null
+    filteredItems: null,
+    isFilterInputFocused: false
   },
   setState: function setState() {},
   selectCallbacks: {
@@ -59,7 +60,8 @@ export function useMenuKeyDown() {
       _useContext$state = _useContext.state,
       filterQuery = _useContext$state.filterQuery,
       selectionIndex = _useContext$state.selectionIndex,
-      filteredItems = _useContext$state.filteredItems;
+      filteredItems = _useContext$state.filteredItems,
+      isFilterInputFocused = _useContext$state.isFilterInputFocused;
 
   var _useContext2 = useContext(MenuButtonContext),
       closePopout = _useContext2.closePopout,
@@ -118,8 +120,15 @@ export function useMenuKeyDown() {
       var key = event.key;
 
       switch (key) {
-        case "Enter":
         case " ":
+          if (isFilterInputFocused) {
+            return;
+          }
+
+        // falls through
+        // eslint-disable-next-line no-fallthrough
+
+        case "Enter":
           var selected = items[selectionIndex];
 
           if (selected) {

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,15 +21,17 @@ 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;
   });
 }, function (props) {
-  return !props.disabled && css(["&:focus,&:hover{color:", ";background-color:", ";}"], function (props) {
+  return !props.disabled && css(["&:focus,&:hover{color:", ";background-color:", ";.Icon-svg{color:unset;}}"], function (props) {
     return props.theme.colors.text.body;
   }, function (props) {
     return props.theme.colors.listItem.background.hover;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/racine",
-  "version": "8.6.0",
+  "version": "8.6.3",
   "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",