@sproutsocial/racine 13.8.0 → 14.0.0

package/__flow__/Drawer/index.js

@@ -1,182 +0,0 @@
-// @flow
-import * as React from 'react';
-import { useContext, useEffect, useRef } from 'react';
-import FocusLock from 'react-focus-lock';
-import { animated } from 'react-spring';
-import Box from "../Box";
-import Button from "../Button";
-import Icon from "../Icon";
-import Text from "../Text";
-import Portal from "../Portal";
-import { SlideTransition } from "./SlideTransition";
-import Container, { Content } from "./styles";
-import type { TypeDrawerContext, TypeDrawerCloseButtonProps, TypeDrawerHeaderProps as TypeDrawerHeaderProps2, TypeDrawerProps as TypeDrawerProps2 } from "./index.flow";
-
-/**
- * @deprecated Use TypeDrawerHeaderProps from root instead
- */
-export type TypeDrawerHeaderProps = TypeDrawerHeaderProps2;
-
-/**
- * @deprecated Use TypeDrawerProps from root instead
- */
-export type TypeDrawerProps = TypeDrawerProps2;
-
-// If ever we needed to make drawer width configurable, move this to a default prop
-const DRAWER_WIDTH = 600;
-const AnimatedDrawer = animated(Container);
-const doesRefContainEventTarget = (ref, event) => {
-  return ref.current && event.target instanceof Node && ref.current.contains(event.target);
-};
-const DrawerContext = React.createContext<TypeDrawerContext>({});
-const DrawerCloseButton = (props: TypeDrawerCloseButtonProps) => {
-  const {
-    onClose,
-    closeButtonLabel
-  } = useContext(DrawerContext);
-  if (props.render) {
-    return props.render({
-      onClose,
-      closeButtonLabel
-    });
-  }
-  return (
-    // $FlowIssue - upgrade v0.112.0
-    <Button appearance="pill" aria-label={closeButtonLabel} onClick={onClose} {...props}>
-      {props.children || <Icon name="x" />}
-    </Button>
-  );
-};
-const DrawerHeader = ({
-  title = '',
-  children,
-  render,
-  ...rest
-}: TypeDrawerHeaderProps) => {
-  const drawerContext = useContext(DrawerContext);
-  if (render) {
-    return render(drawerContext);
-  }
-  return (
-    // $FlowIssue - upgrade v0.112.0
-    <Box display="flex" flex="0 0 auto" justifyContent="space-between" alignItems="center" pt={400} px={450} {...rest}>
-      {children || <React.Fragment>
-          <Text as="h2" fontSize={400} fontWeight="semibold" color="text.headline">
-            {title}
-          </Text>
-          <DrawerCloseButton />
-        </React.Fragment>}
-    </Box>
-  );
-};
-const DrawerContent = ({
-  children,
-  ...rest
-}: {
-  children?: React.Node
-}) =>
-// $FlowIssue - upgrade v0.112.0
-<Content height="100%" p={450} color="text.body" {...rest}>
-    {children}
-  </Content>;
-const Drawer = ({
-  id,
-  style,
-  offset,
-  direction,
-  children,
-  disableCloseOnClickOutside,
-  onClose,
-  zIndex,
-  closeTargets,
-  ...rest
-}: {
-  children: React.Node,
-  direction?: 'left' | 'right',
-  disableCloseOnClickOutside?: boolean,
-  id: string,
-  offset?: number,
-  onClose: () => void,
-  zIndex?: number,
-  closeTargets?: Array<Element>,
-  style: any,
-}) => {
-  const drawerRef = useRef(null);
-  useEffect(() => {
-    const documentBody = document.body;
-    if (!documentBody) {
-      return;
-    }
-    const onEsc = (event: KeyboardEvent): void => {
-      if (event.key === 'Escape') {
-        onClose();
-      }
-    };
-    const bodyClick = (event: MouseEvent): void => {
-      if (!doesRefContainEventTarget(drawerRef, event) && !disableCloseOnClickOutside) {
-        onClose();
-      }
-    };
-    documentBody && documentBody.addEventListener('keydown', onEsc, false);
-    if (closeTargets) {
-      closeTargets.forEach(targetElement => targetElement && targetElement.addEventListener('click', bodyClick, false));
-    } else {
-      documentBody.firstElementChild && documentBody.firstElementChild.addEventListener('click', bodyClick, false);
-    }
-    return () => {
-      if (closeTargets) {
-        closeTargets.forEach(targetElement => targetElement && targetElement.removeEventListener('click', bodyClick, false));
-      } else {
-        documentBody.firstElementChild && documentBody.firstElementChild.removeEventListener('click', bodyClick, false);
-      }
-    };
-  }, [onClose, disableCloseOnClickOutside, closeTargets]);
-  return <FocusLock key={id} autoFocus={false} returnFocus>
-      {/* $FlowIssue - upgrade v0.112.0 */}
-      <AnimatedDrawer ref={drawerRef} style={style} width={DRAWER_WIDTH} offset={offset} direction={direction} data-qa-drawer={id} {...rest}>
-        {children}
-      </AnimatedDrawer>
-    </FocusLock>;
-};
-const DrawerContainer = ({
-  children,
-  closeButtonLabel,
-  direction = 'right',
-  disableCloseOnClickOutside = false,
-  id,
-  isOpen,
-  offset = 0,
-  onClose,
-  zIndex = 7,
-  closeTargets = [],
-  ...rest
-}: TypeDrawerProps) => {
-  return <Portal id={id}>
-      <DrawerContext.Provider value={{
-      onClose,
-      closeButtonLabel
-    }}>
-        <SlideTransition width={DRAWER_WIDTH + offset} direction={direction} isVisible={isOpen}>
-          {({
-          isVisible,
-          style,
-          key
-        }) => isVisible &&
-        // $FlowIssue - upgrade v0.112.0
-        <Drawer key={key} id={id} style={{
-          ...style,
-          zIndex
-        }} offset={offset} direction={direction} disableCloseOnClickOutside={disableCloseOnClickOutside} onClose={onClose} zIndex={zIndex} closeTargets={closeTargets} data-qa-drawer={id || ''} data-qa-drawer-isopen={isOpen === true} {...rest}>
-                {children}
-              </Drawer>}
-        </SlideTransition>
-      </DrawerContext.Provider>
-    </Portal>;
-};
-DrawerContainer.Header = DrawerHeader;
-DrawerContainer.Content = DrawerContent;
-DrawerContainer.CloseButton = DrawerCloseButton;
-DrawerContainer.Header.displayName = 'Drawer.Header';
-DrawerContainer.Content.displayName = 'Drawer.Content';
-DrawerContainer.CloseButton.displayName = 'Drawer.CloseButton';
-export default DrawerContainer;

