@sproutsocial/racine 12.19.0 → 12.21.0

package/__flow__/LoaderButton/index.js

@@ -1,34 +1,50 @@
 // @flow
-import * as React from "react";
-import styled, { css } from "styled-components";
-import Box from "../Box";
-import Button, { type TypeProps as TypeButtonProps } from "../Button";
-import Loader from "../Loader";
-import { rgba } from "polished";
-import { COLOR_NEUTRAL_0, COLOR_NEUTRAL_1000 } from "@sproutsocial/seeds-color";
+import * as React from 'react';
+import styled, {css} from 'styled-components';
+import Box from '../Box';
+import Button, {type TypeProps as TypeButtonProps} from '../Button';
+import Loader from '../Loader';
+import {useTheme} from 'styled-components';
+import {rgba} from 'polished';
+import {COLOR_NEUTRAL_0, COLOR_NEUTRAL_1000} from '@sproutsocial/seeds-color';
 
 type TypeLoaderButtonProps = TypeButtonProps & {
   isLoading?: boolean,
   loaderLabel: string,
 };
 
-const getColor = (appearance) => {
+// TODO: This is a temporary solution to get the loader button to work with dark mode
+const getColor = (appearance, themeColorMode) => {
+  const selectColorBasedOnMode = themeColorMode === 'dark' ? 'light' : 'dark';
   switch (appearance) {
     /** "default" is @deprecated in favour of unstyled */
-    case "default":
-    case "unstyled":
-    case "outline":
-    case "secondary":
-      return "dark";
+    case 'default':
+      return selectColorBasedOnMode;
+    case 'unstyled':
+      return selectColorBasedOnMode;
+    case 'primary':
+      return 'light';
+    case 'secondary':
+      return selectColorBasedOnMode;
+    case 'destructive':
+      return 'light';
+    case 'placeholder':
+      return selectColorBasedOnMode;
+    case 'pill':
+      return selectColorBasedOnMode;
+    case 'outline':
+      // This case doesn't even make sense.... There's no outline button
+      // TODO: investigate if this is even used anywhere
+      return 'light';
     default:
-      return "light";
+      return 'light';
   }
 };
 
 const CustomLoader = styled(Loader)`
   &:after {
     ${(p) =>
-      p.color === "light" &&
+      p.color === 'light' &&
       css`
         border-color: ${rgba(COLOR_NEUTRAL_0, 0.5)}
           ${rgba(COLOR_NEUTRAL_0, 0.5)} ${rgba(COLOR_NEUTRAL_0, 1)}
@@ -36,7 +52,7 @@ const CustomLoader = styled(Loader)`
       `}
 
     ${(p) =>
-      p.color === "dark" &&
+      p.color === 'dark' &&
       css`
         border-color: ${rgba(COLOR_NEUTRAL_1000, 0.5)}
           ${rgba(COLOR_NEUTRAL_1000, 0.5)} ${rgba(COLOR_NEUTRAL_1000, 1)}
@@ -46,7 +62,7 @@ const CustomLoader = styled(Loader)`
 `;
 
 export const LoaderButton = ({
-  appearance = "unstyled",
+  appearance = 'unstyled',
   isLoading: _isLoading = false,
   disabled,
   loaderLabel,
@@ -54,6 +70,8 @@ export const LoaderButton = ({
   ...rest
 }: TypeLoaderButtonProps) => {
   const isLoading = Boolean(_isLoading);
+  const {mode: themeColorMode} = useTheme();
+
   return (
     <Button
       disabled={disabled || isLoading}
@@ -72,7 +90,7 @@ export const LoaderButton = ({
               text={loaderLabel}
               size="small"
               delay={false}
-              color={getColor(appearance)}
+              color={getColor(appearance, themeColorMode)}
             />
           </Box>
         )}

package/__flow__/LoaderButton/index.stories.js

@@ -1,10 +1,10 @@
 // @flow
-import React from "react";
-import LoaderButton from "./index";
-import Box from "../Box";
+import React from 'react';
+import LoaderButton from './index';
+import Box from '../Box';
 
 export default {
-  title: "LoaderButton",
+  title: 'Components/LoaderButton',
 };
 
 export const defaultStory = () => (
@@ -20,7 +20,7 @@ export const defaultStory = () => (
 );
 
 defaultStory.story = {
-  name: "Default",
+  name: 'Default',
 };
 
 export const primary = () => (
@@ -36,7 +36,7 @@ export const primary = () => (
 );
 
 primary.story = {
-  name: "Primary",
+  name: 'Primary',
 };
 
 export const secondary = () => (
@@ -52,5 +52,33 @@ export const secondary = () => (
 );
 
 secondary.story = {
-  name: "Secondary",
+  name: 'Secondary',
 };
+
+export const allLoaderButtons = () => (
+  <Box display="flex" justifyContent="space-around">
+    <LoaderButton isLoading loaderLabel="Loading...">
+      Loading Button
+    </LoaderButton>
+
+    <LoaderButton appearance="primary" isLoading loaderLabel="Loading...">
+      Loading Button
+    </LoaderButton>
+
+    <LoaderButton appearance="secondary" isLoading loaderLabel="Loading...">
+      Loading Button
+    </LoaderButton>
+
+    <LoaderButton appearance="destructive" isLoading loaderLabel="Loading...">
+      Loading Button
+    </LoaderButton>
+
+    <LoaderButton appearance="placeholder" isLoading loaderLabel="Loading...">
+      Loading Button
+    </LoaderButton>
+
+    <LoaderButton appearance="pill" isLoading loaderLabel="Loading...">
+      Loading Button
+    </LoaderButton>
+  </Box>
+);

package/__flow__/LoaderButton/index.test.js

@@ -1,35 +1,35 @@
 // @flow
-import React from "react";
-import { render } from "../utils/react-testing-library";
-import "jest-styled-components";
-import LoaderButton from "./";
+import React from 'react';
+import {render} from '../utils/react-testing-library';
+import 'jest-styled-components';
+import LoaderButton from './';
 
-describe("LoaderButton", () => {
-  it("should render properly", async () => {
-    const { container, runA11yCheck } = render(
+describe('LoaderButton', () => {
+  it('should render properly', async () => {
+    const {container, runA11yCheck} = render(
       <LoaderButton loaderLabel="loading">LoaderButton</LoaderButton>
     );
     expect(container).toBeTruthy();
     await runA11yCheck();
   });
 
-  it("should show the loader", async () => {
-    const { queryByText, rerender } = render(
+  it('should show the loader', async () => {
+    const {queryByText, rerender} = render(
       <LoaderButton loaderLabel="loading">text</LoaderButton>
     );
-    let loader = queryByText("loading");
-    let loaderButton = queryByText("text");
+    let loader = queryByText('loading');
+    let loaderButton = queryByText('text');
     expect(loader).toBeFalsy();
-    expect(loaderButton).toHaveAttribute("aria-hidden", "false");
+    expect(loaderButton).toHaveAttribute('aria-hidden', 'false');
 
     rerender(
       <LoaderButton isLoading loaderLabel="loading">
         text
       </LoaderButton>
     );
-    loader = queryByText("loading");
-    loaderButton = queryByText("text");
+    loader = queryByText('loading');
+    loaderButton = queryByText('text');
     expect(loader).toBeTruthy();
-    expect(loaderButton).toHaveAttribute("aria-hidden", "true");
+    expect(loaderButton).toHaveAttribute('aria-hidden', 'true');
   });
 });

package/__flow__/Menu/__snapshots__/index.test.js.snap

@@ -14,15 +14,6 @@ exports[`Menu AsMenuButton should match snapshot 1`] = `
   fill: currentColor;
 }
 
