@sproutsocial/racine 12.24.0 → 13.1.1

package/__flow__/utils/hooks.js

@@ -1,68 +1,46 @@
 'no babel-plugin-flow-react-proptypes';
-// @flow
-import {
-  useState,
-  useCallback,
-  useEffect,
-  useMemo,
-  useReducer,
-  useRef,
-} from 'react';
-import {canUseDOM} from '../utils';
 
+// @flow
+import { useState, useCallback, useEffect, useMemo, useReducer, useRef } from 'react';
+import { canUseDOM } from "./";
 export function useTextContent(initial: string) {
   const [textContent, setTextContent] = useState(initial);
-
   const ref = useCallback((node: Node) => {
     if (node !== null) {
       setTextContent(node.textContent);
     }
   }, []);
-
   ref.current = textContent;
   return ref;
 }
-
-type TypeMutationObserverInitRequired =
-  | {|childList: true|}
-  | {|attributes: true|}
-  | {|characterData: true|};
-
+type TypeMutationObserverInitRequired = {|
+  childList: true
+|} | {|
+  attributes: true
+|} | {|
+  characterData: true
+|};
 type TypeMutationObserverInit = {
   ...TypeMutationObserverInitRequired,
   subtree?: boolean,
   attributeOldValue?: boolean,
   characterDataOldValue?: boolean,
   attributeFilter?: Array<string>,
+  ...
 };
