@sproutsocial/racine 12.24.0 → 13.1.1

package/__flow__/Menu/hooks.js

@@ -1,21 +1,13 @@
 // @flow
-import {createContext, useContext, useEffect} from 'react';
+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';
-
-import type {TypeDescendant} from './descendants';
-import type {TypeMenuButtonContext, TypeMenuContext} from './index.flow';
-
+import type { TypeMenuButtonContext, TypeMenuContext } from "./index.flow";
+import { MENU_ROLES } from "./constants";
+import { createDescendantContext, useDescendantKeyDown, usePrevious, wrapEvent, type TypeDescendant } from "./descendants";
 export const MenuContext = createContext<TypeMenuContext>({
   role: MENU_ROLES.MENU,
   menuRef: {
-    current: null,
+    current: null
   },
   value: undefined,
   multiselect: false,
@@ -24,162 +16,141 @@ export const MenuContext = createContext<TypeMenuContext>({
     selectionIndex: 0,
     filterQuery: '',
     filteredItems: null,
-    isFilterInputFocused: false,
+    isFilterInputFocused: false
   },
   setState: () => {},
   selectCallbacks: {
-    current: [],
-  },
+    current: []
+  }
 });
-
 export const MenuButtonContext = createContext<TypeMenuButtonContext>({
   closeOnItemClick: undefined,
-  closePopout: undefined,
+  closePopout: undefined
 });
-
 export type TypeMenuDescendantProps = {|
   id: string,
   label: ?string,
   value?: string,
   disabled?: boolean,
 |};
-export const MenuDescendantContext = createDescendantContext<
-  HTMLElement,
-  TypeMenuDescendantProps
->('MenuDescendantContext');
+export const MenuDescendantContext = createDescendantContext<HTMLElement, TypeMenuDescendantProps>('MenuDescendantContext');
 
 /**
  * When a user's typed input matches the string displayed in a menu item, it is
  * expected that the matching menu item is selected. This is our matching
  * function.
  */
