@sproutsocial/racine 12.24.0 → 13.1.1

package/__flow__/Modal/index.js

@@ -1,120 +1,74 @@
 // @flow
 import * as React from 'react';
-import {useContext} from 'react';
-import Box from '../Box';
-import Icon from '../Icon';
-import Button from '../Button';
-import Text from '../Text';
-import {Container, Content, Header, Footer, Body} from './styles';
-
+import { useContext } from 'react';
+import Box from "../Box";
+import Button from "../Button";
+import Icon from "../Icon";
+import Text from "../Text";
+import { Container, Content, Header, Footer, Body } from "./styles";
+import type { TypeModalProps, TypeModalCloseButtonProps, TypeModalContentProps, TypeModalFooterProps, TypeModalHeaderProps } from "./index.flow";
 type TypeModalContext = $Shape<{
   onClose: () => any,
   closeButtonLabel: string,
   label: string,
+  ...
 }>;
-
-type TypeModalHeaderProps = {
-  title?: string,
-  subtitle?: string,
-  /** Passing children will override the default modal header */
-  children?: React.Node,
-  /** If you're rendering a custom header, you can use this prop to add a bottom border */
-  bordered?: boolean,
-};
-
 const ModalContext = React.createContext<TypeModalContext>({});
-
 const ModalHeader = (props: TypeModalHeaderProps) => {
-  const {title, subtitle, children, bordered, ...rest} = props;
-
+  const {
+    title,
+    subtitle,
+    children,
+    bordered,
+    ...rest
+  } = props;
   return (
     // $FlowIssue - upgrade v0.112.0
     <Header bordered={title || subtitle || bordered} {...rest}>
-      {children ? (
-        children
-      ) : (
-        <React.Fragment>
+      {children ? children : <React.Fragment>
           <Box>
-            {title && (
-              <Text as="h1" fontSize={400} fontWeight="semibold">
+            {title && <Text as="h1" fontSize={400} fontWeight="semibold">
                 {title}
-              </Text>
-            )}
-            {subtitle && (
-              <Text as="div" fontSize={200}>
+              </Text>}
+            {subtitle && <Text as="div" fontSize={200}>
                 {subtitle}
-              </Text>
-            )}
+              </Text>}
           </Box>
           <Box display="flex" alignItems="center" justify-content="flex-end">
             <ModalCloseButton ml={400} />
           </Box>
-        </React.Fragment>
-      )}
+        </React.Fragment>}
     </Header>
   );
 };
