@sproutsocial/racine 12.24.0 → 13.1.1

package/__flow__/TableHeaderCell/index.js

@@ -1,71 +1,58 @@
 // @flow
 import * as React from 'react';
-import Container, {SortIcon} from './styles';
+import Icon from "../Icon";
+import Container, { SortIcon } from "./styles";
+import { SORT_DIRECTIONS } from "./constants";
+import type { TypeEnumSortDirections as TypeEnumSortDirections2, TypeTableHeaderCell as TypeTableHeaderCell2, TypeTableHeaderCellProps } from "./index.flow";
+export * from "./constants";
 
-import Icon from '../Icon/';
-
-import type {TypeTableCell} from '../TableCell/';
-
-export const SORT_DIRECTIONS = {
-  ASC: 'ASC',
-  DESC: 'DESC',
-};
-
-export type TypeEnumSortDirections = $Keys<typeof SORT_DIRECTIONS>;
+/**
+ * @deprecated Use TypeEnumSortDirections from root instead
+ */
+export type TypeEnumSortDirections = TypeEnumSortDirections2;
 
-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,
-};
+/**
+ * @deprecated Use TypeTableHeaderCell from root instead
+ */
+export type TypeTableHeaderCell = TypeTableHeaderCell2;
 
-export type TypeProps = {
-  ...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,
-};
+/**
+ * @deprecated Use TypeTableHeaderCellProps from root instead
+ */
+export type TypeProps = TypeTableHeaderCellProps;
 
 /**
  * The table header cell component is for rendering table header cells and is meant to be used with the table component.
  */
