@sproutsocial/racine 12.20.0 → 12.21.1

package/__flow__/PartnerLogo/styles.js

@@ -1,15 +1,15 @@
 //@flow
-import styled, { css, type StyledComponent } from "styled-components";
-import { COMMON, FLEXBOX } from "../utils/system-props";
-import { verticalAlign } from "styled-system";
-import type { TypeTheme } from "../types/theme.flow";
+import styled, {css, type StyledComponent} from 'styled-components';
+import {COMMON, FLEXBOX} from '../utils/system-props';
+import {verticalAlign} from 'styled-system';
+import type {TypeTheme} from '../types/theme.flow';
 
 const sizes = {
-  mini: "12px",
-  small: "16px",
-  medium: "24px",
-  large: "32px",
-  jumbo: "64px",
+  mini: '12px',
+  small: '16px',
+  medium: '24px',
+  large: '32px',
+  jumbo: '64px',
 };
 
 const stylesForSize = (height, width, logoSize) => css`
@@ -18,12 +18,12 @@ const stylesForSize = (height, width, logoSize) => css`
   &,
   .logo-svg {
     height: ${logoSize ? logoSize : height};
-    width: ${logoSize ? logoSize : ""};
+    width: ${logoSize ? logoSize : ''};
   }
 `;
 
-const Container: StyledComponent<{ ... }, TypeTheme, *> = styled.span.attrs({
-  className: "logo",
+const Container: StyledComponent<{...}, TypeTheme, *> = styled.span.attrs({
+  className: 'logo',
 })`
   display: inline-block;
   color: inherit;

package/__flow__/Popout/index.js

@@ -1,49 +1,49 @@
 // @flow
-import * as React from "react";
-import { useState, useEffect, useRef, useCallback, useMemo } from "react";
-import { useTransition, animated } from "react-spring";
-
-import { MOTION_DURATION_FAST } from "@sproutsocial/seeds-motion/dist/seeds-motion-unitless";
-import { TargetWrapper } from "./styles";
-import Portal from "../Portal";
-import Box from "../Box";
-import { Popper, type PopperProps } from "react-popper";
-import { useMutationObserver } from "../utils/hooks";
-import FocusLock from "react-focus-lock";
+import * as React from 'react';
+import {useState, useEffect, useRef, useCallback, useMemo} from 'react';
+import {useTransition, animated} from 'react-spring';
+
+import {MOTION_DURATION_FAST} from '@sproutsocial/seeds-motion/dist/seeds-motion-unitless';
+import {TargetWrapper} from './styles';
+import Portal from '../Portal';
+import Box from '../Box';
+import {Popper, type PopperProps} from 'react-popper';
+import {useMutationObserver} from '../utils/hooks';
+import FocusLock from 'react-focus-lock';
 
 export const placements = {
-  auto: "auto",
-
-  top: "top",
-  right: "right",
-  bottom: "bottom",
-  left: "left",
-
-  "top-start": "top-start",
-  "right-start": "right-start",
-  "bottom-start": "bottom-start",
-  "left-start": "left-start",
-
-  "top-end": "top-end",
-  "right-end": "right-end",
-  "bottom-end": "bottom-end",
-  "left-end": "left-end",
+  auto: 'auto',
+
+  top: 'top',
+  right: 'right',
+  bottom: 'bottom',
+  left: 'left',
+
+  'top-start': 'top-start',
+  'right-start': 'right-start',
+  'bottom-start': 'bottom-start',
+  'left-start': 'left-start',
+
+  'top-end': 'top-end',
+  'right-end': 'right-end',
+  'bottom-end': 'bottom-end',
+  'left-end': 'left-end',
 };
 // Seeds docs can't parse $Keys<typeof placements> yet
 export type EnumPlacements =
