@razorpay/blade/build/lib/native/components/BaseMenu/BaseMenuItem/BaseMenuItem.js

The Design System that powers Razorpay

import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
import React__default from 'react';
import { BaseMenuItemContext } from '../BaseMenuContext.js';
import { StyledMenuItemContainer } from './StyledMenuItemContainer.native.js';
import { itemFirstRowHeight } from './tokens.js';
import { Box } from '../../Box/Box.js';
import '../../Typography/Heading/Heading.js';
import { getTextProps, Text } from '../../Typography/Text/Text.js';
import '../../Typography/Code/Code.js';
import '../../Typography/Display/Display.js';
import { makeAccessible } from '../../../utils/makeAccessible/makeAccessible.native.js';
import { BaseText } from '../../Typography/BaseText/BaseText.native.js';
import { useTruncationTitle } from '../../../utils/useTruncationTitle/useTruncationTitle.native.js';
import 'react-native';
import '@babel/runtime/helpers/slicedToArray';
import { makeSize } from '../../../utils/makeSize/makeSize.js';
import '../../BladeProvider/useTheme.js';
import { jsx, jsxs } from 'react/jsx-runtime';

var _excluded=["title","description","as","leading","trailing","titleSuffix","isDisabled","selectionType","isSelected","isVisible","color","role","children"];var menuItemTitleColor={negative:{default:'feedback.text.negative.intense',disabled:'interactive.text.gray.disabled'},normal:{default:'interactive.text.gray.normal',disabled:'interactive.text.gray.disabled'}};var menuItemDescriptionColor={default:'interactive.text.gray.muted',disabled:'interactive.text.gray.disabled'};var _BaseMenuItem=function _BaseMenuItem(_ref,ref){var title=_ref.title,description=_ref.description,as=_ref.as,leading=_ref.leading,trailing=_ref.trailing,titleSuffix=_ref.titleSuffix,isDisabled=_ref.isDisabled,_ref$selectionType=_ref.selectionType,selectionType=_ref$selectionType===void 0?'single':_ref$selectionType,isSelected=_ref.isSelected,_ref$isVisible=_ref.isVisible,isVisible=_ref$isVisible===void 0?true:_ref$isVisible,color=_ref.color,_ref$role=_ref.role,role=_ref$role===void 0?'menuitem':_ref$role,children=_ref.children,props=_objectWithoutProperties(_ref,_excluded);var _useTruncationTitle=useTruncationTitle({content:title}),containerRef=_useTruncationTitle.containerRef,textRef=_useTruncationTitle.textRef;return jsx(BaseMenuItemContext.Provider,{value:{color:color,isDisabled:isDisabled},children:jsx(StyledMenuItemContainer,Object.assign({ref:ref,as:as,type:"button",disabled:isDisabled},makeAccessible({role:role,current:role==='menuitem'||role==='menuitemcheckbox'?isSelected:undefined,disabled:isDisabled,selected:isSelected}),{color:color,isVisible:isVisible,isSelected:isSelected,isDisabled:isDisabled,selectionType:selectionType},props,{children:children?children:jsxs(Box,{display:"flex",alignItems:"flex-start",width:"100%",justifyContent:"flex-start",children:[jsx(Box,{display:"flex",justifyContent:"center",alignItems:"center",height:makeSize(itemFirstRowHeight),children:leading}),jsxs(Box,{paddingLeft:leading?'spacing.3':'spacing.0',paddingRight:"spacing.3",display:"flex",flexDirection:"column",children:[jsxs(Box,{display:"flex",alignItems:"center",flexDirection:"row",height:makeSize(itemFirstRowHeight),ref:containerRef,children:[jsx(BaseText,Object.assign({as:"p",ref:textRef,truncateAfterLines:1,wordBreak:"break-all"},getTextProps({size:'medium',color:menuItemTitleColor[color==='negative'?'negative':'normal'][isDisabled?'disabled':'default'],weight:'regular'}),{children:title})),titleSuffix]}),jsx(Box,{children:description?jsx(Text,{color:menuItemDescriptionColor[isDisabled?'disabled':'default'],size:"small",children:description}):null})]}),jsx(Box,{marginLeft:"auto",children:trailing})]})}))});};var BaseMenuItem=React__default.forwardRef(_BaseMenuItem);

export { BaseMenuItem };
//# sourceMappingURL=BaseMenuItem.js.map