@atlaskit/atlassian-navigation
Version:
A horizontal navigation component for Atlassian apps.
172 lines (170 loc) • 7.37 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
var _excluded = ["component", "href", "id", "isDisabled", "isSelected", "label", "onBlur", "onClick", "onFocus", "onMouseDown", "onMouseEnter", "onMouseLeave", "onMouseUp", "placeholder", "target", "testId", "tooltip", "value"];
/**
* @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';
var searchInputContainerStyles = css(_defineProperty({
position: 'relative',
marginInlineEnd: "var(--ds-space-100, 8px)",
marginInlineStart: "var(--ds-space-250, 20px)"
}, "@media (max-width: ".concat(CREATE_BREAKPOINT - 1, "px)"), {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
display: 'none !important'
}));
var searchInputIconStyles = css({
width: '20px',
height: '20px',
position: 'absolute',
insetBlockStart: '5px',
insetInlineStart: '10px',
pointerEvents: 'none'
});
var newSearchBorderStyles = css({
border: "var(--ds-border-width, 1px)".concat(" 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 ".concat("var(--ds-border-width, 1px)", " var(", varSearchFocusBorderColor, ")")
}
});
var searchInputStyles = css({
boxSizing: 'border-box',
width: '220px',
height: "var(--ds-space-400, 32px)",
padding: "0 ".concat("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(".concat(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(".concat(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(".concat(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(".concat(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(".concat(varSearchHoverBackgroundColor, ")")
}
});
var searchIconStyles = css(_defineProperty({}, "@media (min-width: ".concat(CREATE_BREAKPOINT, "px)"), {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
display: 'none !important'
}));
var SearchComponent = function SearchComponent(props) {
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-expect-error
onClick && onClick.apply(void 0, arguments);
};
var onInputClick = function onInputClick() {
// @ts-expect-error
onClick && onClick.apply(void 0, arguments);
};
var searchInputDynamicStyles = stripEmptyProperties(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, 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 var Search = function Search(props) {
var component = props.component,
href = props.href,
id = props.id,
isDisabled = props.isDisabled,
isSelected = props.isSelected,
label = props.label,
onBlur = props.onBlur,
onClick = props.onClick,
onFocus = props.onFocus,
onMouseDown = props.onMouseDown,
onMouseEnter = props.onMouseEnter,
onMouseLeave = props.onMouseLeave,
onMouseUp = props.onMouseUp,
placeholder = props.placeholder,
target = props.target,
testId = props.testId,
tooltip = props.tooltip,
value = props.value,
rest = _objectWithoutProperties(props, _excluded);
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)));
};