@atlaskit/navigation-system
Version:
The latest navigation system for Atlassian apps.
159 lines (157 loc) • 7.27 kB
JavaScript
/* search.tsx generated by @compiled/babel-plugin v3.0.2 */
import "./search.compiled.css";
import { ax, ix } from "@compiled/react/runtime";
import React, { Fragment } from 'react';
// Container widths and custom-theme colors need the unbounded Compiled style types.
import { cx } from '@compiled/react';
import SearchIcon from '@atlaskit/icon/core/search';
import { fg } from '@atlaskit/platform-feature-flags/fg';
import { Pressable } from '@atlaskit/primitives/compiled/pressable';
import { Show } from '@atlaskit/primitives/compiled/show';
import { Text } from '@atlaskit/primitives/compiled/text';
import Tooltip from '@atlaskit/tooltip/Tooltip';
import VisuallyHidden from '@atlaskit/visually-hidden/visually-hidden';
import { useHasCustomTheme } from './themed/has-custom-theme-context';
import { IconButton } from './themed/icon-button';
const 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"
};
const 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({
label,
onClick,
iconBefore: IconBefore = SearchIcon,
elemAfter,
interactionName,
'aria-haspopup': ariaHaspopup
}) {
const hasCustomTheme = useHasCustomTheme();
const renderButton = triggerProps => /*#__PURE__*/React.createElement(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: event => {
var _triggerProps$onClick;
onClick === null || onClick === void 0 ? void 0 : onClick(event);
triggerProps === null || triggerProps === void 0 ? void 0 : (_triggerProps$onClick = triggerProps.onClick) === null || _triggerProps$onClick === void 0 ? 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: cx(containerStyles.containerButton),
interactionName: interactionName,
"aria-haspopup": ariaHaspopup
}, /*#__PURE__*/React.createElement("span", {
className: ax([styles.root, containerStyles.container, styles.containerBorder, fg('platform-dst-tokens-finesse') && styles.containerBorderFinesse])
}, /*#__PURE__*/React.createElement("span", {
className: ax([styles.iconBefore])
}, /*#__PURE__*/React.createElement(IconBefore, {
color: "var(--ds-icon-subtle, #505258)",
spacing: "spacious",
label: ""
})), /*#__PURE__*/React.createElement("span", {
className: ax([styles.buttonText, styles.containerText])
}, /*#__PURE__*/React.createElement(Text, {
color: "color.text.subtlest"
}, label)), elemAfter && /*#__PURE__*/React.createElement("span", {
className: ax([styles.elemAfter])
}, elemAfter)), /*#__PURE__*/React.createElement("span", {
className: ax([containerStyles.containerIcon, hasCustomTheme && containerStyles.customThemeIcon])
}, /*#__PURE__*/React.createElement(SearchIcon, {
color: "currentColor",
label: ""
}), /*#__PURE__*/React.createElement(VisuallyHidden, 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.createElement(Tooltip, {
content: label
}, renderButton) : renderButton();
}
const ViewportSearch = ({
label,
onClick,
iconBefore: IconBefore = SearchIcon,
elemAfter,
interactionName,
'aria-haspopup': ariaHaspopup
}) => {
const iconButton = /*#__PURE__*/React.createElement(IconButton, {
label: label,
appearance: "subtle",
icon: SearchIcon,
onClick: onClick,
interactionName: interactionName,
"aria-haspopup": ariaHaspopup
});
return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(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)"} solid ${fg('platform-dst-tokens-finesse') ? "var(--ds-border-input-search, #0B120E24)" : "var(--ds-border-input, #8C8F97)"}`
},
onClick: onClick,
xcss: cx(styles.root, styles.viewport),
interactionName: interactionName,
"aria-haspopup": ariaHaspopup
}, /*#__PURE__*/React.createElement("span", {
className: ax([styles.iconBefore])
}, /*#__PURE__*/React.createElement(IconBefore, {
color: "var(--ds-icon-subtle, #505258)",
spacing: "spacious",
label: ""
})), /*#__PURE__*/React.createElement("div", {
className: ax([styles.buttonText])
}, /*#__PURE__*/React.createElement(Text, {
color: "color.text.subtlest"
}, label)), elemAfter && /*#__PURE__*/React.createElement("span", {
className: ax([styles.elemAfter])
}, elemAfter)), /*#__PURE__*/React.createElement(Show, {
below: "xs"
}, iconButton));
};
/**
* __Search__
*
* The search element for the top navigation.
*/
export const Search = ({
label,
onClick,
iconBefore,
elemAfter,
interactionName,
'aria-haspopup': ariaHaspopup
}) => {
const Component = fg('platform-dst-chat-panel-layout') ? ContainerSearch : ViewportSearch;
return /*#__PURE__*/React.createElement(Component, {
label: label,
onClick: onClick,
iconBefore: iconBefore,
elemAfter: elemAfter,
interactionName: interactionName,
"aria-haspopup": ariaHaspopup
});
};