@atlaskit/atlassian-navigation/dist/esm/components/Search/index.js

A horizontal navigation component for Atlassian products.

import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
var _excluded = ["placeholder", "tooltip", "label", "value"];
/** @jsx jsx */
import { Fragment } from 'react';
import { css, jsx } from '@emotion/react';
import SearchIcon from '@atlaskit/icon/glyph/search';
import { CREATE_BREAKPOINT, fontSize, gridSize, varSearchBackgroundColor, varSearchBorderColor, varSearchColor, varSearchFocusBorderColor, varSearchHoverBackgroundColor } from '../../common/constants';
import { useTheme } from '../../theme';
import { IconButton } from '../IconButton';
var searchInputContainerStyles = css(_defineProperty({
  marginRight: gridSize,
  marginLeft: 20,
  position: 'relative'
}, "@media (max-width: ".concat(CREATE_BREAKPOINT - 1, "px)"), {
  display: 'none !important'
}));
var searchInputIconStyles = css({
  width: '20px',
  height: '20px',
  position: 'absolute',
  top: '5px',
  left: '10px',
  pointerEvents: 'none'
});
var searchInputStyles = css({
  boxSizing: 'border-box',
  width: '220px',
  height: "".concat(gridSize * 4, "px"),
  padding: "0 ".concat(gridSize, "px 0 40px"),
  backgroundColor: "var(".concat(varSearchBackgroundColor, ")"),
  border: '2px solid',
  borderColor: "var(".concat(varSearchBorderColor, ")"),
  borderRadius: 6,
  color: "var(".concat(varSearchColor, ")"),
  fontSize: "".concat(fontSize, "px"),
  outline: 'none',
  '::placeholder': {
    color: 'inherit'
  },
  '&:focus': {
    borderColor: "var(".concat(varSearchFocusBorderColor, ")")
  },
  '&:hover': {
    backgroundColor: "var(".concat(varSearchHoverBackgroundColor, ")")
  }
});
var searchIconStyles = css(_defineProperty({}, "@media (min-width: ".concat(CREATE_BREAKPOINT, "px)"), {
  display: 'none !important'
}));
var SearchComponent = function SearchComponent(props) {
  var _searchInputDynamicSt;
  var onClick = props.onClick,
    placeholder = props.placeholder,
    label = props.label,
    value = props.value;
  var theme = useTheme();
  var search = theme.mode.search;
  var onChange = function onChange() {
    // @ts-ignore
    onClick && onClick.apply(void 0, arguments);
  };
  var onInputClick = function onInputClick() {
    // @ts-ignore
    onClick && onClick.apply(void 0, arguments);
  };
  var searchInputDynamicStyles = (_searchInputDynamicSt = {}, _defineProperty(_searchInputDynamicSt, varSearchBackgroundColor, search.default.backgroundColor), _defineProperty(_searchInputDynamicSt, varSearchColor, search.default.color), _defineProperty(_searchInputDynamicSt, varSearchBorderColor, search.default.borderColor), _defineProperty(_searchInputDynamicSt, varSearchFocusBorderColor, search.focus.borderColor), _defineProperty(_searchInputDynamicSt, varSearchHoverBackgroundColor, search.hover.backgroundColor), _searchInputDynamicSt);
  return jsx("div", {
    css: searchInputContainerStyles,
    role: "search"
  }, jsx("div", {
    css: searchInputIconStyles
  }, jsx(SearchIcon, {
    label: ""
  })), jsx("input", {
    style: searchInputDynamicStyles,
    css: searchInputStyles,
    "aria-label": label,
    placeholder: placeholder,
    onChange: onChange,
    onClick: onInputClick,
    value: value
  }));
};

/**
 * __Search__
 *
 * A search input that can be passed into `AtlassianNavigation`'s `renderSearch` prop.
 *
 * - [Examples](https://atlassian.design/components/atlassian-navigation/examples#search)
 * - [Code](https://atlassian.design/components/atlassian-navigation/code)
 */
export var Search = function Search(props) {
  var placeholder = props.placeholder,
    tooltip = props.tooltip,
    label = props.label,
    value = props.value,
    iconButtonProps = _objectWithoutProperties(props, _excluded);
  return jsx(Fragment, null, jsx(SearchComponent, {
    onClick: iconButtonProps.onClick,
    placeholder: placeholder,
    label: label,
    value: value || ''
  }), jsx(IconButton
  // @ts-ignore Overriding styles is not supported.
  , _extends({
    css: searchIconStyles,
    icon: jsx(SearchIcon, {
      label: label
    }),
    tooltip: tooltip
    // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
  }, iconButtonProps)));
};
export default Search;