@sproutsocial/racine 12.24.0 → 13.1.1

package/__flow__/Numeral/tests/testNumeral.js

@@ -1,48 +1,40 @@
 /* eslint-env jest, node */
 import React from 'react';
-import {render, fireEvent} from '../../utils/react-testing-library';
-import 'jest-styled-components';
-import Numeral from '..';
-
-jest.mock('../constants', () => ({
-  ...jest.requireActual('../constants'),
+import { render, fireEvent, screen } from "../../utils/react-testing-library";
+import { Numeral } from "../..";
+jest.mock("../constants", () => ({
+  ...jest.requireActual("../constants"),
   MEMO_CACHE_SIZE: 0,
-  COMPARE_OBJECTS: false,
+  COMPARE_OBJECTS: false
 }));
-
 const testNumeral = (value, options = {}, texts) => {
-  const {text: mainText, tip: tooltipText} = texts;
-
+  const {
+    text: mainText,
+    tip: tooltipText
+  } = texts;
   if (tooltipText) {
     test(`Should display  ${value}  abbreviated as -> ${mainText}  with tooltip -> ${tooltipText}  `, async () => {
-      const {container, findByText, getByText} = render(
-        <Numeral number={value} {...options} />
-      );
-
-      const numeral = getByText(mainText);
+      const {
+        container
+      } = render(<Numeral number={value} {...options} />);
+      const numeral = screen.getByText(mainText);
       const tooltip = container.querySelector('[data-qa-tooltip]');
-
       fireEvent.mouseOver(numeral);
-
-      const content = await findByText(tooltipText);
-
-      expect(numeral).toBeTruthy();
+      const content = await screen.findByText(tooltipText);
+      expect(numeral).toBeInTheDocument();
       expect(tooltip).toBeTruthy();
-      expect(content).toBeTruthy();
+      expect(content).toBeInTheDocument();
     });
   } else {
     test(`Should display  ${value}  as -> ${mainText}  with no tooltip  `, () => {
-      const {container, getByText} = render(
-        <Numeral number={value} {...options} />
-      );
-
-      const numeral = getByText(mainText);
+      const {
+        container
+      } = render(<Numeral number={value} {...options} />);
+      const numeral = screen.getByText(mainText);
       const tooltip = container.querySelector('[data-qa-tooltip]');
-
-      expect(numeral).toBeTruthy();
+      expect(numeral).toBeInTheDocument();
       expect(tooltip).toBeFalsy();
     });
   }
 };
-
-export default testNumeral;
+export default testNumeral;

package/__flow__/OverflowList/index.flow.js

@@ -1,7 +1,6 @@
 // @flow
 import * as React from 'react';
-import type {TypeContainerProps} from '../Box/styles';
-
+import type { TypeContainerProps } from "../Box/styles";
 export type TypeVirtualizedListProps = {|
   items: Array<*>,
   ItemComponent: React.ComponentType<*>,
@@ -9,14 +8,13 @@ export type TypeVirtualizedListProps = {|
   itemWrapperProps?: TypeContainerProps,
   containerProps?: TypeContainerProps,
 |};
-
-export type TypeOverflowListProps<Item, Props> = {|
+export type TypeOverflowListProps = {|
   height: string,
   width: string,
-  items?: Array<Item>,
+  items?: Array<*>,
   children?: React.Node,
-  ItemComponent?: React.ComponentType<Props>,
-  getItemProps?: (Item) => Props,
+  ItemComponent?: React.ComponentType<*>,
+  getItemProps?: (*) => *,
   itemWrapperProps?: TypeContainerProps,
   containerProps?: TypeContainerProps,
-|};
+|};

package/__flow__/OverflowList/index.js

@@ -1,84 +1,60 @@
 // @flow
-import List from './styles';
-import React, {useCallback, useMemo} from 'react';
-import {AutoSizer, CellMeasurer, CellMeasurerCache} from 'react-virtualized';
-
-import Box from '../Box';
-
-import type {
-  TypeVirtualizedListProps,
-  TypeOverflowListProps,
-} from './index.flow';
-
+import React, { useCallback, useMemo } from 'react';
+import { AutoSizer, CellMeasurer, CellMeasurerCache } from 'react-virtualized';
+import Box from "../Box";
+import List from "./styles";
+import type { TypeVirtualizedListProps, TypeOverflowListProps } from "./index.flow";
 const VirtualizedList = ({
   items,
   ItemComponent,
   getItemProps,
   itemWrapperProps,
-  containerProps,
+  containerProps
 }: TypeVirtualizedListProps) => {
-  const cache = useMemo(
-    () =>
-      new CellMeasurerCache({
-        defaultWidth: '100%',
-        defaultHeight: '20px',
-        fixedWidth: true,
-      }),
-    []
-  );
-
-  const rowRenderer = useCallback(
-    ({index, key, style, parent}) => {
-      return (
-        <CellMeasurer
-          columnIndex={0}
-          rowIndex={index}
-          key={`CellMeasurer-${key}`}
-          cache={cache}
-          parent={parent}
-        >
-          {({measure, registerChild}) => (
-            <Box ref={registerChild} {...itemWrapperProps} style={style}>
-              <ItemComponent
-                {...getItemProps({
-                  key,
-                  measure,
-                  item: items[index],
-                })}
-              />
-            </Box>
-          )}
-        </CellMeasurer>
-      );
-    },
-    [items, getItemProps, cache, itemWrapperProps]
-  );
-
-  return (
-    <AutoSizer>
-      {({height, width}) => (
-        <List
-          height={height}
-          width={width}
-          rowHeight={cache.rowHeight}
-          rowRenderer={rowRenderer}
-          rowCount={items.length}
-          {...containerProps}
-        />
-      )}
-    </AutoSizer>
-  );
+  const cache = useMemo(() => new CellMeasurerCache({
+    defaultWidth: '100%',
+    defaultHeight: '20px',
+    fixedWidth: true
+  }), []);
+  const rowRenderer = useCallback(({
+    index,
+    key,
+    style,
+    parent
+  }) => {
+    return <CellMeasurer columnIndex={0} rowIndex={index} key={`CellMeasurer-${key}`} cache={cache} parent={parent}>
+          {({
+        measure,
+        registerChild
+      }) => <Box ref={registerChild} {...itemWrapperProps} style={style}>
+              <ItemComponent {...getItemProps({
+          key,
+          measure,
+          item: items[index]
+        })} />
+            </Box>}
+        </CellMeasurer>;
+  }, [items, getItemProps, cache, itemWrapperProps]);
+  return <AutoSizer>
+      {({
+      height,
+      width
+    }) => <List height={height} width={width} rowHeight={cache.rowHeight} rowRenderer={rowRenderer} rowCount={items.length} {...containerProps} />}
+    </AutoSizer>;
 };
-
-const ListItem = ({children}) => <React.Fragment>{children}</React.Fragment>;
-
-const propGetter = ({item, key, measure}) => {
+const ListItem = ({
+  children
+}) => <React.Fragment>{children}</React.Fragment>;
+const propGetter = ({
+  item,
+  key,
+  measure
+}) => {
   return {
     children: React.cloneElement(item),
-    key,
+    key
   };
 };
-
 const defaultProp = {};
 const OverflowList = ({
   height,
@@ -89,24 +65,11 @@ const OverflowList = ({
   getItemProps = propGetter,
   WrapperComponent = Box,
   itemWrapperProps = defaultProp,
-  containerProps = defaultProp,
-}: TypeOverflowListProps<*, *>) => {
-  const itemsArray = useMemo(
-    () => (items ? items : React.Children.toArray(children)),
-    [children, items]
-  );
-
-  return (
-    <WrapperComponent height={height} width={width}>
-      <VirtualizedList
-        items={itemsArray}
-        ItemComponent={ItemComponent}
-        getItemProps={getItemProps}
-        itemWrapperProps={itemWrapperProps}
-        containerProps={containerProps}
-      />
-    </WrapperComponent>
-  );
+  containerProps = defaultProp
+}: TypeOverflowListProps) => {
+  const itemsArray = useMemo(() => items ? items : React.Children.toArray(children), [children, items]);
+  return <WrapperComponent height={height} width={width}>
+      <VirtualizedList items={itemsArray} ItemComponent={ItemComponent} getItemProps={getItemProps} itemWrapperProps={itemWrapperProps} containerProps={containerProps} />
+    </WrapperComponent>;
 };
-
-export default OverflowList;
+export default OverflowList;

package/__flow__/OverflowList/styles.js

@@ -1,22 +1,13 @@
 //@flow
 import * as React from 'react';
-import styled, {type StyledComponent} from 'styled-components';
-import {
-  COMMON,
-  BORDER,
-  LAYOUT,
-  POSITION,
-  FLEXBOX,
-  GRID,
-} from '../utils/system-props';
-
-import {List} from 'react-virtualized';
-
-const Container: StyledComponent<*, *, *> = styled((props) => (
-  <List {...props} />
-))`
+import { List } from 'react-virtualized';
+import styled, { type StyledComponent } from 'styled-components';
+import { COMMON, BORDER, LAYOUT, POSITION, FLEXBOX, GRID } from "../utils/system-props";
+const Container: StyledComponent<*, *, *> = styled(props => <List {...props} />)`
   box-sizing: border-box;
-  font-family: ${({theme}) => theme.fontFamily};
+  font-family: ${({
+  theme
+}) => theme.fontFamily};
 
   ${COMMON}
   ${BORDER}
@@ -25,5 +16,4 @@ const Container: StyledComponent<*, *, *> = styled((props) => (
   ${FLEXBOX}
   ${GRID}
 `;
-
-export default Container;
+export default Container;

package/__flow__/PartnerLogo/TypePartnerNames.js

@@ -1,40 +1,3 @@
 // @flow strict-local
 
-export type TypePartnerNames =
-  | 'zendesk'
-  | 'dropbox'
-  | 'bigcommerce'
-  | 'bitly'
-  | 'canva'
-  | 'twitter'
-  | 'twitter-audience-network'
-  | 'whatsapp'
-  | 'yelp'
-  | 'youtube'
-  | 'shopify'
-  | 'pinterest'
-  | 'microsoft-dynamics'
-  | 'marketo'
-  | 'slack'
-  | 'woocommerce'
-  | 'tripadvisor'
-  | 'tumblr'
-  | 'google-business-messages'
-  | 'reddit'
-  | 'hubspot'
-  | 'feedly'
-  | 'facebook'
-  | 'facebook-shops'
-  | 'facebook-groups'
-  | 'facebook-audience-network'
-  | 'glassdoor'
-  | 'salesforce'
-  | 'instagram'
-  | 'linkedin'
-  | 'linkedin-audience-network'
-  | 'google-analytics'
-  | 'messenger'
-  | 'google-my-business'
-  | 'google-drive'
-  | 'tiktok'
-  | 'sproutsocial';
+export type TypePartnerNames = 'zendesk' | 'dropbox' | 'bigcommerce' | 'bitly' | 'canva' | 'twitter' | 'twitter-audience-network' | 'whatsapp' | 'yelp' | 'youtube' | 'shopify' | 'pinterest' | 'microsoft-dynamics' | 'marketo' | 'slack' | 'woocommerce' | 'tripadvisor' | 'tumblr' | 'google-business-messages' | 'reddit' | 'hubspot' | 'feedly' | 'facebook' | 'facebook-shops' | 'facebook-groups' | 'facebook-audience-network' | 'glassdoor' | 'salesforce' | 'instagram' | 'linkedin' | 'linkedin-audience-network' | 'google-analytics' | 'messenger' | 'google-my-business' | 'google-drive' | 'tiktok' | 'sproutsocial' | 'google-play-store' | 'apple-app-store';

package/__flow__/PartnerLogo/index.flow.js

@@ -0,0 +1,19 @@
+// @flow
+import type { TypePartnerNames } from "./TypePartnerNames";
+export type TypePartnerLogoProps = {
+  /** The name of the partner whose logo you want to render. */
+  partnerName: TypePartnerNames,
+  /** Manually override the default mode behavior by rendering a logo based on the background it's displayed on. */
+  backgroundType?: 'dark' | 'light',
+  logoType?: 'wordmark' | 'lockup',
+  height?: string,
+  width?: string,
+  size?: 'mini' // 12x12
+  | 'small' // 16x16
+  | 'medium' // 24x24
+  | 'large' // 32x32
+  | 'jumbo',
+
+    // 64x64
+  ...
+};

package/__flow__/PartnerLogo/index.js

@@ -1,26 +1,14 @@
 // @flow
 import React from 'react';
-import logoViewBoxes from '../LogoViewBoxes';
-import type {TypePartnerNames} from './TypePartnerNames';
-import {useTheme} from 'styled-components';
-import Container from './styles';
-
-export type TypeProps = {
-  /** The name of the partner whose logo you want to render. */
-  partnerName: TypePartnerNames,
-  /** Manually override the default mode behavior by rendering a logo based on the background it's displayed on. */
-  backgroundType?: 'dark' | 'light',
-  logoType?: 'wordmark' | 'lockup',
-  height?: string,
-  width?: string,
-  size?:
-    | 'mini' // 12x12
-    | 'small' // 16x16
-    | 'medium' // 24x24
-    | 'large' // 32x32
-    | 'jumbo', // 64x64
-};
+import { useTheme } from 'styled-components';
+import logoViewBoxes from "../LogoViewBoxes";
+import Container from "./styles";
+import type { TypePartnerLogoProps } from "./index.flow";
 
+/**
+ * @deprecated Use TypePartnerLogoProps from root instead
+ */
+export type TypeProps = TypePartnerLogoProps;
 const PartnerLogo = ({
   partnerName,
   backgroundType,
@@ -29,9 +17,11 @@ const PartnerLogo = ({
   width,
   size,
   ...rest
-}: TypeProps) => {
-  const {mode} = useTheme();
-  const whichLogo = (type) => {
+}: TypePartnerLogoProps) => {
+  const {
+    mode
+  } = useTheme();
+  const whichLogo = type => {
     const logo = logoType ? partnerName + '-' + logoType : partnerName;
     if (type && type === 'dark') {
       return `${logo}-dark`;
@@ -47,24 +37,15 @@ const PartnerLogo = ({
   const viewBoxCoordinates = logoViewBox?.split(' ') || [];
   const defaultWidth = viewBoxCoordinates[2];
   const defaultHeight = viewBoxCoordinates[3];
-
   return (
+    // $FlowIssue - upgrade v0.112.0
     <Container
-      //we add pixels here because view box coordinates are numbers
-      height={height ? height : defaultHeight + 'px'}
-      width={width ? width : defaultWidth + 'px'}
-      logoSize={size}
-      // $FlowIssue - upgrade v0.112.0
-      {...rest}
-    >
+    //we add pixels here because view box coordinates are numbers
+    height={height ? height : defaultHeight + 'px'} width={width ? width : defaultWidth + 'px'} logoSize={size} {...rest}>
       <svg className="logo-svg" viewBox={logoViewBox} focusable={false}>
-        <use
-          xmlnsXlink="http://www.w3.org/1999/xlink"
-          xlinkHref={`#sslogosvg-${whichLogo(backgroundType)}`}
-        />
+        <use xmlnsXlink="http://www.w3.org/1999/xlink" xlinkHref={`#sslogosvg-${whichLogo(backgroundType)}`} />
       </svg>
     </Container>
   );
 };
-
-export default PartnerLogo;
+export default PartnerLogo;

package/__flow__/PartnerLogo/styles.js

@@ -1,17 +1,15 @@
 //@flow
-import styled, {css, type StyledComponent} from 'styled-components';
-import {COMMON, FLEXBOX} from '../utils/system-props';
-import {verticalAlign} from 'styled-system';
-import type {TypeTheme} from '../types/theme.flow';
-
+import styled, { css, type StyledComponent } from 'styled-components';
+import { verticalAlign } from 'styled-system';
+import { COMMON, FLEXBOX } from "../utils/system-props";
+import type { TypeTheme } from "../types/theme.flow";
 const sizes = {
   mini: '12px',
   small: '16px',
   medium: '24px',
   large: '32px',
-  jumbo: '64px',
+  jumbo: '64px'
 };
-
 const stylesForSize = (height, width, logoSize) => css`
   line-height: ${logoSize ? logoSize : height};
 
@@ -21,18 +19,16 @@ const stylesForSize = (height, width, logoSize) => css`
     width: ${logoSize ? logoSize : ''};
   }
 `;
-
 const Container: StyledComponent<{...}, TypeTheme, *> = styled.span.attrs({
-  className: 'logo',
+  className: 'logo'
 })`
   display: inline-block;
   color: inherit;
   vertical-align: middle;
-  ${(props) => stylesForSize(props.height, props.width, sizes[props.logoSize])};
+  ${props => stylesForSize(props.height, props.width, sizes[props.logoSize])};
 
   ${COMMON}
   ${FLEXBOX}
   ${verticalAlign}
 `;
-
-export default Container;
+export default Container;

package/__flow__/Popout/index.flow.js

@@ -0,0 +1,89 @@
+// @flow
+import * as React from 'react';
+import type { PopperProps } from 'react-popper';
+
+// Seeds docs can't parse $Keys<typeof placements> yet
+export type EnumPlacements = 'auto' | 'top' | 'right' | 'bottom' | 'left' | 'top-start' | 'right-start' | 'bottom-start' | 'left-start' | 'top-end' | 'right-end' | 'bottom-end' | 'left-end';
+export type TypeFocusLockProps = {|
+  disabled?: boolean,
+  returnFocus?: boolean | {|
+    preventScroll?: boolean
+  |},
+  persistentFocus?: boolean,
+  autoFocus?: boolean,
+  noFocusGuards?: boolean | 'tail',
+  group?: string,
+  className?: string,
+  onActivation?: (node: HTMLElement) => void,
+  onDeactivation?: (node: HTMLElement) => void,
+  as?: string | React.Element<any>,
+  lockProps?: any,
+  ref?: any,
+  whiteList?: (activeElement: HTMLElement) => boolean,
+  shards?: Array<any>,
+  children?: React.Node,
+|};
+export type TypePopoutProps = {
+  /**
+   * Is the popout open? This prop is optional. By using it, you will lose some automatic handling of the logic for opening and closing the popout.
+   */
+  isOpen?: boolean,
+  /**
+   * If you use the isOpen prop you will need to pass a handler to change the state of the popout
+   */
+  setIsOpen?: (isOpen: boolean, event?: MouseEvent | KeyboardEvent) => void,
+  /**
+   * The content to be shown in the popout. If there is no content, just the children are rendered
+   */
+  content: ?React.Element<any> | ?(opts: {
+    hide: () => void
+  }) => React.Element<any>,
+  /**
+   * The content that the popout should be attached to
+   */
+  children: React.Element<any> | ((opts: {
+    ref: (React.ElementRef<any> | HTMLElement) => void,
+    toggle: () => void,
+    show: () => void,
+    hide: () => void,
+    ariaProps: Object,
+  }) => React.Node),
+  /** How the popped-out content should be placed, in relationship to the children */
+  placement?: EnumPlacements,
+  /**
+   * Should the popped-out content inherit its width from the children?
+   * This is useful for typeaheads and other places where a popout needs to match the width of a given element.
+   */
+  fullWidth?: boolean,
+  /**
+   *  When the popout has opened, should we focus on its content?
+   *  Focus will be brought inside by looking for elements with [autofocus] first, [tabindex] second and buttons/links/other natively-focusable elements last.
+   *  Upon closing the popout, focus will be returned to the popout's target.
+   *  If nothing within your popout's content is focusable, this prop will do nothing.
+   */
+  focusOnContent?: boolean,
+  qa?: {
+    [string]: string
+  },
+  zIndex?: number,
+  /**
+   * Override react-popper per the API documentation here: https://github.com/FezVrasta/react-popper#api-documentation
+   */
+  popperProps?: $Shape<PopperProps>,
+  onClose?: () => void,
+  onOpen?: () => void,
+  /**
+   * And optional callback to receive the scheduleUpdate function.
+   * Use the function to recalculate the popout position in relation to the contents.
+   */
+  scheduleUpdateRef?: (() => void) => void,
+  /**
+   * Mount the popout at the bottom of the DOM (using React.Portal) instead of inside the current DOM tree
+   */
+  appendToBody?: boolean,
+  /**
+   * Override `FocusLock` props, see the API documentation for more details: https://github.com/theKashey/react-focus-lock#api
+   */
+  focusLockProps?: TypeFocusLockProps,
+  ...
+};