@sproutsocial/racine 12.24.0 → 13.1.1

package/__flow__/Popout/index.js

@@ -1,162 +1,64 @@
 // @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 { useState, useEffect, useRef, useCallback, useMemo } from 'react';
+import { useTransition, animated } from 'react-spring';
 import FocusLock from 'react-focus-lock';
-
+import { Popper } from 'react-popper';
+import { MOTION_DURATION_FAST } from '@sproutsocial/seeds-motion/dist/seeds-motion-unitless';
+import { useMutationObserver } from "../utils/hooks";
+import Portal from "../Portal";
+import Box from "../Box";
+import { TargetWrapper } from "./styles";
+import type { EnumPlacements as EnumPlacements2, TypeFocusLockProps as TypeFocusLockProps2, TypePopoutProps } from "./index.flow";
+
+/**
+ * @deprecated Use EnumPlacements from root instead
+ */
+export type EnumPlacements = EnumPlacements2;
+
+/**
+ * @deprecated Use TypeFocusLockProps from root instead
+ */
+export type TypeFocusLockProps = TypeFocusLockProps2;
+
+/**
+ * @deprecated Use TypePopoutProps from root instead
+ */
+export type TypeProps = TypePopoutProps;
 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',
-};
-// 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';
-
-export type TypeFocusLockProps = {|
-  disabled?: boolean,
-  returnFocus?:
-    | boolean
-    | {|
-        preventScroll?: boolean,
-      |},
-  persistentFocus?: boolean,
-  autoFocus?: boolean,
-  noFocusGuards?: boolean | 'tail',
-  group?: string,
-  className?: string,
-  onActivation?: (node: HTMLElement) => void,
-  onDeactivation?: (node: HTMLElement) => void,
-  as?: string | React.Element<any>,
-  lockProps?: any,
-  ref?: any,
-  whiteList?: (activeElement: HTMLElement) => boolean,
-  shards?: Array<any>,
-  children?: React.Node,
-|};
-
-export type TypeProps = {
-  /**
-   * Is the popout open? This prop is optional. By using it, you will lose some automatic handling of the logic for opening and closing the popout.
-   */
-  isOpen?: boolean,
-
-  /**
-   * If you use the isOpen prop you will need to pass a handler to change the state of the popout
-   */
-  setIsOpen?: (isOpen: boolean, event?: MouseEvent | KeyboardEvent) => void,
-
-  /**
-   * The content to be shown in the popout. If there is no content, just the children are rendered
-   */
-  content:
-    | ?React.Element<any>
-    | ?((opts: {hide: () => void}) => React.Element<any>),
-
-  /**
-   * The content that the popout should be attached to
-   */
-  children:
-    | React.Element<any>
-    | ((opts: {
-        ref: (React.ElementRef<any> | HTMLElement) => void,
-        toggle: () => void,
-        show: () => void,
-        hide: () => void,
-        ariaProps: Object,
-      }) => React.Node),
-
-  /** How the popped-out content should be placed, in relationship to the children */
-  placement?: EnumPlacements,
-
-  /**
-   * Should the popped-out content inherit its width from the children?
-   * This is useful for typeaheads and other places where a popout needs to match the width of a given element.
-   */
-  fullWidth?: boolean,
-
-  /**
-   *  When the popout has opened, should we focus on its content?
-   *  Focus will be brought inside by looking for elements with [autofocus] first, [tabindex] second and buttons/links/other natively-focusable elements last.
-   *  Upon closing the popout, focus will be returned to the popout's target.
-   *  If nothing within your popout's content is focusable, this prop will do nothing.
-   */
-  focusOnContent?: boolean,
-  qa?: {[string]: string},
-  zIndex?: number,
-
-  /**
-   * Override react-popper per the API documentation here: https://github.com/FezVrasta/react-popper#api-documentation
-   */
-  popperProps?: $Shape<PopperProps>,
-  onClose?: () => void,
-  onOpen?: () => void,
-
-  /**
-   * And optional callback to receive the scheduleUpdate function.
-   * Use the function to recalculate the popout position in relation to the contents.
-   */
-  scheduleUpdateRef?: (() => void) => void,
-
-  /**
-   * Mount the popout at the bottom of the DOM (using React.Portal) instead of inside the current DOM tree
-   */
-  appendToBody?: boolean,
-
-  /**
-   * Override `FocusLock` props, see the API documentation for more details: https://github.com/theKashey/react-focus-lock#api
-   */
-  focusLockProps?: TypeFocusLockProps,
+  'left-end': 'left-end'
 };
