@sproutsocial/racine 13.7.1 → 14.0.0

package/__flow__/Collapsible/index.js

@@ -1,105 +0,0 @@
-// @flow
-import * as React from 'react';
-import { useState, useRef, useContext, useEffect } from 'react';
-import useMeasure from 'use-measure';
-import Box from "../Box";
-import { CollapsingBox } from "./styles";
-import type { TypeCollapsibleProps } from "./index.flow";
-let idCounter = 0;
-type TypeCollapsibleContext = $Shape<{
-  isOpen: boolean,
-  id: string,
-  offset: number,
-  openHeight: number,
-  collapsedHeight: number,
-  ...
-}>;
-const CollapsibleContext = React.createContext<TypeCollapsibleContext>({});
-const Collapsible = ({
-  children,
-  isOpen = false,
-  offset = 0,
-  collapsedHeight = 0,
-  openHeight
-}: TypeCollapsibleProps) => {
-  const [id] = useState(`Racine-collapsible-${idCounter++}`);
-  return <CollapsibleContext.Provider value={{
-    isOpen,
-    id,
-    offset,
-    collapsedHeight,
-    openHeight
-  }}>
-      {children}
-    </CollapsibleContext.Provider>;
-};
-const determineMaxHeight = (isHidden, openHeight, computedHeight) => {
-  // If isHidden is undefined this is the first render.  Return undefined so the max-height prop is not added
-  // This is a hack to prevent css from animating if it begins in the open state
-  // css animates when attribute values change (IE from 0 to another number)
-  // css does not animate when simply adding an attribute to an HTML element
-  if (isHidden === undefined) return undefined;
-
-  // If the user has defined an explicit open height, return that as the max height
-  if (openHeight) return openHeight;
-
-  // Otherwise, fallback to the computed height
-  return computedHeight;
-};
-const Trigger = ({
-  children,
-  ...rest
-}) => {
-  const {
-    isOpen,
-    id
-  } = useContext(CollapsibleContext);
-  return <React.Fragment>
-      {React.cloneElement(children, {
-      'aria-controls': id,
-      'aria-expanded': !!isOpen,
-      ...rest
-    })}
-    </React.Fragment>;
-};
-const Panel = ({
-  children,
-  ...rest
-}) => {
-  const {
-    isOpen,
-    id,
-    offset,
-    collapsedHeight,
-    openHeight
-  } = useContext(CollapsibleContext);
-  const ref = useRef();
-  const measurement = useMeasure(ref);
-  const [isHidden, setIsHidden] = useState(undefined);
-  const maxHeight = determineMaxHeight(isHidden, openHeight, measurement.height + offset);
-
-  /* We use the "hidden" attribute to remove the contents of the panel from the tab order of the page, but it interferes with the animation. This logic sets a slight timeout on setting the prop so that the animation has time to complete before the attribute is set. */
-  useEffect(() => {
-    if (!isOpen) {
-      const timeoutID = setTimeout(() => setIsHidden(!isOpen), 300);
-      return () => clearTimeout(timeoutID);
-    } else {
-      // Similar to the close animation, we need to delay setting hidden to run slightly async.
-      // An issue occurs with the initial render isHidden logic that causes the animation to occur sporadically.
-      // using this 0 second timeout just allows this component to initially render with an undefined max height,
-      // Then go directly from undefined to the full max height, without a brief 0 value that triggers an animation
-      const timeoutID = setTimeout(() => setIsHidden(!isOpen), 0);
-      return () => clearTimeout(timeoutID);
-    }
-  }, [isOpen]);
-  return <CollapsingBox hasShadow={collapsedHeight || openHeight > 0} scrollable={isOpen} maxHeight={isOpen ? maxHeight : collapsedHeight} minHeight={collapsedHeight} data-qa-collapsible="" data-qa-collapsible-isopen={isOpen === true} {...rest}>
-      <Box width="100%" hidden={isHidden && collapsedHeight === 0} aria-hidden={!isOpen} id={id} ref={ref}>
-        {children}
-      </Box>
-    </CollapsingBox>;
-};
-Collapsible.Trigger = Trigger;
-Collapsible.Panel = Panel;
-Collapsible.Trigger.displayName = 'Collapsible.Trigger';
-Collapsible.Panel.displayName = 'Collapsible.Panel';
-export default Collapsible;

package/__flow__/Collapsible/styles.js

