@sproutsocial/racine 12.23.0 → 13.0.2

package/__flow__/TokenInput/index.js

@@ -1,214 +1,146 @@
 // @flow
-
 import * as React from 'react';
-import Container from './styles';
-import {asTokenSpec, delimitersAsRegExp} from './util';
-import {Accessory} from '../Input/styles';
-import type {EnumIconNames} from '../EnumIconNames';
-import Box from '../Box';
-import Icon from '../Icon';
-import Token from '../Token';
-
-import type {TypeTokenSpec} from './index.flow';
-
-export type {TypeTokenSpec};
-
-export type TypeProps = {
-  /** 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,
-};
-
+import { Accessory } from "../Input/styles";
+import Box from "../Box";
+import Icon from "../Icon";
+import Token from "../Token";
+import Container from "./styles";
+import { asTokenSpec, delimitersAsRegExp } from "./util";
+import type { TypeTokenInputProps, TypeTokenSpec as TypeTokenSpec2 } from "./index.flow";
+
+/**
+ * @deprecated Use TypeTokenSpec from root instead
+ */
+export type TypeTokenSpec = TypeTokenSpec2;
+
+/**
+ * @deprecated Use TypeTokenInputProps from root instead
+ */
+export type TypeProps = TypeTokenInputProps;
 type TypeState = {
-  prevProps: TypeProps,
+  prevProps: TypeTokenInputProps,
   hasFocus: boolean,
   activeToken: ?string,
   value: string,
+  ...
 };
-
 const DefaultDelimiters = [',', 'Enter'];
-
 const ControlledPropNames = ['value', 'hasFocus', 'activeToken'];
-export default class TokenInput extends React.Component<TypeProps, TypeState> {
+export default class TokenInput extends React.Component<TypeTokenInputProps, TypeState> {
   delimiterMatcher: RegExp;
-
-  constructor(props: TypeProps) {
+  constructor(props: TypeTokenInputProps) {
     super(props);
-
-    const {hasFocus, activeToken, value, delimiters} = props;
-
+    const {
+      hasFocus,
+      activeToken,
+      value,
+      delimiters
+    } = props;
     this.delimiterMatcher = delimitersAsRegExp(delimiters || DefaultDelimiters);
-
     this.state = {
       prevProps: props,
       hasFocus: hasFocus || false,
       activeToken: activeToken,
-      value: value || '',
+      value: value || ''
     };
   }
-
-  static getDerivedStateFromProps(props: TypeProps, state: TypeState) {
-    const {prevProps} = state;
+  static getDerivedStateFromProps(props: TypeTokenInputProps, state: TypeState) {
+    const {
+      prevProps
+    } = state;
     const modifiedState = {};
-
-    ControlledPropNames.forEach((propName) => {
+    ControlledPropNames.forEach(propName => {
       const currentProp = props[propName];
       if (currentProp !== prevProps[propName]) {
         modifiedState[propName] = currentProp;
       }
     });
-
     modifiedState.prevProps = props;
     return modifiedState;
   }
-
   isDelimiter(keyName: string) {
-    const {delimiters = DefaultDelimiters} = this.props;
-
+    const {
+      delimiters = DefaultDelimiters
+    } = this.props;
     return delimiters.includes(keyName);
   }
-
   spawnNewTokens(texts: string[]) {
     const {
       onAddToken,
       onChangeTokens,
       tokenMaxLength: max = Infinity,
-      tokens = [],
+      tokens = []
     } = this.props;
-    const tokenSpecs = texts.map((text) => asTokenSpec(text.slice(0, max)));
-
+    const tokenSpecs = texts.map(text => asTokenSpec(text.slice(0, max)));
     if (onAddToken) {
       tokenSpecs.forEach(onAddToken);
     } else if (onChangeTokens) {
       onChangeTokens(tokens.concat(tokenSpecs));
     }
-
-    this.setState({value: ''});
+    this.setState({
+      value: ''
+    });
   }
-
   deleteToken(tokenId?: string) {
-    const {onRemoveToken, onChangeTokens, tokens = []} = this.props;
+    const {
+      onRemoveToken,
+      onChangeTokens,
+      tokens = []
+    } = this.props;
     const count = tokens.length;
-
     if (count === 0) return;
-
     const id = tokenId ?? tokens[count - 1].id;
-
     if (onRemoveToken) {
       onRemoveToken(id);
     } else if (onChangeTokens) {
-      onChangeTokens(tokens.filter((tokenSpec) => tokenSpec.id !== id));
+      onChangeTokens(tokens.filter(tokenSpec => tokenSpec.id !== id));
     }
-
-    this.setState({value: ''});
+    this.setState({
+      value: ''
+    });
   }
-
   handleChangeText = (e: SyntheticInputEvent<HTMLInputElement>) => {
-    const {value} = e.currentTarget;
-    const {onChange} = this.props;
-
-    this.setState({value});
-
+    const {
+      value
+    } = e.currentTarget;
+    const {
+      onChange
+    } = this.props;
+    this.setState({
+      value
+    });
     onChange?.(e, value);
   };
-
   handleFocus = (e: SyntheticFocusEvent<HTMLInputElement>) => {
-    const {onFocus} = this.props;
-
-    this.setState({hasFocus: true});
-
+    const {
+      onFocus
+    } = this.props;
+    this.setState({
+      hasFocus: true
+    });
     onFocus?.(e);
   };
-
   handleBlur = (e: SyntheticFocusEvent<HTMLInputElement>) => {
-    const {onBlur} = this.props;
-
+    const {
+      onBlur
+    } = this.props;
     if (onBlur) onBlur(e);
-
-    this.setState({hasFocus: false});
+    this.setState({
+      hasFocus: false
+    });
   };
-
   handleKeyUp = (e: SyntheticKeyboardEvent<HTMLInputElement>) => {
     this.props.onKeyUp?.(e, e.currentTarget.value);
   };
-
   handleKeyDown = (e: SyntheticKeyboardEvent<HTMLInputElement>) => {
-    const {onKeyDown} = this.props;
-    const {key, currentTarget} = e;
+    const {
+      onKeyDown
+    } = this.props;
+    const {
+      key,
+      currentTarget
+    } = e;
     const text = currentTarget.value;
-
     if (onKeyDown) onKeyDown(e, text);
 
     // keyPress event runs before change
@@ -225,66 +157,55 @@ export default class TokenInput extends React.Component<TypeProps, TypeState> {
       }
     }
   };
-
   handlePaste = (e: SyntheticClipboardEvent<HTMLInputElement>) => {
     const text = e.clipboardData.getData('text');
-    const {onPaste} = this.props;
-
+    const {
+      onPaste
+    } = this.props;
     if (onPaste) onPaste(e, text);
-
     const subtexts = text.split(this.delimiterMatcher);
-    const texts = subtexts.filter((subtext) => subtext.length);
-
+    const texts = subtexts.filter(subtext => subtext.length);
     if (texts.length > 1) {
       this.spawnNewTokens(texts);
       e.preventDefault();
     }
   };
-
-  handleClickToken = (
-    e: SyntheticEvent<HTMLButtonElement>,
-    token: TypeTokenSpec
-  ) => {
-    const {onClickToken, disabled} = this.props;
-
+  handleClickToken = (e: SyntheticEvent<HTMLButtonElement>, token: TypeTokenSpec) => {
+    const {
+      onClickToken,
+      disabled
+    } = this.props;
     if (onClickToken) onClickToken(e, token.id);
-
     if (!disabled) {
       this.deleteToken(token.id);
     }
   };
-
   renderToken(token: TypeTokenSpec): React.Node {
-    const {iconName: defaultIconName, disabled} = this.props;
+    const {
+      iconName: defaultIconName,
+      disabled
+    } = this.props;
     const activeId = this.state.activeToken;
-    const {id, iconName: tokenIconName, value, valid} = token;
+    const {
+      id,
+      iconName: tokenIconName,
+      value,
+      valid
+    } = token;
     const iconName = tokenIconName || defaultIconName;
     const isActive = activeId === id;
-
-    return (
-      <Token
-        id={id}
-        onClick={(e) => this.handleClickToken(e, token)}
-        valid={valid}
-        active={isActive}
-        disabled={disabled}
-      >
+    return <Token id={id} onClick={e => this.handleClickToken(e, token)} valid={valid} active={isActive} disabled={disabled}>
         <Box display="flex" alignItems="center">
           {iconName && <Icon name={iconName} size="mini" pr={300} />}
           {value}
         </Box>
-      </Token>
-    );
+      </Token>;
   }
-
   renderTokens(tokens: TypeTokenSpec[]): React.Node {
-    return tokens.map<React.Node>((token) => (
-      <div key={token.id} className="TokenInput-token">
+    return tokens.map<React.Node>(token => <div key={token.id} className="TokenInput-token">
         {this.renderToken(token)}
-      </div>
-    ));
+      </div>);
   }
-
   render() {
     const {
       autoFocus,
@@ -318,54 +239,20 @@ export default class TokenInput extends React.Component<TypeProps, TypeState> {
       tokens,
       ...rest
     } = this.props;
-
-    const {state} = this;
-
+    const {
+      state
+    } = this;
     return (
-      <Container
-        hasBeforeElement={!!elemBefore}
-        hasAfterElement={!!elemAfter}
-        disabled={disabled}
-        invalid={!!isInvalid}
-        warning={hasWarning}
-        focused={state.hasFocus}
-        // $FlowIssue - upgrade v0.112.0
-        {...rest}
-      >
+      // $FlowIssue - upgrade v0.112.0
+      <Container hasBeforeElement={!!elemBefore} hasAfterElement={!!elemAfter} disabled={disabled} invalid={!!isInvalid} warning={hasWarning} focused={state.hasFocus} {...rest}>
         {elemBefore && <Accessory before>{elemBefore}</Accessory>}
 
         {tokens && this.renderTokens(tokens)}
 
-        <input
-          aria-describedby={ariaDescribedby}
-          aria-invalid={!!isInvalid}
-          aria-label={ariaLabel}
-          autoFocus={autoFocus}
-          autoComplete={autocomplete}
-          disabled={disabled}
-          id={id}
-          name={name}
-          placeholder={placeholder}
-          type="text"
-          required={required}
-          value={state.value}
-          maxLength={maxLength}
-          onBlur={this.handleBlur}
-          onChange={this.handleChangeText}
-          onFocus={this.handleFocus}
-          onKeyDown={this.handleKeyDown}
-          onKeyUp={this.handleKeyUp}
-          onPaste={this.handlePaste}
-          ref={innerRef}
-          data-qa-input={name || ''}
-          data-qa-input-isdisabled={!!disabled}
-          data-qa-input-isrequired={!!required}
-          {...qa}
-          {...inputProps}
-        />
+        <input aria-describedby={ariaDescribedby} aria-invalid={!!isInvalid} aria-label={ariaLabel} autoFocus={autoFocus} autoComplete={autocomplete} disabled={disabled} id={id} name={name} placeholder={placeholder} type="text" required={required} value={state.value} maxLength={maxLength} onBlur={this.handleBlur} onChange={this.handleChangeText} onFocus={this.handleFocus} onKeyDown={this.handleKeyDown} onKeyUp={this.handleKeyUp} onPaste={this.handlePaste} ref={innerRef} data-qa-input={name || ''} data-qa-input-isdisabled={!!disabled} data-qa-input-isrequired={!!required} {...qa} {...inputProps} />
 
         {elemAfter && <Accessory after>{elemAfter}</Accessory>}
       </Container>
     );
   }
-}
+}

package/__flow__/TokenInput/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;
@@ -14,39 +12,39 @@ const Container: StyledComponent<any, TypeTheme, *> = styled.div`
   align-content: center;
   cursor: text;
   width: 100%;
-  border: 1px solid ${(props) => props.theme.colors.form.border.base};
-  border-radius: ${(props) => props.theme.radii[500]};
+  border: 1px solid ${props => props.theme.colors.form.border.base};
+  border-radius: ${props => props.theme.radii[500]};
   margin: 0;
-  padding: ${(props) => props.theme.space[300]};
-  padding-top: ${(props) => props.theme.space[200]};
-  background-color: ${(props) => props.theme.colors.form.background.base};
-  color: ${(props) => props.theme.colors.text.body};
-  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};
-  ${(props) => props.theme.typography[200]};
-  font-family: ${(props) => props.theme.fontFamily};
-  font-weight: ${(props) => props.theme.fontWeights.normal};
+  padding: ${props => props.theme.space[300]};
+  padding-top: ${props => props.theme.space[200]};
+  background-color: ${props => props.theme.colors.form.background.base};
+  color: ${props => props.theme.colors.text.body};
+  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};
+  ${props => props.theme.typography[200]};
+  font-family: ${props => props.theme.fontFamily};
+  font-weight: ${props => props.theme.fontWeights.normal};
   appearance: none;
 
   button {
-    margin: ${(props) => props.theme.space[200]}
-      ${(props) => props.theme.space[200]} 0 0;
+    margin: ${props => props.theme.space[200]}
+      ${props => props.theme.space[200]} 0 0;
   }
 
   input {
-    ${(props) => props.theme.typography[200]};
+    ${props => props.theme.typography[200]};
     outline: none;
     border: none;
     flex: 1;
     padding: 0;
-    padding-top: ${(props) => props.theme.space[100]};
-    margin: ${(props) => props.theme.space[200]}
-      ${(props) => props.theme.space[300]} ${(props) => props.theme.space[100]}
+    padding-top: ${props => props.theme.space[100]};
+    margin: ${props => props.theme.space[200]}
+      ${props => props.theme.space[300]} ${props => props.theme.space[100]}
       0;
-    color: ${(props) => props.theme.colors.text.body};
-    background-color: ${(props) => props.theme.colors.form.background.base};
+    color: ${props => props.theme.colors.text.body};
+    background-color: ${props => props.theme.colors.form.background.base};
     /** This matches the height of the token so size does not change as tokens are added */
     min-height: 20px;
 
@@ -69,9 +67,7 @@ const Container: StyledComponent<any, TypeTheme, *> = styled.div`
       box-shadow: none;
     }
 
-    ${(props) =>
-      props.disabled &&
-      css`
+    ${props => props.disabled && css`
         opacity: 0.4;
 
         cursor: not-allowed;
@@ -79,51 +75,37 @@ 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.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;
 
       cursor: not-allowed;
     `}
 
-  ${(props) =>
-    props.focused &&
-    css`
+  ${props => props.focused && css`
       ${focusRing}
     `}
 
-  ${(props) =>
-    props.invalid &&
-    css`
-      border-color: ${(props) => props.theme.colors.form.border.error};
+  ${props => props.invalid && css`
+      border-color: ${props => props.theme.colors.form.border.error};
     `}
 
-	${(props) =>
-    props.warning &&
-    css`
-      border-color: ${(props) => props.theme.colors.form.border.warning};
+	${props => props.warning && css`
+      border-color: ${props => props.theme.colors.form.border.warning};
     `}
 
   ${COMMON}
 `;
-
 Container.displayName = 'TokenInputContainer';
-
-export default Container;
+export default Container;

package/__flow__/TokenInput/util.js

@@ -1,21 +1,16 @@
 // @flow
 
 import uniqueId from 'lodash.uniqueid';
-
-import type {TypeTokenSpec} from './index.flow';
-
+import type { TypeTokenSpec } from "./index.flow";
 export const asTokenSpec = (text: string): TypeTokenSpec => ({
   id: uniqueId(`${text}-`),
-  value: text.trim(),
+  value: text.trim()
 });
-
 const KeyNameToRegExpChar = {
-  Enter: '\\n',
+  Enter: '\\n'
 };
-
-export const delimitersAsRegExp = (delimiters: ?(string[])) => {
+export const delimitersAsRegExp = (delimiters: ?string[]) => {
   if (!delimiters) return /[,\n]/;
-
-  let chars = delimiters.map((key) => KeyNameToRegExpChar[key] || key).join('');
+  let chars = delimiters.map(key => KeyNameToRegExpChar[key] || key).join('');
   return RegExp(`[${chars}]`);
-};
+};

package/__flow__/Tooltip/index.flow.js

@@ -0,0 +1,22 @@
+// @flow
+import * as React from 'react';
+import type { EnumPlacements } from "../Popout/index.flow";
+export type TypeTooltipProps = {
+  /** The content that the tooltip should be attached to. Hovering or focusing this element will cause the tooltip to appear */
+  children: React.Node,
+  /** The content to be displayed within the tooltip. If there is no content, just the children are rendered */
+  content: React.Node,
+  /** The placement of the tooltip in relation to the children */
+  placement?: EnumPlacements,
+  /** The time (in ms) that a user has to be hovered/focused before the tooltip will appear  */
+  enterDelay?: number,
+  /** Used to override the appearance of the Tooltip content. By default, strings will have the 'pill' appearance, and more complex content will have the 'box' appearance. You can change those defaults by setting this prop. */
+  appearance?: 'pill' | 'box',
+  qa?: Object,
+  zIndex?: number,
+  /** Props to be spread onto the underlying Popout component */
+  popoutProps?: Object,
+  /** Truncates text into a single line with ellipsis */
+  truncated?: boolean,
+  ...
+};