@sproutsocial/racine 13.8.0 → 14.0.0

package/__flow__/Loader/styles.js

@@ -1,82 +0,0 @@
-//@flow
-import { rgba } from 'polished';
-import styled, { css, keyframes, type StyledComponent } from 'styled-components';
-import { visuallyHidden } from "../utils/mixins";
-import { COMMON } from "../utils/system-props";
-import type { TypeTheme } from "../types/theme.flow";
-const getSize = size => {
-  const spinnerSize = Math.ceil(size * 0.9);
-  const borderWidth = Math.ceil(size * 0.1);
-  return css`
-    width: ${size}px;
-    height: ${size}px;
-
-    &:after {
-      width: ${spinnerSize}px;
-      height: ${spinnerSize}px;
-      box-sizing: border-box;
-      border-width: ${borderWidth}px;
-    }
-
-    .no-cssanimations &::after {
-      background-size: ${spinnerSize}px;
-    }
-  `;
-};
-const getColor = color => css`
-  &:after {
-    border-color: ${rgba(color, 0.3)} ${rgba(color, 0.3)} ${rgba(color, 0.7)}
-      ${rgba(color, 0.7)};
-  }
-`;
-const spin = keyframes`
-  from {
-    transform: translate(-50%,-50%) rotate(0deg);
-  }
-  to {
-    transform: translate(-50%,-50%) rotate(360deg);
-  }
-`;
-const delay = keyframes`
-  0% {
-    opacity: 0;
-  }
-  80% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-`;
-const Container: StyledComponent<{...}, TypeTheme, *> = styled.div.attrs({
-  className: 'Loader'
-})`
-  position: relative;
-  margin: 0 auto;
-  overflow: hidden;
-
-  &:after {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    border-style: solid;
-    border-radius: 50%;
-    content: '';
-    transition: opacity 250ms;
-
-    animation: ${props => props.delay ? css`
-            ${spin} 2.25s infinite linear, ${delay} 2s 1
-          ` : css`
-            ${spin} 2.25s infinite linear
-          `};
-  }
-
-  ${props => props.small ? getSize(20) : getSize(40)}
-  ${props => props.dark ? getColor(props.theme.colors.neutral[400]) : getColor(props.theme.colors.neutral[0])}
-
-  ${COMMON}
-`;
-export const Text: StyledComponent<{...}, TypeTheme, *> = styled.div`
-  ${visuallyHidden}
-`;
-export default Container;

package/__flow__/LoaderButton/index.js

@@ -1,74 +0,0 @@
-// @flow
-import * as React from 'react';
-import { rgba } from 'polished';
-import styled, { css, useTheme } from 'styled-components';
-import { COLOR_NEUTRAL_0, COLOR_NEUTRAL_1000 } from '@sproutsocial/seeds-color';
-import Box from "../Box";
-import Button from "../Button";
-import Loader from "../Loader";
-import type { TypeLoaderButtonProps } from "./index.flow";
-
-// TODO: This is a temporary solution to get the loader button to work with dark mode
-const getColor = (appearance, themeColorMode) => {
-  const selectColorBasedOnMode = themeColorMode === 'dark' ? 'light' : 'dark';
-  switch (appearance) {
-    case 'unstyled':
-      return selectColorBasedOnMode;
-    case 'primary':
-      return 'light';
-    case 'secondary':
-      return selectColorBasedOnMode;
-    case 'destructive':
-      return 'light';
-    case 'placeholder':
-      return selectColorBasedOnMode;
-    case 'pill':
-      return selectColorBasedOnMode;
-    case 'outline':
-      // This case doesn't even make sense.... There's no outline button
-      // TODO: investigate if this is even used anywhere
-      return 'light';
-    default:
-      return 'light';
-  }
-};
-const CustomLoader = styled(Loader)`
-  &:after {
-    ${p => p.color === 'light' && css`
-        border-color: ${rgba(COLOR_NEUTRAL_0, 0.5)}
-          ${rgba(COLOR_NEUTRAL_0, 0.5)} ${rgba(COLOR_NEUTRAL_0, 1)}
-          ${rgba(COLOR_NEUTRAL_0, 1.0)};
-      `}
-
-    ${p => p.color === 'dark' && css`
-        border-color: ${rgba(COLOR_NEUTRAL_1000, 0.5)}
-          ${rgba(COLOR_NEUTRAL_1000, 0.5)} ${rgba(COLOR_NEUTRAL_1000, 1)}
-          ${rgba(COLOR_NEUTRAL_1000, 1.0)};
-      `}
-  }
-`;
-export const LoaderButton = ({
-  appearance = 'unstyled',
-  isLoading: _isLoading = false,
-  disabled,
-  loaderLabel,
-  children,
-  // $FlowIssue - can't determine type of rest
-  ...rest
-}: TypeLoaderButtonProps) => {
-  const isLoading = Boolean(_isLoading);
-  const {
-    mode: themeColorMode
-  } = useTheme();
-  return <Button disabled={disabled || isLoading} appearance={appearance} data-qa-button-isloading={isLoading === true} {...rest}>
-      <Box position="relative">
-        <Box opacity={isLoading ? 0 : 1} aria-hidden={isLoading}>
-          {children}
-        </Box>
-        {isLoading && <Box position="absolute" top={-2} left={0} right={0} bottom={0}>
-            <CustomLoader text={loaderLabel} size="small" delay={false} color={getColor(appearance, themeColorMode)} />
-          </Box>}
-      </Box>
-    </Button>;
-};
-export default LoaderButton;

