@sproutsocial/racine 12.24.0 → 13.1.1

package/__flow__/Input/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;
@@ -13,43 +11,43 @@ const Container: StyledComponent<any, TypeTheme, *> = styled.div`
     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};
+    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};
+    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;
-      }
-    }};
+    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 {
@@ -70,25 +68,19 @@ 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;
 
       input {
@@ -96,55 +88,42 @@ const Container: StyledComponent<any, TypeTheme, *> = styled.div`
       }
     `}
 
-  ${(props) =>
-    props.appearance === 'primary' &&
-    css`
+  ${props => props.appearance === 'primary' && css`
       input {
-        border: 1px solid ${(props) => props.theme.colors.form.border.base};
+        border: 1px solid ${props => props.theme.colors.form.border.base};
       }
     `}
 
-  ${(props) =>
-    props.invalid &&
-    css`
+  ${props => props.invalid && css`
       input {
-        border-color: ${(props) => props.theme.colors.form.border.error};
+        border-color: ${props => props.theme.colors.form.border.error};
       }
     `}
 
-	${(props) =>
-    props.warning &&
-    css`
+	${props => props.warning && css`
       input {
-        border-color: ${(props) => props.theme.colors.form.border.warning};
+        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};
+  color: ${props => props.theme.colors.icon.base};
   display: flex;
   align-items: center;
 
-  ${(props) =>
-    props.before &&
-    css`
+  ${props => props.before && css`
       left: ${props.theme.space[300]};
     `};
 
-  ${(props) =>
-    props.after &&
-    css`
+  ${props => props.after && css`
       right: ${props.isClearButton ? 0 : props.theme.space[300]};
     `};
 `;
-
 Container.displayName = 'InputContainer';
 Accessory.displayName = 'InputAccessory';
-
-export default Container;
+export default Container;

package/__flow__/KeyboardKey/index.flow.js

@@ -0,0 +1,7 @@
+// @flow
+
+export type TypeKeyboardKeyProps = {
+  /** Text to display inside of key */
+  children: string,
+  ...
+};

package/__flow__/KeyboardKey/index.js

@@ -1,23 +1,23 @@
 // @flow
 import * as React from 'react';
-import Text from '../Text';
-import Container from './styles';
-
-export type TypeProps = {
-  /** Text to display inside of key */
-  children: string,
-};
+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}>
+    const {
+      children,
+      ...rest
+    } = this.props;
+    return <Container {...rest}>
         <kbd data-qa-keyboardkey={children}>
           <Text>{children}</Text>
         </kbd>
-      </Container>
-    );
+      </Container>;
   }
-}
+}

package/__flow__/KeyboardKey/styles.js

@@ -1,21 +1,18 @@
 //@flow
-import styled, {type StyledComponent} from 'styled-components';
-import {COMMON} from '../utils/system-props';
-
-import type {TypeTheme} from '../types/theme.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]};
+  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;
+export default Container;

package/__flow__/Label/index.flow.js

@@ -0,0 +1,14 @@
+// @flow
+import * as React from 'react';
+import Text from "../Text";
+export type TypeLabelBaseProps = {
+  ...React.ElementConfig<typeof Text>,
+  as: string,
+  ...
+};
+export type TypeLabelProps = {
+  /** ID of the associated form element */
+  htmlFor: string,
+  children: React.Node,
+  ...
+};

package/__flow__/Label/index.js

@@ -1,42 +1,24 @@
 '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';
