@sproutsocial/racine 12.24.0 → 13.1.1

package/__flow__/Toast/index.js

@@ -1,135 +1,83 @@
 // @flow
 import * as React from 'react';
-import Container, {GlobalToastStyles, CustomIcon} from './styles';
-import {
-  toast as toastifyToast,
-  ToastContainer as BaseToastContainer,
-  cssTransition,
-} from 'react-toastify';
-import {
-  MOTION_DURATION_MEDIUM,
-  MOTION_DURATION_SLOW,
-} from '@sproutsocial/seeds-motion/dist/seeds-motion-unitless';
-import Icon from '../Icon';
-import Box from '../Box';
-import Text from '../Text';
-
-import type {EnumIconNames} from '../EnumIconNames';
-import type {TypeColor} from '../../src/types/theme.flow';
-
+import { toast as toastifyToast, ToastContainer as BaseToastContainer, cssTransition } from 'react-toastify';
+import { MOTION_DURATION_MEDIUM, MOTION_DURATION_SLOW } from '@sproutsocial/seeds-motion/dist/seeds-motion-unitless';
+import Box from "../Box";
+import Icon from "../Icon";
+import Text from "../Text";
+import Container, { GlobalToastStyles, CustomIcon } from "./styles";
+import type { TypeToastTheme as TypeToastTheme2, TypeToastOptions as TypeToastOptions2, TypeToastProps } from "./index.flow";
+
+/**
+ * @deprecated Use TypeToastTheme from root instead
+ */
+export type TypeToastTheme = TypeToastTheme2;
+
+/**
+ * @deprecated Use TypeToastOptions from root instead
+ */
+export type TypeToastOptions = TypeToastOptions2;
 const NoTransition = cssTransition({
   duration: [0, 0],
-  collapseDuration: 0,
+  collapseDuration: 0
 });
-
 const Zoom = cssTransition({
   enter: 'Toastify__zoom-enter',
   exit: 'Toastify__zoom-exit',
-  duration: [MOTION_DURATION_MEDIUM * 1000, MOTION_DURATION_SLOW * 1000],
+  duration: [MOTION_DURATION_MEDIUM * 1000, MOTION_DURATION_SLOW * 1000]
 });
-
-const ToastContainer = () => (
-  <React.Fragment>
+const ToastContainer = () => <React.Fragment>
     <GlobalToastStyles />
 
-    <BaseToastContainer
-      className="Toastify-container-overrides"
-      toastClassName="Toastify-toast-overrides"
-      hideProgressBar={true}
-      closeButton={false}
-      position={toastifyToast.POSITION.BOTTOM_RIGHT}
-    />
-  </React.Fragment>
-);
-
+    <BaseToastContainer className="Toastify-container-overrides" toastClassName="Toastify-toast-overrides" hideProgressBar={true} closeButton={false} position={toastifyToast.POSITION.BOTTOM_RIGHT} />
+  </React.Fragment>;
 const themeIcon = {
   success: 'circle-check-filled',
   info: 'info',
   warning: 'triangle',
-  error: 'triangle',
+  error: 'triangle'
 };
-
-export type TypeToastTheme = 'info' | 'success' | 'warning' | 'error';
-
-type TypeProps = {|
-  theme?: TypeToastTheme,
-  content: React.Node,
-  color?: TypeColor,
-  icon?: EnumIconNames,
-|};
-
-export type TypeToastOptions = {|
-  ...TypeProps,
-  theme?: TypeToastTheme,
-  persist?: boolean,
-  onClose?: () => void,
-  useTransition?: boolean,
-  /** toastId allows you to prevent duplicate toasts with the same message. If your content is a string, we will use that as the toastId and you don't need to do anything. If you have JSX and want to prevent duplicates you can pass the same custom ID with each instance of your message, and the duplicates will be prevented. */
-  toastId?: string,
-|};
-
 export function toast(options: TypeToastOptions): void {
   const props = {
     theme: options.theme,
     content: options.content,
     color: options.color,
-    icon: options.icon,
+    icon: options.icon
   };
-
   const autoClose = options.persist ? false : 6000;
-
-  let {toastId, content, onClose, useTransition = true} = options;
+  let {
+    toastId,
+    content,
+    onClose,
+    useTransition = true
+  } = options;
   if (!toastId && typeof content === 'string') {
     toastId = content;
   }
-
   const transition = useTransition ? Zoom : NoTransition;
-
   toastifyToast(<Toast {...props} />, {
     autoClose,
     onClose,
     toastId,
-    transition: transition,
+    transition: transition
   });
 }
