@sproutsocial/racine 13.8.0 → 14.0.0

package/__flow__/TokenInput/index.js

@@ -1,258 +0,0 @@
-// @flow
-import * as React from 'react';
-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: TypeTokenInputProps,
-  hasFocus: boolean,
-  activeToken: ?string,
-  value: string,
-  ...
-};
-const DefaultDelimiters = [',', 'Enter'];
-const ControlledPropNames = ['value', 'hasFocus', 'activeToken'];
-export default class TokenInput extends React.Component<TypeTokenInputProps, TypeState> {
-  delimiterMatcher: RegExp;
-  constructor(props: TypeTokenInputProps) {
-    super(props);
-    const {
-      hasFocus,
-      activeToken,
-      value,
-      delimiters
-    } = props;
-    this.delimiterMatcher = delimitersAsRegExp(delimiters || DefaultDelimiters);
-    this.state = {
-      prevProps: props,
-      hasFocus: hasFocus || false,
-      activeToken: activeToken,
-      value: value || ''
-    };
-  }
-  static getDerivedStateFromProps(props: TypeTokenInputProps, state: TypeState) {
-    const {
-      prevProps
-    } = state;
-    const modifiedState = {};
-    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;
-    return delimiters.includes(keyName);
-  }
-  spawnNewTokens(texts: string[]) {
-    const {
-      onAddToken,
-      onChangeTokens,
-      tokenMaxLength: max = Infinity,
-      tokens = []
-    } = this.props;
-    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: ''
-    });
-  }
-  deleteToken(tokenId?: string) {
-    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));
-    }
-    this.setState({
-      value: ''
-    });
-  }
-  handleChangeText = (e: SyntheticInputEvent<HTMLInputElement>) => {
-    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
-    });
-    onFocus?.(e);
-  };
-  handleBlur = (e: SyntheticFocusEvent<HTMLInputElement>) => {
-    const {
-      onBlur
-    } = this.props;
-    if (onBlur) onBlur(e);
-    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 text = currentTarget.value;
-    if (onKeyDown) onKeyDown(e, text);
-
-    // keyPress event runs before change
-    // Prevent event from bubbling up and calling change, which can lead to comma in value
-
-    if (this.isDelimiter(key)) {
-      if (text) {
-        this.spawnNewTokens([text]);
-        e.preventDefault();
-      }
-    } else if (key === 'Backspace') {
-      if (text === '') {
-        this.deleteToken();
-      }
-    }
-  };
-  handlePaste = (e: SyntheticClipboardEvent<HTMLInputElement>) => {
-    const text = e.clipboardData.getData('text');
-    const {
-      onPaste
-    } = this.props;
-    if (onPaste) onPaste(e, text);
-    const subtexts = text.split(this.delimiterMatcher);
-    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;
-    if (onClickToken) onClickToken(e, token.id);
-    if (!disabled) {
-      this.deleteToken(token.id);
-    }
-  };
-  renderToken(token: TypeTokenSpec): React.Node {
-    const {
-      iconName: defaultIconName,
-      disabled
-    } = this.props;
-    const activeId = this.state.activeToken;
-    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}>
-        <Box display="flex" alignItems="center">
-          {iconName && <Icon name={iconName} size="mini" pr={300} />}
-          {value}
-        </Box>
-      </Token>;
-  }
-  renderTokens(tokens: TypeTokenSpec[]): React.Node {
-    return tokens.map<React.Node>(token => <div key={token.id} className="TokenInput-token">
-        {this.renderToken(token)}
-      </div>);
-  }
-  render() {
-    const {
-      autoFocus,
-      autocomplete,
-      disabled,
-      isInvalid,
-      hasWarning,
-      id,
-      name,
-      placeholder,
-      required,
-      value,
-      elemBefore,
-      elemAfter,
-      maxLength,
-      ariaDescribedby,
-      ariaLabel,
-      innerRef,
-      onAddToken,
-      onRemoveToken,
-      onChangeTokens,
-      onClickToken,
-      onBlur,
-      onChange,
-      onFocus,
-      onKeyDown,
-      onKeyUp,
-      onPaste,
-      inputProps = {},
-      qa = {},
-      tokens,
-      ...rest
-    } = this.props;
-    const {
-      state
-    } = this;
-    return (
-      // $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} />
-
-        {elemAfter && <Accessory after>{elemAfter}</Accessory>}
-      </Container>
-    );
-  }
-}

