@sproutsocial/racine 12.23.0 → 13.0.2

package/__flow__/Collapsible/index.js

@@ -1,49 +1,38 @@
 // @flow
 import * as React from 'react';
-import {useState, useRef, useContext, useEffect} from 'react';
-import {CollapsingBox} from './styles';
+import { useState, useRef, useContext, useEffect } from 'react';
 import useMeasure from 'use-measure';
-import Box from '../Box';
-
+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>({});
-
-type TypeProps = {
-  isOpen: boolean,
-  children: React.Node,
-  /** If the children of the collapsible panel have a top or bottom margin, it will throw off the calculations for the height of the content. The total amount of vertical margin (in pixels) can be supplied to this prop to correct this. */
-  offset?: number,
-  collapsedHeight?: number,
-  openHeight?: number,
-};
-
 const Collapsible = ({
   children,
   isOpen = false,
   offset = 0,
   collapsedHeight = 0,
-  openHeight,
-}: TypeProps) => {
+  openHeight
+}: TypeCollapsibleProps) => {
   const [id] = useState(`Racine-collapsible-${idCounter++}`);
-
-  return (
-    <CollapsibleContext.Provider
-      value={{isOpen, id, offset, collapsedHeight, openHeight}}
-    >
+  return <CollapsibleContext.Provider value={{
+    isOpen,
+    id,
+    offset,
+    collapsedHeight,
+    openHeight
+  }}>
       {children}
-    </CollapsibleContext.Provider>
-  );
+    </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
@@ -57,33 +46,37 @@ const determineMaxHeight = (isHidden, openHeight, computedHeight) => {
   // Otherwise, fallback to the computed height
   return computedHeight;
 };
-
-const Trigger = ({children, ...rest}) => {
-  const {isOpen, id} = useContext(CollapsibleContext);
-
-  return (
-    <React.Fragment>
+const Trigger = ({
+  children,
+  ...rest
+}) => {
+  const {
+    isOpen,
+    id
+  } = useContext(CollapsibleContext);
+  return <React.Fragment>
       {React.cloneElement(children, {
-        'aria-controls': id,
-        'aria-expanded': !!isOpen,
-        ...rest,
-      })}
-    </React.Fragment>
-  );
+      'aria-controls': id,
+      'aria-expanded': !!isOpen,
+      ...rest
+    })}
+    </React.Fragment>;
 };
-
-const Panel = ({children, ...rest}) => {
-  const {isOpen, id, offset, collapsedHeight, openHeight} =
-    useContext(CollapsibleContext);
+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
-  );
+  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(() => {
@@ -99,34 +92,14 @@ const Panel = ({children, ...rest}) => {
       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}
-      >
+  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>
-  );
+    </CollapsingBox>;
 };
-
 Collapsible.Trigger = Trigger;
 Collapsible.Panel = Panel;
-
 Collapsible.Trigger.displayName = 'Collapsible.Trigger';
 Collapsible.Panel.displayName = 'Collapsible.Panel';
-
-export default Collapsible;
+export default Collapsible;

package/__flow__/Collapsible/styles.js

@@ -1,18 +1,18 @@
 //@flow
 import styled from 'styled-components';