-function filterItemsFromTypeahead(
-  items: TypeDescendant<HTMLElement, TypeMenuDescendantProps>[],
-  string: string = ''
-) {
+function filterItemsFromTypeahead(items: TypeDescendant<HTMLElement, TypeMenuDescendantProps>[], string: string = '') {
   if (!string) {
     return null;
   }
-
-  return items
-    .filter(
-      ({value, label}) =>
-        value?.toLowerCase().includes(string.toLocaleLowerCase()) ||
-        label?.toLowerCase().includes(string.toLocaleLowerCase())
-    )
-    .map(({index}) => index);
+  return items.filter(({
+    value,
+    label
+  }) => value?.toLowerCase().includes(string.toLocaleLowerCase()) || label?.toLowerCase().includes(string.toLocaleLowerCase())).map(({
+    index
+  }) => index);
 }
-
 export function useMenuKeyDown() {
   const {
     onChange,
     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);
   const prevSelected = usePrevious(items[selectionIndex]);
   const prevSelectionIndex = usePrevious(selectionIndex);
-
   useEffect(() => {
     if (items.length && selectionIndex > items.length - 1) {
       // If for some reason our selection index is larger than our possible
       // index range (let's say the last item is selected and the list
       // dynamically updates), we need to select the last item in the list.
       setState({
-        selectionIndex: items.length - 1,
+        selectionIndex: items.length - 1
       });
     } else if (
-      // Checks if
-      //  - menu length has changed
-      //  - selection index has not changed BUT selected item has changed
-      //
-      // This prevents any dynamic adding/removing of menu items from actually
-      // changing a user's expected selection.
-      prevMenuItemsLength !== items.length &&
-      selectionIndex > -1 &&
-      prevSelected &&
-      prevSelectionIndex === selectionIndex &&
-      items[selectionIndex] !== prevSelected
-    ) {
+    // Checks if
+    //  - menu length has changed
+    //  - selection index has not changed BUT selected item has changed
+    //
+    // This prevents any dynamic adding/removing of menu items from actually
+    // changing a user's expected selection.
+    prevMenuItemsLength !== items.length && selectionIndex > -1 && prevSelected && prevSelectionIndex === selectionIndex && items[selectionIndex] !== prevSelected) {
       setState({
-        selectionIndex: items.findIndex((i) => i.index === prevSelected.index),
+        selectionIndex: items.findIndex(i => i.index === prevSelected.index)
       });
     }
-  }, [
-    setState,
-    items,
-    prevMenuItemsLength,
-    prevSelected,
-    prevSelectionIndex,
-    selectionIndex,
-  ]);
-
+  }, [setState, items, prevMenuItemsLength, prevSelected, prevSelectionIndex, selectionIndex]);
   useEffect(() => {
     const newFilteredItems = filterItemsFromTypeahead(items, filterQuery);
-    if (
-      filterQuery &&
-      newFilteredItems &&
-      filteredItems?.length !== newFilteredItems?.length
-    ) {
+    if (filterQuery && newFilteredItems && filteredItems?.length !== newFilteredItems?.length) {
       setState({
         filteredItems: newFilteredItems,
-        selectionIndex: newFilteredItems[0],
+        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;
-        switch (key) {
-          case ' ':
-            if (isFilterInputFocused) {
-              return;
-            }
-          // falls through
-          // eslint-disable-next-line no-fallthrough
-          case 'Enter':
-            const selected = items[selectionIndex];
-
-            if (selected) {
-              event.preventDefault();
-              const func = selectCallbacks.current[selected.index];
-              func?.call && func();
-              onChange && selected.value && onChange(selected.value);
-              shouldClosePopout && closePopout && closePopout();
-            }
-            return;
-          default:
+    handleKeyDown: wrapEvent<SyntheticKeyboardEvent<>>(function (event) {
+      const {
+        key
+      } = event;
+      switch (key) {
+        case ' ':
+          if (isFilterInputFocused) {
             return;
-        }
-      },
-
-      useDescendantKeyDown(MenuDescendantContext, {
-        currentIndex: index,
-        orientation: 'vertical',
-        key: 'option',
-        rotate: true,
-        filter: (option) =>
-          !option.disabled &&
-          (!filteredItems || filteredItems.includes(option.index)),
-        // $FlowIssue
-        callback(item: TypeDescendant<HTMLElement, TypeMenuDescendantProps>) {
-          item.element && scrollIntoViewIfNeeded(item.element);
-          setState({selectionIndex: item.index});
-        },
-      })
-    ),
+          }
+        // falls through
+        // eslint-disable-next-line no-fallthrough
+        case 'Enter':
+          const selected = items[selectionIndex];
+          if (selected) {
+            event.preventDefault();
+            const func = selectCallbacks.current[selected.index];
+            func?.call && func();
+            onChange && selected.value && onChange(selected.value);
+            shouldClosePopout && closePopout && closePopout();
+          }
+          return;
+        default:
+          return;
+      }
+    }, useDescendantKeyDown(MenuDescendantContext, {
+      currentIndex: index,
+      orientation: 'vertical',
+      key: 'option',
+      rotate: true,
+      filter: option => !option.disabled && (!filteredItems || filteredItems.includes(option.index)),
+      // $FlowIssue
+      callback(item: TypeDescendant<HTMLElement, TypeMenuDescendantProps>) {
+        item.element && scrollIntoViewIfNeeded(item.element);
+        setState({
+          selectionIndex: item.index
+        });
+      }
+    }))
   };
-}
+}

package/__flow__/Menu/index.flow.js

@@ -1,51 +1,53 @@
 // @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 Box from "../Box";
+import Button from "../Button";
+import Popout from "../Popout";
+import type { EnumPlacements } from "../Popout/index.flow";
+import { MENU_ITEM_ROLES, MENU_ROLES } from "./constants";
+import type { TypeListboxProps as TypeListboxProps2, TypeListboxButtonProps as TypeListboxButtonProps2 } from "../Listbox/index.flow";
 
+/**
+ * @deprecated Use TypeListboxProps from root instead
+ */
+export type TypeListboxProps = TypeListboxProps2;
+
+/**
+ * @deprecated Use TypeListboxButtonProps from root instead
+ */
+export type TypeListboxButtonProps = TypeListboxButtonProps2;
 export type TypeMenuRoles = $Values<typeof MENU_ROLES>;
 export type TypeMenuItemRoles = $Values<typeof MENU_ITEM_ROLES>;
-
 export type TypeMenuState = {|
   selectionIndex: number,
   filterQuery: string,
-  filteredItems: ?(number[]),
+  filteredItems: ?number[],
   isFilterInputFocused: boolean,
 |};
-
 export type TypeMenuSharedProps = {|
   multiselect?: boolean,
   onChange?: (val: string) => void,
   role?: TypeMenuRoles,
   value?: ?string | string[],
 |};
-
 export type TypeMenuContext = {|
   ...TypeMenuSharedProps,
   menuRef: {|
-    current: HTMLDivElement | null,
+    current: HTMLDivElement | null
   |},
   setState: ($Shape<TypeMenuState>) => void,
   state: TypeMenuState,
   selectCallbacks: {|
-    current: (?((any) => void))[],
+    current: (?(any) => void)[]
   |},
 |};
-
 export type TypeMenuProps = {
   ...$Exact<React.ElementConfig<typeof Box>>,
   ...TypeMenuSharedProps,
   children?: React.Node,
   innerRef?: React.Ref<any>,
+  ...
 };
-
-export type TypeListboxProps = {
-  ...TypeMenuProps,
-  role?: 'listbox',
-};
-
 export type TypeMenuItemProps = {
   id?: string,
   index?: number,
@@ -64,8 +66,8 @@ export type TypeMenuItemProps = {
   as?: string,
   'data-qa-menu-item'?: string,
   alignItems?: string,
+  ...
 };
-
 export type TypeMenuGroupProps = {
   children: React.Node,
   /** If provided, a visible title will be rendered for the group. */
@@ -74,13 +76,12 @@ export type TypeMenuGroupProps = {
   /** Use the flush appearance if you're using the menu outside of a popout */
   appearance?: 'default' | 'flush',
   disabled?: boolean,
+  ...
 };
-
 export type TypeMenuButtonContext = {|
   closeOnItemClick?: boolean,
   closePopout?: () => any,
 |};
-
 export type TypeMenuButtonProps = {
   ...$Exact<React.ElementConfig<typeof Button>>,
   ...TypeMenuButtonContext,
@@ -90,14 +91,5 @@ export type TypeMenuButtonProps = {
   content: React.Node,
   popoutProps?: $Shape<React.ElementConfig<typeof Popout>>,
   placement?: EnumPlacements,
-};
-
-export type TypeListboxButtonProps = {
-  ...$Exact<React.ElementConfig<typeof Button>>,
-  ...TypeMenuButtonContext,
-  size?: 'large' | 'default' | 'small',
-  content: React.Node,
-  popoutProps?: $Shape<React.ElementConfig<typeof Popout>>,
-  'aria-label'?: string,
-  'aria-labelledby'?: string,
-};
+  ...
+};