@sproutsocial/racine 12.24.0 → 13.1.1

package/__flow__/Image/index.js

@@ -1,103 +1,75 @@
 // @flow
 import * as React from 'react';
-import ImageContainer from './styles';
-
-type TypeProps = {
-  src: string,
-  /** Alt text is required for non-decorative images */
-  alt: string,
-  title: string,
-  onError: () => void,
-  onClick: () => void,
-  /** A URL for a default image to load if the source image is not available */
-  defaultImage?: string,
-  onLoad: () => void,
-  qa?: Object,
-};
-
+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<TypeProps, TypeState> {
+export default class Image extends React.Component<TypeImageProps, TypeState> {
   static defaultProps = {
     title: '',
     onError: () => {},
     onClick: () => {},
-    onLoad: () => {},
+    onLoad: () => {}
   };
-
   state = {
     didError: false,
     didLoad: false,
-    imageUrl: this.props.src,
+    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,
+        didLoad: this.imageRef.complete
       });
     }
   }
-
-  componentDidUpdate(prevProps: TypeProps) {
+  componentDidUpdate(prevProps: TypeImageProps) {
     if (this.props.src !== prevProps.src) {
       this.setState({
         didError: false,
         didLoad: false,
-        imageUrl: this.props.src,
+        imageUrl: this.props.src
       });
     }
   }
-
   onError = () => {
     if (!this.state.didError && this.props.defaultImage) {
       this.setState({
         didError: true,
-        imageUrl: this.props.defaultImage,
+        imageUrl: this.props.defaultImage
       });
     }
-
     this.props.onError();
   };
-
   onLoad = () => {
     this.setState({
-      didLoad: true,
+      didLoad: true
     });
-
     this.props.onLoad();
   };
-
   onClick = () => {
     this.props.onClick();
   };
-
   render() {
-    const {alt, title, onClick, onError, onLoad, src, qa, ...rest} = this.props;
-
+    const {
+      alt,
+      title,
+      onClick,
+      onError,
+      onLoad,
+      src,
+      qa,
+      ...rest
+    } = this.props;
     return (
-      <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}
-        // $FlowIssue - upgrade v0.112.0
-        {...rest}
-      />
+      // $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,22 +1,17 @@
 //@flow
-import styled, {css, type StyledComponent} from 'styled-components';
-import {COMMON, LAYOUT} from '../utils/system-props';
-
-import type {TypeTheme} from '../types/theme.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',
+  className: 'Image'
 })`
   display: block;
 
-  ${(props) =>
-    props.isLoading &&
-    css`
+  ${props => props.isLoading && css`
       visibility: hidden;
     `}
 
   ${COMMON}
   ${LAYOUT}
 `;
-
-export default ImageContainer;
+export default ImageContainer;

package/__flow__/Indicator/index.flow.js

@@ -0,0 +1,6 @@
+// @flow
+
+export type TypeIndicatorProps = {
+  tooltip: string,
+  ...
+};

package/__flow__/Indicator/index.js

@@ -1,32 +1,28 @@
 // @flow
 import * as React from 'react';
-import Icon from '../Icon';
-import Container from './styles';
+import Icon from "../Icon";
+import Container from "./styles";
+import type { TypeIndicatorProps } from "./index.flow";
 
-export type TypeProps = {
-  tooltip: string,
-};
-
-export default class Indicator extends React.Component<TypeProps> {
+/**
+ * @deprecated Use TypeIndicatorProps from root instead
+ */
+export type TypeProps = TypeIndicatorProps;
+export default class Indicator extends React.Component<TypeIndicatorProps> {
   static defaultProps = {
-    tooltip: '',
+    tooltip: ''
   };
-
   render() {
-    const {tooltip, ...rest} = this.props;
-
+    const {
+      tooltip,
+      ...rest
+    } = this.props;
     return (
-      <Container
-        data-tip={tooltip}
-        data-qa-indicator=""
-        aria-label={tooltip}
-        tabIndex={0}
-        // $FlowIssue - upgrade v0.112.0
-        {...rest}
-      >
+      // $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,20 +1,18 @@
 //@flow
-import styled, {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, { 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',
+  className: 'Indicator'
 })`
   position: relative;
   display: block;
