@sproutsocial/racine 13.7.1 → 14.0.0

package/__flow__/Textarea/index.js

@@ -1,79 +0,0 @@
-// @flow
-import * as React from 'react';
-import Container, { Accessory } from "./styles";
-import type { TypeTextareaProps } from "./index.flow";
-
-/**
- * @deprecated Use TypeTextareaProps from root instead
- */
-export type TypeProps = TypeTextareaProps;
-export default class Textarea extends React.Component<TypeTextareaProps> {
-  static defaultProps = {
-    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,
-      disabled,
-      readOnly,
-      isInvalid,
-      id,
-      name,
-      placeholder,
-      value,
-      enableSpellcheck,
-      enableResize,
-      required,
-      rows,
-      elemBefore,
-      elemAfter,
-      maxLength,
-      ariaLabel,
-      ariaDescribedby,
-      innerRef,
-      onBlur,
-      onChange,
-      onFocus,
-      onKeyDown,
-      onKeyUp,
-      qa = {},
-      inputProps = {},
-      ...rest
-    } = this.props;
-    return (
-      // $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} />
-
-        {elemAfter && <Accessory after>{elemAfter}</Accessory>}
-      </Container>
-    );
-  }
-}

package/__flow__/Textarea/styles.js

@@ -1,83 +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;
-
-  textarea {
-    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};
-    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};
-    appearance: none;
-
-    &:focus {
-      ${focusRing}
-    }
-
-    &:placeholder {
-      color: ${props => props.theme.colors.form.placeholder.base};
-    }
-
-    ${props => props.resizable && css`
-        resize: vertical;
-      `}
-
-    ${props => props.hasBeforeElement && css`
-        padding-left: 40px;
-      `}
-
-    ${props => props.hasAfterElement && css`
-        padding-right: 40px;
-      `}
-  }
-
-  ${props => props.disabled && css`
-      opacity: 0.4;
-
-      textarea {
-        cursor: not-allowed;
-      }
-    `}
-
-  ${props => props.invalid && css`
-      textarea {
-        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};
-
-  ${props => props.before && css`
-      top: ${props.theme.space[300]};
-      left: ${props.theme.space[350]};
-    `};
-
-  ${props => props.after && css`
-      right: ${props.theme.space[350]};
-      bottom: ${props.theme.space[300]};
-    `};
-`;
-Container.displayName = 'TextareaContainer';
-Accessory.displayName = 'TextareaAccessory';
-export default Container;

package/__flow__/ThemeProvider/index.js

@@ -1,14 +0,0 @@
-// @flow strict-local
-import * as React from 'react';
-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;

package/__flow__/Toast/index.js

@@ -1,92 +0,0 @@
-// @flow
-import * as React from 'react';
-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
-});
-const Zoom = cssTransition({
-  enter: 'Toastify__zoom-enter',
-  exit: 'Toastify__zoom-exit',
-  duration: [MOTION_DURATION_MEDIUM * 1000, MOTION_DURATION_SLOW * 1000]
-});
-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>;
-const themeIcon = {
-  success: 'circle-check-filled',
-  info: 'info',
-  warning: 'triangle',
-  error: 'triangle'
-};
-export function toast(options: TypeToastOptions): void {
-  const props = {
-    theme: options.theme,
-    content: options.content,
-    color: options.color,
-    icon: options.icon
-  };
-  const autoClose = options.persist ? false : 6000;
-  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
-  });
-}
-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 />
-        </IconBox>
-
-        <Box flex={1} css={`
-            transform: translateY(1px);
-          `}>
-          <Text as="div" color="text.body" data-qa-toast-content="">
-            {content}
-          </Text>
-        </Box>
-
-        <IconBox>
-          <Icon name="x" ml={400} color="icon.base" />
-        </IconBox>
-      </Box>
-    </Container>;
-};
-export default ToastContainer;

package/__flow__/Toast/styles.js

