@atlaskit/navigation-system
Version:
The latest navigation system for Atlassian apps.
168 lines (166 loc) • 9.35 kB
JavaScript
/* search.tsx generated by @compiled/babel-plugin v3.0.2 */
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Search = void 0;
require("./search.compiled.css");
var _runtime = require("@compiled/react/runtime");
var _react = _interopRequireWildcard(require("react"));
var _react2 = require("@compiled/react");
var _search = _interopRequireDefault(require("@atlaskit/icon/core/search"));
var _fg = require("@atlaskit/platform-feature-flags/fg");
var _pressable = require("@atlaskit/primitives/compiled/pressable");
var _show = require("@atlaskit/primitives/compiled/show");
var _text = require("@atlaskit/primitives/compiled/text");
var _Tooltip = _interopRequireDefault(require("@atlaskit/tooltip/Tooltip"));
var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden/visually-hidden"));
var _hasCustomThemeContext = require("./themed/has-custom-theme-context");
var _iconButton = require("./themed/icon-button");
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); }
// Container widths and custom-theme colors need the unbounded Compiled style types.
var styles = {
root: "_2rko1qi0 _v564k6bl _1rjcze3t _18zr12x7 _yv0e1mfv _4cvr1h6o _bfhk1j9a _vchhusvi _80om1kdv _4t3izwfg _p12f1kvu _1bsb1osq _irr3l4ek _1ggl5xtf _1di6r01l",
viewport: "_1e0cglyw _114b11p5",
containerBorder: "_189ee4h9 _1dqonqa1 _1h6drsbi",
containerBorderFinesse: "_1h6d12f6",
containerText: "_1reo15vq _18m915vq _yyhycs5v _1ul9idpf _1bto1l2s _o5721q9c",
buttonText: "_yyhyjvu9 _1ii7kb7n",
iconBefore: "_yyhykb7n _1ii7kb7n _1e0c1txw",
elemAfter: "_yyhy11wp _1ii7kb7n _1e0c1txw"
};
var containerStyles = {
container: "_bfhk11rw _1e0c9sqe _yv0e14iv _1ul9idpf _irr311rw _1di611rw _114b1mwp",
containerButton: "_2rko1qi0 _1rjcze3t _18zrze3t _1e0c1txw _bfhk1j28 _4t3izwfg _p12f1kvu _1ul9idpf _1bsb5ymi _syaz1kw7 _b4h01j9a _j1r711j1 _3vbcl4ek _ml493uto _1glhr01l _9gm9sn0f _g711exps",
containerIcon: "_2rko1qi0 _v564k6bl _1e0cfswt _4cvr1h6o _1bah1h6o _1bsbzwfg _4t3izwfg _syaz1q3r _bfhksikg _irr3sikg _1ggl5xtf _1di6sikg _114b17i4",
customThemeIcon: "_syaz1kw7"
};
/**
* Keep a single focus target through CSS presentation changes, including before hydration.
* Only the visual contents switch; no measurement or focus handoff is needed.
*/
function ContainerSearch(_ref) {
var label = _ref.label,
_onClick = _ref.onClick,
_ref$iconBefore = _ref.iconBefore,
IconBefore = _ref$iconBefore === void 0 ? _search.default : _ref$iconBefore,
elemAfter = _ref.elemAfter,
interactionName = _ref.interactionName,
ariaHaspopup = _ref['aria-haspopup'];
var hasCustomTheme = (0, _hasCustomThemeContext.useHasCustomTheme)();
var renderButton = function renderButton(triggerProps) {
return /*#__PURE__*/_react.default.createElement(_pressable.Pressable, {
ref: triggerProps === null || triggerProps === void 0 ? void 0 : triggerProps.ref,
onFocus: triggerProps === null || triggerProps === void 0 ? void 0 : triggerProps.onFocus,
onBlur: triggerProps === null || triggerProps === void 0 ? void 0 : triggerProps.onBlur,
onMouseOver: triggerProps === null || triggerProps === void 0 ? void 0 : triggerProps.onMouseOver,
onMouseOut: triggerProps === null || triggerProps === void 0 ? void 0 : triggerProps.onMouseOut,
onMouseMove: triggerProps === null || triggerProps === void 0 ? void 0 : triggerProps.onMouseMove,
onMouseDown: triggerProps === null || triggerProps === void 0 ? void 0 : triggerProps.onMouseDown,
onClick: function onClick(event) {
var _triggerProps$onClick;
_onClick === null || _onClick === void 0 || _onClick(event);
triggerProps === null || triggerProps === void 0 || (_triggerProps$onClick = triggerProps.onClick) === null || _triggerProps$onClick === void 0 || _triggerProps$onClick.call(triggerProps, event);
}
// @ts-expect-error -- The responsive width uses an inherited CSS variable outside bounded xcss values.
// Styles are co-located above; only the Pressable xcss type is imported.
// eslint-disable-next-line @compiled/no-suppress-xcss
,
xcss: (0, _react2.cx)(containerStyles.containerButton),
interactionName: interactionName,
"aria-haspopup": ariaHaspopup
}, /*#__PURE__*/_react.default.createElement("span", {
className: (0, _runtime.ax)([styles.root, containerStyles.container, styles.containerBorder, (0, _fg.fg)('platform-dst-tokens-finesse') && styles.containerBorderFinesse])
}, /*#__PURE__*/_react.default.createElement("span", {
className: (0, _runtime.ax)([styles.iconBefore])
}, /*#__PURE__*/_react.default.createElement(IconBefore, {
color: "var(--ds-icon-subtle, #505258)",
spacing: "spacious",
label: ""
})), /*#__PURE__*/_react.default.createElement("span", {
className: (0, _runtime.ax)([styles.buttonText, styles.containerText])
}, /*#__PURE__*/_react.default.createElement(_text.Text, {
color: "color.text.subtlest"
}, label)), elemAfter && /*#__PURE__*/_react.default.createElement("span", {
className: (0, _runtime.ax)([styles.elemAfter])
}, elemAfter)), /*#__PURE__*/_react.default.createElement("span", {
className: (0, _runtime.ax)([containerStyles.containerIcon, hasCustomTheme && containerStyles.customThemeIcon])
}, /*#__PURE__*/_react.default.createElement(_search.default, {
color: "currentColor",
label: ""
}), /*#__PURE__*/_react.default.createElement(_visuallyHidden.default, null, label)));
};
// Preserve the custom-theme label tooltip on the stable trigger.
// As with IconButton, omit aria-describedby to avoid announcing the label twice.
return hasCustomTheme ? /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
content: label
}, renderButton) : renderButton();
}
var ViewportSearch = function ViewportSearch(_ref2) {
var label = _ref2.label,
onClick = _ref2.onClick,
_ref2$iconBefore = _ref2.iconBefore,
IconBefore = _ref2$iconBefore === void 0 ? _search.default : _ref2$iconBefore,
elemAfter = _ref2.elemAfter,
interactionName = _ref2.interactionName,
ariaHaspopup = _ref2['aria-haspopup'];
var iconButton = /*#__PURE__*/_react.default.createElement(_iconButton.IconButton, {
label: label,
appearance: "subtle",
icon: _search.default,
onClick: onClick,
interactionName: interactionName,
"aria-haspopup": ariaHaspopup
});
return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_pressable.Pressable, {
style: {
// To win the specificity war against Emotion we move this into inline styles
// When Emotion has been stripped from the Design System move this to Compiled.
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
cursor: 'text',
border: "var(--ds-border-width, 1px)".concat(" solid ", (0, _fg.fg)('platform-dst-tokens-finesse') ? "var(--ds-border-input-search, #0B120E24)" : "var(--ds-border-input, #8C8F97)")
},
onClick: onClick,
xcss: (0, _react2.cx)(styles.root, styles.viewport),
interactionName: interactionName,
"aria-haspopup": ariaHaspopup
}, /*#__PURE__*/_react.default.createElement("span", {
className: (0, _runtime.ax)([styles.iconBefore])
}, /*#__PURE__*/_react.default.createElement(IconBefore, {
color: "var(--ds-icon-subtle, #505258)",
spacing: "spacious",
label: ""
})), /*#__PURE__*/_react.default.createElement("div", {
className: (0, _runtime.ax)([styles.buttonText])
}, /*#__PURE__*/_react.default.createElement(_text.Text, {
color: "color.text.subtlest"
}, label)), elemAfter && /*#__PURE__*/_react.default.createElement("span", {
className: (0, _runtime.ax)([styles.elemAfter])
}, elemAfter)), /*#__PURE__*/_react.default.createElement(_show.Show, {
below: "xs"
}, iconButton));
};
/**
* __Search__
*
* The search element for the top navigation.
*/
var Search = exports.Search = function Search(_ref3) {
var label = _ref3.label,
onClick = _ref3.onClick,
iconBefore = _ref3.iconBefore,
elemAfter = _ref3.elemAfter,
interactionName = _ref3.interactionName,
ariaHaspopup = _ref3['aria-haspopup'];
var Component = (0, _fg.fg)('platform-dst-chat-panel-layout') ? ContainerSearch : ViewportSearch;
return /*#__PURE__*/_react.default.createElement(Component, {
label: label,
onClick: onClick,
iconBefore: iconBefore,
elemAfter: elemAfter,
interactionName: interactionName,
"aria-haspopup": ariaHaspopup
});
};