-  | "auto"
-  | "top"
-  | "right"
-  | "bottom"
-  | "left"
-  | "top-start"
-  | "right-start"
-  | "bottom-start"
-  | "left-start"
-  | "top-end"
-  | "right-end"
-  | "bottom-end"
-  | "left-end";
+  | 'auto'
+  | 'top'
+  | 'right'
+  | 'bottom'
+  | 'left'
+  | 'top-start'
+  | 'right-start'
+  | 'bottom-start'
+  | 'left-start'
+  | 'top-end'
+  | 'right-end'
+  | 'bottom-end'
+  | 'left-end';
 
 export type TypeFocusLockProps = {|
   disabled?: boolean,
@@ -54,7 +54,7 @@ export type TypeFocusLockProps = {|
       |},
   persistentFocus?: boolean,
   autoFocus?: boolean,
-  noFocusGuards?: boolean | "tail",
+  noFocusGuards?: boolean | 'tail',
   group?: string,
   className?: string,
   onActivation?: (node: HTMLElement) => void,
@@ -83,7 +83,7 @@ export type TypeProps = {
    */
   content:
     | ?React.Element<any>
-    | ?((opts: { hide: () => void }) => React.Element<any>),
+    | ?((opts: {hide: () => void}) => React.Element<any>),
 
   /**
    * The content that the popout should be attached to
@@ -114,7 +114,7 @@ export type TypeProps = {
    *  If nothing within your popout's content is focusable, this prop will do nothing.
    */
   focusOnContent?: boolean,
-  qa?: { [string]: string },
+  qa?: {[string]: string},
   zIndex?: number,
 
   /**
@@ -151,10 +151,10 @@ const doesRefContainEventTarget = (ref, event) => {
 
 // Transition definitions for fading in and out
 const transitionConfig = {
-  from: { opacity: 0 },
-  enter: { opacity: 1 },
-  leave: { opacity: 0 },
-  config: { duration: MOTION_DURATION_FAST * 1000 },
+  from: {opacity: 0},
+  enter: {opacity: 1},
+  leave: {opacity: 0},
+  config: {duration: MOTION_DURATION_FAST * 1000},
 };
 
 export default function Popout({
@@ -162,7 +162,7 @@ export default function Popout({
   setIsOpen,
   content,
   children,
-  placement = "auto",
+  placement = 'auto',
   fullWidth = false,
   zIndex = 7,
   focusOnContent = true,
@@ -177,7 +177,7 @@ export default function Popout({
 }: TypeProps) {
   const PopoutComponentWrapper = appendToBody ? Portal : React.Fragment;
   const [isInternalShown, setIsInternalShown] = useState<boolean>(false);
-  const isControlled = typeof isOpen === "boolean";
+  const isControlled = typeof isOpen === 'boolean';
   const isShown = isControlled ? isOpen : isInternalShown;
   const setIsShown = useMemo(
     () =>
@@ -232,7 +232,7 @@ export default function Popout({
       // Callback for allowing user to close by keying "esc"
       const onEsc = (e: KeyboardEvent): void => {
         // older browsers use "Esc"
-        if (["Escape", "Esc"].includes(e.key)) {
+        if (['Escape', 'Esc'].includes(e.key)) {
           // stop propagation to avoid interacting with other components when popout is shown
           // ie if we have a popout shown in a modal and hit esc, we don't want to close both the popout and modal
           e.stopPropagation();
@@ -240,12 +240,12 @@ export default function Popout({
         }
       };
 
-      documentBody.addEventListener("click", bodyClick, false);
-      documentBody.addEventListener("keydown", onEsc, false);
+      documentBody.addEventListener('click', bodyClick, false);
+      documentBody.addEventListener('keydown', onEsc, false);
 
       return () => {
-        documentBody.removeEventListener("click", bodyClick, false);
-        documentBody.removeEventListener("keydown", onEsc, false);
+        documentBody.removeEventListener('click', bodyClick, false);
+        documentBody.removeEventListener('keydown', onEsc, false);
       };
     }
   }, [isShown, setIsShown]);
@@ -276,8 +276,8 @@ export default function Popout({
   // WAI-Aria properties for the popout trigger
   const ariaProps = useMemo(
     () => ({
-      "aria-expanded": isShown,
-      "aria-haspopup": true,
+      'aria-expanded': isShown,
+      'aria-haspopup': true,
     }),
     [isShown]
   );
@@ -301,7 +301,7 @@ export default function Popout({
 
   return (
     <React.Fragment>
-      {typeof children === "function" ? (
+      {typeof children === 'function' ? (
         children({
           ref: childrenRef,
           toggle,
@@ -313,21 +313,21 @@ export default function Popout({
         <TargetWrapper {...qa} {...rest} ref={childrenRef}>
           {React.cloneElement(children, {
             ...ariaProps,
-            ...(!isControlled ? { onClick: toggle } : undefined),
+            ...(!isControlled ? {onClick: toggle} : undefined),
           })}
         </TargetWrapper>
       )}
       {shouldRenderPopout &&
         !isInvalidContent &&
         transitions.map(
-          ({ item, key, props }) =>
+          ({item, key, props}) =>
             item && (
               <PopoutComponentWrapper key={key}>
                 <Popper
                   referenceElement={targetRef.current}
                   placement={placement}
                   modifiers={{
-                    preventOverflow: { boundariesElement: "viewport" },
+                    preventOverflow: {boundariesElement: 'viewport'},
                   }}
                   {...popperProps}
                 >
@@ -354,10 +354,10 @@ export default function Popout({
                           width:
                             fullWidth && targetRef.current
                               ? targetRef.current.offsetWidth
-                              : "initial",
+                              : 'initial',
                         }}
                         data-placement={placement}
-                        data-qa-popout={""}
+                        data-qa-popout={''}
                         data-qa-popout-isopen={isOpen === true}
                         // $FlowIssue - upgrade v0.112.0
                         {...rest}
@@ -370,9 +370,8 @@ export default function Popout({
                               disabled={!focusOnContent}
                               {...restFocusLockProps}
                             >
-                              {typeof content === "function" &&
-                                content({ hide })}
-                              {typeof content !== "function" && content}
+                              {typeof content === 'function' && content({hide})}
+                              {typeof content !== 'function' && content}
                             </FocusLock>
                           </animated.div>
                         )}
@@ -388,7 +387,7 @@ export default function Popout({
 }
 
 type TypePopoutContentProps = React.ElementConfig<typeof Box>;
-const PopoutContent = ({ children, ...rest }: TypePopoutContentProps) => (
+const PopoutContent = ({children, ...rest}: TypePopoutContentProps) => (
   <Box
     bg="container.background.base"
     color="text.body"
@@ -405,4 +404,4 @@ const PopoutContent = ({ children, ...rest }: TypePopoutContentProps) => (
 );
 
 Popout.Content = PopoutContent;
-Popout.Content.displayName = "Popout.Content";
+Popout.Content.displayName = 'Popout.Content';