@sproutsocial/racine 13.8.0 → 14.0.0

package/__flow__/Input/index.js

@@ -1,199 +0,0 @@
-// @flow
-import * as React from 'react';
-import styled from 'styled-components';
-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,
-// regardless of whether it is manually included as elemAfter or automatically included for type="search" Inputs.
-type TypeInputContext = $Shape<{
-  handleClear: (e: SyntheticEvent<HTMLButtonElement>) => void,
-  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)};
-  }
-`;
-const ClearButton = () => {
-  const {
-    handleClear,
-    clearButtonLabel,
-    hasValue,
-    size: inputSize
-  } = React.useContext(InputContext);
-
-  // Hide the button when there is no text to clear.
-  if (!hasValue) {
-    return null;
-  }
-
-  // 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.');
-  }
-
-  // Reduce Button padding for size small Inputs so that the Button won't go outside the bounds of the Input.
-  // This adjustment is handled automatically for default and large Inputs via Button's size. There is no "small" Button.
-  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">
-      <Icon name="circlex" />
-    </StyledButton>;
-};
-
-// Used for positioning elementAfter. This logic will detect if the element is a ClearButton,
-// regardless of whether it was manually passed as elemAfter or automatically added to a search Input.
-const isClearButton = (elem: any) => {
-  if (elem?.type) {
-    return elem.type.displayName === 'Input.ClearButton';
-  }
-  return false;
-};
-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
-    };
-  }
-  static defaultProps = {
-    autoFocus: false,
-    disabled: false,
-    type: 'text',
-    size: 'default',
-    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);
-  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;
-      nativeInputValueSetter?.call(input, '');
-      const inputEvent = new Event('input', {
-        bubbles: true
-      });
-      input.dispatchEvent(inputEvent);
-
-      // Focus the input, update hasValue, and call any onClear callback
-      input.focus();
-      this.updateState('');
-      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);
-  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
-      });
-    }
-  };
-  render() {
-    const {
-      autoComplete,
-      autoFocus,
-      disabled,
-      readOnly,
-      isInvalid,
-      hasWarning,
-      id,
-      name,
-      placeholder,
-      type,
-      required,
-      value,
-      elemBefore,
-      elemAfter,
-      maxLength,
-      ariaLabel,
-      ariaDescribedby,
-      clearButtonLabel,
-      innerRef,
-      onBlur,
-      onChange,
-      onClear,
-      onFocus,
-      onKeyDown,
-      onKeyUp,
-      onPaste,
-      inputProps = {},
-      qa = {},
-      appearance,
-      size,
-      ...rest
-    } = this.props;
-
-    // Convert autoComplete from a boolean prop to a string value.
-    let autoCompleteValue;
-    if (autoComplete !== undefined) {
-      autoCompleteValue = autoComplete ? 'on' : 'off';
-    }
-
-    // Add default elemBefore and elemAfter elements if type is search.
-    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;
-    return (
-      // $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} />
-
-          {elementAfter && <Accessory after isClearButton={isClearButton(elementAfter)}>
-              {elementAfter}
-            </Accessory>}
-        </InputContext.Provider>
-      </Container>
-    );
-  }
-}
-Input.ClearButton.displayName = 'Input.ClearButton';
-export default Input;

package/__flow__/Input/styles.js

@@ -1,129 +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;
-
-  input {
-    box-sizing: border-box;
-    width: 100%;
-    border: 1px solid transparent;
-    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;
-    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};
-    font-weight: ${props => props.theme.fontWeights.normal};
-    appearance: none;
-    /** This matches the overall height of Button and Select */
-    line-height: 16px;
-    margin: 0;
-
-    padding: ${props => {
-  switch (props.size) {
-    case 'large':
-      return props.theme.space[400];
-    case 'small':
-      return props.theme.space[200];
-    case 'default':
-    default:
-      return props.theme.space[300];
-  }
-}};
-
-    font-size: ${props => {
-  switch (props.size) {
-    case 'large':
-      return props.theme.typography[300].fontSize;
-    case 'small':
-    case 'default':
-    default:
-      return props.theme.typography[200].fontSize;
-  }
-}};
-
-    /* https://stackoverflow.com/questions/14007655/remove-ie10s-clear-field-x-button-on-certain-inputs */
-    &::-ms-clear {
-      display: none;
-    }
-
-    &::-webkit-search-cancel-button {
-      appearance: none;
-    }
-
-    &:focus {
-      ${focusRing}
-    }
-
-    /* Fix for red ring when input is marked required in Firefox */
-    &:not(output):not(:focus):-moz-ui-invalid {
-      box-shadow: none;
-    }
-
-    &::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;
-
-      input {
-        cursor: not-allowed;
-      }
-    `}
-
-  ${props => props.appearance === 'primary' && css`
-      input {
-        border: 1px solid ${props => props.theme.colors.form.border.base};
-      }
-    `}
-
-  ${props => props.invalid && css`
-      input {
-        border-color: ${props => props.theme.colors.form.border.error};
-      }
-    `}
-
-	${props => props.warning && css`
-      input {
-        border-color: ${props => props.theme.colors.form.border.warning};
-      }
-    `}
-
-  ${COMMON}
-`;
-export const Accessory: StyledComponent<any, TypeTheme, *> = styled.div`
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-  color: ${props => props.theme.colors.icon.base};
-  display: flex;
-  align-items: center;
-
-  ${props => props.before && css`
-      left: ${props.theme.space[300]};
-    `};
-
-  ${props => props.after && css`
-      right: ${props.isClearButton ? 0 : props.theme.space[300]};
-    `};
-`;
-Container.displayName = 'InputContainer';
-Accessory.displayName = 'InputAccessory';
-export default Container;

package/__flow__/KeyboardKey/index.js

@@ -1,23 +0,0 @@
-// @flow
-import * as React from 'react';
-import Text from "../Text";
-import Container from "./styles";
-import type { TypeKeyboardKeyProps } from "./index.flow";
-
-/**
- * @deprecated Use TypeKeyboardKeyProps from root instead
- */
-export type TypeProps = TypeKeyboardKeyProps;
-export default class KeyboardKey extends React.Component<TypeProps> {
-  render() {
-    const {
-      children,
-      ...rest
-    } = this.props;
-    return <Container {...rest}>
-        <kbd data-qa-keyboardkey={children}>
-          <Text>{children}</Text>
-        </kbd>
-      </Container>;
-  }
-}

package/__flow__/KeyboardKey/styles.js

@@ -1,18 +0,0 @@
-//@flow
-import styled, { type StyledComponent } from 'styled-components';
-import { COMMON } from "../utils/system-props";
-import type { TypeTheme } from "../types/theme.flow";
-const Container: StyledComponent<{...}, TypeTheme, *> = styled.div`
-  display: inline-flex;
-  color: ${props => props.theme.colors.text.body};
-  background-color: ${props => props.theme.colors.container.background.base};
-  border: 1px solid ${props => props.theme.colors.container.border.base};
-  border-radius: ${props => props.theme.radii[500]};
-  box-shadow: ${props => props.theme.shadows.low};
-  padding: 0 ${props => props.theme.space[200]};
-  min-width: 20px;
-  justify-content: center;
-
-  ${COMMON}
-`;
-export default Container;

package/__flow__/Label/index.js

@@ -1,24 +0,0 @@
-'no babel-plugin-flow-react-proptypes';
-
-// @flow
-import * as React from 'react';
-import styled from 'styled-components';
-import Text from "../Text";
-import type { TypeTheme } from "../types/theme.flow";
-import type { TypeLabelBaseProps, TypeLabelProps } from "./index.flow";
-const LabelBase = ({
-  as = 'label',
-  ...rest
-}: TypeLabelBaseProps) => <Text {...rest} as={as} />;
-const StyledLabel = styled<typeof LabelBase, TypeTheme>(LabelBase)`
-  display: flex;
-  align-items: center;
-`;
-export default class Label extends React.Component<TypeLabelProps> {
-  render() {
-    return (
-      // $FlowIssue - upgrade v0.112.0
-      <StyledLabel fontSize={200} fontWeight="semibold" color="text.headline" data-qa-label={this.props.htmlFor} {...this.props} />
-    );
-  }
-}

package/__flow__/Link/constants.js

@@ -1,12 +0,0 @@
-// @flow
-import { COLOR_BLUE_900 } from '@sproutsocial/seeds-color';
-const defaultLink = {
-  color: 'link',
-  hoverColor: 'link.hover',
-  activeColor: COLOR_BLUE_900,
-  fontWeight: 'semibold'
-};
-const linkTheme = {
-  default: defaultLink
-};
-export default linkTheme;

package/__flow__/Link/index.js

@@ -1,30 +0,0 @@
-// @flow
-import * as React from 'react';
-import Container from "./styles";
-import type { TypeLinkProps } from "./index.flow";
-
-/**
- * @deprecated Use TypeLinkProps from root instead
- */
-export type TypeProps = TypeLinkProps;
-const Link = ({
-  href,
-  external,
-  children,
-  disabled,
-  onClick,
-  as,
-  underline,
-  qa = {},
-  ...rest
-}: TypeLinkProps) => {
-  if (!href && external) {
-    // eslint-disable-next-line no-console
-    console.warn('Warning: external prop cannot be set without a href declaration');
-  }
-  const type = as || (href ? 'a' : 'button');
-  return <Container href={href} target={external ? '_blank' : undefined} type={type === 'button' ? 'button' : undefined} rel={external ? 'noopener noreferrer' : undefined} forwardedAs={type} aria-disabled={disabled ? disabled : undefined} disabled={disabled} onClick={onClick} underline={underline} data-qa-link="" data-qa-link-isdisabled={disabled === true} {...qa} {...rest}>
-      {children}
-    </Container>;
-};
-export default Link;

package/__flow__/Link/styles.js

@@ -1,47 +0,0 @@
-//@flow
-import styled, { css } from 'styled-components';
-import { focusRing, disabled } from "../utils/mixins";
-import { TYPOGRAPHY, COMMON, FLEXBOX } from "../utils/system-props";
-import Text from "../Text";
-import type { TypeTheme } from "../types/theme.flow";
-const Container = styled<typeof Text, TypeTheme, any>(Text)`
-  border: 0;
-  font-family: ${props => props.theme.fontFamily};
-  text-decoration: ${props => props.underline ? 'underline' : 'none'};
-  appearance: none;
-  cursor: pointer;
-  ${props => props.disabled && css`
-      opacity: 0.4;
-      cursor: not-allowed;
-    `}
-  font-weight: ${props => props.theme.fontWeights.semibold};
-  color: ${props => props.theme.colors.link.base};
-
-  &:hover {
-    color: ${props => props.theme.colors.link.hover};
-    text-decoration: underline;
-  }
-
-  &:active {
-    color: ${props => props.theme.colors.link.hover};
-  }
-
-  &:focus {
-    ${focusRing}
-  }
-
-  &:focus:active {
-    box-shadow: none;
-  }
-
-  ${props => !props.href && css`
-      background: none;
-    `}
-
-  ${props => props.disabled && disabled}
-
-   ${COMMON}
-   ${TYPOGRAPHY}
-   ${FLEXBOX}
-`;
-export default Container;

package/__flow__/Listbox/index.js

@@ -1,93 +0,0 @@
-// @flow
-import * as React from 'react';
-import styled, { css } from 'styled-components';
-import { MENU_ROLES } from "../Menu/constants";
-import { Arrow } from "../Select/styles";
-import Icon from "../Icon";
-import Menu, { MenuButton } from "../Menu";
-import type { TypeTheme } from "../types/theme.flow";
-import type { TypeListboxProps, TypeListboxButtonProps } from "./index.flow";
-export const Listbox = ({
-  role = MENU_ROLES.LISTBOX,
-  children,
-  ...rest
-}: TypeListboxProps) => {
-  return <Menu {...rest} role={role}>
-      {children}
-    </Menu>;
-};
-
-/**
- * These styles are copied from @sproutsocial/racine/commonjs/Select/styles and applied at the root element since
- * the Listbox component doesn't render a select.
- */
-export const ListboxButtonContainer = styled<typeof MenuButton, TypeTheme, *>(MenuButton)`
-  position: relative;
-  width: 100%;
-  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};
-  cursor: ${props => props.disabled ? 'not-allowed' : 'pointer'};
-  outline: none;
-  appearance: 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};
-  font-weight: ${props => props.theme.fontWeights.normal};
-  text-align: left;
-  margin: 0;
-  &:active {
-    transform: none;
-  }
-
-  padding: ${props => {
-  switch (props.size) {
-    case 'large':
-      return `${props.theme.space[400]} ${props.theme.space[600]} ${props.theme.space[400]} ${props.theme.space[400]}`;
-    case 'small':
-      return `${props.theme.space[200]} ${props.theme.space[500]} ${props.theme.space[200]} ${props.theme.space[200]}`;
-    case 'default':
-    default:
-      return `${props.theme.space[300]} ${props.theme.space[500]} ${props.theme.space[300]} ${props.theme.space[300]}`;
-  }
-}};
-  font-size: ${props => {
-  switch (props.size) {
-    case 'large':
-      return props.theme.typography[300].fontSize;
-    case 'small':
-    case 'default':
-    default:
-      return props.theme.typography[200].fontSize;
-  }
-}};
-
-  ${props => props.invalid && css`
-      border-color: ${props => props.theme.colors.form.border.error};
-      ${Arrow} {
-        color: ${props => props.theme.colors.icon.error};
-      }
-    `}
-`;
-export const ListboxButton = ({
-  children,
-  ...restProps
-}: TypeListboxButtonProps) => <ListboxButtonContainer {...restProps} popoutProps={{
-  placement: 'bottom-start',
-  ...(restProps.popoutProps || {})
-}}>
-    {children}
-    <Arrow size={restProps.size}>
-      <Icon name="chevron-down" fixedWidth />
-    </Arrow>
-  </ListboxButtonContainer>;
-Listbox.Option = Listbox.Item = Menu.Item;
-Listbox.Checkbox = Menu.Checkbox;
-Listbox.Radio = Menu.Radio;
-Listbox.Group = Menu.Group;
-Listbox.Divider = Menu.Divider;
-Listbox.FilterInput = Menu.FilterInput;
-export default Listbox;

package/__flow__/Loader/index.js

@@ -1,35 +0,0 @@
-// @flow
-import * as React from 'react';
-import Container, { Text } from "./styles";
-import type { TypeLoaderProps } from "./index.flow";
-
-/**
- * @deprecated Use TypeLoaderProps from root instead
- */
-export type TypeProps = TypeLoaderProps;
-export default class Loader extends React.Component<TypeLoaderProps> {
-  static defaultProps = {
-    size: 'large',
-    text: '',
-    delay: true,
-    color: 'dark'
-  };
-  render() {
-    const {
-      text,
-      size,
-      delay,
-      color,
-      qa,
-      ...rest
-    } = this.props;
-    return (
-      // $FlowIssue - upgrade v0.112.0
-      <Container small={size === 'small'} dark={color === 'dark'} delay={delay} data-qa-loader="" {...qa} {...rest}>
-        <Text as="div" fontSize={200}>
-          {text || 'Loading'}
-        </Text>
-      </Container>
-    );
-  }
-}