-_:-ms-fullscreen .c2,
-html .c3 {
-  width: 16px;
-}
-
-.pdf-page .c2 {
-  width: 16px;
-}
-
 .c1 {
   display: inline-block;
   box-sizing: border-box;

package/__flow__/Menu/constants.js

@@ -1,15 +1,15 @@
 // @flow
 
 export const MENU_ROLES = Object.freeze({
-  MENU: "menu",
-  LIST: "list",
-  LISTBOX: "listbox",
+  MENU: 'menu',
+  LIST: 'list',
+  LISTBOX: 'listbox',
 });
 
 export const MENU_ITEM_ROLES = Object.freeze({
-  MENUITEM: "menuitem",
-  LISTITEM: "listitem",
-  OPTION: "option",
-  RADIO: "menuitemradio",
-  CHECKBOX: "menuitemcheckbox",
+  MENUITEM: 'menuitem',
+  LISTITEM: 'listitem',
+  OPTION: 'option',
+  RADIO: 'menuitemradio',
+  CHECKBOX: 'menuitemcheckbox',
 });

package/__flow__/Menu/descendants.js

@@ -1,6 +1,6 @@
 // @flow
 /* eslint-disable */
-import * as React from "react";
+import * as React from 'react';
 import {
   createContext,
   useState,
@@ -9,8 +9,8 @@ import {
   useContext,
   useCallback,
   useMemo,
-  useRef
-} from "react";
+  useRef,
+} from 'react';
 
 /**
  * These hooks and utilities are largely copied from the @reach-ui/descendents package. They consider the package
@@ -21,16 +21,18 @@ import {
 export type TypeDescendant<ElementType, DescendantProps> = {|
   ...DescendantProps,
   element: ElementType | null,
-  index: number
+  index: number,
 |};
 
 type TypeDescendantContext<ElementType, DescendantProps> = {
   descendants: TypeDescendant<ElementType, DescendantProps>[],
   registerDescendant(
-    descendant: $Diff<TypeDescendant<ElementType, DescendantProps>,
-      {| index: number |}>
+    descendant: $Diff<
+      TypeDescendant<ElementType, DescendantProps>,
+      {|index: number|}
+    >
   ): void,
-  unregisterDescendant(element: ElementType | null): void
+  unregisterDescendant(element: ElementType | null): void,
 };
 
 const noop = () => {};
@@ -60,7 +62,7 @@ export function wrapEvent<EventType: SyntheticEvent<> | Event>(
   theirHandler: ?(event: EventType) => any,
   ourHandler: (event: EventType) => any
 ): (event: EventType) => any {
-  return event => {
+  return (event) => {
     theirHandler && theirHandler(event);
     if (!event.defaultPrevented) {
       return ourHandler(event);
@@ -70,9 +72,9 @@ export function wrapEvent<EventType: SyntheticEvent<> | Event>(
 
 export function canUseDOM() {
   return (
-    typeof window !== "undefined" &&
-    typeof window.document !== "undefined" &&
-    typeof window.document.createElement !== "undefined"
+    typeof window !== 'undefined' &&
+    typeof window.document !== 'undefined' &&
+    typeof window.document.createElement !== 'undefined'
   );
 }
 
@@ -97,7 +99,7 @@ export function createDescendantContext<ElementType, DescendantProps>(
     descendants: [],
     registerDescendant: noop,
     unregisterDescendant: noop,
-    ...initialValue
+    ...initialValue,
   });
 }
 
@@ -130,26 +132,25 @@ export function useDescendant<ElementType, DescendantProps>(
     element,
     ...rest
   }: {|
-    ...$Diff<TypeDescendant<ElementType, DescendantProps>, {| index: number |}>,
-    context: React$Context<TypeDescendantContext<ElementType, DescendantProps>>
+    ...$Diff<TypeDescendant<ElementType, DescendantProps>, {|index: number|}>,
+    context: React$Context<TypeDescendantContext<ElementType, DescendantProps>>,
   |},
   indexProp?: number
 ) {
   let [, forceUpdate] = useState();
-  let { registerDescendant, unregisterDescendant, descendants } = useContext<
-    TypeDescendantContext<ElementType, DescendantProps>
-  >(context);
+  let {registerDescendant, unregisterDescendant, descendants} =
+    useContext<TypeDescendantContext<ElementType, DescendantProps>>(context);
 
   // Prevent any flashing
   useIsomorphicLayoutEffect(() => {
     if (!element) forceUpdate({});
-    registerDescendant({ element, ...rest });
+    registerDescendant({element, ...rest});
     return () => unregisterDescendant(element);
   }, [element, ...Object.values(rest)]);
 
   return indexProp
     ? indexProp
-    : descendants.findIndex(item => item.element === element);
+    : descendants.findIndex((item) => item.element === element);
 }
 
 export function useDescendants<ElementType, DescendantProps>() {
@@ -160,24 +161,26 @@ export function DescendantProvider<ElementType: HTMLElement, DescendantProps>({
   context: Ctx,
   children,
   items,
-  set
+  set,
 }: {
   context: React$Context<TypeDescendantContext<ElementType, DescendantProps>>,
   children: React$Node,
   items: TypeDescendant<ElementType, DescendantProps>[],
-  set: ((TypeDescendant<ElementType, DescendantProps>[]) => any) => any
+  set: ((TypeDescendant<ElementType, DescendantProps>[]) => any) => any,
 }) {
   let registerDescendant = useCallback(
     ({
       element,
       ...rest
-    }: $Diff<TypeDescendant<ElementType, DescendantProps>,
-      {| index: number |}>) => {
+    }: $Diff<
+      TypeDescendant<ElementType, DescendantProps>,
+      {|index: number|}
+    >) => {
       if (!element) {
         return;
       }
 
-      set(items => {
+      set((items) => {
         let newItem: TypeDescendant<ElementType, DescendantProps>;
         let newItems: TypeDescendant<ElementType, DescendantProps>[];
         // If there are no items, register at index 0 and bail.
@@ -185,10 +188,10 @@ export function DescendantProvider<ElementType: HTMLElement, DescendantProps>({
           newItem = {
             element,
             index: 0,
-            ...rest
+            ...rest,
           };
           newItems = [...items, newItem];
-        } else if (items.find(item => item.element === element)) {
+        } else if (items.find((item) => item.element === element)) {
           // If the element is already registered, just use the same array
           newItems = items;
         } else {
@@ -204,7 +207,7 @@ export function DescendantProvider<ElementType: HTMLElement, DescendantProps>({
           // called in an effect every time the descendants state value changes,
           // we should be sure that this index is accurate when descendent
           // elements come or go from our component.
-          let index = items.findIndex(item => {
+          let index = items.findIndex((item) => {
             if (!item.element || !element) {
               return false;
             }
@@ -221,7 +224,7 @@ export function DescendantProvider<ElementType: HTMLElement, DescendantProps>({
           newItem = {
             element,
             index,
-            ...rest
+            ...rest,
           };
 
           // If an index is not found we will push the element to the end.
@@ -231,11 +234,11 @@ export function DescendantProvider<ElementType: HTMLElement, DescendantProps>({
             newItems = [
               ...items.slice(0, index),
               newItem,
-              ...items.slice(index)
+              ...items.slice(index),
             ];
           }
         }
-        return newItems.map((item, index) => ({ ...item, index }));
+        return newItems.map((item, index) => ({...item, index}));
       });
     },
     // set is a state setter initialized by the useDescendants hook.
@@ -247,14 +250,20 @@ export function DescendantProvider<ElementType: HTMLElement, DescendantProps>({
 
   let unregisterDescendant = useCallback(
     (
-      element: $PropertyType<TypeDescendant<ElementType, DescendantProps>,
-        "element">
+      element: $PropertyType<
+        TypeDescendant<ElementType, DescendantProps>,
+        'element'
+      >
     ) => {
       if (!element) {
         return;
       }
 
-      set(items => items.filter(item => element !== item.element));
+      set((items) =>
+        items
+          .filter((item) => element !== item.element)
+          .map((item, index) => ({...item, index}))
+      );
     },
     // set is a state setter initialized by the useDescendants hook.
     // We can safely ignore the lint warning here because it will not change
@@ -263,14 +272,14 @@ export function DescendantProvider<ElementType: HTMLElement, DescendantProps>({
     []
   );
 
-  const value: TypeDescendantContext<ElementType,
-    DescendantProps> = useMemo(() => {
-    return {
-      descendants: items,
-      registerDescendant,
-      unregisterDescendant
-    };
-  }, [items, registerDescendant, unregisterDescendant]);
+  const value: TypeDescendantContext<ElementType, DescendantProps> =
+    useMemo(() => {
+      return {
+        descendants: items,
+        registerDescendant,
+        unregisterDescendant,
+      };
+    }, [items, registerDescendant, unregisterDescendant]);
 
   return <Ctx.Provider value={value}>{children}</Ctx.Provider>;
 }
@@ -283,43 +292,43 @@ export function useDescendantKeyDown<
   context: React$Context<TypeDescendantContext<ElementType, DescendantProps>>,
   options: {
     currentIndex?: number,
-    key?: K | "option",
+    key?: K | 'option',
     filter?: (
       descendant: TypeDescendant<ElementType, DescendantProps>
     ) => boolean,
-    orientation?: "vertical" | "horizontal" | "both",
+    orientation?: 'vertical' | 'horizontal' | 'both',
     rotate?: boolean,
     rtl?: boolean,
     callback(
       nextOption:
         | TypeDescendant<ElementType, DescendantProps>
         | $Values<TypeDescendant<ElementType, DescendantProps>>
-    ): void
+    ): void,
   }
 ) {
-  let { descendants } = useContext(context);
+  let {descendants} = useContext(context);
   let {
     callback,
     currentIndex,
     filter,
-    key = "index",
-    orientation = "vertical",
+    key = 'index',
+    orientation = 'vertical',
     rotate = true,
-    rtl = false
+    rtl = false,
   } = options;
   let index = currentIndex ? currentIndex : -1;
 
   return function handleKeyDown(event: SyntheticKeyboardEvent<>) {
     if (
       ![
-        "ArrowDown",
-        "ArrowUp",
-        "ArrowLeft",
-        "ArrowRight",
-        "PageUp",
-        "PageDown",
-        "Home",
-        "End"
+        'ArrowDown',
+        'ArrowUp',
+        'ArrowLeft',
+        'ArrowRight',
+        'PageUp',
+        'PageDown',
+        'Home',
+        'End',
       ].includes(event.key)
     ) {
       return;
@@ -335,7 +344,7 @@ export function useDescendantKeyDown<
     // descendants array.
     if (filter) {
       index = selectableDescendants.findIndex(
-        descendant => descendant.index === currentIndex
+        (descendant) => descendant.index === currentIndex
       );
     }
 
@@ -374,55 +383,55 @@ export function useDescendantKeyDown<
     }
 
     switch (event.key) {
-      case "ArrowDown":
-        if (orientation === "vertical" || orientation === "both") {
+      case 'ArrowDown':
+        if (orientation === 'vertical' || orientation === 'both') {
           event.preventDefault();
           let next = getNextOption();
-          callback(key === "option" ? next : next[key]);
+          callback(key === 'option' ? next : next[key]);
         }
         break;
-      case "ArrowUp":
-        if (orientation === "vertical" || orientation === "both") {
+      case 'ArrowUp':
+        if (orientation === 'vertical' || orientation === 'both') {
           event.preventDefault();
           let prev = getPreviousOption();
-          callback(key === "option" ? prev : prev[key]);
+          callback(key === 'option' ? prev : prev[key]);
         }
         break;
-      case "ArrowLeft":
-        if (orientation === "horizontal" || orientation === "both") {
+      case 'ArrowLeft':
+        if (orientation === 'horizontal' || orientation === 'both') {
           event.preventDefault();
           let nextOrPrev = (rtl ? getNextOption : getPreviousOption)();
-          callback(key === "option" ? nextOrPrev : nextOrPrev[key]);
+          callback(key === 'option' ? nextOrPrev : nextOrPrev[key]);
         }
         break;
-      case "ArrowRight":
-        if (orientation === "horizontal" || orientation === "both") {
+      case 'ArrowRight':
+        if (orientation === 'horizontal' || orientation === 'both') {
           event.preventDefault();
           let prevOrNext = (rtl ? getPreviousOption : getNextOption)();
-          callback(key === "option" ? prevOrNext : prevOrNext[key]);
+          callback(key === 'option' ? prevOrNext : prevOrNext[key]);
         }
         break;
-      case "PageUp":
+      case 'PageUp':
         event.preventDefault();
-        let prevOrFirst = (event.ctrlKey
-          ? getPreviousOption
-          : getFirstOption)();
-        callback(key === "option" ? prevOrFirst : prevOrFirst[key]);
+        let prevOrFirst = (
+          event.ctrlKey ? getPreviousOption : getFirstOption
+        )();
+        callback(key === 'option' ? prevOrFirst : prevOrFirst[key]);
         break;
-      case "Home":
+      case 'Home':
         event.preventDefault();
         let first = getFirstOption();
-        callback(key === "option" ? first : first[key]);
+        callback(key === 'option' ? first : first[key]);
         break;
-      case "PageDown":
+      case 'PageDown':
         event.preventDefault();
         let nextOrLast = (event.ctrlKey ? getNextOption : getLastOption)();
-        callback(key === "option" ? nextOrLast : nextOrLast[key]);
+        callback(key === 'option' ? nextOrLast : nextOrLast[key]);
         break;
-      case "End":
+      case 'End':
         event.preventDefault();
         let last = getLastOption();
-        callback(key === "option" ? last : last[key]);
+        callback(key === 'option' ? last : last[key]);
         break;
     }
   };