carbon-react 104.34.0 → 104.36.0

package/esm/components/scrollable-list/scrollable-list.component.js

@@ -0,0 +1,306 @@
+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); }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
+
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _possibleConstructorReturn(self, call) { if (call && (typeof call === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
+
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+import tagComponent from "../../__internal__/utils/helpers/tags/tags";
+import Events from "../../__internal__/utils/helpers/events";
+import asScrollableListItem from "./as-scrollable-list-item.wrapper";
+import ScrollableListContext from "./scrollable-list.context";
+import ScrollableListContainer from "./scrollable-list.style";
+import Logger from "../../__internal__/utils/logger";
+let deprecatedWarnTriggered = false;
+
+let ScrollableList = /*#__PURE__*/function (_Component) {
+  _inherits(ScrollableList, _Component);
+
+  var _super = _createSuper(ScrollableList);
+
+  function ScrollableList(props) {
+    var _this;
+
+    _classCallCheck(this, ScrollableList);
+
+    _this = _super.call(this, props);
+
+    _defineProperty(_assertThisInitialized(_this), "state", {
+      selectedItem: -1 // defaults to nothing being highlighted
+
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "blockOptionsHover", false);
+
+    _defineProperty(_assertThisInitialized(_this), "scrollBox", /*#__PURE__*/React.createRef());
+
+    _defineProperty(_assertThisInitialized(_this), "selectItem", itemIndex => {
+      const selectedItem = _this.props.children[itemIndex];
+      if (!_this.props.onSelect || !selectedItem) return;
+
+      _this.props.onSelect(selectedItem.props.id);
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleMouseMove", () => {
+      _this.blockOptionsHover = false;
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleMouseOver", selectedItem => {
+      if (!_this.blockOptionsHover) {
+        _this.setState({
+          selectedItem
+        });
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleScroll", ({
+      target: {
+        scrollTop,
+        scrollHeight
+      }
+    }) => {
+      if (!_this.props.onLazyLoad) return;
+      if (scrollHeight - scrollTop < 300) _this.props.onLazyLoad();
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleKeyDown", e => {
+      _this.blockOptionsHover = true;
+      const {
+        selectedItem
+      } = _this.state;
+      let newPos = selectedItem;
+
+      if (Events.isUpKey(e)) {
+        e.preventDefault();
+        newPos = _this.nextSelectable("up", newPos);
+      } else if (Events.isDownKey(e)) {
+        e.preventDefault();
+        newPos = _this.nextSelectable("down", newPos);
+      } else if (Events.isEndKey(e)) {
+        e.preventDefault();
+        newPos = _this.selectLastItem();
+      } else if (Events.isHomeKey(e)) {
+        e.preventDefault();
+        newPos = _this.selectFirstItem();
+      } else if (Events.isEnterKey(e)) {
+        e.preventDefault();
+
+        _this.selectItem(selectedItem);
+
+        return;
+      } else if (Events.isTabKey(e)) {
+        const index = _this.state.selectedItem;
+        if (index > -1) _this.selectItem(index);
+        return;
+      } else {
+        return;
+      }
+
+      _this.updateScroll(newPos);
+
+      _this.setState({
+        selectedItem: newPos
+      });
+    });
+
+    if (!deprecatedWarnTriggered) {
+      deprecatedWarnTriggered = true; // eslint-disable-next-line max-len
+
+      Logger.deprecate("`Scrollable List` component is deprecated and will soon be removed.");
+    }
+
+    return _this;
+  }
+
+  _createClass(ScrollableList, [{
+    key: "UNSAFE_componentWillReceiveProps",
+    value: function UNSAFE_componentWillReceiveProps(nextProps) {
+      // if selected item is beyond the number of children then reset it (eg. through filtering)
+      if (this.state.selectedItem + 1 > React.Children.count(nextProps.children)) {
+        let selectedItem = -1;
+        if (nextProps.alwaysHighlight) selectedItem = this.nextSelectable("down", selectedItem);
+        this.setState({
+          selectedItem
+        });
+        this.scrollBox.current.scrollTop = 0;
+      }
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps) {
+      if (prevProps.keyNavigation && !this.props.keyNavigation) {
+        document.removeEventListener("keydown", this.handleKeyDown);
+      } else if (!prevProps.keyNavigation && this.props.keyNavigation) {
+        document.addEventListener("keydown", this.handleKeyDown);
+      }
+    }
+  }, {
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      if (this.props.keyNavigation) {
+        document.addEventListener("keydown", this.handleKeyDown);
+      }
+
+      if (this.props.alwaysHighlight) {
+        const selectedItem = this.nextSelectable("down", -1);
+        this.setState({
+          selectedItem
+        });
+      }
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      document.removeEventListener("keydown", this.handleKeyDown);
+    }
+  }, {
+    key: "updateScroll",
+    value: function updateScroll(item) {
+      const {
+        current: list
+      } = this.scrollBox;
+      if (!list) return;
+      const {
+        offsetHeight: listHeight,
+        children
+      } = list;
+      if (!children[item]) return;
+      const {
+        offsetTop: itemTop,
+        offsetHeight: itemHeight
+      } = children[item];
+
+      if (itemTop + itemHeight > listHeight) {
+        // set the bottom of the scroll box to the bottom of the selected item
+        list.scrollTop = this.setScrollTop({
+          item,
+          children,
+          listHeight,
+          itemHeight
+        });
+      } else {
+        list.scrollTop = 0;
+      }
+    }
+  }, {
+    key: "setScrollTop",
+    value: function setScrollTop({
+      item,
+      children,
+      listHeight,
+      itemHeight
+    }) {
+      // total height of list up to selected item
+      const scrollPos = [...children].slice(0, item).reduce(this.buildHeightReducer, 0);
+      return scrollPos - listHeight + itemHeight;
+    }
+  }, {
+    key: "buildHeightReducer",
+    value: function buildHeightReducer(acc, {
+      offsetHeight
+    }) {
+      return acc + offsetHeight;
+    }
+  }, {
+    key: "nextSelectable",
+    value: function nextSelectable(direction, position) {
+      const {
+        isLoopable,
+        children
+      } = this.props;
+      if (!children) return null;
+      const limit = children.length;
+      if (!limit) return null;
+      const change = direction === "down" ? 1 : -1;
+      const nextPosition = position + change;
+
+      if (nextPosition <= -1) {
+        return isLoopable ? this.nextSelectable(direction, limit) : this.nextSelectable("down", -1);
+      }
+
+      if (nextPosition === limit) {
+        return isLoopable ? this.nextSelectable(direction, -1) : this.nextSelectable("up", limit);
+      }
+
+      const testNode = children[nextPosition];
+      return this.isSelectable(testNode) ? nextPosition : this.nextSelectable(direction, nextPosition);
+    }
+  }, {
+    key: "isSelectable",
+    value: function isSelectable(node) {
+      return node.props.isSelectable;
+    }
+  }, {
+    key: "selectLastItem",
+    value: function selectLastItem() {
+      const limit = this.props.children.length;
+      return this.nextSelectable("up", limit);
+    }
+  }, {
+    key: "selectFirstItem",
+    value: function selectFirstItem() {
+      return this.nextSelectable("down", -1);
+    }
+  }, {
+    key: "renderChildren",
+    value: function renderChildren(children) {
+      return React.Children.map(children, (child, index) => {
+        if (!child.props.isSelectable) return child;
+        const isSelected = index === this.state.selectedItem;
+        return asScrollableListItem(child, index, isSelected);
+      });
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      const {
+        children,
+        onLazyLoad,
+        ...props
+      } = this.props;
+      return /*#__PURE__*/React.createElement(ScrollableListContainer, _extends({
+        ref: this.scrollBox,
+        onScroll: this.handleScroll,
+        onMouseMove: this.handleMouseMove
+      }, props, tagComponent("scrollable-list", props)), /*#__PURE__*/React.createElement(ScrollableListContext.Provider, {
+        value: {
+          onMouseOver: this.handleMouseOver,
+          onClick: this.selectItem
+        }
+      }, this.renderChildren(children)));
+    }
+  }]);
+
+  return ScrollableList;
+}(Component);
+
+ScrollableList.propTypes = {
+  alwaysHighlight: PropTypes.bool,
+  // ensures an item is always highlighted
+  isLoopable: PropTypes.bool,
+  children: PropTypes.node,
+  keyNavigation: PropTypes.bool,
+  maxHeight: PropTypes.string,
+  onLazyLoad: PropTypes.func,
+  onSelect: PropTypes.func
+};
+export default ScrollableList;

package/esm/components/scrollable-list/scrollable-list.context.d.ts

@@ -0,0 +1,3 @@
+declare var _default: React.Context<any>;
+export default _default;
+import React from "react";

package/esm/components/scrollable-list/scrollable-list.context.js

@@ -0,0 +1,2 @@
+import React from "react";
+export default /*#__PURE__*/React.createContext();

package/esm/components/scrollable-list/scrollable-list.style.d.ts

@@ -0,0 +1,2 @@
+export default ScrollableListContainer;
+declare const ScrollableListContainer: import("styled-components").StyledComponent<"ul", any, {}, never>;

package/esm/components/scrollable-list/scrollable-list.style.js

@@ -0,0 +1,30 @@
+import styled from "styled-components";
+const ScrollableListContainer = styled.ul`
+  background-color: white;
+  border: 1px solid rgb(20, 20, 20, 0.5);
+  box-sizing: border-box;
+  box-shadow: 0 5px 5px 0 rgba(0, 20, 29, 0.2),
+    0 10px 10px 0 rgba(0, 20, 29, 0.1);
+  list-style-type: none;
+  max-height: ${props => `${props.maxHeight}`};
+  margin: 0;
+  overflow-x: hidden;
+  overflow-y: scroll;
+  padding: 0;
+  width: 100%;
+
+  &::-webkit-scrollbar {
+    -webkit-appearance: none;
+    background-color: #eee;
+    width: 8px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: #777777;
+    border-radius: 4px;
+  }
+`;
+ScrollableListContainer.defaultProps = {
+  maxHeight: "180px"
+};
+export default ScrollableListContainer;

package/esm/components/scrollable-list/test-utils.d.ts

@@ -0,0 +1,2 @@
+export default renderListItems;
+declare function renderListItems(opts: any): any[];

package/esm/components/scrollable-list/test-utils.js

@@ -0,0 +1,25 @@
+import React from "react";
+import { makeArrayKeys } from "../../__spec_helper__/test-utils";
+import ScrollableListItem from "./scrollable-list-item.component";
+
+const listItemReducer = ({
+  nonSelectables = [],
+  customSelectables = []
+}) => {
+  // generate jsx for selectable list items, based on indexes in config
+  return (acc, item, index) => {
+    if (nonSelectables.includes(item)) return [...acc, /*#__PURE__*/React.createElement("div", null)];
+    if (customSelectables.includes(item)) return [...acc, /*#__PURE__*/React.createElement("div", {
+      isSelectable: true
+    })];
+    return [...acc, /*#__PURE__*/React.createElement(ScrollableListItem, {
+      id: index
+    })];
+  };
+};
+
+const renderListItems = opts => {
+  return makeArrayKeys(opts.num).reduce(listItemReducer(opts), []);
+};
+
+export default renderListItems;

package/esm/components/search/index.d.ts

@@ -0,0 +1 @@
+export { default } from "./search";

package/esm/components/search/index.js

@@ -0,0 +1 @@
+export { default } from "./search.component";

package/esm/components/search/search.component.d.ts

@@ -0,0 +1,68 @@
+export default Search;
+declare function Search({ defaultValue, onChange, onClick, onFocus, onBlur, onKeyDown, value, id, name, threshold, searchWidth, searchButton, placeholder, variant, "aria-label": ariaLabel, inputRef, tabIndex, ...rest }: {
+    [x: string]: any;
+    defaultValue: any;
+    onChange: any;
+    onClick: any;
+    onFocus: any;
+    onBlur: any;
+    onKeyDown: any;
+    value: any;
+    id: any;
+    name: any;
+    threshold?: number | undefined;
+    searchWidth: any;
+    searchButton: any;
+    placeholder: any;
+    variant?: string | undefined;
+    "aria-label"?: string | undefined;
+    inputRef: any;
+    tabIndex: any;
+}): JSX.Element;
+declare namespace Search {
+    const propTypes: {
+        /** Prop for `uncontrolled` use */
+        defaultValue: PropTypes.Requireable<string>;
+        /** Prop for `controlled` use */
+        value: PropTypes.Requireable<string>;
+        /** Prop for `onClick` events.
+         * `onClick` events are triggered when the `searchButton` is clicked */
+        onClick: PropTypes.Requireable<(...args: any[]) => any>;
+        /** Prop for `onChange` events */
+        onChange: PropTypes.Requireable<(...args: any[]) => any>;
+        /** Prop for `onKeyDown` events */
+        onKeyDown: PropTypes.Requireable<(...args: any[]) => any>;
+        /** Prop boolean to state whether the `search` icon renders */
+        searchButton: PropTypes.Requireable<boolean>;
+        /** Prop for specifying an input width length.
+         * Leaving the `searchWidth` prop with no value will default the width to '100%' */
+        searchWidth: PropTypes.Requireable<string>;
+        /** Prop for `onFocus` events */
+        onFocus: PropTypes.Requireable<(...args: any[]) => any>;
+        /** Prop for `onBlur` events */
+        onBlur: PropTypes.Requireable<(...args: any[]) => any>;
+        /** Prop for `id` */
+        id: PropTypes.Requireable<string>;
+        /** Prop for `name` */
+        name: PropTypes.Requireable<string>;
+        /** Prop for active search threshold. This must be a positive number */
+        threshold(props: any, propName: any): Error | undefined;
+        /** Prop for a placeholder */
+        placeholder: PropTypes.Requireable<string>;
+        /** Prop to specify the styling of the search component */
+        variant: PropTypes.Requireable<string>;
+        /** Prop to specify the aria-label of the search component */
+        "aria-label": PropTypes.Requireable<string>;
+        /**
+         * @private
+         * @ignore
+         * A callback to retrieve the input reference
+         */
+        inputRef: PropTypes.Requireable<PropTypes.InferProps<{
+            current: PropTypes.Requireable<Element>;
+        }>>;
+        /** Input tabindex */
+        tabIndex: PropTypes.Requireable<number>;
+    };
+}
+import PropTypes from "prop-types";

package/esm/components/search/search.component.js

@@ -0,0 +1,244 @@
+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); }
+
+import React, { useState, useMemo, useEffect } from "react";
+import PropTypes from "prop-types";
+import styledSystemPropTypes from "@styled-system/prop-types";
+import invariant from "invariant";
+import StyledSearch, { StyledSearchButton, StyledButtonIcon } from "./search.style";
+import tagComponent from "../../__internal__/utils/helpers/tags/tags";
+import { filterStyledSystemMarginProps } from "../../style/utils";
+import Icon from "../icon";
+import Textbox from "../textbox";
+import Button from "../button";
+import Events from "../../__internal__/utils/helpers/events";
+const marginPropTypes = filterStyledSystemMarginProps(styledSystemPropTypes.space);
+
+const Search = ({
+  defaultValue,
+  onChange,
+  onClick,
+  onFocus,
+  onBlur,
+  onKeyDown,
+  value,
+  id,
+  name,
+  threshold = 3,
+  searchWidth,
+  searchButton,
+  placeholder,
+  variant = "default",
+  "aria-label": ariaLabel = "search",
+  inputRef,
+  tabIndex,
+  ...rest
+}) => {
+  const isControlled = value !== undefined;
+  const initialValue = isControlled ? value : defaultValue;
+  invariant(typeof initialValue === "string", "This component has no initial value");
+  const [searchValue, setSearchValue] = useState(initialValue);
+  const [isFocused, setIsFocused] = useState(false);
+  const [searchIsActive, setSearchIsActive] = useState(initialValue.length >= threshold);
+  useEffect(() => {
+    setSearchIsActive(!isControlled ? searchValue.length >= threshold : value.length >= threshold);
+  }, [isControlled, searchValue, threshold, value]);
+  const [iconType, iconTabIndex] = useMemo(() => {
+    const isSearchValueEmpty = !isControlled ? searchValue.length === 0 : value.length === 0;
+    const isFocusedOrActive = isFocused || searchIsActive || (inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === document.activeElement;
+
+    if (!isSearchValueEmpty) {
+      return ["cross", 0];
+    }
+
+    if (!isFocusedOrActive || threshold === 0 || !searchButton && isSearchValueEmpty) {
+      return ["search", -1];
+    }
+
+    return ["", -1];
+  }, [isControlled, searchValue, value, isFocused, searchIsActive, threshold, searchButton, inputRef]);
+
+  const handleChange = e => {
+    if (onChange) {
+      onChange(e);
+    }
+
+    if (!isControlled) {
+      setSearchValue(e.target.value);
+    }
+  };
+
+  const handleFocus = e => {
+    setIsFocused(true);
+
+    if (onFocus) {
+      onFocus(e);
+    }
+  };
+
+  let buttonProps = {};
+
+  if (searchButton && onClick) {
+    buttonProps = {
+      onClick: ev => {
+        onClick({
+          target: {
+            name: ev.target.name || name,
+            id: ev.target.id || id,
+            value: !isControlled ? searchValue : value
+          }
+        });
+      }
+    };
+  }
+
+  const handleIconClick = () => {
+    setSearchValue("");
+
+    if (onChange) {
+      onChange({
+        target: { ...(name && {
+            name
+          }),
+          ...(id && {
+            id
+          }),
+          value: ""
+        }
+      });
+    }
+  };
+
+  const handleMouseDown = ev => {
+    ev.preventDefault();
+  };
+
+  const handleBlur = e => {
+    setIsFocused(false);
+
+    if (onBlur) {
+      onBlur(e);
+    }
+  };
+
+  const handleKeyDown = ev => {
+    if (Events.isAlphabetKey(ev) || Events.isNumberKey(ev)) {
+      ev.stopPropagation();
+    }
+
+    if (onKeyDown) {
+      onKeyDown(ev);
+    }
+  };
+
+  const assignInput = input => {
+    if (inputRef) {
+      inputRef.current = input.current;
+    }
+  };
+
+  return /*#__PURE__*/React.createElement(StyledSearch, _extends({
+    isFocused: isFocused,
+    searchWidth: searchWidth,
+    searchIsActive: searchIsActive,
+    searchHasValue: !isControlled ? searchValue && searchValue.length : value && value.length,
+    showSearchButton: searchButton,
+    variant: variant,
+    mb: 0
+  }, filterStyledSystemMarginProps(rest), tagComponent("search", rest), {
+    id: id,
+    name: name
+  }, rest), /*#__PURE__*/React.createElement(Textbox, {
+    placeholder: placeholder,
+    value: !isControlled ? searchValue : value,
+    inputIcon: iconType,
+    iconTabIndex: iconTabIndex,
+    iconOnClick: handleIconClick,
+    iconOnMouseDown: handleMouseDown,
+    "aria-label": ariaLabel,
+    onFocus: handleFocus,
+    onBlur: handleBlur,
+    onChange: handleChange,
+    onKeyDown: handleKeyDown,
+    inputRef: assignInput,
+    tabIndex: tabIndex
+  }), searchButton && /*#__PURE__*/React.createElement(StyledSearchButton, null, Boolean(isFocused || (!isControlled ? searchValue.length : value.length)) && /*#__PURE__*/React.createElement(Button, _extends({
+    tabIndex: iconTabIndex,
+    size: "medium",
+    px: "16px"
+  }, buttonProps), /*#__PURE__*/React.createElement(StyledButtonIcon, null, /*#__PURE__*/React.createElement(Icon, {
+    type: "search"
+  })))));
+};
+
+Search.propTypes = {
+  /** Filtered styled system margin props */
+  ...marginPropTypes,
+
+  /** Prop for `uncontrolled` use */
+  defaultValue: PropTypes.string,
+
+  /** Prop for `controlled` use */
+  value: PropTypes.string,
+
+  /** Prop for `onClick` events.
+   * `onClick` events are triggered when the `searchButton` is clicked */
+  onClick: PropTypes.func,
+
+  /** Prop for `onChange` events */
+  onChange: PropTypes.func,
+
+  /** Prop for `onKeyDown` events */
+  onKeyDown: PropTypes.func,
+
+  /** Prop boolean to state whether the `search` icon renders */
+  searchButton: PropTypes.bool,
+
+  /** Prop for specifying an input width length.
+   * Leaving the `searchWidth` prop with no value will default the width to '100%' */
+  searchWidth: PropTypes.string,
+
+  /** Prop for `onFocus` events */
+  onFocus: PropTypes.func,
+
+  /** Prop for `onBlur` events */
+  onBlur: PropTypes.func,
+
+  /** Prop for `id` */
+  id: PropTypes.string,
+
+  /** Prop for `name` */
+  name: PropTypes.string,
+
+  /** Prop for active search threshold. This must be a positive number */
+  threshold(props, propName) {
+    let error;
+
+    if (props[propName] && typeof props[propName] === "number" && props[propName] < 0) {
+      error = new Error("Threshold must be a positive number.");
+    }
+
+    return error;
+  },
+
+  /** Prop for a placeholder */
+  placeholder: PropTypes.string,
+
+  /** Prop to specify the styling of the search component */
+  variant: PropTypes.oneOf(["default", "dark"]),
+
+  /** Prop to specify the aria-label of the search component */
+  "aria-label": PropTypes.string,
+
+  /**
+   * @private
+   * @ignore
+   * A callback to retrieve the input reference
+   */
+  inputRef: PropTypes.shape({
+    current: PropTypes.instanceOf(Element)
+  }),
+
+  /** Input tabindex */
+  tabIndex: PropTypes.number
+};
+export default Search;