@sproutsocial/racine 12.24.0 → 13.1.1

package/__flow__/ChartLegend/index.js

@@ -1,50 +1,35 @@
 // @flow
 import * as React from 'react';
-import Container, {Label, Swatch} from './styles';
-import Text from '../Text';
-import {THEME_MAP} from '../utils/chartColors';
-
-type TypeProps = {
-  /** Inline or stacked y plots */
-  stacked?: boolean,
-  theme?: 'compare' | 'contrast' | 'extended',
-  /** Array of names with optional color to display. If no color is specified, index of label will be used to determine color based on the theme. */
-  legendLabels: {name: string, color?: string}[],
-  qa?: Object,
-};
-
+import { THEME_MAP } from "../utils/chartColors";
+import Text from "../Text";
+import Container, { Label, Swatch } from "./styles";
+import type { TypeChartLegendProps } from "./index.flow";
 function getSwatchColor(theme, index) {
   return THEME_MAP[theme.toUpperCase()][index];
 }
-
 function getLabels(legendLabels, theme) {
   return legendLabels.map((label, i) => {
     const labelColor = label.color ? label.color : getSwatchColor(theme, i);
-    return (
-      <Label key={label.name}>
+    return <Label key={label.name}>
         <Swatch bg={labelColor} data-qa-swatch="" />
         <Text as="div" fontSize={200} breakWord>
           {label.name}
         </Text>
-      </Label>
-    );
+      </Label>;
   });
 }