package/__flow__/Drawer/styles.js

@@ -1,26 +0,0 @@
-// @flow
-import styled, { css, type StyledComponent } from 'styled-components';
-import { COMMON } from "../utils/system-props";
-import type { TypeTheme } from "../types/theme.flow";
-import Box from "../Box";
-export const Content = styled<typeof Box, TypeTheme>(Box)`
-  overflow-y: auto;
-`;
-const Container: StyledComponent<any, TypeTheme, *> = styled.div`
-  display: flex;
-  flex-direction: column;
-  position: fixed;
-  top: 0;
-  height: 100%;
-  width: ${props => props.width}px;
-  background-color: ${props => props.theme.colors.container.background.base};
-  box-shadow: ${props => props.theme.shadows.high};
-  filter: blur(0);
-
-  ${props => css`
-    ${props.direction}: ${props.offset}px;
-  `}
-
-  ${COMMON}
-`;
-export default Container;

package/__flow__/EmptyState/index.js

@@ -1,45 +0,0 @@
-// @flow
-import * as React from 'react';
-import Box from "../Box";
-import Text from "../Text";
-import type { TypeEmptyStateProps } from "./index.flow";
-const EmptyState = ({
-  media,
-  headline,
-  subtext,
-  primaryAction,
-  secondaryAction,
-  ...rest
-}: TypeEmptyStateProps) => {
-  return (
-    // $FlowIssue - upgrade v0.112.0
-    <Box maxWidth="400px" mx="auto" data-qa-emptystate={headline} {...rest}>
-      {media && <Box display="flex" flexDirection="column" justifyContent="center" mb={450}>
-          {media}
-        </Box>}
-
-      <Text as="div" textAlign="center">
-        <Text as="p" m={0} color="text.headline" fontWeight="semibold" fontSize={400}>
-          {headline}
-        </Text>
-
-        {subtext && <Text as="p" color="text.subtext" fontSize={200} mb={0} mt={400}>
-            {subtext}
-          </Text>}
-
-        <Box mt={primaryAction || secondaryAction ? 450 : 0}>
-          {primaryAction && React.cloneElement(primaryAction, {
-            appearance: 'primary'
-          })}
-
-          {secondaryAction && <Box mt={400}>
-              {React.cloneElement(secondaryAction, {
-              appearance: 'unstyled'
-            })}
-            </Box>}
-        </Box>
-      </Text>
-    </Box>
-  );
-};
-export default EmptyState;

