@sproutsocial/racine 12.19.0 → 12.21.0

package/__flow__/Menu/hooks.js

@@ -1,16 +1,16 @@
 // @flow
-import { createContext, useContext, useEffect } from "react";
-import scrollIntoViewIfNeeded from "scroll-into-view-if-needed";
-import { MENU_ROLES } from "./constants";
+import {createContext, useContext, useEffect} from 'react';
+import scrollIntoViewIfNeeded from 'scroll-into-view-if-needed';
+import {MENU_ROLES} from './constants';
 import {
   createDescendantContext,
   useDescendantKeyDown,
   usePrevious,
   wrapEvent,
-} from "./descendants";
+} from './descendants';
 
-import type { TypeDescendant } from "./descendants";
-import type { TypeMenuButtonContext, TypeMenuContext } from "./index.flow";
+import type {TypeDescendant} from './descendants';
+import type {TypeMenuButtonContext, TypeMenuContext} from './index.flow';
 
 export const MenuContext = createContext<TypeMenuContext>({
   role: MENU_ROLES.MENU,
@@ -22,7 +22,7 @@ export const MenuContext = createContext<TypeMenuContext>({
   onChange: undefined,
   state: {
     selectionIndex: 0,
-    filterQuery: "",
+    filterQuery: '',
     filteredItems: null,
     isFilterInputFocused: false,
   },
@@ -46,7 +46,7 @@ export type TypeMenuDescendantProps = {|
 export const MenuDescendantContext = createDescendantContext<
   HTMLElement,
   TypeMenuDescendantProps
->("MenuDescendantContext");
+>('MenuDescendantContext');
 
 /**
  * When a user's typed input matches the string displayed in a menu item, it is
@@ -55,7 +55,7 @@ export const MenuDescendantContext = createDescendantContext<
  */
 function filterItemsFromTypeahead(
   items: TypeDescendant<HTMLElement, TypeMenuDescendantProps>[],
-  string: string = ""
+  string: string = ''
 ) {
   if (!string) {
     return null;
@@ -63,11 +63,11 @@ function filterItemsFromTypeahead(
 
   return items
     .filter(
-      ({ value, label }) =>
+      ({value, label}) =>
         value?.toLowerCase().includes(string.toLocaleLowerCase()) ||
         label?.toLowerCase().includes(string.toLocaleLowerCase())
     )
-    .map(({ index }) => index);
+    .map(({index}) => index);
 }
 
 export function useMenuKeyDown() {
@@ -76,10 +76,10 @@ export function useMenuKeyDown() {
     selectCallbacks,
     setState,
     multiselect,
-    state: { filterQuery, selectionIndex, filteredItems, isFilterInputFocused },
+    state: {filterQuery, selectionIndex, filteredItems, isFilterInputFocused},
   } = useContext(MenuContext);
-  const { closePopout, closeOnItemClick } = useContext(MenuButtonContext);
-  const { descendants: items } = useContext(MenuDescendantContext);
+  const {closePopout, closeOnItemClick} = useContext(MenuButtonContext);
+  const {descendants: items} = useContext(MenuDescendantContext);
 
   const shouldClosePopout = closeOnItemClick && !multiselect;
   const prevMenuItemsLength = usePrevious(items.length);
@@ -132,25 +132,25 @@ export function useMenuKeyDown() {
         selectionIndex: newFilteredItems[0],
       });
     } else if (!filterQuery && filteredItems !== null) {
-      setState({ filteredItems: null });
+      setState({filteredItems: null});
     }
   }, [filterQuery, items, setState, filteredItems]);
 
-  const index = items.findIndex(({ index }) => index === selectionIndex);
+  const index = items.findIndex(({index}) => index === selectionIndex);
 
   return {
     activeDescendent: items[selectionIndex],
     handleKeyDown: wrapEvent<SyntheticKeyboardEvent<>>(
       function (event) {
-        const { key } = event;
+        const {key} = event;
         switch (key) {
-          case " ":
+          case ' ':
             if (isFilterInputFocused) {
               return;
             }
           // falls through
           // eslint-disable-next-line no-fallthrough
-          case "Enter":
+          case 'Enter':
             const selected = items[selectionIndex];
 
             if (selected) {
@@ -168,8 +168,8 @@ export function useMenuKeyDown() {
 
       useDescendantKeyDown(MenuDescendantContext, {
         currentIndex: index,
-        orientation: "vertical",
-        key: "option",
+        orientation: 'vertical',
+        key: 'option',
         rotate: true,
         filter: (option) =>
           !option.disabled &&
@@ -177,7 +177,7 @@ export function useMenuKeyDown() {
         // $FlowIssue
         callback(item: TypeDescendant<HTMLElement, TypeMenuDescendantProps>) {
           item.element && scrollIntoViewIfNeeded(item.element);
-          setState({ selectionIndex: item.index });
+          setState({selectionIndex: item.index});
         },
       })
     ),

package/__flow__/Menu/index.flow.js

@@ -1,9 +1,9 @@
 // @flow
-import * as React from "react";
-import Box from "../Box";
-import Button from "../Button";
-import Popout, { type EnumPlacements } from "../Popout";
-import { MENU_ITEM_ROLES, MENU_ROLES } from "./constants";
+import * as React from 'react';
+import Box from '../Box';
+import Button from '../Button';
+import Popout, {type EnumPlacements} from '../Popout';
+import {MENU_ITEM_ROLES, MENU_ROLES} from './constants';
 
 export type TypeMenuRoles = $Values<typeof MENU_ROLES>;
 export type TypeMenuItemRoles = $Values<typeof MENU_ITEM_ROLES>;
@@ -43,7 +43,7 @@ export type TypeMenuProps = {
 
 export type TypeListboxProps = {
   ...TypeMenuProps,
-  role?: "listbox",
+  role?: 'listbox',
 };
 
 export type TypeMenuItemProps = {
@@ -62,7 +62,7 @@ export type TypeMenuItemProps = {
   elemAfter?: React.Node,
   elemBefore?: React.Node,
   as?: string,
-  "data-qa-menu-item"?: string,
+  'data-qa-menu-item'?: string,
   alignItems?: string,
 };
 
@@ -72,7 +72,7 @@ export type TypeMenuGroupProps = {
   title?: React.Node,
   titleAs?: string,
   /** Use the flush appearance if you're using the menu outside of a popout */
-  appearance?: "default" | "flush",
+  appearance?: 'default' | 'flush',
   disabled?: boolean,
 };
 
@@ -85,8 +85,8 @@ export type TypeMenuButtonProps = {
   ...$Exact<React.ElementConfig<typeof Button>>,
   ...TypeMenuButtonContext,
   id?: string,
-  "aria-labelledby"?: string,
-  "aria-label"?: string,
+  'aria-labelledby'?: string,
+  'aria-label'?: string,
   content: React.Node,
   popoutProps?: $Shape<React.ElementConfig<typeof Popout>>,
   placement?: EnumPlacements,
@@ -95,9 +95,9 @@ export type TypeMenuButtonProps = {
 export type TypeListboxButtonProps = {
   ...$Exact<React.ElementConfig<typeof Button>>,
   ...TypeMenuButtonContext,
-  size?: "large" | "default" | "small",
+  size?: 'large' | 'default' | 'small',
   content: React.Node,
   popoutProps?: $Shape<React.ElementConfig<typeof Popout>>,
-  "aria-label"?: string,
-  "aria-labelledby"?: string,
+  'aria-label'?: string,
+  'aria-labelledby'?: string,
 };

package/__flow__/Menu/index.js

@@ -1,6 +1,6 @@
 // @flow
-import * as React from "react";
-import styled from "styled-components";
+import * as React from 'react';
+import styled from 'styled-components';
 import {
   useCallback,
   useContext,
@@ -8,21 +8,21 @@ import {
   useMemo,
   useRef,
   useState,
-} from "react";
-import uniqueId from "lodash.uniqueid";
-import { MenuItemContainer, MenuItemsContainer } from "./styles";
-import { MENU_ITEM_ROLES, MENU_ROLES } from "./constants";
-
-import Box from "../Box";
-import Button from "../Button";
-import Checkbox from "../Checkbox";
-import Icon from "../Icon";
-import Input from "../Input";
-import Popout from "../Popout";
-import Radio from "../Radio";
-import Text from "../Text";
-import { disabled } from "../utils/mixins";
-import innerText from "../utils/innerText";
+} from 'react';
+import uniqueId from 'lodash.uniqueid';
+import {MenuItemContainer, MenuItemsContainer} from './styles';
+import {MENU_ITEM_ROLES, MENU_ROLES} from './constants';
+
+import Box from '../Box';
+import Button from '../Button';
+import Checkbox from '../Checkbox';
+import Icon from '../Icon';
+import Input from '../Input';
+import Popout from '../Popout';
+import Radio from '../Radio';
+import Text from '../Text';
+import {disabled} from '../utils/mixins';
+import innerText from '../utils/innerText';
 
 import type {
   TypeMenuButtonProps,
@@ -31,20 +31,16 @@ import type {
   TypeMenuItemRoles,
   TypeMenuProps,
   TypeMenuRoles,
-} from "./index.flow";
-import { useTextContent } from "../utils/hooks";
-import {
-  DescendantProvider,
-  useDescendant,
-  useDescendants,
-} from "./descendants";
-import type { TypeMenuDescendantProps } from "./hooks";
+} from './index.flow';
+import {useTextContent} from '../utils/hooks';
+import {DescendantProvider, useDescendant, useDescendants} from './descendants';
+import type {TypeMenuDescendantProps} from './hooks';
 import {
   MenuButtonContext,
   MenuContext,
   MenuDescendantContext,
   useMenuKeyDown,
-} from "./hooks";
+} from './hooks';
 
 const noop = () => {};
 
@@ -63,7 +59,7 @@ const getMenuItemRole = (menuRole: ?TypeMenuRoles): TypeMenuItemRoles => {
 function isValueSelected(menuValue, value) {
   if (!menuValue) return false;
 
-  if (typeof menuValue === "string") {
+  if (typeof menuValue === 'string') {
     return Boolean(menuValue && value && menuValue === value);
   } else if (Array.isArray(menuValue)) {
     return menuValue.includes(value);
@@ -97,13 +93,13 @@ export const MenuItem = ({
     selectCallbacks,
     menuRef,
   } = useContext(MenuContext);
-  const { selectionIndex, filteredItems } = menuState;
-  const { closePopout, closeOnItemClick } = useContext(MenuButtonContext);
+  const {selectionIndex, filteredItems} = menuState;
+  const {closePopout, closeOnItemClick} = useContext(MenuButtonContext);
   const isSelected = selected || isValueSelected(value, valueProp);
   const shouldClosePopout = closeOnItemClick && !multiselect;
   const itemRole = roleProp || getMenuItemRole(menuRole);
-  const id = useMemo(() => idProp || uniqueId("MenuItem-"), [idProp]);
-  const textContent = useTextContent("");
+  const id = useMemo(() => idProp || uniqueId('MenuItem-'), [idProp]);
+  const textContent = useTextContent('');
   const label = labelProp || textContent.current;
   const ref = useRef<HTMLDivElement | null>(null);
   const index = useDescendant<HTMLElement, TypeMenuDescendantProps>(
@@ -143,7 +139,7 @@ export const MenuItem = ({
    */
   useEffect(() => {
     if (isCheckboxOrRadio && ref.current) {
-      const input = ref.current.querySelector("input");
+      const input = ref.current.querySelector('input');
       if (input) {
         input.tabIndex = -1;
       }
@@ -223,7 +219,7 @@ export const MenuItem = ({
       aria-label={labelProp}
       value={valueProp}
       data-value={valueProp}
-      forwardedAs={as || "li"}
+      forwardedAs={as || 'li'}
       aria-checked={isCheckboxOrRadio ? isSelected : undefined}
       aria-selected={
         itemRole === MENU_ITEM_ROLES.OPTION ? isSelected : undefined
@@ -243,14 +239,14 @@ export const MenuItem = ({
       <div
         ref={ref}
         style={{
-          display: "flex",
-          alignItems: props.alignItems || "center",
-          justifyContent: "space-between",
+          display: 'flex',
+          alignItems: props.alignItems || 'center',
+          justifyContent: 'space-between',
         }}
       >
         {before}
         <div
-          style={{ flexGrow: 1, wordBreak: "break-word", minWidth: 0 }}
+          style={{flexGrow: 1, wordBreak: 'break-word', minWidth: 0}}
           ref={textContent}
         >
           {children}
@@ -284,7 +280,7 @@ export const MenuGroup = ({
         mt="-1px"
       >
         <Text
-          forwardedAs={titleAs || "div"}
+          forwardedAs={titleAs || 'div'}
           fontSize={200}
           fontWeight={600}
           mt={350}
@@ -312,12 +308,12 @@ export const MenuDivider = (props: any) => (
 );
 
 const MenuFilterInput = (props: React$ElementConfig<typeof Input>) => {
-  const { onChange, onFocus, onBlur } = props;
-  const { state, setState } = useContext(MenuContext);
+  const {onChange, onFocus, onBlur} = props;
+  const {state, setState} = useContext(MenuContext);
   const handleOnChange = useCallback(
     (event, value) => {
       onChange && onChange(event, value);
-      setState({ filterQuery: value });
+      setState({filterQuery: value});
     },
     [setState, onChange]
   );
@@ -325,7 +321,7 @@ const MenuFilterInput = (props: React$ElementConfig<typeof Input>) => {
   const handleOnFocus = useCallback(
     (event) => {
       onFocus && onFocus(event);
-      setState({ isFilterInputFocused: true });
+      setState({isFilterInputFocused: true});
     },
     [setState, onFocus]
   );
@@ -333,7 +329,7 @@ const MenuFilterInput = (props: React$ElementConfig<typeof Input>) => {
   const handleOnBlur = useCallback(
     (event) => {
       onBlur && onBlur(event);
-      setState({ isFilterInputFocused: false });
+      setState({isFilterInputFocused: false});
     },
     [setState, onBlur]
   );
@@ -356,7 +352,7 @@ const MenuItems = ({
   innerRef,
   ...props
 }: TypeMenuProps) => {
-  const { handleKeyDown, activeDescendent } = useMenuKeyDown();
+  const {handleKeyDown, activeDescendent} = useMenuKeyDown();
 
   return (
     <MenuItemsContainer
@@ -392,7 +388,7 @@ export const Menu = ({
   >();
   const [state, setState] = useState({
     selectionIndex: 0,
-    filterQuery: "",
+    filterQuery: '',
     filteredItems: null,
     isFilterInputFocused: false,
   });
@@ -400,7 +396,7 @@ export const Menu = ({
   const menuRef = useRef(null);
   const setContextState = useCallback(
     (newState) => {
-      setState({ ...state, ...newState });
+      setState({...state, ...newState});
     },
     [state]
   );
@@ -445,12 +441,12 @@ Menu.Radio = MenuRadio;
 Menu.Divider = MenuDivider;
 Menu.FilterInput = MenuFilterInput;
 
-Menu.Group.displayName = "Menu.Group";
-Menu.Item.displayName = "Menu.Item";
-Menu.Checkbox.displayName = "Menu.Checkbox";
-Menu.Radio.displayName = "Menu.Radio";
-Menu.Divider.displayName = "Menu.Divider";
-Menu.FilterInput.displayName = "Menu.FilterInput";
+Menu.Group.displayName = 'Menu.Group';
+Menu.Item.displayName = 'Menu.Item';
+Menu.Checkbox.displayName = 'Menu.Checkbox';
+Menu.Radio.displayName = 'Menu.Radio';
+Menu.Divider.displayName = 'Menu.Divider';
+Menu.FilterInput.displayName = 'Menu.FilterInput';
 
 const CustomPopoutContent = styled(Popout.Content)`
   padding: 0;
@@ -464,23 +460,23 @@ export const MenuButton = ({
   children,
   onClick,
   closeOnItemClick = true,
-  id = uniqueId("MenuButton-"),
-  placement = "bottom",
+  id = uniqueId('MenuButton-'),
+  placement = 'bottom',
   ...props
 }: TypeMenuButtonProps) => {
   const [isOpen, setIsOpen] = useState(false);
 
   const closePopout = useCallback(() => setIsOpen(false), [setIsOpen]);
 
-  const ariaLabelledBy = props["aria-labelledby"]
-    ? `${props["aria-labelledby"]} ${id}`
+  const ariaLabelledBy = props['aria-labelledby']
+    ? `${props['aria-labelledby']} ${id}`
     : undefined;
-  const ariaLabel = props["aria-label"]
-    ? `${props["aria-label"]} ${innerText(children)}`
+  const ariaLabel = props['aria-label']
+    ? `${props['aria-label']} ${innerText(children)}`
     : undefined;
 
   return (
-    <MenuButtonContext.Provider value={{ closePopout, closeOnItemClick }}>
+    <MenuButtonContext.Provider value={{closePopout, closeOnItemClick}}>
       <Popout
         isOpen={isOpen}
         setIsOpen={setIsOpen}
@@ -497,7 +493,7 @@ export const MenuButton = ({
           aria-label={ariaLabel?.trim()}
           active={isOpen}
           onKeyDown={(e) => {
-            if (e.key === "ArrowUp" || e.key === "ArrowDown") {
+            if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
               onClick && onClick(e);
               setIsOpen(true);
             }

package/__flow__/Menu/index.stories.js

@@ -1,19 +1,19 @@
 // @flow
-import React, { useContext } from "react";
-import Menu, { MenuButton, MenuCheckbox } from "./index";
-import type { TypeMenuProps } from "./index.flow";
-import { MenuButtonContext } from "./hooks";
-import OverflowList from "../OverflowList";
-import Icon from "../Icon";
-import { names } from "./names";
-import Text from "../Text";
-import Box from "../Box";
+import React, {useContext} from 'react';
+import Menu, {MenuButton, MenuCheckbox} from './index';
+import type {TypeMenuProps} from './index.flow';
+import {MenuButtonContext} from './hooks';
+import OverflowList from '../OverflowList';
+import Icon from '../Icon';
+import {names} from './names';
+import Text from '../Text';
+import Box from '../Box';
 
-const fruit = ["Apple", "Banana", "Blueberry", "Orange"];
-const maybeFruit = ["Tomato", "Cucumber", "Squash"];
+const fruit = ['Apple', 'Banana', 'Blueberry', 'Orange'];
+const maybeFruit = ['Tomato', 'Cucumber', 'Squash'];
 
 export default {
-  title: "Menu",
+  title: 'Components/Menu',
 };
 
 const BaseContents = () => (
@@ -95,7 +95,7 @@ const VirtualizedMenu = (props: TypeMenuProps) => {
 export const defaultStory = () => <BaseMenu />;
 
 defaultStory.story = {
-  name: "Default",
+  name: 'Default',
 };
 
 export const Popout = () => (
@@ -131,8 +131,8 @@ export const PropGetters = () => {
               height="400px"
               width="auto"
               items={names}
-              getItemProps={({ item }) => ({ key: item, item })}
-              ItemComponent={({ item }) => (
+              getItemProps={({item}) => ({key: item, item})}
+              ItemComponent={({item}) => (
                 <Menu.Item onClick={() => alert(item)}>{item}</Menu.Item>
               )}
             />
@@ -151,7 +151,7 @@ export const PropGetters = () => {
 };
 
 const CloseOnClick = () => {
-  const { closePopout } = useContext(MenuButtonContext);
+  const {closePopout} = useContext(MenuButtonContext);
   return (
     <Menu.Item
       onClick={() => {
@@ -220,15 +220,15 @@ export const MenuWithIcons = (props: TypeMenuProps) => {
       backgroundColor="container.background.base"
     >
       <Menu {...props}>
-        <Menu.Item key="positive" onClick={() => alert("positive")}>
+        <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")}>
+        <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")}>
+        <Menu.Item key="neutral" onClick={() => alert('neutral')}>
           <Icon name="flat-neutral-sentiment" mr={200} />
           Neutral
         </Menu.Item>

package/__flow__/Menu/index.test.js

@@ -1,19 +1,19 @@
 // @flow
-import React from "react";
+import React from 'react';
 import {
   render,
   cleanup,
   fireEvent,
   waitForElementToBeRemoved,
-} from "../utils/react-testing-library";
-import Icon from "../Icon";
+} from '../utils/react-testing-library';
+import Icon from '../Icon';
 
-import Menu, { MenuButton } from "./index";
-import type { TypeMenuProps } from "./index.flow";
-import { MENU_ITEM_ROLES } from "./constants";
+import Menu, {MenuButton} from './index';
+import type {TypeMenuProps} from './index.flow';
+import {MENU_ITEM_ROLES} from './constants';
 
-const fruit = ["Apple", "Banana", "Orange"];
-const maybeFruit = ["Tomato", "Cucumber", "Squash"];
+const fruit = ['Apple', 'Banana', 'Orange'];
+const maybeFruit = ['Tomato', 'Cucumber', 'Squash'];
 const mockOnClick = jest.fn();
 
 export const AsMenu = (props: TypeMenuProps) => {
@@ -49,39 +49,39 @@ export const AsMenuButton = () => {
   );
 };
 
-describe("Menu", () => {
+describe('Menu', () => {
   afterEach(() => {
     mockOnClick.mockClear();
     cleanup();
   });
 
-  describe("AsMenu", () => {
-    it("should render items with menuitem role", () => {
-      const { queryByRole, queryByDataQaLabel } = render(<AsMenu />);
+  describe('AsMenu', () => {
+    it('should render items with menuitem role', () => {
+      const {queryByRole, queryByDataQaLabel} = render(<AsMenu />);
       const firstItem = queryByRole(MENU_ITEM_ROLES.MENUITEM, {
         name: fruit[0],
       });
 
       expect(firstItem).toBeInTheDocument();
-      expect(queryByDataQaLabel({ "menu-item": fruit[0] })).toBeInTheDocument();
+      expect(queryByDataQaLabel({'menu-item': fruit[0]})).toBeInTheDocument();
       fireEvent.click(firstItem);
       expect(mockOnClick).toHaveBeenCalled();
     });
   });
 
-  describe("AsMenuButton", () => {
-    it("should match snapshot", () => {
+  describe('AsMenuButton', () => {
+    it('should match snapshot', () => {
       expect(render(<AsMenuButton />).baseElement).toMatchSnapshot();
     });
 
-    it("should open the menu on click", async () => {
-      const { queryByLabelText, queryByRole } = render(<AsMenuButton />);
-      const menuButton = queryByLabelText("Open Menu");
+    it('should open the menu on click', async () => {
+      const {queryByLabelText, queryByRole} = render(<AsMenuButton />);
+      const menuButton = queryByLabelText('Open Menu');
 
       expect(menuButton).toBeInTheDocument();
-      const item = queryByRole(MENU_ITEM_ROLES.MENUITEM, { name: fruit[0] });
+      const item = queryByRole(MENU_ITEM_ROLES.MENUITEM, {name: fruit[0]});
       expect(item).not.toBeInTheDocument();
-      expect(menuButton).toHaveAttribute("aria-haspopup", "true");
+      expect(menuButton).toHaveAttribute('aria-haspopup', 'true');
 
       // Clicking button opens popout and focuses first item
       fireEvent.click(menuButton);
@@ -89,14 +89,14 @@ describe("Menu", () => {
         name: fruit[0],
       });
       expect(firstItem).toBeInTheDocument();
-      expect(queryByRole("menu")).toBe(document.activeElement);
+      expect(queryByRole('menu')).toBe(document.activeElement);
 
       // Clicking calls onClick and closes popout
       fireEvent.click(firstItem);
       expect(mockOnClick).toHaveBeenCalled();
 
       await waitForElementToBeRemoved(() =>
-        queryByRole(MENU_ITEM_ROLES.MENUITEM, { name: fruit[0] })
+        queryByRole(MENU_ITEM_ROLES.MENUITEM, {name: fruit[0]})
       );
     });
   });