@sproutsocial/racine 12.19.0 → 12.21.0

package/__flow__/DatePicker/StatefulDateRangePicker.js

@@ -1,13 +1,13 @@
 // @flow
-import React, { useState } from "react";
-import { START_DATE } from "react-dates/constants";
-import DateRangePicker, { type TypeProps } from "./DateRangePicker";
+import React, {useState} from 'react';
+import {START_DATE} from 'react-dates/constants';
+import DateRangePicker, {type TypeProps} from './DateRangePicker';
 
 type TypeStatefulProps = {
   ...TypeProps,
-  focusedInput?: $PropertyType<TypeProps, "focusedInput">,
-  onDatesChange?: $PropertyType<TypeProps, "onDatesChange">,
-  onFocusChange?: $PropertyType<TypeProps, "onFocusChange">,
+  focusedInput?: $PropertyType<TypeProps, 'focusedInput'>,
+  onDatesChange?: $PropertyType<TypeProps, 'onDatesChange'>,
+  onFocusChange?: $PropertyType<TypeProps, 'onFocusChange'>,
 };
 
 export const StatefulDateRangePicker = ({

package/__flow__/DatePicker/StatefulSingleDatePicker.js

@@ -1,10 +1,10 @@
 // @flow
-import React, { useState } from "react";
-import SingleDatePicker, { type TypeProps } from "./SingleDatePicker";
+import React, {useState} from 'react';
+import SingleDatePicker, {type TypeProps} from './SingleDatePicker';
 
 type TypeStatefulProps = {
   ...TypeProps,
-  onDateChange?: $PropertyType<TypeProps, "onDateChange">,
+  onDateChange?: $PropertyType<TypeProps, 'onDateChange'>,
 };
 
 export const StatefulSingleDatePicker = ({

package/__flow__/DatePicker/common.js

@@ -1,18 +1,18 @@
 // @flow
-import "react-dates/initialize";
+import 'react-dates/initialize';
 
-import React, { type Node } from "react";
-import Icon from "../Icon";
-import { CalendarDay } from "./styles";
+import React, {type Node} from 'react';
+import Icon from '../Icon';
+import {CalendarDay} from './styles';
 
-import "react-dates/lib/css/_datepicker.css";
+import 'react-dates/lib/css/_datepicker.css';
 
 const iconNames = {
-  left: "arrow-left",
-  right: "arrow-right",
+  left: 'arrow-left',
+  right: 'arrow-right',
 };
 
-export const CalendarNavButton = ({ type }: { type: "left" | "right" }) => (
+export const CalendarNavButton = ({type}: {type: 'left' | 'right'}) => (
   <Icon size="mini" name={iconNames[type]} />
 );
 
@@ -28,7 +28,7 @@ export type TypeCommonDatePickerProps = {|
   initialVisibleMonth?: () => moment$Moment,
   minimumNights?: number,
   phrases?: {
-    [phrase: string]: Node | (({ date: moment$Moment }) => Node),
+    [phrase: string]: Node | (({date: moment$Moment}) => Node),
     ...
   },
 |};
@@ -40,18 +40,18 @@ export const commonDatePickerProps: TypeCommonDatePickerProps = {
   navNext: <CalendarNavButton type="right" />,
   renderDayContents: (day, modifiers) => (
     <CalendarDay day={day} modifiers={modifiers}>
-      {day.format("D")}
+      {day.format('D')}
     </CalendarDay>
   ),
 };
 
 // Testing utilities
 export const formatDateAsCalendarHeader = (date: moment$Moment): string =>
-  date.format("MMMM YYYY");
+  date.format('MMMM YYYY');
 export const formatDateAsCalendarDay = (date: moment$Moment): string =>
-  date.format("dddd, MMMM D, YYYY");
+  date.format('dddd, MMMM D, YYYY');
 
 export const getVisibleMonthWithReactDatesInternalApi = (
   container: HTMLElement
 ): string =>
-  container.querySelector("[data-visible=true] strong")?.textContent ?? "";
+  container.querySelector('[data-visible=true] strong')?.textContent ?? '';

package/__flow__/DatePicker/index.js

@@ -1,4 +1,4 @@
-import SingleDatePicker from "./SingleDatePicker";
-import DateRangePicker from "./DateRangePicker";
+import SingleDatePicker from './SingleDatePicker';
+import DateRangePicker from './DateRangePicker';
 
-export { SingleDatePicker, DateRangePicker };
+export {SingleDatePicker, DateRangePicker};

package/__flow__/DatePicker/styles.js

@@ -1,9 +1,9 @@
 // @flow
-import styled, { createGlobalStyle, css } from "styled-components";
-import moment from "moment";
-import Box from "../Box";
-import { disabled } from "../utils/mixins";
-import type { TypeTheme } from "../types/theme.flow";
+import styled, {createGlobalStyle, css} from 'styled-components';
+import moment from 'moment';
+import Box from '../Box';
+import {disabled} from '../utils/mixins';
+import type {TypeTheme} from '../types/theme.flow';
 
 /*
  * Partial list of modifiers given to renderDayContents by airbnb/react-dates. There may be more.
@@ -18,26 +18,26 @@ import type { TypeTheme } from "../types/theme.flow";
  */
 
 const isSelected = (modifiers) =>
-  modifiers.has("selected-span") ||
-  modifiers.has("selected") ||
-  modifiers.has("selected-start") ||
-  modifiers.has("selected-end") ||
-  modifiers.has("hovered-span") ||
-  modifiers.has("after-hovered-start");
-
-const isOutOfRange = (modifiers) => modifiers.has("blocked-out-of-range");
+  modifiers.has('selected-span') ||
+  modifiers.has('selected') ||
+  modifiers.has('selected-start') ||
+  modifiers.has('selected-end') ||
+  modifiers.has('hovered-span') ||
+  modifiers.has('after-hovered-start');
+
+const isOutOfRange = (modifiers) => modifiers.has('blocked-out-of-range');
 const isHoveredAndInRange = (modifiers) =>
-  modifiers.has("hovered") && !modifiers.has("blocked-out-of-range");
+  modifiers.has('hovered') && !modifiers.has('blocked-out-of-range');
 
 const shouldHaveLeftPill = (modifiers, day) => {
   if (!isSelected(modifiers)) {
     return false;
   }
   if (
-    modifiers.has("selected") ||
-    modifiers.has("selected-start") ||
-    modifiers.has("first-day-of-week") ||
-    day.isSame(moment(day).startOf("month"), "day")
+    modifiers.has('selected') ||
+    modifiers.has('selected-start') ||
+    modifiers.has('first-day-of-week') ||
+    day.isSame(moment(day).startOf('month'), 'day')
   ) {
     return true;
   }
@@ -48,10 +48,10 @@ const shouldHaveRightPill = (modifiers, day) => {
     return false;
   }
   if (
-    modifiers.has("selected") ||
-    modifiers.has("selected-end") ||
-    modifiers.has("last-day-of-week") ||
-    day.isSame(moment(day).endOf("month"), "day")
+    modifiers.has('selected') ||
+    modifiers.has('selected-end') ||
+    modifiers.has('last-day-of-week') ||
+    day.isSame(moment(day).endOf('month'), 'day')
   ) {
     return true;
   }
@@ -59,7 +59,7 @@ const shouldHaveRightPill = (modifiers, day) => {
 };
 
 export const CalendarDay = styled<typeof Box, TypeTheme, *>(Box)`
-  ${({ modifiers, day, theme }) => {
+  ${({modifiers, day, theme}) => {
     if (isSelected(modifiers)) {
       return css`
         background-color: ${theme.colors.container.background.selected};
@@ -96,7 +96,7 @@ export const CalendarDay = styled<typeof Box, TypeTheme, *>(Box)`
 export const ReactDatesCssOverrides = createGlobalStyle`
 	.DayPicker {
 		box-sizing: content-box;
-		font-weight: ${({ theme }) => theme.fontWeights.normal};
+		font-weight: ${({theme}) => theme.fontWeights.normal};
 		font-family: ${(props) => props.theme.fontFamily};
 
 		/* override react-dates height to better reflect how tall the component actually is */
@@ -108,8 +108,8 @@ export const ReactDatesCssOverrides = createGlobalStyle`
 		}
 
 		&_weekHeader {
-			color: ${({ theme }) => theme.colors.text.headline};
-			border-bottom: 1px solid ${({ theme }) => theme.colors.container.border.base};
+			color: ${({theme}) => theme.colors.text.headline};
+			border-bottom: 1px solid ${({theme}) => theme.colors.container.border.base};
 
  			/* Magic number to match position of .CalendarMonth_caption */
 			top: 26px;
@@ -128,15 +128,15 @@ export const ReactDatesCssOverrides = createGlobalStyle`
 		}
 
 		&_weekHeader_li {
-			${({ theme }) => theme.typography[200]}
-			color: ${({ theme }) => theme.colors.text.subtext};
-			font-weight: ${({ theme }) => theme.fontWeights.semibold};
+			${({theme}) => theme.typography[200]}
+			color: ${({theme}) => theme.colors.text.subtext};
+			font-weight: ${({theme}) => theme.fontWeights.semibold};
 			margin: 0;
 		}
 
 		&__horizontal {
 			box-shadow: none;
-			background: ${({ theme }) => theme.colors.container.background.base};
+			background: ${({theme}) => theme.colors.container.background.base};
 		}
 	}
 
@@ -148,30 +148,30 @@ export const ReactDatesCssOverrides = createGlobalStyle`
 		}
 
 		&__default {
-			color: ${({ theme }) => theme.colors.text.body};
+			color: ${({theme}) => theme.colors.text.body};
 		}
 		&__default,
 		&__default:hover {
 			border: none;
-			color: ${({ theme }) => theme.colors.text.body};
+			color: ${({theme}) => theme.colors.text.body};
 		}
 	}
 
     .CalendarMonth {
-		${({ theme }) => theme.typography[200]}
-		background: ${({ theme }) => theme.colors.container.background.base};
+		${({theme}) => theme.typography[200]}
+		background: ${({theme}) => theme.colors.container.background.base};
 
  		/* spacing between visible months and months off canvas */
 		padding: 0 15px;
 
 		&_caption {
-			${({ theme }) => theme.typography[200]}
-			color: ${({ theme }) => theme.colors.text.headline};
+			${({theme}) => theme.typography[200]}
+			color: ${({theme}) => theme.colors.text.headline};
 			padding-top: 0;
-			background: ${({ theme }) => theme.colors.container.background.base};
+			background: ${({theme}) => theme.colors.container.background.base};
 
 			strong {
-				font-weight: ${({ theme }) => theme.fontWeights.semibold};
+				font-weight: ${({theme}) => theme.fontWeights.semibold};
 			}
 
 		}
@@ -188,19 +188,19 @@ export const ReactDatesCssOverrides = createGlobalStyle`
 	}
 
 	.CalendarMonthGrid {
-		background: ${({ theme }) => theme.colors.container.background.base};
+		background: ${({theme}) => theme.colors.container.background.base};
 	}
 
 	/* Left and Right Arrow Buttons to navigate months */
 	.DayPickerNavigation_button__horizontal {
-		color: ${({ theme }) => theme.colors.button.pill.text.base};
+		color: ${({theme}) => theme.colors.button.pill.text.base};
 		top: -4px;
 		padding: 7px 8px;
 		position: absolute;
 		line-height: 0.78;
 		border-radius: 9999px;
 		border: none;
-		background: ${({ theme }) => theme.colors.button.pill.background.base};
+		background: ${({theme}) => theme.colors.button.pill.background.base};
 
 		&:nth-child(1) {
 			left: 22px;
@@ -210,7 +210,7 @@ export const ReactDatesCssOverrides = createGlobalStyle`
 		}
 
 		&:hover {
-			background: ${({ theme }) => theme.colors.button.pill.background.hover};
+			background: ${({theme}) => theme.colors.button.pill.background.hover};
 		}
 	}
 `;

package/__flow__/Drawer/SlideTransition.js

@@ -1,17 +1,17 @@
 // @flow strict-local
-import * as React from "react";
-import { useTransition } from "react-spring";
-import { MOTION_DURATION_MEDIUM } from "@sproutsocial/seeds-motion/dist/seeds-motion-unitless";
+import * as React from 'react';
+import {useTransition} from 'react-spring';
+import {MOTION_DURATION_MEDIUM} from '@sproutsocial/seeds-motion/dist/seeds-motion-unitless';
 
 type TypeProps = {
   children: ({
-    style: { [string]: string },
+    style: {[string]: string},
     key: number,
     isVisible: boolean,
   }) => React.Node,
   isVisible: boolean,
   width: number,
-  direction: "left" | "right",
+  direction: 'left' | 'right',
 };
 
 export const SlideTransition = ({
@@ -21,21 +21,21 @@ export const SlideTransition = ({
   direction,
   ...rest
 }: TypeProps) => {
-  const offset = width * (direction === "left" ? -1 : 1);
+  const offset = width * (direction === 'left' ? -1 : 1);
   const transitions = useTransition(isVisible, null, {
     from: {
       transform: `translateX(${offset}px)`,
     },
     enter: {
-      transform: "translateX(0)",
+      transform: 'translateX(0)',
     },
     leave: {
       transform: `translateX(${offset}px)`,
     },
-    config: { duration: MOTION_DURATION_MEDIUM * 1000 },
+    config: {duration: MOTION_DURATION_MEDIUM * 1000},
   });
 
-  return transitions.map(({ key, item, props }) =>
-    children({ key, isVisible: item, style: props })
+  return transitions.map(({key, item, props}) =>
+    children({key, isVisible: item, style: props})
   );
 };

package/__flow__/Drawer/index.js

@@ -1,15 +1,15 @@
 // @flow
-import * as React from "react";
-import { useContext, useEffect, useRef } from "react";
-import FocusLock from "react-focus-lock";
-import { SlideTransition } from "./SlideTransition";
-import Container, { Content } from "./styles";
-import { animated } from "react-spring";
-import Portal from "../Portal";
-import Box from "../Box";
-import Text from "../Text";
-import Button from "../Button";
-import Icon from "../Icon";
+import * as React from 'react';
+import {useContext, useEffect, useRef} from 'react';
+import FocusLock from 'react-focus-lock';
+import {SlideTransition} from './SlideTransition';
+import Container, {Content} from './styles';
+import {animated} from 'react-spring';
+import Portal from '../Portal';
+import Box from '../Box';
+import Text from '../Text';
+import Button from '../Button';
+import Icon from '../Icon';
 
 // If ever we needed to make drawer width configurable, move this to a default prop
 const DRAWER_WIDTH = 600;
@@ -40,10 +40,10 @@ type TypeDrawerCloseButtonProps = {
 };
 
 const DrawerCloseButton = (props: TypeDrawerCloseButtonProps) => {
-  const { onClose, closeButtonLabel } = useContext(DrawerContext);
+  const {onClose, closeButtonLabel} = useContext(DrawerContext);
 
   if (props.render) {
-    return props.render({ onClose, closeButtonLabel });
+    return props.render({onClose, closeButtonLabel});
   }
 
   return (
@@ -59,7 +59,7 @@ const DrawerCloseButton = (props: TypeDrawerCloseButtonProps) => {
   );
 };
 
-type TypeDrawerHeaderProps = {
+export type TypeDrawerHeaderProps = {
   title?: string,
   children?: React.Node,
   /** An optional function that receives the context of the parent drawer as an argument. Can be used to customize the appearance of the header. */
@@ -67,7 +67,7 @@ type TypeDrawerHeaderProps = {
 };
 
 const DrawerHeader = ({
-  title = "",
+  title = '',
   children,
   render,
   ...rest
@@ -106,7 +106,7 @@ const DrawerHeader = ({
   );
 };
 
-const DrawerContent = ({ children, ...rest }: { children?: React.Node }) => (
+const DrawerContent = ({children, ...rest}: {children?: React.Node}) => (
   // $FlowIssue - upgrade v0.112.0
   <Content height="100%" p={450} color="text.body" {...rest}>
     {children}
@@ -118,7 +118,7 @@ export type TypeDrawerProps = {
   /** Label for the close button. Usually this should be "Close" */
   closeButtonLabel: string,
   /** Whether the drawer slides in from the left or right side of the screen */
-  direction?: "left" | "right",
+  direction?: 'left' | 'right',
   /** In some cases, you may not want the user to be able to click outside of the drawer to close it. You can disable that with this prop. */
   disableCloseOnClickOutside?: boolean,
   id: string,
@@ -151,7 +151,7 @@ const Drawer = ({
     }
 
     const onEsc = (event: KeyboardEvent): void => {
-      if (event.key === "Escape") {
+      if (event.key === 'Escape') {
         onClose();
       }
     };
@@ -165,17 +165,17 @@ const Drawer = ({
       }
     };
 
-    documentBody && documentBody.addEventListener("keydown", onEsc, false);
+    documentBody && documentBody.addEventListener('keydown', onEsc, false);
     if (closeTargets) {
       closeTargets.forEach(
         (targetElement) =>
           targetElement &&
-          targetElement.addEventListener("click", bodyClick, false)
+          targetElement.addEventListener('click', bodyClick, false)
       );
     } else {
       documentBody.firstElementChild &&
         documentBody.firstElementChild.addEventListener(
-          "click",
+          'click',
           bodyClick,
           false
         );
@@ -186,12 +186,12 @@ const Drawer = ({
         closeTargets.forEach(
           (targetElement) =>
             targetElement &&
-            targetElement.removeEventListener("click", bodyClick, false)
+            targetElement.removeEventListener('click', bodyClick, false)
         );
       } else {
         documentBody.firstElementChild &&
           documentBody.firstElementChild.removeEventListener(
-            "click",
+            'click',
             bodyClick,
             false
           );
@@ -219,7 +219,7 @@ const Drawer = ({
 const DrawerContainer = ({
   children,
   closeButtonLabel,
-  direction = "right",
+  direction = 'right',
   disableCloseOnClickOutside = false,
   id,
   isOpen,
@@ -242,7 +242,7 @@ const DrawerContainer = ({
           direction={direction}
           isVisible={isOpen}
         >
-          {({ isVisible, style, key }) =>
+          {({isVisible, style, key}) =>
             isVisible && (
               <Drawer
                 key={key}
@@ -257,7 +257,7 @@ const DrawerContainer = ({
                 onClose={onClose}
                 zIndex={zIndex}
                 closeTargets={closeTargets}
-                data-qa-drawer={id || ""}
+                data-qa-drawer={id || ''}
                 data-qa-drawer-isopen={isOpen === true}
                 // $FlowIssue - upgrade v0.112.0
                 {...rest}
@@ -276,8 +276,8 @@ DrawerContainer.Header = DrawerHeader;
 DrawerContainer.Content = DrawerContent;
 DrawerContainer.CloseButton = DrawerCloseButton;
 
-DrawerContainer.Header.displayName = "Drawer.Header";
-DrawerContainer.Content.displayName = "Drawer.Content";
-DrawerContainer.CloseButton.displayName = "Drawer.CloseButton";
+DrawerContainer.Header.displayName = 'Drawer.Header';
+DrawerContainer.Content.displayName = 'Drawer.Content';
+DrawerContainer.CloseButton.displayName = 'Drawer.CloseButton';
 
 export default DrawerContainer;