-  width: ${(props) => props.theme.space[400]};
-  height: ${(props) => props.theme.space[400]};
+  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};
+  color: ${props => props.color ?? props.theme.colors.icon.info};
   text-align: center;
 
   > div {
@@ -23,5 +21,4 @@ const Container: StyledComponent<{...}, TypeTheme, *> = styled.span.attrs({
 
   ${COMMON}
 `;
-
-export default Container;
+export default Container;

package/__flow__/Input/index.flow.js

@@ -0,0 +1,60 @@
+// @flow
+import * as React from 'react';
+export type TypeInputProps = {
+  /** 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 Input, like an error */
+  ariaDescribedby?: string,
+  /** Label for Input.ClearButton. Required when using Input.ClearButton. */
+  clearButtonLabel?: string,
+  /** Placeholder text for when value is undefined or empty */
+  placeholder?: string,
+  /** Current value of the input */
+  value?: string,
+  /** HTML type attribute */
+  type?: 'date' | 'email' | 'number' | 'password' | 'text' | 'url' | 'search',
+  /** Set option to display earlier typed values */
+  autoComplete?: boolean,
+  /** 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,
+  /** 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 length of the input */
+  maxLength?: number,
+  /** Props to spread onto the underlying input element */
+  inputProps?: any,
+  /** Used to get a reference to the underlying element */
+  innerRef?: {|
+    current: null | HTMLInputElement
+  |} | ((React.ElementRef<any> | HTMLElement) => void),
+  onBlur?: (e: SyntheticFocusEvent<HTMLInputElement>) => void,
+  onChange?: (e: SyntheticInputEvent<HTMLInputElement>, value: string) => void,
+  onClear?: (e: SyntheticEvent<HTMLButtonElement>) => void,
+  onFocus?: (e: SyntheticFocusEvent<HTMLInputElement>) => void,
+  onKeyDown?: (e: SyntheticKeyboardEvent<HTMLInputElement>, value: string) => void,
+  onKeyUp?: (e: SyntheticKeyboardEvent<HTMLInputElement>, value: string) => void,
+  onPaste?: (e: SyntheticInputEvent<HTMLInputElement>, value: string) => void,
+  size?: 'large' | 'small' | 'default',
+  qa?: Object,
+  /**
+      Controls the styles of the input. Primary is our standard input styles and secondary is a borderless input.
+      Note that this prop should only be used to alter styles and not functionality.
+  */
+  appearance?: 'primary' | 'secondary',
+  ...
+};

package/__flow__/Input/index.js

@@ -1,80 +1,22 @@
 // @flow
 import * as React from 'react';
-import Container, {Accessory} from './styles';
-import Button from '../Button';
-import Icon from '../Icon';
 import styled from 'styled-components';
-import type {StyledComponent} from 'styled-components';
-import type {TypeTheme} from '../types/theme.flow';
-import {mergeRefs} from '../utils';
-import {useInteractiveColor} from '../utils/useInteractiveColor';
-
-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 Input, like an error */
-  ariaDescribedby?: string,
-  /** Label for Input.ClearButton. Required when using Input.ClearButton. */
-  clearButtonLabel?: string,
-  /** Placeholder text for when value is undefined or empty */
-  placeholder?: string,
-  /** Current value of the input */
-  value?: string,
-  /** HTML type attribute */
-  type?: 'date' | 'email' | 'number' | 'password' | 'text' | 'url' | 'search',
-  /** Set option to display earlier typed values */
-  autoComplete?: boolean,
-  /** 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,
-  /** 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 length of the input */
-  maxLength?: number,
-  /** Props to spread onto the underlying input element */
-  inputProps?: any,
-  /** Used to get a reference to the underlying element */
-  innerRef?:
-    | {|current: null | HTMLInputElement|}
-    | ((React.ElementRef<any> | HTMLElement) => void),
-  onBlur?: (e: SyntheticFocusEvent<HTMLInputElement>) => void,
-  onChange?: (e: SyntheticInputEvent<HTMLInputElement>, value: string) => void,
-  onClear?: (e: SyntheticEvent<HTMLButtonElement>) => void,
-  onFocus?: (e: SyntheticFocusEvent<HTMLInputElement>) => void,
-  onKeyDown?: (
-    e: SyntheticKeyboardEvent<HTMLInputElement>,
-    value: string
-  ) => void,
-  onKeyUp?: (
-    e: SyntheticKeyboardEvent<HTMLInputElement>,
-    value: string
-  ) => void,
-  onPaste?: (e: SyntheticInputEvent<HTMLInputElement>, value: string) => void,
-  size?: 'large' | 'small' | 'default',
-  qa?: Object,
-  /**
-      Controls the styles of the input. Primary is our standard input styles and secondary is a borderless input.
-      Note that this prop should only be used to alter styles and not functionality.
-  */
-  appearance?: 'primary' | 'secondary',
-};
-
+import type { StyledComponent } from 'styled-components';
+import { useInteractiveColor } from "../utils/useInteractiveColor";
+import type { TypeTheme } from "../types/theme.flow";
+import { mergeRefs } from "../utils";
+import Button from "../Button";
+import Icon from "../Icon";
+import Container, { Accessory } from "./styles";
+import type { TypeInputProps } from "./index.flow";
+
+/**
+ * @deprecated Use TypeInputProps from root instead
+ */
+export type TypeProps = TypeInputProps;
 type TypeState = {
   hasValue: boolean,
+  ...
 };
 
 // Using Context so that Input's Input.ClearButton-specific props can be passed to Input.ClearButton,
@@ -84,23 +26,21 @@ type TypeInputContext = $Shape<{
   clearButtonLabel: string,
   hasValue: boolean,
   size: 'large' | 'small' | 'default',
+  ...
 }>;
-
 const InputContext = React.createContext<TypeInputContext>({});
-
 const StyledButton: StyledComponent<any, TypeTheme, *> = styled(Button)`
   &:hover,
   &:active {
-    color: ${(props) => useInteractiveColor(props.theme.colors.icon.base)};
+    color: ${props => useInteractiveColor(props.theme.colors.icon.base)};
   }
 `;
-
 const ClearButton = () => {
   const {
     handleClear,
     clearButtonLabel,
     hasValue,
-    size: inputSize,
+    size: inputSize
   } = React.useContext(InputContext);
 
   // Hide the button when there is no text to clear.
@@ -111,9 +51,7 @@ const ClearButton = () => {
   // Warn if clearButtonLabel is not included, so that the unlocalized fallback will not be mistaken for a proper label.
   if (!clearButtonLabel) {
     // eslint-disable-next-line no-console
-    console.warn(
-      'Warning: clearButtonLabel prop is required when using Input.ClearButton. Please pass a localized clearButtonLabel to Input.'
-    );
+    console.warn('Warning: clearButtonLabel prop is required when using Input.ClearButton. Please pass a localized clearButtonLabel to Input.');
   }
 
   // Reduce Button padding for size small Inputs so that the Button won't go outside the bounds of the Input.
@@ -121,20 +59,9 @@ const ClearButton = () => {
   const py = inputSize === 'small' ? 100 : undefined;
   const px = inputSize === 'small' ? 200 : undefined;
   const buttonSize = inputSize === 'small' ? 'default' : inputSize;
-
-  return (
-    <StyledButton
-      onClick={handleClear}
-      size={buttonSize}
-      py={py}
-      px={px}
-      title={clearButtonLabel || 'Clear'}
-      ariaLabel={clearButtonLabel || 'Clear'}
-      color="icon.base"
-    >
+  return <StyledButton onClick={handleClear} size={buttonSize} py={py} px={px} title={clearButtonLabel || 'Clear'} ariaLabel={clearButtonLabel || 'Clear'} color="icon.base">
       <Icon name="circlex" />
-    </StyledButton>
-  );
+    </StyledButton>;
 };
 
 // Used for positioning elementAfter. This logic will detect if the element is a ClearButton,
@@ -145,44 +72,37 @@ const isClearButton = (elem: any) => {
   }
   return false;
 };
-
-class Input extends React.Component<TypeProps, TypeState> {
-  constructor(props: TypeProps) {
+class Input extends React.Component<TypeInputProps, TypeState> {
+  constructor(props: TypeInputProps) {
     super(props);
     this.state = {
       // Tracking hasValue in state allows us to hide ClearButton when there is no value to clear
       // for both controlled and uncontrolled inputs.
-      hasValue: !!props.value,
+      hasValue: !!props.value
     };
   }
-
   static defaultProps = {
     autoFocus: false,
     disabled: false,
     type: 'text',
     size: 'default',
-    appearance: 'primary',
+    appearance: 'primary'
   };
-
   static ClearButton = ClearButton;
 
   // Define our own ref for use in handleClear.
   // We use mergeRefs to pass both this.inputRef and this.props.innerRef to input.
   inputRef = React.createRef<HTMLInputElement>();
-
-  handleBlur = (e: SyntheticFocusEvent<HTMLInputElement>) =>
-    this.props.onBlur?.(e);
-
+  handleBlur = (e: SyntheticFocusEvent<HTMLInputElement>) => this.props.onBlur?.(e);
   handleClear = (e: SyntheticEvent<HTMLButtonElement>) => {
     const input = this.inputRef.current;
     if (input) {
       // Clear the value via the input prototype, then dispatch an input event in order to trigger handleChange
-      const nativeInputValueSetter = Object.getOwnPropertyDescriptor(
-        window.HTMLInputElement.prototype,
-        'value'
-      )?.set;
+      const nativeInputValueSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, 'value')?.set;
       nativeInputValueSetter?.call(input, '');
-      const inputEvent = new Event('input', {bubbles: true});
+      const inputEvent = new Event('input', {
+        bubbles: true
+      });
       input.dispatchEvent(inputEvent);
 
       // Focus the input, update hasValue, and call any onClear callback
@@ -191,33 +111,24 @@ class Input extends React.Component<TypeProps, TypeState> {
       this.props.onClear?.(e);
     }
   };
-
   handleChange = (e: SyntheticInputEvent<HTMLInputElement>) => {
     this.props.onChange?.(e, e.currentTarget.value);
     this.updateState(e.currentTarget.value);
   };
-
-  handleFocus = (e: SyntheticFocusEvent<HTMLInputElement>) =>
-    this.props.onFocus?.(e);
-
-  handleKeyDown = (e: SyntheticKeyboardEvent<HTMLInputElement>) =>
-    this.props.onKeyDown?.(e, e.currentTarget.value);
-
-  handleKeyUp = (e: SyntheticKeyboardEvent<HTMLInputElement>) =>
-    this.props.onKeyUp?.(e, e.currentTarget.value);
-
-  handlePaste = (e: SyntheticInputEvent<HTMLInputElement>) =>
-    this.props.onPaste?.(e, e.currentTarget.value);
-
+  handleFocus = (e: SyntheticFocusEvent<HTMLInputElement>) => this.props.onFocus?.(e);
+  handleKeyDown = (e: SyntheticKeyboardEvent<HTMLInputElement>) => this.props.onKeyDown?.(e, e.currentTarget.value);
+  handleKeyUp = (e: SyntheticKeyboardEvent<HTMLInputElement>) => this.props.onKeyUp?.(e, e.currentTarget.value);
+  handlePaste = (e: SyntheticInputEvent<HTMLInputElement>) => this.props.onPaste?.(e, e.currentTarget.value);
   updateState = (inputValue: string) => {
     const hasValue = inputValue !== '';
     const previousHasValue = this.state.hasValue;
     // Only update state if the value of `hasValue` has changed to avoid unnecessary renders.
     if (hasValue !== previousHasValue) {
-      this.setState({hasValue});
+      this.setState({
+        hasValue
+      });
     }
   };
-
   render() {
     const {
       autoComplete,
@@ -260,78 +171,29 @@ class Input extends React.Component<TypeProps, TypeState> {
     }
 
     // Add default elemBefore and elemAfter elements if type is search.
-    const elementBefore =
-      type === 'search' && !elemBefore ? (
-        <Icon name="search" ariaHidden color="icon.base" />
-      ) : (
-        elemBefore
-      );
+    const elementBefore = type === 'search' && !elemBefore ? <Icon name="search" ariaHidden color="icon.base" /> : elemBefore;
     // Do not add a ClearButton if an elemAfter prop was passed.
-    const elementAfter =
-      type === 'search' && !elemAfter ? <ClearButton /> : elemAfter;
-
+    const elementAfter = type === 'search' && !elemAfter ? <ClearButton /> : elemAfter;
     return (
-      <Container
-        hasBeforeElement={!!elementBefore}
-        hasAfterElement={!!elementAfter}
-        disabled={disabled}
-        invalid={!!isInvalid}
-        warning={hasWarning}
-        appearance={appearance}
-        size={size}
-        // $FlowIssue - upgrade v0.112.0
-        {...rest}
-      >
-        <InputContext.Provider
-          value={{
-            handleClear: this.handleClear,
-            hasValue: this.state.hasValue,
-            clearButtonLabel,
-            size,
-          }}
-        >
+      // $FlowIssue - upgrade v0.112.0
+      <Container hasBeforeElement={!!elementBefore} hasAfterElement={!!elementAfter} disabled={disabled} invalid={!!isInvalid} warning={hasWarning} appearance={appearance} size={size} {...rest}>
+        <InputContext.Provider value={{
+          handleClear: this.handleClear,
+          hasValue: this.state.hasValue,
+          clearButtonLabel,
+          size
+        }}>
           {elementBefore && <Accessory before>{elementBefore}</Accessory>}
 
-          <input
-            aria-invalid={!!isInvalid}
-            aria-label={ariaLabel}
-            aria-describedby={ariaDescribedby}
-            autoComplete={autoCompleteValue}
-            autoFocus={autoFocus}
-            disabled={disabled}
-            readOnly={readOnly}
-            id={id}
-            name={name}
-            placeholder={placeholder}
-            type={type}
-            required={required}
-            value={value}
-            maxLength={maxLength}
-            onBlur={this.handleBlur}
-            onChange={this.handleChange}
-            onFocus={this.handleFocus}
-            onKeyDown={this.handleKeyDown}
-            onKeyUp={this.handleKeyUp}
-            onPaste={this.handlePaste}
-            ref={mergeRefs([innerRef, this.inputRef])}
-            data-qa-input={name || ''}
-            data-qa-input-isdisabled={disabled === true}
-            data-qa-input-isrequired={required === true}
-            {...qa}
-            {...inputProps}
-          />
+          <input aria-invalid={!!isInvalid} aria-label={ariaLabel} aria-describedby={ariaDescribedby} autoComplete={autoCompleteValue} autoFocus={autoFocus} disabled={disabled} readOnly={readOnly} id={id} name={name} placeholder={placeholder} type={type} required={required} value={value} maxLength={maxLength} onBlur={this.handleBlur} onChange={this.handleChange} onFocus={this.handleFocus} onKeyDown={this.handleKeyDown} onKeyUp={this.handleKeyUp} onPaste={this.handlePaste} ref={mergeRefs([innerRef, this.inputRef])} data-qa-input={name || ''} data-qa-input-isdisabled={disabled === true} data-qa-input-isrequired={required === true} {...qa} {...inputProps} />
 
-          {elementAfter && (
-            <Accessory after isClearButton={isClearButton(elementAfter)}>
+          {elementAfter && <Accessory after isClearButton={isClearButton(elementAfter)}>
               {elementAfter}
-            </Accessory>
-          )}
+            </Accessory>}
         </InputContext.Provider>
       </Container>
     );
   }
 }
-
 Input.ClearButton.displayName = 'Input.ClearButton';
-
-export default Input;
+export default Input;