@sproutsocial/racine 20.10.0 → 20.12.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # Change Log
 
+## 20.12.0
+
+### Minor Changes
+
+- e83d2eb4f: - Update the default `Input` type for `MenuFilterInput` to 'search'
+  - Fix race condition bug which fails to update the `Input` value when using the clear button on search inputs
+
+### Patch Changes
+
+- b3be51600: Remove whitespace from border of threads partner logo
+- b52ca03cc: Fix border-radius for modals to use 8px instead of 6px
+
+## 20.11.0
+
+### Minor Changes
+
+- 722b5fe5f: Add Threads network color to theme
+
 ## 20.10.0
 
 ### Minor Changes

package/__flow__/LogoViewBoxes.js

@@ -83,8 +83,8 @@ module.exports = {
   "tableau-lockup-dark": "0 0 291 56",
   "tableau-lockup": "0 0 291 56",
   "tableau": "0 0 18 18",
-  "threads-dark": "0 0 24 24",
-  "threads": "0 0 24 24",
+  "threads-dark": "0 0 18 18",
+  "threads": "0 0 18 18",
   "tiktok-dark": "0 0 140 159",
   "tiktok": "0 0 140 159",
   "tripadvisor-dark": "0 0 140 140",

package/__flow__/types/theme.colors.flow.js

@@ -332,6 +332,7 @@ type TypeNetworkColors = {|
     yelp: string,
     whatsapp: string,
     tiktok: string,
+    threads: string,
     ...
   }
 |};

package/commonjs/Input/Input.js

@@ -114,15 +114,19 @@ var Input = /*#__PURE__*/function (_React$Component) {
         });
         input.dispatchEvent(inputEvent);
 
-        // Focus the input, update hasValue, and call any onClear callback
-        input.focus();
-        _this.updateState('');
+        // call any onClear callback
         (_this$props$onClear = (_this$props2 = _this.props).onClear) === null || _this$props$onClear === void 0 || _this$props$onClear.call(_this$props2, e);
