@sproutsocial/racine 11.3.0-beta.3 → 11.3.0-beta.6

package/__flow__/Input/index.js

@@ -3,6 +3,7 @@ import * as React from "react";
 import Container, { Accessory } from "./styles";
 import Button from "../Button";
 import Icon from "../Icon";
+import styled from "styled-components";
 
 type TypeProps = {
   /** ID of the form element, should match the "for" value of the associated label */
@@ -43,10 +44,13 @@ type TypeProps = {
   /** Props to spread onto the underlying input element */
   inputProps?: any,
   /** Used to get a reference to the underlying element */
-  innerRef?: React.Ref<"input">,
+  innerRef?:
+    | {| current: HTMLInputElement | null | undefined |}
+    | ((React.ElementRef<any> | HTMLInputElement) => mixed),
   onBlur?: (e: SyntheticFocusEvent<HTMLInputElement>) => void,
   onChange?: (e: SyntheticInputEvent<HTMLInputElement>, value: string) => void,
-  /** Called on Input.ClearButton trigger. */
+  /** Input.ClearButton onClick callback. Required when using <Input type="search"/> or <Input.ClearButton/>.
+   The component handles returning focus to Input after onClear is called only. You must reset "value" yourself.*/
   onClear?: (e: SyntheticEvent<HTMLButtonElement>) => void,
   onFocus?: (e: SyntheticFocusEvent<HTMLInputElement>) => void,
   onKeyDown?: (
@@ -70,38 +74,71 @@ type TypeProps = {
 // Using Context so that Input's Input.ClearButton-specific props can be passed to Input.ClearButton,
 // regardless of whether it is manually included as elemAfter or automatically included for type="search" Inputs.
 type TypeInputContext = $Shape<{
+  onClear?: (e: SyntheticEvent<HTMLButtonElement>) => void,
   handleClear: (e: SyntheticEvent<HTMLButtonElement>) => void,
   clearButtonLabel: string,
   hasValue: boolean,
+  size: "large" | "small" | "default",
 }>;
 
 const InputContext = React.createContext<TypeInputContext>({});
 
+const StyledButton = styled(Button)`
+  &:hover,
+  &:active {
+    color: ${(props) =>
+      props.theme.utils.interact(props.theme.colors.icon.base)};
+  }
+`;
+
 const ClearButton = () => {
-  const { handleClear, clearButtonLabel, hasValue, size } =
-    React.useContext(InputContext);
+  const {
+    onClear,
+    handleClear,
+    clearButtonLabel,
+    hasValue,
+    size: inputSize,
+  } = React.useContext(InputContext);
 
   // Hide the button when there is no text to clear.
   if (!hasValue) {
     return null;
   }
 
-  // Cut down the padding for size small Inputs so that the focus ring won't go outside the bounds of the Input.
-  // This adjustment is handled automatically for default and large Inputs via Button's size. There is no "small" Button.
-  const py = size === "small" ? 100 : undefined;
-  const px = size === "small" ? 200 : undefined;
-  const buttonSize = size === "small" ? "default" : size;
+  // 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.
   if (!clearButtonLabel) {
     console.warn(
-      "Warning: clearButtonLabel prop is required when using Input.ClearButton. Please pass a localized label to Input."
+      "Warning: clearButtonLabel prop is required when using Input.ClearButton. Please pass a localized clearButtonLabel to Input."
     );
   }
+
+  // Reduce Button padding for size small Inputs so that the Button won't go outside the bounds of the Input.
+  // This adjustment is handled automatically for default and large Inputs via Button's size. There is no "small" Button.
+  const py = inputSize === "small" ? 100 : undefined;
+  const px = inputSize === "small" ? 200 : undefined;
+  const buttonSize = inputSize === "small" ? "default" : inputSize;
+
   return (
-    <Button onClick={handleClear} size={buttonSize} py={py} px={px}>
-      <Icon name="circlex" title={clearButtonLabel || "Clear"} />
-    </Button>
+    <StyledButton
+      onClick={handleClear}
+      size={buttonSize}
+      py={py}
+      px={px}
+      title={clearButtonLabel || "Clear"}
+      ariaLabel={clearButtonLabel || "Clear"}
+      color="icon.base"
+    >
+      <Icon name="circlex" />
+    </StyledButton>
   );
 };
 
@@ -121,6 +158,7 @@ class Input extends React.Component<TypeProps> {
     type: "text",
     size: "default",
     appearance: "primary",
+    innerRef: React.createRef<HTMLInputElement>(),
   };
 
   static ClearButton = ClearButton;
@@ -129,8 +167,8 @@ class Input extends React.Component<TypeProps> {
     this.props.onBlur?.(e);
 
   handleClear = (e: SyntheticEvent<HTMLButtonElement>) => {
+    this.props.innerRef.current?.focus();
     this.props.onClear?.(e);
-    this.props.innerRef?.current?.focus();
   };
 
   handleChange = (e: SyntheticInputEvent<HTMLInputElement>) =>
@@ -217,6 +255,7 @@ class Input extends React.Component<TypeProps> {
             handleClear: this.handleClear,
             hasValue: !!value,
             clearButtonLabel,
+            onClear,
             size,
           }}
         >

package/__flow__/Menu/index.js

@@ -414,7 +414,6 @@ export const Menu = ({
     >
       <MenuContext.Provider
         value={{
-          // $FlowIssue
           menuRef: innerRef || menuRef,
           role,
           onChange,

package/commonjs/Input/index.js

@@ -11,6 +11,8 @@ var _Button = _interopRequireDefault(require("../Button"));
 
 var _Icon = _interopRequireDefault(require("../Icon"));
 
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
 var _excluded = ["autoComplete", "autoFocus", "disabled", "readOnly", "isInvalid", "hasWarning", "id", "name", "placeholder", "type", "required", "value", "elemBefore", "elemAfter", "maxLength", "ariaLabel", "ariaDescribedby", "clearButtonLabel", "innerRef", "onBlur", "onChange", "onClear", "onFocus", "onKeyDown", "onKeyUp", "onPaste", "inputProps", "qa", "appearance", "size"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -28,37 +30,53 @@ function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.crea
 function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
 
 var InputContext = /*#__PURE__*/React.createContext({});
+var StyledButton = (0, _styledComponents.default)(_Button.default).withConfig({
+  displayName: "Input__StyledButton",
+  componentId: "sc-1ck1dnm-0"
+})(["&:hover,&:active{color:", ";}"], function (props) {
+  return props.theme.utils.interact(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,
-      size = _React$useContext.size; // Hide the button when there is no text to clear.
+      inputSize = _React$useContext.size; // Hide the button when there is no text to clear.
 
 
   if (!hasValue) {
     return null;
-  } // Cut down the padding for size small Inputs so that the focus ring won't go outside the bounds of the Input.
-  // This adjustment is handled automatically for default and large Inputs via Button's size. There is no "small" Button.
+  } // 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.
 
 
-  var py = size === "small" ? 100 : undefined;
-  var px = size === "small" ? 200 : undefined;
-  var buttonSize = size === "small" ? "default" : size; // Warn if clearButtonLabel is not included, so that the unlocalized fallback will not be mistaken for a proper label.
+  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.
+
 
   if (!clearButtonLabel) {
-    console.warn("Warning: clearButtonLabel prop is required when using Input.ClearButton. Please pass a localized label to Input.");
-  }
+    console.warn("Warning: clearButtonLabel prop is required when using Input.ClearButton. Please pass a localized clearButtonLabel to Input.");
+  } // Reduce Button padding for size small Inputs so that the Button won't go outside the bounds of the Input.
+  // This adjustment is handled automatically for default and large Inputs via Button's size. There is no "small" Button.
+
 
-  return /*#__PURE__*/React.createElement(_Button.default, {
+  var py = inputSize === "small" ? 100 : undefined;
+  var px = inputSize === "small" ? 200 : undefined;
+  var buttonSize = inputSize === "small" ? "default" : inputSize;
+  return /*#__PURE__*/React.createElement(StyledButton, {
     onClick: handleClear,
     size: buttonSize,
     py: py,
-    px: px
+    px: px,
+    title: clearButtonLabel || "Clear",
+    ariaLabel: clearButtonLabel || "Clear",
+    color: "icon.base"
   }, /*#__PURE__*/React.createElement(_Icon.default, {
-    name: "circlex",
-    title: clearButtonLabel || "Clear"
+    name: "circlex"
   }));
 }; // Used for positioning elementAfter. This logic will detect if the element is a ClearButton,
 // regardless of whether it was manually passed as elemAfter or automatically added to a search Input.
@@ -89,10 +107,10 @@ var Input = /*#__PURE__*/function (_React$Component) {
     };
 
     _this.handleClear = function (e) {
-      var _this$props$innerRef, _this$props$innerRef$;
+      var _this$props$innerRef$;
 
+      (_this$props$innerRef$ = _this.props.innerRef.current) == null ? void 0 : _this$props$innerRef$.focus();
       _this.props.onClear == null ? void 0 : _this.props.onClear(e);
-      (_this$props$innerRef = _this.props.innerRef) == null ? void 0 : (_this$props$innerRef$ = _this$props$innerRef.current) == null ? void 0 : _this$props$innerRef$.focus();
     };
 
     _this.handleChange = function (e) {
@@ -185,6 +203,7 @@ var Input = /*#__PURE__*/function (_React$Component) {
         handleClear: this.handleClear,
         hasValue: !!value,
         clearButtonLabel: clearButtonLabel,
+        onClear: onClear,
         size: size
       }
     }, elementBefore && /*#__PURE__*/React.createElement(_styles.Accessory, {
@@ -228,7 +247,8 @@ Input.defaultProps = {
   disabled: false,
   type: "text",
   size: "default",
-  appearance: "primary"
+  appearance: "primary",
+  innerRef: /*#__PURE__*/React.createRef()
 };
 Input.ClearButton = ClearButton;
 Input.ClearButton.displayName = "Input.ClearButton";

package/commonjs/Menu/index.js

@@ -403,7 +403,6 @@ var Menu = function Menu(_ref4) {
       set: setDescendants
     }, /*#__PURE__*/React.createElement(_hooks2.MenuContext.Provider, {
       value: {
-        // $FlowIssue
         menuRef: innerRef || menuRef,
         role: role,
         onChange: onChange,

package/lib/Input/index.js

@@ -12,38 +12,55 @@ import * as React from "react";
 import Container, { Accessory } from "./styles";
 import Button from "../Button";
 import Icon from "../Icon";
+import styled from "styled-components";
 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);
+});
 
 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,
-      size = _React$useContext.size; // Hide the button when there is no text to clear.
+      inputSize = _React$useContext.size; // Hide the button when there is no text to clear.
 
 
   if (!hasValue) {
     return null;
-  } // Cut down the padding for size small Inputs so that the focus ring won't go outside the bounds of the Input.
-  // This adjustment is handled automatically for default and large Inputs via Button's size. There is no "small" Button.
+  } // 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.
 
-  var py = size === "small" ? 100 : undefined;
-  var px = size === "small" ? 200 : undefined;
-  var buttonSize = size === "small" ? "default" : size; // Warn if clearButtonLabel is not included, so that the unlocalized fallback will not be mistaken for a proper label.
 
   if (!clearButtonLabel) {
-    console.warn("Warning: clearButtonLabel prop is required when using Input.ClearButton. Please pass a localized label to Input.");
-  }
+    console.warn("Warning: clearButtonLabel prop is required when using Input.ClearButton. Please pass a localized clearButtonLabel to Input.");
+  } // Reduce Button padding for size small Inputs so that the Button won't go outside the bounds of the Input.
+  // This adjustment is handled automatically for default and large Inputs via Button's size. There is no "small" Button.
+
 
-  return /*#__PURE__*/React.createElement(Button, {
+  var py = inputSize === "small" ? 100 : undefined;
+  var px = inputSize === "small" ? 200 : undefined;
+  var buttonSize = inputSize === "small" ? "default" : inputSize;
+  return /*#__PURE__*/React.createElement(StyledButton, {
     onClick: handleClear,
     size: buttonSize,
     py: py,
-    px: px
+    px: px,
+    title: clearButtonLabel || "Clear",
+    ariaLabel: clearButtonLabel || "Clear",
+    color: "icon.base"
   }, /*#__PURE__*/React.createElement(Icon, {
-    name: "circlex",
-    title: clearButtonLabel || "Clear"
+    name: "circlex"
   }));
 }; // Used for positioning elementAfter. This logic will detect if the element is a ClearButton,
 // regardless of whether it was manually passed as elemAfter or automatically added to a search Input.
@@ -74,10 +91,10 @@ var Input = /*#__PURE__*/function (_React$Component) {
     };
 
     _this.handleClear = function (e) {
-      var _this$props$innerRef, _this$props$innerRef$;
+      var _this$props$innerRef$;
 
+      (_this$props$innerRef$ = _this.props.innerRef.current) == null ? void 0 : _this$props$innerRef$.focus();
       _this.props.onClear == null ? void 0 : _this.props.onClear(e);
-      (_this$props$innerRef = _this.props.innerRef) == null ? void 0 : (_this$props$innerRef$ = _this$props$innerRef.current) == null ? void 0 : _this$props$innerRef$.focus();
     };
 
     _this.handleChange = function (e) {
@@ -170,6 +187,7 @@ var Input = /*#__PURE__*/function (_React$Component) {
         handleClear: this.handleClear,
         hasValue: !!value,
         clearButtonLabel: clearButtonLabel,
+        onClear: onClear,
         size: size
       }
     }, elementBefore && /*#__PURE__*/React.createElement(Accessory, {
@@ -213,7 +231,8 @@ Input.defaultProps = {
   disabled: false,
   type: "text",
   size: "default",
-  appearance: "primary"
+  appearance: "primary",
+  innerRef: /*#__PURE__*/React.createRef()
 };
 Input.ClearButton = ClearButton;
 Input.ClearButton.displayName = "Input.ClearButton";

package/lib/Menu/index.js

@@ -363,7 +363,6 @@ export var Menu = function Menu(_ref4) {
       set: setDescendants
     }, /*#__PURE__*/React.createElement(MenuContext.Provider, {
       value: {
-        // $FlowIssue
         menuRef: innerRef || menuRef,
         role: role,
         onChange: onChange,

package/package.json

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