-
-type TypeMutationObserverCallback = (
-  mutationList?: MutationRecord[],
-  observer?: MutationObserver
-) => any;
-
-const defaultCallback: TypeMutationObserverCallback = (mutationList) =>
-  mutationList;
-
-export function useMutationObserver(
-  targetNode: ?Node,
-  config: TypeMutationObserverInit,
-  callback?: TypeMutationObserverCallback = defaultCallback
-) {
+type TypeMutationObserverCallback = (mutationList?: MutationRecord[], observer?: MutationObserver) => any;
+const defaultCallback: TypeMutationObserverCallback = mutationList => mutationList;
+export function useMutationObserver(targetNode: ?Node, config: TypeMutationObserverInit, callback?: TypeMutationObserverCallback = defaultCallback) {
   if (!canUseDOM()) {
     return;
   }
   /* eslint-disable-next-line */
   const [value, setValue] = useState(undefined);
   /* eslint-disable-next-line */
-  const observer = useMemo(
-    () =>
-      new MutationObserver((mutationList, observer) => {
-        const result = callback(mutationList, observer);
-        setValue(result);
-      }),
-    [callback]
-  );
+  const observer = useMemo(() => new MutationObserver((mutationList, observer) => {
+    const result = callback(mutationList, observer);
+    setValue(result);
+  }), [callback]);
   /* eslint-disable-next-line */
   useEffect(() => {
     if (targetNode) {
@@ -72,15 +50,9 @@ export function useMutationObserver(
       };
     }
   }, [targetNode, config, observer]);
-
   return value;
 }
-
-export function useMutationObserverOnce(
-  targetNode: ?Node,
-  config: TypeMutationObserverInit,
-  callback: TypeMutationObserverCallback
-) {
+export function useMutationObserverOnce(targetNode: ?Node, config: TypeMutationObserverInit, callback: TypeMutationObserverCallback) {
   const [isObserving, setObserving] = useState(true);
   const node = isObserving ? targetNode : null;
   const value = useMutationObserver(node, config, callback);
@@ -89,82 +61,68 @@ export function useMutationObserverOnce(
   }
   return value;
 }
-
 type TypeSingleSelectProps<T: string> = {|
   initialValue?: T | '',
   onChange?: (value: string | T) => any,
 |};
-
 type TypeMultiSelectProps<T: string> = {|
   initialValue?: T[],
   onChange?: (value: Array<string | T>) => any,
 |};
-
-export const useSelect = <T: string>(
-  {
-    initialValue = '',
-    onChange: userOnChange = () => {},
-  }: TypeSingleSelectProps<T> = {
-    initialValue: '',
-    onChange: () => {},
-  }
-) => {
+export const useSelect = <T: string>({
+  initialValue = '',
+  onChange: userOnChange = () => {}
+}: TypeSingleSelectProps<T> = {
+  initialValue: '',
+  onChange: () => {}
+}) => {
   const [value, setValue] = useState(initialValue);
-
-  const onChange = useCallback(
-    (newValue: string) => {
-      if (newValue !== value) {
-        setValue(newValue);
-        userOnChange(newValue);
-      }
-    },
-    [userOnChange, value]
-  );
-
-  return {value, onChange};
+  const onChange = useCallback((newValue: string) => {
+    if (newValue !== value) {
+      setValue(newValue);
+      userOnChange(newValue);
+    }
+  }, [userOnChange, value]);
+  return {
+    value,
+    onChange
+  };
 };
-
 const valueReducer = (state, action) => {
   const newState = new Set(state);
   switch (action.type) {
-    case 'reset': {
-      return new Set();
-    }
+    case 'reset':
+      {
+        return new Set();
+      }
     case 'toggle_item':
-    default: {
-      if (newState.has(action.value)) {
-        newState.delete(action.value);
-      } else {
-        newState.add(action.value);
+    default:
+      {
+        if (newState.has(action.value)) {
+          newState.delete(action.value);
+        } else {
+          newState.add(action.value);
+        }
+        return newState;
       }
-      return newState;
-    }
   }
 };
-
-export const useMultiselect = <T: string>(
-  {
-    initialValue = [],
-    onChange: userOnChange = () => {},
-  }: TypeMultiSelectProps<T> = {
-    initialValue: [],
-    onChange: () => {},
-  }
-) => {
+export const useMultiselect = <T: string>({
+  initialValue = [],
+  onChange: userOnChange = () => {}
+}: TypeMultiSelectProps<T> = {
+  initialValue: [],
+  onChange: () => {}
+}) => {
   const [value, dispatch] = useReducer(valueReducer, new Set(initialValue));
-
-  const getArrayValue = (value: Set<string | T>) =>
-    Array.from<string | T>(value);
-
-  const onChange = useCallback(
-    (newValue: string) => {
-      dispatch({type: 'toggle_item', value: newValue});
-    },
-    [dispatch]
-  );
-
+  const getArrayValue = (value: Set<string | T>) => Array.from<string | T>(value);
+  const onChange = useCallback((newValue: string) => {
+    dispatch({
+      type: 'toggle_item',
+      value: newValue
+    });
+  }, [dispatch]);
   const isFirstRun = useRef(true);
-
   useEffect(() => {
     if (isFirstRun.current) {
       isFirstRun.current = false;
@@ -172,33 +130,38 @@ export const useMultiselect = <T: string>(
     }
     userOnChange(getArrayValue(value));
   }, [userOnChange, value]);
-
   const onClear = useCallback(() => {
-    dispatch({type: 'reset'});
+    dispatch({
+      type: 'reset'
+    });
   }, [dispatch]);
-
-  return {value: getArrayValue(value), onChange, onClear};
+  return {
+    value: getArrayValue(value),
+    onChange,
+    onClear
+  };
 };
-
 export function useWhyDidYouUpdate(name: string, props: Object) {
   // Get a mutable ref object where we can store props ...
   // ... for comparison next time this hook runs.
   const previousProps = useRef({});
-
   useEffect(() => {
     if (previousProps.current) {
       // Get all keys from previous and current props
-      const allKeys = Object.keys({...previousProps.current, ...props});
+      const allKeys = Object.keys({
+        ...previousProps.current,
+        ...props
+      });
       // Use this object to keep track of changed props
       const changesObj = {};
       // Iterate through keys
-      allKeys.forEach((key) => {
+      allKeys.forEach(key => {
         // If previous is different from current
         if (previousProps.current[key] !== props[key]) {
           // Add to changesObj
           changesObj[key] = {
             from: previousProps.current[key],
-            to: props[key],
+            to: props[key]
           };
         }
       });
@@ -213,4 +176,4 @@ export function useWhyDidYouUpdate(name: string, props: Object) {
     // Finally update previousProps with current props for next hook call
     previousProps.current = props;
   });
-}
+}

package/__flow__/utils/index.js

@@ -1,18 +1,12 @@
 // @flow
 
-import {type ElementRef} from 'react';
-
+import { type ElementRef } from 'react';
 export const canUseDOM = () => {
-  return Boolean(
-    typeof window !== 'undefined' &&
-      window.document &&
-      window.document.createElement
-  );
+  return Boolean(typeof window !== 'undefined' && window.document && window.document.createElement);
 };
-
-type TypeRef =
-  | {|current: null | HTMLInputElement|}
-  | ((ElementRef<any> | HTMLElement) => void);
+type TypeRef = {|
+  current: null | HTMLInputElement
+|} | ((ElementRef<any> | HTMLElement) => void);
 
 // Allows a component to pass its own ref *and* a ref prop to the same element.
 // Via https://www.davedrinks.coffee/how-do-i-use-two-react-refs/
@@ -29,4 +23,4 @@ export const mergeRefs = (refs: (?TypeRef)[]) => {
       }
     }
   };
-};
+};

package/__flow__/utils/innerText.js

@@ -5,27 +5,17 @@
 const hasOwnProperty = (obj: Object, property: string): boolean => {
   return Object.prototype.hasOwnProperty.call(obj, property);
 };
-
 const hasChildren = (node: React$Node): boolean => {
   return hasOwnProperty(node, 'children');
 };
-
 const hasProps = (node: React$Node): boolean => {
   return hasOwnProperty(node, 'props');
 };
-
 const reduceNodeToString = (previous: string, current: React$Node): string => {
-  return previous.length
-    ? `${previous} ${innerText(current)}`
-    : innerText(current);
+  return previous.length ? `${previous} ${innerText(current)}` : innerText(current);
 };
-
 const innerText = (node: React$Node): string => {
-  if (
-    node === null ||
-    typeof node === 'undefined' ||
-    typeof node === 'boolean'
-  ) {
+  if (node === null || typeof node === 'undefined' || typeof node === 'boolean') {
     return '';
   } else if (typeof node === 'string') {
     return node;
@@ -37,8 +27,6 @@ const innerText = (node: React$Node): string => {
   } else if (hasProps(node) && hasChildren(node.props)) {
     return innerText(node.props.children);
   }
-
   return '';
 };
-
-export default innerText;
+export default innerText;

package/__flow__/utils/mixins.js

@@ -1,19 +1,13 @@
 // @flow strict-local
-import {css} from 'styled-components';
-import theme from '../themes/light/theme';
-import {transparentize} from 'polished';
-
+import { transparentize } from 'polished';
+import { css } from 'styled-components';
+import theme from "../themes/light/theme";
 export const svgToDataURL = (svgStr: string) => {
-  const encoded = encodeURIComponent(svgStr)
-    .replace(/'/g, '%27')
-    .replace(/"/g, '%22');
-
+  const encoded = encodeURIComponent(svgStr).replace(/'/g, '%27').replace(/"/g, '%22');
   const header = 'data:image/svg+xml,';
   const dataUrl = header + encoded;
-
   return dataUrl;
 };
-
 export const visuallyHidden = css`
   position: absolute;
   width: 1px;
@@ -24,7 +18,6 @@ export const visuallyHidden = css`
   clip: rect(0 0 0 0);
   border: 0;
 `;
-
 export const focusRing = css`
   box-shadow: 0 0 0 1px ${theme.colors.button.primary.background.base},
     0 0px 0px 4px
@@ -35,15 +28,13 @@ export const focusRing = css`
     border: 0;
   }
 `;
-
 export const pill = css`
   min-width: ${theme.space[600]};
   min-height: ${theme.space[600]};
   padding: ${theme.space[300]} ${theme.space[350]};
   border-radius: ${theme.radii.pill};
 `;
-
 export const disabled = css`
   opacity: 0.4;
   pointer-events: none;
-`;
+`;

package/__flow__/utils/react-testing-library.js

@@ -1,59 +1,32 @@
 // @flow
 import * as React from 'react';
-import {
-  act,
-  cleanup,
-  createEvent,
-  fireEvent,
-  queries,
-  render,
-  screen,
-  wait,
-  waitFor,
-  waitForElement,
-  waitForElementToBeRemoved,
-  within,
-} from '@testing-library/react';
+import { act, cleanup, createEvent, fireEvent, queries, render, screen as defaultScreen, wait, waitFor, waitForElement, waitForElementToBeRemoved, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import {a11yCheck} from './a11yTest';
-import {dataQaLabelQueries} from './dataQaLabelQueries';
-import ThemeProvider from '../ThemeProvider';
-
+import ThemeProvider from "../ThemeProvider";
+import { a11yCheck } from "./a11yTest";
+import { dataQaLabelQueries } from "./dataQaLabelQueries";
 const sproutQueries = {
   ...queries,
-  ...dataQaLabelQueries,
+  ...dataQaLabelQueries
 };
-
 const customRender = (node: React.Node, options: any) => {
-  const api = render(node, {
+  const utils = render(node, {
     ...options,
     queries: sproutQueries,
-    wrapper: ThemeProvider,
+    wrapper: ThemeProvider
   });
-
   const runA11yCheck = async () => {
-    await a11yCheck(api.container);
+    await a11yCheck(utils.container);
   };
-
   return {
-    ...api,
-    runA11yCheck,
+    ...utils,
+    runA11yCheck
   };
 };
-
 const customWithin = (element: HTMLElement) => within(element, sproutQueries);
-
-export {
-  act,
-  cleanup,
-  createEvent,
-  customRender as render,
-  customWithin as within,
-  fireEvent,
-  screen,
-  userEvent,
-  wait,
-  waitFor,
-  waitForElement,
-  waitForElementToBeRemoved,
+const boundQueries = within(document.body, sproutQueries);
+const customScreen = {
+  ...defaultScreen,
+  ...boundQueries
 };
+export { act, cleanup, createEvent, customRender as render, customWithin as within, fireEvent, customScreen as screen, userEvent, wait, waitFor, waitForElement, waitForElementToBeRemoved };

package/__flow__/utils/responsiveProps/index.js

@@ -1,18 +1,12 @@
 // @flow
-import theme from '../../themes/light/theme';
-
-import type {TypeResponsive} from '../../types/system-props.flow';
-
+import theme from "../../themes/light/theme";
+import type { TypeResponsive } from "../../types/system-props.flow";
 const breakpoints = theme.breakpoints;
 const LENGTH = breakpoints.length + 1;
-
-export const normalizeResponsiveProp = (
-  value: TypeResponsive<any>
-): TypeResponsive<any> => {
+export const normalizeResponsiveProp = (value: TypeResponsive<any>): TypeResponsive<any> => {
   if (['string', 'number'].includes(typeof value)) {
     return Array(LENGTH).fill(value);
   }
-
   if (value.length) {
     switch (value.length) {
       case 1:
@@ -22,20 +16,13 @@ export const normalizeResponsiveProp = (
       case 3:
         return [value[0], value[1], ...Array(LENGTH - 2).fill(value[2])];
       case 4:
-        return [
-          value[0],
-          value[1],
-          value[2],
-          ...Array(LENGTH - 3).fill(value[3]),
-        ];
+        return [value[0], value[1], value[2], ...Array(LENGTH - 3).fill(value[3])];
       case 5:
         return value;
       default:
-        throw new Error(
-          `Invalid responsive prop length: ${JSON.stringify(value)}`
-        );
+        throw new Error(`Invalid responsive prop length: ${JSON.stringify(value)}`);
     }
   } else {
     throw new Error(`Invalid responsive prop type: ${JSON.stringify(value)}`);
   }
-};
+};

package/__flow__/utils/system-props.js

@@ -1,83 +1,17 @@
 // @flow
 // eslint-disable-next-line no-restricted-syntax
 import * as styles from 'styled-system';
-
 const typeScale = styles.variant({
   key: 'typography',
-  prop: 'typeScale',
+  prop: 'typeScale'
 });
-
-export const COMMON = styles.compose(
-  styles.color,
-  styles.space,
-  styles.system({
-    cursor: true,
-    whiteSpace: true,
-  })
-);
-
-export const BORDER = styles.compose(
-  styles.border,
-  styles.borderTop,
-  styles.borderRight,
-  styles.borderBottom,
-  styles.borderLeft,
-  styles.borderWidth,
-  styles.borderStyle,
-  styles.borderColor,
-  styles.borderRadius,
-  styles.border.borderBottomLeftRadius,
-  styles.border.borderBottomRightRadius,
-  styles.border.borderTopLeftRadius,
-  styles.border.borderTopRightRadius,
-  styles.boxShadow
-);
-
-export const TYPOGRAPHY = styles.compose(
-  typeScale,
-  styles.fontFamily,
-  styles.fontStyle,
-  styles.fontWeight,
-  styles.lineHeight,
-  styles.textAlign
-);
-
-export const LAYOUT = styles.compose(
-  styles.display,
-  styles.size,
-  styles.width,
-  styles.height,
-  styles.minWidth,
-  styles.minHeight,
-  styles.maxWidth,
-  styles.maxHeight,
-  styles.overflow,
-  styles.verticalAlign
-);
-
-export const POSITION = styles.compose(
-  styles.position,
-  styles.zIndex,
-  styles.top,
-  styles.right,
-  styles.bottom,
-  styles.left
-);
-
-export const FLEXBOX = styles.compose(
-  styles.flexBasis,
-  styles.flexDirection,
-  styles.flexWrap,
-  styles.alignContent,
-  styles.alignItems,
-  styles.justifyContent,
-  styles.justifyItems,
-  styles.order,
-  styles.flex,
-  styles.flexShrink,
-  styles.flexGrow,
-  styles.justifySelf,
-  styles.alignSelf
-);
-
-export const GRID = styles.grid;
+export const COMMON = styles.compose(styles.color, styles.space, styles.system({
+  cursor: true,
+  whiteSpace: true
+}));
+export const BORDER = styles.compose(styles.border, styles.borderTop, styles.borderRight, styles.borderBottom, styles.borderLeft, styles.borderWidth, styles.borderStyle, styles.borderColor, styles.borderRadius, styles.border.borderBottomLeftRadius, styles.border.borderBottomRightRadius, styles.border.borderTopLeftRadius, styles.border.borderTopRightRadius, styles.boxShadow);
+export const TYPOGRAPHY = styles.compose(typeScale, styles.fontFamily, styles.fontStyle, styles.fontWeight, styles.lineHeight, styles.textAlign);
+export const LAYOUT = styles.compose(styles.display, styles.size, styles.width, styles.height, styles.minWidth, styles.minHeight, styles.maxWidth, styles.maxHeight, styles.overflow, styles.verticalAlign);
+export const POSITION = styles.compose(styles.position, styles.zIndex, styles.top, styles.right, styles.bottom, styles.left);
+export const FLEXBOX = styles.compose(styles.flexBasis, styles.flexDirection, styles.flexWrap, styles.alignContent, styles.alignItems, styles.justifyContent, styles.justifyItems, styles.order, styles.flex, styles.flexShrink, styles.flexGrow, styles.justifySelf, styles.alignSelf);
+export const GRID = styles.grid;

package/__flow__/utils/useInteractiveColor.js

@@ -1,6 +1,6 @@
 //@flow strict-local
-import {darken, lighten} from 'polished';
-import {useTheme} from 'styled-components';
+import { darken, lighten } from 'polished';
+import { useTheme } from 'styled-components';
 
 /**
  * The useInteractiveColor hook has context of theme mode (light or dark)
@@ -11,9 +11,7 @@ import {useTheme} from 'styled-components';
 const useInteractiveColor = (themeColor: string): string => {
   // Throw error if used outside of a ThemeProvider (styled-components)
   if (!useTheme()) {
-    throw new Error(
-      'useInteractiveColor() must be used within a Styled Components ThemeProvider'
-    );
+    throw new Error('useInteractiveColor() must be used within a Styled Components ThemeProvider');
   }
 
   // Get the current theme mode ie. 'light' or 'dark'
@@ -27,5 +25,4 @@ const useInteractiveColor = (themeColor: string): string => {
     return darken(0.2, themeColor);
   }
 };
-
-export {useInteractiveColor};
+export { useInteractiveColor };