@sproutsocial/racine 12.24.0 → 13.1.1

package/__flow__/Text/index.js

@@ -1,76 +1,52 @@
 //@flow
 import * as React from 'react';
-import Container from './styles';
 import styled from 'styled-components';
+import type { TypeTheme } from "../types/theme.flow";
+import Container from "./styles";
+import type { TypeTextProps } from "./index.flow";
 
-import type {TypeTheme} from '../types/theme.flow';
-
-export type TypeProps = {
-  /** Maps to the typeScale system prop, sets font size and line height using Seeds values */
-  fontSize?:
-    | 100
-    | 200
-    | 300
-    | 400
-    | 500
-    | 600
-    | 700
-    | 800
-    | 900
-    | 1000
-    | 1100
-    | 1200,
-  /** Controls the CSS word-break property */
-  breakWord?: boolean,
-  /** Truncates text into a single line with ellipsis */
-  truncated?: boolean,
-  children: React.Node,
-  qa?: Object,
-};
-
-const Headline = styled<typeof Container, TypeTheme, TypeProps>(Container)`
-  color: ${(props) => props.theme.colors.text.headline};
-  font-weight: ${(props) => props.theme.fontWeights.bold};
-  ${(props) => props.theme.typography[400]}
+/**
+ * @deprecated Use TypeTextProps from root instead
+ */
+export type TypeProps = TypeTextProps;
+const Headline = styled<typeof Container, TypeTheme, TypeTextProps>(Container)`
+  color: ${props => props.theme.colors.text.headline};
+  font-weight: ${props => props.theme.fontWeights.bold};
+  ${props => props.theme.typography[400]}
 `;
-
-const SubHeadline = styled<typeof Container, TypeTheme, TypeProps>(Container)`
-  color: ${(props) => props.theme.colors.text.headline};
-  font-weight: ${(props) => props.theme.fontWeights.bold};
-  ${(props) => props.theme.typography[300]}
+const SubHeadline = styled<typeof Container, TypeTheme, TypeTextProps>(Container)`
+  color: ${props => props.theme.colors.text.headline};
+  font-weight: ${props => props.theme.fontWeights.bold};
+  ${props => props.theme.typography[300]}
 `;
-
-const SmallSubHeadline = styled<typeof Container, TypeTheme, TypeProps>(
-  Container
-)`
-  color: ${(props) => props.theme.colors.text.headline};
-  font-weight: ${(props) => props.theme.fontWeights.bold};
-  ${(props) => props.theme.typography[200]}
+const SmallSubHeadline = styled<typeof Container, TypeTheme, TypeTextProps>(Container)`
+  color: ${props => props.theme.colors.text.headline};
+  font-weight: ${props => props.theme.fontWeights.bold};
+  ${props => props.theme.typography[200]}
 `;
-
-const Byline = styled<typeof Container, TypeTheme, TypeProps>(Container)`
-  color: ${(props) => props.theme.colors.text.subtext};
-  ${(props) => props.theme.typography[200]}
+const Byline = styled<typeof Container, TypeTheme, TypeTextProps>(Container)`
+  color: ${props => props.theme.colors.text.subtext};
+  ${props => props.theme.typography[200]}
 `;
-
-const SmallByline = styled<typeof Container, TypeTheme, TypeProps>(Container)`
-  color: ${(props) => props.theme.colors.text.subtext};
-  ${(props) => props.theme.typography[100]}
+const SmallByline = styled<typeof Container, TypeTheme, TypeTextProps>(Container)`
+  color: ${props => props.theme.colors.text.subtext};
+  ${props => props.theme.typography[100]}
 `;
-
-const BodyCopy = styled<typeof Container, TypeTheme, TypeProps>(Container)`
-  color: ${(props) => props.theme.colors.text.body};
-  ${(props) => props.theme.typography[300]}
+const BodyCopy = styled<typeof Container, TypeTheme, TypeTextProps>(Container)`
+  color: ${props => props.theme.colors.text.body};
+  ${props => props.theme.typography[300]}
 `;
