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

A horizontal navigation component for Atlassian products.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.Search = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = require("react");
var _react2 = require("@emotion/react");
var _search = _interopRequireDefault(require("@atlaskit/icon/glyph/search"));
var _constants = require("../../common/constants");
var _theme = require("../../theme");
var _IconButton = require("../IconButton");
var _excluded = ["placeholder", "tooltip", "label", "value"];
var searchInputContainerStyles = (0, _react2.css)((0, _defineProperty2.default)({
  marginRight: _constants.gridSize,
  marginLeft: 20,
  position: 'relative'
}, "@media (max-width: ".concat(_constants.CREATE_BREAKPOINT - 1, "px)"), {
  display: 'none !important'
}));
var searchInputIconStyles = (0, _react2.css)({
  width: '20px',
  height: '20px',
  position: 'absolute',
  top: '5px',
  left: '10px',
  pointerEvents: 'none'
});
var searchInputStyles = (0, _react2.css)({
  boxSizing: 'border-box',
  width: '220px',
  height: "".concat(_constants.gridSize * 4, "px"),
  padding: "0 ".concat(_constants.gridSize, "px 0 40px"),
  backgroundColor: "var(".concat(_constants.varSearchBackgroundColor, ")"),
  border: '2px solid',
  borderColor: "var(".concat(_constants.varSearchBorderColor, ")"),
  borderRadius: 6,
  color: "var(".concat(_constants.varSearchColor, ")"),
  fontSize: "".concat(_constants.fontSize, "px"),
  outline: 'none',
  '::placeholder': {
    color: 'inherit'
  },
  '&:focus': {
    borderColor: "var(".concat(_constants.varSearchFocusBorderColor, ")")
  },
  '&:hover': {
    backgroundColor: "var(".concat(_constants.varSearchHoverBackgroundColor, ")")
  }
});
var searchIconStyles = (0, _react2.css)((0, _defineProperty2.default)({}, "@media (min-width: ".concat(_constants.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 = (0, _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 = {}, (0, _defineProperty2.default)(_searchInputDynamicSt, _constants.varSearchBackgroundColor, search.default.backgroundColor), (0, _defineProperty2.default)(_searchInputDynamicSt, _constants.varSearchColor, search.default.color), (0, _defineProperty2.default)(_searchInputDynamicSt, _constants.varSearchBorderColor, search.default.borderColor), (0, _defineProperty2.default)(_searchInputDynamicSt, _constants.varSearchFocusBorderColor, search.focus.borderColor), (0, _defineProperty2.default)(_searchInputDynamicSt, _constants.varSearchHoverBackgroundColor, search.hover.backgroundColor), _searchInputDynamicSt);
  return (0, _react2.jsx)("div", {
    css: searchInputContainerStyles,
    role: "search"
  }, (0, _react2.jsx)("div", {
    css: searchInputIconStyles
  }, (0, _react2.jsx)(_search.default, {
    label: ""
  })), (0, _react2.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)
 */
var Search = function Search(props) {
  var placeholder = props.placeholder,
    tooltip = props.tooltip,
    label = props.label,
    value = props.value,
    iconButtonProps = (0, _objectWithoutProperties2.default)(props, _excluded);
  return (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)(SearchComponent, {
    onClick: iconButtonProps.onClick,
    placeholder: placeholder,
    label: label,
    value: value || ''
  }), (0, _react2.jsx)(_IconButton.IconButton
  // @ts-ignore Overriding styles is not supported.
  , (0, _extends2.default)({
    css: searchIconStyles,
    icon: (0, _react2.jsx)(_search.default, {
      label: label
    }),
    tooltip: tooltip
    // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
  }, iconButtonProps)));
};
exports.Search = Search;
var _default = Search;
exports.default = _default;