@sproutsocial/racine 12.24.0 → 13.1.1

package/__flow__/Switch/index.js

@@ -1,36 +1,36 @@
 // @flow
 import * as React from 'react';
-import Container from './styles';
-import Icon from '../Icon';
-import {VisuallyHidden} from '../VisuallyHidden';
+import Icon from "../Icon";
+import { VisuallyHidden } from "../VisuallyHidden";
+import Container from "./styles";
+import type { TypeSwitchProps } from "./index.flow";
 
-export type TypeProps = {
-  onClick: (e: SyntheticEvent<HTMLButtonElement>, checked: boolean) => void,
-  checked: boolean,
-  /** Customizable object to pass in localized "On" and "Off" label text for screen readers {"on": ONTEXT, "off": OFFTEXT} */
-  a11yLabels: {on: string, off: string},
-  /** Disables interaction on component and applies disabled styles  */
-  disabled: boolean,
-  name?: string,
-  qa?: Object,
-};
+/**
+ * @deprecated Use TypeSwitchProps from root instead
+ */
+export type TypeProps = TypeSwitchProps;
 
 /**
  * Switch acts as a toggle, enabling users to turn a particular action on or off.
  */
-export default class Switch extends React.Component<TypeProps> {
+export default class Switch extends React.Component<TypeSwitchProps> {
   static defaultProps = {
     disabled: false,
-    a11yLabels: {on: 'on', off: 'off'},
+    a11yLabels: {
+      on: 'on',
+      off: 'off'
+    }
   };
-
   handleClick = (e: SyntheticEvent<HTMLButtonElement>) => {
-    const {checked, onClick, disabled} = this.props;
+    const {
+      checked,
+      onClick,
+      disabled
+    } = this.props;
     if (!disabled) {
       onClick(e, !checked);
     }
   };
-
   render() {
     const {
       checked,
@@ -41,22 +41,9 @@ export default class Switch extends React.Component<TypeProps> {
       qa = {},
       ...rest
     } = this.props;
-
     return (
-      <Container
-        role="button"
-        type="button"
-        aria-pressed={checked}
-        disabled={disabled}
-        onClick={this.handleClick}
-        data-qa-switch={name || ''}
-        data-qa-switch-ischecked={checked === true}
-        data-qa-switch-isdisabled={disabled === true}
-        checked={checked}
-        {...qa}
-        // $FlowIssue - upgrade v0.112.0
-        {...rest}
-      >
+      // $FlowIssue - upgrade v0.112.0
+      <Container role="button" type="button" aria-pressed={checked} disabled={disabled} onClick={this.handleClick} data-qa-switch={name || ''} data-qa-switch-ischecked={checked === true} data-qa-switch-isdisabled={disabled === true} checked={checked} {...qa} {...rest}>
         <VisuallyHidden>
           {checked ? a11yLabels.on : a11yLabels.off}
         </VisuallyHidden>
@@ -64,4 +51,4 @@ export default class Switch extends React.Component<TypeProps> {
       </Container>
     );
   }
-}
+}

package/__flow__/Switch/styles.js

@@ -1,33 +1,31 @@
 //@flow
-import styled, {css, type StyledComponent} from 'styled-components';
-import {COMMON} from '../utils/system-props';
-import {focusRing} from '../utils/mixins';
-import Icon from '../Icon/styles';
-
-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 Icon from "../Icon/styles";
+import type { TypeTheme } from "../types/theme.flow";
 
 // eslint-disable-next-line flowtype/generic-spacing
-const Container: StyledComponent<
-  {checked: boolean, disabled: boolean},
-  TypeTheme,
-  *
-> = styled.button`
+const Container: StyledComponent<{
+  checked: boolean,
+  disabled: boolean,
+}, TypeTheme, *> = styled.button`
   position: relative;
   display: inline-block;
   width: 36px;
   height: 22px;
   margin: 0;
-  padding: ${(props) => props.theme.space[100]}
-    ${(props) => props.theme.space[200]};
+  padding: ${props => props.theme.space[100]}
+    ${props => props.theme.space[200]};
   vertical-align: middle;
   appearance: none;
-  background-color: ${(props) => props.theme.colors.form.background.base};
+  background-color: ${props => props.theme.colors.form.background.base};
   border-radius: 11px;
   outline: none;
   cursor: pointer;
-  transition: background-color ${(props) => props.theme.duration.fast}
-    ${(props) => props.theme.easing.ease_inout};
-  border: 1px solid ${(props) => props.theme.colors.form.border.base};
+  transition: background-color ${props => props.theme.duration.fast}
+    ${props => props.theme.easing.ease_inout};
+  border: 1px solid ${props => props.theme.colors.form.border.base};
   white-space: nowrap;
   overflow: hidden;
 
@@ -37,12 +35,12 @@ const Container: StyledComponent<
     left: 0;
     width: 14px;
     height: 14px;
-    background-color: ${(props) => props.theme.colors.icon.base};
+    background-color: ${props => props.theme.colors.icon.base};
     opacity: 0.64;
     border-radius: 50%;
     content: '';
-    transition: transform ${(props) => props.theme.duration.fast}
-      ${(props) => props.theme.easing.ease_inout};
+    transition: transform ${props => props.theme.duration.fast}
+      ${props => props.theme.easing.ease_inout};
     transform: translate(4px, -50%);
   }
 
@@ -50,9 +48,9 @@ const Container: StyledComponent<
     ${focusRing}
   }
 
