@decisiv/ui-components 2.0.1-alpha.184 → 2.0.1-alpha.186

package/lib/components/Filter/kind.js

@@ -3,17 +3,19 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.hoverStyles = void 0;
+exports.default = exports.secondaryStyle = exports.primaryStyle = exports.hoverStyles = void 0;
 
-var _styledTheming = _interopRequireDefault(require("styled-theming"));
+var _designTokens = require("@decisiv/design-tokens");
+
+var _color = _interopRequireDefault(require("@decisiv/design-tokens/lib/color"));
+
+var _toColorString = _interopRequireDefault(require("polished/lib/color/toColorString"));
 
 var _rem = _interopRequireDefault(require("polished/lib/helpers/rem"));
 
 var _styledComponents = require("styled-components");
 
-var _toColorString = _interopRequireDefault(require("polished/lib/color/toColorString"));
-
-var _color = _interopRequireDefault(require("@decisiv/design-tokens/lib/color"));
+var _styledTheming = _interopRequireDefault(require("styled-theming"));
 
 var _ConfigProvider = require("../../providers/ConfigProvider");
 
@@ -22,24 +24,20 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 var hoverStyles = (0, _styledComponents.css)(["color:", ";background-color:", ";border:", " solid ", ";svg{color:", ";}"], (0, _toColorString.default)(_color.default.base.snowWhite), (0, _toColorString.default)(_color.default.interaction.indianOcean), (0, _rem.default)(1), (0, _toColorString.default)(_color.default.interaction.indianOcean), (0, _toColorString.default)(_color.default.base.snowWhite));
 exports.hoverStyles = hoverStyles;
 var primaryStyle = (0, _styledComponents.css)(["border:", " solid ", ";&:hover{", ";}&:disabled:disabled{background-color:transparent;color:", ";}"], (0, _rem.default)(1), (0, _toColorString.default)(_color.default.base.quarterMoon), hoverStyles, (0, _toColorString.default)(_color.default.opacity.charcoal40));