package/__flow__/TokenInput/styles.js

@@ -1,111 +0,0 @@
-//@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;
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  align-content: center;
-  cursor: text;
-  width: 100%;
-  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};
-  appearance: none;
-
-  button {
-    margin: ${props => props.theme.space[200]}
-      ${props => props.theme.space[200]} 0 0;
-  }
-
-  input {
-    ${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]}
-      0;
-    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;
-
-    &::-webkit-search-cancel-button {
-      appearance: none;
-    }
-
-    /* Explicitly removes double focus ring in environments where box-shadow focus styles have been specified (Seeds). Focus is passed up from the input to the parent container. */
-    &:focus {
-      box-shadow: none;
-    }
-
-    /* https://stackoverflow.com/questions/14007655/remove-ie10s-clear-field-x-button-on-certain-inputs */
-    &::-ms-clear {
-      display: none;
-    }
-
-    /* Fix for red ring when input is marked required in Firefox */
-    &:not(output):not(:focus):-moz-ui-invalid {
-      box-shadow: none;
-    }
-
-    ${props => props.disabled && css`
-        opacity: 0.4;
-
-        cursor: not-allowed;
-      `}
-  }
-
-  &:placeholder {
-    color: ${props => props.theme.colors.form.placeholder.base};
-  }
-
-  ${props => props.hasBeforeElement && css`
-      padding-left: 40px;
-    `}
-
-  ${props => props.hasAfterElement && css`
-      padding-right: 40px;
-    `}
-
-
-  ${props => props.disabled && css`
-      opacity: 0.4;
-
-      cursor: not-allowed;
-    `}
-
-  ${props => props.focused && css`
-      ${focusRing}
-    `}
-
-  ${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};
-    `}
-
-  ${COMMON}
-`;
-Container.displayName = 'TokenInputContainer';
-export default Container;

package/__flow__/TokenInput/util.js

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

package/__flow__/Tooltip/index.js