-  ${(props) => {
-    if (props.checked) {
-      return css`
+  ${props => {
+  if (props.checked) {
+    return css`
         color: ${props.theme.colors.text.body};
         text-align: left;
         border-color: ${props.theme.colors.form.border.selected};
@@ -72,8 +70,8 @@ const Container: StyledComponent<
           color: ${props.theme.colors.icon.inverse};
         }
       `;
-    } else {
-      return `
+  } else {
+    return `
         &:hover,
         &:focus {
           border-color: ${props.theme.colors.form.border.base};
@@ -85,25 +83,21 @@ const Container: StyledComponent<
           }
         }
       `;
-    }
-  }}
+  }
+}}
 
-  ${(props) =>
-    props.disabled &&
-    css`
+  ${props => props.disabled && css`
       opacity: 0.4;
       cursor: not-allowed;
 
       &[aria-pressed='true'] {
         &:hover,
         &:focus {
-          background-color: ${(props) =>
-            props.theme.colors.container.background.selected};
+          background-color: ${props => props.theme.colors.container.background.selected};
         }
       }
     `}
 
   ${COMMON}
 `;
-
-export default Container;
+export default Container;

package/__flow__/Table/index.flow.js

@@ -0,0 +1,30 @@
+// @flow
+import * as React from 'react';
+import type { TypeEnumSortDirections, TypeTableHeaderCell } from "../TableHeaderCell/index.flow";
+import type { TypeTableCell } from "../TableCell/index.flow";
+export type TypeTableRow = {|
+  /** Table Row Id */
+  id: string,
+  /** Array for TableCells to render */
+  cells: TypeTableCell[],
+|};
+export type TypeTableProps = {
+  /** Array of TableHeaderCells to render */
+  head?: TypeTableHeaderCell[],
+  /** Array of TableRows to render */
+  rows?: TypeTableRow[],
+  /** Callback for Sorting Table Columns (optional) */
+  onSort?: (id: string) => void,
+  /** Controls which column is being sorted (optional) */
+  sortId?: string,
+  /** Controls the current sort direction (optional) */
+  sortDirection?: TypeEnumSortDirections,
+  /** Custom row render for flexibilty */
+  rowRender?: (row: TypeTableRow) => React.Node,
+  /**
+   * Including children will overwrite all head, rows, rowRender, and sorting props
+   * Should be used for manually rendering tables and ignoring data props
+   */
+  children?: React.Node,
+  ...
+};

package/__flow__/Table/index.js

@@ -1,50 +1,27 @@
 // @flow
 import * as React from 'react';
-import TableCell, {type TypeTableCell} from '../TableCell';
-import TableHeaderCell from '../TableHeaderCell';
-import type {
-  TypeTableHeaderCell,
-  TypeEnumSortDirections,
-} from '../TableHeaderCell';
-import Container from './styles';
+import TableCell from "../TableCell";
+import TableHeaderCell from "../TableHeaderCell";
+import Container from "./styles";
+import type { TypeTableProps, TypeTableRow as TypeTableRow2 } from "./index.flow";
 
-export type TypeTableRow = {|
-  /** Table Row Id */
-  id: string,
-  /** Array for TableCells to render */
-  cells: TypeTableCell[],
-|};
-
-type TypeProps = {
-  /** Array of TableHeaderCells to render */
-  head?: TypeTableHeaderCell[],
-  /** Array of TableRows to render */
-  rows?: TypeTableRow[],
-  /** Callback for Sorting Table Columns (optional) */
-  onSort?: (id: string) => void,
-  /** Controls which column is being sorted (optional) */
-  sortId?: string,
-  /** Controls the current sort direction (optional) */
-  sortDirection?: TypeEnumSortDirections,
-  /** Custom row render for flexibilty */
-  rowRender?: (row: TypeTableRow) => React.Node,
-  /**
-   * Including children will overwrite all head, rows, rowRender, and sorting props
-   * Should be used for manually rendering tables and ignoring data props
-   */
-  children?: React.Node,
-};
+/**
+ * @deprecated Use TypeTableRow from root instead
+ */
+export type TypeTableRow = TypeTableRow2;
 
+/**
+ * @deprecated Use TypeTableProps from root instead
+ */
+export type TypeProps = TypeTableProps;
 const renderTableRow = (row: TypeTableRow) => {
-  return (
-    <tbody key={row.id} data-qa-table-row="">
+  return <tbody key={row.id} data-qa-table-row="">
       <tr>
-        {row.cells.map((td) => {
-          return <TableCell {...td} key={td.id} />;
-        })}
+        {row.cells.map(td => {
+        return <TableCell {...td} key={td.id} />;
+      })}
       </tr>
-    </tbody>
-  );
+    </tbody>;
 };
 
 /**
@@ -59,67 +36,49 @@ export const Table = ({
   rowRender,
   children,
   ...rest
-}: TypeProps) => {
+}: TypeTableProps) => {
   if (children) {
-    return (
-      <Container {...rest} data-qa-table="">
+    return <Container {...rest} data-qa-table="">
         {children}
-      </Container>
-    );
+      </Container>;
   }
-
-  return (
-    <Container {...rest} data-qa-table="">
-      {head.length > 0 && (
-        <thead data-qa-table-header="">
+  return <Container {...rest} data-qa-table="">
+      {head.length > 0 && <thead data-qa-table-header="">
           <tr>
-            {head.map((th) => {
-              return (
-                <TableHeaderCell
-                  {...th}
-                  key={th.id}
-                  onSort={onSort}
-                  sortId={sortId}
-                  sortDirection={sortDirection}
-                />
-              );
-            })}
+            {head.map(th => {
+          return <TableHeaderCell {...th} key={th.id} onSort={onSort} sortId={sortId} sortDirection={sortDirection} />;
+        })}
           </tr>
-        </thead>
-      )}
-      {rows.map((row) => {
-        return rowRender ? rowRender(row) : renderTableRow(row);
-      })}
-    </Container>
-  );
+        </thead>}
+      {rows.map(row => {
+      return rowRender ? rowRender(row) : renderTableRow(row);
+    })}
+    </Container>;
 };
-
 type TypePassthroughProps = {
   children: React.Node,
+  ...
 };
-
-export const TableHead = ({children, ...props}: TypePassthroughProps) => (
-  <thead {...props}>{children}</thead>
-);
-
-export const TableBody = ({children, ...props}: TypePassthroughProps) => (
-  <tbody {...props}>{children}</tbody>
-);
-
-export const TableRow = ({children, ...props}: TypePassthroughProps) => (
-  <tr {...props}>{children}</tr>
-);
-
+export const TableHead = ({
+  children,
+  ...props
+}: TypePassthroughProps) => <thead {...props}>{children}</thead>;
+export const TableBody = ({
+  children,
+  ...props
+}: TypePassthroughProps) => <tbody {...props}>{children}</tbody>;
+export const TableRow = ({
+  children,
+  ...props
+}: TypePassthroughProps) => <tr {...props}>{children}</tr>;
 Table.TableHead = TableHead;
 Table.TableBody = TableBody;
 Table.TableRow = TableRow;
 Table.HeaderCell = TableHeaderCell;
 Table.Cell = TableCell;
-
 Table.TableHead.displayName = 'Table.TableHead';
 Table.TableBody.displayName = 'Table.TableBody';
 Table.TableRow.displayName = 'Table.TableRow';
 Table.HeaderCell.displayName = 'Table.HeaderCell';
 Table.Cell.displayName = 'Table.Cell';
-
-export default Table;
+export default Table;

package/__flow__/Table/styles.js

@@ -1,9 +1,7 @@
 //@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.table`
   width: 100%;
   border-collapse: collapse;
@@ -15,10 +13,9 @@ const Container: StyledComponent<{...}, TypeTheme, *> = styled.table`
   tr,
   thead {
     border-bottom: 1px solid
-      ${(props) => props.theme.colors.container.border.base};
+      ${props => props.theme.colors.container.border.base};
   }
 
   ${COMMON}
 `;
-
-export default Container;
+export default Container;

package/__flow__/TableCell/index.flow.js

@@ -0,0 +1,19 @@
+// @flow
+import * as React from 'react';
+import { type TypeSystemCommonProps } from "../types/system-props.flow.js";
+export type TypeTableCell = {
+  ...TypeSystemCommonProps,
+  /** Table Cell Id */
+  id: string,
+  /** Content is deprecated.  Please use children instead. Content to be render */
+  content?: React.Node,
+  /** Controls the colSpan attribute (optional) */
+  colSpan?: number,
+  /** Controls the width attribute (optional) */
+  width?: number,
+  /** Controls the CSS text-align property (optional) */
+  align?: 'left' | 'right' | 'center' | 'justify',
+  /** Children to be rendered */
+  children?: React.Node,
+  ...
+};