package/__flow__/Menu/constants.js

@@ -1,14 +0,0 @@
-// @flow
-
-export const MENU_ROLES = Object.freeze({
-  MENU: 'menu',
-  LIST: 'list',
-  LISTBOX: 'listbox'
-});
-export const MENU_ITEM_ROLES = Object.freeze({
-  MENUITEM: 'menuitem',
-  LISTITEM: 'listitem',
-  OPTION: 'option',
-  RADIO: 'menuitemradio',
-  CHECKBOX: 'menuitemcheckbox'
-});

package/__flow__/Menu/descendants.js

@@ -1,338 +0,0 @@
-// @flow
-/* eslint-disable */
-import * as React 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
- * pre-release and unstable, so instead of importing it, we copied it here and changed the types from TypeScript to
- * Flow. If the package ever stabilizes, we can import these functions from there and remove this file.
- */
-
-export type TypeDescendant<ElementType, DescendantProps> = {|
-  ...DescendantProps,
-  element: ElementType | null,
-  index: number,
-|};
-type TypeDescendantContext<ElementType, DescendantProps> = {
-  descendants: TypeDescendant<ElementType, DescendantProps>[],
-  registerDescendant(descendant: $Diff<TypeDescendant<ElementType, DescendantProps>, {|
-    index: number
-  |}>): void,
-  unregisterDescendant(element: ElementType | null): void,
-  ...
-};
-const noop = () => {};
-
-/**
- * Returns the previous value of a reference after a component update.
- *
- * @param value
- */
-export function usePrevious<ValueType: any>(value: ValueType) {
-  const ref = useRef<ValueType | null>(null);
-  useEffect(() => {
-    ref.current = value;
-  }, [value]);
-  return ref.current;
-}
-
-/**
- * Wraps a lib-defined event handler and a user-defined event handler, returning
- * a single handler that allows a user to prevent lib-defined handlers from
- * firing.
- *
- * @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 => {
-    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';
-}
-const useIsomorphicLayoutEffect = canUseDOM() ? useLayoutEffect : useEffect;
-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, {
-    descendants: [],
-    registerDescendant: noop,
-    unregisterDescendant: noop,
-    ...initialValue
-  });
-}
-
-/**
- * This hook registers our descendant by passing it into an array. We can then
- * search that array by to find its index when registering it in the component.
- * We use this for focus management, keyboard navigation, and typeahead
- * functionality for some components.
- *
- * The hook accepts the element node and (optionally) a key. The key is useful
- * if multiple descendants have identical text values and we need to
- * differentiate siblings for some reason.
- *
- * Our main goals with this are:
- *   1) maximum composability,
- *   2) minimal API friction
- *   3) SSR compatibility*
- *   4) concurrent safe
- *   5) index always up-to-date with the tree despite changes
- *   6) works with memoization of any component in the tree (hopefully)
- *
- * * As for SSR, the good news is that we don't actually need the index on the
- * server for most use-cases, as we are only using it to determine the order of
- * 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) {
-  let [, forceUpdate] = useState();
-  let {
-    registerDescendant,
-    unregisterDescendant,
-    descendants
-  } = useContext<TypeDescendantContext<ElementType, DescendantProps>>(context);
-
-  // Prevent any flashing
-  useIsomorphicLayoutEffect(() => {
-    if (!element) forceUpdate({});
-    registerDescendant({
-      element,
-      ...rest
-    });
-    return () => unregisterDescendant(element);
-  }, [element, ...Object.values(rest)]);
-  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
-}: {
-  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
-        };
-        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)];
-        }
-      }
-      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);
-  let {
-    callback,
-    currentIndex,
-    filter,
-    key = 'index',
-    orientation = 'vertical',
-    rotate = true,
-    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)) {
-      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;
-
-    // Current index should map to the updated array vs. the original
-    // descendants array.
-    if (filter) {
-      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];
-    }
-    function getPreviousOption() {
-      let atTop = index === 0;
-      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') {
-          event.preventDefault();
-          let next = getNextOption();
-          callback(key === 'option' ? next : next[key]);
-        }
-        break;
-      case 'ArrowUp':
-        if (orientation === 'vertical' || orientation === 'both') {
-          event.preventDefault();
-          let prev = getPreviousOption();
-          callback(key === 'option' ? prev : prev[key]);
-        }
-        break;
-      case 'ArrowLeft':
-        if (orientation === 'horizontal' || orientation === 'both') {
-          event.preventDefault();
-          let nextOrPrev = (rtl ? getNextOption : getPreviousOption)();
-          callback(key === 'option' ? nextOrPrev : nextOrPrev[key]);
-        }
-        break;
-      case 'ArrowRight':
-        if (orientation === 'horizontal' || orientation === 'both') {
-          event.preventDefault();
-          let prevOrNext = (rtl ? getPreviousOption : getNextOption)();
-          callback(key === 'option' ? prevOrNext : prevOrNext[key]);
-        }
-        break;
-      case 'PageUp':
-        event.preventDefault();
-        let prevOrFirst = (event.ctrlKey ? getPreviousOption : getFirstOption)();
-        callback(key === 'option' ? prevOrFirst : prevOrFirst[key]);
-        break;
-      case 'Home':
-        event.preventDefault();
-        let first = getFirstOption();
-        callback(key === 'option' ? first : first[key]);
-        break;
-      case 'PageDown':
-        event.preventDefault();
-        let nextOrLast = (event.ctrlKey ? getNextOption : getLastOption)();
-        callback(key === 'option' ? nextOrLast : nextOrLast[key]);
-        break;
-      case 'End':
-        event.preventDefault();
-        let last = getLastOption();
-        callback(key === 'option' ? last : last[key]);
-        break;
-    }
-  };
-}

package/__flow__/Menu/hooks.js

@@ -1,156 +0,0 @@
-// @flow
-import { createContext, useContext, useEffect } from 'react';
-import scrollIntoViewIfNeeded from 'scroll-into-view-if-needed';
-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
-  },
-  value: undefined,
-  multiselect: false,
-  onChange: undefined,
-  state: {
-    selectionIndex: 0,
-    filterQuery: '',
-    filteredItems: null,
-    isFilterInputFocused: false
-  },
-  setState: () => {},
-  selectCallbacks: {
-    current: []
-  }
-});
-export const MenuButtonContext = createContext<TypeMenuButtonContext>({
-  closeOnItemClick: undefined,
-  closePopout: undefined
-});
-export type TypeMenuDescendantProps = {|
-  id: string,
-  label: ?string,
-  value?: string,
-  disabled?: boolean,
-|};
-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 = '') {
-  if (!string) {
-    return null;
-  }
-  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
-    }
-  } = useContext(MenuContext);
-  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
-      });
-    } 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) {
-      setState({
-        selectionIndex: items.findIndex(i => i.index === prevSelected.index)
-      });
-    }
-  }, [setState, items, prevMenuItemsLength, prevSelected, prevSelectionIndex, selectionIndex]);
-  useEffect(() => {
-    const newFilteredItems = filterItemsFromTypeahead(items, filterQuery);
-    if (filterQuery && newFilteredItems && filteredItems?.length !== newFilteredItems?.length) {
-      setState({
-        filteredItems: newFilteredItems,
-        selectionIndex: newFilteredItems[0]
-      });
-    } else if (!filterQuery && filteredItems !== null) {
-      setState({
-        filteredItems: null
-      });
-    }
-  }, [filterQuery, items, setState, filteredItems]);
-  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:
-          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
-        });
-      }
-    }))
-  };
-}