@@ -1,84 +0,0 @@
-// @flow
-import * as React from 'react';
-import { useState, useEffect } from 'react';
-import MOTION from '@sproutsocial/seeds-motion/dist/seeds-motion-unitless';
-import Popout from "../Popout";
-import { TooltipContent } from "./styles";
-import type { TypeTooltipProps } from "./index.flow";
-let idCounter = 0;
-const wrapContent = (content, show, hide, Wrapper, appearance, ariaProps: any, wrapperStyles: {
-  [key: string]: any
-}) => {
-  return <Wrapper appearance={appearance} onMouseOver={show} onMouseOut={hide} onFocus={show} onBlur={hide} style={Object.keys(wrapperStyles).length === 0 ? undefined : wrapperStyles} {...ariaProps}>
-      {React.isValidElement(content) ? React.cloneElement(content) : content}
-    </Wrapper>;
-};
-const Tooltip = ({
-  content,
-  children,
-  enterDelay = MOTION.MOTION_DURATION_FAST * 1000,
-  placement = 'auto',
-  appearance,
-  zIndex = 7,
-  qa,
-  popoutProps,
-  truncated = false,
-  ...rest
-}: TypeTooltipProps) => {
-  const [shouldShow, setShouldShow] = useState(false);
-  const [isOpen, setIsOpen] = useState(false);
-  const [id] = useState(`Racine-tooltip-${idCounter++}`);
-  const isInvalidContent = content === null || content === undefined;
-  const show = () => setShouldShow(true);
-  const hide = () => setShouldShow(false);
-  const exitDelay = MOTION.MOTION_DURATION_FAST * 1000;
-  const defaultAppearance = appearance || (typeof content === 'object' ? 'box' : 'pill');
-  const shouldTooltipContentsBeInteractive = defaultAppearance === 'box';
-  useEffect(() => {
-    let timeout;
-    if (shouldShow) {
-      timeout = setTimeout(() => setIsOpen(true), enterDelay);
-    } else {
-      timeout = setTimeout(() => setIsOpen(false), exitDelay);
-    }
-    return () => clearTimeout(timeout);
-  }, [isOpen, shouldShow, enterDelay, exitDelay]);
-  const wrappedContent = wrapContent(
-  // $FlowIssue - https://github.com/facebook/flow/issues/6392
-  content, shouldTooltipContentsBeInteractive ? show : undefined, shouldTooltipContentsBeInteractive ? hide : undefined, Content, defaultAppearance,
-  // $FlowIssue
-  {
-    id,
-    ...rest
-  }, {});
-  const ariaPropsForWrappedChildren = isOpen ? {
-    'aria-describedby': id
-  } : {};
-  const wrapperStylesForWrappedChildren = truncated ? {
-    overflow: 'hidden',
-    textOverflow: 'ellipsis',
-    whiteSpace: 'nowrap'
-  } : {};
-  const wrappedChildren = wrapContent(
-  // $FlowIssue - https://github.com/facebook/flow/issues/6392
-  children, show, hide, 'span', defaultAppearance, ariaPropsForWrappedChildren, wrapperStylesForWrappedChildren);
-  return <Popout content={!isInvalidContent ? wrappedContent : undefined} isOpen={isOpen} placement={placement} qa={{
-    'data-qa-tooltip': id,
-    ...qa
-  }} focusOnContent={false} zIndex={zIndex} display={truncated ? 'flex' : undefined} {...popoutProps}>
-      {wrappedChildren}
-    </Popout>;
-};
-const Content = ({
-  appearance = 'pill',
-  children,
-  ...rest
-}: {
-  appearance?: 'pill' | 'box',
-  children: string | React.Element<any>,
-}) =>
-// $FlowIssue - upgrade v0.112.0
-<TooltipContent appearance={appearance} borderRadius={appearance === 'box' ? 500 : '5000em'} px={400} py={appearance === 'box' ? 400 : 200} m={200} color="text.body" bg="container.background.base" boxShadow="medium" border={500} borderColor="container.border.base" {...rest}>
-    {children}
-  </TooltipContent>;
-export default Tooltip;

package/__flow__/Tooltip/styles.js

@@ -1,9 +0,0 @@
-//@flow
-import styled from 'styled-components';
-import Box from "../Box";
-import type { TypeTheme } from "../types/theme.flow";
-export const TooltipContent = styled<typeof Box, TypeTheme, any>(Box)`
-  font-family: ${props => props.theme.fontFamily};
-  ${props => props.theme.typography[200]}
-  text-align: ${props => props.appearance === 'box' ? 'left' : 'center'};
-`;

package/__flow__/VisuallyHidden/index.js

@@ -1,7 +0,0 @@
-//@flow
-import styled, { type StyledComponent } from 'styled-components';
-import { visuallyHidden } from "../utils/mixins";
-import type { TypeTheme } from "../types/theme.flow";
-export const VisuallyHidden: StyledComponent<any, TypeTheme, *> = styled.span`
-  ${visuallyHidden}
-`;

package/__flow__/dataviz/index.js

@@ -1,11 +0,0 @@
-// @flow
-import React from 'react';
-import { withTheme } from 'styled-components';
-import Box from "../Box";
-export const DataVizRotation = withTheme(p => {
-  return p.theme.colors.DATAVIZ_COLORS_LIST.map((color, i) => {
-    return <Box key={color} py={300} px={400} bg={color}>
-        {i + 1}
-      </Box>;
-  });
-});

package/__flow__/themes/dark/dataviz-palette.js

