@sproutsocial/racine 12.24.0 → 13.1.1

package/__flow__/Menu/index.js

@@ -1,49 +1,25 @@
 // @flow
 import * as React from 'react';
+import { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import styled from 'styled-components';
-import {
-  useCallback,
-  useContext,
-  useEffect,
-  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';
-
-import type {
-  TypeMenuButtonProps,
-  TypeMenuGroupProps,
-  TypeMenuItemProps,
-  TypeMenuItemRoles,
-  TypeMenuProps,
-  TypeMenuRoles,
-} 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';
-
+import { useTextContent } from "../utils/hooks";
+import innerText from "../utils/innerText";
+import { disabled } from "../utils/mixins";
+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 type { TypeMenuButtonProps, TypeMenuGroupProps, TypeMenuItemProps, TypeMenuItemRoles, TypeMenuProps, TypeMenuRoles } from "./index.flow";
+import { MENU_ITEM_ROLES, MENU_ROLES } from "./constants";
+import { DescendantProvider, useDescendant, useDescendants } from "./descendants";
+import { MenuButtonContext, MenuContext, MenuDescendantContext, useMenuKeyDown, type TypeMenuDescendantProps } from "./hooks";
+import { MenuItemContainer, MenuItemsContainer } from "./styles";
 const noop = () => {};
-
 const getMenuItemRole = (menuRole: ?TypeMenuRoles): TypeMenuItemRoles => {
   switch (menuRole) {
     case MENU_ROLES.LIST:
@@ -55,10 +31,8 @@ const getMenuItemRole = (menuRole: ?TypeMenuRoles): TypeMenuItemRoles => {
       return MENU_ITEM_ROLES.MENUITEM;
   }
 };
-
 function isValueSelected(menuValue, value) {
   if (!menuValue) return false;
-
   if (typeof menuValue === 'string') {
     return Boolean(menuValue && value && menuValue === value);
   } else if (Array.isArray(menuValue)) {
@@ -66,7 +40,6 @@ function isValueSelected(menuValue, value) {
   }
   return false;
 }
-
 export const MenuItem = ({
   id: idProp,
   index: indexProp,
@@ -91,10 +64,16 @@ export const MenuItem = ({
     multiselect,
     state: menuState,
     selectCallbacks,
-    menuRef,
+    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);
@@ -102,35 +81,20 @@ export const MenuItem = ({
   const textContent = useTextContent('');
   const label = labelProp || textContent.current;
   const ref = useRef<HTMLDivElement | null>(null);
-  const index = useDescendant<HTMLElement, TypeMenuDescendantProps>(
-    {
-      context: MenuDescendantContext,
-      element: ref.current,
-      value: valueProp || label,
-      label,
-      disabled,
-      id,
-    },
-    indexProp
-  );
+  const index = useDescendant<HTMLElement, TypeMenuDescendantProps>({
+    context: MenuDescendantContext,
+    element: ref.current,
+    value: valueProp || label,
+    label,
+    disabled,
+    id
+  }, indexProp);
   const isHidden = filteredItems && !filteredItems.includes(index);
   const isFocused = index === selectionIndex;
   selectCallbacks.current[index] = onClick;
   const [keyPressed, setKeyPressed] = useState(false);
-
-  const isCheckboxOrRadio = [
-    MENU_ITEM_ROLES.CHECKBOX,
-    MENU_ITEM_ROLES.RADIO,
-  ].includes(itemRole);
-  const interactive =
-    onClick ||
-    onKeyPress ||
-    [
-      MENU_ITEM_ROLES.OPTION,
-      MENU_ITEM_ROLES.MENUITEM,
-      MENU_ITEM_ROLES.CHECKBOX,
-      MENU_ITEM_ROLES.RADIO,
-    ].includes(itemRole);
+  const isCheckboxOrRadio = [MENU_ITEM_ROLES.CHECKBOX, MENU_ITEM_ROLES.RADIO].includes(itemRole);
+  const interactive = onClick || onKeyPress || [MENU_ITEM_ROLES.OPTION, MENU_ITEM_ROLES.MENUITEM, MENU_ITEM_ROLES.CHECKBOX, MENU_ITEM_ROLES.RADIO].includes(itemRole);
 
   /**
    * The Checkbox/Radio component doesn't expose a tabIndex prop, so we can't set the tabIndex on the underlying input
@@ -145,7 +109,6 @@ export const MenuItem = ({
       }
     }
   }, [ref, isCheckboxOrRadio]);
-
   useEffect(() => {
     if (filteredItems) {
       setKeyPressed(true);
@@ -153,198 +116,95 @@ export const MenuItem = ({
       setKeyPressed(true);
     }
   }, [selectionIndex, filteredItems]);
-
-  const handleClick = useCallback(
-    (e: SyntheticEvent<HTMLButtonElement>) => {
-      menuRef.current?.focus();
-      if (onChange && itemRole !== MENU_ITEM_ROLES.LISTITEM) {
-        onChange(valueProp || label);
-      }
-      shouldClosePopout && closePopout && closePopout();
-      onClick && onClick(e);
-    },
-    [
-      menuRef,
-      onChange,
-      itemRole,
-      shouldClosePopout,
-      closePopout,
-      onClick,
-      valueProp,
-      label,
-    ]
-  );
-
+  const handleClick = useCallback((e: SyntheticEvent<HTMLButtonElement>) => {
+    menuRef.current?.focus();
+    if (onChange && itemRole !== MENU_ITEM_ROLES.LISTITEM) {
+      onChange(valueProp || label);
+    }
+    shouldClosePopout && closePopout && closePopout();
+    onClick && onClick(e);
+  }, [menuRef, onChange, itemRole, shouldClosePopout, closePopout, onClick, valueProp, label]);
   const before = useMemo(() => {
     if (elemBefore) return elemBefore;
-
     if (itemRole === MENU_ITEM_ROLES.CHECKBOX) {
-      return (
-        <Checkbox
-          id={`Checkbox-${id}`}
-          checked={isSelected}
-          aria-hidden="true"
-          onChange={noop}
-          indeterminate={indeterminate}
-          mr={300}
-        />
-      );
+      return <Checkbox id={`Checkbox-${id}`} checked={isSelected} aria-hidden="true" onChange={noop} indeterminate={indeterminate} mr={300} />;
     } else if (itemRole === MENU_ITEM_ROLES.RADIO) {
-      return (
-        <Radio
-          id={`Radio-${id}`}
-          name={`Radio-${id}`}
-          checked={isSelected}
-          aria-hidden="true"
-          onChange={noop}
-          mr={300}
-        />
-      );
+      return <Radio id={`Radio-${id}`} name={`Radio-${id}`} checked={isSelected} aria-hidden="true" onChange={noop} mr={300} />;
     }
   }, [elemBefore, id, indeterminate, isSelected, itemRole]);
-
   const after = useMemo(() => {
     if (elemAfter) return elemAfter;
     if (isSelected && !isCheckboxOrRadio) {
       return <Icon name="check" ariaHidden size="mini" ml={300} />;
     }
   }, [elemAfter, isCheckboxOrRadio, isSelected]);
-
-  return (
-    <MenuItemContainer
-      data-qa-menu-item={label}
-      {...props}
-      active={isFocused && keyPressed}
-      id={id}
-      aria-label={labelProp}
-      value={valueProp}
-      data-value={valueProp}
-      forwardedAs={as || 'li'}
-      aria-checked={isCheckboxOrRadio ? isSelected : undefined}
-      aria-selected={
-        itemRole === MENU_ITEM_ROLES.OPTION ? isSelected : undefined
-      }
-      disabled={disabled}
-      aria-disabled={disabled}
-      hidden={isHidden}
-      interactive={interactive}
-      isCheckboxOrRadio={isCheckboxOrRadio}
-      onClick={!disabled ? handleClick : undefined}
-      role={itemRole}
-      selected={isSelected}
-      tabIndex={
-        itemRole !== MENU_ITEM_ROLES.LISTITEM && !disabled ? -1 : undefined
-      }
-    >
-      <div
-        ref={ref}
-        style={{
-          display: 'flex',
-          alignItems: props.alignItems || 'center',
-          justifyContent: 'space-between',
-        }}
-      >
+  return <MenuItemContainer data-qa-menu-item={label} {...props} active={isFocused && keyPressed} id={id} aria-label={labelProp} value={valueProp} data-value={valueProp} forwardedAs={as || 'li'} aria-checked={isCheckboxOrRadio ? isSelected : undefined} aria-selected={itemRole === MENU_ITEM_ROLES.OPTION ? isSelected : undefined} disabled={disabled} aria-disabled={disabled} hidden={isHidden} interactive={interactive} isCheckboxOrRadio={isCheckboxOrRadio} onClick={!disabled ? handleClick : undefined} role={itemRole} selected={isSelected} tabIndex={itemRole !== MENU_ITEM_ROLES.LISTITEM && !disabled ? -1 : undefined}>
+      <div ref={ref} style={{
+      display: 'flex',
+      alignItems: props.alignItems || 'center',
+      justifyContent: 'space-between'
+    }}>
         {before}
-        <div
-          style={{flexGrow: 1, wordBreak: 'break-word', minWidth: 0}}
-          ref={textContent}
-        >
+        <div style={{
+        flexGrow: 1,
+        wordBreak: 'break-word',
+        minWidth: 0
+      }} ref={textContent}>
           {children}
         </div>
         {after}
       </div>
-    </MenuItemContainer>
-  );
+    </MenuItemContainer>;
 };
-
-export const MenuCheckbox = (props: TypeMenuItemProps) => (
-  <MenuItem role={MENU_ITEM_ROLES.CHECKBOX} {...props} />
-);
-export const MenuRadio = (props: TypeMenuItemProps) => (
-  <MenuItem role={MENU_ITEM_ROLES.RADIO} {...props} />
-);
-
+export const MenuCheckbox = (props: TypeMenuItemProps) => <MenuItem role={MENU_ITEM_ROLES.CHECKBOX} {...props} />;
+export const MenuRadio = (props: TypeMenuItemProps) => <MenuItem role={MENU_ITEM_ROLES.RADIO} {...props} />;
 export const MenuGroup = ({
   children,
   title,
   titleAs,
   disabled: isDisabled = false,
   ...props
-}: TypeMenuGroupProps) => (
-  <>
-    {title && (
-      <Box
-        pl={400}
-        borderTop="1px solid"
-        borderColor="container.border.base"
-        mt="-1px"
-      >
-        <Text
-          forwardedAs={titleAs || 'div'}
-          fontSize={200}
-          fontWeight={600}
-          mt={350}
-          color="text.headline"
-          css={isDisabled && disabled}
-        >
+}: TypeMenuGroupProps) => <>
+    {title && <Box pl={400} borderTop="1px solid" borderColor="container.border.base" mt="-1px">
+        <Text forwardedAs={titleAs || 'div'} fontSize={200} fontWeight={600} mt={350} color="text.headline" css={isDisabled && disabled}>
           {title}
         </Text>
-      </Box>
-    )}
+      </Box>}
     <Box {...props} p={300} role="group">
       {children}
     </Box>
-  </>
-);
-
-export const MenuDivider = (props: any) => (
-  <Box
-    as="li"
-    role="separator"
-    borderTop="1px solid"
-    borderColor="container.border.base"
-    {...props}
-  />
-);
-
+  </>;
+export const MenuDivider = (props: any) => <Box as="li" role="separator" borderTop="1px solid" borderColor="container.border.base" {...props} />;
 const MenuFilterInput = (props: React$ElementConfig<typeof Input>) => {
-  const {onChange, onFocus, onBlur} = props;
-  const {state, setState} = useContext(MenuContext);
-  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={handleOnChange}
-      onFocus={handleOnFocus}
-      onBlur={handleOnBlur}
-    />
-  );
+  const {
+    onChange,
+    onFocus,
+    onBlur
+  } = props;
+  const {
+    state,
+    setState
+  } = useContext(MenuContext);
+  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={handleOnChange} onFocus={handleOnFocus} onBlur={handleOnBlur} />;
 };
-
 const MenuItems = ({
   children,
   role,
@@ -352,27 +212,14 @@ const MenuItems = ({
   innerRef,
   ...props
 }: TypeMenuProps) => {
-  const {handleKeyDown, activeDescendent} = useMenuKeyDown();
-
-  return (
-    <MenuItemsContainer
-      {...props}
-      forwardedAs="ul"
-      ref={innerRef}
-      role={role}
-      aria-activedescendant={activeDescendent?.id}
-      aria-multiselectable={multiselect ? true : undefined}
-      tabIndex={0}
-      onKeyDown={handleKeyDown}
-      margin={0}
-      padding={0}
-      overflow="hidden"
-    >
+  const {
+    handleKeyDown,
+    activeDescendent
+  } = useMenuKeyDown();
+  return <MenuItemsContainer {...props} forwardedAs="ul" ref={innerRef} role={role} aria-activedescendant={activeDescendent?.id} aria-multiselectable={multiselect ? true : undefined} tabIndex={0} onKeyDown={handleKeyDown} margin={0} padding={0} overflow="hidden">
       {children}
-    </MenuItemsContainer>
-  );
+    </MenuItemsContainer>;
 };
-
 export const Menu = ({
   role = MENU_ROLES.MENU,
   children,
@@ -382,78 +229,58 @@ export const Menu = ({
   innerRef,
   ...props
 }: TypeMenuProps) => {
-  const [descendants, setDescendants] = useDescendants<
-    HTMLElement,
-    TypeMenuDescendantProps
-  >();
+  const [descendants, setDescendants] = useDescendants<HTMLElement, TypeMenuDescendantProps>();
   const [state, setState] = useState({
     selectionIndex: 0,
     filterQuery: '',
     filteredItems: null,
-    isFilterInputFocused: false,
+    isFilterInputFocused: false
   });
-  const selectCallbacks = useRef<(?(() => void))[]>([]);
+  const selectCallbacks = useRef<(?() => void)[]>([]);
   const menuRef = useRef(null);
-  const setContextState = useCallback(
-    (newState) => {
-      setState({...state, ...newState});
-    },
-    [state]
-  );
-
-  return (
-    // $FlowIssue
-    <DescendantProvider
-      context={MenuDescendantContext}
-      items={descendants}
-      set={setDescendants}
-    >
-      <MenuContext.Provider
-        value={{
-          // $FlowIssue
-          menuRef: innerRef || menuRef,
-          role,
-          onChange,
-          value,
-          multiselect,
-          state,
-          setState: setContextState,
-          selectCallbacks,
-        }}
-      >
-        <MenuItems
-          {...props}
-          role={role}
-          multiselect={multiselect}
-          innerRef={menuRef}
-        >
+  const setContextState = useCallback(newState => {
+    setState({
+      ...state,
+      ...newState
+    });
+  }, [state]);
+  return <DescendantProvider context={MenuDescendantContext} items={
+  // $FlowIssue
+  descendants} set={setDescendants}>
+      <MenuContext.Provider value={{
+      // $FlowIssue
+      menuRef: innerRef || menuRef,
+      role,
+      onChange,
+      value,
+      multiselect,
+      state,
+      setState: setContextState,
+      selectCallbacks
+    }}>
+        <MenuItems {...props} role={role} multiselect={multiselect} innerRef={menuRef}>
           {children}
         </MenuItems>
       </MenuContext.Provider>
-    </DescendantProvider>
-  );
+    </DescendantProvider>;
 };
-
 Menu.Group = MenuGroup;
 Menu.Item = MenuItem;
 Menu.Checkbox = MenuCheckbox;
 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';
-
 const CustomPopoutContent = styled(Popout.Content)`
   padding: 0;
   margin-left: 0;
   margin-right: 0;
 `;
-
 export const MenuButton = ({
   content,
   popoutProps,
@@ -463,51 +290,30 @@ export const MenuButton = ({
   id = uniqueId('MenuButton-'),
   placement = 'bottom',
   ...props
-}: TypeMenuButtonProps) => {
+}: TypeMenuButtonProps): React.Node => {
   const [isOpen, setIsOpen] = useState(false);
-
   const closePopout = useCallback(() => setIsOpen(false), [setIsOpen]);
-
-  const ariaLabelledBy = props['aria-labelledby']
-    ? `${props['aria-labelledby']} ${id}`
-    : undefined;
-  const ariaLabel = props['aria-label']
-    ? `${props['aria-label']} ${innerText(children)}`
-    : undefined;
-
-  return (
-    <MenuButtonContext.Provider value={{closePopout, closeOnItemClick}}>
-      <Popout
-        isOpen={isOpen}
-        setIsOpen={setIsOpen}
-        content={<CustomPopoutContent>{content}</CustomPopoutContent>}
-        placement={placement}
-        {...popoutProps}
-        // $FlowIssue
-        width={props.width}
-      >
-        <Button
-          {...props}
-          id={id}
-          aria-labelledby={ariaLabelledBy?.trim()}
-          aria-label={ariaLabel?.trim()}
-          active={isOpen}
-          onKeyDown={(e) => {
-            if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
-              onClick && onClick(e);
-              setIsOpen(true);
-            }
-          }}
-          onClick={(e) => {
-            onClick && onClick(e);
-            setIsOpen(!isOpen);
-          }}
-        >
+  const ariaLabelledBy = props['aria-labelledby'] ? `${props['aria-labelledby']} ${id}` : undefined;
+  const ariaLabel = props['aria-label'] ? `${props['aria-label']} ${innerText(children)}` : undefined;
+  return <MenuButtonContext.Provider value={{
+    closePopout,
+    closeOnItemClick
+  }}>
+      <Popout isOpen={isOpen} setIsOpen={setIsOpen} content={<CustomPopoutContent>{content}</CustomPopoutContent>} placement={placement} {...popoutProps} width={
+    // $FlowIssue - both types are inexact, so this should work
+    props.width}>
+        <Button {...props} id={id} aria-labelledby={ariaLabelledBy?.trim()} aria-label={ariaLabel?.trim()} active={isOpen} onKeyDown={e => {
+        if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
+          onClick && onClick(e);
+          setIsOpen(true);
+        }
+      }} onClick={e => {
+        onClick && onClick(e);
+        setIsOpen(!isOpen);
+      }}>
           {children}
         </Button>
       </Popout>
-    </MenuButtonContext.Provider>
-  );
+    </MenuButtonContext.Provider>;
 };
-
-export default Menu;
+export default Menu;