@@ -1,61 +0,0 @@
-//@flow
-import styled, { createGlobalStyle } from 'styled-components';
-// $FlowIssue
-import toastStyles from '!!raw-loader!react-toastify/dist/ReactToastify.css'; // eslint-disable-line import/no-unresolved
-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]}
-  position: relative;
-  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]};
-  transform: translateY(4px);
-  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};
-		background: transparent;
-	}
-
-	.Toastify__toast:last-of-type {
-		margin-bottom: 0;
-	}
-
-	.Toastify-container-overrides {
-		padding: 0;
-		width: 360px;
-	}
-
-	.Toastify-toast-overrides {
-		padding: 0;
-		min-height: 0;
-		border-radius: 2px;
-	}
-
-	.Toastify__toast-container--bottom-right {
-		bottom: ${p => p.theme.space[400]};
-		right: ${p => p.theme.space[400]};
-	}
-
-	/* Override React Toastify's mobile width styles */
-	@media only screen and (max-width: 480px) {
-		.Toastify-container-overrides {
-			min-width: initial;
-		}
-	}
-`;
-export default Container;

package/__flow__/ToggleHint/index.js

@@ -1,40 +0,0 @@
-// @flow
-import * as React from 'react';
-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<TypeToggleHintProps> {
-  static defaultProps = {
-    isOpen: false,
-    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;
-    return (
-      // $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,28 +0,0 @@
-//@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'
-})`
-  position: relative;
-  display: inline-block;
-  padding: ${props => props.theme.space[100]};
-  color: currentColor;
-
-  ${props => props.icon === 'chevron' && css`
-      transition: transform
-        ${props => `${props.theme.duration.medium} ${props.theme.easing.ease_inout}`};
-
-      ${props.isOpen && css`
-        transform: rotateX(180deg);
-      `}
-    `}
-
-  ${COMMON}
-`;
-export const IconText: StyledComponent<{...}, TypeTheme, *> = styled.div`
-  ${visuallyHidden}
-`;
-export default Container;

package/__flow__/Token/index.js

@@ -1,33 +0,0 @@
-// @flow
-import * as React from 'react';
-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,
-  onClick,
-  qa,
-  valid = true,
-  disabled = false,
-  palette = 'neutral',
-  ...rest
-}: TypeTokenProps) => {
-  const textContainer = useTextContent('');
-  return (
-    // $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}
-    </Container>
-  );
-};
-export default Token;

package/__flow__/Token/styles.js

@@ -1,91 +0,0 @@
-//@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;
-  margin: 0;
-  line-height: 1;
-  vertical-align: middle;
-  outline: none;
-  /* Theme Properties */
-  ${({
-  theme
-}) => css`
-    ${theme.typography[200]}
-    font-family: ${theme.fontFamily};
-    font-weight: ${theme.fontWeights.normal};
-    border: 1px solid ${theme.colors.container.border.base};
-    border-radius: ${theme.radii[500]};
-    color: ${theme.colors.text.body};
-    background: ${theme.colors.container.background.base};
-    padding: ${theme.space[200]} ${theme.space[300]};
-    transition: all ${theme.duration.fast} ${theme.easing.ease_inout};
-  `}
-
-  &:focus {
-    ${focusRing}
-  }
-
-  ${({
-  closeable,
-  theme
-}) => closeable && css`
-      cursor: pointer;
-      &:hover,
-      &:active {
-        box-shadow: ${theme.shadows.low};
-        border: 1px solid
-          ${useInteractiveColor(theme.colors.container.border.base)};
-      }
-    `}
-
-  ${({
-  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};
-      &:hover,
-      &:active {
-        cursor: pointer;
-        box-shadow: ${theme.shadows.low};
-        border: 1px solid
-          ${useInteractiveColor(theme.colors.container.border.decorative.blue)};
-      }
-    `}
-
-  ${({
-  disabled,
-  theme
-}) => disabled && css`
-      opacity: 0.4;
-      cursor: not-allowed;
-      &:hover,
-      &:active {
-        box-shadow: none;
-        border: 1px solid ${theme.colors.container.border.base};
-      }
-    `}
-    
-  ${({
-  valid,
-  theme
-}) => !valid && css`
-      color: ${theme.colors.text.error};
-      background: ${theme.colors.container.background.error};
-      border: 1px solid ${theme.colors.container.border.error};
-      &:hover {
-        box-shadow: ${theme.shadows.low};
-        border: 1px solid
-          ${useInteractiveColor(theme.colors.container.border.error)};
-      }
-    `}
-
-  ${COMMON}
-`;
-export default Container;