package/__flow__/Fieldset/index.js

@@ -1,42 +0,0 @@
-// @flow
-import * as React from 'react';
-import Box from "../Box";
-import Text from "../Text";
-import { ChildContainer } from "./styles";
-import type { TypeFieldsetProps } from "./index.flow";
-
-/**
- * Fieldset Component
- */
-const Fieldset = ({
-  layout = 'vertical',
-  label,
-  helperText,
-  children,
-  ...rest
-}: TypeFieldsetProps) =>
-// $FlowIssue - upgrade v0.112.0
-<Box as="fieldset" border="none" p={0} data-qa-fieldset="" {...rest}>
-    {typeof label === 'string' ? <Fieldset.Legend>{label}</Fieldset.Legend> : label}
-    {typeof helperText === 'string' ? <Fieldset.HelperText>{helperText}</Fieldset.HelperText> : helperText}
-    <Box display="flex" flexDirection={layout === 'vertical' ? 'column' : 'row'}>
-      {React.Children.map(children, child => <ChildContainer layout={layout}>{child}</ChildContainer>)}
-    </Box>
-  </Box>;
-const FieldsetLegend = ({
-  children,
-  ...rest
-}) => <Text as="legend" fontSize={300} fontWeight="semibold" color="text.body" mb={300} {...rest}>
-    {children}
-  </Text>;
-const FieldsetHelperText = ({
-  children,
-  ...rest
-}) => <Text as="p" fontSize={200} mb={300} {...rest}>
-    {children}
-  </Text>;
-Fieldset.Legend = FieldsetLegend;
-Fieldset.HelperText = FieldsetHelperText;
-Fieldset.Legend.displayName = 'Fieldset.Legend';
-Fieldset.HelperText.displayName = 'Fieldset.HelperText';
-export default Fieldset;

package/__flow__/Fieldset/styles.js

@@ -1,21 +0,0 @@
-//@flow
-import styled, { css } from 'styled-components';
-import Box from "../Box";
-import type { TypeTheme } from "../types/theme.flow";
-export const ChildContainer = styled<typeof Box, TypeTheme, any>(Box)`
-  ${props => props.layout === 'vertical' && css`
-      margin-top: ${props.theme.space[300]};
-
-      &:first-child {
-        margin-top: 0;
-      }
-    `}
-
-  ${props => props.layout === 'horizontal' && css`
-      margin-left: ${props.theme.space[300]};
-
-      &:first-child {
-        margin-left: 0;
-      }
-    `}
-`;

package/__flow__/FormField/index.js

@@ -1,53 +0,0 @@
-'no babel-plugin-flow-react-proptypes';
-
-// @flow
-import * as React from 'react';
-import { useState } from 'react';
-import { useTextContent } from "../utils/hooks";
-import Box from "../Box";
-import Label from "../Label";
-import Text from "../Text";
-import { VisuallyHidden } from "../VisuallyHidden";
-import type { TypeFormFieldProps } from "./index.flow";
-
-/**
- * @deprecated Use TypeFormFieldProps from root instead
- */
-export type TypeProps = TypeFormFieldProps;
-let idCounter = 0;
-const FormField = ({
-  children,
-  error,
-  helperText,
-  id: identifier,
-  isInvalid = false,
-  label,
-  mb = 400,
-  qa,
-  isLabelHidden = false,
-  ...rest
-}: TypeFormFieldProps) => {
-  const [id] = useState(identifier || `FormField-${idCounter++}`);
-  const errorId = `Error-${id}`;
-  const containerText = useTextContent('');
-  const errorContainerText = useTextContent('');
-  return <Box {...rest} {...qa} mb={mb} data-qa-formfield={qa && qa['data-qa-formfield'] || id || containerText.current} data-qa-formfield-isinvalid={isInvalid === true}>
-      {isLabelHidden ? <VisuallyHidden data-testid="visually-hidden">
-          <Label htmlFor={id}>{label}</Label>
-        </VisuallyHidden> : <Label mb={helperText ? 100 : 300} htmlFor={id}>
-          {label}
-        </Label>}
-      {helperText && <Text as="p" fontSize={200} mb={300} color="text.subtext">
-          {helperText}
-        </Text>}
-      {children({
-      id,
-      isInvalid,
-      ariaDescribedby: errorId
-    })}
-      {isInvalid && error && <Text as="div" fontSize={200} color="text.error" mt={300} id={errorId} data-qa-formfield-error={qa && qa['data-qa-formfield-error'] || errorContainerText.current}>
-          {error}
-        </Text>}
-    </Box>;
-};
-export default FormField;

