@sproutsocial/racine 13.7.1 → 14.0.0

package/__flow__/OverflowList/index.js

@@ -1,75 +0,0 @@
-// @flow
-import React, { useCallback, useMemo } from 'react';
-import { AutoSizer, CellMeasurer, CellMeasurerCache } from 'react-virtualized';
-import Box from "../Box";
-import List from "./styles";
-import type { TypeVirtualizedListProps, TypeOverflowListProps } from "./index.flow";
-const VirtualizedList = ({
-  items,
-  ItemComponent,
-  getItemProps,
-  itemWrapperProps,
-  containerProps
-}: TypeVirtualizedListProps) => {
-  const cache = useMemo(() => new CellMeasurerCache({
-    defaultWidth: '100%',
-    defaultHeight: '20px',
-    fixedWidth: true
-  }), []);
-  const rowRenderer = useCallback(({
-    index,
-    key,
-    style,
-    parent
-  }) => {
-    return <CellMeasurer columnIndex={0} rowIndex={index} key={`CellMeasurer-${key}`} cache={cache} parent={parent}>
-          {({
-        measure,
-        registerChild
-      }) => <Box ref={registerChild} {...itemWrapperProps} style={style}>
-              <ItemComponent {...getItemProps({
-          key,
-          measure,
-          item: items[index]
-        })} />
-            </Box>}
-        </CellMeasurer>;
-  }, [items, getItemProps, cache, itemWrapperProps]);
-  return <AutoSizer>
-      {({
-      height,
-      width
-    }) => <List height={height} width={width} rowHeight={cache.rowHeight} rowRenderer={rowRenderer} rowCount={items.length} {...containerProps} />}
-    </AutoSizer>;
-};
-const ListItem = ({
-  children
-}) => <React.Fragment>{children}</React.Fragment>;
-const propGetter = ({
-  item,
-  key,
-  measure
-}) => {
-  return {
-    children: React.cloneElement(item),
-    key
-  };
-};
-const defaultProp = {};
-const OverflowList = ({
-  height,
-  width,
-  items,
-  children,
-  ItemComponent = ListItem,
-  getItemProps = propGetter,
-  WrapperComponent = Box,
-  itemWrapperProps = defaultProp,
-  containerProps = defaultProp
-}: TypeOverflowListProps) => {
-  const itemsArray = useMemo(() => items ? items : React.Children.toArray(children), [children, items]);
-  return <WrapperComponent height={height} width={width}>
-      <VirtualizedList items={itemsArray} ItemComponent={ItemComponent} getItemProps={getItemProps} itemWrapperProps={itemWrapperProps} containerProps={containerProps} />
-    </WrapperComponent>;
-};
-export default OverflowList;

package/__flow__/OverflowList/styles.js

@@ -1,19 +0,0 @@
-//@flow
-import * as React from 'react';
-import { List } from 'react-virtualized';
-import styled, { type StyledComponent } from 'styled-components';
-import { COMMON, BORDER, LAYOUT, POSITION, FLEXBOX, GRID } from "../utils/system-props";
-const Container: StyledComponent<*, *, *> = styled(props => <List {...props} />)`
-  box-sizing: border-box;
-  font-family: ${({
-  theme
-}) => theme.fontFamily};
-
-  ${COMMON}
-  ${BORDER}
-  ${LAYOUT}
-  ${POSITION}
-  ${FLEXBOX}
-  ${GRID}
-`;
-export default Container;

package/__flow__/PartnerLogo/index.js

@@ -1,51 +0,0 @@
-// @flow
-import React from 'react';
-import { useTheme } from 'styled-components';
-import logoViewBoxes from "../LogoViewBoxes";
-import Container from "./styles";
-import type { TypePartnerLogoProps } from "./index.flow";
-
-/**
- * @deprecated Use TypePartnerLogoProps from root instead
- */
-export type TypeProps = TypePartnerLogoProps;
-const PartnerLogo = ({
-  partnerName,
-  backgroundType,
-  logoType,
-  height,
-  width,
-  size,
-  ...rest
-}: TypePartnerLogoProps) => {
-  const {
-    mode
-  } = useTheme();
-  const whichLogo = type => {
-    const logo = logoType ? partnerName + '-' + logoType : partnerName;
-    if (type && type === 'dark') {
-      return `${logo}-dark`;
-    } else if (type && type === 'light') {
-      return logo;
-    } else if (mode === 'dark') {
-      return `${logo}-dark`;
-    } else {
-      return logo;
-    }
-  };
-  const logoViewBox = logoViewBoxes[whichLogo(backgroundType)];
-  const viewBoxCoordinates = logoViewBox?.split(' ') || [];
-  const defaultWidth = viewBoxCoordinates[2];
-  const defaultHeight = viewBoxCoordinates[3];
-  return (
-    // $FlowIssue - upgrade v0.112.0
-    <Container
-    //we add pixels here because view box coordinates are numbers
-    height={height ? height : defaultHeight + 'px'} width={width ? width : defaultWidth + 'px'} logoSize={size} {...rest}>
-      <svg className="logo-svg" viewBox={logoViewBox} focusable={false}>
-        <use xmlnsXlink="http://www.w3.org/1999/xlink" xlinkHref={`#sslogosvg-${whichLogo(backgroundType)}`} />
-      </svg>
-    </Container>
-  );
-};
-export default PartnerLogo;