@@ -1,28 +0,0 @@
-// @flow strict-local
-
-import COLORS from '@sproutsocial/seeds-color';
-export const datavizPalette = {
-  DATAVIZ_COLORS_LIST: [COLORS.COLOR_TEAL_400, COLORS.COLOR_PURPLE_400, COLORS.COLOR_PINK_400, COLORS.COLOR_YELLOW_500, COLORS.COLOR_BLUE_400, COLORS.COLOR_MAGENTA_400, COLORS.COLOR_GREEN_400, COLORS.COLOR_ORANGE_400, COLORS.COLOR_RED_700, COLORS.COLOR_TEAL_700, COLORS.COLOR_PURPLE_700, COLORS.COLOR_PINK_700, COLORS.COLOR_YELLOW_800, COLORS.COLOR_BLUE_700, COLORS.COLOR_MAGENTA_700, COLORS.COLOR_GREEN_700, COLORS.COLOR_ORANGE_700, COLORS.COLOR_RED_400, COLORS.COLOR_GREEN_200, COLORS.COLOR_YELLOW_200],
-  DATAVIZ_COLORS_MAP: {
-    '1': COLORS.COLOR_TEAL_400,
-    '2': COLORS.COLOR_PURPLE_400,
-    '3': COLORS.COLOR_PINK_400,
-    '4': COLORS.COLOR_YELLOW_500,
-    '5': COLORS.COLOR_BLUE_400,
-    '6': COLORS.COLOR_MAGENTA_400,
-    '7': COLORS.COLOR_GREEN_400,
-    '8': COLORS.COLOR_ORANGE_400,
-    '9': COLORS.COLOR_RED_700,
-    '10': COLORS.COLOR_TEAL_700,
-    '11': COLORS.COLOR_PURPLE_700,
-    '12': COLORS.COLOR_PINK_700,
-    '13': COLORS.COLOR_YELLOW_800,
-    '14': COLORS.COLOR_BLUE_700,
-    '15': COLORS.COLOR_MAGENTA_700,
-    '16': COLORS.COLOR_GREEN_700,
-    '17': COLORS.COLOR_ORANGE_700,
-    '18': COLORS.COLOR_RED_400,
-    '19': COLORS.COLOR_GREEN_200,
-    '20': COLORS.COLOR_YELLOW_200
-  }
-};

package/__flow__/themes/dark/decorative-palettes.js

@@ -1,58 +0,0 @@
-// @flow strict-local
-
-import COLORS from '@sproutsocial/seeds-color';
-export const green = {
-  background: COLORS.COLOR_GREEN_900,
-  highlight: COLORS.COLOR_GREEN_500,
-  foreground: COLORS.COLOR_GREEN_100
-};
-export const blue = {
-  background: COLORS.COLOR_BLUE_900,
-  highlight: COLORS.COLOR_BLUE_600,
-  foreground: COLORS.COLOR_BLUE_100
-};
-export const purple = {
-  background: COLORS.COLOR_PURPLE_900,
-  highlight: COLORS.COLOR_PURPLE_500,
-  foreground: COLORS.COLOR_PURPLE_100
-};
-export const yellow = {
-  background: COLORS.COLOR_YELLOW_900,
-  highlight: COLORS.COLOR_YELLOW_600,
-  foreground: COLORS.COLOR_YELLOW_100
-};
-export const orange = {
-  background: COLORS.COLOR_ORANGE_900,
-  highlight: COLORS.COLOR_ORANGE_600,
-  foreground: COLORS.COLOR_ORANGE_100
-};
-export const red = {
-  background: COLORS.COLOR_RED_900,
-  highlight: COLORS.COLOR_RED_600,
-  foreground: COLORS.COLOR_RED_100
-};
-export const neutral = {
-  background: COLORS.COLOR_NEUTRAL_1000,
-  highlight: COLORS.COLOR_NEUTRAL_500,
-  foreground: COLORS.COLOR_NEUTRAL_100
-};
-export const magenta = {
-  background: COLORS.COLOR_MAGENTA_900,
-  highlight: COLORS.COLOR_MAGENTA_600,
-  foreground: COLORS.COLOR_MAGENTA_100
-};
-export const pink = {
-  background: COLORS.COLOR_PINK_900,
-  highlight: COLORS.COLOR_PINK_600,
-  foreground: COLORS.COLOR_PINK_100
-};
-export const aqua = {
-  background: COLORS.COLOR_AQUA_900,
-  highlight: COLORS.COLOR_AQUA_500,
-  foreground: COLORS.COLOR_AQUA_100
-};
-export const teal = {
-  background: COLORS.COLOR_TEAL_900,
-  highlight: COLORS.COLOR_TEAL_500,
-  foreground: COLORS.COLOR_TEAL_100
-};