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

A horizontal navigation component for Atlassian apps.

import _extends from "@babel/runtime/helpers/extends";
/**
 * @jsxRuntime classic
 * @jsx jsx
 */
import React, { Fragment } from 'react';

// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
import { css, jsx } from '@emotion/react';
import SearchIcon from '@atlaskit/icon/core/search';
import { CREATE_BREAKPOINT, varSearchBackgroundColor, varSearchBorderColor, varSearchColor, varSearchFocusBorderColor, varSearchHoverBackgroundColor } from '../../common/constants';
import { useTheme } from '../../theme';
import { stripEmptyProperties } from '../../utils';
import { IconButton } from '../IconButton';
const searchInputContainerStyles = css({
  position: 'relative',
  marginInlineEnd: "var(--ds-space-100, 8px)",
  marginInlineStart: "var(--ds-space-250, 20px)",
  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
  [`@media (max-width: ${CREATE_BREAKPOINT - 1}px)`]: {
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
    display: 'none !important'
  }
});
const searchInputIconStyles = css({
  width: '20px',
  height: '20px',
  position: 'absolute',
  insetBlockStart: '5px',
  insetInlineStart: '10px',
  pointerEvents: 'none'
});
const newSearchBorderStyles = css({
  border: `${"var(--ds-border-width, 1px)"} solid`,
  '&:focus': {
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
    boxShadow: `inset 0 0 0 ${"var(--ds-border-width, 1px)"} var(${varSearchFocusBorderColor})`
  }
});
const searchInputStyles = css({
  boxSizing: 'border-box',
  width: '220px',
  height: "var(--ds-space-400, 32px)",
  padding: `0 ${"var(--ds-space-100, 8px)"} 0 ${"var(--ds-space-500, 40px)"}`,
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
  backgroundColor: `var(${varSearchBackgroundColor})`,
  border: '2px solid',
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
  borderColor: `var(${varSearchBorderColor})`,
  borderRadius: "var(--ds-radius-large, 6px)",
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
  color: `var(${varSearchColor})`,
  font: "var(--ds-font-body, normal 400 14px/20px \"Atlassian Sans\", ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
  outline: 'none',
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
  '::placeholder': {
    color: 'inherit'
  },
  '&:focus': {
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
    borderColor: `var(${varSearchFocusBorderColor})`
  },
  '&:hover': {
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
    backgroundColor: `var(${varSearchHoverBackgroundColor})`
  }
});
const searchIconStyles = css({
  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
  [`@media (min-width: ${CREATE_BREAKPOINT}px)`]: {
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
    display: 'none !important'
  }
});
const SearchComponent = props => {
  const {
    onClick,
    placeholder,
    label,
    value
  } = props;
  const theme = useTheme();
  const search = theme.mode.search;
  const onChange = (...args) => {
    // @ts-expect-error
    onClick && onClick(...args);
  };
  const onInputClick = (...args) => {
    // @ts-expect-error
    onClick && onClick(...args);
  };
  const searchInputDynamicStyles = stripEmptyProperties({
    [varSearchBackgroundColor]: search.default.backgroundColor,
    [varSearchColor]: search.default.color,
    [varSearchBorderColor]: search.default.borderColor,
    [varSearchFocusBorderColor]: search.focus.borderColor,
    [varSearchHoverBackgroundColor]: search.hover.backgroundColor
  });
  return jsx("div", {
    css: searchInputContainerStyles,
    role: "search"
  }, jsx("div", {
    css: searchInputIconStyles
  }, jsx(SearchIcon, {
    color: "currentColor",
    spacing: "spacious",
    label: ""
  })), jsx("input", {
    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
    style: searchInputDynamicStyles,
    css: [searchInputStyles, newSearchBorderStyles],
    "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)
 *
 * @deprecated `@atlaskit/atlassian-navigation` is deprecated. Use `@atlaskit/navigation-system` instead.
 */
export const Search = props => {
  const {
    component,
    href,
    id,
    isDisabled,
    isSelected,
    label,
    onBlur,
    onClick,
    onFocus,
    onMouseDown,
    onMouseEnter,
    onMouseLeave,
    onMouseUp,
    placeholder,
    target,
    testId,
    tooltip,
    value,
    ...rest
  } = props;
  return jsx(Fragment, null, jsx(SearchComponent, {
    onClick: onClick,
    placeholder: placeholder,
    label: label,
    value: value || ''
  }), jsx(IconButton, _extends({
    component: component
    // @ts-ignore Overriding styles is not supported.
    ,
    css: searchIconStyles,
    href: href,
    icon: jsx(SearchIcon, {
      color: "currentColor",
      spacing: "spacious",
      label: label
    }),
    id: id,
    isDisabled: isDisabled,
    isSelected: isSelected,
    onBlur: onBlur,
    onClick: onClick,
    onFocus: onFocus,
    onMouseDown: onMouseDown,
    onMouseEnter: onMouseEnter,
    onMouseLeave: onMouseLeave,
    onMouseUp: onMouseUp,
    target: target,
    testId: testId,
    tooltip: tooltip
    // Made all explicit, this is left just in case
    // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
  }, rest)));
};