-
-const ModalCloseButton = (props) => {
-  const {onClose, closeButtonLabel} = useContext(ModalContext);
-
+const ModalCloseButton = (props: TypeModalCloseButtonProps) => {
+  const {
+    onClose,
+    closeButtonLabel
+  } = useContext(ModalContext);
   if (!onClose) return null;
-
-  return (
-    <Button onClick={onClose} {...props}>
+  return <Button onClick={onClose} {...props}>
       <Icon name="x" ariaLabel={closeButtonLabel} />
-    </Button>
-  );
-};
-
-type TypeModalFooterProps = {
-  bg?: string,
-  children: React.Node,
+    </Button>;
 };
-
-const ModalFooter = (props: TypeModalFooterProps) => (
-  // $FlowIssue - upgrade v0.112.0
-  <Footer borderTop={500} borderColor="container.border.base" {...props} />
-);
-
+const ModalFooter = (props: TypeModalFooterProps) =>
+// $FlowIssue - upgrade v0.112.0
+<Footer borderTop={500} borderColor="container.border.base" {...props} />;
 ModalFooter.defaultProps = {
-  bg: 'container.background.base',
-};
-
-type TypeModalContentProps = React.ElementProps<typeof Box> & {
-  children?: React.Node,
+  bg: 'container.background.base'
 };
-
-const ModalContent = React.forwardRef(
+const ModalContent = React.forwardRef(({
+  children,
   // $FlowIssue - upgrade v0.112.0
-  ({children, ...rest}: TypeModalContentProps, ref) => {
-    const {label} = useContext(ModalContext);
-    return (
-      <Content data-qa-modal data-qa-label={label} ref={ref} {...rest}>
+  ...rest
+}: TypeModalContentProps, ref) => {
+  const {
+    label
+  } = useContext(ModalContext);
+  return <Content data-qa-modal data-qa-label={label} ref={ref} {...rest}>
         {children}
-      </Content>
-    );
-  }
-);
-
-type TypeModalProps = {
-  /** section of app to aria hide for the modal */
-  appElementSelector?: string,
-  /** trigger to open or close the modal */
-  isOpen: boolean,
-  /** label for screen readers to announce the modal */
-  label: string,
-  /** body content of the modal */
-  children: React.Node,
-  /** callback for close */
-  onClose?: () => any,
-  /** aria-label for modal X */
-  closeButtonLabel: string,
-  /** Controls the z-index CSS property */
-  zIndex: number,
-  /** The max width of the modal container */
-  width: string | number,
-};
+      </Content>;
+});
 
 /**
  * The modal you want
@@ -131,66 +85,38 @@ const Modal = (props: TypeModalProps) => {
     zIndex,
     ...rest
   } = props;
-
   const isCloseable = Boolean(onClose);
-
-  const appElement =
-    appElementSelector && document
-      ? document.querySelector(appElementSelector)
-      : null;
-
+  const appElement = appElementSelector && document ? document.querySelector(appElementSelector) : null;
   return (
-    <Container
-      appElement={appElement}
-      ariaHideApp={!!appElement}
-      isOpen={isOpen}
-      contentLabel={label}
-      onRequestClose={onClose || (() => {})}
-      shouldFocusAfterRender={true}
-      shouldCloseOnOverlayClick={isCloseable}
-      shouldCloseOnEsc={isCloseable}
-      shouldReturnFocusAfterClose={true}
-      closeTimeoutMS={200}
-      role="dialog"
-      width={width}
-      zIndex={zIndex}
-      data={{
-        'qa-modal': '',
-        'qa-modal-isopen': isOpen,
-      }}
-      // $FlowIssue - upgrade v0.112.0
-      {...rest}
-    >
+    // $FlowIssue - upgrade v0.112.0
+    <Container appElement={appElement} ariaHideApp={!!appElement} isOpen={isOpen} contentLabel={label} onRequestClose={onClose || (() => {})} shouldFocusAfterRender={true} shouldCloseOnOverlayClick={isCloseable} shouldCloseOnEsc={isCloseable} shouldReturnFocusAfterClose={true} closeTimeoutMS={200} role="dialog" width={width} zIndex={zIndex} data={{
+      'qa-modal': '',
+      'qa-modal-isopen': isOpen
+    }} {...rest}>
       <React.Fragment>
         <Body />
 
-        <ModalContext.Provider
-          value={{
-            onClose,
-            closeButtonLabel,
-            label,
-          }}
-        >
+        <ModalContext.Provider value={{
+          onClose,
+          closeButtonLabel,
+          label
+        }}>
           {children}
         </ModalContext.Provider>
       </React.Fragment>
     </Container>
   );
 };
-
 Modal.Header = ModalHeader;
 Modal.Footer = ModalFooter;
 Modal.Content = ModalContent;
 Modal.CloseButton = ModalCloseButton;
-
 Modal.Header.displayName = 'Modal.Header';
 Modal.Footer.displayName = 'Modal.Footer';
 Modal.Content.displayName = 'Modal.Content';
 Modal.CloseButton.displayName = 'Modal.CloseButton';
-
 Modal.defaultProps = {
   width: '800px',
-  zIndex: 6,
+  zIndex: 6
 };
-
-export default Modal;
+export default Modal;

package/__flow__/Modal/styles.js

@@ -1,52 +1,37 @@
 // @flow
 import React from 'react';
-import styled, {
-  createGlobalStyle,
-  type StyledComponent,
-} from 'styled-components';
-import {width, zIndex} from 'styled-system';
+import styled, { createGlobalStyle, type StyledComponent } from 'styled-components';
+import { width, zIndex } from 'styled-system';
 import ReactModal from 'react-modal';
-import Box from '../Box';
-import {COMMON} from '../utils/system-props';
-
-import type {TypeTheme} from '../types/theme.flow';
+import { COMMON } from "../utils/system-props";
+import Box from "../Box";
+import type { TypeTheme } from "../types/theme.flow";
 
 // This is the max space allowed between the modal and the edge of the browser
 const BODY_PADDING = '64px';
-
-function ReactModalAdapter({className, ...props}: {className?: string, ...}) {
+function ReactModalAdapter({
+  className,
+  ...props
+}: {
+  className?: string,
+  ...
+}) {
   // We want to create *__Content and *__Overlay class names on the subcomponents.
   // Because `className` could be a space-separated list of class names, we make
   // sure that we append `__Content` and `__Overlay` to every class name.
-  const contentClassName = (className || '')
-    .split(' ')
-    .map((className) => `${className} ${className}__Content`)
-    .join(' ');
-  const overlayClassName = (className || '')
-    .split(' ')
-    .map((className) => `${className} ${className}__Overlay`)
-    .join(' ');
-
+  const contentClassName = (className || '').split(' ').map(className => `${className} ${className}__Content`).join(' ');
+  const overlayClassName = (className || '').split(' ').map(className => `${className} ${className}__Overlay`).join(' ');
   return (
-    <ReactModal
-      portalClassName={className}
-      className={contentClassName}
-      overlayClassName={overlayClassName}
-      // $FlowIssue
-      {...props}
-    />
+    // $FlowIssue
+    <ReactModal portalClassName={className} className={contentClassName} overlayClassName={overlayClassName} {...props} />
   );
 }
-
 export const Body = createGlobalStyle`
   .ReactModal__Body--open {
     overflow: hidden;
   }
 `;
-
-export const Container: StyledComponent<any, TypeTheme, *> = styled(
-  ReactModalAdapter
-)`
+export const Container: StyledComponent<any, TypeTheme, *> = styled(ReactModalAdapter)`
   &__Overlay {
     position: fixed;
     top: 0px;
@@ -56,11 +41,11 @@ export const Container: StyledComponent<any, TypeTheme, *> = styled(
     display: flex;
     align-items: center;
     justify-content: center;
-    background-color: ${(props) => props.theme.colors.overlay.background.base};
+    background-color: ${props => props.theme.colors.overlay.background.base};
     opacity: 0;
     will-change: opacity;
-    transition: opacity ${(props) => props.theme.duration.medium}
-      ${(props) => props.theme.easing.ease_inout};
+    transition: opacity ${props => props.theme.duration.medium}
+      ${props => props.theme.easing.ease_inout};
 
     ${zIndex}
 
@@ -75,11 +60,11 @@ export const Container: StyledComponent<any, TypeTheme, *> = styled(
   &__Content {
     display: flex;
     flex-direction: column;
-    background: ${(props) => props.theme.colors.container.background.base};
-    border-radius: ${(props) => props.theme.radii[500]};
-    box-shadow: ${(props) => props.theme.shadows.medium};
+    background: ${props => props.theme.colors.container.background.base};
+    border-radius: ${props => props.theme.radii[500]};
+    box-shadow: ${props => props.theme.shadows.medium};
     filter: blur(0);
-    color: ${(props) => props.theme.colors.text.body};
+    color: ${props => props.theme.colors.text.body};
 
     outline: none;
     max-width: calc(100vw - ${BODY_PADDING});
@@ -97,49 +82,41 @@ export const Container: StyledComponent<any, TypeTheme, *> = styled(
     ${COMMON}
   }
 `;
-
 export const Content = styled<typeof Box, TypeTheme>(Box)`
-  font-family: ${(props) => props.theme.fontFamily};
+  font-family: ${props => props.theme.fontFamily};
   min-height: 80px;
   overflow-y: auto;
   flex: 1 1 auto;
-  padding: ${(props) => props.theme.space[400]}
-    ${(props) => props.theme.space[450]};
+  padding: ${props => props.theme.space[400]}
+    ${props => props.theme.space[450]};
   @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
     /* 'flex-basis: auto' breaks overflow in IE11 */
     flex-basis: 100%;
   }
 `;
-
 export const HeaderContainer = styled<typeof Box, TypeTheme>(Box)`
