@sproutsocial/racine 12.24.0 → 13.1.1

package/__flow__/Menu/descendants.js

@@ -1,16 +1,7 @@
 // @flow
 /* eslint-disable */
 import * as React from 'react';
-import {
-  createContext,
-  useState,
-  useLayoutEffect,
-  useEffect,
-  useContext,
-  useCallback,
-  useMemo,
-  useRef,
-} from 'react';
+import { createContext, useState, useLayoutEffect, useEffect, useContext, useCallback, useMemo, useRef } from 'react';
 
 /**
  * These hooks and utilities are largely copied from the @reach-ui/descendents package. They consider the package
@@ -23,18 +14,14 @@ export type TypeDescendant<ElementType, DescendantProps> = {|
   element: ElementType | null,
   index: number,
 |};
-
 type TypeDescendantContext<ElementType, DescendantProps> = {
   descendants: TypeDescendant<ElementType, DescendantProps>[],
-  registerDescendant(
-    descendant: $Diff<
-      TypeDescendant<ElementType, DescendantProps>,
-      {|index: number|}
-    >
-  ): void,
+  registerDescendant(descendant: $Diff<TypeDescendant<ElementType, DescendantProps>, {|
+    index: number
+  |}>): void,
   unregisterDescendant(element: ElementType | null): void,
+  ...
 };
-
 const noop = () => {};
 
 /**
@@ -58,48 +45,29 @@ export function usePrevious<ValueType: any>(value: ValueType) {
  * @param theirHandler User-supplied event handler
  * @param ourHandler Library-supplied event handler
  */
