@sproutsocial/racine 11.4.1-input-beta.0 → 11.5.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Change Log
 
+## 11.5.0
+
+### Minor Changes
+
+- fa8a45d: Dependency upgrades: upgraded severe vulnerabilities as well as storybook and jest suite fixes. Upgraded styled components from beta to stable v5.2.3.
+
+## 11.4.1
+
+### Patch Changes
+
+- 89c935f: Handle focus management in Input handleClear more consistently
+  - Previously, focus would be returned to the input when Input.ClearButton was triggered only if the innerRef prop was undefined or an object, not if it was a function.
+  - Now, focus is always returned to the input when the clear button is clicked, regardless of the type of the innerRef prop.
+
 ## 11.4.0
 
 ### Minor Changes

package/__flow__/Button/index.js

@@ -84,4 +84,6 @@ const Button = ({
   );
 };
 
+Button.displayName = "Button";
+
 export default Button;

package/__flow__/Button/index.stories.js

@@ -1,5 +1,4 @@
 import React from "react";
-import { boolean, text, number } from "@storybook/addon-knobs";
 import Button from "./index";
 import Icon from "../Icon";
 import Box from "../Box";
@@ -8,155 +7,140 @@ export default {
   title: "Button",
 };
 
-export const defaultStory = () => (
-  <Button
-    appearance={text("appearance", "default")}
-    onClick={() => alert("Testing...")}
-  >
+export const defaultStory = (args) => (
+  <Button {...args} onClick={() => alert("Testing...")}>
     Default
   </Button>
 );
 
+defaultStory.args = { appearance: "default" };
+
 defaultStory.story = {
   name: "Default",
 };
 
-export const primary = () => (
-  <Button
-    appearance={text("appearance", "primary")}
-    onClick={() => alert("Testing...")}
-  >
+export const primary = (args) => (
+  <Button {...args} onClick={() => alert("Testing...")}>
     Primary Button
   </Button>
 );
 
+primary.args = { appearance: "primary" };
+
 primary.story = {
   name: "Primary",
 };
 
-export const secondary = () => (
-  <Button appearance={text("appearance", "secondary")}>Secondary Button</Button>
-);
+export const secondary = (args) => <Button {...args}>Secondary Button</Button>;
+
+secondary.args = { appearance: "secondary" };
 
 secondary.story = {
   name: "Secondary",
 };
 
-export const destructive = () => (
-  <Button appearance={text("appearance", "destructive")}>
-    Destructive Button
-  </Button>
+export const destructive = (args) => (
+  <Button {...args}>Destructive Button</Button>
 );
 
+destructive.args = { appearance: "destructive" };
 destructive.story = {
   name: "Destructive",
 };
 
-export const placeholder = () => (
-  <Button appearance={text("appearance", "placeholder")}>
-    Placeholder Button
-  </Button>
+export const placeholder = (args) => (
+  <Button {...args}>Placeholder Button</Button>
 );
 
+placeholder.args = { appearance: "placeholder" };
 placeholder.story = {
   name: "Placeholder",
 };
 
-export const largeButton = () => (
-  <Button
-    appearance={text("appearance", "primary")}
-    size={text("size", "large")}
-  >
-    Large Button
-  </Button>
-);
+export const largeButton = (args) => <Button {...args}>Large Button</Button>;
+largeButton.args = { size: "large", appearance: "primary" };
 
 largeButton.story = {
   name: "Large button",
 };
 
-export const pillButton = () => (
+export const pillButton = (args) => (
   <Box bg="container.background.base" p={400}>
-    <Button appearance={text("shape", "pill")}>
+    <Button {...args}>
       <Icon name="reply" mr={350} />
       Pill Button
     </Button>
   </Box>
 );
-
+pillButton.args = { appearance: "pill" };
 pillButton.story = {
   name: "Pill button",
 };
 
-export const pillIconOnlyButton = () => (
+export const pillIconOnlyButton = (args) => (
   <Box bg="container.background.base" p={400}>
-    <Button appearance={text("shape", "pill")} ariaLabel="This is a label">
+    <Button {...args} ariaLabel="This is a label">
       <Icon name="circle-check-outline" />
     </Button>
   </Box>
 );
 
+pillIconOnlyButton.args = { appearance: "pill" };
 pillIconOnlyButton.story = {
   name: "Pill icon only button",
 };
 
-export const activeButton = () => (
-  <Button
-    appearance={text("appearance", "secondary")}
-    active={boolean("active", true)}
-  >
-    Active Button
-  </Button>
-);
+export const activeButton = (args) => <Button {...args}>Active Button</Button>;
 
+activeButton.args = { appearance: "secondary", active: true };
 activeButton.story = {
   name: "Active button",
 };
 
-export const buttonAsALink = () => (
-  <Button
-    href={text("href", "http://sproutsocial.style")}
-    external={boolean("external", true)}
-    appearance={text("appearance", "primary")}
-  >
-    Button using anchor element
-  </Button>
+export const buttonAsALink = (args) => (
+  <Button {...args}>Button using anchor element</Button>
 );
-
+buttonAsALink.args = {
+  appearance: "primary",
+  external: true,
+  href: "http://sproutsocial.style",
+};
 buttonAsALink.story = {
   name: "Button as a link",
 };
 
-export const disabledButton = () => (
-  <Button
-    appearance={text("appearance", "primary")}
-    disabled={text("disabled", "true")}
-  >
-    This Button is disabled
-  </Button>
+export const disabledButton = (args) => (
+  <Button {...args}>This Button is disabled</Button>
 );
-
+disabledButton.args = {
+  appearance: "primary",
+  disabled: true,
+};
 disabledButton.story = {
   name: "Disabled button",
 };
 
-export const fullWidthButton = () => (
-  <Button appearance={text("appearance", "primary")} width={number("width", 1)}>
-    Full-Width Button
-  </Button>
+export const fullWidthButton = (args) => (
+  <Button {...args}>Full-Width Button</Button>
 );
-
+fullWidthButton.args = {
+  appearance: "primary",
+  width: 1,
+};
 fullWidthButton.story = {
   name: "Full width button",
 };
 
-export const withIcon = () => (
-  <Button appearance={text("appearance", "secondary")}>
+export const withIcon = (args) => (
+  <Button {...args}>
     <Icon name="twitter" mr={350} />
     Secondary Button
   </Button>
 );
 
+withIcon.args = {
+  appearance: "secondary",
+};
 withIcon.story = {
   name: "With icon",
 };

package/__flow__/Button/styles.js

@@ -99,7 +99,7 @@ const Container: StyledComponent<any, TypeTheme, *> = styled.button`
   ${LAYOUT}
   ${COMMON}
 `;
-
+Container.displayName = "Button-Container";
 export default Container;
 
 //${props.theme.mode === "dark" ? "screen" : "multiply"}

package/__flow__/Checkbox/styles.js

@@ -182,90 +182,90 @@ const getIcon = (type, color) => {
 
 // eslint-disable-next-line prettier/prettier
 export const CheckboxContainer: StyledComponent<any, TypeTheme, *> = styled.span(
-  (props) => css`
-    display: inline-flex;
-    align-items: center;
-    box-sizing: border-box;
-    position: relative;
-    transition: all ${props.theme.duration.fast} ${props.theme.easing.ease_in};
-
-    @supports (-webkit-appearance: none) {
-      &:before {
-        /* stylelint-disable */
-        content: url("data:image/svg+xml;utf8,${getIcon(
-          props.indeterminate ? "indeterminate" : "check",
-
-          props.checked
-            ? props.theme.colors.form.background.base
-            : props.theme.colors.form.border.base
-        )}");
-        opacity: ${props.checked ? 1 : 0};
-        position: absolute;
-        width: ${props.theme.space[400]};
-        height: ${props.theme.space[400]};
-        text-align: center;
-        transform: translateY(1px);
-        line-height: 1;
-        margin: auto;
-        pointer-events: none;
-        transition: ${props.theme.duration.fast}
-          ${props.theme.easing.ease_inout};
-      }
-
-      &:hover:before {
-        opacity: ${props.disabled && !props.checked ? 0 : 1};
-      }
-
-      ${props.disabled &&
-      css`
-        opacity: 0.4;
-      `}
-
-      input[type='checkbox'] {
-        box-sizing: border-box;
-        appearance: none;
-        margin: 0;
-        padding: 0;
-        width: ${props.theme.space[400]};
-        height: ${props.theme.space[400]};
-        border: 1px solid ${props.theme.colors.form.border.base};
-        border-radius: 4px;
-        background-color: ${props.theme.colors.form.background.base};
-        transition: all ${props.theme.duration.fast}
-          ${props.theme.easing.ease_in};
-        cursor: ${props.disabled ? "not-allowed" : "pointer"};
-        flex-shrink: 0;
-
-        &:not(:checked) {
-          ${!props.indeterminate &&
-          css`
-            border-color: ${props.theme.colors
-              .neutral[300]} !important; /* We don't want the focus ring to remove the border */
-            background-color: ${props.theme.colors.form.background.base};
-          `}
+    (props) => css`
+      display: inline-flex;
+      align-items: center;
+      box-sizing: border-box;
+      position: relative;
+      transition: all ${props.theme.duration.fast} ${props.theme.easing.ease_in};
+
+      @supports (-webkit-appearance: none) {
+        &:before {
+          /* stylelint-disable */
+          content: url("data:image/svg+xml;utf8,${getIcon(
+            props.indeterminate ? "indeterminate" : "check",
+
+            props.checked
+              ? props.theme.colors.form.background.base
+              : props.theme.colors.form.border.base
+          )}");
+          opacity: ${props.checked ? 1 : 0};
+          position: absolute;
+          width: ${props.theme.space[400]};
+          height: ${props.theme.space[400]};
+          text-align: center;
+          transform: translateY(1px);
+          line-height: 1;
+          margin: auto;
+          pointer-events: none;
+          transition: ${props.theme.duration.fast}
+            ${props.theme.easing.ease_inout};
         }
 
-        &:checked {
-          border-color: ${props.theme.colors.form.border.selected};
-          background-color: ${props.theme.colors.form.background.selected};
+        &:hover:before {
+          opacity: ${props.disabled && !props.checked ? 0 : 1};
         }
 
-        ${props.indeterminate &&
-        props.checked &&
+        ${props.disabled &&
         css`
-          border-color: ${props.theme.colors.form.border.selected} !important;
-          background-color: ${props.theme.colors.form.background
-            .selected} !important;
+          opacity: 0.4;
         `}
 
-        &:focus {
-          ${focusRing}
+        input[type='checkbox'] {
+          box-sizing: border-box;
+          appearance: none;
+          margin: 0;
+          padding: 0;
+          width: ${props.theme.space[400]};
+          height: ${props.theme.space[400]};
+          border: 1px solid ${props.theme.colors.form.border.base};
+          border-radius: 4px;
+          background-color: ${props.theme.colors.form.background.base};
+          transition: all ${props.theme.duration.fast}
+            ${props.theme.easing.ease_in};
+          cursor: ${props.disabled ? "not-allowed" : "pointer"};
+          flex-shrink: 0;
+
+          &:not(:checked) {
+            ${!props.indeterminate &&
+            css`
+              border-color: ${props.theme.colors
+                .neutral[300]} !important; /* We don't want the focus ring to remove the border */
+              background-color: ${props.theme.colors.form.background.base};
+            `}
+          }
+
+          &:checked {
+            border-color: ${props.theme.colors.form.border.selected};
+            background-color: ${props.theme.colors.form.background.selected};
+          }
+
+          ${props.indeterminate &&
+          props.checked &&
+          css`
+            border-color: ${props.theme.colors.form.border.selected} !important;
+            background-color: ${props.theme.colors.form.background
+              .selected} !important;
+          `}
+
+          &:focus {
+            ${focusRing}
+          }
         }
       }
-    }
 
-    ${COMMON}
-  `
-);
+      ${COMMON}
+    `
+  );
 
 export default Container;

package/__flow__/Collapsible/index.js

@@ -73,9 +73,8 @@ const Trigger = ({ children, ...rest }) => {
 };
 
 const Panel = ({ children, ...rest }) => {
-  const { isOpen, id, offset, collapsedHeight, openHeight } = useContext(
-    CollapsibleContext
-  );
+  const { isOpen, id, offset, collapsedHeight, openHeight } =
+    useContext(CollapsibleContext);
   const ref = useRef();
   const measurement = useMeasure(ref);
   const [isHidden, setIsHidden] = useState(undefined);

package/__flow__/EmptyState/index.test.js

@@ -105,7 +105,7 @@ describe("EmptyState", () => {
       <EmptyState
         media={
           <Image
-            alt="No assets matching your
 search or filters"
+            alt="No assets matching your
  search or filters"
             src="https://cl.ly/db498c7682df/download/analytics.svg"
             m={0}
           />

package/__flow__/Image/index.js

@@ -80,16 +80,8 @@ export default class Image extends React.Component<TypeProps, TypeState> {
   };
 
   render() {
-    const {
-      alt,
-      title,
-      onClick,
-      onError,
-      onLoad,
-      src,
-      qa,
-      ...rest
-    } = this.props;
+    const { alt, title, onClick, onError, onLoad, src, qa, ...rest } =
+      this.props;
 
     return (
       <ImageContainer

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

@@ -14,12 +14,12 @@ exports[`Menu AsMenuButton should match snapshot 1`] = `
   fill: currentColor;
 }
 
-_:-ms-fullscreen .c3,
+_:-ms-fullscreen .c2,
 html .c3 {
   width: 16px;
 }
 
-.pdf-page .c3 {
+.pdf-page .c2 {
   width: 16px;
 }
 

package/__flow__/SegmentedControl/index.js

@@ -17,9 +17,8 @@ type TypeSegmentedControlContext = {
   onChange: (e: SyntheticInputEvent<HTMLInputElement>) => void,
 };
 
-const SegmentedControlContext = React.createContext<?TypeSegmentedControlContext>(
-  null
-);
+const SegmentedControlContext =
+  React.createContext<?TypeSegmentedControlContext>(null);
 
 type TypeSegmentedControlItemProps = {
   /** The value of this item. Should be unique among sibling items. */

package/__flow__/TableCell/index.js

@@ -22,15 +22,8 @@ export type TypeTableCell = {
  */
 export default class TableCell extends React.Component<TypeTableCell> {
   render() {
-    const {
-      id,
-      content,
-      colSpan,
-      width,
-      align,
-      children,
-      ...rest
-    } = this.props;
+    const { id, content, colSpan, width, align, children, ...rest } =
+      this.props;
 
     return (
       <Container

package/__flow__/ToggleHint/index.js

@@ -32,15 +32,8 @@ export default class ToggleHint extends React.Component<TypeProps> {
   };
 
   render() {
-    const {
-      icon,
-      isOpen,
-      openString,
-      closeString,
-      qa,
-      className,
-      ...rest
-    } = this.props;
+    const { icon, isOpen, openString, closeString, qa, className, ...rest } =
+      this.props;
 
     return (
       <Container

package/__flow__/setupTests.js

@@ -1,5 +1,5 @@
 import "mutationobserver-shim";
-import "jest-dom/extend-expect";
+import "@testing-library/jest-dom/extend-expect";
 import "jest-axe/extend-expect";
 import "babel-polyfill";
 import "jest-styled-components";

package/__flow__/systemProps/color.js

@@ -14,7 +14,8 @@ import type {
 
 // https://styled-system.com/table#color
 
-type TypeBackgroundColorSystemProp = TypeResponsiveBaseSystemProp<BackgroundColorProperty>;
+type TypeBackgroundColorSystemProp =
+  TypeResponsiveBaseSystemProp<BackgroundColorProperty>;
 export type TypeColorSystemProps = $ReadOnly<{|
   backgroundColor?: TypeBackgroundColorSystemProp,
   bg?: TypeBackgroundColorSystemProp,

package/__flow__/systemProps/tests/__snapshots__/layout.test.js.snap

@@ -1,19 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`layout system props display 1`] = `
-.c0 {
-  display: -webkit-string;
-  display: string;
-}
-
-<div>
-  <div
-    class="c0"
-    display="string"
-  />
-</div>
-`;
-
 exports[`layout system props height 1`] = `
 .c0 {
   height: string;

package/__flow__/systemProps/tests/layout.test.js

@@ -10,15 +10,6 @@ describe("layout system props", () => {
     ${layoutSystemProps}
   `;
 
-  test("display", () => {
-    const { container } = render(
-      <>
-        <Component display="string" />
-      </>
-    );
-    expect(container).toMatchSnapshot();
-  });
-
   test("height", () => {
     const { container } = render(
       <>

package/__flow__/utils/responsiveProps/index.test.js

@@ -19,21 +19,13 @@ describe("normalizeResponsiveProp", () => {
 
   it("should handle arrays with 4 values", () => {
     expect(normalizeResponsiveProp([0, 1, 2, 3])).toMatchObject([
-      0,
-      1,
-      2,
-      3,
-      3,
+      0, 1, 2, 3, 3,
     ]);
   });
 
   it("should handle arrays with 5 values", () => {
     expect(normalizeResponsiveProp([0, 1, 2, 3, 4])).toMatchObject([
-      0,
-      1,
-      2,
-      3,
-      4,
+      0, 1, 2, 3, 4,
     ]);
   });
 });

package/commonjs/Button/index.js

@@ -65,5 +65,6 @@ var Button = function Button(_ref) {
   }, qa, rest), children);
 };
 
+Button.displayName = "Button";
 var _default = Button;
 exports.default = _default;

package/commonjs/Button/styles.js

@@ -60,6 +60,7 @@ var Container = _styledComponents.default.button.withConfig({
   return props.appearance === "pill" && (0, _styledComponents.css)(["display:inline-flex;align-items:center;justify-content:center;mix-blend-mode:", ";", ""], props.theme.mode === "dark" ? "screen" : "multiply", _mixins.pill);
 }, _styles.default, _systemProps.LAYOUT, _systemProps.COMMON);
 
+Container.displayName = "Button-Container";
 var _default = Container; //${props.theme.mode === "dark" ? "screen" : "multiply"}
 
 exports.default = _default;

package/commonjs/Message/styles.js

@@ -105,7 +105,7 @@ exports.MessageBody = MessageBody;
 var MessageFooter = (0, _styledComponents.default)(_Box.default).withConfig({
   displayName: "styles__MessageFooter",
   componentId: "sc-1ju6d1v-3"
-})(["padding-bottom:", ";padding-left:", ";padding-right:", ";border-radius:0 0 ", " ", ";display:flex;justify-content:space-between;align-items:center;flex-wrap:", ";>:first-child{margin-left:-", ";}"], function (props) {
+})(["padding-bottom:", ";padding-left:", ";padding-right:", ";border-radius:0 0 ", " ", ";display:flex;justify-content:space-between;align-items:center;flex-wrap:", ";> :first-child{margin-left:-", ";}"], function (props) {
   return props.density === _Message.default.DENSITIES.CONDENSED ? 0 : props.theme.space[300];
 }, function (props) {
   return getContentPadding(props);

package/lib/Button/index.js

@@ -53,4 +53,5 @@ var Button = function Button(_ref) {
   }, qa, rest), children);
 };
 
+Button.displayName = "Button";
 export default Button;

package/lib/Button/styles.js

@@ -44,4 +44,5 @@ var Container = styled.button.withConfig({
 }, function (props) {
   return props.appearance === "pill" && css(["display:inline-flex;align-items:center;justify-content:center;mix-blend-mode:", ";", ""], props.theme.mode === "dark" ? "screen" : "multiply", pill);
 }, Icon, LAYOUT, COMMON);
+Container.displayName = "Button-Container";
 export default Container; //${props.theme.mode === "dark" ? "screen" : "multiply"}

package/lib/Message/styles.js

@@ -91,7 +91,7 @@ export var MessageBody = styled(Box).withConfig({
 export var MessageFooter = styled(Box).withConfig({
   displayName: "styles__MessageFooter",
   componentId: "sc-1ju6d1v-3"
-})(["padding-bottom:", ";padding-left:", ";padding-right:", ";border-radius:0 0 ", " ", ";display:flex;justify-content:space-between;align-items:center;flex-wrap:", ";>:first-child{margin-left:-", ";}"], function (props) {
+})(["padding-bottom:", ";padding-left:", ";padding-right:", ";border-radius:0 0 ", " ", ";display:flex;justify-content:space-between;align-items:center;flex-wrap:", ";> :first-child{margin-left:-", ";}"], function (props) {
   return props.density === Message.DENSITIES.CONDENSED ? 0 : props.theme.space[300];
 }, function (props) {
   return getContentPadding(props);