-  font-family: ${(props) => props.theme.fontFamily};
-  padding: ${(props) => props.theme.space[400]}
-    ${(props) => props.theme.space[450]};
+  font-family: ${props => props.theme.fontFamily};
+  padding: ${props => props.theme.space[400]}
+    ${props => props.theme.space[450]};
 `;
-
-export const Header = styled<typeof HeaderContainer, TypeTheme, any>(
-  HeaderContainer
-)`
+export const Header = styled<typeof HeaderContainer, TypeTheme, any>(HeaderContainer)`
   display: flex;
   align-items: center;
   justify-content: space-between;
   flex: 0 0 auto;
-  border-bottom-width: ${(props) => props.theme.borderWidths[500]};
-  border-bottom-color: ${(props) =>
-    props.bordered ? props.theme.colors.container.border.base : 'transparent'};
+  border-bottom-width: ${props => props.theme.borderWidths[500]};
+  border-bottom-color: ${props => props.bordered ? props.theme.colors.container.border.base : 'transparent'};
   border-bottom-style: solid;
 `;
-
 export const Footer = styled<typeof Box, TypeTheme>(Box)`
   flex: 0 0 auto;
-  font-family: ${(props) => props.theme.fontFamily};
-  padding: ${(props) => props.theme.space[400]}
-    ${(props) => props.theme.space[450]};
-  border-bottom-right-radius: ${(props) => props.theme.radii[500]};
-  border-bottom-left-radius: ${(props) => props.theme.radii[500]};
+  font-family: ${props => props.theme.fontFamily};
+  padding: ${props => props.theme.space[400]}
+    ${props => props.theme.space[450]};
+  border-bottom-right-radius: ${props => props.theme.radii[500]};
+  border-bottom-left-radius: ${props => props.theme.radii[500]};
 `;