-
 const doesRefContainEventTarget = (ref, event) => {
-  return (
-    ref.current &&
-    event.target instanceof Node &&
-    ref.current.contains(event.target)
-  );
+  return ref.current && event.target instanceof Node && ref.current.contains(event.target);
 };
 
 // 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({
   isOpen,
   setIsOpen,
@@ -174,32 +76,22 @@ export default function Popout({
   appendToBody = true,
   focusLockProps = {},
   ...rest
-}: TypeProps) {
+}: TypePopoutProps) {
   const PopoutComponentWrapper = appendToBody ? Portal : React.Fragment;
   const [isInternalShown, setIsInternalShown] = useState<boolean>(false);
   const isControlled = typeof isOpen === 'boolean';
   const isShown = isControlled ? isOpen : isInternalShown;
-  const setIsShown = useMemo(
-    () =>
-      isControlled && setIsOpen
-        ? setIsOpen
-        : (nextIsShown, e) => setIsInternalShown(nextIsShown),
-    [isControlled, setIsOpen]
-  );
+  const setIsShown = useMemo(() => isControlled && setIsOpen ? setIsOpen : (nextIsShown, e) => setIsInternalShown(nextIsShown), [isControlled, setIsOpen]);
   const targetRef = useRef();
   const popoutRef = useRef();
   const isFirstRender = useRef(true);
   // This callback will automatically trigger a recalculation of the popout position if the content is changed
   const scheduleUpdateCallback = useRef(() => {});
-  useMutationObserver(
-    popoutRef.current,
-    {
-      childList: true,
-      characterData: true,
-      subtree: true,
-    },
-    scheduleUpdateCallback.current
-  );
+  useMutationObserver(popoutRef.current, {
+    childList: true,
+    characterData: true,
+    subtree: true
+  }, scheduleUpdateCallback.current);
   const {
     autoFocus = true,
     returnFocus = true,
@@ -212,20 +104,15 @@ export default function Popout({
   const show = useCallback(() => setIsShown(true), [setIsShown]);
   const hide = useCallback(() => setIsShown(false), [setIsShown]);
   const toggle = useCallback(() => setIsShown(!isShown), [isShown, setIsShown]);
-
   useEffect(() => {
     const documentBody = document.body;
     if (isShown && documentBody) {
       // Callback passed to a click handler attached to document.body,
       // allowing user to close the popout by clicking outside
       const bodyClick = (e: MouseEvent): void => {
-        if (
-          doesRefContainEventTarget(targetRef, e) ||
-          doesRefContainEventTarget(popoutRef, e)
-        ) {
+        if (doesRefContainEventTarget(targetRef, e) || doesRefContainEventTarget(popoutRef, e)) {
           return;
         }
-
         setIsShown(false, e);
       };
 
@@ -239,10 +126,8 @@ export default function Popout({
           setIsShown(false, e);
         }
       };
-
       documentBody.addEventListener('click', bodyClick, false);
       documentBody.addEventListener('keydown', onEsc, false);
-
       return () => {
         documentBody.removeEventListener('click', bodyClick, false);
         documentBody.removeEventListener('keydown', onEsc, false);
@@ -260,148 +145,103 @@ export default function Popout({
     if (!onOpen && !onClose) {
       return;
     }
-
     if (isShown && onOpen) {
       onOpen();
     }
-
     if (!isShown && onClose) {
       onClose();
     }
     // eslint-disable-next-line
   }, [isShown]);
-
   const transitions = useTransition(isShown, null, transitionConfig);
 
   // WAI-Aria properties for the popout trigger
-  const ariaProps = useMemo(
-    () => ({
-      'aria-expanded': isShown,
-      'aria-haspopup': true,
-    }),
-    [isShown]
-  );
+  const ariaProps = useMemo(() => ({
+    'aria-expanded': isShown,
+    'aria-haspopup': true
+  }), [isShown]);
 
   // In cases where a controlled popout is used (e.g. props.isOpen is true), we need
   // to wait for the targetRef to receive a value before rendering the popout. Otherwise,
   // the Popout component renders, but doesn't know how to position itself due the
   // `refereElement` property being undefined.
   const [shouldRenderPopout, setShouldRenderPopout] = useState<boolean>(
-    // Only trigger this shouldRenderPopout logic when using a controlled component.
-    // The reason for that is because controlled components may render the popout
-    // immediately before the targetRef has a value set to it.
-    !isControlled
-  );
-  const childrenRef = (el) => {
+  // Only trigger this shouldRenderPopout logic when using a controlled component.
+  // The reason for that is because controlled components may render the popout
+  // immediately before the targetRef has a value set to it.
+  !isControlled);
+  const childrenRef = el => {
     targetRef.current = el;
     if (targetRef.current) {
       setShouldRenderPopout(true);
     }
   };
-
-  return (
-    <React.Fragment>
-      {typeof children === 'function' ? (
-        children({
-          ref: childrenRef,
-          toggle,
-          show,
-          hide,
-          ariaProps,
-        })
-      ) : (
-        <TargetWrapper {...qa} {...rest} ref={childrenRef}>
+  return <React.Fragment>
+      {typeof children === 'function' ? children({
+      ref: childrenRef,
+      toggle,
+      show,
+      hide,
+      ariaProps
+    }) : <TargetWrapper {...qa} {...rest} ref={childrenRef}>
           {React.cloneElement(children, {
-            ...ariaProps,
-            ...(!isControlled ? {onClick: toggle} : undefined),
-          })}
-        </TargetWrapper>
-      )}
-      {shouldRenderPopout &&
-        !isInvalidContent &&
-        transitions.map(
-          ({item, key, props}) =>
-            item && (
-              <PopoutComponentWrapper key={key}>
-                <Popper
-                  referenceElement={targetRef.current}
-                  placement={placement}
-                  modifiers={{
-                    preventOverflow: {boundariesElement: 'viewport'},
-                  }}
-                  {...popperProps}
-                >
+        ...ariaProps,
+        ...(!isControlled ? {
+          onClick: toggle
+        } : undefined)
+      })}
+        </TargetWrapper>}
+      {shouldRenderPopout && !isInvalidContent && transitions.map(({
+      item,
+      key,
+      props
+    }) => item && <PopoutComponentWrapper key={key}>
+                <Popper referenceElement={targetRef.current} placement={placement} modifiers={{
+        preventOverflow: {
+          boundariesElement: 'viewport'
+        }
+      }} {...popperProps}>
                   {({
-                    ref,
-                    style,
-                    placement,
-                    outOfBoundaries,
-                    scheduleUpdate,
-                  }) => {
-                    const interceptRef = (el) => {
-                      popoutRef.current = el;
-                      ref(el);
-                    };
-                    scheduleUpdateCallback.current = scheduleUpdate;
-                    scheduleUpdateRef(scheduleUpdate);
-
-                    return (
-                      <div
-                        ref={interceptRef}
-                        style={{
-                          ...style,
-                          zIndex,
-                          width:
-                            fullWidth && targetRef.current
-                              ? targetRef.current.offsetWidth
-                              : 'initial',
-                        }}
-                        data-placement={placement}
-                        data-qa-popout=""
-                        data-qa-popout-isopen={isOpen === true}
-                        // $FlowIssue - upgrade v0.112.0
-                        {...rest}
-                      >
-                        {item && !outOfBoundaries && (
-                          <animated.div style={props}>
-                            <FocusLock
-                              autoFocus={autoFocus}
-                              returnFocus={returnFocus}
-                              disabled={!focusOnContent}
-                              {...restFocusLockProps}
-                            >
-                              {typeof content === 'function' && content({hide})}
+          ref,
+          style,
+          placement,
+          outOfBoundaries,
+          scheduleUpdate
+        }) => {
+          const interceptRef = el => {
+            popoutRef.current = el;
+            ref(el);
+          };
+          scheduleUpdateCallback.current = scheduleUpdate;
+          scheduleUpdateRef(scheduleUpdate);
+          return (
+            // $FlowIssue - upgrade v0.112.0
+            <div ref={interceptRef} style={{
+              ...style,
+              zIndex,
+              width: fullWidth && targetRef.current ? targetRef.current.offsetWidth : 'initial'
+            }} data-placement={placement} data-qa-popout="" data-qa-popout-isopen={isOpen === true} {...rest}>
+                        {item && !outOfBoundaries && <animated.div style={props}>
+                            <FocusLock autoFocus={autoFocus} returnFocus={returnFocus} disabled={!focusOnContent} {...restFocusLockProps}>
+                              {typeof content === 'function' && content({
+                    hide
+                  })}
                               {typeof content !== 'function' && content}
                             </FocusLock>
-                          </animated.div>
-                        )}
+                          </animated.div>}
                       </div>
-                    );
-                  }}
+          );
+        }}
                 </Popper>
-              </PopoutComponentWrapper>
-            )
-        )}
-    </React.Fragment>
-  );
+              </PopoutComponentWrapper>)}
+    </React.Fragment>;
 }
-
 type TypePopoutContentProps = React.ElementConfig<typeof Box>;
-const PopoutContent = ({children, ...rest}: TypePopoutContentProps) => (
-  <Box
-    bg="container.background.base"
-    color="text.body"
-    border={500}
-    borderColor="container.border.base"
-    borderRadius="outer"
-    boxShadow="medium"
-    p={400}
-    m={300}
-    {...rest}
-  >
+const PopoutContent = ({
+  children,
+  ...rest
+}: TypePopoutContentProps) => <Box bg="container.background.base" color="text.body" border={500} borderColor="container.border.base" borderRadius="outer" boxShadow="medium" p={400} m={300} {...rest}>
     {children}
-  </Box>
-);
-
+  </Box>;
 Popout.Content = PopoutContent;
-Popout.Content.displayName = 'Popout.Content';
+Popout.Content.displayName = 'Popout.Content';

package/__flow__/Popout/styles.js

@@ -1,11 +1,9 @@
 //@flow
-import styled, {type StyledComponent} from 'styled-components';
-import {COMMON, LAYOUT} from '../utils/system-props';
-
-import type {TypeTheme} from '../types/theme.flow';
-
+import styled, { type StyledComponent } from 'styled-components';
+import { COMMON, LAYOUT } from "../utils/system-props";
+import type { TypeTheme } from "../types/theme.flow";
 export const TargetWrapper: StyledComponent<{...}, TypeTheme, *> = styled.div`
   display: inline-block;
   ${COMMON}
   ${LAYOUT}
-`;
+`;

package/__flow__/Portal/index.flow.js

@@ -0,0 +1,10 @@
+// @flow
+import * as React from 'react';
+export type TypePortalProps = {
+  as: string,
+  container?: HTMLElement,
+  children: React.Node,
+  el?: HTMLElement,
+  id: string,
+  ...
+};

package/__flow__/Portal/index.js

@@ -1,29 +1,22 @@
 // @flow strict-local
 import * as React from 'react';
-import {createPortal} from 'react-dom';
-import {canUseDOM} from '../utils';
-
-type TypeProps = {
-  as: string,
-  container?: HTMLElement,
-  children: React.Node,
-  el?: HTMLElement,
-  id: string,
-};
-
-export default class Portal extends React.Component<TypeProps> {
+import { createPortal } from 'react-dom';
+import { canUseDOM } from "../utils";
+import type { TypePortalProps } from "./index.flow";
+export default class Portal extends React.Component<TypePortalProps> {
   el: ?HTMLElement = null;
-
   static defaultProps = {
     as: 'div',
-    id: '',
+    id: ''
   };
-
-  constructor(props: TypeProps) {
+  constructor(props: TypePortalProps) {
     super(props);
-
     if (canUseDOM()) {
-      const {as, el, id} = props;
+      const {
+        as,
+        el,
+        id
+      } = props;
       if (el) {
         this.el = el;
       } else {
@@ -32,32 +25,32 @@ export default class Portal extends React.Component<TypeProps> {
       }
     }
   }
-
   componentDidMount() {
     if (canUseDOM() && this.el) {
-      const {container = document.body} = this.props;
+      const {
+        container = document.body
+      } = this.props;
       if (container) {
         // for flow
         container.appendChild(this.el);
       }
     }
   }
-
   componentWillUnmount() {
     if (canUseDOM() && this.el) {
-      const {container = document.body} = this.props;
+      const {
+        container = document.body
+      } = this.props;
       if (container) {
         // for flow
         container.removeChild(this.el);
       }
     }
   }
-
   render() {
     if (this.el) {
       return createPortal(this.props.children, this.el);
     }
-
     return this.props.children;
   }
-}
+}

package/__flow__/Radio/index.flow.js

@@ -0,0 +1,19 @@
+// @flow
+
+export type TypeRadioProps = {
+  /** ID of the form element, should match the "for" value of the associated label */
+  id: string,
+  name: string,
+  /** Label text to display next to the radio input */
+  label?: string,
+  /** Label used to describe the input if not used with an accompanying visual label */
+  ariaLabel?: string,
+  value?: string,
+  checked?: boolean,
+  disabled?: boolean,
+  qa?: Object,
+  onChange?: (e: SyntheticInputEvent<HTMLInputElement>) => void,
+  onFocus?: (e: SyntheticFocusEvent<HTMLInputElement>) => void,
+  onBlur?: (e: SyntheticFocusEvent<HTMLInputElement>) => void,
+  ...
+};