package/__flow__/TableCell/index.js

@@ -1,42 +1,29 @@
 // @flow
 import * as React from 'react';
-import Container from './styles';
-import {type TypeSystemCommonProps} from '../types/system-props.flow.js';
+import Container from "./styles";
+import type { TypeTableCell as TypeTableCell2 } from "./index.flow";
 
-export type TypeTableCell = {
-  /** Table Cell Id */
-  id: string,
-  /** Content is deprecated.  Please use children instead. Content to be render */
-  content?: React.Node,
-  /** Controls the colSpan attribute (optional) */
-  colSpan?: number,
-  /** Controls the width attribute (optional) */
-  width?: number,
-  /** Controls the CSS text-align property (optional) */
-  align?: 'left' | 'right' | 'center' | 'justify',
-  /** Children to be rendered */
-  children?: React.Node,
-  ...TypeSystemCommonProps,
-};
+/**
+ * @deprecated Use TypeTableCell from root instead
+ */
+export type TypeTableCell = TypeTableCell2;
 
 /**
  * The table cell component is for rendering table cells and is meant to be used with the table component.
  */
 export default class TableCell extends React.Component<TypeTableCell> {
   render() {
-    const {id, content, colSpan, width, align, children, ...rest} = this.props;
-
-    return (
-      <Container
-        {...rest}
-        alignment={align || 'left'}
-        key={id}
-        colSpan={colSpan}
-        width={width}
-        data-qa-table-cell=""
-      >
+    const {
+      id,
+      content,
+      colSpan,
+      width,
+      align,
+      children,
+      ...rest
+    } = this.props;
+    return <Container {...rest} alignment={align || 'left'} key={id} colSpan={colSpan} width={width} data-qa-table-cell="">
         {children || content}
-      </Container>
-    );
+      </Container>;
   }
-}
+}