-
-const SmallBodyCopy = styled<typeof Container, TypeTheme, TypeProps>(Container)`
-  color: ${(props) => props.theme.colors.text.body};
-  ${(props) => props.theme.typography[200]}
+const SmallBodyCopy = styled<typeof Container, TypeTheme, TypeTextProps>(Container)`
+  color: ${props => props.theme.colors.text.body};
+  ${props => props.theme.typography[200]}
 `;
-
-const Text = ({fontSize, children, qa, ...rest}: TypeProps) => {
+const Text = ({
+  fontSize,
+  children,
+  qa,
+  ...rest
+}: TypeTextProps): React.Node => {
   const qaText = typeof children === 'string' ? children : undefined;
-
   return (
     // $FlowIssue - upgrade v0.112.0
     <Container typeScale={fontSize} data-qa-text={qaText} {...qa} {...rest}>
@@ -78,7 +54,6 @@ const Text = ({fontSize, children, qa, ...rest}: TypeProps) => {
     </Container>
   );
 };
-
 Text.Headline = Headline;
 Text.SubHeadline = SubHeadline;
 Text.SmallSubHeadline = SmallSubHeadline;
@@ -86,7 +61,6 @@ Text.Byline = Byline;
 Text.SmallByline = SmallByline;
 Text.BodyCopy = BodyCopy;
 Text.SmallBodyCopy = SmallBodyCopy;
-
 Text.Headline.displayName = 'Text.Headline';
 Text.SubHeadline.displayName = 'Text.SubHeadline';
 Text.SmallSubHeadline.displayName = 'Text.SmallSubHeadline';
@@ -94,5 +68,4 @@ Text.Byline.displayName = 'Text.Byline';
 Text.SmallByline.displayName = 'Text.SmallByline';
 Text.BodyCopy.displayName = 'Text.BodyCopy';
 Text.SmallBodyCopy.displayName = 'Text.SmallBodyCopy';
-
-export default Text;
+export default Text;

package/__flow__/Text/styles.js

@@ -1,28 +1,22 @@
 //@flow
-import styled, {css, type StyledComponent} from 'styled-components';
-import {COMMON, LAYOUT, TYPOGRAPHY} from '../utils/system-props';
-
-import type {TypeTheme} from '../types/theme.flow';
-
+import styled, { css, type StyledComponent } from 'styled-components';
+import { COMMON, LAYOUT, TYPOGRAPHY } from "../utils/system-props";
+import type { TypeTheme } from "../types/theme.flow";
 const Container: StyledComponent<any, TypeTheme, *> = styled.span`
   margin: 0;
   padding-left: 0;
   padding-right: 0;
-  font-family: ${(props) => props.theme.fontFamily};
-  font-style: ${(props) => props.isItalicized && 'italic'};
+  font-family: ${props => props.theme.fontFamily};
+  font-style: ${props => props.isItalicized && 'italic'};
 