+
+        // wait for next cycle to update focus
+        setTimeout(function () {
+          input.focus();
+        }, 0);
       }
     });
     _defineProperty(_assertThisInitialized(_this), "handleChange", function (e) {
       var _this$props$onChange, _this$props3;
       (_this$props$onChange = (_this$props3 = _this.props).onChange) === null || _this$props$onChange === void 0 || _this$props$onChange.call(_this$props3, e, e.currentTarget.value);
+      // needed for uncontrolled inputs
       _this.updateState(e.currentTarget.value);
     });
     _defineProperty(_assertThisInitialized(_this), "handleFocus", function (e) {
@@ -160,6 +164,16 @@ var Input = /*#__PURE__*/function (_React$Component) {
     return _this;
   }
   _createClass(Input, [{
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(_ref) {
+      var prevValue = _ref.value;
+      // Update hasValue state whenever props value changes
+      var value = this.props.value;
+      if (value !== prevValue) {
+        this.updateState(value || '');
+      }
+    }
+  }, {
     key: "render",
     value: function render() {
       var _this$props8 = this.props,

package/commonjs/LogoViewBoxes.js

@@ -85,8 +85,8 @@ module.exports = {
   "tableau-lockup-dark": "0 0 291 56",
   "tableau-lockup": "0 0 291 56",
   "tableau": "0 0 18 18",
-  "threads-dark": "0 0 24 24",
-  "threads": "0 0 24 24",
+  "threads-dark": "0 0 18 18",
+  "threads": "0 0 18 18",
   "tiktok-dark": "0 0 140 159",
   "tiktok": "0 0 140 159",
   "tripadvisor-dark": "0 0 140 140",

package/commonjs/Menu/Menu.js

@@ -25,9 +25,10 @@ var _styles = require("./styles");
 var _excluded = ["id", "index", "as", "children", "role", "elemBefore", "elemAfter", "value", "onKeyPress", "onClick", "selected", "disabled", "indeterminate", "label"],
   _excluded2 = ["placement", "labelProps", "switchProps", "children", "id", "label"],
   _excluded3 = ["children", "title", "titleAs", "disabled"],
-  _excluded4 = ["children", "role", "multiselect", "innerRef"],
-  _excluded5 = ["role", "children", "onChange", "value", "multiselect", "innerRef", "footerContent"],
-  _excluded6 = ["content", "popoutProps", "children", "onClick", "closeOnItemClick", "id", "placement", "isOpen", "setIsOpen"];
+  _excluded4 = ["type"],
+  _excluded5 = ["children", "role", "multiselect", "innerRef"],
+  _excluded6 = ["role", "children", "onChange", "value", "multiselect", "innerRef", "footerContent"],
+  _excluded7 = ["content", "popoutProps", "children", "onClick", "closeOnItemClick", "id", "placement", "isOpen", "setIsOpen"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -350,8 +351,10 @@ var MenuDivider = function MenuDivider(props) {
   }, props));
 };
 exports.MenuDivider = MenuDivider;
-var MenuFilterInput = function MenuFilterInput(props) {
-  // @ts-note should probably user input types when Input is converted
+var MenuFilterInput = function MenuFilterInput(_ref7) {
+  var _ref7$type = _ref7.type,
+    type = _ref7$type === void 0 ? 'search' : _ref7$type,
+    props = _objectWithoutProperties(_ref7, _excluded4);
   var onChange = props.onChange,
     onFocus = props.onFocus,
     onBlur = props.onBlur;
@@ -377,18 +380,19 @@ var MenuFilterInput = function MenuFilterInput(props) {
     });
   }, [setState, onBlur]);
   return /*#__PURE__*/React.createElement(_Input.default, _extends({}, props, {
+    type: type,
     value: state.filterQuery,
     onChange: handleOnChange,
     onFocus: handleOnFocus,
     onBlur: handleOnBlur
   }));
 };
-var MenuItems = function MenuItems(_ref7) {
-  var children = _ref7.children,
-    role = _ref7.role,
-    multiselect = _ref7.multiselect,
-    innerRef = _ref7.innerRef,
-    props = _objectWithoutProperties(_ref7, _excluded4);
+var MenuItems = function MenuItems(_ref8) {
+  var children = _ref8.children,
+    role = _ref8.role,
+    multiselect = _ref8.multiselect,
+    innerRef = _ref8.innerRef,
+    props = _objectWithoutProperties(_ref8, _excluded5);
   var _useMenuKeyDown = (0, _utils.useMenuKeyDown)(),
     handleKeyDown = _useMenuKeyDown.handleKeyDown,
     activeDescendent = _useMenuKeyDown.activeDescendent;
@@ -408,8 +412,8 @@ var MenuItems = function MenuItems(_ref7) {
     overflow: "hidden"
   }), children);
 };
-var MenuFooter = function MenuFooter(_ref8) {
-  var children = _ref8.children;
+var MenuFooter = function MenuFooter(_ref9) {
+  var children = _ref9.children;
   var _useContext5 = (0, React.useContext)(_utils.MenuContext),
     setState = _useContext5.setState;
   var handleOnBlur = (0, React.useCallback)(function () {
@@ -427,16 +431,16 @@ var MenuFooter = function MenuFooter(_ref8) {
     onFocus: handleOnFocus
   }, children);
 };
-var Menu = function Menu(_ref9) {
-  var _ref9$role = _ref9.role,
-    role = _ref9$role === void 0 ? _utils.MENU_ROLES.MENU : _ref9$role,
-    children = _ref9.children,
-    onChange = _ref9.onChange,
-    value = _ref9.value,
-    multiselect = _ref9.multiselect,
-    innerRef = _ref9.innerRef,
-    footerContent = _ref9.footerContent,
-    props = _objectWithoutProperties(_ref9, _excluded5);
+var Menu = function Menu(_ref10) {
+  var _ref10$role = _ref10.role,
+    role = _ref10$role === void 0 ? _utils.MENU_ROLES.MENU : _ref10$role,
+    children = _ref10.children,
+    onChange = _ref10.onChange,
+    value = _ref10.value,
+    multiselect = _ref10.multiselect,
+    innerRef = _ref10.innerRef,
+    footerContent = _ref10.footerContent,
+    props = _objectWithoutProperties(_ref10, _excluded6);
   var _useDescendants = (0, _utils.useDescendants)(),
     _useDescendants2 = _slicedToArray(_useDescendants, 2),
     descendants = _useDescendants2[0],
@@ -499,20 +503,20 @@ var CustomPopoutContent = (0, _styledComponents.default)(_Popout.default.Content
   displayName: "Menu__CustomPopoutContent",
   componentId: "sc-1jmjosz-2"
 })(["padding:0;margin-left:0;margin-right:0;"]);
-var MenuButton = function MenuButton(_ref10) {
-  var content = _ref10.content,
-    popoutProps = _ref10.popoutProps,
-    children = _ref10.children,
-    _onClick = _ref10.onClick,
-    _ref10$closeOnItemCli = _ref10.closeOnItemClick,
-    closeOnItemClick = _ref10$closeOnItemCli === void 0 ? true : _ref10$closeOnItemCli,
-    _ref10$id = _ref10.id,
-    id = _ref10$id === void 0 ? (0, _lodash.default)('MenuButton-') : _ref10$id,
-    _ref10$placement = _ref10.placement,
-    placement = _ref10$placement === void 0 ? 'bottom' : _ref10$placement,
-    isOpen = _ref10.isOpen,
-    setIsOpen = _ref10.setIsOpen,
-    props = _objectWithoutProperties(_ref10, _excluded6);
+var MenuButton = function MenuButton(_ref11) {
+  var content = _ref11.content,
+    popoutProps = _ref11.popoutProps,
+    children = _ref11.children,
+    _onClick = _ref11.onClick,
+    _ref11$closeOnItemCli = _ref11.closeOnItemClick,
+    closeOnItemClick = _ref11$closeOnItemCli === void 0 ? true : _ref11$closeOnItemCli,
+    _ref11$id = _ref11.id,
+    id = _ref11$id === void 0 ? (0, _lodash.default)('MenuButton-') : _ref11$id,
+    _ref11$placement = _ref11.placement,
+    placement = _ref11$placement === void 0 ? 'bottom' : _ref11$placement,
+    isOpen = _ref11.isOpen,
+    setIsOpen = _ref11.setIsOpen,
+    props = _objectWithoutProperties(_ref11, _excluded7);
   var _useState5 = (0, React.useState)(false),
     _useState6 = _slicedToArray(_useState5, 2),
     isInternalShown = _useState6[0],

package/commonjs/Modal/styles.js

@@ -53,7 +53,7 @@ var Container = (0, _styledComponents.default)(ReactModalAdapter).withConfig({
 }, _styledSystem.zIndex, function (props) {
   return props.theme.colors.container.background.base;
 }, function (props) {
-  return props.theme.radii[500];
+  return props.theme.radii[600];
 }, function (props) {
   return props.theme.shadows.medium;
 }, function (props) {

package/commonjs/themes/light/theme.js

@@ -285,7 +285,8 @@ var colors = _objectSpread(_objectSpread({
     microsoft_dynamics: _seedsNetworkcolor.default.NETWORK_COLOR_MICROSOFT_DYNAMICS,
     yelp: _seedsNetworkcolor.default.NETWORK_COLOR_YELP,
     whatsapp: _seedsNetworkcolor.default.NETWORK_COLOR_WHATSAPP,
-    tiktok: _seedsNetworkcolor.default.NETWORK_COLOR_TIKTOK
+    tiktok: _seedsNetworkcolor.default.NETWORK_COLOR_TIKTOK,
+    threads: _seedsNetworkcolor.default.NETWORK_COLOR_THREADS
   },
   dataviz: {
     map: _datavizPalette.datavizPalette.DATAVIZ_COLORS_MAP,