-// light and dark are the same ATM.
-var lightStyles = {
-  primary: primaryStyle
-};
-var darkStyles = {
-  primary: primaryStyle
-};
-var kindStyles = (0, _styledTheming.default)(_ConfigProvider.themeKeys.mode, {
-  light: function light(_ref) {
-    var _ref$kind = _ref.kind,
-        kind = _ref$kind === void 0 ? 'primary' : _ref$kind;
-    return lightStyles[kind];
+exports.primaryStyle = primaryStyle;
+var secondaryStyle = (0, _styledComponents.css)(["height:", ";font-size:", ";"], (0, _rem.default)(_designTokens.spacing.base * 2.4), (0, _rem.default)(_designTokens.typography.size.alias.paragraph2));
+exports.secondaryStyle = secondaryStyle;
+
+var kindStyles = _styledTheming.default.variants(_ConfigProvider.themeKeys.mode, 'kind', {
+  primary: {
+    light: primaryStyle,
+    dark: primaryStyle
   },
-  dark: function dark(_ref2) {
-    var _ref2$kind = _ref2.kind,
-        kind = _ref2$kind === void 0 ? 'primary' : _ref2$kind;
-    return darkStyles[kind];
+  secondary: {
+    light: secondaryStyle,
+    right: secondaryStyle
   }
 });
+
 var _default = kindStyles;
 exports.default = _default;

package/lib/components/Filter/schema.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../src/components/Filter/schema.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAEvC,eAAO,MAAM,yBAAyB;;;;CAyBpC,CAAC;AAEH,QAAA,MAAM,MAAM,KAAsC,CAAC;AAInD,eAAe,MAAM,CAAC"}
+{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../src/components/Filter/schema.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAEvC,eAAO,MAAM,yBAAyB;;;;CA0CpC,CAAC;AAEH,QAAA,MAAM,MAAM,KAAsC,CAAC;AAInD,eAAe,MAAM,CAAC"}

package/lib/components/Filter/schema.js

@@ -17,10 +17,14 @@ var makeFilterSchemaPropTypes = function makeFilterSchemaPropTypes(extensions) {
   return _objectSpread({
     text: _reactDesc.PropTypes.string.description("The Filter's text"),
     active: _reactDesc.PropTypes.bool.description("The Filter's active status. Use when you want to control the Filter with onClick.").defaultValue('false'),
-    badgeIcon: _reactDesc.PropTypes.element.description('Which `iconix` icon to render'),
-    badgeColor: _reactDesc.PropTypes.string.description('Which color to use as background for the icon. It always displays when an icon is provided.').defaultValue('information'),
+    badgeIcon: _reactDesc.PropTypes.element.description('Which `iconix` icon to render, only usable with the "simple" variant'),
+    badgeColor: _reactDesc.PropTypes.string.description('Which color to use as background for the icon. It always displays when an icon is provided. Only usable with the "simple" variant').defaultValue('information'),
     count: _reactDesc.PropTypes.number.description("The Filter's count, displayed to the left of the text. When not provided, no count is rendered."),
-    disabled: _reactDesc.PropTypes.bool.description("The Filter's displayed status of disabled or enabled.").defaultValue('false')
+    disabled: _reactDesc.PropTypes.bool.description("The Filter's displayed status of disabled or enabled.").defaultValue('false'),
+    kind: _reactDesc.PropTypes.oneOf(['primary', 'secondary']).defaultValue('primary'),
+    variant: _reactDesc.PropTypes.oneOf(['simple', 'action']).description('Use the variant to define the type of filter that you want to use').defaultValue('simple'),
+    startIcon: _reactDesc.PropTypes.element.description('Which `iconix` icon to render before the filter text, only usable with the "action" variant'),
+    endIcon: _reactDesc.PropTypes.element.description('Which `iconix` icon to render after the filter text, only usable with the "action" variant')
   }, extensions);
 };
 

package/lib/components/Filter/types.d.ts

@@ -2,17 +2,30 @@ import { ButtonHTMLAttributes } from 'react';
 import { IconProps } from '@decisiv/iconix';
 import { CommonUIColorKeys } from '../../utils/commonUIColors';
 import { TranslatedText } from '../../utils/useTranslations';
-export declare type Variant = 'simple';
-export declare type Kind = 'primary';
+export declare type Variant = 'simple' | 'action';
+export declare type Kind = 'primary' | 'secondary';
 export declare type IconComponent = (props: IconProps) => JSX.Element;
-export interface FilterProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-    active?: boolean;
-    count?: number;
-    badgeIcon?: IconComponent;
-    badgeColor?: CommonUIColorKeys;
+export interface BaseFilterProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     kind?: Kind;
-    text: TranslatedText;
     variant?: Variant;
+    text: TranslatedText;
+    count?: number;
+    active?: boolean;
     disabled?: boolean;
 }
+export interface SimpleFilterProps extends BaseFilterProps {
+    variant: 'simple';
+    badgeIcon?: IconComponent;
+    badgeColor?: CommonUIColorKeys;
+    startIcon?: never;
+    endIcon?: never;
+}
+export interface ActionFilterProps extends BaseFilterProps {
+    variant: 'action';
+    startIcon?: IconComponent;
+    endIcon?: IconComponent;
+    badgeIcon?: never;
+    badgeColor?: never;
+}
+export declare type FilterProps = SimpleFilterProps | ActionFilterProps;
 //# sourceMappingURL=types.d.ts.map

package/lib/components/Filter/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Filter/types.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAE5C,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC/D,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAE7D,oBAAY,OAAO,GAAG,QAAQ,CAAC;AAC/B,oBAAY,IAAI,GAAG,SAAS,CAAC;AAC7B,oBAAY,aAAa,GAAG,CAAC,KAAK,EAAE,SAAS,KAAK,GAAG,CAAC,OAAO,CAAC;AAE9D,MAAM,WAAW,WAAY,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IAC1E,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,UAAU,CAAC,EAAE,iBAAiB,CAAC;IAC/B,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,IAAI,EAAE,cAAc,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Filter/types.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAE5C,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC/D,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAE7D,oBAAY,OAAO,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAC1C,oBAAY,IAAI,GAAG,SAAS,GAAG,WAAW,CAAC;AAC3C,oBAAY,aAAa,GAAG,CAAC,KAAK,EAAE,SAAS,KAAK,GAAG,CAAC,OAAO,CAAC;AAE9D,MAAM,WAAW,eACf,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IAC/C,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,cAAc,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,iBAAkB,SAAQ,eAAe;IACxD,OAAO,EAAE,QAAQ,CAAC;IAClB,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,UAAU,CAAC,EAAE,iBAAiB,CAAC;IAC/B,SAAS,CAAC,EAAE,KAAK,CAAC;IAClB,OAAO,CAAC,EAAE,KAAK,CAAC;CACjB;AAED,MAAM,WAAW,iBAAkB,SAAQ,eAAe;IACxD,OAAO,EAAE,QAAQ,CAAC;IAClB,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,SAAS,CAAC,EAAE,KAAK,CAAC;IAClB,UAAU,CAAC,EAAE,KAAK,CAAC;CACpB;AAED,oBAAY,WAAW,GAAG,iBAAiB,GAAG,iBAAiB,CAAC"}

package/lib/components/SearchInput/index.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { SearchInputProps, SearchItem, StyledFlexProps } from './types';
-declare function SearchInput({ onSearch, value, onChange, size, disabled, searchDisabled, searchOn, ...props }: SearchInputProps): JSX.Element;
+declare function SearchInput({ onSearch, value, onChange, size, disabled, searchDisabled, searchOn, searchByOptions, searchByLabel, searchByValue, searchByName, searchByDefaultValue, searchByWidth, onSearchByChange, warningMessage, helpMessage, ...props }: SearchInputProps): JSX.Element;
 declare namespace SearchInput {
     var defaultProps: {
         size: string;

package/lib/components/SearchInput/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/SearchInput/index.tsx"],"names":[],"mappings":";AAiBA,OAAO,EAAE,gBAAgB,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAkExE,iBAAwB,WAAW,CAAC,EAClC,QAAQ,EACR,KAAK,EACL,QAAQ,EACR,IAAI,EACJ,QAAQ,EACR,cAAc,EACd,QAAmB,EACnB,GAAG,KAAK,EACT,EAAE,gBAAgB,GAAG,GAAG,CAAC,OAAO,CA0GhC;kBAnHuB,WAAW;;;;;eAAX,WAAW;AAyHnC,OAAO,EAAE,gBAAgB,EAAE,UAAU,EAAE,eAAe,EAAE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/SearchInput/index.tsx"],"names":[],"mappings":";AAYA,OAAO,EAAE,gBAAgB,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAiBxE,iBAAwB,WAAW,CAAC,EAClC,QAAQ,EACR,KAAK,EACL,QAAQ,EACR,IAAI,EACJ,QAAQ,EACR,cAAc,EACd,QAAmB,EACnB,eAAoB,EACpB,aAAkB,EAClB,aAAa,EACb,YAAiB,EACjB,oBAAoB,EACpB,aAAa,EACb,gBAAgB,EAChB,cAAc,EACd,WAAW,EACX,GAAG,KAAK,EACT,EAAE,gBAAgB,GAAG,GAAG,CAAC,OAAO,CAsIhC;kBAxJuB,WAAW;;;;;eAAX,WAAW;AA8JnC,OAAO,EAAE,gBAAgB,EAAE,UAAU,EAAE,eAAe,EAAE,CAAC"}

package/lib/components/SearchInput/index.js

@@ -25,38 +25,30 @@ Object.defineProperty(exports, "StyledFlexProps", {
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _isEmpty = _interopRequireDefault(require("lodash/isEmpty"));
+
 var _Times = _interopRequireDefault(require("@decisiv/iconix/lib/components/Times"));
 
 var _Search = _interopRequireDefault(require("@decisiv/iconix/lib/components/Search"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-
-var _spacing = _interopRequireDefault(require("@decisiv/design-tokens/lib/spacing"));
-
-var _rem = _interopRequireDefault(require("polished/lib/helpers/rem"));
-
-var _color = _interopRequireDefault(require("@decisiv/design-tokens/lib/color"));
-
-var _toColorString = _interopRequireDefault(require("polished/lib/color/toColorString"));
-
 var _useTranslations = _interopRequireDefault(require("../../utils/useTranslations"));
 
-var _Flex = _interopRequireDefault(require("../Flex"));
-
 var _Button = _interopRequireDefault(require("../Button"));
 
 var _InputField = _interopRequireDefault(require("../../atoms/InputField"));
 
-var _Tooltip = _interopRequireDefault(require("../Tooltip"));
+var _HelpMessage = _interopRequireDefault(require("../../atoms/InputField/HelpMessage"));
 
-var _focusRingWithColor = _interopRequireDefault(require("../../utils/focusRingWithColor"));
+var _Tooltip = _interopRequireDefault(require("../Tooltip"));
 
 var _types = require("./types");
 
-var _Input = _interopRequireDefault(require("../TextField/Input"));
+var _styles = require("./styles");
 
 var _useUpdateEffect = _interopRequireDefault(require("../../utils/useUpdateEffect"));
 
+var _Select = _interopRequireDefault(require("../Select"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
@@ -67,59 +59,28 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
-var StyledFlex = (0, _styledComponents.default)(_Flex.default).withConfig({
-  displayName: "SearchInput__StyledFlex",
-  componentId: "sc-1lgi0sd-0"
-})(["align-items:center;[cursor='text']{height:", "px;> div{", ";padding-bottom:", ";}}"], function (_ref) {
-  var mediumSized = _ref.mediumSized;
-  return mediumSized ? 50 : 32;
-}, function (_ref2) {
-  var mediumSized = _ref2.mediumSized;
-  return !mediumSized && "padding-top: ".concat((0, _rem.default)(_spacing.default.base * 0.1));
-}, function (_ref3) {
-  var mediumSized = _ref3.mediumSized;
-  return (0, _rem.default)(_spacing.default.base * (mediumSized ? 0.6 : 0.1));
-});
-var StyledBody = (0, _styledComponents.default)(_Flex.default).withConfig({
-  displayName: "SearchInput__StyledBody",
-  componentId: "sc-1lgi0sd-1"
-})(["flex:1;align-items:center;height:inherit;"]);
-var ButtonGroup = (0, _styledComponents.default)(_Flex.default).withConfig({
-  displayName: "SearchInput__ButtonGroup",
-  componentId: "sc-1lgi0sd-2"
-})(["align-items:center;margin-right:", ";cursor:default;"], function (_ref4) {
-  var mediumSized = _ref4.mediumSized;
-  return (0, _rem.default)(_spacing.default.base * (mediumSized ? 1 : 0.3));
-});
-var SearchIconWrapper = (0, _styledComponents.default)(_Flex.default).withConfig({
-  displayName: "SearchInput__SearchIconWrapper",
-  componentId: "sc-1lgi0sd-3"
-})(["color:", ";margin-right:", ";margin-left:", ";align-items:center;"], (0, _toColorString.default)(_color.default.base.alaskanHusky), (0, _rem.default)(_spacing.default.base * 1.5), function (_ref5) {
-  var inputSize = _ref5.inputSize;
-  return inputSize === 'small' ? 0 : (0, _rem.default)(_spacing.default.base * 0.5);
-});
-var TimesIconWrapper = (0, _styledComponents.default)(_Flex.default).withConfig({
-  displayName: "SearchInput__TimesIconWrapper",
-  componentId: "sc-1lgi0sd-4"
-})(["height:inherit;visibility:", ";margin-right:", ";color:", ";align-items:center;border:1px solid transparent;border-radius:2px;&:hover{color:", ";}&:focus{outline:none;border:1px solid ", ";", "}"], function (_ref6) {
-  var visible = _ref6.visible;
-  return visible ? 'visible' : 'hidden';
-}, (0, _rem.default)(_spacing.default.base), (0, _toColorString.default)(_color.default.interaction.pacificOcean), (0, _toColorString.default)(_color.default.status.danger.medium), (0, _toColorString.default)(_color.default.interaction.pacificOcean), (0, _focusRingWithColor.default)(_color.default.interaction.pacificOcean40));
-var StyledInput = (0, _styledComponents.default)(_Input.default).withConfig({
-  displayName: "SearchInput__StyledInput",
-  componentId: "sc-1lgi0sd-5"
-})(["padding:0;color:", ";"], (0, _toColorString.default)(_color.default.base.charcoal));
-
-function SearchInput(_ref7) {
-  var onSearch = _ref7.onSearch,
-      value = _ref7.value,
-      onChange = _ref7.onChange,
-      size = _ref7.size,
-      disabled = _ref7.disabled,
-      searchDisabled = _ref7.searchDisabled,
-      _ref7$searchOn = _ref7.searchOn,
-      searchOn = _ref7$searchOn === void 0 ? 'submit' : _ref7$searchOn,
-      props = _objectWithoutProperties(_ref7, ["onSearch", "value", "onChange", "size", "disabled", "searchDisabled", "searchOn"]);
+function SearchInput(_ref) {
+  var onSearch = _ref.onSearch,
+      value = _ref.value,
+      onChange = _ref.onChange,
+      size = _ref.size,
+      disabled = _ref.disabled,
+      searchDisabled = _ref.searchDisabled,
+      _ref$searchOn = _ref.searchOn,
+      searchOn = _ref$searchOn === void 0 ? 'submit' : _ref$searchOn,
+      _ref$searchByOptions = _ref.searchByOptions,
+      searchByOptions = _ref$searchByOptions === void 0 ? [] : _ref$searchByOptions,
+      _ref$searchByLabel = _ref.searchByLabel,
+      searchByLabel = _ref$searchByLabel === void 0 ? '' : _ref$searchByLabel,
+      searchByValue = _ref.searchByValue,
+      _ref$searchByName = _ref.searchByName,
+      searchByName = _ref$searchByName === void 0 ? '' : _ref$searchByName,
+      searchByDefaultValue = _ref.searchByDefaultValue,
+      searchByWidth = _ref.searchByWidth,
+      onSearchByChange = _ref.onSearchByChange,
+      warningMessage = _ref.warningMessage,
+      helpMessage = _ref.helpMessage,
+      props = _objectWithoutProperties(_ref, ["onSearch", "value", "onChange", "size", "disabled", "searchDisabled", "searchOn", "searchByOptions", "searchByLabel", "searchByValue", "searchByName", "searchByDefaultValue", "searchByWidth", "onSearchByChange", "warningMessage", "helpMessage"]);
 
   var translate = (0, _useTranslations.default)();
   var handleSearch = (0, _react.useCallback)(function () {
@@ -127,6 +88,7 @@ function SearchInput(_ref7) {
   }, [disabled, searchDisabled, onSearch, value]);
   var mediumSized = size === 'medium';
   var hasText = !!value && !!value.length;
+  var showSearchBy = !(0, _isEmpty.default)(searchByOptions);
   var handleClear = (0, _react.useCallback)(function () {
     !disabled && onChange && onChange({
       target: {
@@ -143,30 +105,45 @@ function SearchInput(_ref7) {
     }
   }, [searchOn, value]);
   var renderLeftIcon = searchOn === 'change' || searchOn === 'submit' && mediumSized;
-  return _react.default.createElement(StyledFlex, {
+  return _react.default.createElement(_styles.SearchInputContainer, null, _react.default.createElement(_styles.StyledFlex, {
     flex: 1,
     mediumSized: mediumSized,
     "data-testid": "search-container"
-  }, _react.default.createElement(_InputField.default, _extends({
+  }, showSearchBy && _react.default.createElement(_styles.SelectWrapper, {
+    width: searchByWidth
+  }, _react.default.createElement(_Select.default, {
+    "aria-label": translate(undefined, 'searchInput.searchBy'),
+    disabled: disabled,
+    hideClearButton: true,
+    hideLabel: !mediumSized,
+    label: searchByLabel,
+    name: searchByName,
+    options: searchByOptions,
+    value: searchByValue,
+    withWarningIntent: !!warningMessage,
+    onChange: onSearchByChange,
+    defaultValue: searchByDefaultValue
+  })), _react.default.createElement(_InputField.default, _extends({
     label: "",
     hideLabel: true,
     disabled: disabled,
-    value: value
+    value: value,
+    withWarningIntent: !!warningMessage
   }, props), function (p) {
-    return _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(StyledBody, null, renderLeftIcon && _react.default.createElement(SearchIconWrapper, {
+    return _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(_styles.StyledBody, null, renderLeftIcon && _react.default.createElement(_styles.SearchIconWrapper, {
       inputSize: size
     }, _react.default.createElement(_Search.default, {
       size: "medium",
       "data-testid": "search-icon"
-    })), _react.default.createElement(StyledInput, _extends({}, p, {
+    })), _react.default.createElement(_styles.StyledInput, _extends({}, p, {
       onChange: onChange,
       onKeyPress: handleKeyPress
-    })), _react.default.createElement(ButtonGroup, {
+    })), _react.default.createElement(_styles.ButtonGroup, {
       mediumSized: mediumSized
     }, !disabled && _react.default.createElement(_Tooltip.default, {
       placement: "top",
       target: // eslint-disable-next-line react/jsx-wrap-multilines
-      _react.default.createElement(TimesIconWrapper, {
+      _react.default.createElement(_styles.TimesIconWrapper, {
         tabIndex: 0,
         "aria-label": translate(undefined, 'searchInput.clearSearch'),
         onClick: handleClear,
@@ -183,6 +160,10 @@ function SearchInput(_ref7) {
       size: size,
       onClick: handleSearch
     }))));
+  })), !(0, _isEmpty.default)(warningMessage) && _react.default.createElement(_styles.WarningMessage, {
+    intent: "warning"
+  }, warningMessage), _react.default.createElement(_HelpMessage.default, {
+    helpMessage: helpMessage
   }));
 }
 

package/lib/components/SearchInput/index.test.js

@@ -20,8 +20,24 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
 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; }
 
+// Prevent warnings about missing document methods (createRange, etc.)
+jest.mock('popper.js', function () {
+  var _class, _temp;
+
+  var PopperJS = jest.requireActual('popper.js');
+  return _temp = _class = function _class() {
+    _classCallCheck(this, _class);
+
+    return {
+      destroy: function destroy() {},
+      scheduleUpdate: function scheduleUpdate() {}
+    };
+  }, _defineProperty(_class, "placements", PopperJS.placements), _temp;
+});
 beforeAll(function () {
   var root = document.createElement('div');
   root.setAttribute('id', 'popovers-root');
@@ -474,4 +490,171 @@ describe('Search input', function () {
       }, _callee14);
     })));
   });
+  describe('searchBy selector', function () {
+    var searchByOptions = [{
+      id: 'Value 1',
+      label: 'Value 1'
+    }, {
+      id: 'Value 2',
+      label: 'Value 2'
+    }, {
+      id: 'Value 3',
+      label: 'Value 3'
+    }];
+    it('renders list of options', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee15() {
+      var _render2, getByLabelText, getByText;
+
+      return regeneratorRuntime.wrap(function _callee15$(_context15) {
+        while (1) {
+          switch (_context15.prev = _context15.next) {
+            case 0:
+              _render2 = render(_react.default.createElement(_.default, {
+                searchByOptions: searchByOptions,
+                searchByLabel: "Search By",
+                searchByName: "search-by",
+                value: "Searched value",
+                onChange: onChangeMock,
+                onSearch: onSearchMock
+              })), getByLabelText = _render2.getByLabelText, getByText = _render2.getByText;
+              expect(getByLabelText('Search By')).toBeInTheDocument();
+
+              _react2.fireEvent.click(getByLabelText('Search By'));
+
+              searchByOptions.forEach(function (_ref17) {
+                var label = _ref17.label;
+                expect(getByText(label)).toBeInTheDocument();
+              });
+
+            case 4:
+            case "end":
+              return _context15.stop();
+          }
+        }
+      }, _callee15);
+    })));
+    it('calls searchBy callback', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee16() {
+      var mockedFn, _render3, getByLabelText, getByText;
+
+      return regeneratorRuntime.wrap(function _callee16$(_context16) {
+        while (1) {
+          switch (_context16.prev = _context16.next) {
+            case 0:
+              mockedFn = jest.fn();
+              _render3 = render(_react.default.createElement(_.default, {
+                searchByOptions: searchByOptions,
+                searchByLabel: "Search By",
+                searchByName: "search-by",
+                onSearchByChange: mockedFn,
+                value: "Searched value",
+                onChange: onChangeMock,
+                onSearch: onSearchMock
+              })), getByLabelText = _render3.getByLabelText, getByText = _render3.getByText;
+              expect(getByLabelText('Search By')).toBeInTheDocument();
+
+              _react2.fireEvent.click(getByLabelText('Search By'));
+
+              searchByOptions.forEach(function (_ref19) {
+                var label = _ref19.label;
+                expect(getByText(label)).toBeInTheDocument();
+              });
+
+              _react2.fireEvent.click(getByText(searchByOptions[0].label));
+
+              expect(mockedFn).toHaveBeenCalledWith(searchByOptions[0].label);
+
+            case 7:
+            case "end":
+              return _context16.stop();
+          }
+        }
+      }, _callee16);
+    })));
+    describe('small', function () {
+      it('does not renders label', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee17() {
+        var _render4, queryByText;
+
+        return regeneratorRuntime.wrap(function _callee17$(_context17) {
+          while (1) {
+            switch (_context17.prev = _context17.next) {
+              case 0:
+                _render4 = render(_react.default.createElement(_.default, {
+                  searchByOptions: searchByOptions,
+                  searchByLabel: "Search By",
+                  searchByName: "search-by",
+                  value: "Searched value",
+                  onChange: onChangeMock,
+                  onSearch: onSearchMock,
+                  size: "small"
+                })), queryByText = _render4.queryByText;
+                expect(queryByText('Search By')).not.toBeVisible();
+
+              case 2:
+              case "end":
+                return _context17.stop();
+            }
+          }
+        }, _callee17);
+      })));
+    });
+    describe('warning message', function () {
+      it('renders warning message', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee18() {
+        var _render5, getByLabelText, getByText;
+
+        return regeneratorRuntime.wrap(function _callee18$(_context18) {
+          while (1) {
+            switch (_context18.prev = _context18.next) {
+              case 0:
+                _render5 = render(_react.default.createElement(_.default, {
+                  searchByOptions: searchByOptions,
+                  searchByLabel: "Search By",
+                  searchByName: "search-by",
+                  value: "Searched value",
+                  onChange: onChangeMock,
+                  onSearch: onSearchMock,
+                  warningMessage: "warning message"
+                })), getByLabelText = _render5.getByLabelText, getByText = _render5.getByText;
+                expect(getByLabelText('Search By')).toBeInTheDocument();
+                expect(getByText('warning message')).toBeInTheDocument();
+
+              case 3:
+              case "end":
+                return _context18.stop();
+            }
+          }
+        }, _callee18);
+      })));
+    });
+    describe('help message', function () {
+      it('renders warning message', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee19() {
+        var _render6, getByLabelText, getByText;
+
+        return regeneratorRuntime.wrap(function _callee19$(_context19) {
+          while (1) {
+            switch (_context19.prev = _context19.next) {
+              case 0:
+                _render6 = render(_react.default.createElement(_.default, {
+                  searchByOptions: searchByOptions,
+                  searchByLabel: "Search By",
+                  searchByName: "search-by",
+                  value: "Searched value",
+                  onChange: onChangeMock,
+                  onSearch: onSearchMock,
+                  warningMessage: "warning message",
+                  helpMessage: "help message",
+                  searchByDefaultValue: "Value 1",
+                  searchByWidth: "100px"
+                })), getByLabelText = _render6.getByLabelText, getByText = _render6.getByText;
+                expect(getByLabelText('Search By')).toBeInTheDocument();
+                expect(getByText('warning message')).toBeInTheDocument();
+                expect(getByText('help message')).toBeInTheDocument();
+
+              case 4:
+              case "end":
+                return _context19.stop();
+            }
+          }
+        }, _callee19);
+      })));
+    });
+  });
 });

package/lib/components/SearchInput/schema.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../src/components/SearchInput/schema.ts"],"names":[],"mappings":"AAGA,QAAA,MAAM,MAAM,KAA2C,CAAC;AAsCxD,eAAe,MAAM,CAAC"}
+{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../src/components/SearchInput/schema.ts"],"names":[],"mappings":"AAGA,QAAA,MAAM,MAAM,KAA2C,CAAC;AAwExD,eAAe,MAAM,CAAC"}

package/lib/components/SearchInput/schema.js

@@ -19,7 +19,18 @@ schema.propTypes = {
   searchDisabled: _reactDesc.PropTypes.bool.description('Boolean indicating whether only the search button is disabled.'),
   value: _reactDesc.PropTypes.string.description('A text value to be displayed on the input field'),
   onSearch: _reactDesc.PropTypes.func.description('A callback that is invoked with the input value when the the search action is performed'),
-  onChange: _reactDesc.PropTypes.func.description('A callback that is invoked when the value of the search field changes')
+  onChange: _reactDesc.PropTypes.func.description('A callback that is invoked when the value of the search field changes'),
+  searchByValue: _reactDesc.PropTypes.string.description('The ID of the option that is selected in the search by field. If provided, controlling the search by field must be handled externally.'),
+  searchByLabel: _reactDesc.PropTypes.string.description('Label for the search by field'),
+  searchByName: _reactDesc.PropTypes.string.description('Name for the search by field'),
+  onSearchByChange: _reactDesc.PropTypes.func.description('A callback that is invoked when the value of the search by field changes'),
+  searchByOptions: _reactDesc.PropTypes.arrayOf(_reactDesc.PropTypes.shape({
+    id: _reactDesc.PropTypes.string.description('The id for an option in the search by list.'),
+    label: _reactDesc.PropTypes.string.description('The label text for an option in the search by list.'),
+    value: _reactDesc.PropTypes.string.description('The value for an option in the search by list.')
+  })).description('The array of data for the options that will be rendered in the search by field'),
+  searchByDefaultValue: _reactDesc.PropTypes.string.description('The ID of the option that should be selected by default in the search by field.'),
+  searchByWidth: _reactDesc.PropTypes.string.description('A pass-through CSS value for the search by field width attribute.')
 };
 var _default = schema;
 exports.default = _default;