-export default class TableHeaderCell extends React.Component<TypeProps> {
+export default class TableHeaderCell extends React.Component<TypeTableHeaderCellProps> {
   getSortIcon = (isSorted: boolean) => {
-    const {sortDirection} = this.props;
-
+    const {
+      sortDirection
+    } = this.props;
     let iconName = 'chevron-up-down-filled';
-
     if (isSorted && sortDirection === SORT_DIRECTIONS.ASC) {
       iconName = 'chevron-up-filled';
     } else if (isSorted && sortDirection === SORT_DIRECTIONS.DESC) {
       iconName = 'chevron-down-filled';
     }
-
-    return (
-      <SortIcon>
+    return <SortIcon>
         <Icon size="mini" name={iconName} />
-      </SortIcon>
-    );
+      </SortIcon>;
   };
-
   handleClick = (e: SyntheticEvent<HTMLButtonElement>) => {
-    const {onClick, onSort, isSortable, id} = this.props;
+    const {
+      onClick,
+      onSort,
+      isSortable,
+      id
+    } = this.props;
     if (onClick) {
       onClick(e);
       return;
     }
-
     if (!isSortable || !onSort) return;
     onSort(id);
   };
-
   render() {
     const {
       id,
@@ -82,23 +69,9 @@ export default class TableHeaderCell extends React.Component<TypeProps> {
       onClick,
       ...rest
     } = this.props;
-
-    return (
-      <Container
-        {...rest}
-        key={id}
-        alignment={align || 'left'}
-        sortable={isSortable}
-        colSpan={colSpan}
-        width={width}
-        onClick={this.handleClick}
-        data-tableheadercell-sortable={isSortable}
-        data-qa-table-header-cell=""
-        data-qa-table-header-cell-sortdirection={sortDirection}
-      >
+    return <Container {...rest} key={id} alignment={align || 'left'} sortable={isSortable} colSpan={colSpan} width={width} onClick={this.handleClick} data-tableheadercell-sortable={isSortable} data-qa-table-header-cell="" data-qa-table-header-cell-sortdirection={sortDirection}>
         {children || content}
         {isSortable && !children && this.getSortIcon(id === sortId)}
-      </Container>
-    );
+      </Container>;
   }
-}
+}

package/__flow__/TableHeaderCell/styles.js

@@ -1,31 +1,25 @@
 //@flow
-import styled, {css, type StyledComponent} from 'styled-components';
-import {COMMON} from '../utils/system-props';
-
-import type {TypeTheme} from '../types/theme.flow';
-
+import styled, { css, type StyledComponent } from 'styled-components';
+import { COMMON } from "../utils/system-props";
+import type { TypeTheme } from "../types/theme.flow";
 const Container: StyledComponent<any, TypeTheme, *> = styled.th`
-  ${(props) => props.theme.typography[100]}
-  font-weight: ${(props) => props.theme.fontWeights.semibold};
-  padding: ${(props) => props.theme.space[300]};
-  text-align: ${(props) => props.alignment};
+  ${props => props.theme.typography[100]}
+  font-weight: ${props => props.theme.fontWeights.semibold};
+  padding: ${props => props.theme.space[300]};
+  text-align: ${props => props.alignment};
 
-  ${(props) =>
-    props.sortable &&
-    css`
+  ${props => props.sortable && css`
       position: relative;
       cursor: pointer;
     `}
 
   ${COMMON}
 `;
-
 export const SortIcon: StyledComponent<{...}, TypeTheme, *> = styled.span`
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   font-size: 0;
-  padding: 0 ${(props) => props.theme.space[200]};
+  padding: 0 ${props => props.theme.space[200]};
 `;
-
-export default Container;
+export default Container;

package/__flow__/TableRowAccordion/index.flow.js

@@ -0,0 +1,13 @@
+// @flow
+import * as React from 'react';
+import type { TypeTableRow } from "../Table/index.flow";
+export type TypeTableRowAccordionProps = {
+  ...TypeTableRow,
+  /** Content to be rendered in accordion drawer */
+  detail: React.Node,
+  /** Controls the display state of the accordion drawer */
+  isExpanded: boolean,
+  /** Callback for toggling the accordion drawer state */
+  onToggle: (id: string) => void,
+  ...
+};

package/__flow__/TableRowAccordion/index.js

@@ -1,63 +1,45 @@
 // @flow
 import * as React from 'react';
-import Container, {Detail, Trigger} from './styles';
-
-import type {TypeTableRow} from '../Table';
-import Icon from '../Icon';
-import TableCell from '../TableCell';
-
-type TypeProps = {
-  ...TypeTableRow,
-  /** Content to be rendered in accordion drawer */
-  detail: React.Node,
-  /** Controls the display state of the accordion drawer */
-  isExpanded: boolean,
-  /** Callback for toggling the accordion drawer state */
-  onToggle: (id: string) => void,
-};
+import Icon from "../Icon";
+import TableCell from "../TableCell";
+import Container, { Detail, Trigger } from "./styles";
+import type { TypeTableRowAccordionProps } from "./index.flow";
 
 /**
  * The table row accordion component allows for rendering a row of tabular data along with a addtional content to be rendered inside of an accordion drawer. This component is meant to be used with the table components rowRender mentod.
  */
-export default class TableRowAccordion extends React.Component<TypeProps> {
+export default class TableRowAccordion extends React.Component<TypeTableRowAccordionProps> {
   handleToggle = (e: Event) => {
-    const {onToggle, id} = this.props;
+    const {
+      onToggle,
+      id
+    } = this.props;
     e.stopPropagation();
     if (onToggle) {
       onToggle(id);
     }
   };
-
   render() {
-    const {id, cells, detail, onToggle, isExpanded, ...rest} = this.props;
-
-    return (
-      <Container {...rest} data-qa-table-row-accordion={isExpanded} key={id}>
+    const {
+      id,
+      cells,
+      detail,
+      onToggle,
+      isExpanded,
+      ...rest
+    } = this.props;
+    return <Container {...rest} data-qa-table-row-accordion={isExpanded} key={id}>
         <tr data-tablerowaccordion-summary onClick={this.handleToggle}>
-          {cells.map((td) => {
-            return <TableCell {...td} key={td.id} />;
-          })}
-          <TableCell
-            id="tableRowAccordion_trigger"
-            content={
-              <Trigger
-                data-tablerowaccordion-trigger
-                onClick={this.handleToggle}
-                role="button"
-              >
+          {cells.map(td => {
+          return <TableCell {...td} key={td.id} />;
+        })}
+          <TableCell id="tableRowAccordion_trigger" content={<Trigger data-tablerowaccordion-trigger onClick={this.handleToggle} role="button">
                 <Icon name={isExpanded ? 'chevron-up' : 'chevron-down'} />
-              </Trigger>
-            }
-          />
+              </Trigger>} />
         </tr>
         <Detail isExpanded={isExpanded} data-tablerowaccordion-detail>
-          <TableCell
-            id="tableRowAccordion_detail"
-            colSpan={100}
-            content={detail}
-          />
+          <TableCell id="tableRowAccordion_detail" colSpan={100} content={detail} />
         </Detail>
-      </Container>
-    );
+      </Container>;
   }
-}
+}

package/__flow__/TableRowAccordion/styles.js

@@ -1,33 +1,25 @@
 //@flow
-import styled, {css, type StyledComponent} from 'styled-components';
-import {COMMON} from '../utils/system-props';
-
-import type {TypeTheme} from '../types/theme.flow';
-
+import styled, { css, type StyledComponent } from 'styled-components';
+import { COMMON } from "../utils/system-props";
+import type { TypeTheme } from "../types/theme.flow";
 const Container: StyledComponent<{...}, TypeTheme, *> = styled.tbody`
   border-bottom: 1px solid
-    ${(props) => props.theme.colors.container.border.base};
+    ${props => props.theme.colors.container.border.base};
 
   ${COMMON}
 `;
 
 // eslint-disable-next-line flowtype/generic-spacing
-export const Detail: StyledComponent<
-  {isExpanded: boolean},
-  TypeTheme,
-  *
-> = styled.tr`
+export const Detail: StyledComponent<{
+  isExpanded: boolean
+}, TypeTheme, *> = styled.tr`
   display: none;
 
-  ${(props) =>
-    props.isExpanded &&
-    css`
+  ${props => props.isExpanded && css`
       display: table-row;
     `}
 `;
-
 export const Trigger: StyledComponent<{...}, TypeTheme, *> = styled.div`
   cursor: pointer;
 `;
-
-export default Container;
+export default Container;

package/__flow__/Tabs/index.flow.js

@@ -0,0 +1,20 @@
+// @flow
+import * as React from 'react';
+export type TypeTabButtonsProps = {
+  children: React.Node,
+  /** Should be unique among sibling elements */
+  id: string,
+  ...
+};
+export type TypeTabsProps = {
+  children: React.Node,
+  onSelect: (string) => void,
+  /** Whether or not the tabs should stretch to fill the width of their container */
+  fullWidth?: boolean,
+  qa?: {
+    [string]: string
+  },
+  /** ID of the selected tab */
+  selectedId: string,
+  ...
+};

package/__flow__/Tabs/index.js

@@ -1,9 +1,16 @@
 // @flow strict-local
 import * as React from 'react';
-import Container, {TabItem, TabButton} from './styles';
-
-type TypeTabButtonRef = {current: null | React.ElementRef<'button'>};
+import Container, { TabItem, TabButton } from "./styles";
+import type { TypeTabButtonsProps, TypeTabsProps as TypeTabsProps2 } from "./index.flow";
 
+/**
+ * @deprecated Use TypeTabsProps from root instead
+ */
+export type TypeTabsProps = TypeTabsProps2;
+type TypeTabButtonRef = {
+  current: null | React.ElementRef<'button'>,
+  ...
+};
 type TypeTabButtonContext = $Shape<{
   onActivate: (string) => void,
   onTabMount: (id: string, ref: TypeTabButtonRef) => void,
@@ -11,118 +18,83 @@ type TypeTabButtonContext = $Shape<{
   onTabUnmount: (id: string) => void,
   selectedId: string,
   fullWidth?: boolean,
+  ...
 }>;
-
 const TabButtonContext = React.createContext<TypeTabButtonContext>({});
-
-type TypeTabButtonsProps = {
-  children: React.Node,
-  /** Should be unique among sibling elements */
-  id: string,
-};
-
 class TabItemButton extends React.Component<TypeTabButtonsProps, {}> {
   static contextType = TabButtonContext;
   context: TypeTabButtonContext;
-
   buttonRef: TypeTabButtonRef = React.createRef<React.ElementRef<'button'>>();
-
   componentDidMount() {
     this.context.onTabMount(this.props.id, this.buttonRef);
   }
-
   componentDidUpdate(prevProps: TypeTabButtonsProps) {
     if (prevProps.id !== this.props.id) {
       this.context.onTabUpdate(prevProps.id, this.props.id);
     }
   }
-
   componentWillUnmount() {
     this.context.onTabUnmount(this.props.id);
   }
-
   render() {
-    const {children, id, ...rest} = this.props;
-    const {selectedId, onActivate, fullWidth} = this.context;
+    const {
+      children,
+      id,
+      ...rest
+    } = this.props;
+    const {
+      selectedId,
+      onActivate,
+      fullWidth
+    } = this.context;
     const isSelected = selectedId === id;
-
-    return (
-      <TabItem key={id} fullWidth={fullWidth} isSelected={isSelected}>
-        <TabButton
-          innerRef={this.buttonRef}
-          id={id}
-          onClick={() => onActivate(id)}
-          isSelected={isSelected}
-          tabIndex={isSelected ? 0 : -1}
-          fullWidth={fullWidth}
-          data-qa-tab-button={id}
-          data-qa-tab-button-state={isSelected}
-          // $FlowIssue - upgrade v0.112.0
-          {...rest}
-        >
+    return <TabItem key={id} fullWidth={fullWidth} isSelected={isSelected}>
+        {/* $FlowIssue - upgrade v0.112.0 */}
+        <TabButton innerRef={this.buttonRef} id={id} onClick={() => onActivate(id)} isSelected={isSelected} tabIndex={isSelected ? 0 : -1} fullWidth={fullWidth} data-qa-tab-button={id} data-qa-tab-button-state={isSelected} {...rest}>
           {children}
         </TabButton>
-      </TabItem>
-    );
+      </TabItem>;
   }
 }
 
-export type TypeTabsProps = {
-  children: React.Node,
-  onSelect: (string) => void,
-  /** Whether or not the tabs should stretch to fill the width of their container */
-  fullWidth?: boolean,
-  qa?: {[string]: string},
-  /** ID of the selected tab */
-  selectedId: string,
-};
-
 /**
  * Render a group of buttons in a tab-heading style
  */
 export default class Tabs extends React.Component<TypeTabsProps, {}> {
   static Button = TabItemButton;
-
-  buttonRefs: {[string]: ?TypeTabButtonRef} = {};
+  buttonRefs: {
+    [string]: ?TypeTabButtonRef
+  } = {};
   tabList: string[] = [];
-
   getSelectedId = () => this.props.selectedId;
-
   onActivate = (id: string) => this.props.onSelect(id);
-
   onTabMount = (id: string, ref: TypeTabButtonRef) => {
     if (!this.tabList.includes(id)) {
       this.tabList.push(id);
       this.buttonRefs[id] = ref;
     }
   };
-
   onTabUpdate = (previousId: string, newId: string) => {
     if (this.tabList.includes(previousId)) {
-      this.tabList = this.tabList.map((id) => (id === previousId ? newId : id));
+      this.tabList = this.tabList.map(id => id === previousId ? newId : id);
       this.buttonRefs[newId] = this.buttonRefs[previousId];
       this.buttonRefs[previousId] = undefined;
     }
   };
-
   onTabUnmount = (id: string) => {
     if (this.tabList.includes(id)) {
-      this.tabList = this.tabList.filter((currentId) => currentId !== id);
+      this.tabList = this.tabList.filter(currentId => currentId !== id);
       this.buttonRefs[id] = undefined;
     }
   };
-
   selectNextTab = (id: string) => {
     const buttonRef = this.buttonRefs[id];
-
     this.props.onSelect(id);
-    buttonRef &&
-      buttonRef.current &&
-      buttonRef.current.focus &&
-      buttonRef.current.focus();
+    buttonRef && buttonRef.current && buttonRef.current.focus && buttonRef.current.focus();
   };
-
-  keyHandler = ({keyCode}: SyntheticKeyboardEvent<HTMLUListElement>) => {
+  keyHandler = ({
+    keyCode
+  }: SyntheticKeyboardEvent<HTMLUListElement>) => {
     switch (keyCode) {
       // left arrow
       case 37:
@@ -131,7 +103,6 @@ export default class Tabs extends React.Component<TypeTabsProps, {}> {
             const count = this.tabList.length;
             const nextIndex = index - 1 >= 0 ? index - 1 : count - 1;
             const nextId = this.tabList[nextIndex];
-
             this.selectNextTab(nextId);
           }
         });
@@ -143,7 +114,6 @@ export default class Tabs extends React.Component<TypeTabsProps, {}> {
             const count = this.tabList.length;
             const nextIndex = index + 1 < count ? index + 1 : 0;
             const nextId = this.tabList[nextIndex];
-
             this.selectNextTab(nextId);
           }
         });
@@ -152,26 +122,26 @@ export default class Tabs extends React.Component<TypeTabsProps, {}> {
         break;
     }
   };
-
   render() {
-    const {children, qa, ...rest} = this.props;
-
+    const {
+      children,
+      qa,
+      ...rest
+    } = this.props;
     return (
       // $FlowIssue - upgrade v0.112.0
       <Container data-qa-tabs="" onKeyUp={this.keyHandler} {...qa} {...rest}>
-        <TabButtonContext.Provider
-          value={{
-            selectedId: this.getSelectedId(),
-            fullWidth: this.props.fullWidth,
-            onActivate: this.onActivate,
-            onTabMount: this.onTabMount,
-            onTabUpdate: this.onTabUpdate,
-            onTabUnmount: this.onTabUnmount,
-          }}
-        >
+        <TabButtonContext.Provider value={{
+          selectedId: this.getSelectedId(),
+          fullWidth: this.props.fullWidth,
+          onActivate: this.onActivate,
+          onTabMount: this.onTabMount,
+          onTabUpdate: this.onTabUpdate,
+          onTabUnmount: this.onTabUnmount
+        }}>
           {children}
         </TabButtonContext.Provider>
       </Container>
     );
   }
-}
+}

package/__flow__/Tabs/styles.js

@@ -1,71 +1,53 @@
 //@flow
-import styled, {css, type StyledComponent} from 'styled-components';
-import {COMMON} from '../utils/system-props';
-import Button from '../Button';
-
-import type {TypeTheme} from '../types/theme.flow';
-
+import styled, { css, type StyledComponent } from 'styled-components';
+import { COMMON } from "../utils/system-props";
+import Button from "../Button";
+import type { TypeTheme } from "../types/theme.flow";
 const Container: StyledComponent<any, TypeTheme, *> = styled.ul`
-  display: ${(props) => (props.fullWidth ? 'flex' : 'inline-flex')};
+  display: ${props => props.fullWidth ? 'flex' : 'inline-flex'};
   justify-content: space-between;
   margin: 0;
   padding: 0;
   list-style: none;
-  border-bottom: ${(props) => props.theme.borders[500]}
-    ${(props) => props.theme.colors.container.border.base};
+  border-bottom: ${props => props.theme.borders[500]}
+    ${props => props.theme.colors.container.border.base};
 
   ${COMMON}
 `;
-
 export const TabItem: StyledComponent<any, TypeTheme, *> = styled.li`
   margin-bottom: -1px;
-  ${(props) =>
-    props.fullWidth &&
-    css`
+  ${props => props.fullWidth && css`
       flex-grow: 1;
     `};
 
   &:not(:last-child) {
-    ${(props) =>
-      !props.fullWidth &&
-      css`
-        margin-right: ${(props) => props.theme.space[350]};
+    ${props => !props.fullWidth && css`
+        margin-right: ${props => props.theme.space[350]};
       `};
   }
 
-  ${(props) =>
-    props.isSelected &&
-    css`
-      box-shadow: ${(props) =>
-        `inset 0 -3px 0 0 ${props.theme.colors.button.primary.background.base}`};
+  ${props => props.isSelected && css`
+      box-shadow: ${props => `inset 0 -3px 0 0 ${props.theme.colors.button.primary.background.base}`};
     `};
 
   &:hover {
-    ${(props) =>
-      props.isSelected &&
-      css`
-        box-shadow: ${(props) =>
-          `inset 0 -3px 0 0 ${props.theme.colors.button.primary.background.hover}`};
+    ${props => props.isSelected && css`
+        box-shadow: ${props => `inset 0 -3px 0 0 ${props.theme.colors.button.primary.background.hover}`};
       `};
   }
 `;
-
 export const TabButton: StyledComponent<{...}, TypeTheme, *> = styled(Button)`
-  padding: ${(props) => `${props.theme.space[350]} 0`};
-  color: ${(props) => props.theme.colors.text.headline};
+  padding: ${props => `${props.theme.space[350]} 0`};
+  color: ${props => props.theme.colors.text.headline};
   width: 100%;
 
-  ${(props) =>
-    props.isSelected &&
-    css`
-      color: ${(props) => props.theme.colors.link.base};
+  ${props => props.isSelected && css`
+      color: ${props => props.theme.colors.link.base};
     `};
 
   &:hover {
-    ${(props) =>
-      props.isSelected &&
-      css`
-        color: ${(props) => props.theme.colors.link.hover};
+    ${props => props.isSelected && css`
+        color: ${props => props.theme.colors.link.hover};
       `};
   }
 
@@ -73,5 +55,4 @@ export const TabButton: StyledComponent<{...}, TypeTheme, *> = styled(Button)`
     transform: none;
   }
 `;
-
-export default Container;
+export default Container;

package/__flow__/Text/index.flow.js

@@ -0,0 +1,13 @@
+//@flow
+import * as React from 'react';
+export type TypeTextProps = {
+  /** Maps to the typeScale system prop, sets font size and line height using Seeds values */
+  fontSize?: 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 1000 | 1100 | 1200,
+  /** Controls the CSS word-break property */
+  breakWord?: boolean,
+  /** Truncates text into a single line with ellipsis */
+  truncated?: boolean,
+  children: React.Node,
+  qa?: Object,
+  ...
+};