@atlaskit/menu
Version:
A list of options to help users navigate, or perform actions.
99 lines (98 loc) • 4.62 kB
JavaScript
/* menu-item-primitive.tsx generated by @compiled/babel-plugin v0.39.1 */
import "./menu-item-primitive.compiled.css";
import * as React from 'react';
import { useContext } from 'react';
import { ax, ix } from '@compiled/react/runtime';
import { Inline } from '@atlaskit/primitives/compiled';
import { SELECTION_STYLE_CONTEXT_DO_NOT_USE, SpacingContext } from './menu-context';
const renderTitle = (Component, props) =>
/*#__PURE__*/
// eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
React.createElement(Component, props);
const 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"
};
const spacingMapStyles = {
cozy: "_1rjcu2gc _18zrpxbi",
compact: "_1rjc1b66 _18zrutpp _1tkezwfg"
};
const 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>
* ```
*/
const MenuItemPrimitive = ({
children,
title,
description,
iconAfter,
iconBefore,
className: UNSAFE_externalClassName,
shouldTitleWrap = false,
shouldDescriptionWrap = false,
isDisabled = false,
isSelected = false,
isTitleHeading = false,
testId
}) => {
const spacing = useContext(SpacingContext);
const selectionStyle = useContext(SELECTION_STYLE_CONTEXT_DO_NOT_USE);
const UNSAFE_className = UNSAFE_externalClassName;
return (() => {
return children({
className: ax([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(Inline, {
as: "span",
spread: "space-between",
alignBlock: "center",
space: gapMap[spacing],
grow: "fill",
testId: testId && `${testId}--container`
}, iconBefore && /*#__PURE__*/React.createElement("span", {
"data-item-elem-before": true,
"data-testid": testId && `${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 && `${testId}--icon-after`,
className: ax([styles.beforeAfterElement])
}, iconAfter))
});
})();
};
export default MenuItemPrimitive;