@atlaskit/atlassian-navigation
Version:
A horizontal navigation component for Atlassian apps.
180 lines (178 loc) • 8.73 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
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 = _interopRequireWildcard(require("react"));
var _react2 = require("@emotion/react");
var _search = _interopRequireDefault(require("@atlaskit/icon/core/search"));
var _constants = require("../../common/constants");
var _theme = require("../../theme");
var _utils = require("../../utils");
var _IconButton = require("../IconButton");
var _excluded = ["component", "href", "id", "isDisabled", "isSelected", "label", "onBlur", "onClick", "onFocus", "onMouseDown", "onMouseEnter", "onMouseLeave", "onMouseUp", "placeholder", "target", "testId", "tooltip", "value"];
/**
* @jsxRuntime classic
* @jsx jsx
*/
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
var searchInputContainerStyles = (0, _react2.css)((0, _defineProperty2.default)({
position: 'relative',
marginInlineEnd: "var(--ds-space-100, 8px)",
marginInlineStart: "var(--ds-space-250, 20px)"
}, "@media (max-width: ".concat(_constants.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 = (0, _react2.css)({
width: '20px',
height: '20px',
position: 'absolute',
insetBlockStart: '5px',
insetInlineStart: '10px',
pointerEvents: 'none'
});
var newSearchBorderStyles = (0, _react2.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(", _constants.varSearchFocusBorderColor, ")")
}
});
var searchInputStyles = (0, _react2.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(_constants.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(_constants.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(_constants.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(_constants.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(_constants.varSearchHoverBackgroundColor, ")")
}
});
var searchIconStyles = (0, _react2.css)((0, _defineProperty2.default)({}, "@media (min-width: ".concat(_constants.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 = (0, _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 = (0, _utils.stripEmptyProperties)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, _constants.varSearchBackgroundColor, search.default.backgroundColor), _constants.varSearchColor, search.default.color), _constants.varSearchBorderColor, search.default.borderColor), _constants.varSearchFocusBorderColor, search.focus.borderColor), _constants.varSearchHoverBackgroundColor, search.hover.backgroundColor));
return (0, _react2.jsx)("div", {
css: searchInputContainerStyles,
role: "search"
}, (0, _react2.jsx)("div", {
css: searchInputIconStyles
}, (0, _react2.jsx)(_search.default, {
color: "currentColor",
spacing: "spacious",
label: ""
})), (0, _react2.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.
*/
var Search = exports.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 = (0, _objectWithoutProperties2.default)(props, _excluded);
return (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)(SearchComponent, {
onClick: onClick,
placeholder: placeholder,
label: label,
value: value || ''
}), (0, _react2.jsx)(_IconButton.IconButton, (0, _extends2.default)({
component: component
// @ts-ignore Overriding styles is not supported.
,
css: searchIconStyles,
href: href,
icon: (0, _react2.jsx)(_search.default, {
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)));
};