-
-const ChartLegend = (props: TypeProps) => {
-  const {legendLabels, stacked, theme = 'compare', ...rest} = props;
-
+const ChartLegend = (props: TypeChartLegendProps) => {
+  const {
+    legendLabels,
+    stacked,
+    theme = 'compare',
+    ...rest
+  } = props;
   return (
-    <Container
-      inline={!stacked}
-      data-qa-chartlegend=""
-      {...props.qa}
-      // $FlowIssue - upgrade v0.112.0
-      {...rest}
-    >
+    // $FlowIssue - upgrade v0.112.0
+    <Container inline={!stacked} data-qa-chartlegend="" {...props.qa} {...rest}>
       {getLabels(legendLabels, theme)}
     </Container>
   );
 };
-
-export default ChartLegend;
+export default ChartLegend;

package/__flow__/ChartLegend/styles.js

@@ -1,43 +1,35 @@
 //@flow
-import styled, {css, type StyledComponent} from 'styled-components';
-import {COMMON, LAYOUT} from '../utils/system-props';
-
-import type {TypeTheme} from '../types/theme.flow';
-
+import styled, { css, type StyledComponent } from 'styled-components';
+import { COMMON, LAYOUT } from "../utils/system-props";
+import type { TypeTheme } from "../types/theme.flow";
 export const Label: StyledComponent<{...}, TypeTheme, *> = styled.span`
   display: flex;
   align-items: center;
-  color: ${(props) => props.theme.colors.text.subtext};
+  color: ${props => props.theme.colors.text.subtext};
   white-space: nowrap;
   text-transform: capitalize;
 `;
-
 export const Swatch: StyledComponent<{...}, TypeTheme, *> = styled.span`
-  margin-right: ${(props) => props.theme.space[300]};
-  width: ${(props) => props.theme.space[350]};
-  height: ${(props) => props.theme.space[350]};
+  margin-right: ${props => props.theme.space[300]};
+  width: ${props => props.theme.space[350]};
+  height: ${props => props.theme.space[350]};
   border-radius: 4px;
 
   ${COMMON}
 `;
-
 const Container: StyledComponent<any, TypeTheme, *> = styled.div`
-  ${(props) =>
-    props.inline &&
-    css`
+  ${props => props.inline && css`
       display: flex;
       justify-content: center;
 
       ${Label} + ${Label} {
-        margin-left: ${(props) => props.theme.space[450]};
+        margin-left: ${props => props.theme.space[450]};
       }
     `}
 
   ${COMMON}
   ${LAYOUT}
 `;
-
 Label.displayName = 'ChartLegendLabel';
 Swatch.displayName = 'ChartLegendSwatch';
-
-export default Container;
+export default Container;

package/__flow__/Checkbox/index.flow.js

@@ -0,0 +1,22 @@
+// @flow
+
+export type TypeCheckboxProps = {
+  /** ID of the form element, should match the "for" value of the associated label */
+  id: string,
+  value?: string,
+  name?: string,
+  /** Label text to display next to the checkbox */
+  label?: string,
+  /** Label used to describe the input (if not used with an accompanying visual label) */
+  ariaLabel?: string,
+  labelProps?: Object,
+  checked?: boolean,
+  indeterminate?: boolean,
+  disabled?: boolean,
+  onChange: (event: SyntheticEvent<HTMLInputElement>) => void,
+  appearance?: 'pill' | 'default',
+  qa?: Object,
+  tabIndex?: string | number,
+  inputProps?: Object,
+  ...
+};

package/__flow__/Checkbox/index.js

@@ -1,59 +1,31 @@
 // @flow
 import * as React from 'react';
-import Container, {
-  CheckboxBox,
-  CheckIcon,
-  PillInput,
-  InputWrapper,
-  LabelText,
-  CheckboxContainer,
-} from './styles';
+import Container, { CheckboxBox, CheckIcon, PillInput, InputWrapper, LabelText, CheckboxContainer } from "./styles";
+import type { TypeCheckboxProps } from "./index.flow";
 
-export type TypeProps = {
-  /** ID of the form element, should match the "for" value of the associated label */
-  id: string,
-  value?: string,
-  name?: string,
-  /** Label text to display next to the checkbox */
-  label?: string,
-  /** Label used to describe the input (if not used with an accompanying visual label) */
-  ariaLabel?: string,
-  labelProps?: Object,
-  checked?: boolean,
-  indeterminate?: boolean,
-  disabled?: boolean,
-  onChange: (event: SyntheticEvent<HTMLInputElement>) => void,
-  appearance?: 'pill' | 'default',
-  qa?: Object,
-  tabIndex?: string | number,
-  inputProps?: Object,
-  ...
-};
-
-export default class Checkbox extends React.Component<TypeProps> {
+/**
+ * @deprecated Use TypeCheckboxProps from root instead
+ */
+export type TypeProps = TypeCheckboxProps;
+export default class Checkbox extends React.Component<TypeCheckboxProps> {
   el: ?HTMLInputElement;
-
   static defaultProps = {
     indeterminate: false,
-    disabled: false,
+    disabled: false
   };
-
   componentDidUpdate(prevProps: TypeProps) {
     if (prevProps.indeterminate !== !!this.props.indeterminate && this.el) {
       this.el.indeterminate = !!this.props.indeterminate;
     }
   }
-
   componentDidMount() {
     if (this.el) {
       this.el.indeterminate = !!this.props.indeterminate;
     }
   }
-
   handleChange = (event: SyntheticEvent<HTMLInputElement>) => {
     this.props.onChange(event);
   };
-
   render() {
     const {
       id,
@@ -77,74 +49,25 @@ export default class Checkbox extends React.Component<TypeProps> {
     // TODO: Refactor pill checkboxes to use fewer elements for performance gains
     if (!isPill) {
       return (
-        <CheckboxContainer
-          as={label && 'label'}
-          disabled={disabled}
-          indeterminate={indeterminate}
-          checked={checked}
-          // $FlowIssue - upgrade v0.112.0
-          {...rest}
-        >
-          <input
-            type="checkbox"
-            id={id}
-            aria-label={ariaLabel}
-            value={value}
-            name={name}
-            checked={checked}
-            ref={(el) => (this.el = el)}
-            disabled={disabled}
-            onChange={this.handleChange}
-            data-qa-checkbox={id}
-            data-qa-checkbox-ischecked={
-              indeterminate ? 'indeterminate' : checked === true
-            }
-            data-qa-checkbox-isdisabled={disabled === true}
-            tabIndex={tabIndex}
-            {...qa}
-            {...inputProps}
-          />
-          {label && (
-            <LabelText {...labelProps} disabled={disabled}>
+        // $FlowIssue - upgrade v0.112.0
+        <CheckboxContainer as={label && 'label'} disabled={disabled} indeterminate={indeterminate} checked={checked} {...rest}>
+          <input type="checkbox" id={id} aria-label={ariaLabel} value={value} name={name} checked={checked} ref={el => this.el = el} disabled={disabled} onChange={this.handleChange} data-qa-checkbox={id} data-qa-checkbox-ischecked={indeterminate ? 'indeterminate' : checked === true} data-qa-checkbox-isdisabled={disabled === true} tabIndex={tabIndex} {...qa} {...inputProps} />
+          {label && <LabelText {...labelProps} disabled={disabled}>
               {label}
-            </LabelText>
-          )}
+            </LabelText>}
         </CheckboxContainer>
       );
     }
-
     return (
       // $FlowIssue - upgrade v0.112.0
       <Container as={label && 'label'} {...rest}>
         <InputWrapper appearance={appearance}>
-          <PillInput
-            type="checkbox"
-            id={id}
-            aria-label={ariaLabel}
-            value={value}
-            name={name}
-            checked={checked}
-            ref={(el) => (this.el = el)}
-            disabled={disabled}
-            onChange={this.handleChange}
-            data-qa-checkbox={id}
-            data-qa-checkbox-ischecked={
-              indeterminate ? 'indeterminate' : checked === true
-            }
-            data-qa-checkbox-isdisabled={disabled === true}
-            tabIndex={tabIndex}
-            {...qa}
-            {...inputProps}
-          />
+          <PillInput type="checkbox" id={id} aria-label={ariaLabel} value={value} name={name} checked={checked} ref={el => this.el = el} disabled={disabled} onChange={this.handleChange} data-qa-checkbox={id} data-qa-checkbox-ischecked={indeterminate ? 'indeterminate' : checked === true} data-qa-checkbox-isdisabled={disabled === true} tabIndex={tabIndex} {...qa} {...inputProps} />
           <CheckboxBox>
-            <CheckIcon
-              name={indeterminate ? 'minus' : 'check'}
-              size="mini"
-              fixedWidth
-            />
+            <CheckIcon name={indeterminate ? 'minus' : 'check'} size="mini" fixedWidth />
           </CheckboxBox>
         </InputWrapper>
       </Container>
     );
   }
-}
+}

package/__flow__/Checkbox/styles.js

@@ -1,15 +1,13 @@
 //@flow
 import * as React from 'react';
-import {renderToStaticMarkup} from 'react-dom/server';
-import styled, {css, type StyledComponent} from 'styled-components';
-import {COMMON} from '../utils/system-props';
-import {focusRing, pill} from '../utils/mixins';
-import Box from '../Box';
-import Icon from '../Icon';
-import Text from '../Text';
-
-import type {TypeTheme} from '../types/theme.flow';
-
+import { renderToStaticMarkup } from 'react-dom/server';
+import styled, { css, type StyledComponent } from 'styled-components';
+import { focusRing, pill } from "../utils/mixins";
+import { COMMON } from "../utils/system-props";
+import Box from "../Box";
+import Icon from "../Icon";
+import Text from "../Text";
+import type { TypeTheme } from "../types/theme.flow";
 const Container: StyledComponent<{...}, TypeTheme, *> = styled.span`
   display: inline-flex;
   align-items: center;
@@ -17,24 +15,20 @@ const Container: StyledComponent<{...}, TypeTheme, *> = styled.span`
 
   ${COMMON}
 `;
-
 Container.displayName = 'Checkbox';
-
 export const InputWrapper = styled<typeof Box, TypeTheme, any>(Box)`
   box-sizing: border-box;
   position: relative;
-  width: ${(props) => props.theme.space[400]};
-  height: ${(props) => props.theme.space[400]};
+  width: ${props => props.theme.space[400]};
+  height: ${props => props.theme.space[400]};
   display: inline-flex;
   align-items: center;
   justify-content: center;
 
-  ${(props) =>
-    props.appearance === 'pill' &&
-    css`
+  ${props => props.appearance === 'pill' && css`
       background-color: transparent;
-      transition: all ${(props) => props.theme.duration.fast}
-        ${(props) => props.theme.easing.ease_inout};
+      transition: all ${props => props.theme.duration.fast}
+        ${props => props.theme.easing.ease_inout};
       /* This solution is temporary. DS-1095 */
       mix-blend-mode: ${props.theme.mode === 'dark' ? 'screen' : 'multiply'};
       ${pill}
@@ -48,26 +42,22 @@ export const InputWrapper = styled<typeof Box, TypeTheme, any>(Box)`
       }
     `}
 `;
-
 InputWrapper.displayName = 'InputWrapper';
-
 export const CheckboxBox: StyledComponent<{...}, TypeTheme, *> = styled.div`
   box-sizing: border-box;
   position: relative;
-  width: ${(props) => props.theme.space[400]};
-  height: ${(props) => props.theme.space[400]};
-  border: 1px solid ${(props) => props.theme.colors.form.border.base};
+  width: ${props => props.theme.space[400]};
+  height: ${props => props.theme.space[400]};
+  border: 1px solid ${props => props.theme.colors.form.border.base};
   border-radius: 4px;
-  background-color: ${(props) => props.theme.colors.form.background.base};
-  transition: border-color ${(props) => props.theme.duration.fast}
-      ${(props) => props.theme.easing.ease_in},
-    background-color ${(props) => props.theme.duration.fast}
-      ${(props) => props.theme.easing.ease_in};
+  background-color: ${props => props.theme.colors.form.background.base};
+  transition: border-color ${props => props.theme.duration.fast}
+      ${props => props.theme.easing.ease_in},
+    background-color ${props => props.theme.duration.fast}
+      ${props => props.theme.easing.ease_in};
   pointer-events: none;
 `;
-
 CheckboxBox.displayName = 'CheckboxBox';
-
 export const CheckIcon = styled<typeof Icon, TypeTheme>(Icon)`
   position: absolute;
   display: inline-flex;
@@ -78,8 +68,8 @@ export const CheckIcon = styled<typeof Icon, TypeTheme>(Icon)`
   transform: translate(-50%, -50%);
   opacity: 0;
   pointer-events: none;
-  transition: all ${(props) => props.theme.duration.fast}
-    ${(props) => props.theme.easing.ease_inout};
+  transition: all ${props => props.theme.duration.fast}
+    ${props => props.theme.easing.ease_inout};
 
   &,
   & .Icon-svg {
@@ -88,9 +78,7 @@ export const CheckIcon = styled<typeof Icon, TypeTheme>(Icon)`
     line-height: 10px;
   }
 `;
-
 CheckIcon.displayName = 'CheckIcon';
-
 export const PillInput: StyledComponent<any, TypeTheme, *> = styled.input`
   position: absolute;
   top: 0;
@@ -99,7 +87,7 @@ export const PillInput: StyledComponent<any, TypeTheme, *> = styled.input`
   height: 100%;
   margin: 0;
   appearance: none;
-  cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};
+  cursor: ${props => props.disabled ? 'not-allowed' : 'pointer'};
   border-radius: 4px;
 
   /* IE 11 overrides */
@@ -111,21 +99,17 @@ export const PillInput: StyledComponent<any, TypeTheme, *> = styled.input`
     ${focusRing}
   }
 
-  ${(props) =>
-    !props.checked &&
-    css`
+  ${props => !props.checked && css`
       &:hover,
       &:focus {
         ~ ${CheckboxBox} ${CheckIcon} {
-          opacity: ${(props) => (props.disabled ? 0 : 1)};
+          opacity: ${props => props.disabled ? 0 : 1};
           color: ${props.theme.colors.form.border.base};
         }
       }
     `}
 
-  ${(props) =>
-    props.checked &&
-    css`
+  ${props => props.checked && css`
       ~ ${CheckboxBox} {
         border-color: ${props.theme.colors.form.border.selected};
         background-color: ${props.theme.colors.form.background.selected};
@@ -136,9 +120,7 @@ export const PillInput: StyledComponent<any, TypeTheme, *> = styled.input`
       }
     `}
 
-    ${(props) =>
-    props.disabled &&
-    css`
+    ${props => props.disabled && css`
       ~ ${CheckboxBox} {
         opacity: 0.4;
       }
@@ -147,51 +129,31 @@ export const PillInput: StyledComponent<any, TypeTheme, *> = styled.input`
       }
     `}
 `;
-
 PillInput.displayName = 'PillInput';
-
 export const LabelText = styled<typeof Text, TypeTheme, any>(Text)`
-  margin-left: ${(props) => props.theme.space[300]};
-  font-size: ${(props) => props.theme.typography[200].fontSize};
+  margin-left: ${props => props.theme.space[300]};
+  font-size: ${props => props.theme.typography[200].fontSize};
   line-height: 1;
-  cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};
-  color: ${(props) => props.theme.colors.text.headline};
+  cursor: ${props => props.disabled ? 'not-allowed' : 'pointer'};
+  color: ${props => props.theme.colors.text.headline};
 
-  ${(props) =>
-    props.disabled &&
-    css`
+  ${props => props.disabled && css`
       opacity: 0.4;
     `}
 `;
-
 LabelText.displayName = 'LabelText';
-
-const checkSVG = (color) => (
-  <svg width="14" height="14" xmlns="http://www.w3.org/2000/svg">
-    <path
-      d="M5.378 11.37L2 7.59l1.438-1.286L5.374 8.47l5.185-5.84L12 3.91l-6.622 7.46"
-      fill={color}
-    />
-  </svg>
-);
-const indeterminateSVG = (color) => (
-  <svg width="14" height="14" xmlns="http://www.w3.org/2000/svg">
+const checkSVG = color => <svg width="14" height="14" xmlns="http://www.w3.org/2000/svg">
+    <path d="M5.378 11.37L2 7.59l1.438-1.286L5.374 8.47l5.185-5.84L12 3.91l-6.622 7.46" fill={color} />
+  </svg>;
+const indeterminateSVG = color => <svg width="14" height="14" xmlns="http://www.w3.org/2000/svg">
     <rect width="10" height="2" x="2" y="6" rx="1" ry="1" fill={color} />
-  </svg>
-);
-
+  </svg>;
 const getIcon = (type, color) => {
   const escapedColor = encodeURIComponent(color);
-  const icon =
-    type === 'indeterminate'
-      ? indeterminateSVG(escapedColor)
-      : checkSVG(escapedColor);
+  const icon = type === 'indeterminate' ? indeterminateSVG(escapedColor) : checkSVG(escapedColor);
   return icon;
 };
-
-export const CheckboxContainer: StyledComponent<any, TypeTheme, *> =
-  styled.span(
-    (props) => css`
+export const CheckboxContainer: StyledComponent<any, TypeTheme, *> = styled.span(props => css`
       display: inline-flex;
       align-items: center;
       box-sizing: border-box;
@@ -201,14 +163,7 @@ export const CheckboxContainer: StyledComponent<any, TypeTheme, *> =
       @supports (-webkit-appearance: none) {
         &:before {
           /* stylelint-disable */
-          content: url('data:image/svg+xml;utf8,${renderToStaticMarkup(
-            getIcon(
-              props.indeterminate ? 'indeterminate' : 'check',
-              props.checked
-                ? props.theme.colors.form.background.base
-                : props.theme.colors.form.border.base
-            )
-          )}');
+          content: url('data:image/svg+xml;utf8,${renderToStaticMarkup(getIcon(props.indeterminate ? 'indeterminate' : 'check', props.checked ? props.theme.colors.form.background.base : props.theme.colors.form.border.base))}');
           opacity: ${props.checked ? 1 : 0};
           position: absolute;
           width: ${props.theme.space[400]};
@@ -226,8 +181,7 @@ export const CheckboxContainer: StyledComponent<any, TypeTheme, *> =
           opacity: ${props.disabled && !props.checked ? 0 : 1};
         }
 
-        ${props.disabled &&
-        css`
+        ${props.disabled && css`
           opacity: 0.4;
         `}
 
@@ -247,10 +201,8 @@ export const CheckboxContainer: StyledComponent<any, TypeTheme, *> =
           flex-shrink: 0;
 
           &:not(:checked) {
-            ${!props.indeterminate &&
-            css`
-              border-color: ${props.theme.colors
-                .neutral[300]} !important; /* We don't want the focus ring to remove the border */
+            ${!props.indeterminate && css`
+              border-color: ${props.theme.colors.neutral[300]} !important; /* We don't want the focus ring to remove the border */
               background-color: ${props.theme.colors.form.background.base};
             `}
           }
@@ -260,12 +212,9 @@ export const CheckboxContainer: StyledComponent<any, TypeTheme, *> =
             background-color: ${props.theme.colors.form.background.selected};
           }
 
-          ${props.indeterminate &&
-          props.checked &&
-          css`
+          ${props.indeterminate && props.checked && css`
             border-color: ${props.theme.colors.form.border.selected} !important;
-            background-color: ${props.theme.colors.form.background
-              .selected} !important;
+            background-color: ${props.theme.colors.form.background.selected} !important;
           `}
 
           &:focus {
@@ -275,7 +224,5 @@ export const CheckboxContainer: StyledComponent<any, TypeTheme, *> =
       }
 
       ${COMMON}
-    `
-  );
-
-export default Container;
+    `);
+export default Container;

package/__flow__/Collapsible/index.flow.js

@@ -0,0 +1,11 @@
+// @flow
+import * as React from 'react';
+export type TypeCollapsibleProps = {
+  isOpen: boolean,
+  children: React.Node,
+  /** If the children of the collapsible panel have a top or bottom margin, it will throw off the calculations for the height of the content. The total amount of vertical margin (in pixels) can be supplied to this prop to correct this. */
+  offset?: number,
+  collapsedHeight?: number,
+  openHeight?: number,
+  ...
+};