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

package/__flow__/Button/index.stories.js

@@ -3,7 +3,6 @@ import { boolean, text, number } from "@storybook/addon-knobs";
 import Button from "./index";
 import Icon from "../Icon";
 import Box from "../Box";
-import ThemeProvider from "../ThemeProvider";
 
 export default {
   title: "Button",

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__/themes/extendedThemes/sproutTheme/dark/theme.js

@@ -3,24 +3,21 @@ import clone from "just-clone";
 import baseDarkTheme from "../../../dark/theme";
 import { getDarkThemeColors } from "./getDarkThemeColors";
 import { getNonColorThemeValues } from "../NonColorThemeValues";
-import type { TypeTheme } from "../../../../types/theme.flow.js";
 import type { TypeSproutTheme } from "../sproutThemeType.flow";
 
-const darkTheme = (baseDarkTheme: TypeTheme): TypeSproutTheme => {
-  // clone base theme. (we don't want to mutate the base theme)
-  const themeClone = clone(baseDarkTheme);
+// clone base theme. (we don't want to mutate the base theme)
+const themeClone = clone(baseDarkTheme);
 
-  // get non color theme values
-  const nonColorThemeValues = getNonColorThemeValues(themeClone);
+// get non color theme values
+const nonColorThemeValues = getNonColorThemeValues(themeClone);
 
-  // get sprout specific dark theme colors
-  const darkThemeColors = getDarkThemeColors(themeClone.colors);
+// get sprout specific dark theme colors
+const darkThemeColors = getDarkThemeColors(themeClone.colors);
 
-  return {
-    ...themeClone,
-    ...nonColorThemeValues,
-    ...darkThemeColors,
-  };
+const darkTheme: TypeSproutTheme = {
+  ...themeClone,
+  ...nonColorThemeValues,
+  ...darkThemeColors,
 };
 
 export default darkTheme;

package/__flow__/themes/extendedThemes/sproutTheme/light/theme.js

@@ -3,23 +3,21 @@ import clone from "just-clone";
 import baseLightTheme from "../../../light/theme";
 import { getLightThemeColors } from "./getLightThemeColors";
 import { getNonColorThemeValues } from "../NonColorThemeValues";
-import type { TypeTheme } from "../../../../types/theme.flow.js";
+import type { TypeSproutTheme } from "../sproutThemeType.flow";
 
-const lightTheme = (baseLightTheme: TypeTheme) => {
-  // clone base theme. (we don't want to mutate the base theme)
-  const themeClone = clone(baseLightTheme);
+// clone base theme. (we don't want to mutate the base theme)
+const themeClone = clone(baseLightTheme);
 
-  // get non color theme values
-  const nonColorThemeValues = getNonColorThemeValues(themeClone);
+// get non color theme values
+const nonColorThemeValues = getNonColorThemeValues(themeClone);
 
-  // get sprout specific light theme colors
-  const lightThemeColors = getLightThemeColors(themeClone.colors);
+// get sprout specific light theme colors
+const lightThemeColors = getLightThemeColors(themeClone.colors);
 
-  return {
-    ...themeClone,
-    ...nonColorThemeValues,
-    ...lightThemeColors,
-  };
+const lightTheme: TypeSproutTheme = {
+  ...themeClone,
+  ...nonColorThemeValues,
+  ...lightThemeColors,
 };
 
 export default lightTheme;

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/themes/extendedThemes/sproutTheme/dark/theme.js

@@ -15,15 +15,14 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-var darkTheme = function darkTheme(baseDarkTheme) {
-  // clone base theme. (we don't want to mutate the base theme)
-  var themeClone = (0, _justClone.default)(baseDarkTheme); // get non color theme values
+// clone base theme. (we don't want to mutate the base theme)
+var themeClone = (0, _justClone.default)(_theme.default); // get non color theme values
 
-  var nonColorThemeValues = (0, _NonColorThemeValues.getNonColorThemeValues)(themeClone); // get sprout specific dark theme colors
+var nonColorThemeValues = (0, _NonColorThemeValues.getNonColorThemeValues)(themeClone); // get sprout specific dark theme colors
 
-  var darkThemeColors = (0, _getDarkThemeColors.getDarkThemeColors)(themeClone.colors);
-  return _extends({}, themeClone, nonColorThemeValues, darkThemeColors);
-};
+var darkThemeColors = (0, _getDarkThemeColors.getDarkThemeColors)(themeClone.colors);
+
+var darkTheme = _extends({}, themeClone, nonColorThemeValues, darkThemeColors);
 
 var _default = darkTheme;
 exports.default = _default;

package/commonjs/themes/extendedThemes/sproutTheme/light/theme.js

@@ -15,15 +15,14 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-var lightTheme = function lightTheme(baseLightTheme) {
-  // clone base theme. (we don't want to mutate the base theme)
-  var themeClone = (0, _justClone.default)(baseLightTheme); // get non color theme values
+// clone base theme. (we don't want to mutate the base theme)
+var themeClone = (0, _justClone.default)(_theme.default); // get non color theme values
 
-  var nonColorThemeValues = (0, _NonColorThemeValues.getNonColorThemeValues)(themeClone); // get sprout specific light theme colors
+var nonColorThemeValues = (0, _NonColorThemeValues.getNonColorThemeValues)(themeClone); // get sprout specific light theme colors
 
-  var lightThemeColors = (0, _getLightThemeColors.getLightThemeColors)(themeClone.colors);
-  return _extends({}, themeClone, nonColorThemeValues, lightThemeColors);
-};
+var lightThemeColors = (0, _getLightThemeColors.getLightThemeColors)(themeClone.colors);
+
+var lightTheme = _extends({}, themeClone, nonColorThemeValues, lightThemeColors);
 
 var _default = lightTheme;
 exports.default = _default;

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/themes/extendedThemes/sproutTheme/dark/theme.js

@@ -4,15 +4,13 @@ import clone from "just-clone";
 import baseDarkTheme from "../../../dark/theme";
 import { getDarkThemeColors } from "./getDarkThemeColors";
 import { getNonColorThemeValues } from "../NonColorThemeValues";
+// clone base theme. (we don't want to mutate the base theme)
+var themeClone = clone(baseDarkTheme); // get non color theme values
 
-var darkTheme = function darkTheme(baseDarkTheme) {
-  // clone base theme. (we don't want to mutate the base theme)
-  var themeClone = clone(baseDarkTheme); // get non color theme values
+var nonColorThemeValues = getNonColorThemeValues(themeClone); // get sprout specific dark theme colors
 
-  var nonColorThemeValues = getNonColorThemeValues(themeClone); // get sprout specific dark theme colors
+var darkThemeColors = getDarkThemeColors(themeClone.colors);
 
-  var darkThemeColors = getDarkThemeColors(themeClone.colors);
-  return _extends({}, themeClone, nonColorThemeValues, darkThemeColors);
-};
+var darkTheme = _extends({}, themeClone, nonColorThemeValues, darkThemeColors);
 
 export default darkTheme;

package/lib/themes/extendedThemes/sproutTheme/light/theme.js

@@ -4,15 +4,13 @@ import clone from "just-clone";
 import baseLightTheme from "../../../light/theme";
 import { getLightThemeColors } from "./getLightThemeColors";
 import { getNonColorThemeValues } from "../NonColorThemeValues";
+// clone base theme. (we don't want to mutate the base theme)
+var themeClone = clone(baseLightTheme); // get non color theme values
 
-var lightTheme = function lightTheme(baseLightTheme) {
-  // clone base theme. (we don't want to mutate the base theme)
-  var themeClone = clone(baseLightTheme); // get non color theme values
+var nonColorThemeValues = getNonColorThemeValues(themeClone); // get sprout specific light theme colors
 
-  var nonColorThemeValues = getNonColorThemeValues(themeClone); // get sprout specific light theme colors
+var lightThemeColors = getLightThemeColors(themeClone.colors);
 
-  var lightThemeColors = getLightThemeColors(themeClone.colors);
-  return _extends({}, themeClone, nonColorThemeValues, lightThemeColors);
-};
+var lightTheme = _extends({}, themeClone, nonColorThemeValues, lightThemeColors);
 
 export default lightTheme;

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.3",
+  "version": "11.2.5-sproutTheme-beta.6",
   "license": "MIT",
   "files": [
     "__flow__",