-export function wrapEvent<EventType: SyntheticEvent<> | Event>(
-  theirHandler: ?(event: EventType) => any,
-  ourHandler: (event: EventType) => any
-): (event: EventType) => any {
-  return (event) => {
+export function wrapEvent<EventType: SyntheticEvent<> | Event>(theirHandler: ?(event: EventType) => any, ourHandler: (event: EventType) => any): (event: EventType) => any {
+  return event => {
     theirHandler && theirHandler(event);
     if (!event.defaultPrevented) {
       return ourHandler(event);
     }
   };
 }
-
 export function canUseDOM() {
-  return (
-    typeof window !== 'undefined' &&
-    typeof window.document !== 'undefined' &&
-    typeof window.document.createElement !== 'undefined'
-  );
+  return typeof window !== 'undefined' && typeof window.document !== 'undefined' && typeof window.document.createElement !== 'undefined';
 }
-
 const useIsomorphicLayoutEffect = canUseDOM() ? useLayoutEffect : useEffect;
-
-export function createNamedContext<ContextValueType>(
-  name: string,
-  defaultValue: ContextValueType
-): React$Context<ContextValueType> {
+export function createNamedContext<ContextValueType>(name: string, defaultValue: ContextValueType): React$Context<ContextValueType> {
   const Ctx = createContext<ContextValueType>(defaultValue);
   Ctx.displayName = name;
   return Ctx;
 }
-
-export function createDescendantContext<ElementType, DescendantProps>(
-  name: string,
-  initialValue?: TypeDescendantContext<ElementType, DescendantProps> = {}
-): React$Context<TypeDescendantContext<ElementType, DescendantProps>> {
-  return createNamedContext<
-    TypeDescendantContext<ElementType, DescendantProps>
-  >(name, {
+export function createDescendantContext<ElementType, DescendantProps>(name: string, initialValue?: TypeDescendantContext<ElementType, DescendantProps> = {}): React$Context<TypeDescendantContext<ElementType, DescendantProps>> {
+  return createNamedContext<TypeDescendantContext<ElementType, DescendantProps>>(name, {
     descendants: [],
     registerDescendant: noop,
     unregisterDescendant: noop,
-    ...initialValue,
+    ...initialValue
   });
 }
 
@@ -126,187 +94,153 @@ export function createDescendantContext<ElementType, DescendantProps>(
  * composed descendants for keyboard navigation. However, in the few cases where
  * this is not the case, we can require an explicit index from the app.
  */
-export function useDescendant<ElementType, DescendantProps>(
-  {
-    context,
-    element,
-    ...rest
-  }: {|
-    ...$Diff<TypeDescendant<ElementType, DescendantProps>, {|index: number|}>,
-    context: React$Context<TypeDescendantContext<ElementType, DescendantProps>>,
-  |},
-  indexProp?: number
-) {
+export function useDescendant<ElementType, DescendantProps>({
+  context,
+  element,
+  ...rest
+}: {|
+  ...$Diff<TypeDescendant<ElementType, DescendantProps>, {|
+    index: number
+  |}>,
+  context: React$Context<TypeDescendantContext<ElementType, DescendantProps>>,
+|}, indexProp?: number) {
   let [, forceUpdate] = useState();
-  let {registerDescendant, unregisterDescendant, descendants} =
-    useContext<TypeDescendantContext<ElementType, DescendantProps>>(context);
+  let {
+    registerDescendant,
+    unregisterDescendant,
+    descendants
+  } = useContext<TypeDescendantContext<ElementType, DescendantProps>>(context);
 
   // Prevent any flashing
   useIsomorphicLayoutEffect(() => {
     if (!element) forceUpdate({});
-    registerDescendant({element, ...rest});
+    registerDescendant({
+      element,
+      ...rest
+    });
     return () => unregisterDescendant(element);
   }, [element, ...Object.values(rest)]);
-
-  return indexProp
-    ? indexProp
-    : descendants.findIndex((item) => item.element === element);
+  return indexProp ? indexProp : descendants.findIndex(item => item.element === element);
 }
-
 export function useDescendants<ElementType, DescendantProps>() {
   return useState<TypeDescendant<ElementType, DescendantProps>[]>([]);
 }
-
 export function DescendantProvider<ElementType: HTMLElement, DescendantProps>({
   context: Ctx,
   children,
   items,
-  set,
+  set
 }: {
   context: React$Context<TypeDescendantContext<ElementType, DescendantProps>>,
   children: React$Node,
   items: TypeDescendant<ElementType, DescendantProps>[],
   set: ((TypeDescendant<ElementType, DescendantProps>[]) => any) => any,
 }) {
-  let registerDescendant = useCallback(
-    ({
-      element,
-      ...rest
-    }: $Diff<
-      TypeDescendant<ElementType, DescendantProps>,
-      {|index: number|}
-    >) => {
-      if (!element) {
-        return;
-      }
-
-      set((items) => {
-        let newItem: TypeDescendant<ElementType, DescendantProps>;
-        let newItems: TypeDescendant<ElementType, DescendantProps>[];
-        // If there are no items, register at index 0 and bail.
-        if (items.length === 0) {
-          newItem = {
-            element,
-            index: 0,
-            ...rest,
-          };
+  let registerDescendant = useCallback(({
+    element,
+    ...rest
+  }: $Diff<TypeDescendant<ElementType, DescendantProps>, {|
+    index: number
+  |}>) => {
+    if (!element) {
+      return;
+    }
+    set(items => {
+      let newItem: TypeDescendant<ElementType, DescendantProps>;
+      let newItems: TypeDescendant<ElementType, DescendantProps>[];
+      // If there are no items, register at index 0 and bail.
+      if (items.length === 0) {
+        newItem = {
+          element,
+          index: 0,
+          ...rest
+        };
+        newItems = [...items, newItem];
+      } else if (items.find(item => item.element === element)) {
+        // If the element is already registered, just use the same array
+        newItems = items;
+      } else {
+        // When registering a descendant, we need to make sure we insert in
+        // into the array in the same order that it appears in the DOM. So as
+        // new descendants are added or maybe some are removed, we always know
+        // that the array is up-to-date and correct.
+        //
+        // So here we look at our registered descendants and see if the new
+        // element we are adding appears earlier than an existing descendant's
+        // DOM node via `node.compareDocumentPosition`. If it does, we insert
+        // the new element at this index. Because `registerDescendant` will be
+        // called in an effect every time the descendants state value changes,
+        // we should be sure that this index is accurate when descendent
+        // elements come or go from our component.
+        let index = items.findIndex(item => {
+          if (!item.element || !element) {
+            return false;
+          }
+          // Does this element's DOM node appear before another item in the
+          // array in our DOM tree? If so, return true to grab the index at
+          // this point in the array so we know where to insert the new
+          // element.
+          return Boolean(item.element.compareDocumentPosition(element) & Node.DOCUMENT_POSITION_PRECEDING);
+        });
+        newItem = {
+          element,
+          index,
+          ...rest
+        };
+
+        // If an index is not found we will push the element to the end.
+        if (index === -1) {
           newItems = [...items, newItem];
-        } else if (items.find((item) => item.element === element)) {
-          // If the element is already registered, just use the same array
-          newItems = items;
         } else {
-          // When registering a descendant, we need to make sure we insert in
-          // into the array in the same order that it appears in the DOM. So as
-          // new descendants are added or maybe some are removed, we always know
-          // that the array is up-to-date and correct.
-          //
-          // So here we look at our registered descendants and see if the new
-          // element we are adding appears earlier than an existing descendant's
-          // DOM node via `node.compareDocumentPosition`. If it does, we insert
-          // the new element at this index. Because `registerDescendant` will be
-          // called in an effect every time the descendants state value changes,
-          // we should be sure that this index is accurate when descendent
-          // elements come or go from our component.
-          let index = items.findIndex((item) => {
-            if (!item.element || !element) {
-              return false;
-            }
-            // Does this element's DOM node appear before another item in the
-            // array in our DOM tree? If so, return true to grab the index at
-            // this point in the array so we know where to insert the new
-            // element.
-            return Boolean(
-              item.element.compareDocumentPosition(element) &
-                Node.DOCUMENT_POSITION_PRECEDING
-            );
-          });
-
-          newItem = {
-            element,
-            index,
-            ...rest,
-          };
-
-          // If an index is not found we will push the element to the end.
-          if (index === -1) {
-            newItems = [...items, newItem];
-          } else {
-            newItems = [
-              ...items.slice(0, index),
-              newItem,
-              ...items.slice(index),
-            ];
-          }
+          newItems = [...items.slice(0, index), newItem, ...items.slice(index)];
         }
-        return newItems.map((item, index) => ({...item, index}));
-      });
-    },
-    // set is a state setter initialized by the useDescendants hook.
-    // We can safely ignore the lint warning here because it will not change
-    // between renders.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    []
-  );
-
-  let unregisterDescendant = useCallback(
-    (
-      element: $PropertyType<
-        TypeDescendant<ElementType, DescendantProps>,
-        'element'
-      >
-    ) => {
-      if (!element) {
-        return;
       }
-
-      set((items) =>
-        items
-          .filter((item) => element !== item.element)
-          .map((item, index) => ({...item, index}))
-      );
-    },
-    // set is a state setter initialized by the useDescendants hook.
-    // We can safely ignore the lint warning here because it will not change
-    // between renders.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    []
-  );
-
-  const value: TypeDescendantContext<ElementType, DescendantProps> =
-    useMemo(() => {
-      return {
-        descendants: items,
-        registerDescendant,
-        unregisterDescendant,
-      };
-    }, [items, registerDescendant, unregisterDescendant]);
-
+      return newItems.map((item, index) => ({
+        ...item,
+        index
+      }));
+    });
+  },
+  // set is a state setter initialized by the useDescendants hook.
+  // We can safely ignore the lint warning here because it will not change
+  // between renders.
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  []);
+  let unregisterDescendant = useCallback((element: $PropertyType<TypeDescendant<ElementType, DescendantProps>, 'element'>) => {
+    if (!element) {
+      return;
+    }
+    set(items => items.filter(item => element !== item.element).map((item, index) => ({
+      ...item,
+      index
+    })));
+  },
+  // set is a state setter initialized by the useDescendants hook.
+  // We can safely ignore the lint warning here because it will not change
+  // between renders.
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  []);
+  const value: TypeDescendantContext<ElementType, DescendantProps> = useMemo(() => {
+    return {
+      descendants: items,
+      registerDescendant,
+      unregisterDescendant
+    };
+  }, [items, registerDescendant, unregisterDescendant]);
   return <Ctx.Provider value={value}>{children}</Ctx.Provider>;
 }
-
-export function useDescendantKeyDown<
-  ElementType,
-  DescendantProps,
-  K: $Keys<TypeDescendant<ElementType, DescendantProps>>
->(
-  context: React$Context<TypeDescendantContext<ElementType, DescendantProps>>,
-  options: {
-    currentIndex?: number,
-    key?: K | 'option',
-    filter?: (
-      descendant: TypeDescendant<ElementType, DescendantProps>
-    ) => boolean,
-    orientation?: 'vertical' | 'horizontal' | 'both',
-    rotate?: boolean,
-    rtl?: boolean,
-    callback(
-      nextOption:
-        | TypeDescendant<ElementType, DescendantProps>
-        | $Values<TypeDescendant<ElementType, DescendantProps>>
-    ): void,
-  }
-) {
-  let {descendants} = useContext(context);
+export function useDescendantKeyDown<ElementType, DescendantProps, K: $Keys<TypeDescendant<ElementType, DescendantProps>>>(context: React$Context<TypeDescendantContext<ElementType, DescendantProps>>, options: {
+  currentIndex?: number,
+  key?: K | 'option',
+  filter?: (descendant: TypeDescendant<ElementType, DescendantProps>) => boolean,
+  orientation?: 'vertical' | 'horizontal' | 'both',
+  rotate?: boolean,
+  rtl?: boolean,
+  callback(nextOption: TypeDescendant<ElementType, DescendantProps> | $Values<TypeDescendant<ElementType, DescendantProps>>): void,
+}) {
+  let {
+    descendants
+  } = useContext(context);
   let {
     callback,
     currentIndex,
@@ -314,74 +248,42 @@ export function useDescendantKeyDown<
     key = 'index',
     orientation = 'vertical',
     rotate = true,
-    rtl = false,
+    rtl = false
   } = options;
   let index = currentIndex ? currentIndex : -1;
-
   return function handleKeyDown(event: SyntheticKeyboardEvent<>) {
-    if (
-      ![
-        'ArrowDown',
-        'ArrowUp',
-        'ArrowLeft',
-        'ArrowRight',
-        'PageUp',
-        'PageDown',
-        'Home',
-        'End',
-      ].includes(event.key)
-    ) {
+    if (!['ArrowDown', 'ArrowUp', 'ArrowLeft', 'ArrowRight', 'PageUp', 'PageDown', 'Home', 'End'].includes(event.key)) {
       return;
     }
 
     // If we use a filter function, we need to re-index our descendants array
     // so that filtered descendent elements aren't selected.
-    let selectableDescendants = filter
-      ? descendants.filter(filter)
-      : descendants;
+    let selectableDescendants = filter ? descendants.filter(filter) : descendants;
 
     // Current index should map to the updated array vs. the original
     // descendants array.
     if (filter) {
-      index = selectableDescendants.findIndex(
-        (descendant) => descendant.index === currentIndex
-      );
+      index = selectableDescendants.findIndex(descendant => descendant.index === currentIndex);
     }
 
     // We need some options for any of this to work!
     if (!selectableDescendants.length) {
       return;
     }
-
     function getNextOption() {
       let atBottom = index === selectableDescendants.length - 1;
-      return atBottom
-        ? rotate
-          ? getFirstOption()
-          : selectableDescendants[index]
-        : selectableDescendants[(index + 1) % selectableDescendants.length];
+      return atBottom ? rotate ? getFirstOption() : selectableDescendants[index] : selectableDescendants[(index + 1) % selectableDescendants.length];
     }
-
     function getPreviousOption() {
       let atTop = index === 0;
-      return atTop
-        ? rotate
-          ? getLastOption()
-          : selectableDescendants[index]
-        : selectableDescendants[
-            (index - 1 + selectableDescendants.length) %
-              selectableDescendants.length
-          ];
+      return atTop ? rotate ? getLastOption() : selectableDescendants[index] : selectableDescendants[(index - 1 + selectableDescendants.length) % selectableDescendants.length];
     }
-
     function getFirstOption() {
       return selectableDescendants[0];
     }
-
     function getLastOption() {
       return selectableDescendants[selectableDescendants.length - 1];
     }
-
     switch (event.key) {
       case 'ArrowDown':
         if (orientation === 'vertical' || orientation === 'both') {
@@ -413,9 +315,7 @@ export function useDescendantKeyDown<
         break;
       case 'PageUp':
         event.preventDefault();
-        let prevOrFirst = (
-          event.ctrlKey ? getPreviousOption : getFirstOption
-        )();
+        let prevOrFirst = (event.ctrlKey ? getPreviousOption : getFirstOption)();
         callback(key === 'option' ? prevOrFirst : prevOrFirst[key]);
         break;
       case 'Home':
@@ -435,4 +335,4 @@ export function useDescendantKeyDown<
         break;
     }
   };
-}
+}