-  ${(props) =>
-    props.truncated &&
-    css`
+  ${props => props.truncated && css`
       display: block;
       overflow: hidden;
       white-space: nowrap;
       text-overflow: ellipsis;
     `}
 
-  ${(props) =>
-    props.breakWord &&
-    css`
+  ${props => props.breakWord && css`
       word-break: break-word;
       hyphens: auto;
     `}
@@ -31,5 +25,4 @@ const Container: StyledComponent<any, TypeTheme, *> = styled.span`
   ${LAYOUT}
   ${TYPOGRAPHY}
 `;
-
-export default Container;
+export default Container;

package/__flow__/Textarea/index.flow.js

@@ -0,0 +1,48 @@
+// @flow
+import * as React from 'react';
+export type TypeTextareaProps = {
+  /** ID of the form element, should match the "for" value of the associated label */
+  id: string,
+  name: string,
+  /** Label used to describe the input if not used with an accompanying visual label */
+  ariaLabel?: string,
+  /** Attribute used to associate other elements that describe the Textarea, like an error */
+  ariaDescribedby?: string,
+  /** Current value of the textarea */
+  value?: string,
+  /** Will autofocus the element when mounted to the DOM */
+  autoFocus?: boolean,
+  /** HTML disabled attribute */
+  disabled?: boolean,
+  /** HTML readonly attribute */
+  readOnly?: boolean,
+  /** Whether or not the current contents of the input are invalid */
+  isInvalid?: boolean,
+  /** Placeholder text for when value is undefined or empty */
+  placeholder?: string,
+  /** HTML required attribute */
+  required?: boolean,
+  /** 16x16 element, such as an icon */
+  elemBefore?: React.Node,
+  /** 16x16 element, such as an icon */
+  elemAfter?: React.Node,
+  /** Max length of the input */
+  maxLength?: number,
+  /** HTML spellcheck attribute */
+  enableSpellcheck?: boolean,
+  /** Makes the text area vertically resizable */
+  enableResize?: boolean,
+  /** The number of visible lines of text without scrolling */
+  rows?: number,
+  qa?: any,
+  /** Props to spread onto the underlying textarea element */
+  inputProps?: any,
+  /** Used to get a reference to the underlying element */
+  innerRef?: React.Ref<'textarea'>,
+  onBlur?: (e: SyntheticFocusEvent<HTMLInputElement>) => void,
+  onChange?: (e: SyntheticInputEvent<HTMLInputElement>) => void,
+  onFocus?: (e: SyntheticFocusEvent<HTMLInputElement>) => void,
+  onKeyDown?: (e: SyntheticInputEvent<HTMLInputElement>) => void,
+  onKeyUp?: (e: SyntheticInputEvent<HTMLInputElement>) => void,
+  ...
+};

package/__flow__/Textarea/index.js

@@ -1,88 +1,41 @@
 // @flow
 import * as React from 'react';
-import Container, {Accessory} from './styles';
+import Container, { Accessory } from "./styles";
+import type { TypeTextareaProps } from "./index.flow";
 
-export type TypeProps = {
-  /** ID of the form element, should match the "for" value of the associated label */
-  id: string,
-  name: string,
-  /** Label used to describe the input if not used with an accompanying visual label */
-  ariaLabel?: string,
-  /** Attribute used to associate other elements that describe the Textarea, like an error */
-  ariaDescribedby?: string,
-  /** Current value of the textarea */
-  value?: string,
-  /** Will autofocus the element when mounted to the DOM */
-  autoFocus?: boolean,
-  /** HTML disabled attribute */
-  disabled?: boolean,
-  /** HTML readonly attribute */
-  readOnly?: boolean,
-  /** Whether or not the current contents of the input are invalid */
-  isInvalid?: boolean,
-  /** Placeholder text for when value is undefined or empty */
-  placeholder?: string,
-  /** HTML required attribute */
-  required?: boolean,
-  /** 16x16 element, such as an icon */
-  elemBefore?: React.Node,
-  /** 16x16 element, such as an icon */
-  elemAfter?: React.Node,
-  /** Max length of the input */
-  maxLength?: number,
-  /** HTML spellcheck attribute */
-  enableSpellcheck?: boolean,
-  /** Makes the text area vertically resizable */
-  enableResize?: boolean,
-  /** The number of visible lines of text without scrolling */
-  rows?: number,
-  qa?: any,
-  /** Props to spread onto the underlying textarea element */
-  inputProps?: any,
-  /** Used to get a reference to the underlying element */
-  innerRef?: React.Ref<'textarea'>,
-  onBlur?: (e: SyntheticFocusEvent<HTMLInputElement>) => void,
-  onChange?: (e: SyntheticInputEvent<HTMLInputElement>) => void,
-  onFocus?: (e: SyntheticFocusEvent<HTMLInputElement>) => void,
-  onKeyDown?: (e: SyntheticInputEvent<HTMLInputElement>) => void,
-  onKeyUp?: (e: SyntheticInputEvent<HTMLInputElement>) => void,
-};
-
-export default class Textarea extends React.Component<TypeProps> {
+/**
+ * @deprecated Use TypeTextareaProps from root instead
+ */
+export type TypeProps = TypeTextareaProps;
+export default class Textarea extends React.Component<TypeTextareaProps> {
   static defaultProps = {
-    rows: 4,
+    rows: 4
   };
-
   handleBlur = (e: SyntheticFocusEvent<HTMLInputElement>) => {
     if (this.props.onBlur) {
       this.props.onBlur(e);
     }
   };
-
   handleChange = (e: SyntheticInputEvent<HTMLInputElement>) => {
     if (this.props.onChange) {
       this.props.onChange(e);
     }
   };
-
   handleFocus = (e: SyntheticFocusEvent<HTMLInputElement>) => {
     if (this.props.onFocus) {
       this.props.onFocus(e);
     }
   };
-
   handleKeyDown = (e: SyntheticInputEvent<HTMLInputElement>) => {
     if (this.props.onKeyDown) {
       this.props.onKeyDown(e);
     }
   };
-
   handleKeyUp = (e: SyntheticInputEvent<HTMLInputElement>) => {
     if (this.props.onKeyUp) {
       this.props.onKeyUp(e);
     }
   };
-
   render() {
     const {
       autoFocus,
@@ -112,52 +65,15 @@ export default class Textarea extends React.Component<TypeProps> {
       inputProps = {},
       ...rest
     } = this.props;
-
     return (
-      <Container
-        hasBeforeElement={!!elemBefore}
-        hasAfterElement={!!elemAfter}
-        disabled={disabled}
-        invalid={isInvalid}
-        resizable={enableResize}
-        data-qa-textarea={id}
-        data-qa-textarea-isdisabled={disabled === true}
-        data-qa-textarea-isrequired={required === true}
-        data-qa-textarea-isinvalid={isInvalid === true}
-        {...qa}
-        // $FlowIssue - upgrade v0.112.0
-        {...rest}
-      >
+      // $FlowIssue - upgrade v0.112.0
+      <Container hasBeforeElement={!!elemBefore} hasAfterElement={!!elemAfter} disabled={disabled} invalid={isInvalid} resizable={enableResize} data-qa-textarea={id} data-qa-textarea-isdisabled={disabled === true} data-qa-textarea-isrequired={required === true} data-qa-textarea-isinvalid={isInvalid === true} {...qa} {...rest}>
         {elemBefore && <Accessory before>{elemBefore}</Accessory>}
 
-        <textarea
-          id={id}
-          aria-label={ariaLabel}
-          aria-describedby={ariaDescribedby}
-          aria-invalid={isInvalid}
-          value={value}
-          name={name}
-          placeholder={placeholder}
-          rows={rows}
-          disabled={disabled}
-          readOnly={readOnly}
-          autoFocus={autoFocus}
-          spellCheck={enableSpellcheck}
-          required={required}
-          maxLength={maxLength}
-          onChange={this.handleChange}
-          onKeyUp={this.handleKeyUp}
-          onKeyDown={this.handleKeyDown}
-          onBlur={this.handleBlur}
-          onFocus={this.handleFocus}
-          ref={innerRef}
-          data-qa-textarea-input=""
-          data-qa-input={name}
-          {...inputProps}
-        />
+        <textarea id={id} aria-label={ariaLabel} aria-describedby={ariaDescribedby} aria-invalid={isInvalid} value={value} name={name} placeholder={placeholder} rows={rows} disabled={disabled} readOnly={readOnly} autoFocus={autoFocus} spellCheck={enableSpellcheck} required={required} maxLength={maxLength} onChange={this.handleChange} onKeyUp={this.handleKeyUp} onKeyDown={this.handleKeyDown} onBlur={this.handleBlur} onFocus={this.handleFocus} ref={innerRef} data-qa-textarea-input="" data-qa-input={name} {...inputProps} />
 
         {elemAfter && <Accessory after>{elemAfter}</Accessory>}
       </Container>
     );
   }
-}
+}

package/__flow__/Textarea/styles.js

@@ -1,10 +1,8 @@
 //@flow
-import styled, {css, type StyledComponent} from 'styled-components';
-import {COMMON} from '../utils/system-props';
-import {focusRing} from '../utils/mixins';
-
-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 type { TypeTheme } from "../types/theme.flow";
 const Container: StyledComponent<any, TypeTheme, *> = styled.div`
   box-sizing: border-box;
   position: relative;
@@ -13,20 +11,20 @@ const Container: StyledComponent<any, TypeTheme, *> = styled.div`
     box-sizing: border-box;
     display: block;
     width: 100%;
-    padding: ${(props) => props.theme.space[300]};
-    border: 1px solid ${(props) => props.theme.colors.form.border.base};
-    border-radius: ${(props) => props.theme.radii[500]};
-    background-color: ${(props) => props.theme.colors.form.background.base};
-    color: ${(props) => props.theme.colors.text.body};
+    padding: ${props => props.theme.space[300]};
+    border: 1px solid ${props => props.theme.colors.form.border.base};
+    border-radius: ${props => props.theme.radii[500]};
+    background-color: ${props => props.theme.colors.form.background.base};
+    color: ${props => props.theme.colors.text.body};
     outline: none;
     resize: none;
-    transition: border-color ${(props) => props.theme.duration.fast}
-        ${(props) => props.theme.easing.ease_in},
-      box-shadow ${(props) => props.theme.duration.fast}
-        ${(props) => props.theme.easing.ease_in};
-    font-family: ${(props) => props.theme.fontFamily};
-    ${(props) => props.theme.typography[200]}
-    font-weight: ${(props) => props.theme.fontWeights.normal};
+    transition: border-color ${props => props.theme.duration.fast}
+        ${props => props.theme.easing.ease_in},
+      box-shadow ${props => props.theme.duration.fast}
+        ${props => props.theme.easing.ease_in};
+    font-family: ${props => props.theme.fontFamily};
+    ${props => props.theme.typography[200]}
+    font-weight: ${props => props.theme.fontWeights.normal};
     appearance: none;
 
     &:focus {
@@ -34,31 +32,23 @@ const Container: StyledComponent<any, TypeTheme, *> = styled.div`
     }
 
     &:placeholder {
-      color: ${(props) => props.theme.colors.form.placeholder.base};
+      color: ${props => props.theme.colors.form.placeholder.base};
     }
 
-    ${(props) =>
-      props.resizable &&
-      css`
+    ${props => props.resizable && css`
         resize: vertical;
       `}
 
-    ${(props) =>
-      props.hasBeforeElement &&
-      css`
+    ${props => props.hasBeforeElement && css`
         padding-left: 40px;
       `}
 
-    ${(props) =>
-      props.hasAfterElement &&
-      css`
+    ${props => props.hasAfterElement && css`
         padding-right: 40px;
       `}
   }
 
-  ${(props) =>
-    props.disabled &&
-    css`
+  ${props => props.disabled && css`
       opacity: 0.4;
 
       textarea {
@@ -66,37 +56,28 @@ const Container: StyledComponent<any, TypeTheme, *> = styled.div`
       }
     `}
 
-  ${(props) =>
-    props.invalid &&
-    css`
+  ${props => props.invalid && css`
       textarea {
-        border-color: ${(props) => props.theme.colors.form.border.error};
+        border-color: ${props => props.theme.colors.form.border.error};
       }
     `}
 
   ${COMMON}
 `;
-
 export const Accessory: StyledComponent<any, TypeTheme, *> = styled.div`
   position: absolute;
-  color: ${(props) => props.theme.colors.icon.base};
+  color: ${props => props.theme.colors.icon.base};
 
-  ${(props) =>
-    props.before &&
-    css`
+  ${props => props.before && css`
       top: ${props.theme.space[300]};
       left: ${props.theme.space[350]};
     `};
 
-  ${(props) =>
-    props.after &&
-    css`
+  ${props => props.after && css`
       right: ${props.theme.space[350]};
       bottom: ${props.theme.space[300]};
     `};
 `;
-
 Container.displayName = 'TextareaContainer';
 Accessory.displayName = 'TextareaAccessory';
-
-export default Container;
+export default Container;

package/__flow__/ThemeProvider/index.js

@@ -1,20 +1,14 @@
 // @flow strict-local
 import * as React from 'react';
-import {ThemeProvider as BaseThemeProvider} from 'styled-components';
-import theme from '../themes/light/theme';
-
-import type {TypeTheme, TypeSproutTheme} from '../types/theme.flow';
+import { ThemeProvider as BaseThemeProvider } from 'styled-components';
+import theme from "../themes/light/theme";
+import type { TypeSproutTheme, TypeTheme } from "../types/theme.flow";
 
 // We can append additional themes types here
 type TypeAllThemes = TypeTheme | TypeSproutTheme;
-
 type TypeProps = $ReadOnly<{|
   theme?: TypeAllThemes,
   children: React.Node,
 |}>;
-
-const ThemeProvider = (props: TypeProps) => (
-  <BaseThemeProvider {...props} theme={props.theme || theme} />
-);
-
-export default ThemeProvider;
+const ThemeProvider = (props: TypeProps) => <BaseThemeProvider {...props} theme={props.theme || theme} />;
+export default ThemeProvider;

package/__flow__/Toast/index.flow.js

@@ -0,0 +1,20 @@
+// @flow
+import * as React from 'react';
+import type { TypeColor } from "../types/theme.flow";
+import type { EnumIconNames } from "../EnumIconNames";
+export type TypeToastTheme = 'info' | 'success' | 'warning' | 'error';
+export type TypeToastProps = {|
+  theme?: TypeToastTheme,
+  content: React.Node,
+  color?: TypeColor,
+  icon?: EnumIconNames,
+|};
+export type TypeToastOptions = {|
+  ...TypeToastProps,
+  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,
+|};