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

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/Input/index.js

@@ -95,10 +95,14 @@ var isClearButton = function isClearButton(elem) {
 var Input = /*#__PURE__*/function (_React$Component) {
   _inheritsLoose(Input, _React$Component);
 
-  function Input(props) {
+  function Input() {
     var _this;
 
-    _this = _React$Component.call(this, props) || this;
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
     _this.inputRef = /*#__PURE__*/React.createRef();
 
     _this.handleBlur = function (e) {
@@ -113,9 +117,7 @@ var Input = /*#__PURE__*/function (_React$Component) {
     };
 
     _this.handleChange = function (e) {
-      _this.props.onChange == null ? void 0 : _this.props.onChange(e, e.currentTarget.value);
-
-      _this.updateState(e.currentTarget.value);
+      return _this.props.onChange == null ? void 0 : _this.props.onChange(e, e.currentTarget.value);
     };
 
     _this.handleFocus = function (e) {
@@ -134,22 +136,6 @@ var Input = /*#__PURE__*/function (_React$Component) {
       return _this.props.onPaste == null ? void 0 : _this.props.onPaste(e, e.currentTarget.value);
     };
 
-    _this.updateState = function (value) {
-      var hasValue = value !== "";
-      var hadValue = _this.state.hasValue; // Only update state if the value has changed to avoid unnecessary renders.
-
-      if (hasValue !== hadValue) {
-        _this.setState({
-          hasValue: hasValue
-        });
-      }
-    };
-
-    _this.state = {
-      // tracking hasValue in state allows us to hide ClearButton when there is no value to clear
-      // for both controlled and uncontrolled inputs.
-      hasValue: !!props.value
-    };
     return _this;
   }
 
@@ -218,7 +204,7 @@ var Input = /*#__PURE__*/function (_React$Component) {
     }, rest), /*#__PURE__*/React.createElement(InputContext.Provider, {
       value: {
         handleClear: this.handleClear,
-        hasValue: this.state.hasValue,
+        hasValue: !!value,
         clearButtonLabel: clearButtonLabel,
         onClear: onClear,
         size: size

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/Input/index.js

@@ -78,10 +78,14 @@ var isClearButton = function isClearButton(elem) {
 var Input = /*#__PURE__*/function (_React$Component) {
   _inheritsLoose(Input, _React$Component);
 
-  function Input(props) {
+  function Input() {
     var _this;
 
-    _this = _React$Component.call(this, props) || this;
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
     _this.inputRef = /*#__PURE__*/React.createRef();
 
     _this.handleBlur = function (e) {
@@ -96,9 +100,7 @@ var Input = /*#__PURE__*/function (_React$Component) {
     };
 
     _this.handleChange = function (e) {
-      _this.props.onChange == null ? void 0 : _this.props.onChange(e, e.currentTarget.value);
-
-      _this.updateState(e.currentTarget.value);
+      return _this.props.onChange == null ? void 0 : _this.props.onChange(e, e.currentTarget.value);
     };
 
     _this.handleFocus = function (e) {
@@ -117,22 +119,6 @@ var Input = /*#__PURE__*/function (_React$Component) {
       return _this.props.onPaste == null ? void 0 : _this.props.onPaste(e, e.currentTarget.value);
     };
 
-    _this.updateState = function (value) {
-      var hasValue = value !== "";
-      var hadValue = _this.state.hasValue; // Only update state if the value has changed to avoid unnecessary renders.
-
-      if (hasValue !== hadValue) {
-        _this.setState({
-          hasValue: hasValue
-        });
-      }
-    };
-
-    _this.state = {
-      // tracking hasValue in state allows us to hide ClearButton when there is no value to clear
-      // for both controlled and uncontrolled inputs.
-      hasValue: !!props.value
-    };
     return _this;
   }
 
@@ -201,7 +187,7 @@ var Input = /*#__PURE__*/function (_React$Component) {
     }, rest), /*#__PURE__*/React.createElement(InputContext.Provider, {
       value: {
         handleClear: this.handleClear,
-        hasValue: this.state.hasValue,
+        hasValue: !!value,
         clearButtonLabel: clearButtonLabel,
         onClear: onClear,
         size: size

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);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/racine",
-  "version": "11.4.2-input-beta.0",
+  "version": "11.5.0",
   "license": "MIT",
   "files": [
     "__flow__",
@@ -69,7 +69,7 @@
     "lodash.curry": "^4.1.1",
     "lodash.uniqueid": "^4.0.1",
     "lru-memoize": "^1.1.0",
-    "mutationobserver-shim": "^0.3.3",
+    "mutationobserver-shim": "^0.3.7",
     "polished": "^3.4.1",
     "raw-loader": "^3.0.0",
     "react-focus-lock": "^2.0.3",
@@ -84,7 +84,7 @@
   },
   "devDependencies": {
     "@babel/cli": "^7.5.5",
-    "@babel/core": "^7.4.5",
+    "@babel/core": "^7.12.9",
     "@babel/plugin-proposal-class-properties": "^7.4.4",
     "@babel/plugin-syntax-dynamic-import": "^7.0.0",
     "@babel/preset-env": "^7.8.0",
@@ -99,23 +99,26 @@
     "@sproutsocial/seeds-networkcolor": "^2.9.0",
     "@sproutsocial/seeds-space": "^0.4.7",
     "@sproutsocial/seeds-typography": "^3.0.1",
-    "@storybook/addon-a11y": "^6.1.11",
-    "@storybook/addon-actions": "^6.3.8",
-    "@storybook/addon-knobs": "^6.1.11",
-    "@storybook/addon-storysource": "^6.1.11",
-    "@storybook/addon-viewport": "^6.1.11",
-    "@storybook/addons": "^6.1.11",
+    "@storybook/addon-a11y": "^6.4.19",
+    "@storybook/addon-actions": "^6.4.19",
+    "@storybook/addon-controls": "^6.4.19",
+    "@storybook/addon-knobs": "^6.4.0",
+    "@storybook/addon-storysource": "^6.4.19",
+    "@storybook/addon-viewport": "^6.4.19",
+    "@storybook/addons": "^6.4.19",
     "@storybook/react": "^6.4.19",
-    "@storybook/theming": "^6.1.11",
+    "@storybook/theming": "^6.4.19",
+    "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^11.2.2",
     "@testing-library/user-event": "^13.0.0",
+    "axios": "^0.26.1",
     "babel-core": "^7.0.0-bridge",
     "babel-eslint": "10.1.0",
-    "babel-jest": "26.1.0",
-    "babel-loader": "8.0.6",
+    "babel-jest": "27.x.x",
+    "babel-loader": "8.2.3",
     "babel-plugin-inline-import": "^3.0.0",
     "babel-plugin-polished": "^1.1.0",
-    "babel-plugin-styled-components": "^1.10.0",
+    "babel-plugin-styled-components": "^2.0.7",
     "babel-polyfill": "^6.26.0",
     "chalk": "^2.3.2",
     "chokidar": "^3.0.2",
@@ -137,9 +140,8 @@
     "identity-obj-proxy": "^3.0.0",
     "inquirer": "^6.4.1",
     "is-glob": "^4.0.1",
-    "jest": "26.1.0",
-    "jest-axe": "3.4.0",
-    "jest-dom": "^3.5.0",
+    "jest": "27.x.x",
+    "jest-axe": "6.0.0",
     "jest-styled-components": "7.0.0-beta.1",
     "jscodeshift": "^0.6.4",
     "json-to-scss": "^1.6.2",
@@ -148,15 +150,15 @@
     "npm-run-all": "^4.1.2",
     "outdent": "^0.7.0",
     "pify": "^4.0.1",
-    "playroom": "^0.22.2",
+    "playroom": "^0.27.9",
     "prettier": "^2.0.5",
     "prop-types": "^15.6.1",
     "react": "16.12.0",
     "react-dates": "^21.8.0",
     "react-dom": "16.12.0",
     "rimraf": "^2.6.3",
-    "storybook-dark-mode": "^1.0.7",
-    "styled-components": "5.0.0-rc.2",
+    "storybook-dark-mode": "^1.0.9",
+    "styled-components": "^5.2.3",
     "stylelint": "^13.8.0",
     "stylelint-config-recommended": "^2.2.0",
     "stylelint-config-styled-components": "^0.1.1",
@@ -178,13 +180,15 @@
     "prop-types": "^15.0.0",
     "react": "^16.2.0",
     "react-dates": "^21.8.0",
-    "styled-components": "^5.0.0-rc.2"
+    "react-virtualized": "9.18.5",
+    "styled-components": "^5.2.3"
   },
   "resolutions": {
     "lodash": "^4.17.21",
     "react-popper/create-react-context": "^0.3.0"
   },
   "jest": {
+    "testEnvironment": "jsdom",
     "setupFilesAfterEnv": [
       "<rootDir>/src/setupTests.js"
     ],