package/__flow__/Icon/index.js

@@ -1,66 +0,0 @@
-// @flow
-import * as React from 'react';
-import styled, { css } from 'styled-components';
-import Box from "../Box";
-import iconViewBoxes from "../IconViewBoxes";
-import Container from "./styles";
-import deprecatedIcons from "./deprecatedIcons";
-import type { TypeIconProps, TypeToggleProps } from "./index.flow";
-
-/**
- * @deprecated Use TypeIconProps from root instead
- */
-export type TypeProps = TypeIconProps;
-const Icon = ({
-  name,
-  size = 'default',
-  fixedWidth = false,
-  ariaLabel,
-  ...rest
-}: TypeIconProps) => {
-  // $FlowIssue
-  const iconName = deprecatedIcons[name] || name;
-  const iconViewBox = iconViewBoxes[iconName];
-  return (
-    // $FlowIssue - upgrade v0.112.0
-    <Container iconSize={size} fixedWidth={!!fixedWidth} key={name} aria-label={ariaLabel} data-qa-icon={name} {...rest}>
-      <svg className="Icon-svg" viewBox={iconViewBox} focusable={false}>
-        <use xmlnsXlink="http://www.w3.org/1999/xlink" xlinkHref={`#ssiconsvg-${iconName}`} />
-      </svg>
-    </Container>
-  );
-};
-const ToggleableIcon = styled(Icon)`
-  transition: all ${p => p.theme.duration.fast} linear;
-
-  ${p => p.active && css`
-      opacity: 1;
-      transform: scale(1);
-    `}
-
-  ${p => !p.active && css`
-      position: absolute;
-      opacity: 0;
-      transform: scale(0);
-    `}
-`;
-const IconToggle = ({
-  activeName,
-  inactiveName,
-  isActive,
-  size = 'default',
-  fixedWidth = false,
-  ariaLabel,
-  ...rest
-}: TypeToggleProps) => {
-  return (
-    // $FlowIssue - upgrade v0.112.0
-    <Box as="span" position="relative" display="inline-flex" {...rest}>
-      <ToggleableIcon active={isActive} name={activeName} size={size} fixedWidth={fixedWidth} ariaLabel={ariaLabel} aria-hidden={!isActive} />
-      <ToggleableIcon active={!isActive} name={inactiveName} size={size} fixedWidth={fixedWidth} ariaLabel={ariaLabel} aria-hidden={isActive} />
-    </Box>
-  );
-};
-Icon.Toggle = IconToggle;
-Icon.Toggle.displayName = 'Icon.Toggle';
-export default Icon;

package/__flow__/Icon/styles.js

@@ -1,43 +0,0 @@
-//@flow
-import styled, { css, type StyledComponent } from 'styled-components';
-import { verticalAlign } from 'styled-system';
-import { COMMON } from "../utils/system-props";
-import type { TypeTheme } from "../types/theme.flow";
-const sizes = {
-  mini: '12px',
-  /** TODO: deprecate default  in favor of small in future release */
-  default: '16px',
-  small: '16px',
-  medium: '24px',
-  large: '32px',
-  jumbo: '64px'
-};
-const stylesForSize = (iconSize, fixedWidth) => css`
-  line-height: ${iconSize};
-
-  &,
-  .Icon-svg {
-    height: ${iconSize};
-    fill: currentColor;
-  }
-
-  ${fixedWidth && `
-    &,
-    & .Icon-svg {
-      width: ${iconSize}
-    }
-  `}
-`;
-const Container: StyledComponent<{...}, TypeTheme, *> = styled.span.attrs({
-  className: 'Icon'
-})`
-  display: inline-block;
-  color: inherit;
-  vertical-align: middle;
-
-  ${props => stylesForSize(sizes[props.iconSize], props.fixedWidth)}
-
-  ${COMMON}
-  ${verticalAlign}
-`;
-export default Container;

package/__flow__/Image/index.js

