@sproutsocial/racine 12.24.0 → 13.1.1

package/__flow__/DatePicker/styles.js

@@ -1,9 +1,9 @@
 // @flow
-import styled, {createGlobalStyle, css} from 'styled-components';
+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 { disabled } from "../utils/mixins";
+import type { TypeTheme } from "../types/theme.flow";
+import Box from "../Box";
 
 /*
  * Partial list of modifiers given to renderDayContents by airbnb/react-dates. There may be more.
@@ -17,28 +17,14 @@ 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');
-const isHoveredAndInRange = (modifiers) =>
-  modifiers.has('hovered') && !modifiers.has('blocked-out-of-range');
-
+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');
+const isHoveredAndInRange = modifiers => 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')
-  ) {
+  if (modifiers.has('selected') || modifiers.has('selected-start') || modifiers.has('first-day-of-week') || day.isSame(moment(day).startOf('month'), 'day')) {
     return true;
   }
   return false;
@@ -47,57 +33,50 @@ const shouldHaveRightPill = (modifiers, day) => {
   if (!isSelected(modifiers)) {
     return false;
   }
-  if (
-    modifiers.has('selected') ||
-    modifiers.has('selected-end') ||
-    modifiers.has('last-day-of-week') ||
-    day.isSame(moment(day).endOf('month'), 'day')
-  ) {
+  if (modifiers.has('selected') || modifiers.has('selected-end') || modifiers.has('last-day-of-week') || day.isSame(moment(day).endOf('month'), 'day')) {
     return true;
   }
   return false;
 };
-
 export const CalendarDay = styled<typeof Box, TypeTheme, *>(Box)`
-  ${({modifiers, day, theme}) => {
-    if (isSelected(modifiers)) {
-      return css`
+  ${({
+  modifiers,
+  day,
+  theme
+}) => {
+  if (isSelected(modifiers)) {
+    return css`
         background-color: ${theme.colors.container.background.selected};
         color: ${theme.colors.text.inverse};
         margin-left: ${shouldHaveLeftPill(modifiers, day) && theme.space[200]};
-        margin-right: ${shouldHaveRightPill(modifiers, day) &&
-        theme.space[200]};
-        border-top-left-radius: ${shouldHaveLeftPill(modifiers, day) &&
-        theme.radii.pill};
-        border-bottom-left-radius: ${shouldHaveLeftPill(modifiers, day) &&
-        theme.radii.pill};
-        border-top-right-radius: ${shouldHaveRightPill(modifiers, day) &&
-        theme.radii.pill};
-        border-bottom-right-radius: ${shouldHaveRightPill(modifiers, day) &&
-        theme.radii.pill};
+        margin-right: ${shouldHaveRightPill(modifiers, day) && theme.space[200]};
+        border-top-left-radius: ${shouldHaveLeftPill(modifiers, day) && theme.radii.pill};
+        border-bottom-left-radius: ${shouldHaveLeftPill(modifiers, day) && theme.radii.pill};
+        border-top-right-radius: ${shouldHaveRightPill(modifiers, day) && theme.radii.pill};
+        border-bottom-right-radius: ${shouldHaveRightPill(modifiers, day) && theme.radii.pill};
       `;
-    }
-
-    if (isHoveredAndInRange(modifiers)) {
-      return css`
+  }
+  if (isHoveredAndInRange(modifiers)) {
+    return css`
         margin: 0 ${theme.space[200]};
         border-radius: ${theme.radii.pill};
         border: 1px solid ${theme.colors.container.border.selected};
       `;
-    } else if (isOutOfRange(modifiers)) {
-      return css`
+  } else if (isOutOfRange(modifiers)) {
+    return css`
         color: ${theme.colors.text.subtext};
         ${disabled};
       `;
-    }
-  }};
+  }
+}};
 `;
-
 export const ReactDatesCssOverrides = createGlobalStyle`
 	.DayPicker {
 		box-sizing: content-box;
-		font-weight: ${({theme}) => theme.fontWeights.normal};
-		font-family: ${(props) => props.theme.fontFamily};
+		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 */
 		/* adding margin/padding will be more truer to our seeds system because the height */
@@ -108,8 +87,12 @@ 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 +111,23 @@ 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 +139,46 @@ 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 +195,25 @@ 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 +223,9 @@ 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,19 +1,20 @@
 // @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 { 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',
+  ...
 };
-
 export const SlideTransition = ({
   isVisible,
   children,
@@ -24,18 +25,25 @@ export const SlideTransition = ({
   const offset = width * (direction === 'left' ? -1 : 1);
   const transitions = useTransition(isVisible, null, {
     from: {
-      transform: `translateX(${offset}px)`,
+      transform: `translateX(${offset}px)`
     },
     enter: {
-      transform: 'translateX(0)',
+      transform: 'translateX(0)'
     },
     leave: {
-      transform: `translateX(${offset}px)`,
+      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.flow.js

@@ -0,0 +1,38 @@
+// @flow
+import * as React from 'react';
+export type TypeDrawerContext = $Shape<{
+  /** Callback for close button */
+  onClose: () => any,
+  /** aria-label for drawer close button */
+  closeButtonLabel: string,
+  ...
+}>;
+export type TypeDrawerCloseButtonProps = {
+  /** An optional function that receives the context of the parent drawer as an argument. Can be used to customize the on-close behavior. */
+  render?: (TypeDrawerContext) => React.Node,
+  children?: React.Node,
+  ...
+};
+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. */
+  render?: (TypeDrawerContext) => React.Node,
+  ...
+};
+export type TypeDrawerProps = {
+  children: React.Node,
+  /** 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',
+  /** 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,
+  isOpen: boolean,
+  offset?: number,
+  onClose: () => void,
+  zIndex?: number,
+  closeTargets?: Array<Element>,
+  ...
+};