@atlaskit/menu
Version:
A list of options to help users navigate, or perform actions.
114 lines (112 loc) • 6.29 kB
JavaScript
/* menu-item-primitive.tsx generated by @compiled/babel-plugin v0.39.1 */
"use strict";
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
require("./menu-item-primitive.compiled.css");
var _react = _interopRequireWildcard(require("react"));
var React = _react;
var _runtime = require("@compiled/react/runtime");
var _compiled = require("@atlaskit/primitives/compiled");
var _menuContext = require("./menu-context");
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 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 _1pfhze3t _12l2ze3t _6rthze3t _ahbqze3t _4cvr1h6o _uiztglyw _80omtlke _ymio1r31 _ypr0glyw _zcxs1o36 _nt751v1w _mizu1v1w _1bg41gjf _1ah31gjf _49pcnqa1 _ra3xnqa1 _1hvwdkaa _128mdkaa _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: "_11c8fhey",
wordBreak: "_1nmz1hna",
description: "_11c8wadc _syaz1rpy",
disabledDescription: "_syaz1gmx",
unselected: "_bfhksm61 _syaz1r31 _10531r31 _irr31dpa _30l31r31 _1di61dpa _9h8h1r31",
disabled: "_80om13gf _bfhksm61 _syaz1gmx _irr3sm61 _30l31gmx _1di6sm61 _9h8h1gmx",
selectedBorder: "_1mp4yh40 _1cs8stnw _1rusq98m _1kt9b3bt _1fkrze3t _iajmze3t _z5wtze3t",
selectedNotch: "_rfx3bx74 _1mp41y44 _1cs8stnw _1rusq98m _1kt9b3bt _1fkrutpp _iajmutpp _z5wtze3t",
selected: "_bfhk15s3 _syaz6x5g _10536x5g _irr3ufnl _30l316jw _1di6nozp _9h8h6x5g",
selectedOld: "_30l36x5g"
};
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 = (0, _react.useContext)(_menuContext.SpacingContext);
var selectionStyle = (0, _react.useContext)(_menuContext.SELECTION_STYLE_CONTEXT_DO_NOT_USE);
var UNSAFE_className = UNSAFE_externalClassName;
return function () {
return children({
className: (0, _runtime.ax)([(0, _runtime.ax)([styles.root, spacingMapStyles[spacing], !isDisabled && !isSelected && styles.unselected, !isDisabled && isSelected && styles.selected, !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(_compiled.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: (0, _runtime.ax)([styles.beforeAfterElement])
}, iconBefore), title && /*#__PURE__*/React.createElement("div", {
className: (0, _runtime.ax)([styles.content])
}, renderTitle(isTitleHeading ? 'h2' : 'span', {
children: title,
className: (0, _runtime.ax)([styles.title, shouldTitleWrap ? styles.wordBreak : styles.truncate]),
'data-item-title': true
}), description && /*#__PURE__*/React.createElement("span", {
"data-item-description": true,
className: (0, _runtime.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: (0, _runtime.ax)([styles.beforeAfterElement])
}, iconAfter))
});
}();
};
var _default = exports.default = MenuItemPrimitive;