@sproutsocial/racine 11.7.1 → 11.9.0-useInteractiveColor.0

package/dist/themes/extendedThemes/sproutTheme/light/theme.scss

@@ -1,5 +1,12 @@
 $theme: (
   __esModule: true,
+  analytics: (
+    trend: (
+      positive: #067c7c,
+      neutral: #364141,
+      negative: #364141
+    )
+  ),
   datePicker: (
     comparison: (
       background: (
@@ -11,9 +18,6 @@ $theme: (
     )
   ),
   default: (
-    utils: (
-      
-    ),
     breakpoints: (900px, 1200px, 1500px, 1800px),
     colors: (
       app: (
@@ -478,6 +482,13 @@ $theme: (
             base: #364141
           )
         )
+      ),
+      analytics: (
+        trend: (
+          positive: #067c7c,
+          neutral: #364141,
+          negative: #364141
+        )
       )
     ),
     typography: (

package/dist/themes/light/theme.scss

@@ -8,9 +8,6 @@ $theme: (
   ),
   breakpoints: (900px, 1200px, 1500px, 1800px),
   default: (
-    utils: (
-      
-    ),
     breakpoints: (900px, 1200px, 1500px, 1800px),
     colors: (
       app: (

package/lib/Input/index.js

@@ -14,17 +14,17 @@ import Button from "../Button";
 import Icon from "../Icon";
 import styled from "styled-components";
 import { mergeRefs } from "../utils";
+import { useInteractiveColor } from "../utils/useInteractiveColor";
 var InputContext = /*#__PURE__*/React.createContext({});
 var StyledButton = styled(Button).withConfig({
   displayName: "Input__StyledButton",
   componentId: "sc-1ck1dnm-0"
 })(["&:hover,&:active{color:", ";}"], function (props) {
-  return props.theme.utils.interact(props.theme.colors.icon.base);
+  return useInteractiveColor(props.theme.colors.icon.base);
 });
 
 var ClearButton = function ClearButton() {
   var _React$useContext = React.useContext(InputContext),
-      onClear = _React$useContext.onClear,
       handleClear = _React$useContext.handleClear,
       clearButtonLabel = _React$useContext.clearButtonLabel,
       hasValue = _React$useContext.hasValue,
@@ -33,13 +33,6 @@ var ClearButton = function ClearButton() {
 
   if (!hasValue) {
     return null;
-  } // Log a warning and hide the button when no onClear callback is provided.
-  // If we called handleClear with no onClear prop, all the button would do is focus the Input.
-
-
-  if (!onClear) {
-    console.warn("Warning: No onClear prop provided to Input when using Input.ClearButton. Omitting Input.ClearButton.");
-    return null;
   } // Warn if clearButtonLabel is not included, so that the unlocalized fallback will not be mistaken for a proper label.
 
 
@@ -78,14 +71,10 @@ var isClearButton = function isClearButton(elem) {
 var Input = /*#__PURE__*/function (_React$Component) {
   _inheritsLoose(Input, _React$Component);
 
-  function Input() {
+  function Input(props) {
     var _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 = _React$Component.call(this, props) || this;
     _this.inputRef = /*#__PURE__*/React.createRef();
 
     _this.handleBlur = function (e) {
@@ -93,14 +82,31 @@ var Input = /*#__PURE__*/function (_React$Component) {
     };
 
     _this.handleClear = function (e) {
-      var _this$inputRef, _this$inputRef$curren;
+      var input = _this.inputRef.current;
+
+      if (input) {
+        var _Object$getOwnPropert;
+
+        // Clear the value via the input prototype, then dispatch an input event in order to trigger handleChange
+        var nativeInputValueSetter = (_Object$getOwnPropert = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, "value")) == null ? void 0 : _Object$getOwnPropert.set;
+        nativeInputValueSetter == null ? void 0 : nativeInputValueSetter.call(input, "");
+        var inputEvent = new Event("input", {
+          bubbles: true
+        });
+        input.dispatchEvent(inputEvent); // Focus the input, update hasValue, and call any onClear callback
+
+        input.focus();
+
+        _this.updateState("");
 
-      (_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);
+        _this.props.onClear == null ? void 0 : _this.props.onClear(e);
+      }
     };
 
     _this.handleChange = function (e) {
-      return _this.props.onChange == null ? void 0 : _this.props.onChange(e, e.currentTarget.value);
+      _this.props.onChange == null ? void 0 : _this.props.onChange(e, e.currentTarget.value);
+
+      _this.updateState(e.currentTarget.value);
     };
 
     _this.handleFocus = function (e) {
@@ -119,6 +125,22 @@ var Input = /*#__PURE__*/function (_React$Component) {
       return _this.props.onPaste == null ? void 0 : _this.props.onPaste(e, e.currentTarget.value);
     };
 
+    _this.updateState = function (inputValue) {
+      var hasValue = inputValue !== "";
+      var previousHasValue = _this.state.hasValue; // Only update state if the value of `hasValue` has changed to avoid unnecessary renders.
+
+      if (hasValue !== previousHasValue) {
+        _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;
   }
 
@@ -172,9 +194,9 @@ var Input = /*#__PURE__*/function (_React$Component) {
       name: "search",
       ariaHidden: true,
       color: "icon.base"
-    }) : elemBefore; // Do not add a ClearButton if no onClear callback is provided or if an elemAfter prop was passed.
+    }) : elemBefore; // Do not add a ClearButton if an elemAfter prop was passed.
 
-    var elementAfter = type === "search" && onClear && !elemAfter ? /*#__PURE__*/React.createElement(ClearButton, null) : elemAfter;
+    var elementAfter = type === "search" && !elemAfter ? /*#__PURE__*/React.createElement(ClearButton, null) : elemAfter;
     return /*#__PURE__*/React.createElement(Container, _extends({
       hasBeforeElement: !!elementBefore,
       hasAfterElement: !!elementAfter,
@@ -187,9 +209,8 @@ var Input = /*#__PURE__*/function (_React$Component) {
     }, rest), /*#__PURE__*/React.createElement(InputContext.Provider, {
       value: {
         handleClear: this.handleClear,
-        hasValue: !!value,
+        hasValue: this.state.hasValue,
         clearButtonLabel: clearButtonLabel,
-        onClear: onClear,
         size: size
       }
     }, elementBefore && /*#__PURE__*/React.createElement(Accessory, {

package/lib/Input/styles.js

@@ -71,9 +71,9 @@ export var Accessory = styled.div.withConfig({
 })(["position:absolute;top:50%;transform:translateY(-50%);color:", ";display:flex;align-items:center;", ";", ";"], function (props) {
   return props.theme.colors.icon.base;
 }, function (props) {
-  return props.before && css(["left:", ";"], props.theme.space[350]);
+  return props.before && css(["left:", ";"], props.theme.space[300]);
 }, function (props) {
-  return props.after && css(["right:", ";"], props.isClearButton ? 0 : props.theme.space[350]);
+  return props.after && css(["right:", ";"], props.isClearButton ? 0 : props.theme.space[300]);
 });
 Container.displayName = "InputContainer";
 Accessory.displayName = "InputAccessory";

package/lib/Token/styles.js

@@ -1,6 +1,7 @@
 import styled, { css } from "styled-components";
 import { COMMON } from "../utils/system-props";
 import { focusRing } from "../utils/mixins";
+import { useInteractiveColor } from "../utils/useInteractiveColor";
 var Container = styled.button.withConfig({
   displayName: "styles__Container",
   componentId: "sc-nyn5zy-0"
@@ -8,13 +9,13 @@ var Container = styled.button.withConfig({
   var theme = _ref.theme;
   return css(["", " font-family:", ";font-weight:", ";border:1px solid ", ";border-radius:", ";color:", ";background:", ";padding:", " ", ";transition:all ", " ", ";"], theme.typography[200], theme.fontFamily, theme.fontWeights.normal, theme.colors.container.border.base, theme.radii[500], theme.colors.text.body, theme.colors.container.background.base, theme.space[200], theme.space[300], theme.duration.fast, theme.easing.ease_inout);
 }, focusRing, function (_ref2) {
-  var theme = _ref2.theme,
-      palette = _ref2.palette;
-  return palette === "blue" && css(["color:", ";background:", ";border:1px solid ", ";&:hover,&:active{cursor:pointer;box-shadow:", ";border:1px solid ", ";}"], theme.colors.text.body, theme.colors.container.background.decorative.blue, theme.colors.container.border.decorative.blue, theme.shadows.low, theme.utils.interact(theme.colors.container.border.decorative.blue));
+  var closeable = _ref2.closeable,
+      theme = _ref2.theme;
+  return closeable && css(["cursor:pointer;&:hover,&:active{box-shadow:", ";border:1px solid ", ";}"], theme.shadows.low, useInteractiveColor(theme.colors.container.border.base));
 }, function (_ref3) {
-  var closeable = _ref3.closeable,
-      theme = _ref3.theme;
-  return closeable && css(["cursor:pointer;&:hover,&:active{box-shadow:", ";border:1px solid ", ";}"], theme.shadows.low, theme.utils.interact(theme.colors.container.border.base));
+  var theme = _ref3.theme,
+      palette = _ref3.palette;
+  return palette === "blue" && css(["color:", ";background:", ";border:1px solid ", ";&:hover,&:active{cursor:pointer;box-shadow:", ";border:1px solid ", ";}"], theme.colors.text.body, theme.colors.container.background.decorative.blue, theme.colors.container.border.decorative.blue, theme.shadows.low, useInteractiveColor(theme.colors.container.border.decorative.blue));
 }, function (_ref4) {
   var disabled = _ref4.disabled,
       theme = _ref4.theme;
@@ -22,6 +23,6 @@ var Container = styled.button.withConfig({
 }, function (_ref5) {
   var valid = _ref5.valid,
       theme = _ref5.theme;
-  return !valid && css(["color:", ";background:", ";border:1px solid ", ";&:hover{box-shadow:", ";border:1px solid ", ";}"], theme.colors.text.error, theme.colors.container.background.error, theme.colors.container.border.error, theme.shadows.low, theme.utils.interact(theme.colors.container.border.error));
+  return !valid && css(["color:", ";background:", ";border:1px solid ", ";&:hover{box-shadow:", ";border:1px solid ", ";}"], theme.colors.text.error, theme.colors.container.background.error, theme.colors.container.border.error, theme.shadows.low, useInteractiveColor(theme.colors.container.border.error));
 }, COMMON);
 export default Container;

package/lib/index.js

@@ -1,6 +1,7 @@
 export * from "./systemProps";
 export { visuallyHidden, focusRing, disabled } from "./utils/mixins";
 export { useSelect, useMultiselect, useTextContent } from "./utils/hooks";
+export { useInteractiveColor } from "./utils/useInteractiveColor";
 export { default as theme } from "./themes/light/theme";
 export { default as darkTheme } from "./themes/dark/theme";
 export { sproutLightTheme, sproutDarkTheme } from "./themes/extendedThemes/sproutTheme";

package/lib/themes/dark/theme.js

@@ -6,7 +6,6 @@ import lightTheme from "../light/theme";
 import { datavizPalette } from "./dataviz-palette";
 import { green, blue, purple, yellow, orange, red, neutral } from "./decorative-palettes";
 import { transparentize } from "polished";
-import interact from "../utils/interact";
 var MODE = "dark";
 export var shadows = {
   low: DEPTH.ELEVATION_LEVEL_100 + " " + COLORS.COLOR_NEUTRAL_1100 + "FF",
@@ -218,9 +217,6 @@ var colors = _extends({}, lightTheme.colors, {
 }, datavizPalette);
 
 var darkTheme = _extends({}, lightTheme, {
-  utils: {
-    interact: interact(MODE)
-  },
   colors: colors,
   shadows: shadows,
   mode: MODE

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

@@ -39,11 +39,19 @@ export var datePicker = {
     }
   }
 };
+export var analytics = {
+  trend: {
+    positive: baseDarkTheme.colors.teal[500],
+    neutral: baseDarkTheme.colors.neutral[100],
+    negative: baseDarkTheme.colors.neutral[100]
+  }
+};
 
 var darkTheme = _extends({}, baseDarkTheme, {
   colors: _extends({}, baseDarkTheme.colors, {
     navigation: navigation,
-    datePicker: datePicker
+    datePicker: datePicker,
+    analytics: analytics
   })
 });
 

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

@@ -39,11 +39,19 @@ export var datePicker = {
     }
   }
 };
+export var analytics = {
+  trend: {
+    positive: baseLightTheme.colors.teal[800],
+    neutral: baseLightTheme.colors.neutral[800],
+    negative: baseLightTheme.colors.neutral[800]
+  }
+};
 
 var lightTheme = _extends({}, baseLightTheme, {
   colors: _extends({}, baseLightTheme.colors, {
     navigation: navigation,
-    datePicker: datePicker
+    datePicker: datePicker,
+    analytics: analytics
   })
 });
 

package/lib/themes/light/theme.js

@@ -11,7 +11,6 @@ import DEPTH from "@sproutsocial/seeds-depth";
 import MOTION from "@sproutsocial/seeds-motion";
 import BORDER from "@sproutsocial/seeds-border";
 import { transparentize } from "polished";
-import interact from "../utils/interact";
 export var breakpoints = ["900px", "1200px", "1500px", "1800px"];
 var MODE = "light"; // If you are making changes to the colors in the theme file tag the Design Systems team on your PR! Thank you!!
 
@@ -308,9 +307,6 @@ export var duration = {
   slow: MOTION.MOTION_DURATION_SLOW
 };
 var theme = {
-  utils: {
-    interact: interact(MODE)
-  },
   breakpoints: breakpoints,
   colors: colors,
   typography: _extends({}, typography, {

package/lib/types/theme.flow.js

@@ -1,2 +1,2 @@
 import { breakpoints, typography, fontWeights, radii, borders, borderWidths, shadows, space, easing, duration } from "../themes/light/theme";
-import { datePicker, navigation } from "../themes/extendedThemes/sproutTheme/light/theme";
+import { datePicker, navigation, analytics } from "../themes/extendedThemes/sproutTheme/light/theme";

package/lib/utils/useInteractiveColor.js

@@ -0,0 +1,27 @@
+import { darken, lighten } from "polished";
+import { useTheme } from "styled-components";
+
+/**
+ * The useInteractiveColor hook has context of theme mode (light or dark)
+ * and can be used to lighten or darken a color dynamically
+ *
+ * note: colors are limited to our theme colors
+ */
+var useInteractiveColor = function useInteractiveColor(themeColor) {
+  // Throw error if used outside of a ThemeProvider (styled-components)
+  if (!useTheme()) {
+    throw new Error("useInteractiveColor() must be used within a Styled Components ThemeProvider");
+  } // Get the current theme mode ie. 'light' or 'dark'
+
+
+  var themeMode = useTheme().mode; // If the theme mode is dark, return a lightened version of the themeValue
+
+  if (themeMode === "dark") {
+    return lighten(0.2, themeColor);
+  } else {
+    // If the theme mode is light, return a darkened version of the themeValue
+    return darken(0.2, themeColor);
+  }
+};
+
+export { useInteractiveColor };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/racine",
-  "version": "11.7.1",
+  "version": "11.9.0-useInteractiveColor.0",
   "license": "MIT",
   "files": [
     "__flow__",