@sproutsocial/racine 11.2.5-sproutTheme-beta.5 → 11.2.5-sproutTheme-beta.6

package/__flow__/Input/index.js

@@ -6,6 +6,7 @@ import Icon from "../Icon";
 import styled from "styled-components";
 import type { StyledComponent } from "styled-components";
 import type { TypeTheme } from "../types/theme.flow";
+import { mergeRefs } from "../utils";
 
 type TypeProps = {
   /** ID of the form element, should match the "for" value of the associated label */
@@ -160,19 +161,19 @@ class Input extends React.Component<TypeProps> {
     type: "text",
     size: "default",
     appearance: "primary",
-    innerRef: React.createRef<HTMLInputElement>(),
   };
 
   static ClearButton = ClearButton;
 
+  // Define our own ref for focus management.
+  // We use mergeRefs to pass both this.inputRef and this.props.innerRef to input.
+  inputRef = React.createRef<HTMLInputElement>();
+
   handleBlur = (e: SyntheticFocusEvent<HTMLInputElement>) =>
     this.props.onBlur?.(e);
 
   handleClear = (e: SyntheticEvent<HTMLButtonElement>) => {
-    // Only attempt to focus the input if the ref is an object. It won't work for refs that are functions.
-    if (typeof this.props.innerRef === "object") {
-      this.props.innerRef.current?.focus();
-    }
+    this.inputRef?.current?.focus();
     this.props.onClear?.(e);
   };
 
@@ -287,7 +288,7 @@ class Input extends React.Component<TypeProps> {
             onKeyDown={this.handleKeyDown}
             onKeyUp={this.handleKeyUp}
             onPaste={this.handlePaste}
-            ref={innerRef}
+            ref={mergeRefs([innerRef, this.inputRef])}
             data-qa-input={name || ""}
             data-qa-input-isdisabled={disabled === true}
             data-qa-input-isrequired={required === true}

package/__flow__/utils/index.js

@@ -1,5 +1,7 @@
 // @flow
 
+import { type ElementRef } from "react";
+
 export const canUseDOM = () => {
   return Boolean(
     typeof window !== "undefined" &&
@@ -7,3 +9,24 @@ export const canUseDOM = () => {
       window.document.createElement
   );
 };
+
+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/
+export const mergeRefs = (refs: (?TypeRef)[]) => {
+  const filteredRefs = refs.filter(Boolean);
+  if (!filteredRefs.length) return null;
+  if (filteredRefs.length === 0) return filteredRefs[0];
+  return (inst: any) => {
+    for (const ref of filteredRefs) {
+      if (typeof ref === "function") {
+        ref(inst);
+      } else if (ref) {
+        ref.current = inst;
+      }
+    }
+  };
+};

package/commonjs/Input/index.js

@@ -13,6 +13,8 @@ var _Icon = _interopRequireDefault(require("../Icon"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
+var _utils = require("../utils");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 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); }
@@ -99,19 +101,16 @@ var Input = /*#__PURE__*/function (_React$Component) {
     }
 
     _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
+    _this.inputRef = /*#__PURE__*/React.createRef();
 
     _this.handleBlur = function (e) {
       return _this.props.onBlur == null ? void 0 : _this.props.onBlur(e);
     };
 
     _this.handleClear = function (e) {
-      // Only attempt to focus the input if the ref is an object. It won't work for refs that are functions.
-      if (typeof _this.props.innerRef === "object") {
-        var _this$props$innerRef$;
-
-        (_this$props$innerRef$ = _this.props.innerRef.current) == null ? void 0 : _this$props$innerRef$.focus();
-      }
+      var _this$inputRef, _this$inputRef$curren;
 
+      (_this$inputRef = _this.inputRef) == null ? void 0 : (_this$inputRef$curren = _this$inputRef.current) == null ? void 0 : _this$inputRef$curren.focus();
       _this.props.onClear == null ? void 0 : _this.props.onClear(e);
     };
 
@@ -231,7 +230,7 @@ var Input = /*#__PURE__*/function (_React$Component) {
       onKeyDown: this.handleKeyDown,
       onKeyUp: this.handleKeyUp,
       onPaste: this.handlePaste,
-      ref: innerRef,
+      ref: (0, _utils.mergeRefs)([innerRef, this.inputRef]),
       "data-qa-input": name || "",
       "data-qa-input-isdisabled": disabled === true,
       "data-qa-input-isrequired": required === true
@@ -249,8 +248,7 @@ Input.defaultProps = {
   disabled: false,
   type: "text",
   size: "default",
-  appearance: "primary",
-  innerRef: /*#__PURE__*/React.createRef()
+  appearance: "primary"
 };
 Input.ClearButton = ClearButton;
 Input.ClearButton.displayName = "Input.ClearButton";

package/commonjs/utils/index.js

@@ -1,10 +1,37 @@
 "use strict";
 
 exports.__esModule = true;
-exports.canUseDOM = void 0;
+exports.mergeRefs = exports.canUseDOM = void 0;
+
+function _createForOfIteratorHelperLoose(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (it) return (it = it.call(o)).next.bind(it); if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; return function () { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
 
 var canUseDOM = function canUseDOM() {
   return Boolean(typeof window !== "undefined" && window.document && window.document.createElement);
 };
 
-exports.canUseDOM = canUseDOM;
+exports.canUseDOM = canUseDOM;
+
+// 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/
+var mergeRefs = function mergeRefs(refs) {
+  var filteredRefs = refs.filter(Boolean);
+  if (!filteredRefs.length) return null;
+  if (filteredRefs.length === 0) return filteredRefs[0];
+  return function (inst) {
+    for (var _iterator = _createForOfIteratorHelperLoose(filteredRefs), _step; !(_step = _iterator()).done;) {
+      var ref = _step.value;
+
+      if (typeof ref === "function") {
+        ref(inst);
+      } else if (ref) {
+        ref.current = inst;
+      }
+    }
+  };
+};
+
+exports.mergeRefs = mergeRefs;

package/lib/Input/index.js

@@ -11,6 +11,7 @@ import Container, { Accessory } from "./styles";
 import Button from "../Button";
 import Icon from "../Icon";
 import styled from "styled-components";
+import { mergeRefs } from "../utils";
 var InputContext = /*#__PURE__*/React.createContext({});
 var StyledButton = styled(Button).withConfig({
   displayName: "Input__StyledButton",
@@ -83,19 +84,16 @@ var Input = /*#__PURE__*/function (_React$Component) {
     }
 
     _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
+    _this.inputRef = /*#__PURE__*/React.createRef();
 
     _this.handleBlur = function (e) {
       return _this.props.onBlur == null ? void 0 : _this.props.onBlur(e);
     };
 
     _this.handleClear = function (e) {
-      // Only attempt to focus the input if the ref is an object. It won't work for refs that are functions.
-      if (typeof _this.props.innerRef === "object") {
-        var _this$props$innerRef$;
-
-        (_this$props$innerRef$ = _this.props.innerRef.current) == null ? void 0 : _this$props$innerRef$.focus();
-      }
+      var _this$inputRef, _this$inputRef$curren;
 
+      (_this$inputRef = _this.inputRef) == null ? void 0 : (_this$inputRef$curren = _this$inputRef.current) == null ? void 0 : _this$inputRef$curren.focus();
       _this.props.onClear == null ? void 0 : _this.props.onClear(e);
     };
 
@@ -215,7 +213,7 @@ var Input = /*#__PURE__*/function (_React$Component) {
       onKeyDown: this.handleKeyDown,
       onKeyUp: this.handleKeyUp,
       onPaste: this.handlePaste,
-      ref: innerRef,
+      ref: mergeRefs([innerRef, this.inputRef]),
       "data-qa-input": name || "",
       "data-qa-input-isdisabled": disabled === true,
       "data-qa-input-isrequired": required === true
@@ -233,8 +231,7 @@ Input.defaultProps = {
   disabled: false,
   type: "text",
   size: "default",
-  appearance: "primary",
-  innerRef: /*#__PURE__*/React.createRef()
+  appearance: "primary"
 };
 Input.ClearButton = ClearButton;
 Input.ClearButton.displayName = "Input.ClearButton";

package/lib/utils/index.js

@@ -1,3 +1,27 @@
+function _createForOfIteratorHelperLoose(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (it) return (it = it.call(o)).next.bind(it); if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; return function () { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
 export var canUseDOM = function canUseDOM() {
   return Boolean(typeof window !== "undefined" && window.document && window.document.createElement);
+};
+// 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/
+export var mergeRefs = function mergeRefs(refs) {
+  var filteredRefs = refs.filter(Boolean);
+  if (!filteredRefs.length) return null;
+  if (filteredRefs.length === 0) return filteredRefs[0];
+  return function (inst) {
+    for (var _iterator = _createForOfIteratorHelperLoose(filteredRefs), _step; !(_step = _iterator()).done;) {
+      var ref = _step.value;
+
+      if (typeof ref === "function") {
+        ref(inst);
+      } else if (ref) {
+        ref.current = inst;
+      }
+    }
+  };
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/racine",
-  "version": "11.2.5-sproutTheme-beta.5",
+  "version": "11.2.5-sproutTheme-beta.6",
   "license": "MIT",
   "files": [
     "__flow__",