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

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Change Log
 
+## 11.1.2
+
+### Patch Changes
+
+- 81f95bc: Add flow support for newer colors in theme
+
 ## 11.1.1
 
 ### Patch Changes

package/__flow__/Input/index.js

@@ -1,6 +1,8 @@
 // @flow
 import * as React from "react";
 import Container, { Accessory } from "./styles";
+import Button from "../Button";
+import Icon from "../Icon";
 
 type TypeProps = {
   /** ID of the form element, should match the "for" value of the associated label */
@@ -10,6 +12,8 @@ type TypeProps = {
   ariaLabel?: string,
   /** Attribute used to associate other elements that describe the Input, like an error */
   ariaDescribedby?: string,
+  /** Label for Input.ClearButton. Required when using <Input type="search"/> or <Input.ClearButton/>. */
+  clearButtonLabel?: string,
   /** Placeholder text for when value is undefined or empty */
   placeholder?: string,
   /** Current value of the input */
@@ -41,7 +45,14 @@ type TypeProps = {
   /** Used to get a reference to the underlying element */
   innerRef?: React.Ref<"input">,
   onBlur?: (e: SyntheticFocusEvent<HTMLInputElement>) => void,
-  onChange?: (e: SyntheticInputEvent<HTMLInputElement>, value: string) => void,
+  onChange?: (
+    e:
+      | SyntheticInputEvent<HTMLInputElement>
+      | SyntheticEvent<HTMLButtonElement>,
+    value: string
+  ) => void,
+  /** Called on Input.ClearButton trigger */
+  onClear?: (e: SyntheticEvent<HTMLButtonElement>) => void,
   onFocus?: (e: SyntheticFocusEvent<HTMLInputElement>) => void,
   onKeyDown?: (
     e: SyntheticKeyboardEvent<HTMLInputElement>,
@@ -54,14 +65,34 @@ type TypeProps = {
   onPaste?: (e: SyntheticInputEvent<HTMLInputElement>, value: string) => void,
   size?: "large" | "small" | "default",
   qa?: Object,
-  /** 
-      Controls the styles of the input. Primary is our standard input styles and secondary is a borderless input. 
+  /**
+      Controls the styles of the input. Primary is our standard input styles and secondary is a borderless input.
       Note that this prop should only be used to alter styles and not functionality.
   */
   appearance?: "primary" | "secondary",
 };
 
-export default class Input extends React.Component<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<{
+  handleClear: (e: SyntheticEvent<HTMLButtonElement>) => void,
+  clearButtonLabel: string,
+}>;
+
+const InputContext = React.createContext<TypeInputContext>({});
+
+const ClearButton = () => {
+  const { handleClear, clearButtonLabel } = React.useContext(InputContext);
+  return (
+    <Button onClick={handleClear}>
+      {/*Unlocalized fallback should not be used. Always include a localized
+      clearButtonLabel when using <Input.ClearButton/> or <Input type="search"/>.*/}
+      <Icon name="circlex" title={clearButtonLabel || "Clear"} />
+    </Button>
+  );
+};
+
+class Input extends React.Component<TypeProps> {
   static defaultProps = {
     autoFocus: false,
     disabled: false,
@@ -70,41 +101,33 @@ export default class Input extends React.Component<TypeProps> {
     appearance: "primary",
   };
 
-  handleBlur = (e: SyntheticFocusEvent<HTMLInputElement>) => {
-    if (this.props.onBlur) {
-      this.props.onBlur(e);
-    }
-  };
+  static ClearButton = ClearButton;
 
-  handleChange = (e: SyntheticInputEvent<HTMLInputElement>) => {
-    if (this.props.onChange) {
-      this.props.onChange(e, e.currentTarget.value);
-    }
-  };
+  handleBlur = (e: SyntheticFocusEvent<HTMLInputElement>) =>
+    this.props.onBlur?.(e);
 
-  handleFocus = (e: SyntheticFocusEvent<HTMLInputElement>) => {
-    if (this.props.onFocus) {
-      this.props.onFocus(e);
+  handleClear = (e: SyntheticEvent<HTMLButtonElement>) => {
+    if (this.props.onClear) {
+      this.props.onClear(e);
+    } else if (this.props.onChange) {
+      this.props.onChange(e, "");
     }
   };
 
-  handleKeyDown = (e: SyntheticKeyboardEvent<HTMLInputElement>) => {
-    if (this.props.onKeyDown) {
-      this.props.onKeyDown(e, e.currentTarget.value);
-    }
-  };
+  handleChange = (e: SyntheticInputEvent<HTMLInputElement>) =>
+    this.props.onChange?.(e, e.currentTarget.value);
 
-  handleKeyUp = (e: SyntheticKeyboardEvent<HTMLInputElement>) => {
-    if (this.props.onKeyUp) {
-      this.props.onKeyUp(e, e.currentTarget.value);
-    }
-  };
+  handleFocus = (e: SyntheticFocusEvent<HTMLInputElement>) =>
+    this.props.onFocus?.(e);
 
-  handlePaste = (e: SyntheticInputEvent<HTMLInputElement>) => {
-    if (this.props.onPaste) {
-      this.props.onPaste(e, e.currentTarget.value);
-    }
-  };
+  handleKeyDown = (e: SyntheticKeyboardEvent<HTMLInputElement>) =>
+    this.props.onKeyDown?.(e, e.currentTarget.value);
+
+  handleKeyUp = (e: SyntheticKeyboardEvent<HTMLInputElement>) =>
+    this.props.onKeyUp?.(e, e.currentTarget.value);
+
+  handlePaste = (e: SyntheticInputEvent<HTMLInputElement>) =>
+    this.props.onPaste?.(e, e.currentTarget.value);
 
   render() {
     const {
@@ -125,9 +148,11 @@ export default class Input extends React.Component<TypeProps> {
       maxLength,
       ariaLabel,
       ariaDescribedby,
+      clearButtonLabel,
       innerRef,
       onBlur,
       onChange,
+      onClear,
       onFocus,
       onKeyDown,
       onKeyUp,
@@ -138,15 +163,26 @@ export default class Input extends React.Component<TypeProps> {
       ...rest
     } = this.props;
 
+    // Convert autoComplete from a boolean prop to a string value.
     let autoCompleteValue = undefined;
     if (autoComplete !== undefined) {
       autoCompleteValue = autoComplete ? "on" : "off";
     }
 
+    // Add default elemBefore and elemAfter elements if type is search.
+    const elementBefore =
+      type === "search" && !elemBefore ? (
+        <Icon name="search" ariaHidden />
+      ) : (
+        elemBefore
+      );
+    const elementAfter =
+      type === "search" && !elemAfter ? <ClearButton /> : elemAfter;
+
     return (
       <Container
-        hasBeforeElement={!!elemBefore}
-        hasAfterElement={!!elemAfter}
+        hasBeforeElement={!!elementBefore}
+        hasAfterElement={!!elementAfter}
         disabled={disabled}
         invalid={!!isInvalid}
         warning={hasWarning}
@@ -154,39 +190,61 @@ export default class Input extends React.Component<TypeProps> {
         // $FlowIssue - upgrade v0.112.0
         {...rest}
       >
-        {elemBefore && <Accessory before>{elemBefore}</Accessory>}
-
-        <input
-          aria-invalid={!!isInvalid}
-          aria-label={ariaLabel}
-          aria-describedby={ariaDescribedby}
-          autoComplete={autoCompleteValue}
-          autoFocus={autoFocus}
-          disabled={disabled}
-          readOnly={readOnly}
-          id={id}
-          name={name}
-          placeholder={placeholder}
-          type={type}
-          required={required}
-          value={value}
-          maxLength={maxLength}
-          onBlur={this.handleBlur}
-          onChange={this.handleChange}
-          onFocus={this.handleFocus}
-          onKeyDown={this.handleKeyDown}
-          onKeyUp={this.handleKeyUp}
-          onPaste={this.handlePaste}
-          ref={innerRef}
-          data-qa-input={name || ""}
-          data-qa-input-isdisabled={disabled === true}
-          data-qa-input-isrequired={required === true}
-          {...qa}
-          {...inputProps}
-        />
-
-        {elemAfter && <Accessory after>{elemAfter}</Accessory>}
+        <InputContext.Provider
+          value={{
+            handleClear: this.handleClear,
+            clearButtonLabel,
+          }}
+        >
+          {elementBefore && <Accessory before>{elementBefore}</Accessory>}
+
+          <input
+            aria-invalid={!!isInvalid}
+            aria-label={ariaLabel}
+            aria-describedby={ariaDescribedby}
+            autoComplete={autoCompleteValue}
+            autoFocus={autoFocus}
+            disabled={disabled}
+            readOnly={readOnly}
+            id={id}
+            name={name}
+            placeholder={placeholder}
+            type={type}
+            required={required}
+            value={value}
+            maxLength={maxLength}
+            onBlur={this.handleBlur}
+            onChange={this.handleChange}
+            onFocus={this.handleFocus}
+            onKeyDown={this.handleKeyDown}
+            onKeyUp={this.handleKeyUp}
+            onPaste={this.handlePaste}
+            ref={innerRef}
+            data-qa-input={name || ""}
+            data-qa-input-isdisabled={disabled === true}
+            data-qa-input-isrequired={required === true}
+            {...qa}
+            {...inputProps}
+          />
+
+          {elementAfter && (
+            <Accessory
+              after
+              // Used for positioning. 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.
+              isClearButton={
+                elementAfter?.type?.prototype === Input.ClearButton.prototype
+              }
+            >
+              {elementAfter}
+            </Accessory>
+          )}
+        </InputContext.Provider>
       </Container>
     );
   }
 }
+
+Input.ClearButton.displayName = "Input.ClearButton";
+
+export default Input;

package/__flow__/Input/index.stories.js

@@ -141,6 +141,39 @@ leftAndRightIcons.story = {
   name: "Left and right icons",
 };
 
+export const searchInput = () => (
+  <Input
+    type="search"
+    placeholder={text("placeholder", "Please enter a value...")}
+    value={text("value", "val")}
+    onClear={() => window.alert("Cleared!")}
+    clearButtonLabel={text("clearButtonLabel", "Clear search")}
+    ariaLabel={text("ariaLabel", "Descriptive label goes here")}
+  />
+);
+
+searchInput.story = {
+  name: "Search Input",
+};
+
+export const nonSearchClearButtonInput = () => {
+  return (
+    <Input
+      type="text"
+      placeholder={text("placeholder", "Please enter a value...")}
+      value={text("value", "val")}
+      onClear={() => window.alert("Cleared!")}
+      ariaLabel={text("ariaLabel", "Descriptive label goes here")}
+      clearButtonLabel={text("clearButtonLabel", "Clear text")}
+      elemAfter={<Input.ClearButton />}
+    />
+  );
+};
+
+nonSearchClearButtonInput.story = {
+  name: "Input.ClearButton usage",
+};
+
 export const autofocus = () => (
   <Input
     autoFocus

package/__flow__/Input/index.test.js

@@ -1,6 +1,6 @@
 import React from "react";
 import "jest-styled-components";
-import { render, fireEvent } from "../utils/react-testing-library";
+import { render, fireEvent, userEvent } from "../utils/react-testing-library";
 import Input from "./";
 import Text from "../Text";
 
@@ -69,6 +69,229 @@ describe("Input", () => {
     expect(getByText("After")).toBeTruthy();
   });
 
+  describe("Input.ClearButton", () => {
+    describe("Input type=search", () => {
+      it("should render a clear button for search Inputs", () => {
+        const { getByTitle } = render(
+          <Input
+            id="name"
+            name="name"
+            value="mic"
+            type="search"
+            clearButtonLabel="Clear search"
+          />
+        );
+        expect(getByTitle("Clear search")).toBeTruthy();
+      });
+
+      it("should not override an elemAfter prop if passed", () => {
+        const { getByText, queryByTitle } = render(
+          <Input
+            id="name"
+            name="name"
+            value="mic"
+            type="search"
+            elemAfter={<Text>After</Text>}
+          />
+        );
+        expect(getByText("After")).toBeTruthy();
+        expect(queryByTitle("Clear")).not.toBeInTheDocument();
+      });
+
+      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"
+          />
+        );
+        fireEvent.click(getByTitle("Clear search"));
+        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="search"
+            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(
+          <Input
+            id="name"
+            name="name"
+            value="mic"
+            type="search"
+            onClear={mockOnClear}
+            clearButtonLabel="Clear search"
+          />
+        );
+        const input = getByRole("searchbox");
+        const button = getByRole("button");
+        userEvent.tab();
+        expect(input).toHaveFocus();
+        userEvent.tab();
+        expect(button).toHaveFocus();
+        userEvent.keyboard("{space}");
+        expect(mockOnClear).toHaveBeenCalled();
+      });
+
+      it("should allow keyboard access to and Enter key triggering of the clear button", () => {
+        const mockOnClear = jest.fn();
+        const { getByRole } = render(
+          <Input
+            id="name"
+            name="name"
+            value="mic"
+            type="search"
+            onClear={mockOnClear}
+            clearButtonLabel="Clear search"
+          />
+        );
+        const input = getByRole("searchbox");
+        const button = getByRole("button");
+        userEvent.tab();
+        expect(input).toHaveFocus();
+        userEvent.tab();
+        expect(button).toHaveFocus();
+        userEvent.keyboard("{enter}");
+        expect(mockOnClear).toHaveBeenCalled();
+      });
+    });
+
+    describe("Manual Input.ClearButton usage", () => {
+      it("should render a clear button when passed with elemAfter", () => {
+        const { getByTitle } = render(
+          <Input
+            id="name"
+            name="name"
+            value="mic"
+            type="text"
+            elemAfter={<Input.ClearButton />}
+            clearButtonLabel="Clear search"
+          />
+        );
+        expect(getByTitle("Clear search")).toBeTruthy();
+      });
+
+      it("should use the fallback title if clearButtonLabel is not provided", () => {
+        const { getByTitle } = render(
+          <Input
+            id="name"
+            name="name"
+            value="mic"
+            type="text"
+            elemAfter={<Input.ClearButton />}
+          />
+        );
+        expect(getByTitle("Clear")).toBeTruthy();
+      });
+
+      it("should call onClear when Input.ClearButton is clicked", () => {
+        const mockOnClear = jest.fn();
+        const { getByTitle } = render(
+          <Input
+            id="name"
+            name="name"
+            value="mic"
+            type="text"
+            elemAfter={<Input.ClearButton />}
+            onClear={mockOnClear}
+            clearButtonLabel="Clear search"
+          />
+        );
+        fireEvent.click(getByTitle("Clear search"));
+        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(
+          <Input
+            id="name"
+            name="name"
+            value="mic"
+            type="text"
+            elemAfter={<Input.ClearButton />}
+            onClear={mockOnClear}
+            clearButtonLabel="Clear search"
+          />
+        );
+        const input = getByRole("textbox");
+        const button = getByRole("button");
+        userEvent.tab();
+        expect(input).toHaveFocus();
+        userEvent.tab();
+        expect(button).toHaveFocus();
+        userEvent.keyboard("{space}");
+        expect(mockOnClear).toHaveBeenCalled();
+      });
+
+      it("should allow keyboard access to and Enter key triggering of the clear button", () => {
+        const mockOnClear = jest.fn();
+        const { getByRole } = render(
+          <Input
+            id="name"
+            name="name"
+            value="mic"
+            type="text"
+            elemAfter={<Input.ClearButton />}
+            onClear={mockOnClear}
+            clearButtonLabel="Clear search"
+          />
+        );
+        const input = getByRole("textbox");
+        const button = getByRole("button");
+        userEvent.tab();
+        expect(input).toHaveFocus();
+        userEvent.tab();
+        expect(button).toHaveFocus();
+        userEvent.keyboard("{enter}");
+        expect(mockOnClear).toHaveBeenCalled();
+      });
+    });
+  });
+
   describe("autoComplete prop", () => {
     it("should not have autoComplete attribute when passed prop is not passed", () => {
       const { getByDataQaLabel } = render(<Input id="name" name="name" />);

package/__flow__/Input/styles.js

@@ -140,7 +140,7 @@ export const Accessory: StyledComponent<any, TypeTheme, *> = styled.div`
   ${(props) =>
     props.after &&
     css`
-      right: ${props.theme.space[350]};
+      right: ${props.isClearButton ? 0 : props.theme.space[350]};
     `};
 `;
 

package/__flow__/themes/dark/theme.js

@@ -229,6 +229,7 @@ const colors = {
     map: datavizPalette.DATAVIZ_COLORS_MAP,
     list: datavizPalette.DATAVIZ_COLORS_LIST,
   },
+  // Remove this in a future version in favor of the above object
   ...datavizPalette,
 };
 

package/__flow__/themes/light/literal-colors.js

@@ -15,6 +15,7 @@ const literalColors = {
     "800": COLORS.COLOR_NEUTRAL_800,
     "900": COLORS.COLOR_NEUTRAL_900,
     "1000": COLORS.COLOR_NEUTRAL_1000,
+    "1100": COLORS.COLOR_NEUTRAL_1100,
   },
   green: {
     "0": COLORS.COLOR_GREEN_0,
@@ -42,6 +43,7 @@ const literalColors = {
     "800": COLORS.COLOR_RED_800,
     "900": COLORS.COLOR_RED_900,
     "1000": COLORS.COLOR_RED_1000,
+    "1100": COLORS.COLOR_RED_1100,
   },
   blue: {
     "0": COLORS.COLOR_BLUE_0,

package/__flow__/themes/light/theme.js

@@ -256,6 +256,7 @@ const colors = {
     list: datavizPalette.DATAVIZ_COLORS_LIST,
   },
   ...literalColors,
+  // Remove this in a future version in favor of the above object
   ...datavizPalette,
 };
 

package/__flow__/types/theme.colors.flow.js

@@ -1,6 +1,7 @@
 // @flow strict-local
 
 import literalColors from "../themes/light/literal-colors";
+import { datavizPalette } from "../themes/light/dataviz-palette";
 
 type TypeAppColors = {|
   app: {
@@ -170,6 +171,7 @@ type TypeIconColors = {|
     danger: string,
     info: string,
     opportunity: string,
+    applied: string,
     positive_sentiment: string,
     negative_sentiment: string,
     neutral_sentiment: string,
@@ -204,6 +206,28 @@ type TypeListItemColors = {|
   },
 |};
 
+type TypeOverlayColors = {|
+  overlay: {
+    background: {
+      base: string,
+    },
+    text: {
+      base: string,
+    },
+    icon: {
+      base: string,
+    },
+  },
+|};
+
+type TypeElevationColors = {|
+  elevation: {
+    base: string,
+  },
+|};
+
+type TypeDatavizColors = typeof datavizPalette;
+
 type TypeNetworkColors = {|
   network: {
     twitter: string,
@@ -245,6 +269,9 @@ export type TypeColors = {
   ...TypeIconColors,
   ...TypeFormColors,
   ...TypeListItemColors,
+  ...TypeOverlayColors,
+  ...TypeElevationColors,
+  ...TypeDatavizColors,
   ...TypeNetworkColors,
   ...TypeLiteralColors,
 };

package/commonjs/Input/index.js

@@ -7,7 +7,13 @@ var React = _interopRequireWildcard(require("react"));
 
 var _styles = _interopRequireWildcard(require("./styles"));
 
-var _excluded = ["autoComplete", "autoFocus", "disabled", "readOnly", "isInvalid", "hasWarning", "id", "name", "placeholder", "type", "required", "value", "elemBefore", "elemAfter", "maxLength", "ariaLabel", "ariaDescribedby", "innerRef", "onBlur", "onChange", "onFocus", "onKeyDown", "onKeyUp", "onPaste", "inputProps", "qa", "appearance"];
+var _Button = _interopRequireDefault(require("../Button"));
+
+var _Icon = _interopRequireDefault(require("../Icon"));
+
+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"];
+
+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); }
 
@@ -21,6 +27,21 @@ 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 ClearButton = function ClearButton() {
+  var _React$useContext = React.useContext(InputContext),
+      handleClear = _React$useContext.handleClear,
+      clearButtonLabel = _React$useContext.clearButtonLabel;
+
+  return /*#__PURE__*/React.createElement(_Button.default, {
+    onClick: handleClear
+  }, /*#__PURE__*/React.createElement(_Icon.default, {
+    name: "circlex",
+    title: clearButtonLabel || "Clear"
+  }));
+};
+
 var Input = /*#__PURE__*/function (_React$Component) {
   _inheritsLoose(Input, _React$Component);
 
@@ -34,39 +55,35 @@ var Input = /*#__PURE__*/function (_React$Component) {
     _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
 
     _this.handleBlur = function (e) {
-      if (_this.props.onBlur) {
-        _this.props.onBlur(e);
+      return _this.props.onBlur == null ? void 0 : _this.props.onBlur(e);
+    };
+
+    _this.handleClear = function (e) {
+      if (_this.props.onClear) {
+        _this.props.onClear(e);
+      } else if (_this.props.onChange) {
+        _this.props.onChange(e, "");
       }
     };
 
     _this.handleChange = function (e) {
-      if (_this.props.onChange) {
-        _this.props.onChange(e, e.currentTarget.value);
-      }
+      return _this.props.onChange == null ? void 0 : _this.props.onChange(e, e.currentTarget.value);
     };
 
     _this.handleFocus = function (e) {
-      if (_this.props.onFocus) {
-        _this.props.onFocus(e);
-      }
+      return _this.props.onFocus == null ? void 0 : _this.props.onFocus(e);
     };
 
     _this.handleKeyDown = function (e) {
-      if (_this.props.onKeyDown) {
-        _this.props.onKeyDown(e, e.currentTarget.value);
-      }
+      return _this.props.onKeyDown == null ? void 0 : _this.props.onKeyDown(e, e.currentTarget.value);
     };
 
     _this.handleKeyUp = function (e) {
-      if (_this.props.onKeyUp) {
-        _this.props.onKeyUp(e, e.currentTarget.value);
-      }
+      return _this.props.onKeyUp == null ? void 0 : _this.props.onKeyUp(e, e.currentTarget.value);
     };
 
     _this.handlePaste = function (e) {
-      if (_this.props.onPaste) {
-        _this.props.onPaste(e, e.currentTarget.value);
-      }
+      return _this.props.onPaste == null ? void 0 : _this.props.onPaste(e, e.currentTarget.value);
     };
 
     return _this;
@@ -75,6 +92,8 @@ var Input = /*#__PURE__*/function (_React$Component) {
   var _proto = Input.prototype;
 
   _proto.render = function render() {
+    var _elementAfter$type;
+
     var _this$props = this.props,
         autoComplete = _this$props.autoComplete,
         autoFocus = _this$props.autoFocus,
@@ -93,9 +112,11 @@ var Input = /*#__PURE__*/function (_React$Component) {
         maxLength = _this$props.maxLength,
         ariaLabel = _this$props.ariaLabel,
         ariaDescribedby = _this$props.ariaDescribedby,
+        clearButtonLabel = _this$props.clearButtonLabel,
         innerRef = _this$props.innerRef,
         onBlur = _this$props.onBlur,
         onChange = _this$props.onChange,
+        onClear = _this$props.onClear,
         onFocus = _this$props.onFocus,
         onKeyDown = _this$props.onKeyDown,
         onKeyUp = _this$props.onKeyUp,
@@ -105,25 +126,37 @@ var Input = /*#__PURE__*/function (_React$Component) {
         _this$props$qa = _this$props.qa,
         qa = _this$props$qa === void 0 ? {} : _this$props$qa,
         appearance = _this$props.appearance,
-        rest = _objectWithoutPropertiesLoose(_this$props, _excluded);
+        rest = _objectWithoutPropertiesLoose(_this$props, _excluded); // Convert autoComplete from a boolean prop to a string value.
+
 
     var autoCompleteValue = undefined;
 
     if (autoComplete !== undefined) {
       autoCompleteValue = autoComplete ? "on" : "off";
-    }
+    } // Add default elemBefore and elemAfter elements if type is search.
 
+
+    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;
     return /*#__PURE__*/React.createElement(_styles.default, _extends({
-      hasBeforeElement: !!elemBefore,
-      hasAfterElement: !!elemAfter,
+      hasBeforeElement: !!elementBefore,
+      hasAfterElement: !!elementAfter,
       disabled: disabled,
       invalid: !!isInvalid,
       warning: hasWarning,
       appearance: appearance // $FlowIssue - upgrade v0.112.0
 
-    }, rest), elemBefore && /*#__PURE__*/React.createElement(_styles.Accessory, {
+    }, rest), /*#__PURE__*/React.createElement(InputContext.Provider, {
+      value: {
+        handleClear: this.handleClear,
+        clearButtonLabel: clearButtonLabel
+      }
+    }, elementBefore && /*#__PURE__*/React.createElement(_styles.Accessory, {
       before: true
-    }, elemBefore), /*#__PURE__*/React.createElement("input", _extends({
+    }, elementBefore), /*#__PURE__*/React.createElement("input", _extends({
       "aria-invalid": !!isInvalid,
       "aria-label": ariaLabel,
       "aria-describedby": ariaDescribedby,
@@ -148,19 +181,25 @@ var Input = /*#__PURE__*/function (_React$Component) {
       "data-qa-input": name || "",
       "data-qa-input-isdisabled": disabled === true,
       "data-qa-input-isrequired": required === true
-    }, qa, inputProps)), elemAfter && /*#__PURE__*/React.createElement(_styles.Accessory, {
-      after: true
-    }, elemAfter));
+    }, qa, inputProps)), elementAfter && /*#__PURE__*/React.createElement(_styles.Accessory, {
+      after: true // Used for positioning. 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.
+      ,
+      isClearButton: (elementAfter == null ? void 0 : (_elementAfter$type = elementAfter.type) == null ? void 0 : _elementAfter$type.prototype) === Input.ClearButton.prototype
+    }, elementAfter)));
   };
 
   return Input;
 }(React.Component);
 
-exports.default = Input;
 Input.defaultProps = {
   autoFocus: false,
   disabled: false,
   type: "text",
   size: "default",
   appearance: "primary"
-};
+};
+Input.ClearButton = ClearButton;
+Input.ClearButton.displayName = "Input.ClearButton";
+var _default = Input;
+exports.default = _default;

package/commonjs/Input/styles.js

@@ -86,7 +86,7 @@ var Accessory = _styledComponents.default.div.withConfig({
 }, function (props) {
   return props.before && (0, _styledComponents.css)(["left:", ";"], props.theme.space[350]);
 }, function (props) {
-  return props.after && (0, _styledComponents.css)(["right:", ";"], props.theme.space[350]);
+  return props.after && (0, _styledComponents.css)(["right:", ";"], props.isClearButton ? 0 : props.theme.space[350]);
 });
 
 exports.Accessory = Accessory;

package/commonjs/themes/light/literal-colors.js

@@ -19,7 +19,8 @@ var literalColors = {
     "700": _seedsColor.default.COLOR_NEUTRAL_700,
     "800": _seedsColor.default.COLOR_NEUTRAL_800,
     "900": _seedsColor.default.COLOR_NEUTRAL_900,
-    "1000": _seedsColor.default.COLOR_NEUTRAL_1000
+    "1000": _seedsColor.default.COLOR_NEUTRAL_1000,
+    "1100": _seedsColor.default.COLOR_NEUTRAL_1100
   },
   green: {
     "0": _seedsColor.default.COLOR_GREEN_0,
@@ -46,7 +47,8 @@ var literalColors = {
     "700": _seedsColor.default.COLOR_RED_700,
     "800": _seedsColor.default.COLOR_RED_800,
     "900": _seedsColor.default.COLOR_RED_900,
-    "1000": _seedsColor.default.COLOR_RED_1000
+    "1000": _seedsColor.default.COLOR_RED_1000,
+    "1100": _seedsColor.default.COLOR_RED_1100
   },
   blue: {
     "0": _seedsColor.default.COLOR_BLUE_0,

package/commonjs/types/theme.colors.flow.js

@@ -2,4 +2,6 @@
 
 var _literalColors = _interopRequireDefault(require("../themes/light/literal-colors"));
 
+var _datavizPalette = require("../themes/light/dataviz-palette");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/dist/themes/dark/dark.scss

@@ -262,7 +262,8 @@ $dark: (
         700: #515e5f,
         800: #364141,
         900: #273333,
-        1000: #162020
+        1000: #162020,
+        1100: #040404
       ),
       green: (
         0: #ebf9eb,
@@ -289,7 +290,8 @@ $dark: (
         700: #db3e3e,
         800: #c63434,
         900: #992222,
-        1000: #6d1313
+        1000: #6d1313,
+        1100: #2b1111
       ),
       blue: (
         0: #e9f8ff,

package/dist/themes/light/light.scss

@@ -269,7 +269,8 @@ $light: (
         700: #515e5f,
         800: #364141,
         900: #273333,
-        1000: #162020
+        1000: #162020,
+        1100: #040404
       ),
       green: (
         0: #ebf9eb,
@@ -296,7 +297,8 @@ $light: (
         700: #db3e3e,
         800: #c63434,
         900: #992222,
-        1000: #6d1313
+        1000: #6d1313,
+        1100: #2b1111
       ),
       blue: (
         0: #e9f8ff,

package/lib/Input/index.js

@@ -1,4 +1,4 @@
-var _excluded = ["autoComplete", "autoFocus", "disabled", "readOnly", "isInvalid", "hasWarning", "id", "name", "placeholder", "type", "required", "value", "elemBefore", "elemAfter", "maxLength", "ariaLabel", "ariaDescribedby", "innerRef", "onBlur", "onChange", "onFocus", "onKeyDown", "onKeyUp", "onPaste", "inputProps", "qa", "appearance"];
+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"];
 
 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); }
 
@@ -10,6 +10,22 @@ function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || func
 
 import * as React from "react";
 import Container, { Accessory } from "./styles";
+import Button from "../Button";
+import Icon from "../Icon";
+var InputContext = /*#__PURE__*/React.createContext({});
+
+var ClearButton = function ClearButton() {
+  var _React$useContext = React.useContext(InputContext),
+      handleClear = _React$useContext.handleClear,
+      clearButtonLabel = _React$useContext.clearButtonLabel;
+
+  return /*#__PURE__*/React.createElement(Button, {
+    onClick: handleClear
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "circlex",
+    title: clearButtonLabel || "Clear"
+  }));
+};
 
 var Input = /*#__PURE__*/function (_React$Component) {
   _inheritsLoose(Input, _React$Component);
@@ -24,39 +40,35 @@ var Input = /*#__PURE__*/function (_React$Component) {
     _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
 
     _this.handleBlur = function (e) {
-      if (_this.props.onBlur) {
-        _this.props.onBlur(e);
+      return _this.props.onBlur == null ? void 0 : _this.props.onBlur(e);
+    };
+
+    _this.handleClear = function (e) {
+      if (_this.props.onClear) {
+        _this.props.onClear(e);
+      } else if (_this.props.onChange) {
+        _this.props.onChange(e, "");
       }
     };
 
     _this.handleChange = function (e) {
-      if (_this.props.onChange) {
-        _this.props.onChange(e, e.currentTarget.value);
-      }
+      return _this.props.onChange == null ? void 0 : _this.props.onChange(e, e.currentTarget.value);
     };
 
     _this.handleFocus = function (e) {
-      if (_this.props.onFocus) {
-        _this.props.onFocus(e);
-      }
+      return _this.props.onFocus == null ? void 0 : _this.props.onFocus(e);
     };
 
     _this.handleKeyDown = function (e) {
-      if (_this.props.onKeyDown) {
-        _this.props.onKeyDown(e, e.currentTarget.value);
-      }
+      return _this.props.onKeyDown == null ? void 0 : _this.props.onKeyDown(e, e.currentTarget.value);
     };
 
     _this.handleKeyUp = function (e) {
-      if (_this.props.onKeyUp) {
-        _this.props.onKeyUp(e, e.currentTarget.value);
-      }
+      return _this.props.onKeyUp == null ? void 0 : _this.props.onKeyUp(e, e.currentTarget.value);
     };
 
     _this.handlePaste = function (e) {
-      if (_this.props.onPaste) {
-        _this.props.onPaste(e, e.currentTarget.value);
-      }
+      return _this.props.onPaste == null ? void 0 : _this.props.onPaste(e, e.currentTarget.value);
     };
 
     return _this;
@@ -65,6 +77,8 @@ var Input = /*#__PURE__*/function (_React$Component) {
   var _proto = Input.prototype;
 
   _proto.render = function render() {
+    var _elementAfter$type;
+
     var _this$props = this.props,
         autoComplete = _this$props.autoComplete,
         autoFocus = _this$props.autoFocus,
@@ -83,9 +97,11 @@ var Input = /*#__PURE__*/function (_React$Component) {
         maxLength = _this$props.maxLength,
         ariaLabel = _this$props.ariaLabel,
         ariaDescribedby = _this$props.ariaDescribedby,
+        clearButtonLabel = _this$props.clearButtonLabel,
         innerRef = _this$props.innerRef,
         onBlur = _this$props.onBlur,
         onChange = _this$props.onChange,
+        onClear = _this$props.onClear,
         onFocus = _this$props.onFocus,
         onKeyDown = _this$props.onKeyDown,
         onKeyUp = _this$props.onKeyUp,
@@ -95,25 +111,37 @@ var Input = /*#__PURE__*/function (_React$Component) {
         _this$props$qa = _this$props.qa,
         qa = _this$props$qa === void 0 ? {} : _this$props$qa,
         appearance = _this$props.appearance,
-        rest = _objectWithoutPropertiesLoose(_this$props, _excluded);
+        rest = _objectWithoutPropertiesLoose(_this$props, _excluded); // Convert autoComplete from a boolean prop to a string value.
+
 
     var autoCompleteValue = undefined;
 
     if (autoComplete !== undefined) {
       autoCompleteValue = autoComplete ? "on" : "off";
-    }
+    } // Add default elemBefore and elemAfter elements if type is search.
+
 
+    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;
     return /*#__PURE__*/React.createElement(Container, _extends({
-      hasBeforeElement: !!elemBefore,
-      hasAfterElement: !!elemAfter,
+      hasBeforeElement: !!elementBefore,
+      hasAfterElement: !!elementAfter,
       disabled: disabled,
       invalid: !!isInvalid,
       warning: hasWarning,
       appearance: appearance // $FlowIssue - upgrade v0.112.0
 
-    }, rest), elemBefore && /*#__PURE__*/React.createElement(Accessory, {
+    }, rest), /*#__PURE__*/React.createElement(InputContext.Provider, {
+      value: {
+        handleClear: this.handleClear,
+        clearButtonLabel: clearButtonLabel
+      }
+    }, elementBefore && /*#__PURE__*/React.createElement(Accessory, {
       before: true
-    }, elemBefore), /*#__PURE__*/React.createElement("input", _extends({
+    }, elementBefore), /*#__PURE__*/React.createElement("input", _extends({
       "aria-invalid": !!isInvalid,
       "aria-label": ariaLabel,
       "aria-describedby": ariaDescribedby,
@@ -138,9 +166,12 @@ var Input = /*#__PURE__*/function (_React$Component) {
       "data-qa-input": name || "",
       "data-qa-input-isdisabled": disabled === true,
       "data-qa-input-isrequired": required === true
-    }, qa, inputProps)), elemAfter && /*#__PURE__*/React.createElement(Accessory, {
-      after: true
-    }, elemAfter));
+    }, qa, inputProps)), elementAfter && /*#__PURE__*/React.createElement(Accessory, {
+      after: true // Used for positioning. 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.
+      ,
+      isClearButton: (elementAfter == null ? void 0 : (_elementAfter$type = elementAfter.type) == null ? void 0 : _elementAfter$type.prototype) === Input.ClearButton.prototype
+    }, elementAfter)));
   };
 
   return Input;
@@ -153,4 +184,6 @@ Input.defaultProps = {
   size: "default",
   appearance: "primary"
 };
-export { Input as default };
+Input.ClearButton = ClearButton;
+Input.ClearButton.displayName = "Input.ClearButton";
+export default Input;

package/lib/Input/styles.js

@@ -73,7 +73,7 @@ export var Accessory = styled.div.withConfig({
 }, function (props) {
   return props.before && css(["left:", ";"], props.theme.space[350]);
 }, function (props) {
-  return props.after && css(["right:", ";"], props.theme.space[350]);
+  return props.after && css(["right:", ";"], props.isClearButton ? 0 : props.theme.space[350]);
 });
 Container.displayName = "InputContainer";
 Accessory.displayName = "InputAccessory";

package/lib/themes/light/literal-colors.js

@@ -11,7 +11,8 @@ var literalColors = {
     "700": COLORS.COLOR_NEUTRAL_700,
     "800": COLORS.COLOR_NEUTRAL_800,
     "900": COLORS.COLOR_NEUTRAL_900,
-    "1000": COLORS.COLOR_NEUTRAL_1000
+    "1000": COLORS.COLOR_NEUTRAL_1000,
+    "1100": COLORS.COLOR_NEUTRAL_1100
   },
   green: {
     "0": COLORS.COLOR_GREEN_0,
@@ -38,7 +39,8 @@ var literalColors = {
     "700": COLORS.COLOR_RED_700,
     "800": COLORS.COLOR_RED_800,
     "900": COLORS.COLOR_RED_900,
-    "1000": COLORS.COLOR_RED_1000
+    "1000": COLORS.COLOR_RED_1000,
+    "1100": COLORS.COLOR_RED_1100
   },
   blue: {
     "0": COLORS.COLOR_BLUE_0,

package/lib/types/theme.colors.flow.js

@@ -1 +1,2 @@
-import literalColors from "../themes/light/literal-colors";
+import literalColors from "../themes/light/literal-colors";
+import { datavizPalette } from "../themes/light/dataviz-palette";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/racine",
-  "version": "11.1.2-beta.0",
+  "version": "11.3.0-beta.0",
   "license": "MIT",
   "files": [
     "__flow__",
@@ -23,7 +23,6 @@
     "./includeIcons.js"
   ],
   "scripts": {
-    "preinstall": "node ./bin/buildNpm.js",
     "install-deps": "yarn install",
     "prepublishOnly": "yarn run build",
     "precommit": "lint-staged",