@sproutsocial/racine 11.6.1 → 11.7.0-input-beta.4

package/commonjs/Input/index.js

@@ -41,7 +41,6 @@ var StyledButton = (0, _styledComponents.default)(_Button.default).withConfig({
 
 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,
@@ -50,13 +49,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.
 
 
@@ -95,14 +87,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) {
@@ -110,14 +98,29 @@ var Input = /*#__PURE__*/function (_React$Component) {
     };
 
     _this.handleClear = function (e) {
-      var _this$inputRef, _this$inputRef$curren;
+      var input = _this.inputRef.current;
+
+      if (input) {
+        // Clear the value via the input prototype, then dispatch an input event in order to trigger handleChange
+        var nativeInputValueSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, "value").set;
+        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) {
@@ -136,6 +139,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;
   }
 
@@ -189,9 +208,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(_styles.default, _extends({
       hasBeforeElement: !!elementBefore,
       hasAfterElement: !!elementAfter,
@@ -204,9 +223,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(_styles.Accessory, {

package/commonjs/Input/styles.js

@@ -84,9 +84,9 @@ var Accessory = _styledComponents.default.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 && (0, _styledComponents.css)(["left:", ";"], props.theme.space[350]);
+  return props.before && (0, _styledComponents.css)(["left:", ";"], props.theme.space[300]);
 }, function (props) {
-  return props.after && (0, _styledComponents.css)(["right:", ";"], props.isClearButton ? 0 : props.theme.space[350]);
+  return props.after && (0, _styledComponents.css)(["right:", ";"], props.isClearButton ? 0 : props.theme.space[300]);
 });
 
 exports.Accessory = Accessory;

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

@@ -1,7 +1,7 @@
 "use strict";
 
 exports.__esModule = true;
-exports.navigation = exports.default = void 0;
+exports.navigation = exports.default = exports.datePicker = void 0;
 
 var _theme = _interopRequireDefault(require("../../../dark/theme"));
 
@@ -38,10 +38,22 @@ var navigation = {
   }
 };
 exports.navigation = navigation;
+var datePicker = {
+  comparison: {
+    background: {
+      base: _theme.default.colors.neutral[400]
+    },
+    text: {
+      base: _theme.default.colors.neutral[800]
+    }
+  }
+};
+exports.datePicker = datePicker;
 
 var darkTheme = _extends({}, _theme.default, {
   colors: _extends({}, _theme.default.colors, {
-    navigation: navigation
+    navigation: navigation,
+    datePicker: datePicker
   })
 });
 

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

@@ -1,7 +1,7 @@
 "use strict";
 
 exports.__esModule = true;
-exports.navigation = exports.default = void 0;
+exports.navigation = exports.default = exports.datePicker = void 0;
 
 var _theme = _interopRequireDefault(require("../../../light/theme"));
 
@@ -38,10 +38,22 @@ var navigation = {
   }
 };
 exports.navigation = navigation;
+var datePicker = {
+  comparison: {
+    background: {
+      base: _theme.default.colors.neutral[400]
+    },
+    text: {
+      base: _theme.default.colors.neutral[800]
+    }
+  }
+};
+exports.datePicker = datePicker;
 
 var lightTheme = _extends({}, _theme.default, {
   colors: _extends({}, _theme.default.colors, {
-    navigation: navigation
+    navigation: navigation,
+    datePicker: datePicker
   })
 });
 

package/dist/themes/dark/_themed.scss

@@ -2,12 +2,13 @@
 // This file is excluded from stylelint, because stylelint is only set up to lint styled-components at the moment.
 
 // SET-UP
-// This file is auto-generated based on the JS theme file, ensuring our SCSS theme variables stay in sync.
-@import "../../../dist/themes/dark/dark.scss";
+// theme.scss is auto-generated based on the JS theme file, ensuring our SCSS theme variables stay in sync.
+// _themed.scss will be copied to each theme folder in /dist, where the theme.scss file for that theme will be.
+@import "./theme.scss";
 
 // In the JS theme file, the theme object is exported as "default" (i.e., using "export default"),
 // so we need to map-get "default" to access it.
-$theme: map-get($dark, "default");
+$theme: map-get($theme, "default");
 
 // FUNCTIONS
 // This function will allow you to get any value from the theme.

package/dist/themes/dark/{dark.scss → theme.scss}

@@ -1,4 +1,4 @@
-$dark: (
+$theme: (
   __esModule: true,
   default: (
     utils: (

package/{__flow__/themes/light → dist/themes/extendedThemes/sproutTheme/dark}/_themed.scss

@@ -2,12 +2,13 @@
 // This file is excluded from stylelint, because stylelint is only set up to lint styled-components at the moment.
 
 // SET-UP
-// This file is auto-generated based on the JS theme file, ensuring our SCSS theme variables stay in sync.
-@import "../../../dist/themes/light/light.scss";
+// theme.scss is auto-generated based on the JS theme file, ensuring our SCSS theme variables stay in sync.
+// _themed.scss will be copied to each theme folder in /dist, where the theme.scss file for that theme will be.
+@import "./theme.scss";
 
 // In the JS theme file, the theme object is exported as "default" (i.e., using "export default"),
 // so we need to map-get "default" to access it.
-$theme: map-get($light, "default");
+$theme: map-get($theme, "default");
 
 // FUNCTIONS
 // This function will allow you to get any value from the theme.