@@ -1,36 +0,0 @@
-//@flow
-import styled from 'styled-components';
-import type { TypeTheme } from "../types/theme.flow";
-import Box from "../Box";
-export const CollapsingBox = styled<typeof Box, TypeTheme, *>(Box)`
-  transition: max-height ${p => p.theme.duration.medium}
-    ${p => p.theme.easing.ease_inout};
-  will-change: max-height;
-  position: relative;
-  overflow: auto;
-  ${({
-  hasShadow,
-  theme,
-  scrollable
-}) => hasShadow ? `background:  /* Shadow covers */ linear-gradient(
-        transparent 30%,
-        rgba(255, 255, 255, 0)
-      ),
-      linear-gradient(rgba(255, 255, 255, 0), transparent 70%) 0 100%,
-      /* Shadows */
-        radial-gradient(
-          farthest-side at 50% 0,
-          rgb(39 51 51 / 5%),
-          rgba(0, 0, 0, 0)
-        ),
-      radial-gradient(
-          farthest-side at 50% 100%,
-          rgb(39 51 51 / 5%),
-          rgba(0, 0, 0, 0)
-        )
-        0 100%;
-    background-repeat: no-repeat;
-    background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;
-    background-attachment: local, local, scroll, scroll;
-    ${scrollable ? `overflow: auto` : `overflow: hidden`};` : ''}
-`;

package/__flow__/DatePicker/DateRangePicker.flow.js

@@ -1,15 +0,0 @@
-// @flow
-import { type TypeCommonDatePickerProps } from "./common.flow";
-export type EnumFocusedInput = null | 'startDate' | 'endDate';
-export type TypeDateRangePickerProps = {
-  startDate: ?moment$Moment,
-  endDate: ?moment$Moment,
-  onDatesChange: ({|
-    startDate: moment$Moment,
-    endDate: moment$Moment,
-  |}) => void,
-  focusedInput: EnumFocusedInput,
-  onFocusChange: (EnumFocusedInput) => void,
-  ...TypeCommonDatePickerProps,
-  ...
-};

package/__flow__/DatePicker/DateRangePicker.js

@@ -1,27 +0,0 @@
-// @flow
-import React, { Fragment } from 'react';
-import DayPickerRangeController from 'react-dates/lib/components/DayPickerRangeController';
-import { ReactDatesCssOverrides } from "./styles";
-import { commonDatePickerProps } from "./common";
-import type { TypeDateRangePickerProps, EnumFocusedInput as EnumFocusedInput2 } from "./DateRangePicker.flow";
-
-/**
- * @deprecated Use EnumFocusedInput from root instead
- */
-export type EnumFocusedInput = EnumFocusedInput2;
-
-/**
- * @deprecated Use TypeCheckboxProps from root instead
- */
-export type TypeProps = TypeDateRangePickerProps;
-const DateRangePicker = ({
-  startDate,
-  endDate,
-  onDatesChange,
-  ...rest
-}: TypeDateRangePickerProps) => <Fragment>
-    <ReactDatesCssOverrides />
-    {/* $FlowIssue upset about spreading rest at the bottom but we want consumers to be able to override these properties */}
-    <DayPickerRangeController startDate={startDate} endDate={endDate} onDatesChange={onDatesChange} numberOfMonths={2} {...commonDatePickerProps} {...rest} />
-  </Fragment>;
-export default DateRangePicker;

package/__flow__/DatePicker/SingleDatePicker.flow.js

@@ -1,12 +0,0 @@
-// @flow
-import { type TypeCommonDatePickerProps } from "./common.flow";
-export type TypeSingleDatePickerProps = {
-  date: ?moment$Moment,
-  onDateChange: (date: moment$Moment) => void,
-  focused?: boolean,
-  onFocusChange?: ({
-    focused: boolean
-  }) => void,
-  ...TypeCommonDatePickerProps,
-  ...
-};

package/__flow__/DatePicker/SingleDatePicker.js

@@ -1,21 +0,0 @@
-// @flow
-import React, { Fragment } from 'react';
-import DayPickerSingleDateController from 'react-dates/lib/components/DayPickerSingleDateController';
-import { ReactDatesCssOverrides } from "./styles";
-import { commonDatePickerProps } from "./common";
-import type { TypeSingleDatePickerProps } from "./SingleDatePicker.flow";
-
-/**
- * @deprecated Use TypeSingleDatePickerProps from root instead
- */
-export type TypeProps = TypeSingleDatePickerProps;
-const SingleDatePicker = ({
-  onDateChange,
-  date,
-  ...rest
-}: TypeSingleDatePickerProps) => <Fragment>
-    <ReactDatesCssOverrides />
-    {/* $FlowIssue upset about spreading rest at the bottom but we want consumers to be able to override these properties */}
-    <DayPickerSingleDateController date={date} numberOfMonths={1} onDateChange={onDateChange} {...commonDatePickerProps} {...rest} />
-  </Fragment>;
-export default React.memo<TypeProps>(SingleDatePicker);