package/__flow__/TableCell/styles.js

@@ -1,16 +1,15 @@
 //@flow
-import styled, {type StyledComponent} from 'styled-components';
-import {COMMON} from '../utils/system-props';
-
-import type {TypeTheme} from '../types/theme.flow';
-
-const Container: StyledComponent<{alignment: string}, TypeTheme, *> = styled.td`
-  ${(props) => props.theme.typography[200]}
-  font-weight: ${(props) => props.theme.fontWeights.normal};
-  padding: ${(props) => props.theme.space[300]};
-  text-align: ${(props) => props.alignment};
+import styled, { type StyledComponent } from 'styled-components';
+import { COMMON } from "../utils/system-props";
+import type { TypeTheme } from "../types/theme.flow";
+const Container: StyledComponent<{
+  alignment: string
+}, TypeTheme, *> = styled.td`
+  ${props => props.theme.typography[200]}
+  font-weight: ${props => props.theme.fontWeights.normal};
+  padding: ${props => props.theme.space[300]};
+  text-align: ${props => props.alignment};
 
   ${COMMON}
 `;
-
-export default Container;
+export default Container;

package/__flow__/TableHeaderCell/constants.js

@@ -0,0 +1,6 @@
+// @flow
+
+export const SORT_DIRECTIONS = {
+  ASC: 'ASC',
+  DESC: 'DESC'
+};

package/__flow__/TableHeaderCell/index.flow.js

@@ -0,0 +1,24 @@
+// @flow
+import type { TypeTableCell } from "../TableCell/index.flow";
+import { SORT_DIRECTIONS } from "./constants";
+export type TypeEnumSortDirections = $Keys<typeof SORT_DIRECTIONS>;
+export type TypeTableHeaderCell = {
+  ...TypeTableCell,
+  /** Legacy Deteremines if a table column is sortable (optional) */
+  isSortable?: boolean,
+  /** Truncates text into a singular line with ellipsis (optional) */
+  shouldTruncate?: boolean,
+  ...
+};
+export type TypeTableHeaderCellProps = {
+  ...TypeTableHeaderCell,
+  /** Legacy: Callback for Sorting Table Columns (optional) */
+  onSort?: (id: string) => void,
+  /** Legacy: Controls which column is being sorted (optional) */
+  sortId?: string,
+  /** Legacy: Controls the current sort direction (optional) */
+  sortDirection?: TypeEnumSortDirections,
+  /** Callback for Click Events. If Included will override onSort prop */
+  onClick?: (e: SyntheticEvent<HTMLButtonElement>) => void,
+  ...
+};