-
-type TypeLabelBaseProps = {
-  ...React.ElementConfig<typeof Text>,
-  as: string,
-  ...
-};
-const LabelBase = ({as = 'label', ...rest}: TypeLabelBaseProps) => (
-  <Text {...rest} as={as} />
-);
-
+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;
 `;
-
-type TypeProps = {
-  /** ID of the associated form element */
-  htmlFor: string,
-  children: React.Node,
-};
-
-export default class Label extends React.Component<TypeProps> {
+export default class Label extends React.Component<TypeLabelProps> {
   render() {
     return (
-      <StyledLabel
-        fontSize={200}
-        fontWeight="semibold"
-        color="text.headline"
-        data-qa-label={this.props.htmlFor}
-        // $FlowIssue - upgrade v0.112.0
-        {...this.props}
-      />
+      // $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,15 +1,12 @@
 // @flow
-import {COLOR_BLUE_900} from '@sproutsocial/seeds-color';
-
+import { COLOR_BLUE_900 } from '@sproutsocial/seeds-color';
 const defaultLink = {
   color: 'link',
   hoverColor: 'link.hover',
   activeColor: COLOR_BLUE_900,
-  fontWeight: 'semibold',
+  fontWeight: 'semibold'
 };
-
 const linkTheme = {
-  default: defaultLink,
+  default: defaultLink
 };
-
-export default linkTheme;
+export default linkTheme;

package/__flow__/Link/index.flow.js

@@ -0,0 +1,18 @@
+// @flow
+import * as React from 'react';
+import type { TypeStyledComponentsCommonProps } from "../types/styled-components.flow";
+export type TypeLinkProps = {
+  /** Optional prop to make the URL open in a new tab */
+  external?: boolean,
+  children: React.Node,
+  /** Setting this prop will cause the component to be rendered as a link */
+  href?: string,
+  /** Disables user action and applies a disabled style to the component */
+  disabled?: boolean,
+  /** Can be used in addition to an href but still renders as a link. Omitting href will render as button */
+  onClick?: (e: SyntheticEvent<HTMLButtonElement>) => void,
+  as?: $PropertyType<TypeStyledComponentsCommonProps, 'as'>,
+  underline?: boolean,
+  qa?: Object,
+  ...
+};

package/__flow__/Link/index.js

@@ -1,24 +1,12 @@
 // @flow
 import * as React from 'react';
-import Container from './styles';
-
-import type {TypeStyledComponentsCommonProps} from '../types/styled-components.flow';
-
-export type TypeProps = {
-  /** Optional prop to make the URL open in a new tab */
-  external?: boolean,
-  children: React.Node,
-  /** Setting this prop will cause the component to be rendered as a link */
-  href?: string,
-  /** Disables user action and applies a disabled style to the component */
-  disabled?: boolean,
-  /** Can be used in addition to an href but still renders as a link. Omitting href will render as button */
-  onClick?: (e: SyntheticEvent<HTMLButtonElement>) => void,
-  as?: $PropertyType<TypeStyledComponentsCommonProps, 'as'>,
-  underline?: boolean,
-  qa?: Object,
-};
+import Container from "./styles";
+import type { TypeLinkProps } from "./index.flow";
 
+/**
+ * @deprecated Use TypeLinkProps from root instead
+ */
+export type TypeProps = TypeLinkProps;
 const Link = ({
   href,
   external,
@@ -29,35 +17,14 @@ const Link = ({
   underline,
   qa = {},
   ...rest
-}: TypeProps) => {
+}: TypeLinkProps) => {
   if (!href && external) {
     // eslint-disable-next-line no-console
-    console.warn(
-      'Warning: external prop cannot be set without a href declaration'
-    );
+    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}
-    >
+  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>
-  );
+    </Container>;
 };
-
-export default Link;
+export default Link;

package/__flow__/Link/styles.js

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

package/__flow__/Listbox/index.flow.js

@@ -0,0 +1,20 @@
+// @flow
+import * as React from 'react';
+import Button from "../Button";
+import Popout from "../Popout";
+import type { TypeMenuProps, TypeMenuButtonContext } from "../Menu/index.flow";
+export type TypeListboxProps = {
+  ...TypeMenuProps,
+  role?: 'listbox',
+  ...
+};
+export type TypeListboxButtonProps = {
+  ...$Exact<React.ElementConfig<typeof Button>>,
+  ...TypeMenuButtonContext,
+  size?: 'large' | 'default' | 'small',
+  content: React.Node,
+  popoutProps?: $Shape<React.ElementConfig<typeof Popout>>,
+  'aria-label'?: string,
+  'aria-labelledby'?: string,
+  ...
+};