@@ -1,75 +0,0 @@
-// @flow
-import * as React from 'react';
-import ImageContainer from "./styles";
-import type { TypeImageProps } from "./index.flow";
-type TypeState = {
-  didError: boolean,
-  didLoad: boolean,
-  imageUrl: string,
-  ...
-};
-export default class Image extends React.Component<TypeImageProps, TypeState> {
-  static defaultProps = {
-    title: '',
-    onError: () => {},
-    onClick: () => {},
-    onLoad: () => {}
-  };
-  state = {
-    didError: false,
-    didLoad: false,
-    imageUrl: this.props.src
-  };
-  imageRef: ?HTMLImageElement;
-  componentDidMount() {
-    // eslint-disable-next-line react/no-did-mount-set-state
-    if (this.imageRef) {
-      this.setState({
-        didLoad: this.imageRef.complete
-      });
-    }
-  }
-  componentDidUpdate(prevProps: TypeImageProps) {
-    if (this.props.src !== prevProps.src) {
-      this.setState({
-        didError: false,
-        didLoad: false,
-        imageUrl: this.props.src
-      });
-    }
-  }
-  onError = () => {
-    if (!this.state.didError && this.props.defaultImage) {
-      this.setState({
-        didError: true,
-        imageUrl: this.props.defaultImage
-      });
-    }
-    this.props.onError();
-  };
-  onLoad = () => {
-    this.setState({
-      didLoad: true
-    });
-    this.props.onLoad();
-  };
-  onClick = () => {
-    this.props.onClick();
-  };
-  render() {
-    const {
-      alt,
-      title,
-      onClick,
-      onError,
-      onLoad,
-      src,
-      qa,
-      ...rest
-    } = this.props;
-    return (
-      // $FlowIssue - upgrade v0.112.0
-      <ImageContainer isLoading={!this.state.didLoad} ref={img => this.imageRef = img} onClick={this.onClick} src={this.state.imageUrl} onError={this.onError} onLoad={this.onLoad} alt={alt} title={title} data-qa-image={title ? title : alt ? alt : ''} data-qa-image-src={src || ''} {...qa} {...rest} />
-    );
-  }
-}

package/__flow__/Image/styles.js

@@ -1,17 +0,0 @@
-//@flow
-import styled, { css, type StyledComponent } from 'styled-components';
-import { COMMON, LAYOUT } from "../utils/system-props";
-import type { TypeTheme } from "../types/theme.flow";
-const ImageContainer: StyledComponent<{...}, TypeTheme, *> = styled.img.attrs({
-  className: 'Image'
-})`
-  display: block;
-
-  ${props => props.isLoading && css`
-      visibility: hidden;
-    `}
-
-  ${COMMON}
-  ${LAYOUT}
-`;
-export default ImageContainer;

package/__flow__/Indicator/index.js

@@ -1,28 +0,0 @@
-// @flow
-import * as React from 'react';
-import Icon from "../Icon";
-import Container from "./styles";
-import type { TypeIndicatorProps } from "./index.flow";
-
-/**
- * @deprecated Use TypeIndicatorProps from root instead
- */
-export type TypeProps = TypeIndicatorProps;
-export default class Indicator extends React.Component<TypeIndicatorProps> {
-  static defaultProps = {
-    tooltip: ''
-  };
-  render() {
-    const {
-      tooltip,
-      ...rest
-    } = this.props;
-    return (
-      // $FlowIssue - upgrade v0.112.0
-      <Container data-tip={tooltip} data-qa-indicator="" aria-label={tooltip} tabIndex={0} {...rest}>
-        {tooltip && <div>{tooltip}</div>}
-        <Icon name="indicator" size="mini" />
-      </Container>
-    );
-  }
-}

package/__flow__/Indicator/styles.js

@@ -1,24 +0,0 @@
-//@flow
-import styled, { type StyledComponent } from 'styled-components';
-import { visuallyHidden } from "../utils/mixins";
-import { COMMON } from "../utils/system-props";
-import type { TypeTheme } from "../types/theme.flow";
-const Container: StyledComponent<{...}, TypeTheme, *> = styled.span.attrs({
-  className: 'Indicator'
-})`
-  position: relative;
-  display: block;
-  width: ${props => props.theme.space[400]};
-  height: ${props => props.theme.space[400]};
-  font-size: 10px;
-  line-height: 0;
-  color: ${props => props.color ?? props.theme.colors.icon.info};
-  text-align: center;
-
-  > div {
-    ${visuallyHidden}
-  }
-
-  ${COMMON}
-`;
-export default Container;