package/__flow__/PartnerLogo/styles.js

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

package/__flow__/Popout/index.js

@@ -1,247 +0,0 @@
-// @flow
-import * as React from 'react';
-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'
-};
-const doesRefContainEventTarget = (ref, event) => {
-  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
-  }
-};
-export default function Popout({
-  isOpen,
-  setIsOpen,
-  content,
-  children,
-  placement = 'auto',
-  fullWidth = false,
-  zIndex = 7,
-  focusOnContent = true,
-  onOpen,
-  onClose,
-  qa = {},
-  popperProps,
-  scheduleUpdateRef = () => {},
-  appendToBody = true,
-  focusLockProps = {},
-  ...rest
-}: 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 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);
-  const {
-    autoFocus = true,
-    returnFocus = true,
-    ...restFocusLockProps
-  } = focusLockProps;
-  const isInvalidContent = content === null || content === undefined;
-
-  // Callbacks for showing, hiding, and toggling visibility of the popout
-  // (Not used when isOpen is passed explicitly)
-  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)) {
-          return;
-        }
-        setIsShown(false, e);
-      };
-
-      // Callback for allowing user to close by keying "esc"
-      const onEsc = (e: KeyboardEvent): void => {
-        // older browsers use "Esc"
-        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();
-          setIsShown(false, e);
-        }
-      };
-      documentBody.addEventListener('click', bodyClick, false);
-      documentBody.addEventListener('keydown', onEsc, false);
-      return () => {
-        documentBody.removeEventListener('click', bodyClick, false);
-        documentBody.removeEventListener('keydown', onEsc, false);
-      };
-    }
-  }, [isShown, setIsShown]);
-
-  // Manage onOpen and onClose callbacks
-  useEffect(() => {
-    // Don't fire onClose on the first render
-    if (isFirstRender.current) {
-      isFirstRender.current = false;
-      return;
-    }
-    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]);
-
-  // 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 => {
-    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}>
-          {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}>
-                  {({
-          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>}
-                      </div>
-          );
-        }}
-                </Popper>
-              </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}>
-    {children}
-  </Box>;
-Popout.Content = PopoutContent;
-Popout.Content.displayName = 'Popout.Content';

package/__flow__/Popout/styles.js

@@ -1,9 +0,0 @@
-//@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.js