-
 Container.displayName = 'ModalContainer';
 Content.displayName = 'Content';
 Header.displayName = 'Modal.Header';
-Footer.displayName = 'Modal.Footer';
+Footer.displayName = 'Modal.Footer';

package/__flow__/Numeral/constants.js

@@ -1,11 +1,11 @@
+// @flow
 export const DEFAULT_THRESHOLD = 10000;
 export const MEMO_CACHE_SIZE = 10;
 export const COMPARE_OBJECTS = true;
 export const MAX_PRECISION = 20;
 export const ABBREV_PRECISION = 2;
-
 export const DefaultPrecisions = {
   decimal: [0, 2],
   percent: [0, 1],
-  currency: [2, 2],
-};
+  currency: [2, 2]
+};

package/__flow__/Numeral/index.flow.js

@@ -0,0 +1,19 @@
+// @flow
+
+export type EnumNumeralFormat = 'decimal' | 'currency' | 'percent';
+export type TypeNumeralProps = {
+  /** The number to be formatted */
+  number?: ?number,
+  /** Locale to format. See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#locales_argument */
+  locale?: string,
+  /* The number formatting style to use */
+  format?: EnumNumeralFormat,
+  /** The currency format to use when formatting currency */
+  currency?: string,
+  /** A boolean determining whether or not the number should be abbreviated, or a number representing the abbreviation threshold  */
+  abbreviate?: boolean | number,
+  /** Override the default decimal precision (2 for decimals/currency, 1 for percentages), or "none" allowing unrestricted precision. */
+  precision?: number | 'none',
+  qa?: Object,
+  ...
+};