package/__flow__/DatePicker/StatefulDateRangePicker.js

@@ -1,41 +0,0 @@
-// @flow
-import React, { useState } from 'react';
-import { START_DATE } from 'react-dates/constants';
-import type { TypeDateRangePickerProps } from "./DateRangePicker.flow";
-import DateRangePicker from "./DateRangePicker";
-type TypeStatefulProps = {
-  ...TypeDateRangePickerProps,
-  focusedInput?: $PropertyType<TypeDateRangePickerProps, 'focusedInput'>,
-  onDatesChange?: $PropertyType<TypeDateRangePickerProps, 'onDatesChange'>,
-  onFocusChange?: $PropertyType<TypeDateRangePickerProps, 'onFocusChange'>,
-  ...
-};
-export const StatefulDateRangePicker = ({
-  startDate,
-  endDate,
-  onDatesChange,
-  onFocusChange,
-  ...rest
-}: TypeStatefulProps) => {
-  const [dates, setDate] = useState({
-    startDate,
-    endDate
-  });
-  const [focusedInput, setFocusedInput] = React.useState(START_DATE);
-  const handleDatesChange = nextDates => {
-    onDatesChange && onDatesChange(nextDates);
-    setDate(nextDates);
-  };
-  const handleFocusChange = nextFocusedInput => {
-    onFocusChange && onFocusChange(nextFocusedInput);
-    setFocusedInput(
-    // null means that we've selected an end date. we want to go back to START_DATE
-    // so the user can modify their selection. if focusedInput === null then it won't
-    // respond to click or keyboard events
-    nextFocusedInput === null ? START_DATE : nextFocusedInput);
-  };
-  return (
-    // $FlowIssue
-    <DateRangePicker startDate={dates.startDate} endDate={dates.endDate} focusedInput={focusedInput} onDatesChange={handleDatesChange} onFocusChange={handleFocusChange} {...rest} />
-  );
-};

package/__flow__/DatePicker/StatefulSingleDatePicker.js

@@ -1,24 +0,0 @@
-// @flow
-import React, { useState } from 'react';
-import type { TypeSingleDatePickerProps } from "./SingleDatePicker.flow";
-import SingleDatePicker from "./SingleDatePicker";
-type TypeStatefulProps = {
-  ...TypeSingleDatePickerProps,
-  onDateChange?: $PropertyType<TypeSingleDatePickerProps, 'onDateChange'>,
-  ...
-};
-export const StatefulSingleDatePicker = ({
-  date,
-  onDateChange,
-  ...rest
-}: TypeStatefulProps) => {
-  const [stateDate, setDate] = useState(date);
-  const handleDateChange = date => {
-    onDateChange && onDateChange(date);
-    setDate(date);
-  };
-  return (
-    // $FlowIssue
-    <SingleDatePicker date={stateDate} onDateChange={handleDateChange} {...rest} />
-  );
-};

package/__flow__/DatePicker/common.js

@@ -1,35 +0,0 @@
-// @flow
-import 'react-dates/initialize';
-import 'react-dates/lib/css/_datepicker.css';
-import React from 'react';
-import Icon from "../Icon";
-import { CalendarDay } from "./styles";
-import type { TypeCommonDatePickerProps as TypeCommonDatePickerProps2 } from "./common.flow";
-
-/**
- * @deprecated Use TypeCommonDatePickerProps2 from root instead
- */
-export type TypeCommonDatePickerProps = TypeCommonDatePickerProps2;
-const iconNames = {
-  left: 'arrow-left',
-  right: 'arrow-right'
-};
-export const CalendarNavButton = ({
-  type
-}: {
-  type: 'left' | 'right'
-}) => <Icon size="mini" name={iconNames[type]} />;
-export const commonDatePickerProps: TypeCommonDatePickerProps = {
-  hideKeyboardShortcutsPanel: true,
-  daySize: 30,
-  navPrev: <CalendarNavButton type="left" />,
-  navNext: <CalendarNavButton type="right" />,
-  renderDayContents: (day, modifiers) => <CalendarDay day={day} modifiers={modifiers}>
-      {day.format('D')}
-    </CalendarDay>
-};
-
-// Testing utilities
-export const formatDateAsCalendarHeader = (date: moment$Moment): string => date.format('MMMM YYYY');
-export const formatDateAsCalendarDay = (date: moment$Moment): string => date.format('dddd, MMMM D, YYYY');
-export const getVisibleMonthWithReactDatesInternalApi = (container: HTMLElement): string => container.querySelector('[data-visible=true] strong')?.textContent ?? '';