@@ -1,56 +0,0 @@
-// @flow strict-local
-import * as React from 'react';
-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: ''
-  };
-  constructor(props: TypePortalProps) {
-    super(props);
-    if (canUseDOM()) {
-      const {
-        as,
-        el,
-        id
-      } = props;
-      if (el) {
-        this.el = el;
-      } else {
-        this.el = document.createElement(as);
-        this.el.setAttribute('data-racine-portal', id);
-      }
-    }
-  }
-  componentDidMount() {
-    if (canUseDOM() && this.el) {
-      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;
-      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.js

@@ -1,59 +0,0 @@
-// @flow
-import * as React from 'react';
-import Container, { Input, InputWrapper, LabelText } from "./styles";
-import type { TypeRadioProps } from "./index.flow";
-
-/**
- * @deprecated Use TypeRadioProps from root instead
- */
-export type TypeProps = TypeRadioProps;
-
-/**
- * Primitive Radio Element
- */
-export default class Radio extends React.Component<TypeRadioProps> {
-  static defaultProps = {
-    disabled: false
-  };
-  handleChange = (e: SyntheticInputEvent<HTMLInputElement>) => {
-    if (!!this.props.checked || this.props.disabled) {
-      return;
-    }
-    this.props.onChange && this.props.onChange(e);
-  };
-  handleFocus = (e: SyntheticFocusEvent<HTMLInputElement>) => {
-    if (this.props.onFocus) {
-      this.props.onFocus(e);
-    }
-  };
-  handleBlur = (e: SyntheticFocusEvent<HTMLInputElement>) => {
-    if (this.props.onBlur) {
-      this.props.onBlur(e);
-    }
-  };
-  render() {
-    const {
-      id,
-      value,
-      name,
-      label,
-      checked,
-      disabled,
-      onChange,
-      onFocus,
-      onBlur,
-      ariaLabel,
-      qa = {},
-      ...rest
-    } = this.props;
-    return (
-      // $FlowIssue - upgrade v0.112.0
-      <Container as={label && 'label'} {...rest}>
-        <InputWrapper checked={checked} disabled={disabled}>
-          <Input type="radio" id={id} aria-label={ariaLabel} value={value} name={name} checked={checked} disabled={disabled} onChange={this.handleChange} onFocus={this.handleFocus} onBlur={this.handleBlur} data-qa-radio={name || ''} data-qa-radio-ischecked={checked === true} data-qa-radio-isdisabled={disabled === true} {...qa} />
-        </InputWrapper>
-        {label && <LabelText disabled={disabled}>{label}</LabelText>}
-      </Container>
-    );
-  }
-}

package/__flow__/Radio/styles.js

@@ -1,102 +0,0 @@
-//@flow
-import styled, { css, type StyledComponent } from 'styled-components';
-import { focusRing, disabled } from "../utils/mixins";
-import { COMMON } from "../utils/system-props";
-import Text from "../Text";
-import type { TypeTheme } from "../types/theme.flow";
-const Container: StyledComponent<{...}, TypeTheme, *> = styled.span`
-  display: inline-flex;
-  align-items: center;
-  box-sizing: border-box;
-
-  ${COMMON}
-`;
-Container.displayName = 'Radio';
-export const Input: StyledComponent<any, TypeTheme, *> = styled.input`
-  box-sizing: border-box;
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  margin: 0;
-  appearance: none;
-  cursor: ${props => props.disabled ? 'not-allowed' : 'pointer'};
-  border: 1px solid ${props => props.theme.colors.form.border.base};
-  border-radius: 50%;
-  background-color: ${props => props.theme.colors.form.background.base};
-  transition: border-color ${props => props.theme.duration.fast}
-      ${props => props.theme.easing.ease_in},
-    background-color ${props => props.theme.duration.fast}
-      ${props => props.theme.easing.ease_in};
-
-  &:focus {
-    ${focusRing}
-  }
-`;
-Input.displayName = 'Input';
-export const InputWrapper: StyledComponent<any, TypeTheme, *> = styled.span`
-  position: relative;
-  width: ${props => props.theme.space[400]};
-  height: ${props => props.theme.space[400]};
-  cursor: ${props => props.disabled ? 'not-allowed' : 'pointer'};
-  ${props => props.disabled && disabled}
-
-  &:before {
-    content: '';
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    width: 6px;
-    height: 6px;
-    border-radius: 50%;
-    opacity: 0;
-    transition: opacity ${props => props.theme.duration.fast}
-      ${props => props.theme.easing.ease_in};
-    z-index: 1;
-    pointer-events: none;
-    cursor: ${props => props.disabled ? 'not-allowed' : 'pointer'};
-  }
-
-  ${props => !props.checked && css`
-      &:hover,
-      &:focus {
-        ${Input} {
-          border-color: ${props.theme.colors.form.border.base};
-          background-color: ${props.theme.colors.form.background.base};
-        }
-
-        &:before {
-          opacity: ${props.disabled ? 0 : 1};
-          background-color: ${props.theme.colors.form.background.base};
-        }
-      }
-    `}
-
-  ${props => props.checked && css`
-      ${Input} {
-        border-color: ${props.theme.colors.form.border.selected};
-        background-color: ${props.theme.colors.form.background.selected};
-      }
-
-      &:before {
-        opacity: 1;
-        background-color: ${props.theme.colors.form.background.base};
-      }
-    `}
-`;
-InputWrapper.displayName = 'InputWrapper';
-export const LabelText = styled<typeof Text, TypeTheme, *>(Text)`
-  margin-left: ${props => props.theme.space[300]};
-  font-size: ${props => props.theme.typography[200].fontSize};
-  line-height: 1;
-  cursor: ${props => props.disabled ? 'not-allowed' : 'pointer'};
-  color: ${props => props.theme.colors.text.headline};
-
-  ${props => props.disabled && css`
-      opacity: 0.4;
-    `}
-`;
-LabelText.displayName = 'LabelText';
-export default Container;