package/__flow__/Numeral/index.js

@@ -1,46 +1,28 @@
 // @flow
 import * as React from 'react';
 import memoize from 'lru-memoize';
-import {AbbrContainer, Container} from './styles';
-import Tooltip from '../Tooltip';
-import {
-  DEFAULT_THRESHOLD,
-  MEMO_CACHE_SIZE,
-  COMPARE_OBJECTS,
-  MAX_PRECISION,
-  ABBREV_PRECISION,
-  DefaultPrecisions,
-} from './constants';
-import {EM_DASH} from '../utils/constants';
-
-type EnumNumeralFormat = 'decimal' | 'currency' | 'percent';
-
-export type TypeProps = {
-  /** The number to be formatted */
-  number?: ?number,
-  /** Locale to format. See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#locales_argument */
-  locale?: string,
-  /* The number formatting style to use */
-  format?: EnumNumeralFormat,
-  /** The currency format to use when formatting currency */
-  currency?: string,
-  /** A boolean determining whether or not the number should be abbreviated, or a number representing the abbreviation threshold  */
-  abbreviate?: boolean | number,
-  /** Override the default decimal precision (2 for decimals/currency, 1 for percentages), or "none" allowing unrestricted precision. */
-  precision?: number | 'none',
-  qa?: Object,
-};
-
+import { EM_DASH } from "../utils/constants";
+import Tooltip from "../Tooltip";
+import { DEFAULT_THRESHOLD, MEMO_CACHE_SIZE, COMPARE_OBJECTS, MAX_PRECISION, ABBREV_PRECISION, DefaultPrecisions } from "./constants";
+import { AbbrContainer, Container } from "./styles";
+import type { EnumNumeralFormat, TypeNumeralProps } from "./index.flow";
+
+/**
+ * @deprecated Use TypeNumeralProps from root instead
+ */
+export type TypeProps = TypeNumeralProps;
 type TypeFormatOptions = {
   locale: string,
   format: EnumNumeralFormat,
   currency: string,
   min: number,
   max: number,
+  ...
 };
 type TypeFormatters = {
   standard: Intl.NumberFormat,
   abbreviated: Intl.NumberFormat,
+  ...
 };
 type TypeArgs = {
   value: number,
@@ -48,24 +30,30 @@ type TypeArgs = {
   options: TypeFormatOptions,
   qa: ?Object,
   rest: Object,
+  ...
 };
-
 const _getNumberFormatters = (options: TypeFormatOptions): TypeFormatters => {
-  const {locale, format, currency, min, max} = options;
+  const {
+    locale,
+    format,
+    currency,
+    min,
+    max
+  } = options;
   const compactPrecision = min === max ? min : ABBREV_PRECISION;
   const _currency = format === 'currency' ? currency : undefined;
   const standard = {
     style: format,
     minimumFractionDigits: min,
     maximumFractionDigits: max,
-    currency: _currency,
+    currency: _currency
   };
   const compact = {
     style: format,
     minimumFractionDigits: compactPrecision,
     maximumFractionDigits: compactPrecision,
     currency: _currency,
-    notation: 'compact',
+    notation: 'compact'
   };
 
   // Safari 14.1 is currently throwing errors when trying to use the compact
@@ -77,37 +65,28 @@ const _getNumberFormatters = (options: TypeFormatOptions): TypeFormatters => {
   } catch (error) {
     abbreviated = new Intl.NumberFormat(locale, standard);
   }
-
   return {
     standard: new Intl.NumberFormat(locale, standard),
-    abbreviated,
+    abbreviated
   };
 };
 // Memoize to reduce the energy of creating new instances of Intl.NumberFormat
-// $FlowIssue (https://github.com/erikras/lru-memoize/issues/92)
 const memoizer = memoize(MEMO_CACHE_SIZE, COMPARE_OBJECTS);
 const getNumberFormatters = memoizer(_getNumberFormatters);
-
 const getThreshold = (abbreviate: boolean | number): number => {
   if (typeof abbreviate === 'number') return Math.max(1000, abbreviate);
   if (abbreviate) return DEFAULT_THRESHOLD;
   return Infinity;
 };
-
-const getMinMaxPrecision = (
-  precision: ?(number | string),
-  format: string
-): [number, number] => {
+const getMinMaxPrecision = (precision: ?(number | string), format: string): [number, number] => {
   if (typeof precision === 'number') return [precision, precision];
   if (precision === 'none') return [0, MAX_PRECISION];
   return DefaultPrecisions[format];
 };
-
 const isValidNumber = (value: any): boolean => {
   return typeof value === 'number' && isFinite(value);
 };
-
-const normalizeArgs = (props: TypeProps): TypeArgs => {
+const normalizeArgs = (props: TypeNumeralProps): TypeArgs => {
   const {
     number,
     locale = 'us-EN',
@@ -118,28 +97,37 @@ const normalizeArgs = (props: TypeProps): TypeArgs => {
     qa,
     ...rest
   } = props;
-
   const threshold = getThreshold(abbreviate);
   const [min, max] = getMinMaxPrecision(precision, format);
-
   const _number = number || 0;
   const value = _number * (format === 'percent' ? 0.01 : 1);
   const canAbbreviate = _number >= threshold;
-
-  const options = {locale, format, currency, min, max};
-
-  return {value, canAbbreviate, options, qa, rest};
+  const options = {
+    locale,
+    format,
+    currency,
+    min,
+    max
+  };
+  return {
+    value,
+    canAbbreviate,
+    options,
+    qa,
+    rest
+  };
 };
-
-const Numeral = (props: TypeProps) => {
-  const {value, canAbbreviate, options, qa, rest} = normalizeArgs(props);
-
-  if (!isValidNumber(props.number))
-    return <Container {...qa}>{EM_DASH}</Container>;
-
+const Numeral = (props: TypeNumeralProps) => {
+  const {
+    value,
+    canAbbreviate,
+    options,
+    qa,
+    rest
+  } = normalizeArgs(props);
+  if (!isValidNumber(props.number)) return <Container {...qa}>{EM_DASH}</Container>;
   const formatters = getNumberFormatters(options);
   const fullText = formatters.standard.format(value);
-
   if (canAbbreviate) {
     const abbreviatedText = formatters.abbreviated.format(value);
 
@@ -150,21 +138,15 @@ const Numeral = (props: TypeProps) => {
     // The following check is necessary because each locale may have differing thresholds
     // for which abbreviation begins.
     if (abbreviatedText !== fullText) {
-      return (
-        <Tooltip content={fullText}>
+      return <Tooltip content={fullText}>
           <AbbrContainer {...qa} {...rest}>
             {abbreviatedText}
           </AbbrContainer>
-        </Tooltip>
-      );
+        </Tooltip>;
     }
   }
-
-  return (
-    <Container {...qa} {...rest}>
+  return <Container {...qa} {...rest}>
       {fullText}
-    </Container>
-  );
+    </Container>;
 };
-
-export default Numeral;
+export default Numeral;

package/__flow__/Numeral/styles.js

@@ -1,15 +1,12 @@
 //@flow
 import styled from 'styled-components';
-import Text from '../Text';
-
-import type {TypeTheme} from '../types/theme.flow';
-
+import Text from "../Text";
+import type { TypeTheme } from "../types/theme.flow";
 export const Container = styled<typeof Text, TypeTheme>(Text)`
   font-variant-numeric: tabular-nums;
 `;
-
 export const AbbrContainer = styled<typeof Text, TypeTheme>(Text)`
   font-variant-numeric: tabular-nums;
   border-bottom: 1px dotted
-    ${(props) => props.theme.colors.container.border.base};
-`;
+    ${props => props.theme.colors.container.border.base};
+`;