@atlaskit/menu
Version:
A list of options to help users navigate, or perform actions.
107 lines (106 loc) • 5.45 kB
JavaScript
/* menu-item-primitive.tsx generated by @compiled/babel-plugin v0.36.1 */
import "./menu-item-primitive.compiled.css";
import * as React from 'react';
import { useContext } from 'react';
import { ax, ix } from '@compiled/react/runtime';
import { fg } from '@atlaskit/platform-feature-flags';
import { Inline } from '@atlaskit/primitives/compiled';
import { SELECTION_STYLE_CONTEXT_DO_NOT_USE, SpacingContext } from './menu-context';
var renderTitle = function renderTitle(Component, props) {
return (
/*#__PURE__*/
// eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
React.createElement(Component, props)
);
};
var styles = {
root: "_19itidpf _12ji1r31 _1qu2glyw _12y3idpf _4bfu1r31 _1hmsglyw _ajmmnqa1 _kqswh2mm _1e0c1txw _vchhusvi _1bsb1osq _1tke1ylp _19pkze3t _2hwxze3t _otyrze3t _18u0ze3t _4cvr1h6o _uiztglyw _80omtlke _ymio1r31 _ypr0glyw _zcxs1o36 _nt75194a _mizu194a _1bg411pw _1ah311pw _49pcnqa1 _ra3xnqa1 _1hvw1bk5 _128m1bk5 _9oik1r31 _1bnxglyw _jf4cnqa1 _1cvmnqa1 _4davt94y",
beforeAfterElement: "_1e0c1txw _1ul91tcg _1tke1tcg _4cvr1h6o _1bah1h6o _1o9zidpf",
content: "_12ji1r31 _1qu2glyw _12y31o36 _1reo15vq _18m915vq _1e0c1txw _2lx21bp4 _1bah1h6o _16jlkb7n _y3gn1e5h",
truncate: "_1reo15vq _18m915vq _1e0c1ule _1bto1l2s _o5721q9c",
title: "_11c82smr",
wordBreak: "_1nmz1hna",
description: "_11c8dcr7 _syaz1wmz",
disabledDescription: "_syaz2oi6",
unselected: "_bfhkqtfy _syaz1r31 _10531r31 _irr31dko _30l31r31 _1di61dko _9h8h1r31",
disabled: "_80om13gf _bfhkqtfy _syaz2oi6 _irr3qtfy _30l32oi6 _1di6qtfy _9h8h2oi6",
selectedBorder: "_1mp4yh40 _1cs8stnw _1rus67is _1kt9b3bt _1fkrze3t _iajmze3t _z5wtze3t",
selectedNotch: "_rfx315o9 _1mp41y44 _1cs8stnw _1rus67is _1kt9b3bt _1fkrutpp _iajmutpp _z5wtze3t",
selected: "_bfhk1q4k _syazhu5v _1053hu5v _irr32seo _30l316ov _1di6guph _9h8hhu5v",
selectedOld: "_30l3hu5v"
};
var spacingMapStyles = {
cozy: "_1rjcu2gc _18zrpxbi",
compact: "_1rjc1b66 _18zrutpp _1tkezwfg"
};
var gapMap = {
compact: 'space.100',
cozy: 'space.150'
};
/**
* __Menu item primitive__
*
* Menu item primitive contains all the styles for menu items,
* including support for selected, disabled, and interaction states.
*
* Using children as function prop you wire up this to your own host element.
*
* ```jsx
* <MenuItemPrimitive>
* {({ children, ...props }) => <button {...props}>{children}</button>}
* </MenuItemPrimitive>
* ```
*/
var MenuItemPrimitive = function MenuItemPrimitive(_ref) {
var children = _ref.children,
title = _ref.title,
description = _ref.description,
iconAfter = _ref.iconAfter,
iconBefore = _ref.iconBefore,
UNSAFE_externalClassName = _ref.className,
_ref$shouldTitleWrap = _ref.shouldTitleWrap,
shouldTitleWrap = _ref$shouldTitleWrap === void 0 ? false : _ref$shouldTitleWrap,
_ref$shouldDescriptio = _ref.shouldDescriptionWrap,
shouldDescriptionWrap = _ref$shouldDescriptio === void 0 ? false : _ref$shouldDescriptio,
_ref$isDisabled = _ref.isDisabled,
isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
_ref$isSelected = _ref.isSelected,
isSelected = _ref$isSelected === void 0 ? false : _ref$isSelected,
_ref$isTitleHeading = _ref.isTitleHeading,
isTitleHeading = _ref$isTitleHeading === void 0 ? false : _ref$isTitleHeading,
testId = _ref.testId;
var spacing = useContext(SpacingContext);
var selectionStyle = useContext(SELECTION_STYLE_CONTEXT_DO_NOT_USE);
var UNSAFE_className = UNSAFE_externalClassName;
return function () {
return children({
className: ax([ax([styles.root, spacingMapStyles[spacing], !isDisabled && !isSelected && styles.unselected, !isDisabled && isSelected && styles.selected, !fg('platform_fix_a11y_selected_and_hovered_state_color') && !isDisabled && isSelected && styles.selectedOld, !isDisabled && isSelected && selectionStyle === 'border' && styles.selectedBorder, !isDisabled && isSelected && selectionStyle === 'notch' && styles.selectedNotch, isDisabled && styles.disabled]), UNSAFE_className]),
children: /*#__PURE__*/React.createElement(Inline, {
as: "span",
spread: "space-between",
alignBlock: "center",
space: gapMap[spacing],
grow: "fill",
testId: testId && "".concat(testId, "--container")
}, iconBefore && /*#__PURE__*/React.createElement("span", {
"data-item-elem-before": true,
"data-testid": testId && "".concat(testId, "--icon-before"),
className: ax([styles.beforeAfterElement])
}, iconBefore), title && /*#__PURE__*/React.createElement("div", {
className: ax([styles.content])
}, renderTitle(isTitleHeading ? 'h2' : 'span', {
children: title,
className: ax([styles.title, shouldTitleWrap ? styles.wordBreak : styles.truncate]),
'data-item-title': true
}), description && /*#__PURE__*/React.createElement("span", {
"data-item-description": true,
className: ax([styles.description, isDisabled && styles.disabledDescription, shouldDescriptionWrap && styles.wordBreak, !shouldDescriptionWrap && styles.truncate])
}, description)), iconAfter && /*#__PURE__*/React.createElement("span", {
"data-item-elem-after": true,
"data-testid": testId && "".concat(testId, "--icon-after"),
className: ax([styles.beforeAfterElement])
}, iconAfter))
});
}();
};
export default MenuItemPrimitive;