package/__flow__/DatePicker/index.js

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

package/__flow__/DatePicker/styles.js

@@ -1,231 +0,0 @@
-// @flow
-import styled, { createGlobalStyle, css } from 'styled-components';
-import moment from 'moment';
-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.
- *
- * today, blocked, blocked-calendar, blocked-out-of-range, highlighted-calendar, valid,
- * selected, selected-start, selected-end, blocked-minimum-nights, selected-span, last-in-range,
- * hovered, hovered-span, hovered-offset, after-hovered-start, first-day-of-week, last-day-of-week,
- * hovered-start-first-possible-end, hovered-start-blocked-minimum-nights, before-hovered-end,
- * no-selected-start-before-selected-end, selected-start-in-hovered-span, selected-start-no-selected-end,
- * selected-end-no-selected-start
- *
- */
-
-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')) {
-    return true;
-  }
-  return false;
-};
-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')) {
-    return true;
-  }
-  return false;
-};
-export const CalendarDay = styled<typeof Box, TypeTheme, *>(Box)`
-  ${({
-  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};
-      `;
-  }
-  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`
-        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};
-
-		/* 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 */
-		/* of the calendar adds an extra row of padding if we do not override it */
-		&_transitionContainer {
-			/* need !important because react-dates sets height on the element itself */
-			height: 228px !important;
-		}
-
-		&_weekHeader {
-			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;
-
-			/* Magic number to make the bottom border line stretch the full width */
-			width: 230px;
-
-			&_ul {
- 				/* Magic number to line up day name headings over the correct numbers */
-				padding-left: 10px;
-			}
-		}
-
-		&_weekHeaders__horizontal {
-			margin-left: 0
-		}
-
-		&_weekHeader_li {
-			${({
-  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};
-		}
-	}
-
-    .CalendarDay {
-		background-color: transparent;
-
-        &__selected, &__selected_span, &:hover {
-            background-color: transparent;
-		}
-
-		&__default {
-			color: ${({
-  theme
-}) => theme.colors.text.body};
-		}
-		&__default,
-		&__default:hover {
-			border: none;
-			color: ${({
-  theme
-}) => theme.colors.text.body};
-		}
-	}
-
-    .CalendarMonth {
-		${({
-  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};
-			padding-top: 0;
-			background: ${({
-  theme
-}) => theme.colors.container.background.base};
-
-			strong {
-				font-weight: ${({
-  theme
-}) => theme.fontWeights.semibold};
-			}
-
-		}
-		&_table {
-			line-height: 21.333px;
-			tr {
-				vertical-align: middle;
-			}
-			td {
-				padding: 0;
-				border-bottom: none;
-			}
-		}
-	}
-
-	.CalendarMonthGrid {
-		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};
-		top: -4px;
-		padding: 7px 8px;
-		position: absolute;
-		line-height: 0.78;
-		border-radius: 9999px;
-		border: none;
-		background: ${({
-  theme
-}) => theme.colors.button.pill.background.base};
-
-		&:nth-child(1) {
-			left: 22px;
-		}
-		&:nth-child(2) {
-			right: 22px;
-		}
-
-		&:hover {
-			background: ${({
-  theme
-}) => theme.colors.button.pill.background.hover};
-		}
-	}
-`;

package/__flow__/Drawer/SlideTransition.js

@@ -1,49 +0,0 @@
-// @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';
-type TypeProps = {
-  children: ({
-    style: {
-      [string]: string
-    },
-    key: number,
-    isVisible: boolean,
-  }) => React.Node,
-  isVisible: boolean,
-  width: number,
-  direction: 'left' | 'right',
-  ...
-};
-export const SlideTransition = ({
-  isVisible,
-  children,
-  width,
-  direction,
-  ...rest
-}: TypeProps) => {
-  const offset = width * (direction === 'left' ? -1 : 1);
-  const transitions = useTransition(isVisible, null, {
-    from: {
-      transform: `translateX(${offset}px)`
-    },
-    enter: {
-      transform: 'translateX(0)'
-    },
-    leave: {
-      transform: `translateX(${offset}px)`
-    },
-    config: {
-      duration: MOTION_DURATION_MEDIUM * 1000
-    }
-  });
-  return transitions.map(({
-    key,
-    item,
-    props
-  }) => children({
-    key,
-    isVisible: item,
-    style: props
-  }));
-};