@sproutsocial/racine 11.3.0-beta.0 → 11.3.0-beta.1

package/__flow__/Input/index.js

@@ -45,13 +45,8 @@ type TypeProps = {
   /** Used to get a reference to the underlying element */
   innerRef?: React.Ref<"input">,
   onBlur?: (e: SyntheticFocusEvent<HTMLInputElement>) => void,
-  onChange?: (
-    e:
-      | SyntheticInputEvent<HTMLInputElement>
-      | SyntheticEvent<HTMLButtonElement>,
-    value: string
-  ) => void,
-  /** Called on Input.ClearButton trigger */
+  onChange?: (e: SyntheticInputEvent<HTMLInputElement>, value: string) => void,
+  /** Called on Input.ClearButton trigger. */
   onClear?: (e: SyntheticEvent<HTMLButtonElement>) => void,
   onFocus?: (e: SyntheticFocusEvent<HTMLInputElement>) => void,
   onKeyDown?: (
@@ -106,13 +101,8 @@ class Input extends React.Component<TypeProps> {
   handleBlur = (e: SyntheticFocusEvent<HTMLInputElement>) =>
     this.props.onBlur?.(e);
 
-  handleClear = (e: SyntheticEvent<HTMLButtonElement>) => {
-    if (this.props.onClear) {
-      this.props.onClear(e);
-    } else if (this.props.onChange) {
-      this.props.onChange(e, "");
-    }
-  };
+  handleClear = (e: SyntheticEvent<HTMLButtonElement>) =>
+    this.props.onClear?.(e);
 
   handleChange = (e: SyntheticInputEvent<HTMLInputElement>) =>
     this.props.onChange?.(e, e.currentTarget.value);
@@ -176,8 +166,9 @@ class Input extends React.Component<TypeProps> {
       ) : (
         elemBefore
       );
+    // Do not add a ClearButton if no onClear callback is provided or if an elemAfter prop was passed.
     const elementAfter =
-      type === "search" && !elemAfter ? <ClearButton /> : elemAfter;
+      type === "search" && onClear && !elemAfter ? <ClearButton /> : elemAfter;
 
     return (
       <Container

package/__flow__/Input/index.test.js

@@ -72,16 +72,17 @@ describe("Input", () => {
   describe("Input.ClearButton", () => {
     describe("Input type=search", () => {
       it("should render a clear button for search Inputs", () => {
-        const { getByTitle } = render(
+        const { getByRole } = render(
           <Input
             id="name"
             name="name"
             value="mic"
             type="search"
+            onClear={jest.fn()}
             clearButtonLabel="Clear search"
           />
         );
-        expect(getByTitle("Clear search")).toBeTruthy();
+        expect(getByRole("button")).toBeTruthy();
       });
 
       it("should not override an elemAfter prop if passed", () => {
@@ -91,6 +92,7 @@ describe("Input", () => {
             name="name"
             value="mic"
             type="search"
+            onClear={jest.fn()}
             elemAfter={<Text>After</Text>}
           />
         );
@@ -99,42 +101,32 @@ describe("Input", () => {
       });
 
       it("should use the fallback title if clearButtonLabel is not provided", () => {
-        const { getByTitle } = render(
-          <Input id="name" name="name" value="mic" type="search" />
-        );
-        expect(getByTitle("Clear")).toBeTruthy();
-      });
-
-      it("should call onClear when clicked", () => {
-        const mockOnClear = jest.fn();
         const { getByTitle } = render(
           <Input
             id="name"
             name="name"
             value="mic"
             type="search"
-            onClear={mockOnClear}
-            clearButtonLabel="Clear search"
+            onClear={jest.fn()}
           />
         );
-        fireEvent.click(getByTitle("Clear search"));
-        expect(mockOnClear).toHaveBeenCalled();
+        expect(getByTitle("Clear")).toBeTruthy();
       });
 
-      it("should call onChange when clicked if there is no onClear prop", () => {
-        const mockOnChange = jest.fn();
-        const { getByTitle } = render(
+      it("should call onClear when clicked", () => {
+        const mockOnClear = jest.fn();
+        const { getByRole } = render(
           <Input
             id="name"
             name="name"
             value="mic"
             type="search"
-            onChange={mockOnChange}
+            onClear={mockOnClear}
             clearButtonLabel="Clear search"
           />
         );
-        fireEvent.click(getByTitle("Clear search"));
-        expect(mockOnChange).toHaveBeenLastCalledWith(expect.anything(), "");
+        fireEvent.click(getByRole("button"));
+        expect(mockOnClear).toHaveBeenCalled();
       });
 
       it("should allow keyboard access to and Space key triggering of the clear button", () => {
@@ -184,7 +176,7 @@ describe("Input", () => {
 
     describe("Manual Input.ClearButton usage", () => {
       it("should render a clear button when passed with elemAfter", () => {
-        const { getByTitle } = render(
+        const { getByRole } = render(
           <Input
             id="name"
             name="name"
@@ -194,7 +186,7 @@ describe("Input", () => {
             clearButtonLabel="Clear search"
           />
         );
-        expect(getByTitle("Clear search")).toBeTruthy();
+        expect(getByRole("button")).toBeTruthy();
       });
 
       it("should use the fallback title if clearButtonLabel is not provided", () => {
@@ -212,7 +204,7 @@ describe("Input", () => {
 
       it("should call onClear when Input.ClearButton is clicked", () => {
         const mockOnClear = jest.fn();
-        const { getByTitle } = render(
+        const { getByRole } = render(
           <Input
             id="name"
             name="name"
@@ -223,27 +215,10 @@ describe("Input", () => {
             clearButtonLabel="Clear search"
           />
         );
-        fireEvent.click(getByTitle("Clear search"));
+        fireEvent.click(getByRole("button"));
         expect(mockOnClear).toHaveBeenCalled();
       });
 
-      it("should call onChange when clicked if there is no onClear prop", () => {
-        const mockOnChange = jest.fn();
-        const { getByTitle } = render(
-          <Input
-            id="name"
-            name="name"
-            value="mic"
-            type="text"
-            elemAfter={<Input.ClearButton />}
-            onChange={mockOnChange}
-            clearButtonLabel="Clear search"
-          />
-        );
-        fireEvent.click(getByTitle("Clear search"));
-        expect(mockOnChange).toHaveBeenLastCalledWith(expect.anything(), "");
-      });
-
       it("should allow keyboard access to and Space key triggering of the clear button", () => {
         const mockOnClear = jest.fn();
         const { getByRole } = render(

package/commonjs/Input/index.js

@@ -59,11 +59,7 @@ var Input = /*#__PURE__*/function (_React$Component) {
     };
 
     _this.handleClear = function (e) {
-      if (_this.props.onClear) {
-        _this.props.onClear(e);
-      } else if (_this.props.onChange) {
-        _this.props.onChange(e, "");
-      }
+      return _this.props.onClear == null ? void 0 : _this.props.onClear(e);
     };
 
     _this.handleChange = function (e) {
@@ -139,8 +135,9 @@ var Input = /*#__PURE__*/function (_React$Component) {
     var elementBefore = type === "search" && !elemBefore ? /*#__PURE__*/React.createElement(_Icon.default, {
       name: "search",
       ariaHidden: true
-    }) : elemBefore;
-    var elementAfter = type === "search" && !elemAfter ? /*#__PURE__*/React.createElement(ClearButton, null) : elemAfter;
+    }) : elemBefore; // Do not add a ClearButton if no onClear callback is provided or if an elemAfter prop was passed.
+
+    var elementAfter = type === "search" && onClear && !elemAfter ? /*#__PURE__*/React.createElement(ClearButton, null) : elemAfter;
     return /*#__PURE__*/React.createElement(_styles.default, _extends({
       hasBeforeElement: !!elementBefore,
       hasAfterElement: !!elementAfter,

package/lib/Input/index.js

@@ -44,11 +44,7 @@ var Input = /*#__PURE__*/function (_React$Component) {
     };
 
     _this.handleClear = function (e) {
-      if (_this.props.onClear) {
-        _this.props.onClear(e);
-      } else if (_this.props.onChange) {
-        _this.props.onChange(e, "");
-      }
+      return _this.props.onClear == null ? void 0 : _this.props.onClear(e);
     };
 
     _this.handleChange = function (e) {
@@ -124,8 +120,9 @@ var Input = /*#__PURE__*/function (_React$Component) {
     var elementBefore = type === "search" && !elemBefore ? /*#__PURE__*/React.createElement(Icon, {
       name: "search",
       ariaHidden: true
-    }) : elemBefore;
-    var elementAfter = type === "search" && !elemAfter ? /*#__PURE__*/React.createElement(ClearButton, null) : elemAfter;
+    }) : elemBefore; // Do not add a ClearButton if no onClear callback is provided or if an elemAfter prop was passed.
+
+    var elementAfter = type === "search" && onClear && !elemAfter ? /*#__PURE__*/React.createElement(ClearButton, null) : elemAfter;
     return /*#__PURE__*/React.createElement(Container, _extends({
       hasBeforeElement: !!elementBefore,
       hasAfterElement: !!elementAfter,

package/package.json

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