@sproutsocial/racine 12.24.0 → 13.1.1

package/__flow__/Radio/index.js

@@ -1,52 +1,36 @@
 // @flow
 import * as React from 'react';
-import Container, {Input, InputWrapper, LabelText} from './styles';
+import Container, { Input, InputWrapper, LabelText } from "./styles";
+import type { TypeRadioProps } from "./index.flow";
 
-export type TypeProps = {
-  /** ID of the form element, should match the "for" value of the associated label */
-  id: string,
-  name: string,
-  /** Label text to display next to the radio input */
-  label?: string,
-  /** Label used to describe the input if not used with an accompanying visual label */
-  ariaLabel?: string,
-  value?: string,
-  checked?: boolean,
-  disabled?: boolean,
-  qa?: Object,
-  onChange?: (e: SyntheticInputEvent<HTMLInputElement>) => void,
-  onFocus?: (e: SyntheticFocusEvent<HTMLInputElement>) => void,
-  onBlur?: (e: SyntheticFocusEvent<HTMLInputElement>) => void,
-};
+/**
+ * @deprecated Use TypeRadioProps from root instead
+ */
+export type TypeProps = TypeRadioProps;
 
 /**
  * Primitive Radio Element
  */
-export default class Radio extends React.Component<TypeProps> {
+export default class Radio extends React.Component<TypeRadioProps> {
   static defaultProps = {
-    disabled: false,
+    disabled: false
   };
-
   handleChange = (e: SyntheticInputEvent<HTMLInputElement>) => {
     if (!!this.props.checked || this.props.disabled) {
       return;
     }
-
     this.props.onChange && this.props.onChange(e);
   };
-
   handleFocus = (e: SyntheticFocusEvent<HTMLInputElement>) => {
     if (this.props.onFocus) {
       this.props.onFocus(e);
     }
   };
-
   handleBlur = (e: SyntheticFocusEvent<HTMLInputElement>) => {
     if (this.props.onBlur) {
       this.props.onBlur(e);
     }
   };
-
   render() {
     const {
       id,
@@ -62,30 +46,14 @@ export default class Radio extends React.Component<TypeProps> {
       qa = {},
       ...rest
     } = this.props;
-
     return (
       // $FlowIssue - upgrade v0.112.0
       <Container as={label && 'label'} {...rest}>
         <InputWrapper checked={checked} disabled={disabled}>
-          <Input
-            type="radio"
-            id={id}
-            aria-label={ariaLabel}
-            value={value}
-            name={name}
-            checked={checked}
-            disabled={disabled}
-            onChange={this.handleChange}
-            onFocus={this.handleFocus}
-            onBlur={this.handleBlur}
-            data-qa-radio={name || ''}
-            data-qa-radio-ischecked={checked === true}
-            data-qa-radio-isdisabled={disabled === true}
-            {...qa}
-          />
+          <Input type="radio" id={id} aria-label={ariaLabel} value={value} name={name} checked={checked} disabled={disabled} onChange={this.handleChange} onFocus={this.handleFocus} onBlur={this.handleBlur} data-qa-radio={name || ''} data-qa-radio-ischecked={checked === true} data-qa-radio-isdisabled={disabled === true} {...qa} />
         </InputWrapper>
         {label && <LabelText disabled={disabled}>{label}</LabelText>}
       </Container>
     );
   }
-}
+}

package/__flow__/Radio/styles.js

@@ -1,11 +1,9 @@
 //@flow
-import styled, {css, type StyledComponent} from 'styled-components';
-import {COMMON} from '../utils/system-props';
-import {focusRing, disabled} from '../utils/mixins';
-import Text from '../Text/';
-
-import type {TypeTheme} from '../types/theme.flow';
-
+import styled, { css, type StyledComponent } from 'styled-components';
+import { focusRing, disabled } from "../utils/mixins";
+import { COMMON } from "../utils/system-props";
+import Text from "../Text";
+import type { TypeTheme } from "../types/theme.flow";
 const Container: StyledComponent<{...}, TypeTheme, *> = styled.span`
   display: inline-flex;
   align-items: center;
@@ -13,9 +11,7 @@ const Container: StyledComponent<{...}, TypeTheme, *> = styled.span`
 
   ${COMMON}
 `;
-
 Container.displayName = 'Radio';
-
 export const Input: StyledComponent<any, TypeTheme, *> = styled.input`
   box-sizing: border-box;
   position: absolute;
@@ -25,28 +21,26 @@ export const Input: StyledComponent<any, TypeTheme, *> = styled.input`
   height: 100%;
   margin: 0;
   appearance: none;
-  cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};
-  border: 1px solid ${(props) => props.theme.colors.form.border.base};
+  cursor: ${props => props.disabled ? 'not-allowed' : 'pointer'};
+  border: 1px solid ${props => props.theme.colors.form.border.base};
   border-radius: 50%;
-  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};
 
   &:focus {
     ${focusRing}
   }
 `;
-
 Input.displayName = 'Input';
-
 export const InputWrapper: StyledComponent<any, TypeTheme, *> = styled.span`
   position: relative;
-  width: ${(props) => props.theme.space[400]};
-  height: ${(props) => props.theme.space[400]};
-  cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};
-  ${(props) => props.disabled && disabled}
+  width: ${props => props.theme.space[400]};
+  height: ${props => props.theme.space[400]};
+  cursor: ${props => props.disabled ? 'not-allowed' : 'pointer'};
+  ${props => props.disabled && disabled}
 
   &:before {
     content: '';
@@ -58,16 +52,14 @@ export const InputWrapper: StyledComponent<any, TypeTheme, *> = styled.span`
     height: 6px;
     border-radius: 50%;
     opacity: 0;
-    transition: opacity ${(props) => props.theme.duration.fast}
-      ${(props) => props.theme.easing.ease_in};
+    transition: opacity ${props => props.theme.duration.fast}
+      ${props => props.theme.easing.ease_in};
     z-index: 1;
     pointer-events: none;
-    cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};
+    cursor: ${props => props.disabled ? 'not-allowed' : 'pointer'};
   }
 