-
-const IconBox = (props) => (
-  <Box display="inline-block" css="line-height: 1;" {...props} />
-);
-
-const Toast = ({content, theme, color, icon}: TypeProps) => {
-  return (
-    <Container
-      type={theme || 'info'}
-      customColor={color}
-      borderLeft="2px solid"
-      data-qa-toast=""
-    >
-      <Box
-        display="flex"
-        minHeight="48px"
-        maxHeight="800px"
-        p={350}
-        alignItems="flex-start"
-        m="auto"
-        width={1}
-      >
+const IconBox = props => <Box display="inline-block" css="line-height: 1;" {...props} />;
+const Toast = ({
+  content,
+  theme,
+  color,
+  icon
+}: TypeToastProps) => {
+  return <Container type={theme || 'info'} customColor={color} borderLeft="2px solid" data-qa-toast="">
+      <Box display="flex" minHeight="48px" maxHeight="800px" p={350} alignItems="flex-start" m="auto" width={1}>
         <IconBox>
-          <CustomIcon
-            type={theme || 'info'}
-            color={color}
-            customColor={color}
-            name={theme ? themeIcon[theme] : icon || themeIcon['info']}
-            fixedWidth
-          />
+          <CustomIcon type={theme || 'info'} color={color} customColor={color} name={theme ? themeIcon[theme] : icon || themeIcon['info']} fixedWidth />
         </IconBox>
 
-        <Box
-          flex={1}
-          css={`
+        <Box flex={1} css={`
             transform: translateY(1px);
-          `}
-        >
+          `}>
           <Text as="div" color="text.body" data-qa-toast-content="">
             {content}
           </Text>
@@ -139,8 +87,6 @@ const Toast = ({content, theme, color, icon}: TypeProps) => {
           <Icon name="x" ml={400} color="icon.base" />
         </IconBox>
       </Box>
-    </Container>
-  );
+    </Container>;
 };
-
-export default ToastContainer;
+export default ToastContainer;

package/__flow__/Toast/styles.js

@@ -1,38 +1,33 @@
 //@flow
-import styled, {createGlobalStyle} from 'styled-components';
-import Box from '../Box';
-import Icon from '../Icon';
+import styled, { createGlobalStyle } from 'styled-components';
 // $FlowIssue
 import toastStyles from '!!raw-loader!react-toastify/dist/ReactToastify.css'; // eslint-disable-line import/no-unresolved
-
-import type {TypeTheme} from '../types/theme.flow';
-
+import Box from "../Box";
+import Icon from "../Icon";
+import type { TypeTheme } from "../types/theme.flow";
 type TypeProps = {|
   type: 'info' | 'success' | 'warning' | 'error',
   customColor?: string,
 |};
-
 const Container = styled<typeof Box, TypeTheme, TypeProps>(Box)`
   display: flex;
   align-items: center;
-  font-family: ${(p) => p.theme.fontFamily};
-  ${(p) => p.theme.typography[200]}
+  font-family: ${p => p.theme.fontFamily};
+  ${p => p.theme.typography[200]}
   position: relative;
-  background: ${(p) => p.theme.colors.container.background.base};
-  border-left: 2px solid ${(p) => p.theme.colors.container.border[p.type]};
+  background: ${p => p.theme.colors.container.background.base};
+  border-left: 2px solid ${p => p.theme.colors.container.border[p.type]};
 `;
-
 export const CustomIcon = styled<typeof Icon, TypeTheme, TypeProps>(Icon)`
-  margin-right: ${(props) => props.theme.space[400]};
+  margin-right: ${props => props.theme.space[400]};
   transform: translateY(4px);
-  color: ${(p) => (p.customColor ? undefined : p.theme.colors.icon[p.type])};
+  color: ${p => p.customColor ? undefined : p.theme.colors.icon[p.type]};
 `;
-
 export const GlobalToastStyles = createGlobalStyle`
 	${toastStyles}
 
 	.Toastify__toast {
-		box-shadow: ${(p) => p.theme.shadows.low};
+		box-shadow: ${p => p.theme.shadows.low};
 		background: transparent;
 	}
 
@@ -52,8 +47,8 @@ export const GlobalToastStyles = createGlobalStyle`
 	}
 
 	.Toastify__toast-container--bottom-right {
-		bottom: ${(p) => p.theme.space[400]};
-		right: ${(p) => p.theme.space[400]};
+		bottom: ${p => p.theme.space[400]};
+		right: ${p => p.theme.space[400]};
 	}
 
 	/* Override React Toastify's mobile width styles */
@@ -63,5 +58,4 @@ export const GlobalToastStyles = createGlobalStyle`
 		}
 	}
 `;
-
-export default Container;
+export default Container;

package/__flow__/ToggleHint/index.flow.js

@@ -0,0 +1,13 @@
+// @flow
+
+export type TypeToggleHintProps = {
+  isOpen: boolean,
+  icon: 'chevron' | 'plus',
+  openString: string,
+  closeString: string,
+  className?: string,
+  qa?: {
+    [string]: string
+  },
+  ...
+};

package/__flow__/ToggleHint/index.js

@@ -1,54 +1,40 @@
 // @flow
 import * as React from 'react';
-import Icon from '../Icon';
-import Container, {IconText} from './styles';
-
-type TypeProps = {
-  isOpen: boolean,
-  icon: 'chevron' | 'plus',
-  openString: string,
-  closeString: string,
-  className?: string,
-  qa?: {
-    [string]: string,
-  },
-};
+import Icon from "../Icon";
+import Container, { IconText } from "./styles";
+import type { TypeToggleHintProps } from "./index.flow";
 
 /**
  * Icon (either chevron or plus/minus) indicating whether an element is open or closed.
  */
-export default class ToggleHint extends React.Component<TypeProps> {
+export default class ToggleHint extends React.Component<TypeToggleHintProps> {
   static defaultProps = {
     isOpen: false,
-    icon: 'chevron',
+    icon: 'chevron'
   };
-
   getIcon = () => {
     if (this.props.icon === 'chevron') {
       return <Icon name="chevron-down" />;
     }
-
     return <Icon name={this.props.isOpen ? 'minus' : 'plus'} />;
   };
-
   render() {
-    const {icon, isOpen, openString, closeString, qa, className, ...rest} =
-      this.props;
-
+    const {
+      icon,
+      isOpen,
+      openString,
+      closeString,
+      qa,
+      className,
+      ...rest
+    } = this.props;
     return (
-      <Container
-        icon={icon}
-        isOpen={isOpen}
-        data-qa-togglehint-isopen={isOpen}
-        // $FlowIssue - upgrade v0.112.0
-        {...qa}
-        // $FlowIssue - upgrade v0.112.0
-        {...rest}
-      >
+      // $FlowIssue - upgrade v0.112.0
+      <Container icon={icon} isOpen={isOpen} data-qa-togglehint-isopen={isOpen} {...qa} {...rest}>
         {this.getIcon()}
 
         <IconText>{isOpen ? closeString : openString}</IconText>
       </Container>
     );
   }
-}
+}

package/__flow__/ToggleHint/styles.js

@@ -1,36 +1,28 @@
 //@flow
-import styled, {css, type StyledComponent} from 'styled-components';
-import {COMMON} from '../utils/system-props';
-import {visuallyHidden} from '../utils/mixins';
-
-import type {TypeTheme} from '../types/theme.flow';
-
+import styled, { css, 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.div.attrs({
-  className: 'ToggleHint',
+  className: 'ToggleHint'
 })`
   position: relative;
   display: inline-block;
-  padding: ${(props) => props.theme.space[100]};
+  padding: ${props => props.theme.space[100]};
   color: currentColor;
 
-  ${(props) =>
-    props.icon === 'chevron' &&
-    css`
+  ${props => props.icon === 'chevron' && css`
       transition: transform
-        ${(props) =>
-          `${props.theme.duration.medium} ${props.theme.easing.ease_inout}`};
+        ${props => `${props.theme.duration.medium} ${props.theme.easing.ease_inout}`};
 
-      ${props.isOpen &&
-      css`
+      ${props.isOpen && css`
         transform: rotateX(180deg);
       `}
     `}
 
   ${COMMON}
 `;
-
 export const IconText: StyledComponent<{...}, TypeTheme, *> = styled.div`
   ${visuallyHidden}
 `;
-
-export default Container;
+export default Container;

package/__flow__/Token/index.flow.js

@@ -0,0 +1,15 @@
+// @flow
+import * as React from 'react';
+export type TypeTokenProps = {
+  onClick?: (event: SyntheticEvent<HTMLButtonElement>) => void,
+  children: React.Node,
+  qa?: Object,
+  /** Show the close icon in the token. Can be used with or without icon prop */
+  closeable?: boolean,
+  /** Indicates whether the token value is valid or not */
+  valid?: boolean,
+  /** Indicates whether the token is disabled */
+  disabled?: boolean,
+  palette?: 'neutral' | 'blue',
+  ...
+};

package/__flow__/Token/index.js

@@ -1,23 +1,15 @@
 // @flow
 import * as React from 'react';
-import {useTextContent} from '../utils/hooks';
-import Container from './styles';
-import Icon from '../Icon';
-import Box from '../Box';
-
-export type TypeProps = {
-  onClick?: (event: SyntheticEvent<HTMLButtonElement>) => void,
-  children: React.Node,
-  qa?: Object,
-  /** Show the close icon in the token. Can be used with or without icon prop */
-  closeable?: boolean,
-  /** Indicates whether the token value is valid or not */
-  valid?: boolean,
-  /** Indicates whether the token is disabled */
-  disabled?: boolean,
-  palette?: 'neutral' | 'blue',
-};
+import { useTextContent } from "../utils/hooks";
+import Box from "../Box";
+import Icon from "../Icon";
+import Container from "./styles";
+import type { TypeTokenProps } from "./index.flow";
 
+/**
+ * @deprecated Use TypeTokenProps from root instead
+ */
+export type TypeProps = TypeTokenProps;
 const Token = ({
   children,
   closeable = true,
@@ -27,36 +19,15 @@ const Token = ({
   disabled = false,
   palette = 'neutral',
   ...rest
-}: TypeProps) => {
+}: TypeTokenProps) => {
   const textContainer = useTextContent('');
-
   return (
-    <Container
-      ref={textContainer}
-      valid={valid}
-      palette={palette}
-      type={closeable || onClick ? 'button' : undefined}
-      as={closeable || onClick ? 'button' : 'div'}
-      closeable={closeable || onClick}
-      disabled={disabled}
-      onClick={onClick}
-      data-qa-token={textContainer.current}
-      data-qa-token-iscloseable={closeable === true}
-      data-qa-token-isvalid={valid === true}
-      data-qa-token-isdisabled={disabled === true}
-      {...qa}
-      // $FlowIssue - upgrade v0.112.0
-      {...rest}
-    >
-      {closeable ? (
-        <Box display="flex" alignItems="center" justifyContent="space-between">
+    // $FlowIssue - upgrade v0.112.0
+    <Container ref={textContainer} valid={valid} palette={palette} type={closeable || onClick ? 'button' : undefined} as={closeable || onClick ? 'button' : 'div'} closeable={closeable || onClick} disabled={disabled} onClick={onClick} data-qa-token={textContainer.current} data-qa-token-iscloseable={closeable === true} data-qa-token-isvalid={valid === true} data-qa-token-isdisabled={disabled === true} {...qa} {...rest}>
+      {closeable ? <Box display="flex" alignItems="center" justifyContent="space-between">
           <span>{children}</span> <Icon pl={300} name="x" size="mini" />
-        </Box>
-      ) : (
-        children
-      )}
+        </Box> : children}
     </Container>
   );
 };
-
-export default Token;
+export default Token;

package/__flow__/Token/styles.js

@@ -1,11 +1,9 @@
 //@flow
-import styled, {css, type StyledComponent} from 'styled-components';
-import {COMMON} from '../utils/system-props';
-import {focusRing} from '../utils/mixins';
-import {useInteractiveColor} from '../utils/useInteractiveColor';
-
-import type {TypeTheme} from '../types/theme.flow';
-
+import styled, { css, type StyledComponent } from 'styled-components';
+import { focusRing } from "../utils/mixins";
+import { COMMON } from "../utils/system-props";
+import { useInteractiveColor } from "../utils/useInteractiveColor";
+import type { TypeTheme } from "../types/theme.flow";
 const Container: StyledComponent<any, TypeTheme, *> = styled.button`
   position: relative;
   display: inline-block;
@@ -14,7 +12,9 @@ const Container: StyledComponent<any, TypeTheme, *> = styled.button`
   vertical-align: middle;
   outline: none;
   /* Theme Properties */
-  ${({theme}) => css`
+  ${({
+  theme
+}) => css`
     ${theme.typography[200]}
     font-family: ${theme.fontFamily};
     font-weight: ${theme.fontWeights.normal};
@@ -30,9 +30,10 @@ const Container: StyledComponent<any, TypeTheme, *> = styled.button`
     ${focusRing}
   }
 
-  ${({closeable, theme}) =>
-    closeable &&
-    css`
+  ${({
+  closeable,
+  theme
+}) => closeable && css`
       cursor: pointer;
       &:hover,
       &:active {
@@ -42,9 +43,10 @@ const Container: StyledComponent<any, TypeTheme, *> = styled.button`
       }
     `}
 
-  ${({theme, palette}) =>
-    palette === 'blue' &&
-    css`
+  ${({
+  theme,
+  palette
+}) => palette === 'blue' && css`
       color: ${theme.colors.text.body};
       background: ${theme.colors.container.background.decorative.blue};
       border: 1px solid ${theme.colors.container.border.decorative.blue};
@@ -57,9 +59,10 @@ const Container: StyledComponent<any, TypeTheme, *> = styled.button`
       }
     `}
 
-  ${({disabled, theme}) =>
-    disabled &&
-    css`
+  ${({
+  disabled,
+  theme
+}) => disabled && css`
       opacity: 0.4;
       cursor: not-allowed;
       &:hover,
@@ -69,9 +72,10 @@ const Container: StyledComponent<any, TypeTheme, *> = styled.button`
       }
     `}
     
-  ${({valid, theme}) =>
-    !valid &&
-    css`
+  ${({
+  valid,
+  theme
+}) => !valid && css`
       color: ${theme.colors.text.error};
       background: ${theme.colors.container.background.error};
       border: 1px solid ${theme.colors.container.border.error};
@@ -84,5 +88,4 @@ const Container: StyledComponent<any, TypeTheme, *> = styled.button`
 
   ${COMMON}
 `;
-
-export default Container;
+export default Container;

package/__flow__/TokenInput/index.flow.js

@@ -1,9 +1,74 @@
 // @flow
-import type {EnumIconNames} from '../EnumIconNames';
-
+import * as React from 'react';
+import type { EnumIconNames } from "../EnumIconNames";
 export type TypeTokenSpec = {
   id: string,
   iconName?: EnumIconNames,
   value: string,
   valid?: boolean,
+  ...
 };
+export type TypeTokenInputProps = {
+  /** ID of the form element, should match the "for" value of the associated label */
+  id: string,
+  name: string,
+  iconName?: EnumIconNames,
+  /** Array of delimiter key names */
+  delimiters?: string[],
+  /** Current input text. Required when controlling the input text */
+  value?: string,
+  /** Current focus state. Required when controlling the focus via onFocus and onBlur */
+  hasFocus?: boolean,
+  /** Id of the currently selected token */
+  activeToken?: string,
+  /** Array of current tokens */
+  tokens?: TypeTokenSpec[],
+  /** Standard control of changing tokens. For fine-grain control use onAddToken and onRemoveToken, instead */
+  onChangeTokens?: (tokens: TypeTokenSpec[]) => void,
+  /** Fine-grained control of adding tokens. Use with onRemoveToken instead of onChangeTokens */
+  onAddToken?: (tokenSpec: TypeTokenSpec) => void,
+  /** Fine-grained control of removing tokens. Use with onAddToken instead of onChangeTokens */
+  onRemoveToken?: (tokenId: string) => void,
+  /** Controls clicking on a token. When absent, clicking a token removes itself */
+  onClickToken?: (e: SyntheticEvent<HTMLButtonElement>, tokenId: string) => void,
+  /** Fine-grained control of the input text used to create tokens */
+  onChange?: (e: SyntheticInputEvent<HTMLInputElement>, value: string) => void,
+  /** Fine-grained control of pasted text */
+  onPaste?: (e: SyntheticClipboardEvent<HTMLInputElement>, value: string) => void,
+  onBlur?: (e: SyntheticFocusEvent<HTMLInputElement>) => void,
+  onFocus?: (e: SyntheticFocusEvent<HTMLInputElement>) => void,
+  onKeyDown?: (e: SyntheticKeyboardEvent<HTMLInputElement>, value: string) => void,
+  onKeyUp?: (e: SyntheticKeyboardEvent<HTMLInputElement>, value: string) => void,
+  /** Attribute used to associate other elements that describe the Input, like an error */
+  ariaDescribedby?: string,
+  /** Label used to describe the input if not used with an accompanying visual label */
+  ariaLabel?: string,
+  /** Placeholder text for when value is undefined or empty */
+  placeholder?: string,
+  /** Will autofocus the element when mounted to the DOM */
+  autoFocus?: boolean,
+  /** HTML disabled attribute */
+  disabled?: boolean,
+  /** Whether or not the current contents of the input are invalid */
+  isInvalid?: boolean,
+  /** Whether or not the current contents of the input has any warnings */
+  hasWarning?: boolean,
+  /** HTML required attribute */
+  required?: boolean,
+  /** 16x16 element, such as an icon */
+  elemBefore?: React.Node,
+  /** 16x16 element, such as an icon */
+  elemAfter?: React.Node,
+  /** Max input text length */
+  maxLength?: number,
+  /** Max length of the token */
+  tokenMaxLength?: number,
+  /** Props to spread onto the underlying input element */
+  inputProps?: any,
+  /** Used to get a reference to the underlying element */
+  innerRef?: React.Ref<'input'>,
+  qa?: Object,
+  /** Browser autocomplete support */
+  autocomplete?: string,
+  ...
+};