-import Box from '../Box';
-
-import type {TypeTheme} from '../types/theme.flow';
-
+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};
+  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(
+  ${({
+  hasShadow,
+  theme,
+  scrollable
+}) => hasShadow ? `background:  /* Shadow covers */ linear-gradient(
         transparent 30%,
         rgba(255, 255, 255, 0)
       ),
@@ -32,6 +32,5 @@ export const CollapsingBox = styled<typeof Box, TypeTheme, *>(Box)`
     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`};`
-      : ''}
-`;
+    ${scrollable ? `overflow: auto` : `overflow: hidden`};` : ''}
+`;

package/__flow__/DatePicker/DateRangePicker.flow.js

@@ -0,0 +1,15 @@
+// @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,42 +1,27 @@
 // @flow
-import React, {Fragment} from 'react';
+import React, { Fragment } from 'react';
 import DayPickerRangeController from 'react-dates/lib/components/DayPickerRangeController';
-import {ReactDatesCssOverrides} from './styles';
-import {commonDatePickerProps, type TypeCommonDatePickerProps} from './common';
+import { ReactDatesCssOverrides } from "./styles";
+import { commonDatePickerProps } from "./common";
+import type { TypeDateRangePickerProps, EnumFocusedInput as EnumFocusedInput2 } from "./DateRangePicker.flow";
 
-export type EnumFocusedInput = null | 'startDate' | 'endDate';
-
-export type TypeProps = {
-  startDate: ?moment$Moment,
-  endDate: ?moment$Moment,
-  onDatesChange: ({|
-    startDate: moment$Moment,
-    endDate: moment$Moment,
-  |}) => void,
-  focusedInput: EnumFocusedInput,
-  onFocusChange: (EnumFocusedInput) => void,
-  ...TypeCommonDatePickerProps,
-  ...
-};
+/**
+ * @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
-}: TypeProps) => (
-  <Fragment>
+}: TypeDateRangePickerProps) => <Fragment>
     <ReactDatesCssOverrides />
-    <DayPickerRangeController
-      startDate={startDate}
-      endDate={endDate}
-      onDatesChange={onDatesChange}
-      numberOfMonths={2}
-      {...commonDatePickerProps}
-      // $FlowIssue upset about spreading rest at the bottom but we want consumers to be able to override these properties
-      {...rest}
-    />
-  </Fragment>
-);
-
-export default DateRangePicker;
+    {/* $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

@@ -0,0 +1,12 @@
+// @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,30 +1,21 @@
 // @flow
-import React, {Fragment} from 'react';
+import React, { Fragment } from 'react';
 import DayPickerSingleDateController from 'react-dates/lib/components/DayPickerSingleDateController';
-import {ReactDatesCssOverrides} from './styles';
-import {commonDatePickerProps, type TypeCommonDatePickerProps} from './common';
+import { ReactDatesCssOverrides } from "./styles";
+import { commonDatePickerProps } from "./common";
+import type { TypeSingleDatePickerProps } from "./SingleDatePicker.flow";
 
-export type TypeProps = {
-  date: ?moment$Moment,
-  onDateChange: (date: moment$Moment) => void,
-  focused?: boolean,
-  onFocusChange?: ({focused: boolean}) => void,
-  ...TypeCommonDatePickerProps,
-  ...
-};
-
-const SingleDatePicker = ({onDateChange, date, ...rest}: TypeProps) => (
-  <Fragment>
+/**
+ * @deprecated Use TypeSingleDatePickerProps from root instead
+ */
+export type TypeProps = TypeSingleDatePickerProps;
+const SingleDatePicker = ({
+  onDateChange,
+  date,
+  ...rest
+}: TypeSingleDatePickerProps) => <Fragment>
     <ReactDatesCssOverrides />
-    <DayPickerSingleDateController
-      date={date}
-      numberOfMonths={1}
-      onDateChange={onDateChange}
-      {...commonDatePickerProps}
-      // $FlowIssue upset about spreading rest at the bottom but we want consumers to be able to override these properties
-      {...rest}
-    />
-  </Fragment>
-);
-
-export default React.memo<TypeProps>(SingleDatePicker);
+    {/* $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,15 +1,15 @@
 // @flow
-import React, {useState} from 'react';
-import {START_DATE} from 'react-dates/constants';
-import DateRangePicker, {type TypeProps} from './DateRangePicker';
-
+import React, { useState } from 'react';
+import { START_DATE } from 'react-dates/constants';
+import type { TypeDateRangePickerProps } from "./DateRangePicker.flow";
+import DateRangePicker from "./DateRangePicker";
 type TypeStatefulProps = {
-  ...TypeProps,
-  focusedInput?: $PropertyType<TypeProps, 'focusedInput'>,
-  onDatesChange?: $PropertyType<TypeProps, 'onDatesChange'>,
-  onFocusChange?: $PropertyType<TypeProps, 'onFocusChange'>,
+  ...TypeDateRangePickerProps,
+  focusedInput?: $PropertyType<TypeDateRangePickerProps, 'focusedInput'>,
+  onDatesChange?: $PropertyType<TypeDateRangePickerProps, 'onDatesChange'>,
+  onFocusChange?: $PropertyType<TypeDateRangePickerProps, 'onFocusChange'>,
+  ...
 };
-
 export const StatefulDateRangePicker = ({
   startDate,
   endDate,
@@ -19,37 +19,23 @@ export const StatefulDateRangePicker = ({
 }: TypeStatefulProps) => {
   const [dates, setDate] = useState({
     startDate,
-    endDate,
+    endDate
   });
-
   const [focusedInput, setFocusedInput] = React.useState(START_DATE);
-
-  const handleDatesChange = (nextDates) => {
+  const handleDatesChange = nextDates => {
     onDatesChange && onDatesChange(nextDates);
-
     setDate(nextDates);
   };
-
-  const handleFocusChange = (nextFocusedInput) => {
+  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
-    );
+    // 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 (
-    <DateRangePicker
-      startDate={dates.startDate}
-      endDate={dates.endDate}
-      focusedInput={focusedInput}
-      onDatesChange={handleDatesChange}
-      onFocusChange={handleFocusChange}
-      // $FlowIssue
-      {...rest}
-    />
+    // $FlowIssue
+    <DateRangePicker startDate={dates.startDate} endDate={dates.endDate} focusedInput={focusedInput} onDatesChange={handleDatesChange} onFocusChange={handleFocusChange} {...rest} />
   );
-};
+};

package/__flow__/DatePicker/StatefulSingleDatePicker.js

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

package/__flow__/DatePicker/common.flow.js

@@ -0,0 +1,20 @@
+// @flow
+import { type Node } from 'react';
+export type TypeCommonDatePickerProps = {|
+  daySize?: number,
+  isOutsideRange?: (date: moment$Moment) => boolean,
+  hideKeyboardShortcutsPanel?: boolean,
+  navPrev?: Node,
+  navNext?: Node,
+  numberOfMonths?: number,
+  renderDayContents?: (day: moment$Moment, modifiers: Object) => Node,
+  keepOpenOnDateSelect?: boolean,
+  initialVisibleMonth?: () => moment$Moment,
+  minimumNights?: number,
+  phrases?: {
+    [phrase: string]: Node | (({
+      date: moment$Moment
+    }) => Node),
+    ...
+  },
+|};

package/__flow__/DatePicker/common.js

@@ -1,57 +1,35 @@
 // @flow
 import 'react-dates/initialize';
-
-import React, {type Node} from 'react';
-import Icon from '../Icon';
-import {CalendarDay} from './styles';
-
 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',
+  right: 'arrow-right'
 };
-
-export const CalendarNavButton = ({type}: {type: 'left' | 'right'}) => (
-  <Icon size="mini" name={iconNames[type]} />
-);
-
-export type TypeCommonDatePickerProps = {|
-  daySize?: number,
-  isOutsideRange?: (date: moment$Moment) => boolean,
-  hideKeyboardShortcutsPanel?: boolean,
-  navPrev?: Node,
-  navNext?: Node,
-  numberOfMonths?: number,
-  renderDayContents?: (day: moment$Moment, modifiers: Object) => Node,
-  keepOpenOnDateSelect?: boolean,
-  initialVisibleMonth?: () => moment$Moment,
-  minimumNights?: number,
-  phrases?: {
-    [phrase: string]: Node | (({date: moment$Moment}) => Node),
-    ...
-  },
-|};
-
+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}>
+  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 ?? '';
+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,4 +1,3 @@
-import SingleDatePicker from './SingleDatePicker';
-import DateRangePicker from './DateRangePicker';
-
-export {SingleDatePicker, DateRangePicker};
+import SingleDatePicker from "./SingleDatePicker";
+import DateRangePicker from "./DateRangePicker";
+export { SingleDatePicker, DateRangePicker };