-  ${(props) =>
-    !props.checked &&
-    css`
+  ${props => !props.checked && css`
       &:hover,
       &:focus {
         ${Input} {
@@ -82,9 +74,7 @@ export const InputWrapper: StyledComponent<any, TypeTheme, *> = styled.span`
       }
     `}
 
-  ${(props) =>
-    props.checked &&
-    css`
+  ${props => props.checked && css`
       ${Input} {
         border-color: ${props.theme.colors.form.border.selected};
         background-color: ${props.theme.colors.form.background.selected};
@@ -96,23 +86,17 @@ export const InputWrapper: StyledComponent<any, TypeTheme, *> = styled.span`
       }
     `}
 `;
-
 InputWrapper.displayName = 'InputWrapper';
-
 export const LabelText = styled<typeof Text, TypeTheme, *>(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';
-
-export default Container;
+export default Container;

package/__flow__/SegmentedControl/index.flow.js

@@ -0,0 +1,20 @@
+// @flow
+import * as React from 'react';
+export type TypeSegmentedControlItemProps = {
+  /** The value of this item. Should be unique among sibling items. */
+  value: string,
+  children: React.Node,
+  ...
+};
+export type TypeSegmentedControlProps = {
+  /** The value of the currently selected item. Should match the value prop of one of the child items */
+  selectedValue: string,
+  /** The title of the segmented control, used for accessibility purposes  */
+  label: string,
+  /** Called when the user selects a new item. You can access the value of the newly selected item using "event.target.value" */
+  onChange: (e: SyntheticInputEvent<HTMLInputElement>) => void,
+  /** Disables user action and applies a disabled style on the component */
+  disabled?: boolean,
+  children: React.Node,
+  ...
+};

package/__flow__/SegmentedControl/index.js

@@ -1,87 +1,45 @@
 // @flow
 import * as React from 'react';
-import {useState, useContext} from 'react';
-import {
-  SegmentedControlContainer,
-  SegmentedControlItemContainer,
-  SegmentedControlLabel,
-} from './styles';
-import Box from '../Box';
-
+import { useState, useContext } from 'react';
+import Box from "../Box";
+import { SegmentedControlContainer, SegmentedControlItemContainer, SegmentedControlLabel } from "./styles";
+import type { TypeSegmentedControlProps, TypeSegmentedControlItemProps } from "./index.flow";
 let nameCounter = 0;
 let idCounter = 0;
-
 type TypeSegmentedControlContext = {
   name: string,
   selectedValue: string,
   onChange: (e: SyntheticInputEvent<HTMLInputElement>) => void,
+  ...
 };
-
-const SegmentedControlContext =
-  React.createContext<?TypeSegmentedControlContext>(null);
-
-type TypeSegmentedControlItemProps = {
-  /** The value of this item. Should be unique among sibling items. */
-  value: string,
-  children: React.Node,
-};
-
+const SegmentedControlContext = React.createContext<?TypeSegmentedControlContext>(null);
 const SegmentedControlItem = ({
   value,
   children,
   ...rest
 }: TypeSegmentedControlItemProps) => {
   const context = useContext(SegmentedControlContext);
-
   if (!context) {
     return null;
   }
-
-  const {name, selectedValue, onChange} = context;
+  const {
+    name,
+    selectedValue,
+    onChange
+  } = context;
   /* eslint-disable-next-line */
   const [id] = useState(`${name}-${idCounter++}`);
   const isChecked = value === selectedValue;
-
   return (
-    <SegmentedControlItemContainer
-      data-segmentedcontrol-isactive={isChecked}
-      data-qa-segmentedcontrol-item={value}
-      data-qa-segmentedcontrol-ischecked={isChecked === true}
-      // $FlowIssue - upgrade v0.112.0
-      {...rest}
-    >
-      <input
-        type="radio"
-        id={id}
-        name={name}
-        value={value}
-        checked={isChecked}
-        onChange={onChange}
-      />
-      <SegmentedControlLabel
-        as="label"
-        htmlFor={id}
-        name={name}
-        isActive={isChecked}
-      >
+    // $FlowIssue - upgrade v0.112.0
+    <SegmentedControlItemContainer data-segmentedcontrol-isactive={isChecked} data-qa-segmentedcontrol-item={value} data-qa-segmentedcontrol-ischecked={isChecked === true} {...rest}>
+      <input type="radio" id={id} name={name} value={value} checked={isChecked} onChange={onChange} />
+      <SegmentedControlLabel as="label" htmlFor={id} name={name} isActive={isChecked}>
         {children}
       </SegmentedControlLabel>
     </SegmentedControlItemContainer>
   );
 };
-
-type TypeSegmentedControlProps = {
-  /** The value of the currently selected item. Should match the value prop of one of the child items */
-  selectedValue: string,
-  /** The title of the segmented control, used for accessibility purposes  */
-  label: string,
-  /** Called when the user selects a new item. You can access the value of the newly selected item using "event.target.value" */
-  onChange: (e: SyntheticInputEvent<HTMLInputElement>) => void,
-  /** Disables user action and applies a disabled style on the component */
-  disabled?: boolean,
-  children: React.Node,
-};
-
 const SegmentedControl = ({
   selectedValue,
   label,
@@ -90,26 +48,19 @@ const SegmentedControl = ({
   ...rest
 }: TypeSegmentedControlProps) => {
   const [name] = useState(`Racine-segmented-control-${nameCounter++}`);
-
-  return (
-    <SegmentedControlContext.Provider value={{name, selectedValue, onChange}}>
-      <SegmentedControlContainer
-        forwardedAs="fieldset"
-        data-qa-segmentedcontrol={label}
-        data-qa-segmentedcontrol-value={selectedValue}
-        // $FlowIssue - upgrade v0.112.0
-        {...rest}
-      >
+  return <SegmentedControlContext.Provider value={{
+    name,
+    selectedValue,
+    onChange
+  }}>
+      {/* $FlowIssue - upgrade v0.112.0 */}
+      <SegmentedControlContainer forwardedAs="fieldset" data-qa-segmentedcontrol={label} data-qa-segmentedcontrol-value={selectedValue} {...rest}>
         <legend>{label}</legend>
 
         <Box display="flex">{children}</Box>
       </SegmentedControlContainer>
-    </SegmentedControlContext.Provider>
-  );
+    </SegmentedControlContext.Provider>;
 };
-
 SegmentedControl.Item = SegmentedControlItem;
-
 SegmentedControl.Item.displayName = 'SegmentedControl.Item';
-
-export default SegmentedControl;
+export default SegmentedControl;

package/__flow__/SegmentedControl/styles.js

@@ -1,35 +1,31 @@
 //@flow
-import styled, {css} from 'styled-components';
-import Box from '../Box';
-import Text from '../Text';
-import {visuallyHidden, focusRing, disabled} from '../utils/mixins';
-
-import type {TypeTheme} from '../types/theme.flow';
-
-export const SegmentedControlContainer = styled<
-  typeof Box,
-  TypeTheme,
-  {disabled?: boolean, ...}
->(Box)`
+import styled, { css } from 'styled-components';
+import { visuallyHidden, focusRing, disabled } from "../utils/mixins";
+import Box from "../Box";
+import Text from "../Text";
+import type { TypeTheme } from "../types/theme.flow";
+export const SegmentedControlContainer = styled<typeof Box, TypeTheme, {
+  disabled?: boolean,
+  ...
+}>(Box)`
   border: 1px solid
-    ${(props) => props.theme.colors.button.secondary.border.base};
-  border-radius: ${(props) => props.theme.radii.outer};
-  padding: ${(props) => props.theme.space[100]};
+    ${props => props.theme.colors.button.secondary.border.base};
+  border-radius: ${props => props.theme.radii.outer};
+  padding: ${props => props.theme.space[100]};
 
   legend {
     ${visuallyHidden}
   }
 
-  ${(props) => props.disabled && disabled}
+  ${props => props.disabled && disabled}
 `;
-
 export const SegmentedControlItemContainer = styled<typeof Box, TypeTheme>(Box)`
   flex: 1 1 auto;
   display: flex;
   cursor: pointer;
 
   & + & {
-    margin-left: ${(props) => props.theme.space[100]};
+    margin-left: ${props => props.theme.space[100]};
   }
 
   &:focus-within label {
@@ -40,43 +36,37 @@ export const SegmentedControlItemContainer = styled<typeof Box, TypeTheme>(Box)`
     ${visuallyHidden}
   }
 `;
-
 export const SegmentedControlLabel = styled<typeof Text, TypeTheme, any>(Text)`
   flex: 1 1 auto;
   display: flex;
   align-items: center;
   justify-content: center;
   text-align: center;
-  color: ${(props) => props.theme.colors.text.body};
+  color: ${props => props.theme.colors.text.body};
   cursor: pointer;
-  font-size: ${(props) => props.theme.typography[200].fontSize};
+  font-size: ${props => props.theme.typography[200].fontSize};
   /**
 	* Matches default line height of Icon. Also matches the overall height of
 	* Input, Select, and Button.
 	*/
   line-height: 16px;
-  font-weight: ${(props) => props.theme.fontWeights.semibold};
+  font-weight: ${props => props.theme.fontWeights.semibold};
 
-  border-radius: ${(props) => props.theme.radii.inner};
+  border-radius: ${props => props.theme.radii.inner};
   /* To match the height of buttons... 350 padding - 2px top and bottom padding of the parent - 1px border on top and bottom */
-  padding: calc(${(props) => props.theme.space[350]} - 6px);
-  transition: all ${(props) => props.theme.duration.fast};
+  padding: calc(${props => props.theme.space[350]} - 6px);
+  transition: all ${props => props.theme.duration.fast};
 
   &:hover {
-    background-color: ${(props) =>
-      props.theme.colors.listItem.background.hover};
+    background-color: ${props => props.theme.colors.listItem.background.hover};
   }
 
-  ${(props) =>
-    props.isActive &&
-    css`
-      color: ${(props) => props.theme.colors.text.inverse};
-      background-color: ${(props) =>
-        props.theme.colors.listItem.background.selected};
+  ${props => props.isActive && css`
+      color: ${props => props.theme.colors.text.inverse};
+      background-color: ${props => props.theme.colors.listItem.background.selected};
 
       &:hover {
-        background-color: ${(props) =>
-          props.theme.colors.listItem.background.selected};
+        background-color: ${props => props.theme.colors.listItem.background.selected};
       }
     `}
-`;
+`;

package/__flow__/Select/index.flow.js

@@ -0,0 +1,25 @@
+// @flow
+import * as React from 'react';
+export type TypeSelectProps = {
+  /** ID of the form element, should match the "for" value of the associated label */
+  id: string,
+  name: string,
+  /** Label used to describe the select if not used with an accompanying visual label */
+  ariaLabel?: string,
+  /** Attribute used to associate other elements that describe the Select, like an error */
+  ariaDescribedby?: string,
+  children: React.Node,
+  defaultValue?: any,
+  /** Current value of the input */
+  value?: any,
+  required?: boolean,
+  isInvalid?: boolean,
+  autoFocus?: boolean,
+  disabled?: boolean,
+  /** Props to spread onto the underlying input element */
+  inputProps?: any,
+  qa?: any,
+  onChange?: (e: SyntheticInputEvent<HTMLInputElement>) => void,
+  size?: 'large' | 'small' | 'default',
+  ...
+};

package/__flow__/Select/index.js

@@ -1,44 +1,25 @@
 // @flow
 import * as React from 'react';
-import Container, {Arrow} from './styles';
-import Icon from '../Icon';
-
-export type TypeSelectProps = {
-  /** ID of the form element, should match the "for" value of the associated label */
-  id: string,
-  name: string,
-  /** Label used to describe the select if not used with an accompanying visual label */
-  ariaLabel?: string,
-  /** Attribute used to associate other elements that describe the Select, like an error */
-  ariaDescribedby?: string,
-  children: React.Node,
-  defaultValue?: any,
-  /** Current value of the input */
-  value?: any,
-  required?: boolean,
-  isInvalid?: boolean,
-  autoFocus?: boolean,
-  disabled?: boolean,
-  /** Props to spread onto the underlying input element */
-  inputProps?: any,
-  qa?: any,
-  onChange?: (e: SyntheticInputEvent<HTMLInputElement>) => void,
-  size?: 'large' | 'small' | 'default',
-};
+import Icon from "../Icon";
+import Container, { Arrow } from "./styles";
+import type { TypeSelectProps as TypeSelectProps2 } from "./index.flow";
 
+/**
+ * @deprecated Use TypeSelectProps2 from root instead
+ */
+export type TypeSelectProps = TypeSelectProps2;
 export default class Select extends React.Component<TypeSelectProps> {
   static defaultProps = {
-    size: 'default',
+    size: 'default'
   };
-
   handleChange = (e: SyntheticInputEvent<HTMLInputElement>) => {
-    const {onChange} = this.props;
-
+    const {
+      onChange
+    } = this.props;
     if (onChange) {
       onChange(e);
     }
   };
-
   render() {
     const {
       id,
@@ -58,39 +39,17 @@ export default class Select extends React.Component<TypeSelectProps> {
       inputProps = {},
       ...rest
     } = this.props;
-
     return (
       // $FlowIssue - upgrade v0.112.0
       <Container invalid={isInvalid} disabled={disabled} size={size} {...rest}>
-        <select
-          id={id}
-          name={name}
-          aria-label={ariaLabel}
-          aria-describedby={ariaDescribedby}
-          defaultValue={defaultValue}
-          value={value}
-          required={required}
-          autoFocus={autoFocus}
-          disabled={disabled}
-          onChange={this.handleChange}
-          data-qa-select={name || ''}
-          data-qa-select-value={value || 'unselected'}
-          data-qa-select-isrequired={required === true}
-          data-qa-select-isdisabled={disabled === true}
-          {...qa}
-          {...inputProps}
-        >
+        <select id={id} name={name} aria-label={ariaLabel} aria-describedby={ariaDescribedby} defaultValue={defaultValue} value={value} required={required} autoFocus={autoFocus} disabled={disabled} onChange={this.handleChange} data-qa-select={name || ''} data-qa-select-value={value || 'unselected'} data-qa-select-isrequired={required === true} data-qa-select-isdisabled={disabled === true} {...qa} {...inputProps}>
           {children}
         </select>
 
         <Arrow size={size}>
-          <Icon
-            name="chevron-down"
-            fixedWidth
-            size={this.props.size === 'small' ? 'mini' : 'default'}
-          />
+          <Icon name="chevron-down" fixedWidth size={this.props.size === 'small' ? 'mini' : 'default'} />
         </Arrow>
       </Container>
     );
   }
-}
+}